/* ============================================================
   RS Bersy — hoja de estilos principal
   Diseño fiel a la maqueta v13 + responsive real y formularios.
   ============================================================ */

:root{
  --r:#8B1E2D;      /* burdeos principal */
  --rd:#641521;     /* burdeos oscuro */
  --c:#252A31;      /* carbón (texto) */
  --g:#5F6368;      /* gris secundario */
  --bg:#f7f8fa;     /* fondo base */
  --header-h:164px; /* alto del header en escritorio */
  --maxw:1600px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Sin height en html/body: el scroll vive en el viewport y solo actúa dentro
   de una sección más alta que la pantalla. El alto mínimo lo garantiza
   .app{min-height:100vh}. */
body{
  font-family:Aptos,"Aptos Display","Segoe UI",Arial,sans-serif;
  color:var(--c);
  background:var(--bg);
  overflow-x:clip;                /* recorta horizontal SIN crear scroll container */
  -webkit-font-smoothing:antialiased;
}
a{color:var(--r)}
img{max-width:100%;display:block}

.app{position:relative;min-height:100vh}

/* ---------- Capas de fondo ---------- */
.bg{
  position:fixed;inset:0;z-index:0;
  background:center/cover no-repeat var(--bg);   /* cover: imagen a pantalla completa */
  opacity:.99;transition:opacity .35s ease;
  animation:bg 22s ease-in-out infinite;
}
/* Fondo corporativo (imagen de Juan Carlos, 20/08) para las páginas "documento":
   artículos del blog y legales, que iban con el fondo liso. Horizontal en
   pantalla apaisada y versión vertical en móvil. */
.bg--doc{background-image:url("../img/bg-doc.webp")}
@media(max-width:900px) and (orientation:portrait){
  .bg--doc{background-image:url("../img/bg-doc-v.webp")}
}

.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.46) 36%,rgba(255,255,255,.08) 72%,rgba(255,255,255,.14)),
             radial-gradient(circle at 28% 48%,rgba(255,255,255,.34),transparent 34%);
}
.veil.right{
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.10) 42%,rgba(255,255,255,.58) 68%,rgba(255,255,255,.84)),
             radial-gradient(circle at 76% 45%,rgba(255,255,255,.40),transparent 34%);
}
/* .veil.private ya no lleva reglas propias: usa el velo estándar. */
.line-svg{
  position:fixed;left:-4%;right:-4%;bottom:18%;height:260px;width:108%;
  z-index:3;pointer-events:none;opacity:.62;
}
/* Petición del cliente: la línea que se dibuja al entrar en cada sección debe
   verse MÁS granate y MÁS gruesa. Mientras se traza va a 3px y opacidad plena;
   al terminar se asienta en 2.2px (el salto es pequeño a propósito: antes iba
   de 2.6 a 1.7 y se notaba cómo adelgazaba). */
.line-svg path{
  fill:none;stroke:var(--r);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:draw 2.2s ease forwards,breathe 7s ease-in-out 2.2s infinite;
}
.line-svg.spark path{animation:lineSpark 1.3s ease both}
/* Área Privada: la línea va exactamente igual que en el resto de secciones. */

/* ---------- Header / navegación ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:20;
  /* Transparente: la imagen se ve entera. Solo un velo degradado muy sutil
     (se funde con el cielo claro) para que el menú se lea al pasar contenido debajo. */
  background:linear-gradient(180deg,rgba(247,248,250,.82) 0%,rgba(247,248,250,.38) 55%,rgba(247,248,250,0) 100%);
  pointer-events:none;
  transition:background .25s ease,box-shadow .25s ease;
}
/* Al bajar, la cabecera deja de ser transparente. En las secciones largas
   (Quiénes somos, Reflexiones) el contenido pasaba por debajo y el menú se
   confundía con el fondo: el texto se leía A TRAVÉS del menú. Solo cambia la
   franja de la cabecera; el resto del diseño no se toca. */
