/* ============================================================
   CONTROL DIGITAL PYMES · styles.css
   Mobile-first · sin dependencias · tokens de marca
   ============================================================ */

/* ---------- Fuentes self-hosted (colocar .woff2 en /assets/fonts/) ---------- */
@font-face {
  font-family: "Piazzolla";
  src: url("/assets/fonts/piazzolla-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Piazzolla";
  src: url("/assets/fonts/piazzolla-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cdp-rev: "goshu-2026-07";   /* interno: no se usa para pintar nada */
  --marfil:  #FAF7F0;
  --beige:   #EFE9DD;
  --grafito: #2E2E2E;
  --oliva:   #6B7355;
  --salvia:  #B7C0A8;
  --marron:  #7a3328;
  --blanco-suave: #f5f2ea;

  /* ---------- MADERAS Y ARENAS ----------
     El problema de fondo era que --grafito (#2E2E2E) es un neutro
     puro: R=G=B. Toda superficie oscura salía gris muerto. Estos
     tonos comparten base cálida con --madera (#5a3f29), el marrón
     del nav, y devuelven temperatura a la página.               */
  --crema:  #F5EEE2;   /* claro cálido: bandas principales        */
  --arena:  #E8DAC3;   /* arena: bandas intermedias               */
  --roble:  #A8794C;   /* madera media: filetes y acentos         */
  --madera: #5a3f29;   /* nogal del nav (ya existía)              */
  --nogal:  #3B2A1D;   /* madera oscura: secciones oscuras        */
  --tinta:  #241A13;   /* casi negro cálido: pie y máxima presión */

  --serif: "Piazzolla", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---------- PANEL DE MANDOS DEL FONDO ----------
     Cambio de criterio respecto a la versión anterior:

     Antes, TODAS las secciones dejaban pasar un 18% de la imagen.
     Un 18% repartido por toda la página no es textura: es un velo
     gris que apaga la paleta y deja cada banda del mismo valor.
     Ese era el origen del "todo plano y monocromático".

     Ahora la imagen se ve DE VERDAD en un sitio (el hero) y las
     demás secciones llevan color propio, limpio y cálido.       */

  /* Atenúa la imagen entera. Sube si sale más viva de lo previsto. */
  --fondo-atenuar: rgba(90, 63, 41, 0);

  /* Secciones: casi opacas, para que el color sea el que decides tú. */
  --velo-crema:   rgba(245, 238, 226, 0.965);
  --velo-arena:   rgba(232, 218, 195, 0.955);
  --velo-salvia:  rgba(214, 221, 202, 0.945);
  --velo-nogal:   rgba(59,  42,  29,  0.955);
  --velo-tinta:   rgba(36,  26,  19,  0.965);

  --ancho-max: 72rem;
  --radio: 4px;
  --transicion: 180ms ease;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--grafito);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--oliva); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--grafito); }
.mono { font-family: var(--mono); font-size: 0.95em; }

/* Anclas bajo el nav fijo */
section[id], footer[id] { scroll-margin-top: 5rem; }

/* Foco visible (WCAG) */
:focus-visible {
  outline: 3px solid var(--oliva);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--grafito); color: var(--marfil);
  padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 var(--radio) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { hyphens: none; -webkit-hyphens: none; font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 1rem; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1rem; }

.eyebrow {
  position: relative;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oliva);
  margin: 0 0 0.85rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.5em; height: 0.5em;
  margin-right: 0.6em;
  background: var(--marron);
  transform: rotate(45deg) translateY(-1px);
}
.eyebrow--claro { color: var(--salvia); }
.eyebrow--claro::before { background: var(--marron); }

.seccion__intro { font-size: 1.08rem; }

/* Prosa justificada (con partición de palabras para evitar ríos) */
.seccion__intro,
.registro__entrada p,
.bio__texto p,
.honestidad p,
.tarjeta p:not(.precio):not(.tarjeta__etiqueta),
.pagina-legal p,
.pagina-legal li,
.footer__privacidad {
  text-align: justify;
  text-justify: inter-word;
}

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--beige);
}
.nav__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--grafito); }
.nav__logo { width: 30px; height: 30px; color: var(--grafito); }
.nav__nombre { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
.nav__links { display: flex; align-items: center; gap: 1.1rem; }
.nav__links a { font-size: 0.92rem; text-decoration: none; color: var(--grafito); }
.nav__links a:hover { color: var(--oliva); }
/* enlaces visibles en todas las anchuras (layout móvil más abajo) */
.nav__cta {
  background: var(--grafito); color: var(--marfil) !important;
  padding: 0.5rem 1.1rem; border-radius: var(--radio);
}
.nav__cta:hover { background: var(--oliva); }

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: 1rem;
  padding: 0.85rem 1.5rem; border-radius: var(--radio);
  text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: background var(--transicion), color var(--transicion);
}
.btn--primario { background: var(--grafito); color: var(--marfil); }
.btn--primario:hover { background: var(--oliva); color: var(--marfil); }
.btn--secundario { background: transparent; color: var(--grafito); border-color: var(--grafito); }
.btn--secundario:hover { background: var(--grafito); color: var(--marfil); }
.btn--terciario {
  font-size: 0.92rem; padding: 0.55rem 0;
  background: none; color: var(--oliva);
  border: none; border-bottom: 1.5px solid var(--oliva); border-radius: 0;
}
.btn--terciario:hover { color: var(--grafito); border-color: var(--grafito); }

/* ---------- Hero ----------
   Móvil: una sola columna, texto arriba y logo debajo.
   Escritorio: dos columnas, texto a la izquierda, logo a la derecha.
   El ancho coincide con --ancho-max para alinearse con el resto de secciones. */
.hero { padding: 3.5rem 1.25rem 4rem; position: relative; }
.hero__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: block;
  gap: 2.5rem;
}
/* Subtítulo del hero: Piazzolla serif para sensación editorial,
   distinta del título (Special Elite) y de la tagline (Piazzolla itálica) */
.hero__sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--grafito);
  max-width: 34rem;
}

/* Tagline en forma de "sello": fondo tenue que se enciende al pasar el ratón */
.hero__tagline {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--grafito);
  background: rgba(183, 192, 168, 0.22);  /* salvia muy tenue */
  padding: 0.55rem 1.15rem;
  border-radius: 4px;
  margin: 1.4rem 0 2rem;
  cursor: default;
  transition:
    background-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}
.hero__tagline:hover {
  background: var(--marron);
  color: var(--marfil);
  box-shadow: 0 6px 20px rgba(122, 51, 40, 0.28);
  transform: translateY(-1px);
}
.hero__divisor {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.2rem 0; max-width: 16rem;
}
.hero__divisor::before, .hero__divisor::after {
  content: ""; flex: 1; height: 1.5px; background: var(--oliva);
}
.hero__divisor span {
  width: 0.55rem; height: 0.55rem;
  border: 1.5px solid var(--marron);
  transform: rotate(45deg); flex-shrink: 0;
}
.hero__puertas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__texto { max-width: 38rem; }
.hero__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  margin-top: 2rem;
}
.hero__visual img {
  position: relative;
  width: min(320px, 70vw); height: auto;
}
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.hero__chips span {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.32rem 0.8rem;
  border-radius: 999px; border: 1.5px solid;
}
.hero__chips span:nth-child(1) { color: var(--oliva);   border-color: var(--oliva); }
.hero__chips span:nth-child(2) { color: var(--marron);  border-color: var(--marron); }
.hero__chips span:nth-child(3) { color: var(--grafito); border-color: var(--grafito); }

/* ---------- Secciones ---------- */
.seccion { padding: 4rem 1.25rem; }
.seccion__inner { max-width: var(--ancho-max); margin: 0 auto; }
.seccion--beige  { background: var(--beige); }
.seccion--salvia { background: #e9ece1; } /* salvia rebajada para contraste AA del texto grafito */
.seccion--oscura { background: var(--grafito); color: var(--blanco-suave); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--marfil); }
.seccion--oscura a { color: var(--salvia); }

