/* ==========================================================================
   ARPSM — AR PRIME STRATEGIES MEXICO
   Hoja de estilos única. Sin frameworks.
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokens ---- */

:root {
  --navy:        #12294A;
  --navy-deep:   #0A1729;
  --navy-soft:   #1B3A63;
  --gold:        #C9A24A;
  --gold-light:  #E8D6A0;
  --gold-deep:   #A88233;
  /* Oro oscurecido SOLO para texto sobre fondo claro. El oro de marca da
     2.26:1 sobre #F7F8FA y no llega al 4.5:1 que pide WCAG AA; este da 4.75:1.
     Para filetes, bordes y fondos se sigue usando --gold, que es decorativo. */
  --gold-texto:  #8A6A22;
  --silver:      #C7CED6;
  --ink:         #4A5563;
  --ink-strong:  #2B3440;
  --bone:        #F7F8FA;
  --white:       #FFFFFF;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Alto de la cabecera. Lo consumen el hero y las cabeceras de pagina para
     dejar sitio a la barra fija; esta como token para que no haya que
     perseguir tres `calc(92px + ...)` cada vez que cambia el logotipo. */
  --alto-cabecera: 112px;
  --ancho: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --banda: clamp(4.5rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .8s;
}

/* ---------------------------------------------------------- 2. Base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.9vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  padding: .85rem 1.4rem;
  font-weight: 600;
}
.salta-al-contenido:focus { left: 1rem; top: 1rem; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------ 3. Retícula ---- */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.banda { padding-block: var(--banda); }
.banda--clara  { background: var(--bone); }
.banda--blanca { background: var(--white); }
.banda--oscura { background: var(--navy); color: var(--silver); }
.banda--honda  { background: var(--navy-deep); color: var(--silver); }

.banda--oscura h2, .banda--honda h2,
.banda--oscura h3, .banda--honda h3 { color: var(--white); }

.medida { max-width: 62ch; }
.medida--centro { max-width: 62ch; margin-inline: auto; }

.centrado { text-align: center; }

/* ------------------------------------------------ 4. Piezas de texto ---- */

.antetitulo {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-texto);
  margin-bottom: 1.15rem;
}
/* Sobre color plano sí se usa el oro de marca: da 5.9:1 sobre el azul marino. */
.banda--oscura .antetitulo,
.banda--honda .antetitulo { color: var(--gold); }
/* Sobre fotografía no. El velo no cubre por igual toda la imagen, y en las
   zonas claras el oro de marca cae a 4.4:1 con letra de 12px: por debajo de
   AA. El oro claro, que ya estaba en la paleta, da 7.2:1 medido sobre la foto
   compuesta con el velo. */
.hero .antetitulo,
.cabecera-pagina .antetitulo { color: var(--gold-light); }

.filete {
  display: block;
  width: 44px;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.6rem;
}
.filete--centro { margin-inline: auto; }

/* el filete se dibuja al entrar en pantalla */
.reveal .filete,
.reveal.filete { transform-origin: left center; }
.filete--centro { transform-origin: center; }

.entrada {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
}
/* Los cuatro contextos oscuros del sitio son .banda--oscura, .banda--honda,
   .hero y .cabecera-pagina. Esta lista se olvidaba de .cabecera-pagina, asi
   que la entradilla de los banners de Servicios y Contacto se quedaba en el
   gris de cuerpo (#4A5563) sobre azul marino: 1.5:1, ilegible. Si algun dia
   se añade otra seccion oscura, hay que sumarla aqui y en .antetitulo. */
.banda--oscura .entrada,
.banda--honda .entrada,
.hero .entrada,
.cabecera-pagina .entrada { color: var(--silver); }

.cabecera-banda { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecera-banda.centrado .filete { margin-inline: auto; }

/* --------------------------------------------------------- 5. Botón ---- */

.boton {
  --bg: var(--gold);
  --fg: var(--navy);
  --bd: var(--gold);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

/* barrido de relleno al pasar el cursor */
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease);
}
.boton:hover::after,
.boton:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.boton:hover, .boton:focus-visible { color: var(--bg); }
.boton:active { transform: translateY(1px); }

