/* ============================================================================
   VELZI & ASOCIADOS — Hoja de estilos unica  ·  REDISENO 2026-08-27
   ----------------------------------------------------------------------------
   IDEA RECTORA: "el partido medio-y-medio".
   El recurso grafico de la marca no es la balanza: es el cuadrado partido en
   dos mitades de contraste invertido. Aca ese partido deja de ser un adorno y
   pasa a ser la estructura de la pagina. Cada bloque esta dividido en dos por
   una linea: de un lado lo que es, del otro lo que dice.

   Consecuencias, y son deliberadas:
     - Cero sombras. La profundidad la dan las lineas, no el desenfoque.
     - Cero esquinas redondeadas, salvo el boton de WhatsApp, que es un chat.
     - Un solo fondo hueso continuo, anclado por dos bloques marinos.
     - El azul de marca declinado en escala. Ningun color fuera de esa escala.
       Unica excepcion funcional: verde WhatsApp #25D366, texto en grafito.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --azul-950:#0E1825;
  --azul-900:#17263B;
  --azul-800:#223958;
  --azul-700:#2E4C75;   /* color de marca */
  --azul-600:#395F93;
  --azul-500:#4776B8;   /* acento */
  --azul-400:#6C92C6;   /* nunca texto sobre claro */
  --azul-300:#98B2D7;
  --azul-200:#C8D6EA;   /* texto secundario sobre marino */
  --azul-100:#E5ECF5;
  --azul-050:#F4F7FB;
  --blanco-hueso:#FCFCF9;
  --blanco:#FFFFFF;
  --grafito:#202B3A;
  --gris-texto:#4B5871;
  --whatsapp:#25D366;
  --whatsapp-hover:#1FB855;

  --regla:#D9E0EA;                       /* linea sobre claro */
  --regla-oscura:rgba(200,214,234,.22);  /* linea sobre marino */

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --max:1240px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --aire:clamp(4rem,9vw,7.5rem);
  --header-h:74px;
  --trans:220ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);}
body{
  margin:0;
  background:var(--blanco-hueso);
  color:var(--grafito);
  font-family:var(--sans);
  font-size:1.0625rem;      /* 17px: el target previsional lee desde el celular */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
button{font:inherit;color:inherit;}
a{color:var(--azul-700);text-underline-offset:3px;}
a:hover{color:var(--azul-600);}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0 0 .5em;color:var(--azul-900);}
h1{font-size:clamp(2.05rem,5.4vw,4.05rem);line-height:1.05;letter-spacing:-.022em;}
h2{font-size:clamp(1.85rem,3.7vw,3rem);line-height:1.07;letter-spacing:-.018em;}
h3{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.22;letter-spacing:-.008em;}
p{margin:0 0 1.1em;max-width:68ch;}
ul{margin:0 0 1.1em;padding-left:1.15em;}
li{margin-bottom:.45em;}
strong{font-weight:600;}
:focus-visible{outline:3px solid var(--azul-500);outline-offset:3px;}
.es-marino :focus-visible,.portada :focus-visible,.cierre :focus-visible,.pie :focus-visible{outline-color:var(--blanco);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition-duration:.001ms !important;}
}

/* ---------- 3. UTILIDADES DE ESTRUCTURA ---------- */
.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.bloque{padding-block:var(--aire);}
.es-marino{background:var(--azul-900);color:var(--azul-200);}
.es-marino h2,.es-marino h3,.es-marino h4{color:var(--blanco);}
.es-neblina{background:var(--azul-050);}
.es-blanco{background:var(--blanco);}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.salto-contenido{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul-700);color:#fff;padding:.9rem 1.4rem;}
.salto-contenido:focus{left:1rem;top:1rem;}

/* EL PARTIDO — la marca de la casa, haciendo trabajo estructural */
.partido{display:inline-block;width:14px;height:14px;flex:none;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-200) 50% 100%);}
.es-marino .partido,.portada .partido{background:linear-gradient(to right,var(--blanco) 0 50%,var(--azul-600) 50% 100%);}
.regla-partida{height:3px;border:0;margin:0;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);}

/* Etiqueta de seccion */
.etiqueta{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--azul-600);margin:0 0 1rem;display:flex;align-items:center;gap:.65rem;
}
.es-marino .etiqueta,.portada .etiqueta{color:var(--azul-300);}
/* Sobre azul-700 el 300 da 4.07:1 y reprueba en texto chico: va el 200. */
.cierre .etiqueta{color:var(--azul-200);}
.bajada{font-size:1.075rem;color:var(--gris-texto);max-width:56ch;margin:0;}
.es-marino .bajada{color:var(--azul-200);}

/* Cabecera de bloque: el partido a escala de pagina.
   Titulo de un lado, contexto del otro, linea real en el medio.
   La etiqueta cruza las dos columnas y va siempre primero: en el celular,
   donde todo se apila, el orden de lectura tiene que ser etiqueta, titulo,
   bajada. */
.cab-bloque{display:grid;gap:1.2rem;margin-bottom:clamp(2.2rem,4.5vw,3.6rem);}
.cab-bloque .etiqueta{margin:0;}
.cab-bloque h2{margin:0;}
@media (min-width:940px){
  .cab-bloque{grid-template-columns:1fr 1fr;gap:1.4rem clamp(2rem,5vw,4.5rem);align-items:start;}
  .cab-bloque .etiqueta{grid-column:1 / -1;}
  .cab-bloque h2{max-width:15ch;}
  .cab-bloque__lado{border-left:1px solid var(--regla);padding-left:clamp(2rem,5vw,4.5rem);}
  .es-marino .cab-bloque__lado{border-left-color:var(--regla-oscura);}
}