.divisor { border: none; border-top: 1px solid var(--beige); margin: 3rem 0; }
.divisor--claro { border-top-color: rgba(250,247,240,0.18); }
.subbloque-titulo { font-size: 1.35rem; }

/* ---------- Rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 1.25rem; margin-top: 2rem; }
.tarjeta {
  background: var(--blanco-suave);
  border: 1px solid var(--beige);
  border-top: 3px solid var(--oliva);
  border-radius: var(--radio);
  padding: 1.5rem;
  overflow: hidden;
}
.rejilla .tarjeta:nth-child(4n+2) { border-top-color: var(--marron); }
.rejilla .tarjeta:nth-child(4n+3) { border-top-color: var(--salvia); }
.rejilla .tarjeta:nth-child(4n+4) { border-top-color: var(--grafito); }
.tarjeta__glifo { display: block; margin-bottom: 0.7rem; }
.seccion--beige .tarjeta, .seccion--salvia .tarjeta { background: var(--marfil); }
.tarjeta h3, .tarjeta h4 { margin-bottom: 0.5rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__etiqueta {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oliva); margin-bottom: 0.6rem;
}
.tarjeta--caso { display: flex; flex-direction: column; }
.tarjeta--caso .btn { margin-top: auto; align-self: flex-start; }

.precio {
  font-family: var(--mono); font-size: 0.95rem;
  color: var(--grafito); margin-bottom: 0.75rem;
}
.precio small { color: var(--oliva); font-size: 0.85em; }

.tramos { list-style: none; padding: 0.75rem 0 0; margin: 0.5rem 0 0; border-top: 1px dashed var(--beige); }
.tramos li {
  display: flex; flex-direction: column; gap: 0.1rem;
  font-size: 0.9rem; padding: 0.4rem 0;
}
.tramos li span:last-child { font-family: var(--mono); color: var(--oliva); }

.descuento {
  margin-top: 2.25rem; text-align: center;
  font-family: var(--mono); font-size: 0.95rem;
}
.descuento__fecha { color: var(--oliva); }
.nota-tarifas { margin-top: 1.75rem; font-size: 0.95rem; color: var(--oliva); }
.microcta { margin-top: 1rem; }
.microcta a { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid var(--oliva); }
.enlace-github { margin-top: 1.5rem; }

/* ---------- Registro de auditoría (sección 3) ---------- */
.registro { margin-top: 2.25rem; display: grid; gap: 1.5rem 1.75rem; counter-reset: lqa; }
@media (min-width: 760px) { .registro { grid-template-columns: 1fr 1fr; } }
.registro__entrada {
  counter-increment: lqa;
  position: relative; overflow: hidden;
  padding: 1.6rem 1.5rem 2.7rem;
  border: 1px solid rgba(250,247,240,0.12);
  transition: background-color .4s ease;
}
.registro__entrada::after {
  content: counter(lqa, decimal-leading-zero);
  position: absolute; right: 1.1rem; bottom: 0.5rem;
  font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(250,247,240,0.22);
  pointer-events: none;
}
.registro__entrada h3 {
  color: var(--salvia); font-size: 1.12rem;
  position: relative; padding-bottom: 0.55rem; margin-bottom: 0.75rem;
}
.registro__entrada h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; height: 2px; background: var(--salvia);
  transition: width .4s ease, background-color .4s ease;
}
.registro__entrada:hover h3::after { width: 100%; background: var(--marron); }
.registro__entrada:hover { background-color: rgba(250,247,240,0.05); }
.registro__entrada p { margin-bottom: 0; color: var(--blanco-suave); }

/* ---------- Pilares (sección 6) ---------- */
.pilares { display: grid; gap: 2rem; margin-top: 2.25rem; }
.pilar__icono { width: 34px; height: 34px; color: var(--oliva); margin-bottom: 0.75rem; }
.pilar:nth-child(2) .pilar__icono { color: var(--marron); }
.pilar:nth-child(3) .pilar__icono { color: var(--grafito); }
.pilar h3 { font-size: 1.1rem; }
.pilar p { margin-bottom: 0; font-size: 0.98rem; }

/* ---------- Bio (sección 7) ---------- */
.bio { display: grid; gap: 2rem; margin-top: 1.5rem; }

/* Foto de bio: marco circular con doble anillo hairline
   (salvia interior, más fino, + oliva exterior, fino) separados
   de la foto por un fino paspartú marfil, y rombo rojo ladrillo
   sobre el anillo, en diálogo con el antiguo monograma. */
.bio__foto {
  position: relative;
  width: min(240px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.bio__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 50%;
  display: block;
  box-shadow:
    0 0 0 4px   var(--marfil),
    0 0 0 5px   var(--salvia),
    0 0 0 6.5px var(--marfil),
    0 0 0 8px   var(--oliva);
}
.bio__foto::after {
  content: "";
  position: absolute;
  top: 86.5%; left: 86.5%;
  width: 11px; height: 11px;
  background: var(--marron);
  border: 2px solid var(--beige);
  box-sizing: border-box;
  transform: translate(-50%, -50%) rotate(45deg);
}
.honestidad { }
.honestidad .subbloque-titulo { text-align: left; }
.honestidad::before {
  content: ""; display: block; margin: 0 0 2rem;
  width: 3.5rem; height: 2px; background: var(--marron);
}

/* ---------- Pasos (sección 8) ---------- */
.pasos {
  list-style: none; counter-reset: paso;
  margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1.25rem;
}
.paso { display: flex; align-items: baseline; gap: 0.9rem; font-size: 1.05rem; }
.paso__num {
  font-family: var(--mono); color: var(--oliva);
  border-bottom: 2px solid var(--salvia);
  padding: 0 0.4rem 0.15rem; flex-shrink: 0;
}

/* ---------- Formulario ---------- */
.formulario {
  margin-top: 2rem;
  display: grid; gap: 1.25rem;
  max-width: 44rem;
}
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo label { font-weight: 500; font-size: 0.95rem; }
.req { color: var(--marron); }
.opcional { color: var(--oliva); font-weight: 400; font-size: 0.85em; }
.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--grafito);
  background: var(--blanco-suave);
  border: 1.5px solid var(--beige);
  border-radius: var(--radio);
  padding: 0.7rem 0.85rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 3px solid var(--oliva); outline-offset: 1px; border-color: var(--oliva);
}
.campo--check { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.campo--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex-shrink: 0; }
.campo--check label { font-weight: 400; font-size: 0.92rem; }
.campo__aviso { font-size: 0.85rem; color: var(--oliva); margin: 0.35rem 0 0; }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--marron);
}

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.hp {
  position: absolute !important;
  left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form__estado { min-height: 1.4rem; font-weight: 500; margin: 0; }
.form__estado--ok { color: var(--oliva); }
.form__estado--error { color: var(--marron); }

.alternativas { margin-top: 2.5rem; }
.alternativas p { margin-bottom: 0.4rem; }
.cobertura { margin-top: 1.5rem; font-size: 0.95rem; color: var(--oliva); }

/* ---------- Footer ---------- */
.footer { background: var(--grafito); color: var(--blanco-suave); padding: 3.5rem 1.25rem 2.5rem; }
.footer a { color: var(--salvia); }
.footer a:hover { color: var(--marfil); }
.footer__logo { width: 40px; height: auto; border-radius: 6px; margin-bottom: 0.6rem; }
.footer__nombre { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0; color: var(--marfil); }
.footer__tagline { font-family: var(--serif); font-style: italic; color: var(--salvia); margin-top: 0.25rem; }
.footer__columnas { display: grid; gap: 1.75rem; }
.footer__columnas h4 {
  font-family: var(--mono); font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--salvia); margin-bottom: 0.6rem;
}
.footer__columnas ul { list-style: none; margin: 0; padding: 0; }
.footer__columnas li { margin-bottom: 0.4rem; font-size: 0.92rem; }
.footer__columnas a { text-decoration: none; }
.footer__legal { font-size: 0.88rem; }
.footer__privacidad {
  font-size: 0.84rem; color: var(--salvia);
  margin-top: 1.25rem;
}

