/* ==========================================================================
   GeoEstudios — hoja de estilos única
   Sistema visual: cartografía geológica (colores de unidad, tramas, anotación)
   ========================================================================== */

:root{
  /* Paleta — derivada del logo de GeoEstudios */
  --azul:#0D426E;           /* azul profundo del logo: color principal */
  --azul-claro:#17608F;     /* azul medio */
  --verde:#5EA164;          /* verde del logo */
  --verde-claro:#74B068;

  --basalto:#0B2338;        /* fondo oscuro, derivado del azul del logo */
  --basalto-2:#123049;
  --film:#FFFFFF;           /* papel: blanco limpio */
  --film-2:#F4F6F7;         /* gris muy claro para alternar */
  --ocre:var(--azul);       /* acento por defecto = azul de marca */
  --ocre-claro:var(--azul-claro);
  --verdigris:#3E8C79;

  --grafito:#26333C;        /* texto sobre papel */
  --grafito-3:#5C6B75;      /* texto tenue */
  --linea:#DCE2E5;          /* hairline sobre papel */
  --linea-osc:#1D3B52;      /* hairline sobre oscuro */

  /* Tipografía */
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,sans-serif;
  --texto:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Métrica */
  --ancho:1180px;
  --ancho-texto:660px;
  --radio:3px;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--film);
  color:var(--grafito);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.72;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

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

/* --- Utilidades de estructura ------------------------------------------ */

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.medida{max-width:var(--ancho-texto)}

.franja{padding:88px 0}
.franja--compacta{padding:56px 0}
.franja--oscura{background:var(--basalto);color:var(--film)}
.franja--papel2{background:var(--film-2)}

.franja--oscura a{color:var(--film)}

/* Salto de foco accesible */
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--ocre);color:#fff;
  padding:12px 20px;z-index:200;font-family:var(--mono);font-size:.8rem;
}
.saltar:focus{left:0}

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

/* --- Tipografía --------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  text-wrap:balance;
}

h1{font-size:clamp(2.4rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
h3{font-size:1.3rem;letter-spacing:-.015em}
h4{font-size:1.05rem;letter-spacing:0}

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

/* Etiqueta de anotación cartográfica */
.rotulo{
  font-family:var(--mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grafito-3);
  display:block;
  margin:0 0 18px;
}
.franja--oscura .rotulo{color:var(--ocre)}

.entradilla{
  font-size:clamp(1.08rem,1.7vw,1.3rem);
  line-height:1.6;
  color:var(--grafito-3);
}
.franja--oscura .entradilla{color:#AEB8B3}

/* --- Botones ------------------------------------------------------------ */

.boton{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--radio);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  cursor:pointer;
}
.boton--primario{background:var(--ocre);color:#fff;border-color:var(--ocre)}
.boton--primario:hover{background:var(--ocre-claro);border-color:var(--ocre-claro)}
.boton--linea{background:transparent;color:var(--grafito);border-color:var(--linea)}
.boton--linea:hover{border-color:var(--grafito);background:rgba(0,0,0,.03)}
.franja--oscura .boton--linea{color:var(--film);border-color:#3B4643}
.franja--oscura .boton--linea:hover{border-color:var(--film);background:rgba(255,255,255,.05)}

.grupo-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* --- Encabezado --------------------------------------------------------- */

.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  color:var(--grafito);
}
.cabecera__logo{height:34px;width:auto;display:block}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:70px;
}
.marca{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--grafito);
}
.marca__codigo{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.2em;color:var(--ocre);
}

.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  text-decoration:none;color:var(--grafito-3);padding:9px 13px;border-radius:var(--radio);
  transition:color .16s ease,background-color .16s ease;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--azul);background:rgba(13,66,110,.07)}