.boton--fantasma {
  --bg: transparent;
  --fg: var(--gold);
  --bd: var(--gold);
  background: transparent;
  color: var(--gold);
}
.boton--fantasma::after { background: var(--gold); }
.boton--fantasma:hover, .boton--fantasma:focus-visible { color: var(--navy); }

/* fantasma sobre fondo claro */
.boton--linea {
  --bg: transparent;
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.boton--linea::after { background: var(--navy); }
.boton--linea:hover, .boton--linea:focus-visible { color: var(--white); }

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}
.botones--centro { justify-content: center; }

/* -------------------------------------------------------- 6. Header ---- */

.sitio-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
}

/* El fondo esmerilado va en un pseudo-elemento, NO en el header.
   `backdrop-filter` (igual que `filter` o `transform`) convierte al elemento
   en bloque contenedor de sus descendientes `position: fixed`. Puesto en el
   header, el panel del menu movil dejaba de medirse contra la ventana y se
   encogia a los 72px de la cabecera: su fondo se recortaba a esa franja y los
   enlaces quedaban sueltos encima del pie de pagina. Solo ocurria con la
   pagina desplazada, que es cuando entra `.esta-fijo`; arriba del todo el
   menu se veia bien. Reportado por el cliente el 7 de septiembre de 2026. */
.sitio-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
.sitio-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgba(199, 206, 214, .16);
}

.sitio-header .envoltura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--alto-cabecera);
  transition: min-height .5s var(--ease);
}

.sitio-header.esta-fijo::before {
  background: rgba(10, 23, 41, .93);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8);
}
.sitio-header.esta-fijo .envoltura { min-height: 88px; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--white);
}
/* En la cabecera va el logotipo horizontal completo, el mismo del footer. Antes
   iba el emblema circular a 46px junto a la razon social escrita en HTML a
   .72rem: el cliente reporto el 9 de septiembre de 2026 que ni el logo ni el
   nombre del despacho se distinguian, y pidio usar los archivos de marca.
   El ancho manda el tamano del texto dibujado: en el arte, la altura de
   mayuscula de "PRIME STRATEGIES" es el 7.1% del ancho total, asi que a 200px
   son 14px de caja alta, de sobra para leerse. Por debajo de ~135px de ancho
   el texto cae de 10px y vuelve el problema original: ese es el suelo. */
.marca img {
  width: 200px;
  height: auto;
  transition: width .5s var(--ease), opacity .4s var(--ease);
}
.sitio-header.esta-fijo .marca img { width: 158px; }
.marca:hover img { opacity: .82; }

