/* ==========================================================================
   SmAL Servicios y Suministros
   Hoja única. Orden: 1 tokens · 2 base · 3 utilidades · 4 componentes ·
   5 cabecera · 6 hero · 7 secciones · 7b una sola gestión · 8 pie · 9 movimiento
   Regla de la casa: ningún color, tamaño, radio ni curva fuera de los tokens.
   ========================================================================== */

/* 1. TOKENS --------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color · neutros por capas, tomados del globo del logo */
  --c-fondo: #FFFFFF;
  --c-fondo-alt: #F5F5F9;
  --c-superficie: #FFFFFF;
  --c-superficie-2: #ECEBF2;
  --c-linea: #DEDCE5;
  --c-linea-fuerte: #8B8FA8;

  /* Color · texto en tres niveles */
  --c-texto-1: #0E1330;
  --c-texto-2: #474C66;
  --c-texto-3: #62677F;

  /* Color · acento único */
  --c-acento: #9A5B0E;
  --c-acento-activo: #844D0A;
  --c-sobre-acento: #FFFFFF;

  /* Color · tinta de marca (el marino del logo) y lo que va encima */
  --c-marino: #151E61;
  --c-sobre-marino: #FFFFFF;
  --c-sobre-marino-2: #C9CCE0;
  --c-acento-marino: #E3A552;
  --c-marino-2: #1B2570;
  --c-linea-marino: #343E8C;
  --c-trazo-marino: #7F88C8;

  /* Tipografía */
  --fuente: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --peso-texto: 400;
  --peso-medio: 600;
  --peso-titulo: 800;
  --ancho-titulo: 112%;

  --fs-h1: clamp(2.5rem, 4.6vw + 1rem, 4.75rem);
  --fs-h2: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  --fs-h3: clamp(1.375rem, 0.9vw + 1.1rem, 1.75rem);
  --fs-servicio: clamp(1.625rem, 2vw + 1.1rem, 2.5rem);
  --fs-entrada: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-texto: clamp(1rem, 0.2vw + 0.96rem, 1.0625rem);
  --fs-dato: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --fs-menor: 0.9375rem;
  --fs-rotulo: 0.75rem;

  --lh-titulo: 1.02;
  --lh-subtitulo: 1.15;
  --lh-texto: 1.6;
  --tr-h1: -0.03em;
  --tr-h2: -0.02em;
  --tr-rotulo: 0.14em;
  --medida: 44ch;

  /* Espaciado */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-seccion: clamp(4rem, 10vw, 9rem);
  --margen: clamp(1rem, 4vw, 2.5rem);
  --contenedor: 75rem;
  --columna: clamp(1.5rem, 4vw, 4rem);

  /* Forma */
  --radio-1: 4px;
  --radio-2: 8px;
  --radio-pildora: 999px;
  --trazo: 1px;

  /* Movimiento · una sola curva, dos duraciones */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --t-corto: 0.25s;
  --t-largo: 0.75s;

  /* Medidas fijas */
  --alto-cabecera: 4.25rem;
  --toque: 2.75rem;
}

/* 2. BASE ----------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto-2);
  font-family: var(--fuente);
  font-size: var(--fs-texto);
  font-weight: var(--peso-texto);
  line-height: var(--lh-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

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

a { color: inherit; }

p { max-width: var(--medida); text-wrap: pretty; }

::selection { background: var(--c-marino); color: var(--c-sobre-marino); }

:focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
  border-radius: var(--radio-1);
}

/* 3. UTILIDADES ----------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: calc(var(--contenedor) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 30;
  padding: var(--e-3) var(--e-4);
  background: var(--c-marino);
  color: var(--c-sobre-marino);
  font-weight: var(--peso-medio);
  text-decoration: none;
  border-radius: var(--radio-1);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* 4. COMPONENTES ---------------------------------------------------------- */

.titulo {
  max-width: 18ch;
  color: var(--c-texto-1);
  font-size: var(--fs-h2);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
}

.subtitulo {
  color: var(--c-texto-1);
  font-size: var(--fs-h3);
  font-weight: var(--peso-medio);
  line-height: var(--lh-subtitulo);
  letter-spacing: -0.01em;
}

.entrada {
  max-width: 34ch;
  color: var(--c-texto-2);
  font-size: var(--fs-entrada);
  line-height: 1.4;
}