/* ---------- 4. BOTONES (tap target minimo 52px) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:.9rem 1.7rem;border:1px solid transparent;border-radius:0;
  font-family:var(--sans);font-size:1rem;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;transition:var(--trans);text-align:center;
}
.btn svg{width:22px;height:22px;flex:none;}
/* El CTA principal es WhatsApp. Texto en grafito: blanco sobre #25D366 da 2.0:1 y reprueba. */
.btn--wa{background:var(--whatsapp);color:var(--grafito);border-radius:999px;}
.btn--wa:hover{background:var(--whatsapp-hover);color:var(--grafito);}
.btn--solido{background:var(--azul-700);color:var(--blanco);}
.btn--solido:hover{background:var(--azul-900);color:var(--blanco);}
.btn--linea{border-color:var(--azul-700);color:var(--azul-700);background:transparent;}
.btn--linea:hover{background:var(--azul-700);color:var(--blanco);}
.btn--linea-blanca{border-color:rgba(255,255,255,.5);color:var(--blanco);background:transparent;}
.btn--linea-blanca:hover{background:var(--blanco);color:var(--azul-900);}
.btn--bloque{width:100%;}
.grupo-btn{display:flex;flex-wrap:wrap;gap:.9rem;}

/* ---------- 5. CABECERA ---------- */
.cabecera{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;transition:var(--trans);
}
.cabecera.esta-fija{background:var(--azul-950);border-bottom-color:var(--regla-oscura);}
.cabecera__env{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.marca__iso{width:32px;height:32px;flex:none;}
.marca__txt{display:flex;flex-direction:column;line-height:1;}
.marca__nombre{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--blanco);letter-spacing:.005em;}
.marca__bajada{font-size:.56rem;font-weight:700;letter-spacing:.24em;color:var(--azul-300);text-transform:uppercase;margin-top:5px;}

.nav{display:none;}
.nav__lista{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0;}
.nav__lista li{margin:0;}
.nav__lista a{color:var(--azul-200);text-decoration:none;font-size:.9rem;font-weight:500;padding:.5rem 0;position:relative;display:inline-block;}
.nav__lista a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--blanco);transition:var(--trans);}
.nav__lista a:hover{color:var(--blanco);}
.nav__lista a:hover::after{width:100%;}
.cabecera .btn{min-height:44px;padding:.5rem 1.15rem;font-size:.88rem;}
.cabecera__cta{display:none;}

.hamburguesa{
  width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(200,214,234,.4);cursor:pointer;
}
.hamburguesa span{display:block;width:20px;height:1.5px;background:var(--blanco);transition:var(--trans);}
.hamburguesa span+span{margin-top:5px;}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.panel-movil{
  position:fixed;inset:var(--header-h) 0 auto;z-index:99;background:var(--azul-950);
  border-bottom:1px solid var(--regla-oscura);
  padding:1rem var(--gutter) 1.6rem;display:none;
}
.panel-movil.abierto{display:block;}
.panel-movil ul{list-style:none;margin:0 0 1.2rem;padding:0;}
.panel-movil li{border-bottom:1px solid var(--regla-oscura);margin:0;}
/* Acotado a la lista: si aplica a todo <a>, le pisa el color al boton de
   WhatsApp y queda blanco sobre verde (1.98:1, reprueba). */
.panel-movil ul a{display:block;padding:1rem 0;color:var(--blanco);text-decoration:none;font-size:1.05rem;font-weight:500;}
@media (min-width:1040px){
  .nav{display:block;}
  .cabecera__cta{display:inline-flex;}
  .hamburguesa{display:none;}
  .panel-movil{display:none !important;}
}

/* ============================================================================
   6. PORTADA — el titular y el triaje, partidos por una linea.
   La primera pantalla no es un eslogan: es la pregunta "que te esta pasando"
   con las seis respuestas al lado. El que llega urgido entra por ahi.
   ========================================================================== */
.portada{position:relative;background:var(--azul-900);color:var(--blanco);overflow:hidden;}
.portada__env{
  position:relative;z-index:1;display:grid;
  padding-top:calc(var(--header-h) + clamp(2.5rem,7vw,5rem));
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.portada__izq{padding-bottom:clamp(2.5rem,5vw,3rem);}
.portada__der{padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--regla-oscura);}
@media (min-width:1040px){
  .portada__env{grid-template-columns:1.02fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
  .portada__izq{padding-bottom:0;}
  .portada__der{padding-top:0;border-top:0;border-left:1px solid var(--regla-oscura);padding-left:clamp(2.5rem,5vw,4.5rem);}
}
.portada h1{color:var(--blanco);max-width:15ch;margin-bottom:.42em;}
.portada__bajada{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--azul-200);max-width:50ch;margin-bottom:2rem;}
.portada__nota{
  margin:2.2rem 0 0;padding-left:1.2rem;border-left:3px solid var(--azul-600);
  font-size:.95rem;color:var(--azul-200);max-width:48ch;
}
.portada__titulo-triaje{
  font-family:var(--sans);font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;color:var(--azul-300);margin:0 0 1rem;display:flex;align-items:center;gap:.65rem;
}
.portada__pie-triaje{font-size:.85rem;color:var(--azul-300);margin:1.1rem 0 0;max-width:44ch;}