.nav__grupo{position:relative}
.nav__grupo > button{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;
  color:var(--grafito-3);background:none;border:0;padding:9px 13px;cursor:pointer;
  display:flex;align-items:center;gap:6px;border-radius:var(--radio);
}
.nav__grupo > button:hover{color:var(--azul);background:rgba(13,66,110,.07)}
.nav__panel{
  position:absolute;top:calc(100% + 8px);left:0;min-width:290px;
  background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:8px;display:none;
  box-shadow:0 18px 44px rgba(11,35,56,.14);
}
.nav__grupo[data-abierto="si"] .nav__panel{display:block}
.nav__panel a{display:block;padding:11px 13px;font-size:.79rem;line-height:1.35}

.cabecera .boton{padding:12px 20px;font-size:.76rem}

.menu-movil{
  display:none;background:none;border:1px solid var(--linea);color:var(--grafito);
  border-radius:var(--radio);padding:9px 13px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}

@media (max-width:940px){
  .menu-movil{display:block}
  .nav{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--linea);
    padding:14px 24px 22px;
    box-shadow:0 18px 40px rgba(11,35,56,.12);
  }
  .cabecera[data-menu="abierto"] .nav{display:flex}
  .nav__panel{position:static;display:block;border:0;box-shadow:none;
    background:transparent;padding:0 0 0 14px;min-width:0}
  .nav__grupo > button{width:100%;justify-content:space-between}
  .cabecera__fila > .boton{display:none}
  .nav .boton{margin-top:12px;justify-content:center}
}

/* --- Portada ------------------------------------------------------------ */

.portada{
  position:relative;overflow:hidden;
  background:var(--basalto);color:var(--film);
  padding:110px 0 84px;
}
.portada__curvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.3;pointer-events:none;
}
.portada__contenido{position:relative;z-index:2;max-width:800px}
.portada h1{margin-bottom:.42em}
.portada .entradilla{max-width:600px}

.coordenada{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ocre);
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
}
.coordenada::before{
  content:"";width:34px;height:1px;background:var(--ocre);flex:none;
}

/* --- Barra de datos ----------------------------------------------------- */

.datos{
  background:var(--basalto-2);color:var(--film);
  border-top:1px solid var(--linea-osc);
  border-bottom:1px solid var(--linea-osc);
}
.datos__rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.datos__celda{
  padding:30px 26px 30px 0;
  border-right:1px solid var(--linea-osc);
}
.datos__celda:last-child{border-right:0}
.datos__celda:not(:first-child){padding-left:26px}
.datos__valor{
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;display:block;margin-bottom:5px;color:var(--film);
}
.datos__nota{
  font-family:var(--mono);font-size:.72rem;line-height:1.5;
  letter-spacing:.03em;color:#9AA5A0;
}
@media (max-width:820px){
  .datos__rejilla{grid-template-columns:repeat(2,1fr)}
  .datos__celda{padding:24px 20px;border-bottom:1px solid var(--linea-osc)}
  .datos__celda:nth-child(2n){border-right:0}
  .datos__celda:not(:first-child){padding-left:20px}
}
@media (max-width:480px){
  .datos__rejilla{grid-template-columns:1fr}
  .datos__celda{border-right:0}
}

/* --- Convención de mapa (servicios) ------------------------------------- */
/* Los servicios se presentan como la leyenda de un mapa geológico.         */

.convencion{
  border-top:1px solid var(--linea);
  margin-top:44px;
}
.convencion__fila{
  display:grid;
  grid-template-columns:74px 1fr 300px;
  gap:28px;align-items:start;
  padding:32px 0;
  border-bottom:1px solid var(--linea);
  text-decoration:none;color:inherit;
  transition:background-color .18s ease;
}
.convencion__fila:hover{background:rgba(13,66,110,.045)}
.convencion__fila:hover .convencion__titulo{color:var(--azul)}