/* ---------- Anti-cookie banner ---------- */
.acb {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150;
  background: var(--grafito); color: var(--blanco-suave);
  border: 1px solid var(--oliva); border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  max-width: 30rem;
  box-shadow: 0 6px 24px rgba(46,46,46,0.25);
}
.acb__titulo { font-family: var(--serif); font-weight: 600; color: var(--marfil); margin: 0 0 0.35rem; font-size: 1.05rem; }
.acb p { margin: 0 0 0.85rem; font-size: 0.92rem; }
.acb__acciones { display: flex; align-items: center; gap: 1.1rem; }
.acb__btn {
  font: inherit; font-weight: 500;
  background: var(--marfil); color: var(--grafito);
  border: none; border-radius: var(--radio);
  padding: 0.5rem 1.1rem; cursor: pointer;
}
.acb__btn:hover { background: var(--salvia); }
.acb a { color: var(--salvia); font-size: 0.88rem; }

/* ---------- Páginas legales y auxiliares ---------- */
.pagina-legal { padding: 3rem 1.25rem 4rem; }
.pagina-legal .seccion__inner { max-width: 46rem; }
.pagina-legal h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.pagina-legal h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.pagina-legal .fecha { font-family: var(--mono); font-size: 0.85rem; color: var(--oliva); }
.pagina-legal ul { padding-left: 1.25rem; }
.pagina-legal li { margin-bottom: 0.4rem; }
.volver { display: inline-block; margin-bottom: 2rem; font-size: 0.92rem; }

.pagina-centrada { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 4rem 1.25rem; }
.pagina-centrada .btn { margin-top: 1.5rem; }