.triaje{list-style:none;margin:0;padding:0;border-top:1px solid var(--regla-oscura);}
.triaje li{margin:0;border-bottom:1px solid var(--regla-oscura);}
.triaje a{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:1rem;padding:1.05rem 0;text-decoration:none;color:var(--blanco);transition:var(--trans);
}
.triaje a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blanco);
  transform:scaleY(0);transform-origin:top;transition:var(--trans);
}
.triaje a:hover,.triaje a:focus-visible{color:var(--blanco);padding-left:1.15rem;padding-right:.4rem;background:rgba(255,255,255,.05);}
.triaje a:hover::before,.triaje a:focus-visible::before{transform:scaleY(1);}
.triaje strong{display:block;font-family:var(--serif);font-size:1.22rem;font-weight:600;line-height:1.22;letter-spacing:-.01em;}
.triaje em{display:block;font-style:normal;font-size:.875rem;line-height:1.5;color:var(--azul-200);margin-top:.3rem;}
.triaje svg{width:20px;height:20px;color:var(--azul-300);transition:var(--trans);}
.triaje a:hover svg{color:var(--blanco);transform:translateX(4px);}

/* Franja de confianza */
.confianza{background:var(--azul-950);color:var(--azul-200);}
.confianza__lista{
  display:grid;grid-template-columns:1fr;list-style:none;margin:0 auto;padding:0;
  width:100%;max-width:var(--max);
}
.confianza__lista li{
  display:flex;align-items:flex-start;gap:.9rem;margin:0;
  padding:1.2rem var(--gutter);border-bottom:1px solid var(--regla-oscura);
}
.confianza__lista li:last-child{border-bottom:0;}
.confianza svg{width:21px;height:21px;flex:none;color:var(--azul-400);margin-top:3px;}
.confianza b{display:block;color:var(--blanco);font-size:.95rem;font-weight:600;}
.confianza span{display:block;color:var(--azul-200);font-size:.85rem;line-height:1.5;margin-top:.15rem;}
@media (min-width:860px){
  .confianza__lista{grid-template-columns:repeat(3,1fr);}
  .confianza__lista li{border-bottom:0;border-right:1px solid var(--regla-oscura);padding-block:1.5rem;}
  .confianza__lista li:last-child{border-right:0;}
}

/* ============================================================================
   7. INDICE DE AREAS — siete filas, no siete tarjetas.
   Un estudio no ofrece "productos": lleva materias, y las materias se leen en
   indice. Al pasar por encima, la fila dibuja su propia linea.
   ========================================================================== */
.indice{border-top:1px solid var(--regla);}
.indice__fila{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;
  gap:.5rem 1.5rem;width:100%;padding:clamp(1.3rem,2.6vw,1.9rem) 0;
  background:transparent;border:0;border-bottom:1px solid var(--regla);
  text-align:left;cursor:pointer;transition:var(--trans);
}
.indice__fila::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--azul-700);
  transform:scaleX(0);transform-origin:left;transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.indice__fila:hover::after,.indice__fila:focus-visible::after{transform:scaleX(1);}
.indice__fila:hover .indice__nombre{color:var(--azul-700);}
.indice__titular{display:flex;align-items:baseline;gap:.85rem;min-width:0;}
.indice__titular .partido{transform:translateY(-2px);}
.indice__nombre{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.55rem);font-weight:600;color:var(--azul-900);line-height:1.2;transition:var(--trans);}
/* En el celular la fila se lee en tres renglones —nombre, qué es, entrar—
   y "Ver trámites" queda como un enlace propio, con su tap target entero. */
.indice__que{grid-column:1/-1;margin:0;font-size:.95rem;color:var(--gris-texto);max-width:62ch;padding-left:1.9rem;}
.indice__mas{
  grid-column:1/-1;margin-top:.35rem;padding-left:1.9rem;
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-600);
}
.indice__mas svg{width:16px;height:16px;transition:var(--trans);}
.indice__fila:hover .indice__mas svg{transform:translateX(5px);}
@media (min-width:900px){
  .indice__fila{grid-template-columns:minmax(0,23ch) minmax(0,1fr) auto;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);}
  .indice__que{grid-column:auto;padding-left:0;}
  .indice__mas{grid-column:auto;margin-top:0;padding-left:0;}
}

/* Modal nativo de area */
dialog{
  width:min(680px,calc(100vw - 2rem));max-height:min(88vh,820px);padding:0;
  border:0;border-radius:0;background:var(--blanco-hueso);color:var(--grafito);
}
/* Columna flexible: la lista de trámites cede altura para que el botón de
   WhatsApp del pie nunca quede cortado en pantallas bajas. */
dialog[open]{display:flex;flex-direction:column;}
dialog::backdrop{background:rgba(14,24,37,.78);}
.modal__cab{position:relative;flex:0 0 auto;background:var(--azul-900);color:var(--blanco);padding:1.9rem 3.8rem 1.9rem 1.9rem;}
.modal__cab h3{color:var(--blanco);margin:0 0 .35rem;font-size:1.6rem;}
.modal__cab p{margin:0;color:var(--azul-200);font-size:.9rem;max-width:44ch;}
.modal__cerrar{
  position:absolute;top:14px;right:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:0;color:var(--blanco);cursor:pointer;transition:var(--trans);
}
.modal__cerrar:hover{background:rgba(255,255,255,.24);}
.modal__cerrar svg{width:20px;height:20px;}
.modal__cuerpo{flex:1 1 auto;min-height:0;padding:1.8rem 1.9rem 1.9rem;overflow-y:auto;}
.modal__cuerpo h4{font-family:var(--sans);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--azul-600);margin:0 0 1rem;}
.lista-tramites{list-style:none;padding:0;margin:0 0 1.6rem;}
.lista-tramites li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;font-size:.96rem;}
.lista-tramites li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-200) 50% 100%);}
@media (min-width:560px){.lista-tramites{columns:2;column-gap:2rem;}.lista-tramites li{break-inside:avoid;}}
.modal__pie{flex:0 0 auto;padding:1.3rem 1.9rem 1.7rem;background:var(--azul-100);border-top:1px solid var(--regla);}
.modal__pie p{font-size:.88rem;color:var(--gris-texto);margin:0 0 1rem;}