.rotulo {
  color: var(--c-texto-3);
  font-size: var(--fs-rotulo);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  letter-spacing: var(--tr-rotulo);
  text-transform: uppercase;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 var(--e-5);
  border: var(--trazo) solid transparent;
  border-radius: var(--radio-1);
  font: inherit;
  font-size: 1rem;
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-corto) var(--curva),
              border-color var(--t-corto) var(--curva),
              color var(--t-corto) var(--curva);
}
.boton--compacto { min-height: var(--toque); padding-inline: var(--e-4); font-size: var(--fs-menor); }

.boton--primario { background: var(--c-acento); color: var(--c-sobre-acento); }
.boton--primario:hover { background: var(--c-acento-activo); }

.boton--contorno { border-color: var(--c-linea-fuerte); color: var(--c-texto-1); }
.boton--contorno:hover { border-color: var(--c-texto-1); background: var(--c-texto-1); color: var(--c-fondo); }

.rotulo--marino { color: var(--c-sobre-marino-2); }
.titulo--marino { color: var(--c-sobre-marino); }
.entrada--marino { color: var(--c-sobre-marino-2); }

.boton--sobre-marino { background: var(--c-acento-marino); color: var(--c-marino); }
.boton--sobre-marino:hover { background: var(--c-sobre-marino); }

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  color: var(--c-texto-1);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-decoration-color: var(--c-acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  transition: color var(--t-corto) var(--curva);
}
.enlace:hover { color: var(--c-acento); }

/* 5. CABECERA ------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-fondo);
  border-bottom: var(--trazo) solid transparent;
  transition: border-color var(--t-corto) var(--curva);
}
.cabecera--desplazada,
.cabecera--abierta { border-bottom-color: var(--c-linea); }
/* Con sesión iniciada en WordPress, la barra de administración ocupa el borde superior. */
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cabecera { top: 0; } }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--alto-cabecera);
}

.cabecera__logo { display: block; flex: none; border-radius: 50%; }
.cabecera__logo img { width: 3.75rem; height: 3.75rem; }

.cabecera__menu {
  display: none;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  margin-right: calc(var(--e-3) * -1);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--radio-1);
  background: none;
  color: var(--c-texto-1);
  font: inherit;
  font-size: var(--fs-menor);
  font-weight: var(--peso-medio);
  cursor: pointer;
}
.cabecera__menu-icono { position: relative; width: 1.25rem; height: 0.625rem; }
.cabecera__menu-icono span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-corto) var(--curva), top var(--t-corto) var(--curva);
}
.cabecera__menu-icono span:first-child { top: 0; }
.cabecera__menu-icono span:last-child { top: calc(100% - 2px); }
.cabecera--abierta .cabecera__menu-icono span { top: calc(50% - 1px); }
.cabecera--abierta .cabecera__menu-icono span:first-child { transform: rotate(45deg); }
.cabecera--abierta .cabecera__menu-icono span:last-child { transform: rotate(-45deg); }

.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e-2) var(--e-5); }
.nav__lista { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); }
.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border-radius: var(--radio-1);
  color: var(--c-texto-1);
  font-size: var(--fs-menor);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--t-corto) var(--curva);
}
.nav__enlace:hover { color: var(--c-acento); }

/* Panel móvil: solo cuando hay script. Sin script, el menú queda a la vista. */
@media (max-width: 47.99em) {
  .js .cabecera__menu { display: inline-flex; }

  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    justify-content: stretch;
    gap: var(--e-5);
    padding: var(--e-4) var(--margen) var(--e-6);
    background: var(--c-fondo);
    border-bottom: var(--trazo) solid var(--c-linea);
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(var(--e-2) * -1));
    transition: opacity var(--t-corto) var(--curva),
                transform var(--t-corto) var(--curva),
                visibility 0s linear var(--t-corto);
  }
  .js .cabecera--abierta .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .js .nav__lista { display: grid; }
  .js .nav__enlace {
    width: 100%;
    min-height: 3.5rem;
    padding: 0;
    border-bottom: var(--trazo) solid var(--c-linea);
    border-radius: 0;
    font-size: var(--fs-entrada);
  }
  .js .nav .boton { min-height: 3rem; font-size: 1rem; }
}