.navegacion { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  display: inline-block;
  padding-block: .4rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color .35s var(--ease);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.menu a:hover::after,
.menu a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.menu a[aria-current="page"] { color: var(--gold-light); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { padding: .8rem 1.5rem; font-size: .72rem; }

/* botón hamburguesa: dos filetes, sin ícono importado */
.abrir-menu {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(199, 206, 214, .3);
  border-radius: 2px;
  cursor: pointer;
}
.abrir-menu span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 0 auto;
  background: var(--white);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.abrir-menu span + span { margin-top: 5px; }
.abrir-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 880px) {
  /* Sin menu horizontal la barra puede ser mas baja, y el logotipo se encoge
     con la ventana (ver `.marca img` mas abajo) sin bajar de los 150px que
     mantienen legible la razon social. */
  :root { --alto-cabecera: 96px; }
  .sitio-header.esta-fijo .envoltura { min-height: 88px; }

  /* El panel es `fixed`, asi que se pintaba encima del boton y la X de
     cerrar quedaba oculta: sin salida visible del menu. El boton se eleva
     por encima del panel. */
  .abrir-menu { display: block; position: relative; z-index: 2; }
  .navegacion {
    z-index: 1;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    padding: 2rem var(--gutter);
    background: var(--navy-deep);
    border-left: 1px solid rgba(201, 162, 74, .25);
    transform: translateX(100%);
    transition: transform .55s var(--ease);
    visibility: hidden;
  }
  .navegacion.esta-abierto { transform: none; visibility: visible; }

  /* Velo sobre el resto de la pagina. Sin el, la franja de sitio que asoma al
     lado del panel se confunde con el propio panel: en el pie, que es del
     mismo azul, no se distinguia donde acababa uno y empezaba el otro.
     Va en el body porque no lleva transform ni filtro, asi que su
     pseudo-elemento `fixed` si se mide contra la ventana. z-index 95: encima
     del boton de WhatsApp (90) y debajo de la cabecera (100). */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(10, 23, 41, .68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s var(--ease), visibility .45s var(--ease);
  }
  body.menu-abierto::before { opacity: 1; visibility: visible; }
  .menu { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .menu a { font-size: .95rem; letter-spacing: .12em; }
  .header-cta { font-size: .78rem; }
  .marca img,
  .sitio-header.esta-fijo .marca img { width: clamp(150px, 42vw, 180px); }
}

/* ---------------------------------------------------------- 7. Hero ---- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 900px);
  padding-block: calc(var(--alto-cabecera) + var(--banda)) var(--banda);
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--silver);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: respira 22s ease-in-out infinite alternate;
}
@keyframes respira {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(10,23,41,.96) 0%, rgba(18,41,74,.9) 48%, rgba(18,41,74,.62) 100%);
}
/* retícula dorada muy tenue, se desplaza despacio */
.hero__trama {
  position: absolute;
  inset: -40px;
  z-index: 2;
  background-image:
    linear-gradient(rgba(201,162,74,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,74,.07) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: deriva 40s linear infinite;
}
@keyframes deriva {
  to { transform: translate(72px, 72px); }
}

.hero .envoltura { position: relative; z-index: 3; width: 100%; }
.hero__texto { max-width: 62ch; }
.hero h1 { color: var(--white); margin-bottom: 1.5rem; }
.hero h1 em {
  font-style: normal;
  position: relative;
  color: var(--gold-light);
  white-space: nowrap;
}
.hero .entrada { max-width: 54ch; }

/* barra dorada que baja por el borde izquierdo */
.hero__barra {
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 100%;
  z-index: 3;
  background: linear-gradient(180deg, transparent, var(--gold) 42%, var(--gold-deep) 78%, transparent);
  transform: scaleY(0);
  transform-origin: top center;
  animation: baja 1.6s var(--ease) .45s forwards;
}
@keyframes baja { to { transform: scaleY(1); } }

/* En portátiles de poca altura el hero medía 909 px contra 674 de pantalla y
   dejaba los botones 125 px por debajo del fold. Aquí se recorta el aire y el
   titular para que el CTA principal se vea sin hacer scroll. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--alto-cabecera) + 3.5rem) 3.5rem;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.1rem);
    margin-bottom: 1.2rem;
  }
  .hero .entrada { font-size: 1.05rem; }
  .hero .botones { margin-top: 1.9rem; }
}

/* --------------------------------------------------- 8. Cabecera int ---- */

.cabecera-pagina {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 48vh, 520px);
  padding-block: calc(var(--alto-cabecera) + 3.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--silver);
}
.cabecera-pagina .hero__fondo img { animation: none; transform: scale(1.04); }
.cabecera-pagina .envoltura { position: relative; z-index: 3; }
.cabecera-pagina h1 { color: var(--white); }
.cabecera-pagina .entrada { margin-top: 1.5rem; max-width: 58ch; }

/* ------------------------------------------------------ 9. Dos columnas -- */

.duo {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.duo--invertido > .duo__figura { order: 2; }

.duo__figura { position: relative; margin: 0; }
.duo__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* marco dorado desplazado */
.duo__figura::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold);
  z-index: -1;
  opacity: .55;
}
.duo__figura { z-index: 1; }

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .duo--invertido > .duo__figura { order: 0; }
  .duo__figura img { aspect-ratio: 3 / 2; }
  .duo__figura::before { inset: 12px -12px -12px 12px; }
}

/* ------------------------------------------------------- 10. Pilares ---- */

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pilar {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid rgba(199, 206, 214, .85);
  border-radius: 2px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pilar:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 74, .6);
  box-shadow: 0 26px 50px -32px rgba(18, 41, 74, .5);
}
.pilar h3 { margin-bottom: .7rem; }
.pilar p { font-size: .97rem; }