/* ============================================================================
   8. PASOS — el expediente como linea continua.
   Aca la numeracion si es informacion: es una secuencia real, y el orden es
   justamente lo que el cliente no conoce y lo que el estudio se compromete a
   contarle. Por eso los pasos no son tarjetas: son una linea que avanza.
   ========================================================================== */
.remarque{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.3;
  color:var(--blanco);margin:0 0 clamp(2.5rem,5vw,3.5rem);padding-left:1.4rem;
  border-left:3px solid var(--azul-500);max-width:36ch;
}
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0 0 0 clamp(2.6rem,6vw,4rem);border-left:1px solid var(--regla-oscura);}
.paso{position:relative;margin:0;padding:0 0 clamp(2.2rem,4.5vw,3.2rem);}
.paso:last-child{padding-bottom:0;}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:-.2em;left:clamp(-4rem,-6vw,-2.6rem);width:clamp(2.6rem,6vw,4rem);
  transform:translateX(-50%);padding:.1rem 0;
  background:var(--azul-900);text-align:center;
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.7rem);font-weight:600;color:var(--azul-300);line-height:1.2;
}
.paso h3{margin:0 0 .4rem;font-size:clamp(1.2rem,2.1vw,1.45rem);}
.paso p{margin:0;color:var(--azul-200);font-size:.98rem;max-width:60ch;}
.paso--clave::before{color:var(--blanco);}
.paso--clave p{color:var(--blanco);}

/* ---------- 9. SOCIOS ---------- */
.socio{
  display:grid;gap:0;margin-bottom:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;
  background-image:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);
  background-repeat:no-repeat;background-size:100% 3px;background-position:top left;
}
.socio:last-of-type{margin-bottom:0;}
.socio h3{margin:0 0 .2rem;font-size:clamp(1.45rem,2.6vw,1.9rem);}
.socio__rol{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-600);margin:0 0 1.1rem;}
.socio__cuerpo{padding-top:1.4rem;}
.socio__cuerpo p{font-size:1rem;color:var(--gris-texto);}
.socio__areas{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 0;padding:0;list-style:none;}
.socio__areas li{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.04em;padding:.4rem .8rem;background:var(--azul-100);color:var(--azul-700);}
@media (min-width:900px){
  .socio{grid-template-columns:5fr 7fr;gap:clamp(2rem,4.5vw,3.5rem);align-items:start;}
  .socio__cuerpo{padding-top:0;}
  .socio--invertido{grid-template-columns:7fr 5fr;}
  .socio--invertido .socio__foto{order:2;}
}

/* ---------- 10. NOVEDADES (carrusel) ---------- */
.carrusel{position:relative;}
.carrusel__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,86%);gap:1.2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0 .25rem 1.4rem;margin:0 -.25rem;
  scrollbar-width:thin;scrollbar-color:var(--azul-300) transparent;
}
.carrusel__pista::-webkit-scrollbar{height:5px;}
.carrusel__pista::-webkit-scrollbar-thumb{background:var(--azul-300);}
@media (min-width:700px){.carrusel__pista{grid-auto-columns:minmax(300px,45%);}}
@media (min-width:1060px){.carrusel__pista{grid-auto-columns:minmax(300px,31.5%);}}
.nota{
  position:relative;scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--blanco);border:1px solid var(--regla);border-radius:0;
  padding:1.6rem 1.5rem 1.4rem;transition:var(--trans);
}
.nota::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);}
.nota:hover{border-color:var(--azul-600);}
.nota__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:.9rem;}
.nota__cat{font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-700);}
.nota__fecha{font-size:.76rem;color:#66738a;}
.nota h2,.nota h3{font-size:1.18rem;margin:0 0 .6rem;line-height:1.25;}
.nota h2 a,.nota h3 a{color:var(--azul-900);text-decoration:none;}
.nota h2 a:hover,.nota h3 a:hover{color:var(--azul-700);text-decoration:underline;}
.nota p{font-size:.94rem;color:var(--gris-texto);margin:0 0 1.2rem;}
.nota__mas{margin-top:auto;align-self:flex-start;background:none;border:0;padding:.4rem 0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-600);}
.nota__mas svg{width:16px;height:16px;transition:var(--trans);}
.nota__mas:hover svg{transform:translateX(5px);}
/* A la izquierda a proposito: a la derecha los tapa el boton flotante. */
.carrusel__mandos{display:flex;gap:.6rem;justify-content:flex-start;}
.carrusel__mandos button{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid var(--regla);color:var(--azul-700);cursor:pointer;transition:var(--trans);
}
.carrusel__mandos button:hover:not(:disabled){background:var(--azul-700);color:var(--blanco);border-color:var(--azul-700);}
.carrusel__mandos button:disabled{opacity:.3;cursor:default;}
.carrusel__mandos svg{width:20px;height:20px;}