/* 6. HERO ----------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  padding-top: clamp(2rem, 6vw, 5rem);
}

.hero__rejilla {
  display: grid;
  gap: var(--e-7) var(--columna);
}

.hero__titulo {
  color: var(--c-texto-1);
  font-size: var(--fs-h1);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-h1);
}
.hero__linea { display: block; }

.hero__bajada {
  max-width: 34ch;
  margin-top: var(--e-5);
  color: var(--c-texto-2);
  font-size: var(--fs-entrada);
  line-height: 1.4;
}

.hero__acciones {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.hero__texto { position: relative; z-index: 1; }

/* Las órbitas solo asoman en la franja de aire que rodea la foto. */
.hero__visual {
  position: relative;
  isolation: isolate;
  clip-path: inset(calc(var(--e-7) * -1) -100vmax);
}

.hero__foto {
  overflow: hidden;
  border-radius: var(--radio-2);
  background: var(--c-superficie-2);
}
.hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* El globo del logo, a escala de sección: la foto ocupa el lugar del nombre. */
.hero__orbitas {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 168%;
  max-width: none;
  translate: -50% -50%;
  fill: none;
  stroke: var(--c-linea);
  stroke-width: 1;
  pointer-events: none;
}

.hero__servicios {
  margin-top: var(--e-7);
  border-top: var(--trazo) solid var(--c-linea);
  background: var(--c-fondo);
  position: relative;
}
.hero__servicios li + li { border-top: var(--trazo) solid var(--c-linea); }
.hero__servicios a {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-5);
  text-decoration: none;
}
.hero__servicio-nombre {
  color: var(--c-texto-1);
  font-size: 1.125rem;
  font-weight: var(--peso-medio);
  line-height: 1.25;
  transition: color var(--t-corto) var(--curva);
}
.hero__servicio-detalle { color: var(--c-texto-3); font-size: var(--fs-menor); line-height: 1.4; }
.hero__servicios a:hover .hero__servicio-nombre { color: var(--c-acento); }

@media (min-width: 30em) {
  .hero__acciones { display: flex; flex-wrap: wrap; }
}

@media (min-width: 48em) {
  .hero__servicios { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hero__servicios li + li { border-top: 0; border-left: var(--trazo) solid var(--c-linea); }
  .hero__servicios li + li a { padding-left: var(--e-5); }
  .hero__servicios a { padding-right: var(--e-4); }
  .hero__foto img { aspect-ratio: 16 / 9; }
  .hero__orbitas { width: 112%; }
}

@media (min-width: 60em) {
  .hero__rejilla { grid-template-columns: 7fr 5fr; align-items: end; }
  .hero__foto img { aspect-ratio: 4 / 3; }
  .hero__orbitas { width: 150%; }
  .hero__visual { clip-path: inset(calc(var(--e-8) * -1) -100vmax calc(var(--e-8) * -1)); }
  .hero__servicios { margin-top: var(--e-8); }
}

/* 7. SECCIONES ------------------------------------------------------------ */

.seccion { padding-block: var(--e-seccion); }
.seccion--alt { background: var(--c-fondo-alt); }
.seccion--linea { border-top: var(--trazo) solid var(--c-linea); }

.seccion__encabezado { display: grid; gap: var(--e-5); margin-bottom: var(--e-7); }

/* Servicios · tres filas al mismo nivel; el nombre manda, la descripción está siempre a la vista */
.servicio {
  display: grid;
  gap: var(--e-3);
  padding-block: var(--e-6);
  border-top: var(--trazo) solid var(--c-linea);
  transition: border-color var(--t-corto) var(--curva);
}
.servicio:last-child { border-bottom: var(--trazo) solid var(--c-linea); }
.servicio:hover,
.servicio:focus-within { border-top-color: var(--c-texto-1); }
.servicio__nombre {
  max-width: 12ch;
  color: var(--c-texto-1);
  font-size: var(--fs-servicio);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: 1.05;
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
}
.servicio .enlace { justify-self: start; }

/* Aliados · la frase es la pieza; foto y texto la acompañan */
.declaracion {
  max-width: 20ch;
  color: var(--c-texto-1);
  font-size: var(--fs-h1);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-h1);
  text-wrap: balance;
}
.aliados__cuerpo { display: grid; gap: var(--e-6) var(--columna); margin-top: var(--e-7); }
.aliados__foto { overflow: hidden; border-radius: var(--radio-2); background: var(--c-superficie-2); }
.aliados__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Por qué confiar · título fijo a la izquierda, pilares apilados a la derecha */
.confianza { display: grid; gap: var(--e-7) var(--columna); }
.confianza__intro { display: grid; gap: var(--e-5); align-content: start; }
.pilar { display: grid; gap: var(--e-2); padding-block: var(--e-6); border-top: var(--trazo) solid var(--c-linea); }
.pilar:first-child { border-top-color: var(--c-texto-1); }
.pilar:last-child { border-bottom: var(--trazo) solid var(--c-linea); }
.pilar dt {
  color: var(--c-texto-1);
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-subtitulo);
  letter-spacing: -0.01em;
}
.pilar dd { max-width: var(--medida); }