.convencion__clave{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.convencion__muestra{
  width:60px;height:40px;border:1px solid var(--grafito);border-radius:1px;
}
.convencion__codigo{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;color:var(--grafito-3);
}

/* Tramas de unidad: cada servicio tiene la suya */
.trama--fg{background:repeating-linear-gradient(45deg,#D4A03C 0 3px,#EBD9AF 3px 8px)}
.trama--gp{background:repeating-linear-gradient(-45deg,var(--verdigris) 0 3px,#CFE0DA 3px 8px)}
.trama--fi{background:repeating-linear-gradient(0deg,#7A5C9E 0 2px,#DED3EC 2px 9px)}
.trama--ct{background:repeating-linear-gradient(90deg,#9E5B4A 0 2px,#EBD5CF 2px 9px)}

.convencion__titulo{
  font-family:var(--display);font-size:1.42rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.15;margin:0 0 10px;
  transition:color .18s ease;
}
.convencion__texto{margin:0;font-size:.99rem;line-height:1.62;color:var(--grafito-3)}
.convencion__salidas{
  font-family:var(--mono);font-size:.73rem;line-height:1.85;
  letter-spacing:.02em;color:var(--grafito-3);
  list-style:none;margin:0;padding:0;
}
.convencion__salidas li{padding-left:16px;position:relative}
.convencion__salidas li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--grafito-3);
}

@media (max-width:900px){
  .convencion__fila{grid-template-columns:60px 1fr;gap:20px}
  .convencion__salidas{grid-column:2}
  .convencion__muestra{width:48px;height:32px}
}

/* --- Columna de proceso ------------------------------------------------- */
/* Rail vertical con marcas, como una columna estratigráfica.               */

.columna{margin-top:48px;border-left:1px solid var(--linea-osc);padding-left:0}
.franja--papel2 .columna{border-left-color:var(--linea)}

.columna__tramo{
  position:relative;padding:0 0 40px 40px;
}
.columna__tramo:last-child{padding-bottom:0}
.columna__tramo::before{
  content:"";position:absolute;left:-1px;top:9px;
  width:19px;height:1px;background:var(--ocre);
}
.columna__marca{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--ocre);display:block;margin-bottom:9px;
}
.columna__tramo h3{margin-bottom:.34em}
.columna__tramo p{color:var(--grafito-3);max-width:56ch}
.franja--oscura .columna__tramo p{color:#A9B3AE}

/* --- Bloques de contenido ----------------------------------------------- */

.duo{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
}
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:40px}}

.lista-marcada{list-style:none;margin:26px 0 0;padding:0}
.lista-marcada li{
  position:relative;padding:0 0 15px 26px;line-height:1.6;
}
.lista-marcada li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border:1px solid var(--ocre);
  background:rgba(13,66,110,.12);
}
.franja--oscura .lista-marcada li::before{border-color:var(--ocre);background:rgba(212,160,60,.2)}

.ficha{
  background:var(--film-2);border:1px solid var(--linea);
  border-radius:var(--radio);padding:30px 32px;
}
.franja--papel2 .ficha{background:var(--film)}
.ficha h3{margin-bottom:.5em}

.aviso{
  border-left:2px solid var(--ocre);
  padding:4px 0 4px 22px;margin:30px 0;
  color:var(--grafito-3);font-size:.99rem;
}
.franja--oscura .aviso{color:#A9B3AE}

/* --- Preguntas ---------------------------------------------------------- */

.pregunta{border-bottom:1px solid var(--linea);padding:0}
.pregunta:first-of-type{border-top:1px solid var(--linea)}
.pregunta summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:1.08rem;
  letter-spacing:-.01em;line-height:1.34;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{
  content:"+";position:absolute;right:8px;top:22px;
  font-family:var(--mono);font-size:1.15rem;color:var(--ocre);
  transition:transform .2s ease;
}
.pregunta[open] summary::after{content:"\2013"}
.pregunta__cuerpo{padding:0 44px 26px 0;color:var(--grafito-3);max-width:70ch}

/* --- Cierre ------------------------------------------------------------- */

.cierre{
  background:var(--basalto);color:var(--film);
  padding:92px 0;text-align:left;
}
.cierre h2{max-width:16ch}
.cierre .entradilla{max-width:52ch}

/* --- Pie ---------------------------------------------------------------- */

.pie{
  background:var(--basalto-2);color:#A9B3AE;
  border-top:1px solid var(--linea-osc);
  padding:64px 0 30px;font-size:.94rem;
}
.pie__rejilla{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid var(--linea-osc);
}
.pie h4{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ocre);
  margin:0 0 18px;
}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:11px;line-height:1.45}
.pie a{text-decoration:none;color:#A9B3AE;transition:color .16s ease}
.pie a:hover{color:var(--film)}
.pie__marca{
  font-family:var(--display);font-weight:800;font-size:1.24rem;
  letter-spacing:-.03em;color:var(--film);margin:0 0 14px;
}
.pie__legal{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding-top:26px;font-family:var(--mono);font-size:.71rem;
  letter-spacing:.03em;color:#78837E;
}
@media (max-width:800px){.pie__rejilla{grid-template-columns:1fr;gap:34px}}

/* --- Detalles varios ---------------------------------------------------- */

.enlace-texto{
  color:var(--ocre);text-decoration:none;
  border-bottom:1px solid rgba(13,66,110,.35);
  padding-bottom:1px;transition:border-color .16s ease;
}
.enlace-texto:hover{border-bottom-color:var(--ocre)}
.franja--oscura .enlace-texto{color:var(--ocre);border-bottom-color:rgba(212,160,60,.45)}
.franja--oscura .enlace-texto:hover{border-bottom-color:var(--ocre)}

.documento h2{margin-top:2em}
.documento h3{margin-top:1.6em}
.documento ul{padding-left:22px}
.documento li{margin-bottom:9px}

.figura{margin:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--film-2)}
.figura img{width:100%}
.figura figcaption{
  font-family:var(--mono);font-size:.72rem;line-height:1.55;letter-spacing:.02em;
  color:var(--grafito-3);padding:14px 18px;border-top:1px solid var(--linea);
}

.marcador{
  display:inline-block;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(13,66,110,.09);color:var(--azul);
  border:1px solid rgba(13,66,110,.28);
  padding:3px 9px;border-radius:1px;
}

/* ==========================================================================
   Imágenes — fotografía aérea y cartografía propia
   ========================================================================== */

/* La portada ya no crece con la imagen: altura acotada y contenido siempre visible */
.portada{
  min-height:auto;
  display:flex;align-items:center;
}
.portada__foto{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 55%;
  opacity:.30;pointer-events:none;z-index:1;
  filter:grayscale(1) contrast(1.04);
}
.portada::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(96deg,
    rgba(19,26,24,.95) 0%, rgba(19,26,24,.84) 46%, rgba(19,26,24,.5) 100%);
}
.portada__curvas{position:absolute;inset:0;z-index:3}
.portada__contenido{position:relative;z-index:4;width:100%}

/* Lámina de imagen con pie técnico */
.lamina{
  margin:0;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--basalto);
}
.franja--oscura .lamina{border-color:var(--linea-osc)}
.lamina img{width:100%;display:block}
.lamina figcaption{
  font-family:var(--mono);font-size:.71rem;line-height:1.6;letter-spacing:.02em;
  color:#9AA5A0;padding:13px 16px;border-top:1px solid var(--linea-osc);
  background:var(--basalto-2);
}
.lamina figcaption strong{color:var(--ocre);font-weight:500}

.laminas{display:grid;gap:18px;margin-top:34px}
.laminas--par{grid-template-columns:1fr 1fr}
@media (max-width:760px){.laminas--par{grid-template-columns:1fr}}

/* ==========================================================================
   Color por servicio
   --------------------------------------------------------------------------
   Cada página de servicio adopta el color de su unidad en la convención del
   mapa. El mismo código que identifica el servicio en la leyenda del home
   tiñe después toda su landing: acentos, rótulos, botones y curvas de nivel.
   ========================================================================== */

body[data-unidad="gp"]{ --ocre:#4A8C52; --ocre-claro:#5EA164; }  /* Estudio de predio */
body[data-unidad="fi"]{ --ocre:#8B6BB1; --ocre-claro:#A084C4; }  /* Peritaje */
body[data-unidad="fg"]{ --ocre:#D4A03C; --ocre-claro:#E4B152; }  /* Dron */
body[data-unidad="ct"]{ --ocre:#B87058; --ocre-claro:#C9846C; }  /* Cartografía */

.boton--primario:hover{ background:var(--ocre-claro,#E4B152); border-color:var(--ocre-claro,#E4B152) }

/* La muestra de la convención señala en qué servicio está el visitante */
body[data-unidad] .convencion__fila[aria-current="page"]{
  background:rgba(0,0,0,.035);
}

/* Logo en el pie, sobre fondo oscuro: se invierte a blanco */
.pie__logo{
  height:30px;width:auto;display:block;margin:0 0 16px;
  filter:brightness(0) invert(1);opacity:.92;
}

/* ==========================================================================
   Contextos oscuros — portada y cierre
   --------------------------------------------------------------------------
   Estas dos secciones tienen fondo oscuro pero no llevan la clase
   .franja--oscura, así que necesitan las mismas variantes de contraste.
   ========================================================================== */

.portada .boton--linea,
.cierre .boton--linea{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.42);
}
.portada .boton--linea:hover,
.cierre .boton--linea:hover{
  border-color:#fff;
  background:rgba(255,255,255,.1);
}

.portada .rotulo,
.cierre .rotulo{color:var(--ocre-claro)}

.portada .entradilla,
.cierre .entradilla{color:#C3CDD4}

.portada a,
.cierre a{color:#fff}

.cierre .lista-marcada li::before,
.portada .lista-marcada li::before{
  border-color:var(--ocre-claro);
  background:rgba(255,255,255,.18);
}

.cierre .enlace-texto,
.portada .enlace-texto{
  color:#fff;border-bottom-color:rgba(255,255,255,.45);
}
.cierre .enlace-texto:hover,
.portada .enlace-texto:hover{border-bottom-color:#fff}

/* El botón primario sobre fondo oscuro necesita más presencia */
.portada .boton--primario,
.cierre .boton--primario{
  background:var(--ocre-claro);
  border-color:var(--ocre-claro);
  color:#fff;
}
.portada .boton--primario:hover,
.cierre .boton--primario:hover{
  background:#fff;border-color:#fff;color:var(--azul);
}

/* Contraste del acento sobre franjas oscuras, ahora que la base es azul */
.franja--oscura .rotulo{color:var(--ocre-claro)}
.franja--oscura .lista-marcada li::before{
  border-color:var(--ocre-claro);background:rgba(255,255,255,.16);
}
.franja--oscura .aviso{border-left-color:var(--ocre-claro)}
.franja--oscura .columna__marca{color:var(--ocre-claro)}
.franja--oscura .columna__tramo::before{background:var(--ocre-claro)}
.franja--oscura .enlace-texto{color:#fff;border-bottom-color:rgba(255,255,255,.45)}

/* En la cabecera solo debe verse un botón: el del final de la fila.
   El de dentro de la navegación es exclusivo del menú móvil. */
.nav > .boton{display:none}
@media (max-width:940px){
  .nav > .boton{display:inline-flex}
}

/* Lámina a ancho completo, fuera de la retícula de dos columnas */
.lamina--suelta{margin-top:44px}

/* Que las imágenes altas no dominen la página */
.lamina img{max-height:660px;object-fit:cover;object-position:center}
.laminas--par .lamina img{max-height:460px}

/* ==========================================================================
   Celular
   --------------------------------------------------------------------------
   Los espaciados y tamaños de escritorio resultan excesivos en pantalla
   pequeña: obligan a hacer mucho scroll para ver poco contenido.
   ========================================================================== */

/* Nada debe desbordar horizontalmente */
html,body{overflow-x:hidden;max-width:100%}

@media (max-width:760px){

  .envoltura{padding:0 20px}

  /* Menos aire vertical: en celular el espacio se paga con scroll */
  .franja{padding:52px 0}
  .franja--compacta{padding:38px 0}
  .cierre{padding:56px 0}
  .portada{padding:64px 0 52px !important}

  /* Titulares proporcionados a la pantalla */
  h1{font-size:clamp(1.95rem,7.6vw,2.5rem);letter-spacing:-.02em}
  h2{font-size:clamp(1.5rem,5.6vw,1.95rem)}
  h3{font-size:1.15rem}
  .entradilla{font-size:1.02rem;line-height:1.55}
  body{font-size:1rem}

  /* La imagen se ve completa, sin recorte */
  .lamina img{max-height:none;object-fit:contain}
  .lamina--suelta{margin-top:30px}
  .lamina figcaption{font-size:.68rem;padding:11px 13px}
  .laminas{gap:14px;margin-top:24px}

  /* Convención de servicios: la clave arriba, en línea */
  .convencion{margin-top:28px}
  .convencion__fila{
    grid-template-columns:1fr;gap:14px;padding:26px 0;
  }
  .convencion__clave{flex-direction:row;align-items:center;gap:12px}
  .convencion__muestra{width:42px;height:26px}
  .convencion__salidas{grid-column:1}
  .convencion__titulo{font-size:1.22rem}

  /* Proceso y listas */
  .columna__tramo{padding:0 0 30px 26px}
  .columna__tramo::before{width:14px}
  .duo{gap:32px}

  /* Barra de datos */
  .datos__celda{padding:20px 0}
  .datos__valor{font-size:1.3rem}

  /* Botones cómodos de tocar y a todo el ancho */
  .grupo-botones{gap:10px;margin-top:24px}
  .grupo-botones .boton{width:100%;justify-content:center;padding:16px 22px}
  .cabecera .boton,.nav .boton{width:auto}

  /* Preguntas frecuentes */
  .pregunta summary{padding:20px 38px 20px 0;font-size:1rem}
  .pregunta__cuerpo{padding:0 8px 22px 0}

  /* Cabecera */
  .cabecera__fila{height:62px}
  .cabecera__logo{height:28px}
  .nav{top:62px}

  .aviso{padding-left:16px;font-size:.95rem}
  .ficha{padding:22px 20px}
  .pie{padding:44px 0 24px}
  .pie__rejilla{padding-bottom:32px}
}

/* Pantallas muy estrechas */
@media (max-width:380px){
  .envoltura{padding:0 16px}
  h1{font-size:1.8rem}
  .marca__codigo{display:none}
}

/* ==========================================================================
   Comparador deslizante
   --------------------------------------------------------------------------
   Dos imágenes del mismo encuadre, reveladas al arrastrar. Es la forma
   natural de mostrar un análisis multitemporal: el visitante mueve el tiempo
   con el dedo.
   ========================================================================== */

.comparador{
  position:relative;overflow:hidden;
  border:1px solid var(--linea-osc);border-radius:var(--radio);
  background:var(--basalto);touch-action:pan-y;user-select:none;
  cursor:ew-resize;
}
.comparador img{
  display:block;width:100%;height:auto;pointer-events:none;
}
.comparador__frente{
  position:absolute;inset:0;width:50%;overflow:hidden;
  will-change:width;
}
.comparador__frente img{
  height:100%;object-fit:cover;object-position:left center;
  max-width:none;
}
.comparador__tirador{
  position:absolute;top:0;bottom:0;left:50%;width:2px;
  background:#fff;transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;
}
.comparador__tirador::after{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border:2px solid #fff;border-radius:50%;
  background:rgba(11,35,56,.55);backdrop-filter:blur(3px);
}
.comparador__tirador::before{
  content:"↔";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:2;
  color:#fff;font-family:var(--mono);font-size:1.05rem;line-height:1;
}
.comparador__etiqueta{
  position:absolute;top:14px;z-index:3;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
  background:rgba(11,35,56,.78);padding:6px 11px;border-radius:2px;
  pointer-events:none;
}
.comparador__etiqueta--izq{left:14px}
.comparador__etiqueta--der{right:14px}

/* ==========================================================================
   Progresión por pasos
   --------------------------------------------------------------------------
   El mismo encuadre en tres estados. Muestra el método sin explicarlo.
   ========================================================================== */

.progresion{border:1px solid var(--linea-osc);border-radius:var(--radio);overflow:hidden;background:var(--basalto)}
.progresion__marco{position:relative;aspect-ratio:16/9;background:var(--basalto)}
.progresion__capa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .5s ease;
}
.progresion__capa[data-activa="si"]{opacity:1}
.progresion__pasos{
  display:flex;border-top:1px solid var(--linea-osc);
  background:var(--basalto-2);
}
.progresion__paso{
  flex:1;padding:16px 18px;background:none;border:0;
  border-right:1px solid var(--linea-osc);cursor:pointer;text-align:left;
  color:#93A2AC;transition:color .2s ease,background-color .2s ease;
}
.progresion__paso:last-child{border-right:0}
.progresion__paso:hover{background:rgba(255,255,255,.05);color:#fff}
.progresion__paso[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07)}
.progresion__paso[aria-selected="true"] .progresion__num{color:var(--ocre-claro)}
.progresion__num{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  margin-bottom:6px;color:#63757F;transition:color .2s ease;
}
.progresion__nombre{
  font-family:var(--display);font-weight:600;font-size:.98rem;
  letter-spacing:-.01em;display:block;
}
.progresion__nota{
  font-family:var(--mono);font-size:.68rem;line-height:1.55;
  color:#93A2AC;padding:14px 18px;border-top:1px solid var(--linea-osc);
  background:var(--basalto-2);
}

@media (max-width:640px){
  .progresion__pasos{flex-direction:column}
  .progresion__paso{border-right:0;border-bottom:1px solid var(--linea-osc);padding:13px 16px}
  .progresion__paso:last-child{border-bottom:0}
  .progresion__num{display:inline;margin:0 8px 0 0}
  .progresion__nombre{display:inline}
  .comparador__tirador::after{width:52px;height:52px;margin:-26px 0 0 -26px}
  .comparador__etiqueta{font-size:.62rem;padding:5px 9px;top:10px}
  .comparador__etiqueta--izq{left:10px}
  .comparador__etiqueta--der{right:10px}
}

/* ==========================================================================
   Correcciones de los componentes interactivos
   --------------------------------------------------------------------------
   El comparador vivía dentro de .lamina y heredaba max-height y object-fit,
   lo que desalineaba las dos capas. Ahora tiene su propio contenedor.
   ========================================================================== */

.figura-comparador{margin:44px 0 0}
.figura-comparador figcaption{
  font-family:var(--mono);font-size:.71rem;line-height:1.6;letter-spacing:.02em;
  color:#9AA5A0;padding:13px 16px;
  border:1px solid var(--linea-osc);border-top:0;
  background:var(--basalto-2);
}
.figura-comparador figcaption strong{color:var(--ocre-claro);font-weight:500}

/* Las dos capas deben recortarse igual o no coinciden */
.comparador img,
.comparador__frente img{
  max-height:none;
  object-fit:cover;
  object-position:center;
}
.comparador__frente img{object-position:left center}

/* La progresión se apila al mismo ancho que el resto del sitio */
@media (max-width:760px){
  .progresion__pasos{flex-direction:column}
  .progresion__paso{
    border-right:0;border-bottom:1px solid var(--linea-osc);padding:13px 16px;
  }
  .progresion__paso:last-child{border-bottom:0}
  .progresion__num{display:inline;margin:0 8px 0 0}
  .progresion__nombre{display:inline}
  .progresion__marco{aspect-ratio:4/3}
  .figura-comparador{margin-top:30px}
  .figura-comparador figcaption{font-size:.68rem;padding:11px 13px}
}

/* Objetivos táctiles cómodos en celular: mínimo 44px de alto */
@media (max-width:940px){
  .nav a{padding:14px 13px}
  .nav__grupo > button{padding:14px 13px}
  .nav__panel a{padding:13px 13px}
  .menu-movil{padding:12px 15px}
}

/* El pie usa h3 por jerarquía, pero conserva su apariencia de rótulo */
.pie__titulo{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ocre-claro);
  margin:0 0 18px;
}