/* ---------- 11. FAQ ---------- */
.faq-filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem;}
.faq-filtros button{
  min-height:48px;padding:.6rem 1.15rem;background:transparent;border:1px solid var(--regla);
  border-radius:0;font-size:.88rem;font-weight:600;color:var(--azul-700);cursor:pointer;transition:var(--trans);
}
.faq-filtros button:hover{border-color:var(--azul-600);}
.faq-filtros button[aria-pressed="true"]{background:var(--azul-900);border-color:var(--azul-900);color:var(--blanco);}
.faq-grupo{margin-bottom:clamp(2.5rem,5vw,3.6rem);}
.faq-grupo>h3{display:flex;align-items:center;gap:.7rem;font-size:1.3rem;margin:0 0 .5rem;}
.acordeon{border-bottom:1px solid var(--regla);}
.acordeon:first-of-type{border-top:1px solid var(--regla);}
.acordeon summary{
  position:relative;display:block;padding:1.25rem 3rem 1.25rem 0;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.13rem;font-weight:600;color:var(--azul-900);line-height:1.3;transition:var(--trans);
}
.acordeon summary::-webkit-details-marker{display:none;}
.acordeon summary:hover{color:var(--azul-700);}
.acordeon[open] summary{color:var(--azul-700);}
.acordeon summary .cruz{position:absolute;right:.35rem;top:1.45rem;width:20px;height:20px;}
.acordeon summary .cruz::before,.acordeon summary .cruz::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--azul-600);transition:var(--trans);
}
.acordeon summary .cruz::before{width:16px;height:1.5px;transform:translate(-50%,-50%);}
.acordeon summary .cruz::after{width:1.5px;height:16px;transform:translate(-50%,-50%);}
.acordeon[open] summary .cruz::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.acordeon__cuerpo{padding:0 3rem 1.5rem 0;}
.acordeon__cuerpo p{font-size:1rem;margin:0;color:var(--gris-texto);}
.acordeon__cuerpo p+p{margin-top:.9em;}
.faq-cierre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.6rem;padding:1.3rem 1.5rem;background:var(--azul-050);border-left:3px solid var(--azul-700);
}
.faq-cierre p{margin:0;font-size:.97rem;max-width:44ch;}
.aviso-legal{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--regla);font-size:.85rem;color:#66738a;max-width:80ch;}

/* ---------- 12. COBERTURA ---------- */
.rejilla-zonas{display:grid;grid-template-columns:1fr;list-style:none;margin:0;padding:0;border-top:1px solid var(--regla-oscura);}
.rejilla-zonas li{margin:0;padding:1.7rem 0;border-bottom:1px solid var(--regla-oscura);}
.zona h3{font-size:1.35rem;margin:0 0 .25rem;}
.zona__rol{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-300);margin:0 0 .9rem;}
.zona p{font-size:.93rem;color:var(--azul-200);margin:0;}
@media (min-width:820px){
  .rejilla-zonas{grid-template-columns:repeat(3,1fr);}
  .rejilla-zonas li{padding:1.9rem clamp(1.5rem,3vw,2.4rem);border-bottom:0;border-right:1px solid var(--regla-oscura);}
  .rejilla-zonas li:first-child{padding-left:0;}
  .rejilla-zonas li:last-child{border-right:0;padding-right:0;}
}
.cobertura__nota{margin:1.8rem 0 0;font-size:.95rem;color:var(--azul-200);max-width:74ch;}
.cobertura__nota strong{color:var(--blanco);}

/* ---------- 13. CIERRE ---------- */
.cierre{background:var(--azul-700);color:var(--blanco);}
.cierre__env{display:grid;gap:2.2rem;}
.cierre h2{color:var(--blanco);max-width:16ch;margin:0 0 1.2rem;}
.cierre p{color:var(--azul-200);font-size:1.05rem;max-width:48ch;}
.cierre__lado{display:flex;flex-direction:column;justify-content:flex-end;}
@media (min-width:940px){
  .cierre__env{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);}
  .cierre__lado{border-left:1px solid rgba(255,255,255,.28);padding-left:clamp(2.5rem,5vw,4.5rem);}
}
.telefono-visible{display:inline-block;margin-top:1.6rem;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:600;color:var(--blanco);text-decoration:none;letter-spacing:-.01em;}
.telefono-visible:hover{color:var(--azul-200);}

/* ---------- 14. PIE ---------- */
.pie{background:var(--azul-950);color:var(--azul-200);padding-top:clamp(2.8rem,6vw,4.5rem);padding-bottom:1.8rem;font-size:.9rem;}
.pie__rejilla{display:grid;grid-template-columns:1fr;gap:2.4rem;}
@media (min-width:860px){.pie__rejilla{grid-template-columns:1.5fr 1fr 1fr;gap:3rem;}}
.pie h4{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blanco);margin:0 0 1.1rem;}
.pie ul{list-style:none;padding:0;margin:0;}
.pie li{margin-bottom:.6rem;}
.pie a{color:var(--azul-200);text-decoration:none;}
.pie a:hover{color:var(--blanco);text-decoration:underline;}
.pie .marca__nombre{font-size:1.3rem;}
.pie__legal{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--regla-oscura);font-size:.8rem;color:var(--azul-300);}
.pie__legal p{max-width:none;margin:0 0 .5rem;}