/* Nosotros · quiénes somos arriba; misión y visión como par de superficies */
.nosotros__acerca { display: grid; gap: var(--e-6) var(--columna); }
.nosotros__texto { display: grid; gap: var(--e-5); align-content: start; }
.entrada--fuerte { color: var(--c-texto-1); }
.nosotros__par { display: grid; gap: var(--e-4); margin-top: var(--e-7); }
.tarjeta {
  display: grid;
  gap: var(--e-3);
  align-content: start;
  padding: var(--e-6) var(--e-5);
  background: var(--c-superficie);
  border: var(--trazo) solid var(--c-linea);
  border-radius: var(--radio-2);
}

/* Contacto · cierre en una franja, eco de la franja de servicios del hero */
.contacto { display: grid; gap: var(--e-7) var(--columna); }
.contacto__llamada { display: grid; gap: var(--e-6); justify-items: start; align-content: start; }
.contacto__datos { border-top: var(--trazo) solid var(--c-linea); }
.contacto__datos > div {
  display: grid;
  gap: var(--e-1);
  align-content: start;
  padding-block: var(--e-4);
  border-bottom: var(--trazo) solid var(--c-linea);
}
.contacto__datos dd { color: var(--c-texto-1); font-size: var(--fs-dato); line-height: 1.4; }
.contacto__dato { display: inline-flex; align-items: center; min-height: var(--toque); }
.enlace--dato { font-weight: var(--peso-texto); }

/* Aviso de página no encontrada (plantilla 404 del tema) */
.aviso { display: grid; gap: var(--e-5); justify-items: start; }

@media (min-width: 48em) {
  .nosotros__par { grid-template-columns: 1fr 1fr; gap: var(--e-5); }

  .contacto__datos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .contacto__datos > div {
    padding: 0 var(--e-4) 0 var(--e-5);
    border-bottom: 0;
    border-left: var(--trazo) solid var(--c-linea);
  }
}

@media (min-width: 60em) {
  .seccion__encabezado { grid-template-columns: 7fr 5fr; align-items: end; }
  .servicio { grid-template-columns: 5fr 4fr 3fr; gap: var(--columna); align-items: start; padding-block: var(--e-7); }
  .servicio__texto { padding-top: var(--e-2); }
  .servicio .enlace { justify-self: end; }

  .aliados__cuerpo { grid-template-columns: 7fr 5fr; align-items: end; margin-top: var(--e-8); }
  .aliados__foto img { aspect-ratio: 3 / 2; }

  .confianza { grid-template-columns: 5fr 7fr; }
  .confianza__intro { position: sticky; top: calc(var(--alto-cabecera) + var(--e-6)); }

  .nosotros__acerca { grid-template-columns: 5fr 7fr; }
  .tarjeta { padding: var(--e-7); }

  .contacto { grid-template-columns: 4fr 8fr; align-items: end; }
}

/* 7b. UNA SOLA GESTIÓN ----------------------------------------------------- */
/* Pieza firma: un plano con tres capas. Cada interruptor enciende un servicio. */

.gestion {
  padding-block: var(--e-seccion);
  background: var(--c-marino);
  color: var(--c-sobre-marino-2);
}
.gestion :focus-visible { outline-color: var(--c-acento-marino); }
.gestion ::selection { background: var(--c-acento-marino); color: var(--c-marino); }

.gestion__rejilla {
  display: grid;
  gap: var(--e-6) var(--columna);
  grid-template-areas: "cabecera" "plano" "capas" "cierre";
}
.gestion__cabecera { grid-area: cabecera; display: grid; gap: var(--e-4); }

.gestion__plano {
  grid-area: plano;
  min-width: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  background: var(--c-marino-2);
  border: var(--trazo) solid var(--c-linea-marino);
  border-radius: var(--radio-2);
}

.gestion__capas { grid-area: capas; min-width: 0; margin: 0; padding: 0; border: 0; }

.gestion__cierre { grid-area: cierre; display: grid; gap: var(--e-5); justify-items: start; }
.gestion__estado span { display: block; }
.gestion__estado {
  color: var(--c-sobre-marino);
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-subtitulo);
  letter-spacing: -0.01em;
}
html:not(.js) .gestion__estado { display: none; }