/* -------------------------------------------------------- 11. Proceso ---- */

.proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  counter-reset: paso;
}
.paso { position: relative; padding-top: 2.5rem; }
.paso::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(201, 162, 74, .45);
}
.paso__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
  margin-bottom: 1rem;
}
.paso h3 { margin-bottom: .65rem; }
.banda--oscura .paso p,
.banda--honda .paso p { color: var(--silver); }

/* ------------------------------------------------ 12. Índice servicios ---- */

.indice { border-top: 1px solid rgba(199, 206, 214, .8); }

.indice__fila {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(.5rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(199, 206, 214, .8);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: padding-left .5s var(--ease), color .4s var(--ease);
}
/* relleno navy que entra desde la izquierda */
.indice__fila::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease);
}
.indice__fila:hover::before,
.indice__fila:focus-visible::before { transform: scaleX(1); }
.indice__fila:hover,
.indice__fila:focus-visible { color: var(--white); padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.indice__fila:hover .indice__num,
.indice__fila:focus-visible .indice__num { color: var(--gold-light); }
.indice__fila:hover .indice__nombre,
.indice__fila:focus-visible .indice__nombre { color: var(--white); }
.indice__fila:hover .indice__linea,
.indice__fila:focus-visible .indice__linea { color: var(--silver); }

.indice__num {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold-texto);
  transition: color .4s var(--ease);
}
.indice__nombre {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem);
  color: var(--navy);
  transition: color .4s var(--ease);
}
.indice__linea {
  font-size: .97rem;
  color: var(--ink);
  transition: color .4s var(--ease);
}

@media (max-width: 760px) {
  .indice__fila {
    grid-template-columns: 3rem minmax(0, 1fr);
    row-gap: .35rem;
  }
  .indice__linea { grid-column: 2; }
}

/* ------------------------------------------------------- 13. Servicio ---- */

.servicio {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid rgba(199, 206, 214, .7);
}
.servicio:last-of-type { border-bottom: 0; }

.servicio__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  line-height: .9;
  color: var(--gold-texto);
  opacity: .9;
  margin-bottom: .85rem;
}
.servicio h2 { margin-bottom: 1.4rem; }

.lista-limpia {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
}
.lista-limpia li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  font-size: .98rem;
}
.lista-limpia li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--gold);
}
.banda--oscura .lista-limpia li,
.banda--honda .lista-limpia li { color: var(--silver); }

/* ------------------------------------------------------- 14. Tarjetas ---- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.9rem, 3vw, 2.6rem);
  background: var(--bone);
  border: 1px solid rgba(199, 206, 214, .8);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* filete superior que crece al pasar el cursor */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -35px rgba(18, 41, 74, .55); }
.tarjeta:hover::before { transform: scaleX(1); }

.tarjeta__num {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold-texto);
  margin-bottom: .5rem;
}
.tarjeta h3 { margin-bottom: .8rem; }
.tarjeta p { font-size: .97rem; }

/* Legal cubre seis materias ademas del corporativo, asi que se lleva la fila
   entera: cabe el detalle y, de paso, la rejilla cierra en 3+3+1 sin dejar
   una tarjeta huerfana estirada a lo ancho. */
.tarjeta--ancha { grid-column: 1 / -1; }
.tarjeta--ancha .tarjeta__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 780px) {
  .tarjeta--ancha .tarjeta__cuerpo { grid-template-columns: 1fr; }
}

.materias__titulo {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-texto);
  margin: 0 0 1.1rem;
}
.materias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: .85rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.materias li {
  padding-top: .6rem;
  border-top: 1px solid rgba(201, 162, 74, .55);
  font-size: .97rem;
  font-weight: 500;
  color: var(--ink-strong);
}
.materias__nota {
  margin-top: 1.5rem;
  font-size: .92rem;
  color: var(--ink);
}

/* El Centro de Evaluacion de Competencias todavia no existe: el cliente lo
   anuncio como "proximamente" el 7 de septiembre de 2026. Se presenta con el
   mismo panel lateral que las materias de Legal, pero con el nombre destacado
   y bajo el rotulo "Proximamente", para que no se lea como un servicio ya
   disponible. Cuando arranque, basta cambiar el rotulo. */