/* ---------- 15. CONTACTO PERMANENTE ----------
   En el celular, una barra fija abajo: es donde esta el pulgar y es donde
   termina toda la maquina. En escritorio, una pastilla discreta. */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:.6rem;
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--azul-950);border-top:1px solid var(--regla-oscura);
}
.barra-movil .btn{flex:1;min-height:52px;font-size:.92rem;padding-inline:.7rem;white-space:nowrap;}
.barra-movil .btn--linea-blanca{flex:0 0 auto;padding-inline:1rem;}
body{padding-bottom:76px;}
.fab{display:none;}
@media (min-width:900px){
  .barra-movil{display:none;}
  body{padding-bottom:0;}
  .fab{
    position:fixed;right:26px;bottom:26px;z-index:90;
    display:inline-flex;align-items:center;gap:.6rem;
    min-height:56px;padding:.9rem 1.4rem;border-radius:999px;
    background:var(--whatsapp);color:var(--grafito);font-weight:700;font-size:.96rem;text-decoration:none;
    transition:var(--trans);
  }
  .fab:hover{background:var(--whatsapp-hover);color:var(--grafito);}
  .fab svg{width:26px;height:26px;flex:none;}
}

/* ---------- 16. PAGINAS INTERNAS DE TEXTO ---------- */
.seccion{padding-block:var(--aire);}
.pagina-texto{padding-top:calc(var(--header-h) + 3rem);padding-bottom:4rem;}
.pagina-texto h2{font-size:1.5rem;margin-top:2.4rem;}
.pagina-texto p,.pagina-texto li{max-width:74ch;}
.solo-movil{display:inline-flex;}
@media (min-width:1040px){.solo-movil{display:none;}}
.encabezado-seccion{margin-bottom:clamp(2rem,4vw,3rem);}

/* ---------- 17. NOTICIAS: LISTADO Y NOTA ---------- */
.miga{font-size:.82rem;color:#66738a;margin-bottom:1.6rem;}
.miga a{color:var(--azul-700);text-decoration:none;}
.miga a:hover{text-decoration:underline;}
.miga span[aria-hidden]{margin:0 .35rem;color:var(--azul-400);}

.listado-notas{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1.2rem;}
@media (min-width:760px){.listado-notas{grid-template-columns:repeat(2,1fr);}}
.listado-notas .nota h2,.listado-notas .nota h3{font-size:1.28rem;}
.listado-notas--compacto{grid-template-columns:1fr;}
@media (min-width:760px){.listado-notas--compacto{grid-template-columns:repeat(2,1fr);}}

.articulo{padding-top:calc(var(--header-h) + 2.8rem);padding-bottom:clamp(3rem,7vw,5rem);}
.articulo .env{max-width:740px;}
.articulo__cab{padding-bottom:1.8rem;border-bottom:1px solid var(--regla);margin-bottom:2.2rem;}
.articulo__cab h1{font-size:clamp(1.9rem,4.8vw,2.9rem);margin-bottom:.5em;}
.articulo__resumen{font-size:1.14rem;line-height:1.6;color:#3c4a61;font-weight:500;}
.articulo__firma{font-size:.84rem;color:#66738a;margin:0;}
.articulo__cuerpo{font-size:1.08rem;line-height:1.72;}
.articulo__cuerpo h2{font-size:clamp(1.3rem,3.2vw,1.7rem);margin:2.4rem 0 .7rem;}
.articulo__cuerpo p{margin:0 0 1.2em;}
.lista-nota{list-style:none;padding:0;margin:0 0 1.4em;}
.lista-nota li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;}
.lista-nota li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-200) 50% 100%);}
.destacado{margin:2.2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--azul-700);}
.destacado p{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.35;color:var(--azul-900);font-weight:600;}
.articulo__cta{margin-top:3rem;padding:1.9rem 1.8rem;background:var(--azul-050);border-top:3px solid var(--azul-700);}
.articulo__cta h2{font-size:1.35rem;margin:0 0 .5rem;}
.articulo__cta p{font-size:1rem;margin:0 0 1.2rem;}
.articulo__otras{margin-top:3.2rem;padding-top:2rem;border-top:1px solid var(--regla);}
.articulo__otras>h2{font-size:1.3rem;}

/* ---------- 18. FOTOGRAFIA ----------
   Los espacios quedan preparados aunque el archivo todavia no exista: si la
   imagen no carga, app.js marca el contenedor y queda el recurso de marca. */
.foto{position:relative;overflow:hidden;background:var(--azul-100);}
.foto img{width:100%;height:100%;object-fit:cover;display:block;}
/* El retrato es 4:5 en todos los tamanos. Se probo 3:2 en el celular para que
   la foto no ocupe pantalla completa, pero recortaba un 4:5 ya recortado y
   dejaba la cara descentrada. Mejor una sola proporcion, bien encuadrada. */