/* Interruptores */
.capa { position: relative; padding-block: var(--e-2); border-top: var(--trazo) solid var(--c-linea-marino); }
.capa:last-child { border-bottom: var(--trazo) solid var(--c-linea-marino); }

.capa__control { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }

.capa__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 3rem;
  color: var(--c-sobre-marino);
  font-size: 1.125rem;
  font-weight: var(--peso-medio);
  line-height: 1.25;
  cursor: pointer;
}
.capa__control:focus-visible + .capa__etiqueta {
  outline: 2px solid var(--c-acento-marino);
  outline-offset: 3px;
  border-radius: var(--radio-1);
}

.capa__interruptor {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  border: var(--trazo) solid var(--c-trazo-marino);
  border-radius: var(--radio-pildora);
  transition: background-color var(--t-corto) var(--curva), border-color var(--t-corto) var(--curva);
}
.capa__interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--c-trazo-marino);
  transition: transform var(--t-corto) var(--curva), background-color var(--t-corto) var(--curva);
}
.capa__control:checked + .capa__etiqueta .capa__interruptor {
  background: var(--c-acento-marino);
  border-color: var(--c-acento-marino);
}
.capa__control:checked + .capa__etiqueta .capa__interruptor::after {
  background: var(--c-marino);
  transform: translateX(1rem);
}

.capa__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-5);
  padding: 0 0 var(--e-3) calc(2.5rem + var(--e-4));
  font-size: var(--fs-menor);
  line-height: 1.4;
  transition: opacity var(--t-corto) var(--curva);
}
.capa__leyenda li { display: inline-flex; align-items: center; gap: var(--e-2); }
.capa__control:not(:checked) ~ .capa__leyenda { opacity: 0.65; }
.capa__glifo { flex: none; width: 1.25rem; height: 1.25rem; }