header.scrolled{
  background:rgba(247,248,250,.97);
  box-shadow:0 1px 0 rgba(37,42,49,.07),0 6px 24px rgba(37,42,49,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
header .nav,header .lang-switch{pointer-events:auto}
.nav{
  max-width:var(--maxw);margin:auto;min-height:var(--header-h);
  padding:18px 36px 10px;display:flex;align-items:flex-start;gap:22px;
}
.logo{width:205px;height:92px;flex-shrink:0;display:flex;cursor:pointer;perspective:900px;background:none;border:0}
.logo img{max-width:190px;max-height:88px;object-fit:contain;transition:.65s}
.logo:hover img{transform:perspective(900px) rotateY(6deg) rotateZ(-.4deg) scale(1.01);filter:drop-shadow(0 10px 22px rgba(139,30,45,.16))}
.logo.pulse img{animation:logoPulse 920ms ease both}

.nav-wrap{flex:1;display:flex;justify-content:flex-end}
.nav-list{list-style:none;display:flex;align-items:flex-start;justify-content:flex-end;gap:17px;flex-wrap:nowrap}
.nav-btn{
  border:0;background:transparent;color:var(--c);font-family:inherit;cursor:pointer;text-decoration:none;
  width:104px;min-height:126px;flex-shrink:0;text-transform:uppercase;font-size:10.7px;font-weight:650;
  letter-spacing:.2px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:.24s;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.75);   /* legible sobre la imagen */
}
.nav-btn .label{min-height:28px;display:flex;align-items:flex-end;justify-content:center;text-align:center}
.mark{width:28px;height:2px;background:var(--r);opacity:.85;transform:scaleX(.7);transition:.25s}
/* Miniatura SIEMPRE visible bajo cada pestaña, como tarjetita blanca con la
   escena de la sección (igual que en la maqueta del cliente). Antes era un PNG
   casi transparente al 72% que se fundía con el fondo y "no se veía". */
.nav-thumb{
  width:96px;height:38px;border-radius:5px;
  background-color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(37,42,49,.10);box-shadow:0 6px 16px rgba(37,42,49,.14);
  opacity:.92;transition:.24s;
}
.nav-btn:hover,.nav-btn.active{color:var(--r);transform:translateY(-1px)}
.nav-btn:hover .mark,.nav-btn.active .mark{transform:scaleX(1)}
.nav-btn:hover .nav-thumb,.nav-btn.active .nav-thumb{opacity:1;transform:translateY(-2px) scale(1.06);box-shadow:0 12px 26px rgba(37,42,49,.22);border-color:rgba(139,30,45,.35)}

/* Petición del cliente: al pasar el ratón por una pestaña, un "recuadrito" con
   la pantalla a la que se va a entrar. Es la propia miniatura ampliada,
   colgando bajo el botón; sólo en dispositivos con puntero (en táctil no hay
   hover y estorbaría). */
.nav-btn{position:relative}
.nav-preview{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px) scale(.96);
  width:196px;height:110px;border-radius:9px;
  background:#fff center/cover no-repeat;
  border:1px solid rgba(37,42,49,.14);box-shadow:0 22px 48px rgba(37,42,49,.24);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:30;
}
.nav-preview::after{     /* piquito superior */
  content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:#fff;border-left:1px solid rgba(37,42,49,.14);border-top:1px solid rgba(37,42,49,.14);
}
@media(hover:hover) and (pointer:fine){
  .nav-btn:hover .nav-preview{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

.private-btn{
  width:108px;height:92px;min-height:92px;color:#fff!important;
  background:linear-gradient(135deg,var(--r),var(--rd));border-radius:8px;
  box-shadow:0 14px 28px rgba(139,30,45,.24);padding:10px 9px;justify-content:center;gap:7px;
}
.private-btn .mark,.private-btn .nav-thumb{display:none}
.lock{font-size:22px;line-height:1}

/* Selector de idioma ES | EN */
.lang-switch{
  position:absolute;top:10px;right:36px;z-index:21;
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;color:var(--g);
}
/* Con la nav horizontal, el selector iba en absolute sobre la esquina derecha
   y se pintaba ENCIMA del botón de Área Privada (texto gris sobre el granate).
   Pasando el header a dos filas desaparece el solape a cualquier ancho, sin
   depender de ajustar píxeles a mano.
   width:100% en .nav es imprescindible: lleva margin:auto y dentro de un flex
   ese margen absorbe el espacio libre en lugar de estirar el elemento. */
@media(min-width:1011px){
  header{display:flex;flex-direction:column}
  .lang-switch{position:static;align-self:flex-end;margin:9px 36px 0;z-index:auto}
  .nav{width:100%;padding-top:4px}
}
.lang-switch span{opacity:.45}
.lang-link{color:var(--g);text-decoration:none;padding:3px 4px;transition:.2s}
.lang-link:hover{color:var(--r)}
.lang-link.active{color:var(--r);border-bottom:2px solid var(--r)}

/* Botón hamburguesa (solo móvil) */
.nav-toggle{
  display:none;position:relative;width:46px;height:40px;border:0;background:transparent;
  cursor:pointer;flex-direction:column;justify-content:center;gap:6px;margin-left:auto;
}
.nav-toggle span{display:block;height:2.5px;width:26px;background:var(--c);border-radius:2px;transition:.28s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* ---------- Main / pantallas ---------- */
/* Modo "pantallas": solo la sección activa está en el documento; el menú
   cambia de una a otra con un fundido, sin scroll entre secciones.
   Sin JS (html.no-js) se muestran todas apiladas, para buscadores y fallback. */
main{position:relative;z-index:5}
html.js main > .screen{display:none}
html.js main > .screen.active{display:grid;animation:screenIn .34s ease both}
html.js main > .screen.active.private{display:block}
/* La pantalla activa ocupa el hueco entre el header (fijo) y el footer, de modo
   que una sección corta cabe justa y no obliga a hacer scroll para ver el pie.
   flex:1 0 auto = puede crecer, nunca encoge: las secciones largas (Contacto,
   Área Privada) conservan su alto y ahí sí se hace scroll dentro de la sección. */
html.js .app{display:flex;flex-direction:column}
html.js main{display:flex;flex-direction:column;flex:1 0 auto;min-height:0}
/* width:100% es imprescindible: .screen lleva margin:auto y, dentro de un
   contenedor flex, ese margen se come el espacio libre en lugar de estirar el
   elemento. Sin esto la sección encoge a su contenido y queda descentrada
   (se veía sobre todo en el Área Privada, que es display:block). */
html.js main > .screen.active{flex:1 0 auto;min-height:0;width:100%}
.screen{
  max-width:var(--maxw);margin:auto;min-height:100vh;
  padding:calc(var(--header-h) + 30px) 56px 34px;
  display:grid;grid-template-columns:minmax(430px,650px) 1fr;gap:30px;align-items:center;
}
.screen.right{grid-template-columns:1fr minmax(430px,620px)}

.copy{
  max-width:650px;z-index:4;animation:up .55s ease both;
  /* Tilt 3D suave (lo mueve main.js siguiendo el ratón) */
  will-change:transform;transition:transform .3s ease-out;transform-style:preserve-3d;
}
.screen.right .copy{grid-column:2;max-width:600px}
.copy.bump{animation:textBump 680ms ease both}

.kicker{
  /* font-weight explícito: en Inicio el kicker es un <h1> y sin esto heredaría
     el 650 de la regla del titular. */
  font-weight:400;
  color:#39404a;font-size:19px;line-height:1.35;margin-bottom:34px;letter-spacing:.2px;
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #dfe2e6,0 2px 1px rgba(37,42,49,.18),0 10px 20px rgba(30,34,40,.12);
  animation:floatSmall 8s ease-in-out infinite;
}
/* :not(.kicker) -> en Inicio el <h1> es la línea de marca, pequeña, y NO debe
   recibir el tamaño del titular. .title-big lleva ese estilo aunque sea un h2,
   así que el titular grande se ve igual con cualquiera de las dos etiquetas. */
h1:not(.kicker),.title-big{
  font-size:clamp(34px,3.2vw,54px);line-height:1.15;letter-spacing:-1.2px;font-weight:650;color:#27303a;margin-bottom:30px;
  /* RELIEVE (petición reiterada del cliente: "que se despegue del fondo").
     Las sombras difusas no lo conseguían: lo que da volumen es un CANTO de
     dos capas sólidas bajo cada trazo (la letra parece recortada y levantada),
     más un filo de luz arriba y una sombra corta de contacto. La sombra larga
     queda como apoyo, no como protagonista. */
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #d8dbe0,0 2px 0 #c4c8ce,0 3px 2px rgba(37,42,49,.24),0 9px 16px rgba(37,42,49,.16),0 22px 40px rgba(37,42,49,.12);
  animation:float 7s ease-in-out infinite;
}
h1:not(.kicker) span,.title-big span{color:var(--r);text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #d9b3b8,0 2px 0 #c99aa1,0 3px 2px rgba(100,21,33,.28),0 9px 16px rgba(139,30,45,.18),0 22px 40px rgba(139,30,45,.14)}
.rule{width:72px;height:3px;background:var(--r);margin:0 0 32px;box-shadow:0 8px 18px rgba(139,30,45,.16)}
.subtitle,.countries,.lead{
  color:#323943;font-size:19px;line-height:1.55;max-width:590px;
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #dfe2e6,0 2px 1px rgba(37,42,49,.20),0 7px 12px rgba(37,42,49,.12);
  animation:floatSmall 8s ease-in-out infinite;
}
.subtitle{margin-bottom:22px}
.countries{font-size:16px;margin-bottom:34px}
.lead{font-size:17px;margin-bottom:30px}

.cta-row{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  border:0;border-radius:5px;padding:15px 24px;font-family:inherit;font-weight:800;letter-spacing:.8px;
  font-size:13.5px;text-transform:uppercase;cursor:pointer;transition:.25s;text-decoration:none;display:inline-block;
}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--r),var(--rd));box-shadow:0 14px 28px rgba(139,30,45,.24)}
.btn-secondary{color:var(--r);background:rgba(255,255,255,.10);border:1px solid rgba(139,30,45,.55);backdrop-filter:blur(2px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(28,32,38,.14)}
.btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- Tarjetas de información ---------- */
.info{
  /* A TODO el ancho de la sección (grid-column:1/-1), como en la maqueta del
     cliente. Tenerla encajonada en la columna del texto (650px) dejaba las
     tarjetas en ~120px y los títulos no cabían por más que se afinara la
     letra: de ahí las eses sueltas que veían los socios. */
  grid-column:1/-1;align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;
  animation:up .72s ease both;
}
.info.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.info.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.info-card{
  /* Petición del cliente (21/08): en las secciones de fondo más claro los
     cajetines apenas se veían. Más relleno, borde con un punto de gris (el
     borde blanco desaparecía sobre blanco) y sombra un pelín más presente. */
  background:rgba(255,255,255,.62);backdrop-filter:blur(3px);border:1px solid rgba(37,42,49,.12);
  border-radius:10px;padding:18px 16px;min-height:92px;
  box-shadow:0 14px 30px rgba(37,42,49,.07),inset 0 1px 0 rgba(255,255,255,.55);transition:.25s;
  min-width:0;   /* permite que la tarjeta se encoja: sin esto el texto obliga a la caja a crecer y desborda */
}
.info-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.78);box-shadow:0 22px 52px rgba(37,42,49,.13),inset 0 1px 0 rgba(255,255,255,.6)}
/* Título ajustado al ancho DE LA TARJETA (container query), no de la ventana:
   con 1.45vw, en portátiles la tarjeta no crece con la ventana y palabras como
   "Metodología" o "Coordinación" partían su última letra a la línea siguiente
   (lo vio el cliente en un MacBook). 12cqw = 12% del ancho de la tarjeta:
   "Confidencialidad" (16 letras) cabe siempre en una línea; en tarjetas anchas
   el clamp lo frena en 23px. Fallback 1.35vw para navegadores sin container
   queries (2022): algo más conservador que antes. */