.foto--retrato{aspect-ratio:4/5;}
.foto--panoramica{aspect-ratio:16/9;}
.foto__respaldo{position:absolute;top:0;right:0;bottom:0;left:0;display:none;}
.foto__respaldo i{position:absolute;top:0;bottom:0;width:50%;}
.foto__respaldo i:first-child{left:0;background:var(--azul-700);}
.foto__respaldo i:last-child{right:0;background:var(--azul-100);}
.foto__respaldo b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--serif);font-size:2.4rem;font-weight:600;color:var(--blanco);
  background:var(--azul-700);border:1px solid rgba(255,255,255,.4);
  width:96px;height:96px;display:flex;align-items:center;justify-content:center;
}
.foto.sin-imagen img{display:none;}
.foto.sin-imagen .foto__respaldo{display:block;}
figure{margin:0;}
figcaption{font-size:.82rem;color:#66738a;padding:.7rem 0 0;max-width:62ch;}
.equipo{margin-top:clamp(2.5rem,5vw,4rem);}

/* ---------- 19. MOVIMIENTO ----------
   Una sola entrada orquestada, en la portada. Nada mas se mueve al scrollear:
   una pagina que se sacude entera no transmite seriedad. */
@keyframes surgir{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.portada__izq>*{animation:surgir .75s cubic-bezier(.22,.61,.36,1) both;}
.portada__izq>*:nth-child(1){animation-delay:.05s;}
.portada__izq>*:nth-child(2){animation-delay:.13s;}
.portada__izq>*:nth-child(3){animation-delay:.21s;}
.portada__izq>*:nth-child(4){animation-delay:.29s;}
.portada__izq>*:nth-child(5){animation-delay:.37s;}
.portada__der{animation:surgir .8s cubic-bezier(.22,.61,.36,1) .32s both;}
.triaje li{animation:surgir .5s cubic-bezier(.22,.61,.36,1) both;}
.triaje li:nth-child(1){animation-delay:.44s;}
.triaje li:nth-child(2){animation-delay:.50s;}
.triaje li:nth-child(3){animation-delay:.56s;}
.triaje li:nth-child(4){animation-delay:.62s;}
.triaje li:nth-child(5){animation-delay:.68s;}
.triaje li:nth-child(6){animation-delay:.74s;}
@media (prefers-reduced-motion:reduce){
  .portada__izq>*,.portada__der,.triaje li{animation:none;opacity:1;transform:none;}
}

/* ============================================================================
   20. LANDINGS POR CIUDAD Y FICHAS DE SOCIO
   ----------------------------------------------------------------------------
   Estas paginas son el motor organico del sitio: una URL por consulta real.
   Se generan con herramientas/generar-paginas.js desde contenido/paginas.js.
   ========================================================================== */
.landing{padding-top:calc(var(--header-h) + clamp(1.6rem,4vw,2.6rem));padding-bottom:clamp(3rem,7vw,5rem);}
.landing .env{max-width:1080px;}
.landing__cab{padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--regla);margin-bottom:clamp(2rem,4vw,3rem);}
.landing__cab h1{max-width:20ch;margin-bottom:.5em;}
.landing__horario{margin:1.2rem 0 0;font-size:.9rem;color:var(--gris-texto);}

/* LA RESPUESTA DIRECTA — 40 a 60 palabras, arriba de todo.
   Es el bloque que los resumenes de IA extraen para citar una fuente, y desde
   2026 esa cita pesa mas que el puesto. Se marca con el partido girado. */
.respuesta-directa{
  position:relative;margin:0 0 1.8rem;padding-left:1.5rem;
  font-size:clamp(1.08rem,1.9vw,1.22rem);line-height:1.55;color:var(--grafito);max-width:62ch;
}
.respuesta-directa::before{
  content:"";position:absolute;left:0;top:.25em;bottom:.25em;width:4px;
  background:linear-gradient(to bottom,var(--azul-700) 0 50%,var(--azul-200) 50% 100%);
}

.landing__cuerpo{max-width:70ch;}
.bloque-texto{margin-bottom:clamp(2.2rem,4.5vw,3.2rem);}
.bloque-texto h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:0 0 .8rem;}
.bloque-texto p{font-size:1.05rem;line-height:1.68;color:var(--grafito);}
.lista-punteada{list-style:none;padding:0;margin:0 0 1.2em;}
.lista-punteada li{position:relative;padding-left:1.7rem;margin-bottom:.65rem;font-size:1.02rem;line-height:1.6;}
.lista-punteada li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-200) 50% 100%);}

/* Firma del socio: obligatoria en contenido juridico. Sin autor con
   credenciales, el contenido YMYL no se evalua. */
.firma-socio{
  margin:clamp(2rem,4vw,3rem) 0;padding:1.4rem 0 0;border-top:3px solid transparent;
  background-image:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);
  background-repeat:no-repeat;background-size:100% 3px;background-position:top left;
}
.firma-socio__quien{display:flex;align-items:flex-start;gap:1.1rem;}
.firma-socio__iniciales{
  flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:var(--azul-700);color:var(--blanco);font-family:var(--serif);font-size:1.35rem;font-weight:600;
}
.firma-socio__rotulo{margin:0;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-600);}
.firma-socio__nombre{margin:.25rem 0 .1rem;font-family:var(--serif);font-size:1.25rem;font-weight:600;}
.firma-socio__nombre a{color:var(--azul-900);text-decoration:none;}
.firma-socio__nombre a:hover{color:var(--azul-700);text-decoration:underline;}
.firma-socio__rol{margin:0;font-size:.88rem;color:var(--gris-texto);}

.landing__notas{margin:clamp(2.4rem,5vw,3.5rem) 0;padding-top:2rem;border-top:1px solid var(--regla);}
.landing__notas>h2{font-size:1.3rem;}
.landing__notas .listado-notas{margin-top:1.4rem;}

.landing__cierre{
  margin-top:clamp(2.4rem,5vw,3.5rem);padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--azul-050);border-top:3px solid var(--azul-700);
}
.landing__cierre h2{font-size:clamp(1.4rem,2.8vw,1.8rem);margin:0 0 .6rem;}
.landing__cierre p{font-size:1.03rem;max-width:60ch;}
.landing__cierre .aviso-legal{margin-top:1.8rem;}