/* ---------- Escritorio ---------- */
@media (min-width: 720px) {
  .nav__links a:not(.nav__cta) { display: inline; }

/* Hero: dos columnas en escritorio (1.4 texto / 0.6 logo) */
  .hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 5rem;          /* antes 3rem · separación lateral ~3 cm */
    align-items: start; /* antes center · arranca arriba */
  }
  .hero { padding-top: 5rem; padding-bottom: 5.5rem; }
  .hero__visual {
    margin-top: 2.1rem; /* baja el logo justo a la altura del H1, saltándose el eyebrow */
    min-height: auto;   /* antes 380px, ya no necesita altura mínima */
  }

  .rejilla--2x2 { grid-template-columns: 1fr 1fr; }
  .rejilla--3   { grid-template-columns: repeat(3, 1fr); }
  .rejilla--3x2 { grid-template-columns: repeat(3, 1fr); }
  .pilares { grid-template-columns: repeat(3, 1fr); }
  .bio { grid-template-columns: 280px 1fr; align-items: start; }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .formulario { grid-template-columns: 1fr 1fr; }
  .campo--ancho { grid-column: 1 / -1; }
  .formulario .btn { justify-self: start; }
  .form__estado { grid-column: 1 / -1; }
  .footer__columnas { grid-template-columns: repeat(3, 1fr); }
  .tramos li { flex-direction: row; justify-content: space-between; gap: 1rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ============================================================
   AMPLIACIONES (Special Elite, nav móvil + scroll-spy,
   parallax, tarjetas numeradas, descuento)
   ============================================================ */

/* --madera ya vive en :root, arriba */

/* ---------- Special Elite para H1 y subtítulos H2 ---------- */
@font-face {
  font-family: "Special Elite";
  src: url("/assets/fonts/specialelite.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
h1, h2 {
  font-family: "Special Elite", var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(1.85rem, 4.8vw, 2.95rem); line-height: 1.16; }
h2 { font-size: clamp(1.35rem, 3.4vw, 2rem);   line-height: 1.22; }
.seccion--oscura h2 { color: var(--marfil); }

/* ---------- Nav: transición de color y scroll-spy ---------- */
.nav { transition: background-color .35s ease, border-color .35s ease; }
.nav.nav--scrolled {
  background: var(--madera);
  border-bottom-color: rgba(0,0,0,0.25);
}
.nav--scrolled .nav__nombre,
.nav--scrolled .nav__links a:not(.nav__cta) { color: var(--marfil); }
.nav--scrolled .nav__links a:not(.nav__cta):hover { color: var(--salvia); }
.nav--scrolled .nav__logo { border-radius: 5px; }
.nav--scrolled .nav__links a.nav__cta { background: var(--marfil); color: var(--grafito) !important; }
.nav--scrolled .nav__links a.nav__cta:hover { background: var(--salvia); color: var(--grafito) !important; }

/* Enlace activo: subrayado animado elegante */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform 260ms ease;
}
.nav__links a.activo::after { transform: scaleX(1); }
.nav__links a.activo { color: var(--oliva); }
.nav--scrolled .nav__links a.activo { color: var(--salvia); }

/* ---------- Nav en móvil: marca arriba, enlaces debajo ---------- */
@media (max-width: 719px) {
  .nav__inner { flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.5rem; }
  .nav__links {
    width: 100%; order: 3; margin-top: 0.55rem;
    justify-content: center; flex-wrap: wrap; gap: 0.4rem 0.95rem;
  }
  .nav__links a:not(.nav__cta) { display: inline; font-size: 0.85rem; }
  .nav__cta { font-size: 0.85rem; padding: 0.45rem 1rem; }
  .nav__nombre { font-size: 0.95rem; }
}

/* ---------- Fondo fijo con PARALLAX (toda la web) + desenfoque ----------
   Capa fija al viewport detrás de todo; las secciones son translúcidas
   para que el fondo se vea a través de ellas al desplazarse.            */
html { background: #14171c; }
body { background: transparent; }

/* ============================================================
   FONDO CON PARALAJE
   Sin filtros. Los blur/brightness/saturate anteriores existían
   para domar una imagen que no encajaba con la paleta; una
   imagen en tonos tierra y bajo contraste no los necesita, y
   además un filter sobre una capa fija a pantalla completa es
   de lo más caro que hay en móvil.

   Un solo mando: --fondo-atenuar (más abajo, en :root).
   Si la imagen sale más viva de lo previsto, sube su alfa.
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Velo plano sobre la imagen: cuesta cero y sustituye al filter */
  background-image:
    linear-gradient(var(--fondo-atenuar), var(--fondo-atenuar)),
    url("/assets/img/fondo.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---- ¿WebP? Solo si subes TAMBIÉN /assets/img/fondo.webp ----
   Si activas este bloque y el .webp no existe, los navegadores
   modernos lo elegirán, darán 404 y el fondo DESAPARECE.
   Con subir solo fondo.jpg, deja esto comentado.

body::before {
  background-image:
    linear-gradient(var(--fondo-atenuar), var(--fondo-atenuar)),
    image-set(url("/assets/img/fondo.webp") type("image/webp"),
              url("/assets/img/fondo.jpg")  type("image/jpeg"));
}
------------------------------------------------------------ */

/* ---------- Tarjetas de servicio: número grande + subrayado expansible ---------- */
#negocio .rejilla, #centro-educativo .rejilla { counter-reset: servicio; }
.tarjeta--servicio {
  counter-increment: servicio;
  position: relative; overflow: hidden;
  padding-bottom: 2.9rem;
  transition: transform .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.tarjeta--servicio::after {
  content: counter(servicio, decimal-leading-zero);
  position: absolute; right: 1.1rem; bottom: 0.55rem;
  font-family: var(--mono); font-size: 2.7rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(46,46,46,0.16);
  pointer-events: none;
}
.seccion--salvia .tarjeta--servicio::after { -webkit-text-stroke-color: rgba(46,46,46,0.20); }
.tarjeta--servicio h3 { position: relative; padding-bottom: 0.55rem; }
.tarjeta--servicio h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; height: 2px; background: var(--oliva);
  transition: width .4s ease, background-color .4s ease;
}
.tarjeta--servicio:hover h3::after { width: 100%; background: var(--marron); }
.tarjeta--servicio:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(46,46,46,0.10);
  background-color: #fff;
}

/* ---------- Tarjetas de casos (#como-trabajo): número + subrayado ---------- */
#como-trabajo .rejilla--3 { counter-reset: caso; }
.tarjeta--caso {
  counter-increment: caso;
  position: relative; overflow: hidden; padding-bottom: 2.9rem;
  transition: transform .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.tarjeta--caso::after {
  content: counter(caso, decimal-leading-zero);
  position: absolute; right: 1.1rem; bottom: 0.55rem;
  font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(46,46,46,0.16);
  pointer-events: none;
}
.tarjeta--caso h4 { position: relative; padding-bottom: 0.5rem; }
.tarjeta--caso h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; height: 2px; background: var(--oliva);
  transition: width .4s ease, background-color .4s ease;
}
.tarjeta--caso:hover h4::after { width: 100%; background: var(--marron); }
.tarjeta--caso:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(46,46,46,0.10);
  background-color: #fff;
}

/* ---------- Descuento: cifras en naranja oscuro, mayores ---------- */
.descuento__dato {
  color: #b3541e; font-weight: 700; font-size: 1.3em;
}


/* ============================================================
   Ajustes de transparencia · paralaje
   ============================================================
   El hero deja ver MÁS paralaje que el resto (sensación de
   "bienvenida visual"). Las secciones de contenido mantienen
   alpha alto para legibilidad.
   ============================================================ */

/* Velos por sección. Todos los valores viven en :root (--velo-*),
   así se ajusta el conjunto desde un solo sitio.                  */
/* HERO · dirección de arte: el velo es un degradado, no un tono plano.
   Denso a la izquierda (donde vive el texto, legibilidad garantizada)
   y fino a la derecha (donde está el terminal): ahí es donde el fondo
   con paralaje se ve de verdad. Un solo sitio, pero bien.          */
.hero {
  background: linear-gradient(102deg,
    rgba(245, 238, 226, 0.975) 0%,
    rgba(245, 238, 226, 0.945) 40%,
    rgba(245, 238, 226, 0.66)  70%,
    rgba(245, 238, 226, 0.44)  100%);
}
@media (max-width: 900px) {
  /* Apilado: el degradado horizontal ya no vale, va vertical */
  .hero {
    background: linear-gradient(178deg,
      rgba(245, 238, 226, 0.965) 0%,
      rgba(245, 238, 226, 0.93)  55%,
      rgba(245, 238, 226, 0.72)  100%);
  }
}

.seccion           { background: var(--velo-crema); }
.seccion--beige    { background: var(--velo-arena); }
.seccion--salvia   { background: var(--velo-salvia); }
.seccion--oscura   { background: var(--velo-nogal); }
.footer            { background: var(--velo-tinta); }
.seccion--parallax { position: relative; overflow: hidden; }

/* ---------- Logos: header y footer (sutil, sin floritura) ---------- */
.nav__logo,
.footer__logo {
  opacity: 0.85;
}

/* ---------- PANEL DE NITIDEZ · Logo del hero ----------
   Ajusta a tu gusto las 3 perillas:
     (1) opacity        — qué tan visible es (0.30 fantasma → 0.95 sólido)
     (2) filter         — desaturación y contraste (suaviza el blanco/negro)
     (3) mix-blend-mode — cómo se funde con el fondo
                          luminosity  → "respira" color del fondo (recomendado)
                          multiply    → oscurece sobre claro
                          screen      → solo se ven las líneas blancas
                          normal      → sin mezcla (logo plano)
   El :hover devuelve algo de presencia cuando el cursor pasa por encima.
*/
.hero__visual img {
  opacity: 0.55;
  filter: grayscale(0.15) contrast(0.95);
  mix-blend-mode: luminosity;
  transition: opacity .4s ease, filter .4s ease;
}
.hero__visual img:hover {
  opacity: 0.85;
  filter: grayscale(0) contrast(1);
}

/* Tarjetas semitransparentes en las 4 secciones indicadas */
#problema        .tarjeta,
#negocio         .tarjeta,
#centro-educativo .tarjeta,
#como-trabajo    .tarjeta {
  background: rgba(245, 242, 234, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* #centro-educativo es seccion--salvia: mantenemos tono marfil con alpha */
#centro-educativo .tarjeta {
  background: rgba(250, 247, 240, 0.55);
}

/* Hover refuerza presencia sin volverse del todo opaco */
#negocio         .tarjeta--servicio:hover,
#centro-educativo .tarjeta--servicio:hover,
#como-trabajo    .tarjeta--caso:hover {
  background-color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   Páginas legales: fondo opaco (sin paralaje detrás del texto)
   ============================================================ */
body.sin-aviso { background: var(--marfil); }
body.sin-aviso::before { display: none; }
.pagina-legal { background: var(--marfil); color: var(--grafito); }
.pagina-legal a { color: var(--marron); }
.footer__nota-legal {
  margin-top: 0.55rem; font-size: 0.78rem;
  color: var(--salvia); opacity: 0.78; line-height: 1.5;
}
.alternativas__legal {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid rgba(46, 46, 46, 0.12);
  font-size: 0.92rem; color: var(--grafito); opacity: 0.85;
}
/* ---------- Otros servicios (línea bajo las cajas de negocio) ---------- */
.otros-servicios {
  margin-top: 3rem;
  text-align: center;
}
.otros-servicios__pregunta {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--marron);
  background: rgba(183, 192, 168, 0.22);
  padding: 0.35rem 1.1rem;
  border-radius: var(--radio);
  margin: 0 0 1rem;
}
.otros-servicios__lead {
  font-size: 1.02rem;
  margin: 0 0 1.1rem;
}

/* ---------- Píldoras de otros servicios: filete oliva + hover del tagline ---------- */
.pildoras {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.65rem;
  max-width: 62rem; margin: 0 auto;
}
.pildora {
  display: inline-block;
  border: 1px solid var(--oliva);          /* filete oliva */
  background: rgba(183, 192, 168, 0.16);   /* salvia tenue */
  color: var(--grafito);
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-size: 0.95rem; line-height: 1.45;
  text-decoration: none;
  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}
/* Hover: idéntico al de "Tu tranquilidad, nuestra evidencia." */
.pildora:hover {
  background: var(--marron);
  border-color: var(--marron);
  color: var(--marfil);
  box-shadow: 0 6px 20px rgba(122, 51, 40, 0.28);
  transform: translateY(-1px);
}
.pildora:focus-visible { outline: 3px solid var(--oliva); outline-offset: 2px; }
.pildora--cta {
  background: var(--marron); border-color: var(--marron);
  color: var(--marfil); font-weight: 500;
}
.pildora--cta:hover {
  background: var(--grafito); border-color: var(--grafito);
  box-shadow: 0 6px 20px rgba(46, 46, 46, 0.28);
}
.otros-servicios__regla {
  font-size: 0.95rem;
  color: var(--oliva);
  margin: 0;
}


/* ---------- Tarjetas dentro de sección oscura (#problema tras el intercambio):
   las tarjetas son paneles claros; su texto vuelve a grafito ---------- */
.seccion--oscura .tarjeta,
.seccion--oscura .tarjeta h3 { color: var(--grafito); }

/* ---------- Carrusel de casos (#lo-que-aparece) · nativo, sin librerías ---------- */
.carrusel { position: relative; margin-top: 2.25rem; }

.carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-top: 1px solid rgba(107, 115, 85, 0.45);
  border-bottom: 1px solid rgba(107, 115, 85, 0.45);
  scrollbar-width: none;
  counter-reset: caso-slide;
}
.carrusel__pista::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  counter-increment: caso-slide;
  min-height: clamp(250px, 26vw, 320px);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem clamp(4.2rem, 8vw, 5.5rem) 3.2rem;
  /* fondo transparente: el velo de la sección y el paralaje decoran, como en toda la página */
}
.slide::after {
  content: counter(caso-slide, decimal-leading-zero);
  position: absolute; right: 1.1rem; bottom: 0.55rem;
  font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(46, 46, 46, 0.18);
  pointer-events: none;
}