.tarjeta .proximamente__nombre {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
  padding-top: .6rem;
  border-top: 1px solid rgba(201, 162, 74, .55);
}
.tarjeta .proximamente__nombre + .materias__nota { margin-top: 1rem; }

/* -------------------------------------------------- 15b. Sectores ---- */
/* La lista salio de una captura que mando el cliente del menu "Industrias" de
   otro despacho, mas el restaurantero y el hotelero que pidio aparte. Se
   resuelve con tipografia y filete dorado, como las materias de Legal: cero
   iconos, y ninguna promesa de pagina por sector que hoy no existe. */

.sectores {
  display: grid;
  /* 175px, no 190: con el contenedor de 1200px y hueco de 2rem, 190 se queda a
     un pelo de la quinta columna y los diez sectores caian 4+4+2. Con 175 dan
     5+5 en escritorio y 5 filas de 2 en movil, sin huerfanos en ninguno. */
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 1rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sectores li {
  padding-top: .75rem;
  border-top: 1px solid rgba(201, 162, 74, .55);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.3;
  color: var(--navy);
}
/* Por debajo de 560px el auto-fit ya no alcanza los 175px y caia a una sola
   columna: diez filas seguidas, mucho scroll para poca informacion. Se fuerzan
   dos columnas; los nombres largos parten en dos lineas y se lee bien. */
@media (max-width: 560px) {
  .sectores {
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.25rem;
  }
}

.sectores__nota {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  font-size: .95rem;
  color: var(--ink);
}

/* ------------------------------------------ 16b. Enlaces oficiales ---- */
/* Sin logos: varios llevan el Escudo Nacional, su uso esta regulado y en la
   web de un despacho privado insinuarian un vinculo oficial que no existe.
   Ademas romperian el criterio de cero iconos del sitio. Se resuelve con
   tipografia, como el resto. */

.enlaces-oficiales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.enlaces-oficiales a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(201, 162, 74, .55);
  text-decoration: none;
  transition: border-top-color .4s var(--ease);
}
.enlaces-oficiales a:hover { border-top-color: var(--gold); }

.enlace__sigla {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: .4rem;
  transition: color .35s var(--ease);
}
/* El subrayado solo al pasar el cursor: con ocho enlaces juntos, subrayarlos
   todos de continuo convertia la banda en una maraña de rayas. */
.enlaces-oficiales a:hover .enlace__sigla,
.enlaces-oficiales a:focus-visible .enlace__sigla {
  color: var(--gold-texto);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.enlace__nombre {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-strong);
  margin-bottom: .55rem;
}
.enlace__linea {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
  margin-top: auto;   /* alinea la ultima linea aunque los nombres midan distinto */
}

/* --------------------------------------------------------- 15. Valores ---- */

.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
}
.valor {
  padding-top: 1.4rem;
  border-top: 1px solid rgba(201, 162, 74, .45);
}
.valor dt {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--white);
  margin-bottom: .45rem;
}
.valor dd { margin: 0; font-size: .95rem; color: var(--silver); }

/* -------------------------------------------------------- 16. Contacto ---- */

.contacto-red {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .contacto-red { grid-template-columns: 1fr; } }

.datos { margin: 0; }
.datos > div { padding-block: 1.35rem; border-bottom: 1px solid rgba(199, 206, 214, .8); }
.datos > div:first-child { padding-top: 0; }
.datos dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-texto);
  margin-bottom: .5rem;
}
/* Estos datos se leen, se dictan y se copian: van en la sans, no en la
   Playfair. La serif de titulares usa cifras de estilo antiguo (el telefono
   sale con numeros que suben y bajan) y convierte el correo largo en una
   mancha. */
.datos dd {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.1875rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* El telefono y el correo son enlaces: que se note, sin ensuciar la linea */
.datos dd a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(201, 162, 74, .6);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .35s var(--ease), text-decoration-color .35s var(--ease);
}
.datos dd a:hover {
  color: var(--gold-texto);
  text-decoration-color: currentColor;
}
.datos dd a[href^="tel:"] { letter-spacing: .03em; }