/* Ficha de socio */
.perfil__cab{display:grid;gap:clamp(1.6rem,3.5vw,2.8rem);}
.perfil__intro .socio__areas{margin-bottom:1.6rem;}
@media (min-width:900px){
  .perfil__cab{grid-template-columns:5fr 7fr;align-items:start;}
}

/* NAP del pie: <address> es la etiqueta semantica correcta y el NAP tiene que
   ser identico caracter por caracter al de Google y al de las redes. */
.pie__nap{margin-top:1.1rem;max-width:36ch;font-style:normal;line-height:1.7;}

/* ============================================================================
   21. TRIAJE GUIADO — el intake de dos pasos que arma el mensaje de WhatsApp
   ----------------------------------------------------------------------------
   Los benchmarks de conversion legal 2026 son claros: las paginas que superan
   el 7% usan intake de varios pasos en vez de un formulario estatico. Aca no
   hay formulario —cero campos convierte mejor que tres— pero si hay dos
   preguntas que arman el mensaje. Ademas le dice al estudio de que ciudad y
   por que tema entro cada consulta, que es la unica atribucion disponible.
   Degrada: sin JavaScript, los enlaces del paso 1 abren WhatsApp igual.
   ========================================================================== */
/* La seccion va sobre el fondo hueso; la caja es marina. Un solo bloque
   oscuro dentro de una seccion clara: es donde se gasta la audacia. */
.guiado__caja{
  background:var(--azul-900);color:var(--blanco);
  padding:clamp(1.6rem,4vw,3rem);max-width:860px;
}
.guiado__caja h2,.guiado__caja h3{color:var(--blanco);}
.guiado__pasos{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--azul-300);}
.guiado__pasos b{color:var(--blanco);font-weight:700;}
.guiado__pregunta{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:600;line-height:1.15;color:var(--blanco);margin:0 0 1.4rem;}
.guiado__opciones{display:grid;grid-template-columns:1fr;gap:.7rem;list-style:none;margin:0;padding:0;}
@media (min-width:660px){.guiado__opciones{grid-template-columns:repeat(2,1fr);}}
.guiado__opciones li{margin:0;}
.guiado__op{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;
  min-height:60px;padding:.9rem 1.1rem;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--regla-oscura);color:var(--blanco);
  font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.25;
  text-decoration:none;transition:var(--trans);
}
.guiado__op:hover,.guiado__op:focus-visible{background:rgba(255,255,255,.08);border-color:var(--blanco);color:var(--blanco);}
.guiado__op svg{width:18px;height:18px;flex:none;color:var(--azul-300);transition:var(--trans);}
.guiado__op:hover svg{color:var(--blanco);transform:translateX(3px);}
.guiado__volver{
  margin-top:1.2rem;background:none;border:0;padding:.5rem 0;cursor:pointer;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-300);
}
.guiado__volver:hover{color:var(--blanco);}
.guiado__nota{margin:1.4rem 0 0;font-size:.88rem;color:var(--azul-200);max-width:52ch;}
.guiado__final{border-top:1px solid var(--regla-oscura);margin-top:1.6rem;padding-top:1.6rem;}
.guiado__final p{color:var(--azul-200);max-width:52ch;}
[hidden]{display:none !important;}

/* Enlaces a la landing dentro de cada tarjeta de zona */
.zona__enlaces{display:flex;flex-direction:column;gap:.45rem;margin:1rem 0 0;}
.zona__enlaces a{color:var(--blanco);text-decoration:none;font-size:.9rem;font-weight:600;border-bottom:1px solid var(--regla-oscura);padding-bottom:.45rem;}
.zona__enlaces a:hover{color:var(--azul-200);border-bottom-color:var(--azul-200);}
.zona__enlaces a:last-child{border-bottom:0;}

/* Pagina 404 */
.error404{padding-top:calc(var(--header-h) + clamp(3rem,8vw,6rem));padding-bottom:clamp(3rem,8vw,6rem);}
.error404 h1{max-width:18ch;}
.error404 .respuesta-directa{margin-top:1.4rem;}

/* Enlaces desde la nota a las landings de ciudad. Es el puente entre el
   contenido que trae visitas y la pagina que convierte. */
.articulo__ciudades{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--regla);font-size:.9rem;color:var(--gris-texto);}
.articulo__ciudades a{color:var(--azul-700);text-decoration:none;font-weight:600;}
.articulo__ciudades a:hover{text-decoration:underline;}
.articulo__firma a{color:var(--azul-700);text-decoration:none;font-weight:600;}
.articulo__firma a:hover{text-decoration:underline;}

/* Cierre de la seccion Nosotros. Ocupa el lugar que tenia la foto panoramica
   de los dos socios, sacada el 03/09/2026 porque esa foto todavia no existe. */
.nosotros__cierre{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-top:1.6rem;
  border-top:3px solid transparent;
  background-image:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);
  background-repeat:no-repeat;background-size:100% 3px;background-position:top left;
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.35;
  color:var(--azul-900);max-width:52ch;
}

/* Foto de la landing: banda 16:9 debajo del titular, antes del cuerpo. */
.landing__foto{margin:0 0 clamp(2rem,4vw,3rem);}
.landing__foto .foto{border-top:3px solid transparent;
  background-image:linear-gradient(to right,var(--azul-700) 0 50%,var(--azul-100) 50% 100%);
  background-repeat:no-repeat;background-size:100% 3px;background-position:top left;}