.info-card{container-type:inline-size}
.info-card h2{
  color:var(--r);font-size:23px;line-height:1.08;margin-bottom:8px;font-weight:500;
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #dcb8bd,0 2px 1px rgba(100,21,33,.22),0 7px 12px rgba(139,30,45,.12);
  overflow-wrap:break-word;   /* red de seguridad; con el tamaño correcto no llega a actuar */
}
@supports (container-type:inline-size){
  .info-card h2{font-size:clamp(12px,min(23px,13.5cqw),23px)}
}
.info-card p{color:#303842;font-size:13.4px;line-height:1.42;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.info-card small{display:block;margin-top:8px;color:#303842;font-size:12.2px;line-height:1.55;font-weight:400;text-shadow:0 1px 0 rgba(255,255,255,.9)}

/* Tarjetas con icono (Reflexiones) — icono flotante superior */
.info-card.icon-card{
  position:relative;text-align:center;overflow:visible;min-height:178px;padding:54px 28px 26px;
  background:rgba(255,255,255,.32);border:1px solid rgba(37,42,49,.10);border-radius:10px;
  box-shadow:0 18px 44px rgba(37,42,49,.08),inset 0 1px 0 rgba(255,255,255,.55);backdrop-filter:blur(3px);
}
.info-card.icon-card .card-icon{
  position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;color:var(--r);font-size:46px;line-height:1;font-weight:400;
  text-shadow:0 1px 0 rgba(255,255,255,.96),0 8px 18px rgba(95,99,104,.16),0 14px 30px rgba(139,30,45,.18);
  filter:drop-shadow(0 12px 20px rgba(139,30,45,.10));
}
.info-card.icon-card h2{margin:0 0 13px;color:#252A31;font-size:18.5px;line-height:1.25;font-weight:650;letter-spacing:.05px;text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #dfe2e6,0 2px 1px rgba(37,42,49,.20),0 7px 12px rgba(37,42,49,.12)}
.info-card.icon-card .mini-rule{width:42px;height:2px;margin:0 auto 17px;background:var(--r);opacity:.82;box-shadow:0 8px 18px rgba(139,30,45,.16)}
.info-card.icon-card p{max-width:260px;margin:0 auto;color:#39404A;font-size:14.4px;line-height:1.55;font-weight:400;text-shadow:0 1px 0 rgba(255,255,255,.95),0 8px 18px rgba(37,42,49,.08)}
.info-card.icon-card:hover .card-icon{transform:translateX(-50%) translateY(-3px) scale(1.02)}

/* ---------- Layout Área Privada ---------- */
.screen.private{
  display:block;padding:calc(var(--header-h) + 30px) 56px 40px;
  /* Sin parche de imagen aquí: el Área Privada usa el mismo fondo a pantalla
     completa que el resto de secciones (bg-area_privada-amb, vía data-bg),
     así no hay corte entre "arriba con imagen" y "abajo en blanco". */
}
/* Candado rojo junto al título y subtítulo en rojo, como en el diseño */
.screen.private h1::before{
  content:"";display:inline-block;width:.72em;height:.82em;margin-right:.35em;vertical-align:-.06em;
  background:var(--r);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>') center/contain no-repeat;
}
.screen.private .subtitle{color:var(--r)}
.private-inner{max-width:1100px;margin:auto;width:100%}
/* Aire entre los botones "Iniciar sesión / Solicitar acceso" y lo que sigue
   (petición del cliente: iban demasiado pegados). El respiro real lo da la
   cabecera .portal-head que va detrás, igual que el rótulo "EQUIPO" en Quiénes
   somos: no es sólo margen vacío, hay un título que presenta los cajetines. */
.private-inner .copy{max-width:820px;margin-bottom:46px}
.portal-head{margin:0 0 22px;padding-top:22px;border-top:1px solid rgba(139,30,45,.14);max-width:820px}
.portal-head .strip-title{margin-bottom:8px}
.private-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start;margin-top:6px}
.private-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.private-card{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);border-radius:10px;
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 12px 28px rgba(37,42,49,.04);transition:.25s;
}
.private-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.2)}
.private-card .num{color:var(--r);font-size:20px;font-weight:800;line-height:1;flex-shrink:0;opacity:.9}
.private-card h3{font-size:14.5px;font-weight:650;color:#252A31;line-height:1.3;margin:0}
.private-card small{display:block;margin-top:8px;color:#39404A;font-size:12px;line-height:1.5;font-weight:400}

/* ---------- Formularios ---------- */
.form-card{
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);border-radius:14px;
  padding:26px 26px 24px;box-shadow:0 22px 60px rgba(37,42,49,.10);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.form-card h2{font-size:22px;font-weight:650;color:#27303a;margin-bottom:6px;letter-spacing:-.3px}
.form-card .form-intro{font-size:14px;color:#4a515b;line-height:1.5;margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.4px;color:#4a515b;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--c);background:rgba(255,255,255,.85);   /* 16px: evita el auto-zoom de iOS al enfocar */
  border:1px solid rgba(37,42,49,.16);border-radius:8px;padding:12px 14px;transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--r);box-shadow:0 0 0 3px rgba(139,30,45,.12);background:#fff;
}
.field textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}  /* honeypot */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#4a515b;line-height:1.5;margin:4px 0 16px}
.consent input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--r)}
.consent a{color:var(--r)}
.form-msg{margin-top:14px;font-size:14px;line-height:1.5;padding:12px 14px;border-radius:8px;display:none}
.form-msg.ok{display:block;background:rgba(30,120,60,.10);color:#1c6b39;border:1px solid rgba(30,120,60,.25)}
.form-msg.err{display:block;background:rgba(139,30,45,.08);color:var(--rd);border:1px solid rgba(139,30,45,.28)}
.form-note{font-size:12px;color:var(--g);margin-top:14px;line-height:1.5}

/* ---------- Botón flotante de WhatsApp ----------
   Va colocado donde TERMINA la línea granate y aparece justo cuando la línea
   acaba de dibujarse (2,2 s), como si fuera su remate.
   El SVG de la línea está en bottom:18% con 260px de alto y su trazo acaba en
   y=72 del viewBox, es decir 188px por encima de su borde inferior; restamos
   media altura del botón (26px) para centrarlo en ese punto. */
/* ---------- Botón flotante de contacto (hub) ----------
   Sustituye al antiguo icono suelto de WhatsApp: ahora agrupa las tres vías de
   contacto y lleva los colores corporativos. */
.hub{
  position:fixed;right:22px;bottom:calc(18% + 162px);z-index:52;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  animation:hubIn .55s ease 2.2s both;
}
.page-doc .hub{bottom:calc(22px + env(safe-area-inset-bottom,0px));animation-delay:.4s}
/* main.js lo esconde al cambiar de sección y lo devuelve cuando la línea
   termina de dibujarse (igual que hacía el botón anterior). */
.hub.wa-hide{opacity:0;visibility:hidden;transform:translateY(16px) scale(.6);pointer-events:none;animation:none}
.hub.wa-show{animation:hubIn .5s ease both}
@keyframes hubIn{from{opacity:0;transform:translateY(16px) scale(.6)}to{opacity:1;transform:none}}

/* Círculo gris claro, como el antiguo icono de WhatsApp: discreto sobre el
   fondo. El granate se reserva para la burbuja y el hover. */
.hub-toggle{
  position:relative;
  width:54px;height:54px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(37,42,49,.14);
  box-shadow:0 12px 30px rgba(37,42,49,.18);
  color:var(--g);
  font-family:inherit;
  transition:color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.hub-toggle:hover{color:var(--r);transform:translateY(-3px);box-shadow:0 18px 40px rgba(139,30,45,.22)}

/* Halo que late hacia fuera: llama la atención sin ruido. Se para al abrir o
   al pasar el ratón, que es cuando ya ha cumplido su función. */
.hub-toggle::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(139,30,45,.5);
  animation:hubHalo 3s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
.hub-toggle:hover::before,.hub.is-open .hub-toggle::before{animation:none;opacity:0}
@keyframes hubHalo{
  0%{transform:scale(.92);opacity:.75}
  65%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

.hub-toggle-ico{width:24px;height:24px;position:relative;flex-shrink:0}
.hub-toggle-ico svg{width:24px;height:24px;position:absolute;inset:0;transition:opacity .2s ease,transform .3s ease}
.hub-toggle-ico .i-x{opacity:0;transform:rotate(-90deg)}
.hub.is-open .hub-toggle-ico .i-chat{opacity:0;transform:rotate(90deg)}
.hub.is-open .hub-toggle-ico .i-x{opacity:1;transform:none}

/* --- Burbujita "Contacto" que sale del icono --- */
.hub-badge{
  position:absolute;right:calc(100% + 11px);top:50%;
  background:linear-gradient(135deg,var(--r),var(--rd));color:#fff;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(139,30,45,.34);
  /* Nace DENTRO del círculo y crece hacia la izquierda */
  transform-origin:right center;
  transform:translateY(-50%) scale(0);
  opacity:0;
  animation:hubBadgeSale .5s cubic-bezier(.34,1.56,.64,1) 3s forwards,
            hubBadgeLate 3.4s ease-in-out 3.6s infinite;
}
/* Piquito hacia el círculo */
.hub-badge::after{
  content:'';position:absolute;left:100%;top:50%;margin-top:-4px;
  border:4px solid transparent;border-left-color:var(--rd);
}
@keyframes hubBadgeSale{
  from{transform:translateY(-50%) scale(0);opacity:0}
  to  {transform:translateY(-50%) scale(1);opacity:1}
}
/* Respira: un empujoncito suave, sin marear */
@keyframes hubBadgeLate{
  0%,100%{transform:translateY(-50%) scale(1)}
  50%    {transform:translateY(-50%) scale(1.06)}
}
/* Al abrir el menú la etiqueta sobra: las opciones ya se explican solas.
   Y mientras se ve el globo de la primera visita tampoco, para no amontonar. */
.hub.is-open .hub-badge,.hub.hub-con-pista .hub-badge{
  animation:none;opacity:0;transform:translateY(-50%) scale(.4);
  transition:opacity .2s ease,transform .2s ease;
}
@media(prefers-reduced-motion:reduce){
  .hub-toggle::before{animation:none;opacity:0}
  .hub-badge{animation:hubBadgeSale .01s linear 0s forwards}
}

/* --- Opciones --- */
.hub-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* IMPRESCINDIBLE: el atributo hidden vale display:none, pero es estilo del
   NAVEGADOR y cualquier display de autor lo pisa. Sin estas dos reglas, el
   display:flex de arriba y el de .hub-modal dejaban el desplegable y la capa
   del formulario visibles siempre. */
.hub-menu[hidden],.hub-modal[hidden]{display:none}
.hub-item{
  display:flex;align-items:center;gap:11px;width:236px;
  padding:11px 14px;border-radius:12px;border:1px solid rgba(37,42,49,.10);
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(37,42,49,.16);
  text-decoration:none;cursor:pointer;text-align:left;font-family:inherit;
  transform:translateY(8px);opacity:0;animation:hubItem .28s ease forwards;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.hub-item:nth-child(2){animation-delay:.05s}
.hub-item:nth-child(3){animation-delay:.1s}
.hub-item:hover{transform:translateX(-3px);box-shadow:0 18px 38px rgba(139,30,45,.20);border-color:rgba(139,30,45,.32)}
@keyframes hubItem{to{opacity:1;transform:none}}
.hub-ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,30,45,.09);color:var(--r);
}
.hub-ico svg{width:18px;height:18px}
.hub-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hub-txt strong{font-size:14px;font-weight:700;color:#27303a}
.hub-txt small{font-size:11.8px;color:var(--g)}

/* --- Globo de aviso (solo la primera visita) --- */
.hub-hint{
  position:relative;max-width:252px;
  background:#fff;border:1px solid rgba(37,42,49,.10);border-radius:12px;
  padding:13px 32px 13px 14px;
  box-shadow:0 16px 38px rgba(37,42,49,.18);
  animation:hubItem .3s ease forwards;
}
.hub-hint p{font-size:13.2px;line-height:1.45;color:#39404a;margin:0}
/* Piquito apuntando al botón */
.hub-hint::after{
  content:'';position:absolute;right:26px;bottom:-7px;width:12px;height:12px;
  background:#fff;border-right:1px solid rgba(37,42,49,.10);border-bottom:1px solid rgba(37,42,49,.10);
  transform:rotate(45deg);
}
.hub-hint-x{
  position:absolute;top:5px;right:7px;border:0;background:none;cursor:pointer;
  font-size:19px;line-height:1;color:var(--g);padding:2px 5px;font-family:inherit;
}
.hub-hint-x:hover{color:var(--r)}

/* --- Formulario en capa --- */
.hub-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.hub-modal-bg{position:absolute;inset:0;background:rgba(37,42,49,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hub-modal-box{
  position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:16px;padding:26px 26px 22px;
  box-shadow:0 40px 90px rgba(37,42,49,.34);
  animation:hubModal .3s ease both;
}
@keyframes hubModal{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.hub-modal-box h2{font-size:21px;font-weight:650;color:#27303a;margin-bottom:16px;padding-right:28px}
.hub-modal-x{
  position:absolute;top:12px;right:14px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--g);padding:2px 6px;font-family:inherit;
}
.hub-modal-x:hover{color:var(--r)}
/* Dentro de la capa el formulario no necesita cristal ni sombra propios */
.hub-form{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}

@media(max-width:900px){
  /* En móvil, abajo del todo. En escritorio va a media altura para acompañar
     la línea animada, pero en una pantalla estrecha eso lo deja en mitad del
     contenido y estorba. env(safe-area-inset-bottom) lo mantiene por encima de
     la barra del iPhone. */
  .hub{right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .hub-badge{font-size:10px;padding:5px 10px}
  .hub-item{width:210px}
  .hub-hint{max-width:210px}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:rgba(37,42,49,.96);color:#fff;padding:14px 22px;border-radius:10px;font-size:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.28);z-index:60;opacity:0;pointer-events:none;transition:.35s;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Banner de cookies ---------- */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:55;max-width:720px;margin:auto;
  background:rgba(255,255,255,.97);border:1px solid rgba(37,42,49,.12);border-radius:14px;
  padding:20px 22px;box-shadow:0 24px 60px rgba(37,42,49,.22);backdrop-filter:blur(10px);
  display:block;
}
/* El atributo hidden es estilo del NAVEGADOR y cualquier display de autor lo
   pisa. Sin esto el aviso saldría siempre, aunque el JS lo diera por cerrado. */
.cookie[hidden],.cookie-panel[hidden],.cookie-aviso[hidden]{display:none}
.cookie h2{font-size:16px;font-weight:650;color:#27303a;margin-bottom:7px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
/* Rechazar debe pesar lo mismo que aceptar: mismo tamaño y misma presencia.
   Un "rechazar" en letra pequeña o escondido no vale como consentimiento. */
.cookie .btn{padding:11px 18px;font-size:12.5px}
.cookie .btn-ghost{background:#fff;color:var(--r);border:1px solid rgba(139,30,45,.45)}
.cookie .btn-ghost:hover{background:rgba(139,30,45,.06)}

/* --- Panel de categorías --- */
.cookie-panel{max-height:60vh;overflow-y:auto}
.ck-cat{padding:13px 0;border-bottom:1px solid rgba(37,42,49,.10)}
.ck-cat:last-of-type{border-bottom:0}
.ck-cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ck-cat-top strong{font-size:14.5px;font-weight:650;color:#27303a}
.ck-cat p{font-size:13px;line-height:1.5;color:#5a616b;margin-top:5px}
.ck-fija{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--g);background:rgba(90,99,113,.13);padding:4px 10px;border-radius:20px}

/* Interruptor */
.ck-sw{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.ck-sw input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.ck-sw-pista{width:44px;height:24px;border-radius:20px;background:#c9ced6;transition:.22s;display:block}
.ck-sw-pista::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(37,42,49,.28);transition:.22s}
.ck-sw input:checked + .ck-sw-pista{background:var(--r)}
.ck-sw input:checked + .ck-sw-pista::after{transform:translateX(20px)}
.ck-sw input:focus-visible + .ck-sw-pista{outline:3px solid rgba(139,30,45,.45);outline-offset:2px}

/* Enlace del pie para cambiar el consentimiento en cualquier momento */
.ft-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
.ft-link:hover{color:var(--r)}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cookie p{flex:1;min-width:240px;font-size:13.5px;line-height:1.5;color:#3a414b}
.cookie a{color:var(--r)}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:11px 18px;font-size:12px}
.btn-ghost{background:transparent;border:1px solid rgba(37,42,49,.28);color:var(--c)}

/* ---------- Footer ---------- */
footer{
  position:relative;z-index:5;margin-top:20px;padding:26px 36px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);border-top:1px solid rgba(37,42,49,.08);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center;
  font-size:12.5px;color:var(--g);text-align:center;
}
footer .foot-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
footer a{color:var(--g);text-decoration:none;transition:.2s}
footer a:hover{color:var(--r)}
footer .sep{opacity:.4}

/* ---------- Páginas legales ---------- */
.legal-wrap{
  position:relative;z-index:5;max-width:860px;margin:auto;
  padding:calc(var(--header-h) + 40px) 28px 60px;
}
.legal-wrap h1{font-size:clamp(28px,3vw,42px);animation:none;margin-bottom:10px}
.legal-wrap .legal-date{color:var(--g);font-size:13px;margin-bottom:30px}
.legal-wrap h2{font-size:20px;color:var(--r);margin:28px 0 10px;font-weight:650}
.legal-wrap p,.legal-wrap li{font-size:15px;line-height:1.7;color:#3a414b;margin-bottom:10px}
.legal-wrap ul{padding-left:22px;margin-bottom:12px}
.legal-wrap a{color:var(--r)}
.back-home{display:inline-block;margin-top:26px}

/* ---------- Equipo (Quiénes Somos) ---------- */
.team-strip{grid-column:1/-1;margin-top:10px;animation:up .8s ease both}
/* Franja "síguenos en LinkedIn" entre los CTA y el equipo: una línea, con el
   logotipo, que ocupa el hueco que quedaba vacío y da salida a la página de la
   firma (que antes sólo estaba en Contacto). */
.follow-strip{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;
  padding:9px 16px 9px 12px;border-radius:8px;
  background:rgba(255,255,255,.30);border:1px solid rgba(255,255,255,.55);
  font-size:15px;color:#6F7480;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.follow-strip svg{width:17px;height:17px;color:var(--r);flex-shrink:0}
.follow-strip a{color:var(--r);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(139,30,45,.35);transition:.2s}
.follow-strip a:hover{border-bottom-color:var(--r)}
.strip-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--g);margin-bottom:8px}
/* Bloque según la maqueta de Juan Carlos (19/08): frases en Aptos Light 20-22px
   #3E4652 con la coletilla en granate, separador fino, EQUIPO grande en Light
   granate y entradilla 18-20px. Ancho de texto recomendado: 620-680px. */
.team-know{max-width:660px;margin:0 0 6px}
.team-know p{
  font-size:21px;font-weight:300;line-height:1.62;color:#3E4652;margin:0 0 20px;
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #dfe2e6,0 2px 1px rgba(37,42,49,.16),0 7px 12px rgba(37,42,49,.10);
}
.team-know p span{color:var(--r)}
.team-sep{width:min(660px,100%);height:1px;background:rgba(62,70,82,.20);margin:44px 0}
.team-title{
  font-size:34px;font-weight:300;letter-spacing:.5px;text-transform:uppercase;color:#7A1E28;margin:0 0 12px;
  text-shadow:0 -1px 0 rgba(255,255,255,.85),0 1px 0 #d9b3b8,0 2px 1px rgba(100,21,33,.20),0 7px 12px rgba(139,30,45,.10);
}
.team-intro{max-width:660px;font-size:19px;line-height:1.6;color:#3E4652;margin:0 0 22px;text-shadow:0 1px 0 rgba(255,255,255,.95)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:74px}
.team-card{
  /* Menos traslúcidas: con .5 el skyline del fondo atravesaba la tarjeta y las
     bios no se leían. */
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.92);border-radius:12px;
  padding:20px 20px 18px;box-shadow:0 14px 34px rgba(37,42,49,.10);backdrop-filter:blur(6px);transition:.25s;
}
.team-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(37,42,49,.12)}

/* ---- Tarjeta con retrato recortado (fotos sin fondo del cliente) ----
   El retrato asoma por ENCIMA del borde superior del cajetín, de pie sobre una
   peana granate difusa; la tarjeta lleva el cristal habitual. Los tres
   retratos están encuadrados con el mismo marco 360x500 y la cabeza a la
   misma altura, así que alinean solos. */
.team-card.has-photo{position:relative;padding-top:162px;overflow:visible}
.team-photo{
  position:absolute;left:50%;top:-72px;transform:translateX(-50%);
  width:212px;height:232px;pointer-events:none;
}
.team-photo img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  /* el busto se desvanece suavemente al llegar al cajetín */
  -webkit-mask:linear-gradient(180deg,#000 74%,transparent 100%);
          mask:linear-gradient(180deg,#000 74%,transparent 100%);
  filter:drop-shadow(0 18px 22px rgba(37,42,49,.26));
  transition:transform .35s ease,filter .35s ease;
}
/* Halo granate MUY tenue detrás de la figura, a la altura del cajetín: ancla
   la silueta sin tapar el pecho ni la corbata. */
.team-photo::before{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:190px;height:54px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(139,30,45,.22),rgba(139,30,45,.06) 55%,transparent 72%);
  filter:blur(8px);z-index:-1;
}
.team-card.has-photo:hover .team-photo img{transform:translateY(-6px) scale(1.03);filter:drop-shadow(0 26px 30px rgba(37,42,49,.34))}
.team-card.has-photo h3{text-align:center;font-size:17.5px}
.team-card.has-photo .team-role{text-align:center}
.team-card.has-photo .team-bio{text-align:left}
.team-card.has-photo .team-linkedin{display:flex;justify-content:center;margin-top:14px}
.avatar{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--r),var(--rd));color:#fff;font-size:17px;font-weight:800;
  letter-spacing:.5px;margin-bottom:13px;box-shadow:0 10px 22px rgba(139,30,45,.24);
}
.team-card h3{font-size:16.5px;font-weight:650;color:#27303a;margin-bottom:3px;text-shadow:0 -1px 0 rgba(255,255,255,.8),0 1px 0 #e2e5e9,0 2px 1px rgba(37,42,49,.16)}
.team-role{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--r);margin-bottom:10px}
.team-bio{font-size:13.4px;line-height:1.55;color:#3d444e}
/* Enlace al perfil de LinkedIn de cada socio (sólo si está definido en data.php) */
.team-linkedin{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:12.5px;font-weight:650;color:var(--r);text-decoration:none;transition:.2s;
}
.team-linkedin svg{width:15px;height:15px;flex-shrink:0}
.team-linkedin:hover{text-decoration:underline;transform:translateX(2px)}

/* ---------- Datos de contacto (Contacto) ---------- */
.contact-details{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px;animation:up .8s ease both}
.contact-card{
  /* Sobre el fondo de Contacto (apretón de manos + skyline) con .5 el texto
     se confundía con la imagen. */
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.92);border-radius:12px;
  padding:16px 18px;box-shadow:0 12px 28px rgba(37,42,49,.05);backdrop-filter:blur(4px);
}
.contact-card h3{font-size:14.5px;font-weight:650;color:#27303a;margin-bottom:4px}
.contact-role{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--r);margin-bottom:8px}
.contact-card p{font-size:13px;line-height:1.6;color:#3d444e;margin:0}
.contact-card a{color:#3d444e;text-decoration:none;transition:.2s}
.contact-card a:hover{color:var(--r)}
.contact-card.office h3{color:var(--r)}
/* Tarjeta de socio con retrato (misma foto recortada que en Quiénes somos),
   como pedía el cliente señalando rsbersy.com/equipo. */
.contact-card.has-photo{display:flex;gap:12px;align-items:flex-start}
.contact-photo{
  flex-shrink:0;width:58px;height:58px;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,#fff,#e9ebef);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 14px rgba(37,42,49,.16);
}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block;transform:scale(1.9);transform-origin:50% 12%}
.contact-body{min-width:0}
.contact-li{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;font-weight:700;color:var(--r)!important}
.contact-li svg{width:13px;height:13px}
.contact-linkedin{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--r)!important}

/* ---------- Área Privada: bloques (pilares) detallados ---------- */
/* Tarjetas fieles al diseño entregado por el cliente (bg-area_privada):
   número + título arriba, imagen ilustrativa, checklist con ✔ y caja
   "Acceso restringido" al pie. */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:6px 0 32px}
/* Cajetines translúcidos como en el resto de secciones (petición del cliente:
   antes eran casi opacos y desentonaban). Mismo cristal que .info-card. */
.pillar-card{display:flex;flex-direction:column;background:rgba(255,255,255,.32);border:1px solid rgba(37,42,49,.10);border-radius:12px;padding:18px 16px;box-shadow:0 14px 34px rgba(37,42,49,.08),inset 0 1px 0 rgba(255,255,255,.55);backdrop-filter:blur(3px);transition:.25s}
.pillar-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(37,42,49,.13)}
.pillar-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;min-height:40px}
.pillar-num{font-size:24px;font-weight:650;color:var(--r);line-height:1.1;flex-shrink:0}
.pillar-title{font-size:15px;font-weight:650;color:#27303a;line-height:1.28;margin:1px 0 0;text-shadow:0 -1px 0 rgba(255,255,255,.8),0 1px 0 #e2e5e9,0 2px 1px rgba(37,42,49,.16)}
.pillar-img{display:block;height:150px;border-radius:8px;background:center/cover no-repeat #f0f1f3;margin-bottom:15px;box-shadow:0 8px 22px rgba(37,42,49,.08)}
.pillar-label{font-size:13px;font-weight:650;color:#27303a;margin-bottom:10px}
.pillar-list{list-style:none;margin:0 0 16px;padding:0;flex:1}
.pillar-list li{position:relative;padding-left:20px;font-size:12.8px;line-height:1.75;color:#3d444e}
.pillar-list li::before{content:"✔";position:absolute;left:0;top:0;color:var(--r);font-size:11px}
.pillar-foot{background:rgba(37,42,49,.045);border:1px solid rgba(37,42,49,.08);border-radius:8px;padding:12px 13px;margin-top:auto}
.pillar-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pillar-badge svg{width:14px;height:14px}
.pillar-foot.locked .pillar-badge{color:var(--r)}
.pillar-foot.open .pillar-badge{color:#1c7a44}
.pillar-note{display:block;margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--g)}
.pillar-card.is-open .pillar-list li::before{color:#1c7a44}
.pillar-card.is-open .pillar-num{color:#1c7a44}
.access-block{max-width:620px;margin:0 auto}
/* El formulario de acceso está plegado hasta pulsar "Solicitar acceso";
   sin JS se ve siempre (no depende del botón). */
html.js .access-block.collapsed{display:none}
.private-tagline{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;line-height:1.5;color:#323943;letter-spacing:.1px;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.tagline-shield{width:20px;height:20px;color:var(--r);flex-shrink:0}

/* ---------- Blog (Reflexiones): listado de artículos ---------- */
.blog-list{
  align-self:start;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;
  animation:up .72s ease both;
}
.screen.right .blog-list{grid-column:1/3}
.blog-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);border-radius:12px;
  box-shadow:0 14px 34px rgba(37,42,49,.07);transition:.25s;backdrop-filter:blur(4px);
}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(37,42,49,.14);background:rgba(255,255,255,.62)}

/* --- Último artículo destacado --- */
/* Borde granate y sombra con color: se distingue del resto sin romper la
   retícula ni cambiar de tamaño, así que el orden de lectura no se altera. */
.blog-card.destacado{
  position:relative;
  border-color:rgba(139,30,45,.55);
  box-shadow:0 16px 40px rgba(139,30,45,.16);
  background:rgba(255,255,255,.62);
}
.blog-card.destacado:hover{box-shadow:0 28px 60px rgba(139,30,45,.24)}
/* Etiqueta sobre la foto, esquina superior izquierda */
.blog-flag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:linear-gradient(135deg,var(--r),var(--rd));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;
  box-shadow:0 6px 16px rgba(139,30,45,.34);
}
/* Cuando es novedad de verdad, late un poco para llamar la atención */
.blog-flag.es-nuevo{animation:flagLate 2.6s ease-in-out infinite}
@keyframes flagLate{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.blog-flag.es-nuevo{animation:none}}
/* Las fotos venían en color pleno y se peleaban con el gris y el granate del
   resto del sitio. background-blend-mode:luminosity toma la LUMINANCIA de la
   foto y el tono del granate corporativo (duotono), y el filtro lo aclara y le
   quita saturación hasta dejarlo en gris claro con un punto de granate.
   Para subir el granate, sube el saturate(); para bajarlo, bájalo. */
.blog-thumb{
  display:block;width:100%;aspect-ratio:16/9;
  background-size:cover;background-position:center;
  background-color:var(--r);
  background-blend-mode:luminosity;
  filter:brightness(1.18) contrast(.88) saturate(.22);
  transition:filter .3s ease;
}
/* Al pasar por encima recupera algo de color: da señal de que es pulsable. */
.blog-card:hover .blog-thumb{filter:brightness(1.06) contrast(.95) saturate(.7)}
.blog-card-body{display:flex;flex-direction:column;gap:7px;padding:16px 17px 18px;flex:1}
.blog-date{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--r)}
.blog-title{font-size:16px;font-weight:650;line-height:1.3;color:#27303a;margin:0}
.blog-excerpt{font-size:13px;line-height:1.5;color:#4a515b;flex:1}
.blog-more{font-size:12.5px;font-weight:700;color:var(--r);margin-top:4px}
.blog-note{grid-column:1/-1;font-size:12.5px;color:var(--g);font-style:italic;margin-top:2px}

/* ---------- Página de artículo ---------- */
.article-wrap{
  position:relative;z-index:5;max-width:780px;margin:auto;
  padding:calc(var(--header-h) + 34px) 24px 60px;
}
.article-back{display:inline-block;margin-bottom:22px;color:var(--r);text-decoration:none;font-size:13.5px;font-weight:650}
.article-back:hover{text-decoration:underline}
.article-kicker{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--g);margin-bottom:12px}
.article-title{font-size:clamp(28px,3.4vw,42px);line-height:1.18;letter-spacing:-.8px;color:#232a33;font-weight:650;margin-bottom:12px;animation:none}
.article-date{color:var(--g);font-size:14px;margin-bottom:26px}
.article-hero{margin:0 0 30px;border-radius:14px;overflow:hidden;box-shadow:0 22px 54px rgba(37,42,49,.16)}
.article-hero img{width:100%;height:auto;display:block}
.article-body{font-size:17px;line-height:1.75;color:#333a44}
.article-body h2{font-size:24px;line-height:1.25;color:var(--r);font-weight:650;margin:34px 0 12px;letter-spacing:-.3px}
.article-body h3{font-size:19px;line-height:1.3;color:#27303a;font-weight:650;margin:26px 0 10px}
.article-body p{margin-bottom:18px}
.article-body ul{list-style:none;margin:0 0 20px;padding:0}
.article-body li{position:relative;padding-left:22px;margin-bottom:10px}
.article-body li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--r)}
.article-body blockquote{margin:0 0 20px;padding:6px 20px;border-left:3px solid var(--r);font-style:italic;color:#3d444e}
.article-foot{margin-top:40px;padding-top:26px;border-top:1px solid rgba(37,42,49,.12);text-align:center}
.article-foot p{font-size:16px;color:#3a414b;margin-bottom:16px}

/* ============================================================
   Animaciones
   ============================================================ */
@keyframes bg{50%{transform:scale(1.004) translateY(-2px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes breathe{50%{opacity:.76;transform:translateY(-2px)}}
@keyframes lineSpark{
  0%{stroke-dashoffset:1600;stroke-width:3;opacity:.15;filter:drop-shadow(0 0 0 rgba(139,30,45,0))}
  40%{stroke-width:3;opacity:1;filter:drop-shadow(0 0 12px rgba(139,30,45,.7))}
  80%{stroke-width:3;opacity:1;filter:drop-shadow(0 0 6px rgba(139,30,45,.45))}
  100%{stroke-dashoffset:0;stroke-width:2.2;opacity:.62;filter:drop-shadow(0 0 0 rgba(139,30,45,0))}
}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes floatSmall{50%{transform:translateY(-2px)}}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
@keyframes textBump{0%{opacity:.55;transform:translateY(5px)}60%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}
@keyframes logoPulse{
  0%{transform:perspective(900px) rotateY(0) scale(1);filter:brightness(1)}
  45%{transform:perspective(900px) rotateY(180deg) scale(1.045);filter:brightness(1.18) drop-shadow(0 0 12px rgba(139,30,45,.24))}
  100%{transform:perspective(900px) rotateY(360deg) scale(1);filter:brightness(1)}
}

/* ============================================================
   Responsive
   ============================================================ */

/* Nav compacta en cuanto deja de sobrar sitio (evita solapes) */
@media(max-width:1440px){
  :root{--header-h:160px}   /* fila del idioma (33px) + botones de 112px */
  .nav-list{gap:9px}
  .nav-btn{width:84px;font-size:9.6px;min-height:112px}
  .nav-thumb{width:78px;height:31px}
}

/* Portátiles / tablets grandes: contenido a una sola columna */
@media(max-width:1320px){
  .screen,.screen.right{grid-template-columns:1fr;align-content:center}
  .screen.right .copy{grid-column:1}
  .info{grid-template-columns:repeat(2,1fr)!important}
  .blog-list{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .contact-details{grid-template-columns:repeat(2,1fr)}
  .private-grid{grid-template-columns:1fr;gap:22px}
}

/* Portátiles: la nav horizontal SIGUE cabiendo si se aprieta un poco, sólo hay
   que reducir botón, miniatura y separación. Es un tramo muy poblado: un
   portátil de 1366 px con Windows al 125% de escala son 1093 px CSS, y antes
   caía en la hamburguesa —el cliente veía la web de escritorio en modo móvil
   y sin las miniaturas de cada sección. */
@media(max-width:1199px){
  :root{--header-h:146px}   /* fila del idioma (33px) + botones de 100px */
  .nav{padding:4px 22px 8px}
  .logo{width:170px;height:74px}
  .logo img{max-width:158px;max-height:70px}
  .nav-list{gap:6px}
  .nav-btn{width:70px;font-size:8.8px;min-height:100px;letter-spacing:.2px}
  .nav-thumb{width:64px;height:25px}
  .private-btn{width:88px;height:78px;min-height:78px;padding:8px 6px;font-size:8.8px}
}

/* Ya no cabe de ninguna manera: menú de hamburguesa. */
@media(max-width:1010px){
  :root{--header-h:72px}
  .lang-switch{top:50%;transform:translateY(-50%);right:70px}
  /* ES/EN medían 22x24: imposible de acertar con el dedo. Se agranda el área
     pulsable sin cambiar el tamaño del texto. */
  .lang-link{padding:11px 8px;font-size:12.5px}
  .nav{min-height:var(--header-h);padding:12px 18px;align-items:center}
  .logo{width:150px;height:56px}
  .logo img{max-width:140px;max-height:52px}
  .nav-toggle{display:flex}

  /* Panel desplegable */
  .nav-wrap{
    position:fixed;top:var(--header-h);left:0;right:0;z-index:19;
    background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(37,42,49,.1);box-shadow:0 20px 40px rgba(37,42,49,.14);
    max-height:0;overflow:hidden;transition:max-height .34s ease;
  }
  .nav-wrap.open{max-height:80vh;max-height:80dvh;overflow:auto}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .nav-btn{
    width:100%;min-height:0;flex-direction:row;justify-content:flex-start;gap:12px;
    padding:15px 24px;font-size:14px;border-bottom:1px solid rgba(37,42,49,.06);
  }
  .nav-btn .label{min-height:0;align-items:center;text-align:left}
  .nav-btn .mark{display:none}
  .nav-thumb{width:64px;height:25px;order:-1}
  .private-btn{
    width:auto;height:auto;min-height:0;margin:12px 20px;border-radius:8px;
    flex-direction:row;gap:10px;padding:15px 20px;font-size:14px;justify-content:center;
  }
  .private-btn .label br{display:none}
}

/* Móvil / tablet: ajustes de contenido */
@media(max-width:900px){
  .screen,.screen.right,.screen.private{padding:calc(var(--header-h) + 18px) 20px 40px;align-content:start}
  h1:not(.kicker),.title-big{font-size:clamp(28px,7vw,38px)}
  .kicker{font-size:16px;margin-bottom:22px}
  .subtitle,.lead{font-size:16px}
  .info{grid-template-columns:1fr!important;margin-top:26px}
  .info.cols-3,.info.cols-5{grid-template-columns:1fr!important}
  .blog-list{grid-template-columns:1fr}
  /* Móvil: una tarjeta por fila; el retrato sigue asomando pero más pequeño
     y la separación entre tarjetas absorbe lo que sobresale. */
  .team-know p{font-size:17px}
  .team-sep{margin:28px 0}
  .team-title{font-size:26px}
  .team-intro{font-size:16px}
  .team-grid{grid-template-columns:1fr;gap:82px;margin-top:70px}
  .team-card.has-photo{padding-top:120px}
  .team-photo{width:164px;height:180px;top:-60px}
  .contact-details{grid-template-columns:1fr}
  .private-cards{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  footer{padding:24px 20px}
  /* En móvil la línea es casi imperceptible y el contenido ocupa todo el alto:
     el botón vuelve a la esquina, que es donde se espera encontrarlo. */
  .line-svg{bottom:8%;opacity:.4}
  .wa-float{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:420px){
  .cta-row{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
}

/* Respeto por accesibilidad: sin animaciones si el usuario lo pide */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   Compatibilidad Safari / iOS
   ============================================================ */

/* iOS infla el texto en horizontal sin esto */
html{-webkit-text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:transparent}

/* Safari usa el prefijo -webkit- para backdrop-filter (hasta Safari 18) */
.btn-secondary{-webkit-backdrop-filter:blur(2px)}
.info-card{-webkit-backdrop-filter:blur(2px)}
.info-card.icon-card{-webkit-backdrop-filter:blur(3px)}
.cookie{-webkit-backdrop-filter:blur(10px)}
footer{-webkit-backdrop-filter:blur(8px)}
.team-card,.contact-card,.pillar-card,.blog-card{-webkit-backdrop-filter:blur(4px)}

/* inset:0 no existe en iOS < 14.5: fallback explícito */
.bg,.veil{top:0;left:0;right:0;bottom:0}

/* 100vh en iOS incluye la barra de Safari (contenido cortado/saltos);
   dvh mide el viewport real. Los navegadores sin dvh ignoran estas líneas. */
.app{min-height:100dvh}
main{min-height:100dvh}
.screen{min-height:100dvh}

/* Quitar el estilado nativo de iOS en campos y botones (sombra interior, bordes) */
.field input,.field textarea{-webkit-appearance:none;appearance:none}
.btn{-webkit-appearance:none;appearance:none}

/* En táctil no hay hover: evita tarjetas "levantadas" que se quedan pegadas tras tocar */
@media(hover:none){
  .info-card:hover,.blog-card:hover,.pillar-card:hover,.team-card:hover,
  .private-card:hover,.contact-card:hover,.btn:hover,.nav-btn:hover,.wa-float:hover{transform:none}
  .logo:hover img{transform:none}
}

/* aspect-ratio no existe en iOS < 15: fallback con padding para las miniaturas del blog */
@supports not (aspect-ratio:1/1){
  .blog-thumb{height:0;padding-bottom:56.25%}
}

/* El banner de cookies no debe quedar bajo la barra/home-indicator del iPhone */
.cookie{bottom:calc(16px + env(safe-area-inset-bottom,0px))}


/* Contacto: en el DOM el bloque de texto (con el h1) va ahora ANTES del
   formulario, para que el orden de lectura sea h1 -> h2. Esto devuelve el
   formulario a su columna izquierda: se ve exactamente igual que antes. */
#screen-contacto > .form-card{order:-1}


/* --- Accesibilidad --- */
/* Enlace para saltar directo al contenido: solo aparece al tabular, es lo
   primero que encuentra quien navega con teclado o lector de pantalla. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--r);color:#fff;padding:12px 18px;border-radius:0 0 6px 0;
  font-size:14px;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}

/* Foco visible y coherente: sin esto, quien navega con teclado no sabe dónde
   está. :focus-visible no molesta a quien usa el ratón. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:3px solid var(--r);
  outline-offset:3px;
  border-radius:3px;
}