/* formulario */
.formulario {
  padding: clamp(1.9rem, 4vw, 3rem);
  background: var(--white);
  border: 1px solid rgba(199, 206, 214, .9);
  border-radius: 2px;
}
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.35rem;
  margin-top: 2rem;
}
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-strong);
  margin-bottom: .55rem;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .95rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink-strong);
  background: var(--bone);
  /* 3.07:1 contra el blanco de la tarjeta. El borde mas claro que habia antes
     dejaba los campos casi invisibles y no llegaba al 3:1 de WCAG 1.4.11. */
  border: 1px solid #8A939E;
  border-radius: 2px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.nota-form {
  margin-top: 1.35rem;
  font-size: .85rem;
  color: var(--ink);
}

/* ---------------------------------------------------------- 17. Footer ---- */

.sitio-footer {
  background: var(--navy-deep);
  color: var(--silver);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
/* El correo mide 33 caracteres y no tiene por donde partirse, asi que con
   columnas de 160px se desbordaba encima de la direccion. Se le da a la
   columna de contacto el ancho que necesita y se permite partir la palabra. */
.footer-red {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(110px, .55fr)
    minmax(250px, 1.35fr)
    minmax(0, .95fr);
  gap: clamp(1.5rem, 2.8vw, 2.75rem);
}
@media (max-width: 1040px) {
  .footer-red { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
/* Logotipo horizontal completo. Ya trae la razon social dibujada, asi que
   sustituye al emblema y al parrafo que la repetia. Aqui si tiene ancho para
   que las dos lineas de texto se lean. */
.footer-marca .footer-logo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 1.35rem;
}
.footer-marca p { font-size: .93rem; }
/* Ojo con el orden y la especificidad: `.footer-marca p` (0,1,1) le ganaba a
   `.footer-lema` (0,1,0) y el lema salia a .93rem en vez del tamano previsto.
   El cliente lo noto el 7 de septiembre ("la letra cursiva la veo pequena").
   Se sube el tamano y se ancla al selector compuesto para que mande este. */
.footer-marca .footer-lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem);
  line-height: 1.45;
  color: var(--gold-light);
  margin-top: 1.1rem;
}
.footer-col h2 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li {
  margin-bottom: .65rem;
  font-size: .93rem;
  overflow-wrap: anywhere;   /* el correo largo parte en vez de desbordarse */
}
.footer-col a { text-decoration: none; transition: color .35s var(--ease); }
.footer-col a:hover { color: var(--gold-light); }

.footer-base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(18, 41, 74, 1);
  text-align: center;
  font-size: .8rem;
  color: rgba(199, 206, 214, .72);
}

/* ------------------------------------------------------- 18. WhatsApp ---- */

.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.85rem);
  bottom: clamp(1rem, 3vw, 1.85rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
.wa-flotante:hover, .wa-flotante:focus-visible {
  transform: scale(1.09);
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, .55);
}
/* halo que late despacio */
.wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .55;
  animation: late 2.8s ease-out infinite;
  z-index: -1;
}
@keyframes late {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------- 19. Animaciones ---- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  transition-delay: var(--retraso, 0ms);
}
.reveal.esta-dentro { opacity: 1; transform: none; }

/* El texto del banner ya está en pantalla cuando se abre la página: no hay
   nada que revelar. Fundirlo desde opacidad 0 lo dejaba ilegible durante casi
   un segundo en cada carga. Se conserva el movimiento de entrada, pero el
   texto se lee desde el primer fotograma. Como efecto secundario, si el JS
   falla o tarda, el banner sigue siendo legible en vez de quedarse en blanco. */
.hero .reveal,
.cabecera-pagina .reveal { opacity: 1; }

.reveal-filete {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease) var(--retraso, 0ms);
}
.reveal-filete.esta-dentro { transform: scaleX(1); }

/* Quien pide menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-filete { opacity: 1; transform: none; }
  .hero__fondo img, .hero__trama, .hero__barra { animation: none; transform: none; }
  .hero__barra { transform: scaleY(1); }
}

/* ---------------------------------------------------------- 20. Print ---- */

@media print {
  .sitio-header, .wa-flotante, .botones { display: none; }
  body { color: #000; }
}