.slide__contenido { max-width: 42rem; }
.slide__contenido h3 {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin: 0 0 0.85rem; padding-bottom: 0.6rem;
  position: relative;
}
.slide__contenido h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.4rem; height: 2px; background: var(--oliva);
}
.slide__contenido p { margin: 0 0 0.9rem; }
.slide__cta { color: var(--marron); font-weight: 500; }
.slide__cta:hover { color: var(--grafito); }

.carrusel__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--oliva);
  background: rgba(250, 247, 240, 0.65);
  color: var(--grafito);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 180ms ease, border-color 180ms ease;
}
.carrusel__flecha:hover { background: var(--marfil); border-color: var(--marron); }
.carrusel__flecha:focus-visible { outline: 3px solid var(--oliva); outline-offset: 2px; }
.carrusel__flecha--prev { left: 0.6rem; }
.carrusel__flecha--next { right: 0.6rem; }

.carrusel__puntos {
  display: flex; justify-content: center; gap: 0.6rem; margin-top: 1rem;
}
.carrusel__punto {
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  border: 1px solid var(--oliva); background: transparent;
  cursor: pointer; padding: 0;
  transition: background 180ms ease, transform 180ms ease;
}
.carrusel__punto[aria-current="true"] { background: var(--oliva); transform: scale(1.15); }
.carrusel__punto:focus-visible { outline: 3px solid var(--oliva); outline-offset: 3px; }

@media (max-width: 640px) {
  .slide { padding: 1.8rem 1.25rem 3.4rem; min-height: 0; }
  .carrusel__flecha { display: none; } /* en móvil manda el gesto táctil */
}
/* ============================================================
   CONTROL DIGITAL PYMES · añadidos de julio 2026 (7 capas, terminal del hero, retoques).
   Solo tokens ya existentes: --marfil --beige --grafito --oliva
   --salvia --marron --blanco-suave --serif --sans --mono --radio.
   Nada de librerías, nada de recursos externos.

   Contiene:
     1 · Rótulos de "¿Necesitas algo que no ves aquí?"
     2 · Hover de las tarjetas de #problema
     3 · Hero: subtítulo marcado + chips con vida
     4 · Hero: terminal de exposición (sustituye al logo)
     5 · Nav con seis entradas
     6 · Visor "siete capas" + acordeón en móvil
   ============================================================ */


/* ============================================================
   1 · RÓTULOS DE "¿NECESITAS ALGO QUE NO VES AQUÍ?"
   La pregunta pasa a ser un cartel con reglas laterales;
   el lead pasa a rótulo mono, como los eyebrow de sección.
   ============================================================ */
.otros-servicios__pregunta {
  display: inline-block;
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--marron);
  background: rgba(183, 192, 168, 0.28);
  border-bottom: 2px solid var(--marron);
  padding: 0.45rem 1.4rem 0.5rem;
  border-radius: var(--radio) var(--radio) 0 0;
  margin: 0 0 1.4rem;
}
/* Reglas horizontales a los lados, como un titular impreso */
.otros-servicios__pregunta::before,
.otros-servicios__pregunta::after {
  content: "";
  position: absolute;
  top: 55%;
  width: 2.6rem;
  height: 1.5px;
  background: var(--oliva);
  opacity: 0.55;
}
.otros-servicios__pregunta::before { right: 100%; margin-right: 1rem; }
.otros-servicios__pregunta::after  { left: 100%;  margin-left: 1rem; }

.otros-servicios__lead {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Oliva un punto más oscuro que --oliva: el token de marca se queda
     en 4.23:1 sobre marfil y aquí el texto es pequeño. 4.84:1 = AA.  */
  color: #616A4C;
  margin: 0 0 1.15rem;
}
.otros-servicios__lead::before,
.otros-servicios__lead::after {
  content: "";
  display: inline-block;
  width: 0.45em; height: 0.45em;
  background: var(--marron);
  transform: rotate(45deg) translateY(-1px);
}
.otros-servicios__lead::before { margin-right: 0.7em; }
.otros-servicios__lead::after  { margin-left: 0.7em; }

.otros-servicios__regla {
  max-width: 60ch;
  margin: 0 auto;
  font-style: italic;
}

@media (max-width: 560px) {
  .otros-servicios__pregunta::before,
  .otros-servicios__pregunta::after { display: none; }
}


/* ============================================================
   2 · TARJETAS DE #problema: vuelven a levantarse al pasar
   Son .tarjeta a secas (no --servicio), por eso estaban quietas.
   ============================================================ */
#problema .tarjeta {
  position: relative;
  transition:
    transform .4s ease,
    box-shadow .4s ease,
    background-color .4s ease,
    border-top-color .4s ease;
}
#problema .tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  background-color: rgba(250, 247, 240, 0.72);
}
/* El filo superior se enciende en marrón, igual que los subrayados */
#problema .tarjeta:hover { border-top-color: var(--marron); }
/* El glifo gana presencia */
#problema .tarjeta .tarjeta__glifo { transition: transform .4s ease; }
#problema .tarjeta:hover .tarjeta__glifo { transform: translateY(-2px) scale(1.06); }


/* ============================================================
   3 · HERO: SUBTÍTULO Y CHIPS
   ============================================================ */
/* Subrayado del hero: filete salvia bajo la línea de base, con el trazo
   marrón encima. Nada de bloque de color: el anterior cubría hasta los
   descendentes y se leía como texto seleccionado.                        */
.hero__sub {
  font-size: clamp(1.18rem, 1.9vw, 1.34rem);
  line-height: 1.62;
  max-width: 40rem;
  hyphens: none;
  -webkit-hyphens: none;
}
.hero__sub .subrayado {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  color: var(--grafito);
  padding-bottom: 0.06em;
  background-image: linear-gradient(var(--salvia), var(--salvia));
  background-repeat: no-repeat;
  background-size: 100% 0.34em;          /* franja fina, no bloque */
  background-position: 0 calc(100% - 0.02em);
}
.hero__sub .subrayado::after {           /* filete marrón: remate editorial */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.06em;
  height: 2px;
  background: var(--marron);
  opacity: 0.85;
}
@media (max-width: 520px) {
  .hero__sub .subrayado { white-space: normal; }
}

/* Chips: de etiquetas planas a fichas con rombo y entrada escalonada */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
.hero__chips li {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero__chips li::before {
  content: "";
  width: 0.42em; height: 0.42em;
  margin-right: 0.6em;
  background: currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.hero__chips li:nth-child(1) { color: var(--oliva);   border-color: var(--oliva);   background: rgba(107, 115, 85, 0.10); }
.hero__chips li:nth-child(2) { color: var(--marron);  border-color: var(--marron);  background: rgba(122, 51, 40, 0.10); }
.hero__chips li:nth-child(3) { color: var(--grafito); border-color: var(--grafito); background: rgba(46, 46, 46, 0.07); }
.hero__chips li:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(46, 46, 46, 0.12); }

/* Entrada escalonada al cargar */
@media (prefers-reduced-motion: no-preference) {
  .hero__chips li {
    opacity: 0;
    animation: chipEntra .5s ease forwards;
  }
  .hero__chips li:nth-child(1) { animation-delay: .15s; }
  .hero__chips li:nth-child(2) { animation-delay: .30s; }
  .hero__chips li:nth-child(3) { animation-delay: .45s; }
}
@keyframes chipEntra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   4 · HERO: TERMINAL DE EXPOSICIÓN
   Sustituye al logo. Sin JS se ve completo (mejora progresiva);
   con JS las líneas aparecen escalonadas.
   ============================================================ */
.hero__visual { min-height: 0; }

.terminal {
  width: min(430px, 100%);
  background: #0d0f0c;                    /* negro fósforo */
  border: 1px solid rgba(183, 192, 168, 0.22);
  border-radius: 7px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.5),
              inset 0 0 60px rgba(183, 192, 168, 0.035);
  overflow: hidden;
  font-family: var(--mono);
  position: relative;
}
/* Líneas de barrido: el guiño CRT que hace terminal a una caja negra */
.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.16) 2px 3px
  );
  opacity: 0.5;
}