/* Glifos de la leyenda: los mismos signos que usa el plano */
.gl { fill: none; stroke: var(--c-sobre-marino-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gl--grueso { stroke: var(--c-sobre-marino); stroke-width: 5; stroke-linecap: butt; }
.gl--banda { stroke-width: 4; stroke-linecap: butt; opacity: 0.5; }
.gl--fino { stroke-width: 1; }
.gl--acento { stroke: var(--c-acento-marino); stroke-width: 2; }
.gl--punto { fill: var(--c-acento-marino); stroke: none; }
.gl--haz { fill: var(--c-sobre-marino-2); fill-opacity: 0.3; stroke-width: 1; }
.gl--red { stroke-dasharray: 2 3; }

/* Plano */
.plano { width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plano__base { stroke: var(--c-trazo-marino); stroke-width: 1.5; }

/* --apagada vale 0 (capa encendida) o 1 (capa apagada); de ella cuelga todo lo demás. */
.plano__capa {
  --apagada: 0;
  opacity: calc(1 - var(--apagada));
  transition: opacity var(--t-largo) var(--curva);
}
.plano__capa--apagada { --apagada: 1; }

.plano__duela { stroke: var(--c-sobre-marino-2); stroke-width: 1; opacity: 0.24; }
.plano__pintura { stroke: var(--c-sobre-marino-2); stroke-width: 7; stroke-linecap: butt; stroke-linejoin: miter; opacity: 0.38; }
.plano__muro {
  stroke: var(--c-sobre-marino);
  stroke-width: calc(7px - 5.5px * var(--apagada));
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke-width var(--t-largo) var(--curva);
}
.plano__toma { fill: var(--c-marino-2); stroke: var(--c-acento-marino); stroke-width: 2.5; }
.plano__luz { stroke: var(--c-acento-marino); stroke-width: 1.5; }

.plano__haz { transform: scale(calc(1 - var(--apagada))); transition: transform var(--t-largo) var(--curva); }
.plano__cono { fill: var(--c-sobre-marino-2); fill-opacity: 0.16; stroke: var(--c-sobre-marino-2); stroke-opacity: 0.5; stroke-width: 1; }
.plano__equipo { fill: var(--c-acento-marino); }
.plano__lector { fill: var(--c-marino-2); stroke: var(--c-acento-marino); stroke-width: 2; }
.plano__onda { stroke: var(--c-sobre-marino-2); stroke-width: 1.5; }

.plano__red { stroke: var(--c-sobre-marino-2); stroke-width: 1.5; stroke-dasharray: 3 6; }
.plano__mueble { stroke: var(--c-sobre-marino); stroke-width: 1.5; }
.plano__ventana { fill: var(--c-marino-2); stroke: var(--c-sobre-marino); stroke-width: 1.5; }
.plano__pantalla { stroke: var(--c-sobre-marino); stroke-width: 4; }
.plano__nodo,
.plano__boton { fill: var(--c-acento-marino); }

/* Sin script, los interruptores siguen gobernando el plano. */
@supports selector(:has(*)) {
  .gestion:has(#capa-remodelacion:not(:checked)) [data-capa="remodelacion"],
  .gestion:has(#capa-seguridad:not(:checked)) [data-capa="seguridad"],
  .gestion:has(#capa-tecnologia:not(:checked)) [data-capa="tecnologia"] { --apagada: 1; }
}

@media (min-width: 60em) {
  .gestion__rejilla {
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "cabecera plano" "capas plano" "cierre plano";
    align-items: start;
  }
  .gestion__plano { position: sticky; top: calc(var(--alto-cabecera) + var(--e-5)); }
}

/* 8. PIE ------------------------------------------------------------------ */

.pie { padding-block: var(--e-8) var(--e-6); background: var(--c-marino); color: var(--c-sobre-marino-2); }
.pie :focus-visible { outline-color: var(--c-acento-marino); }
.pie__rejilla { display: grid; gap: var(--e-6) var(--columna); }

.pie__marca { display: flex; align-items: center; gap: var(--e-4); }
/* El logo no se recolorea: va sobre un disco blanco, que es su fondo natural. */
.pie__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--c-fondo);
}
.pie__logo img { width: 4rem; height: 4rem; }
.pie__nombre {
  max-width: 12ch;
  color: var(--c-sobre-marino);
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  line-height: var(--lh-subtitulo);
  letter-spacing: -0.01em;
}

.pie__lista { display: grid; justify-items: start; }
.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  border-radius: var(--radio-1);
  color: var(--c-sobre-marino-2);
  text-decoration: none;
  transition: color var(--t-corto) var(--curva);
}
.pie__enlace:hover { color: var(--c-sobre-marino); }

.pie__legal {
  max-width: none;
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: var(--trazo) solid var(--c-linea-marino);
  font-size: var(--fs-menor);
}

@media (min-width: 48em) {
  .pie__rejilla { grid-template-columns: 6fr 3fr 3fr; align-items: start; }
}

/* 9. MOVIMIENTO ----------------------------------------------------------- */
/* Un momento orquestado (la entrada del hero) y una animación continua (el barrido
   de las cámaras), que solo corre con su sección en pantalla. Lo demás responde a acciones. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .hero__linea,
  .hero__bajada,
  .hero__acciones { animation: entrar var(--t-largo) var(--curva) both; }
  .hero__linea:nth-child(2) { animation-delay: 0.08s; }
  .hero__bajada { animation-delay: 0.16s; }
  .hero__acciones { animation-delay: 0.24s; }

  .hero__foto { animation: descubrir var(--t-largo) var(--curva) 0.16s both; }

  .hero__orbitas > * {
    stroke-dasharray: 1;
    animation: trazar var(--t-largo) var(--curva) both;
  }
  .hero__orbitas > :nth-child(1) { animation-delay: 0.3s; }
  .hero__orbitas > :nth-child(2) { animation-delay: 0.38s; }
  .hero__orbitas > :nth-child(3) { animation-delay: 0.46s; }
  .hero__orbitas > :nth-child(4) { animation-delay: 0.54s; }
  .hero__orbitas > :nth-child(5) { animation-delay: 0.62s; }
  .hero__orbitas > :nth-child(6) { animation-delay: 0.7s; }

  .plano__cono { animation: barrer 9s var(--curva) infinite paused; }
  .plano__cono--b { animation-delay: -3s; }
  .gestion--en-pantalla .plano__cono { animation-play-state: running; }
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(0.5em); }
}
@keyframes descubrir {
  from { opacity: 0; clip-path: inset(0 0 100% 0 round var(--radio-2)); }
  to { opacity: 1; clip-path: inset(0 round var(--radio-2)); }
}
@keyframes trazar {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
/* La cámara gira, se asienta, espera y vuelve. */
@keyframes barrer {
  0%, 95%, 100% { transform: rotate(-13deg); }
  45%, 50% { transform: rotate(13deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}