.terminal__barra {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.8rem;
  background: #16180f;
  border-bottom: 1px solid rgba(183, 192, 168, 0.18);
}
/* Semáforo de ventana, en la paleta de marca */
.terminal__luces { display: flex; gap: 0.32rem; flex: 0 0 auto; }
.terminal__luces i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
}
.terminal__luces i:nth-child(1) { background: #a8503f; }
.terminal__luces i:nth-child(2) { background: #b39a55; }
.terminal__luces i:nth-child(3) { background: #7d8f63; }

.hero__visual .terminal__marca,
.terminal__barra .terminal__marca {
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 3px; flex: 0 0 auto; opacity: 0.85;
}
.hero__visual .terminal__marca:hover { transform: none; }

.terminal__titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: rgba(183, 192, 168, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terminal__estado {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--salvia);
}
.terminal__estado::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.terminal__estado[data-estado="activo"]    { color: #9fb37e; }
.terminal__estado[data-estado="detenido"],
.terminal__estado[data-estado="bloqueado"] { color: #e2a08f; }
.terminal__estado[data-estado="alerta"]    { color: #d9be6e; }
@media (prefers-reduced-motion: no-preference) {
  .terminal__estado[data-estado="activo"]::before { animation: latido 1.6s ease-in-out infinite; }
}
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: 0.22; } }

.terminal__cuerpo {
  position: relative;
  z-index: 1;
  padding: 0.9rem 0.95rem 1.05rem;
  font-size: 0.7rem;
  line-height: 1.62;
  min-height: 300px;
  /* Nada de guiones ni cortes: el cuerpo del sitio lleva hyphens:auto y
     partía "ori-gen", "exis-ten". En una terminal eso no ocurre nunca.  */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* --- Líneas --- */
.tl {
  margin: 0 0 0.1rem;
  color: #cfcdc2;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

/* Prompt usuario@host:~$ */
.pr { white-space: nowrap; }
.pr__u { color: #9fb37e; font-weight: 500; }   /* usuario, verde fósforo */
.pr__a { color: rgba(207, 205, 194, 0.45); }
.pr__h { color: #d9be6e; font-weight: 500; }   /* host, ámbar */
.pr__p { color: rgba(207, 205, 194, 0.45); }
.pr__s { color: #cfcdc2; margin-right: 0.45em; }
.tl--linea { color: #f2f0e8; margin-bottom: 0.35rem; }

.tl--info { color: rgba(207, 205, 194, 0.5); margin-bottom: 0.45rem; }

.tl--paso { color: #f2f0e8; margin-top: 0.5rem; }
.tl--paso::before {
  content: "\203A ";                          /* › — clásico y estrecho */
  color: #9fb37e;
  font-weight: 700;
}

.tl--prog { color: rgba(207, 205, 194, 0.72); padding-left: 0.9em; margin-top: 0.25rem; }
.tl--prog::after { content: "\2026"; }

/* Barra ASCII: ancho fijo en monoespaciada, imposible que se recorte */
.tl--barra {
  padding-left: 0.9em;
  white-space: nowrap;
  letter-spacing: -0.02em;
  color: #d9be6e;
  margin-bottom: 0.3rem;
}
.barra__txt { color: inherit; }
.barra__pct {
  margin-left: 0.6em;
  font-size: 0.92em;
  letter-spacing: 0.08em;
  color: rgba(207, 205, 194, 0.6);
}
.tl--barra.is-fail   { color: #e2a08f; }
.tl--barra.is-alerta { color: #d9be6e; }
.tl--barra.is-ok     { color: #9fb37e; }
.tl--barra.is-fail   .barra__pct { color: #e2a08f; }
.tl--barra.is-alerta .barra__pct { color: #d9be6e; }
.tl--barra.is-ok     .barra__pct { color: #9fb37e; }

.tl--fail   { color: #e2a08f; padding-left: 0.9em; font-weight: 500; }
.tl--fail::before   { content: "\2717 "; }
.tl--ok     { color: #9fb37e; padding-left: 0.9em; }
.tl--ok::before     { content: "\2713 "; }
.tl--alerta { color: #d9be6e; padding-left: 0.9em; font-weight: 500; }
.tl--alerta::before { content: "\26A0 "; }

.tl--dato { color: #e8e5db; padding-left: 0.9em; }
.tl--dato::before { content: "\2022 "; color: var(--marron); }

.tl--cierre {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(183, 192, 168, 0.18);
  color: #9fb37e;
  font-size: 0.94em;
}
.tl--cierre::before { content: "\25A0 "; color: var(--marron); }

/* Cursor de bloque parpadeante */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.14em;
  background: #9fb37e;
  margin-left: 0.08em;
}
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: parpadeo 1.05s step-end infinite; }
}
@keyframes parpadeo { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Con JS: las líneas entran escalonadas */
.terminal--anim .tl { opacity: 0; }
.terminal--anim .tl.tl--visible { opacity: 1; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .terminal--anim .tl { opacity: 1; }
  .terminal::after { display: none; }
}

@media (max-width: 430px) {
  .terminal__cuerpo { font-size: 0.645rem; min-height: 288px; }
  .terminal__titulo { display: none; }
}


/* ============================================================
   5 · NAV CON SEIS ENTRADAS
   Con "7 capas" el nav queda más apretado: se afina el espaciado
   en tramos intermedios y en móvil, sin tocar el escritorio ancho.
   ============================================================ */
@media (max-width: 1080px) and (min-width: 641px) {
  .nav__links { gap: 0.85rem; }
  .nav__links a:not(.nav__cta) { font-size: 0.86rem; }
}
@media (max-width: 640px) {
  .nav__links { gap: 0.55rem 0.8rem; }
  .nav__links a:not(.nav__cta) { font-size: 0.82rem; }
  .nav__cta { font-size: 0.82rem; padding: 0.4rem 0.9rem; }
}


/* ============================================================
   6 · VISOR "SIETE CAPAS"
   Escritorio: lupa que sustituye al cursor sobre la columna de
   capas y revela la pregunta oculta; panel lateral con detalle.
   Móvil: sin lupa, acordeón (el detalle se abre bajo la capa).
   ============================================================ */
.capas-visor {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 2.25rem;
  background: rgba(28, 29, 25, 0.94);
  border: 1px solid rgba(250, 247, 240, 0.12);
  border-radius: var(--radio);
  box-shadow: 0 16px 40px rgba(46, 46, 46, 0.22);
  overflow: hidden;
}

/* --- Columna de capas --- */
.capas-lista { display: flex; flex-direction: column; }
.capa-item { border-top: 1px solid rgba(250, 247, 240, 0.13); }
.capa-item:first-child { border-top: none; }

.capa {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  min-height: 62px;
  padding: 0.85rem 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--marfil);
  font-family: var(--sans);
  cursor: pointer;
  transition: background-color .2s ease;
}
.capa__num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.5);
  transition: color .2s ease;
}
.capa__nombre { font-size: 1rem; line-height: 1.3; }

.capa[aria-expanded="true"] {
  background: rgba(183, 192, 168, 0.16);
  box-shadow: inset 3px 0 0 var(--salvia);
}
.capa[aria-expanded="true"] .capa__num { color: var(--salvia); }
.capa:focus-visible { outline: 3px solid var(--salvia); outline-offset: -3px; }

/* --- La lupa --- */
.capas-lupa {
  position: absolute;
  top: 0; left: 0;
  width: 164px; height: 164px;
  border-radius: 50%;
  border: 2.5px solid var(--marfil);
  background: radial-gradient(circle at 32% 28%,
              rgba(250, 247, 240, 0.17),
              rgba(250, 247, 240, 0.05) 55%,
              rgba(250, 247, 240, 0.01) 72%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45),
              inset 0 0 30px rgba(250, 247, 240, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  will-change: transform;
  transition: opacity .16s ease;
}
.capas-lupa::after {
  content: "";
  position: absolute;
  width: 50px; height: 8px;
  border-radius: 5px;
  background: var(--marfil);
  right: -32px; bottom: 6px;
  transform: rotate(45deg);
  transform-origin: left center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.capas-lupa__texto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--marfil);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.capas-visor.lupa-activa .capas-lupa { opacity: 1; }

/* --- Panel de detalle --- */
.capas-panel { padding: 1.6rem 1.5rem; display: grid; align-content: center; }
.capas-pista {
  font-family: var(--serif);
  font-style: italic;
  color: rgba(250, 247, 240, 0.6);
  font-size: 1rem;
  max-width: 42ch;
  margin: 0;
  text-align: left;
}
.capa-detalle h3 { color: var(--marfil); font-size: 1.25rem; margin: 0 0 0.9rem; }
.capa-detalle__rotulo {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.capa-detalle__rotulo--hallazgo { color: #d5a294; }
.capa-detalle__rotulo--accion   { color: var(--salvia); }
.capa-detalle p:not(.capa-detalle__rotulo) {
  color: var(--blanco-suave);
  font-size: 0.94rem;
  max-width: 54ch;
  margin: 0 0 1rem;
  text-align: left;
}
.capa-detalle p:last-child { margin-bottom: 0; }

/* --- Acordeón: cuando el detalle vive dentro de .capa-item (móvil) --- */
.capa-item .capa-detalle {
  padding: 0.2rem 1.3rem 1.4rem;
  border-left: 3px solid var(--salvia);
  background: rgba(183, 192, 168, 0.07);
}
.capa-item .capa-detalle h3 { display: none; } /* el botón ya dice qué capa es */

/* Signo +/− solo cuando la capa funciona como acordeón */
.capas-visor--acordeon .capa { position: relative; padding-right: 2.6rem; }
.capas-visor--acordeon .capa::after {
  content: "+";
  position: absolute;
  right: 1.15rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--salvia);
}
.capas-visor--acordeon .capa[aria-expanded="true"]::after { content: "–"; }

/* --- Dos columnas en pantallas anchas --- */
@media (min-width: 760px) {
  .capas-visor { grid-template-columns: minmax(236px, 33%) 1fr; }
  .capas-lista { border-right: 1px solid rgba(250, 247, 240, 0.13); }
  .capa { min-height: 70px; }
  .capas-panel { padding: 2rem 2.2rem; min-height: 430px; }
}

/* --- La lupa solo con puntero fino --- */
@media (hover: hover) and (pointer: fine) and (min-width: 760px) {
  .capas-lista { cursor: none; }
}
@media (max-width: 759px), (hover: none) {
  .capas-lupa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .capa, .capa__num, .capas-lupa,
  #problema .tarjeta, .hero__chips li { transition: none; }
}


/* ============================================================
   REARMONIZACIÓN CÁLIDA · detalles de acabado
   Cuatro cosas, por orden de impacto visual:
     1 · Ritmo tonal (que el ojo tenga por dónde bajar)
     2 · Profundidad en las bandas oscuras (no bloques planos)
     3 · Costuras de roble entre secciones
     4 · Micro-ajustes de temperatura
   ============================================================ */

/* ---- 1 · RITMO ----------------------------------------------
   El centro de la página eran tres bandas claras seguidas, todas
   del mismo valor. En una página larga eso hace que el ojo se
   desenganche. Se alterna claro / arena / oscuro para crear
   capítulos legibles de un vistazo.                            */
#siete-capas { background: var(--velo-arena); }
#como-trabajo {
  background: var(--velo-nogal);
  color: var(--blanco-suave);
}
#como-trabajo h2,
#como-trabajo h3           { color: var(--marfil); }
#como-trabajo a            { color: var(--salvia); }
#como-trabajo .eyebrow     { color: var(--salvia); }
#como-trabajo .eyebrow::before { background: var(--roble); }
#como-trabajo .divisor     { border-top-color: rgba(245, 238, 226, 0.16); }
#como-trabajo svg          { color: var(--salvia); }

/* ---- 2 · PROFUNDIDAD EN LAS BANDAS OSCURAS ------------------
   Un rectángulo de color plano se lee como bloque digital. Un
   degradado vertical de dos puntos y un grano casi invisible lo
   convierten en superficie. Es el detalle que separa "fondo de
   color" de "material".                                        */
.seccion--oscura,
#como-trabajo,
.footer {
  position: relative;
  isolation: isolate;
}
.seccion--oscura::before,
#como-trabajo::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Luz que entra por arriba y se apaga abajo: da volumen */
  background:
    linear-gradient(180deg,
      rgba(168, 121, 76, 0.10) 0%,
      rgba(168, 121, 76, 0.03) 42%,
      rgba(0, 0, 0, 0.16) 100%),
    /* Grano finísimo: rompe la planitud sin pesar nada */
    repeating-linear-gradient(27deg,
      rgba(245, 238, 226, 0.016) 0px,
      rgba(245, 238, 226, 0.016) 1px,
      rgba(0, 0, 0, 0.016) 1px,
      rgba(0, 0, 0, 0.016) 2px);
}

/* Las tarjetas sobre madera ganan un filo de luz superior */
.seccion--oscura .tarjeta,
#como-trabajo .tarjeta {
  background: rgba(245, 238, 226, 0.055);
  border-top: 1px solid rgba(168, 121, 76, 0.32);
  box-shadow: inset 0 1px 0 rgba(245, 238, 226, 0.07);
}
.seccion--oscura .tarjeta:hover,
#como-trabajo .tarjeta:hover {
  background: rgba(245, 238, 226, 0.085);
  border-top-color: var(--roble);
}

/* ---- 3 · COSTURAS DE ROBLE ----------------------------------
   Filete de 2px entre bandas. Marca la junta como en un mueble:
   el ojo percibe intención, no un corte automático.            */
.seccion + .seccion,
.footer { border-top: 2px solid rgba(168, 121, 76, 0.26); }
.seccion--oscura + .seccion,
.seccion + .seccion--oscura { border-top-color: rgba(168, 121, 76, 0.42); }

/* ---- 4 · TEMPERATURA ----------------------------------------
   Ajustes de un par de puntos que, sumados, quitan el frío.    */

/* El rombo de los eyebrow pasa de burdeos a roble sobre claro:
   mismo gesto, temperatura más alta.                           */
.eyebrow::before { background: var(--roble); }

/* Filetes y divisores: del gris neutro al roble rebajado */
.divisor { border-top-color: rgba(168, 121, 76, 0.30); }

/* Sombras cálidas: una sombra gris sobre una paleta de madera
   ensucia. Se tiñen con la base marrón.                        */
.tarjeta--servicio:hover,
#problema .tarjeta:hover {
  box-shadow: 0 14px 34px rgba(59, 42, 29, 0.24);
}

/* Tarjetas claras: fondo crema en vez de blanco puro, y filo
   superior de roble que se enciende al pasar.                  */
.seccion--beige .tarjeta,
.seccion--salvia .tarjeta,
#siete-capas .tarjeta {
  background: var(--marfil);
  border-top: 2px solid rgba(168, 121, 76, 0.22);
  transition: border-top-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.seccion--beige .tarjeta:hover,
.seccion--salvia .tarjeta:hover,
#siete-capas .tarjeta:hover { border-top-color: var(--roble); }

/* El visor de capas, ahora sobre arena, se asienta en nogal */
.capas-visor {
  background: rgba(43, 31, 22, 0.96);
  border-color: rgba(168, 121, 76, 0.30);
  box-shadow: 0 18px 44px rgba(59, 42, 29, 0.30);
}

/* Botón principal: de grafito neutro a nogal */
.boton--principal { background: var(--nogal); }
.boton--principal:hover { background: var(--madera); }


/* ============================================================
   CORRECCIÓN DE LEGIBILIDAD TRAS EL CAMBIO DE PALETA
   --oliva (#6B7355) es un tono pensado para superficies, no para
   texto: sobre marfil daba 4.02:1, y sobre las bandas de arena y
   salvia bajaba a 3.34 y 3.21. Al calentar y oscurecer los fondos
   el problema se hizo visible en más sitios.

   Se separa el uso: --oliva sigue mandando en filetes, bordes y
   superficies; --oliva-texto gobierna el texto pequeño.
   Medido: 6.49 sobre crema · 5.39 sobre arena · 5.19 sobre salvia.
   ============================================================ */
:root { --oliva-texto: #4C533A; }

.eyebrow,
.nota-tarifas,
.campo__aviso,
.otros-servicios__lead,
.seccion .tarjeta__etiqueta { color: var(--oliva-texto); }

/* Enlaces de texto sobre bandas claras */
.seccion:not(.seccion--oscura) a:not(.boton):not(.pildora):not(.nav__cta):not(.carrusel__flecha) {
  color: var(--oliva-texto);
}
.seccion:not(.seccion--oscura) a:not(.boton):not(.pildora):hover { color: var(--marron); }

/* Chip "Auditoría" del hero: mismo motivo */
.hero__chips li:nth-child(1) {
  color: var(--oliva-texto);
  border-color: var(--oliva-texto);
}

/* Sobre madera oscura manda la salvia (7.24:1 sobre nogal) */
.seccion--oscura .tarjeta__etiqueta,
#como-trabajo .tarjeta__etiqueta,
#como-trabajo .nota-tarifas,
#como-trabajo .campo__aviso { color: var(--salvia); }
#como-trabajo a:not(.boton):not(.pildora) { color: var(--salvia); }
#como-trabajo a:not(.boton):not(.pildora):hover { color: var(--arena); }

/* Sobre madera oscura, el eyebrow y las notas van en salvia:
   --oliva-texto es deliberadamente oscuro y ahí sería ilegible. */
.seccion--oscura .eyebrow,
.seccion--oscura .nota-tarifas,
.seccion--oscura .cobertura { color: var(--salvia); }
.seccion--oscura .eyebrow::before { background: var(--roble); }

/* Últimos textos en oliva sobre bandas claras */
.cobertura,
.otros-servicios__regla { color: var(--oliva-texto); }


/* ============================================================
   PASTELERÍA · nata, vainilla y chocolate
   El problema no era el tono, era que cada banda tenía UN solo
   color plano. Aquí cada sección pasa a llevar dos tonos en
   degradado y un halo de luz, como el del hero. Eso es lo que
   da fondo a la página sin ensuciarla.
   ============================================================ */
:root {
  --nata:      #FCF8F1;   /* blanco cremoso, no blanco frío   */
  --vainilla:  #F4E7C9;   /* crema amarilla                   */
  --caramelo:  #E5CFA6;   /* caramelo suave                   */
  --chocolate: #4B3527;   /* chocolate con leche              */
  --cacao:     #2C1E15;   /* chocolate negro                  */
}

/* ---- Bandas claras: nata que cae hacia vainilla -------------
   El halo radial superior imita luz de estudio entrando por la
   izquierda. Es lo que impide que se lea como rectángulo.     */
.seccion {
  background:
    radial-gradient(125% 85% at 12% 0%,
      rgba(252, 248, 241, 0.72) 0%,
      rgba(252, 248, 241, 0) 62%),
    linear-gradient(163deg,
      rgba(252, 248, 241, 0.975) 0%,
      rgba(248, 238, 216, 0.955) 55%,
      rgba(244, 231, 201, 0.945) 100%);
}

/* ---- Bandas de vainilla: ángulo distinto, para que no rimen -- */
.seccion--beige,
#siete-capas {
  background:
    radial-gradient(120% 80% at 88% 0%,
      rgba(252, 248, 241, 0.55) 0%,
      rgba(252, 248, 241, 0) 58%),
    linear-gradient(197deg,
      rgba(244, 231, 201, 0.965) 0%,
      rgba(236, 219, 182, 0.95) 60%,
      rgba(229, 207, 166, 0.94) 100%);
}

/* ---- Banda de salvia: se le da un fondo de vainilla para que
        el verde deje de leerse como gris ------------------- */
.seccion--salvia {
  background:
    radial-gradient(115% 80% at 20% 0%,
      rgba(250, 246, 236, 0.5) 0%,
      rgba(250, 246, 236, 0) 60%),
    linear-gradient(168deg,
      rgba(222, 229, 209, 0.955) 0%,
      rgba(214, 221, 200, 0.945) 48%,
      rgba(228, 222, 192, 0.94) 100%);
}

/* ---- Bandas oscuras: chocolate con leche que baja a cacao --- */
.seccion--oscura,
#como-trabajo {
  background:
    radial-gradient(115% 80% at 82% 0%,
      rgba(168, 121, 76, 0.20) 0%,
      rgba(168, 121, 76, 0) 60%),
    linear-gradient(166deg,
      rgba(75, 53, 39, 0.955) 0%,
      rgba(56, 39, 28, 0.96) 55%,
      rgba(44, 30, 21, 0.965) 100%);
}

/* ---- Pie: cacao con un rescoldo de roble en el arranque ----- */
.footer {
  background:
    radial-gradient(100% 90% at 50% 0%,
      rgba(168, 121, 76, 0.16) 0%,
      rgba(168, 121, 76, 0) 62%),
    linear-gradient(180deg,
      rgba(58, 41, 30, 0.965) 0%,
      rgba(38, 26, 19, 0.97) 100%);
}

/* El degradado de profundidad de las bandas oscuras ya lo aporta
   el gradiente: se rebaja el ::before para no doblar el efecto. */
.seccion--oscura::before,
#como-trabajo::before,
.footer::before {
  background:
    repeating-linear-gradient(27deg,
      rgba(252, 248, 241, 0.014) 0px,
      rgba(252, 248, 241, 0.014) 1px,
      rgba(0, 0, 0, 0.014) 1px,
      rgba(0, 0, 0, 0.014) 2px);
}

/* ---- Tarjetas: nata cálida, no blanco de oficina ------------ */
.seccion .tarjeta,
.seccion--beige .tarjeta,
.seccion--salvia .tarjeta,
#siete-capas .tarjeta {
  background: linear-gradient(168deg, var(--nata) 0%, #F8F1E4 100%);
}
.seccion--oscura .tarjeta,
#como-trabajo .tarjeta {
  background: linear-gradient(168deg,
    rgba(252, 248, 241, 0.075) 0%,
    rgba(252, 248, 241, 0.035) 100%);
}

/* ---- Hero: mismos ingredientes que el resto ----------------- */
.hero {
  background: linear-gradient(102deg,
    rgba(252, 248, 241, 0.975) 0%,
    rgba(250, 243, 229, 0.945) 40%,
    rgba(246, 234, 208, 0.66)  70%,
    rgba(244, 231, 201, 0.42)  100%);
}
@media (max-width: 900px) {
  .hero {
    background: linear-gradient(178deg,
      rgba(252, 248, 241, 0.965) 0%,
      rgba(249, 241, 225, 0.93)  55%,
      rgba(244, 231, 201, 0.72)  100%);
  }
}

/* ---- Acentos: el caramelo entra en las costuras ------------- */
.seccion + .seccion,
.footer { border-top: 2px solid rgba(168, 121, 76, 0.30); }
.divisor { border-top-color: rgba(168, 121, 76, 0.34); }

/* Botón principal: chocolate, y al pasar se aclara a madera */
.boton--principal { background: var(--chocolate); }
.boton--principal:hover { background: var(--madera); }


/* Reservado. Sin uso en esta versión. */
.cdp-goshu-7f3a { speak: never; }