/* ============================================================================
   Hybrid System — styles.css
   Archetipo base: Editorial Dark Warm (02), adaptado a paleta navy + dorado.
   Un único fichero, seccionado. Mobile-first. Ver 01-stack-and-conventions.md.
   ============================================================================ */

/* =============================================================
   1. Tokens
   ============================================================= */
@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x { syntax: "<percentage>"; inherits: false; initial-value: 30%; }
@property --mesh-y { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
@property --angle  { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* Palette — navy + dorado (confianza + sostenibilidad) */
  --bg:        var(--marca-azul-mas-osc);
  --bg-2:      var(--marca-azul-osc);
  --bg-3:      var(--marca-azul);          /* cards */
  --bg-4:      var(--marca-azul-elevado);  /* cards hover / elevado */
  /* Textos claros con tinte verde: el gris azulado de antes se veia
     sucio sobre los verdes. Nunca #fff puro. */
  --cream:     #f2f5f8;
  --cream-2:   #cfdae2;
  --cream-3:   #93a5b2;   /* metadata / mute */
  --accent:    var(--marca-acento);
  --accent-2:  var(--marca-acento-claro);
  --accent-ink:#2B1F04;   /* texto sobre fondo del acento */
  --sol-ink:   #3a2a05;   /* texto sobre el dorado de SOL */

  /* Contenido que va ENCIMA del color de acento. Con el dorado el acento es
     claro y encima va texto oscuro; con un acento oscuro (el verde del logo)
     hay que invertirlo, y por eso son tokens y no colores fijos. */
  --sobre-acento:    var(--marca-azul-mas-osc);   /* 5,7:1 sobre el dorado */
  --sobre-acento-2:  #143E4F;                     /* 4,6:1. Aqui estaba --marca-azul,
                                                     que sobre el dorado se quedaba
                                                     en 3,2:1. */
  --sobre-acento-3:  var(--marca-azul-profundo);  /* 6,5:1 */

  /* --- Colores de la marca -------------------------------------------
     Todo el sitio tira de estos cinco. Cambiarlos aquí (o en el bloque
     de paleta alternativa del final) repinta la web entera. --- */
  /* Los nombres siguen diciendo "azul" porque los usan cientos de reglas
     en toda la hoja; renombrarlos seria tocarlo todo sin ganar nada.
     Ahora ademas vuelven a ser ciertos: la paleta es AZUL PETROLEO +
     DORADO, sacada del logotipo. Antes fue verde + menta, y antes navy +
     dorado; el recorrido esta en archivo/logo-navy/LEEME.md. */
  --marca-azul:          #1D5670;   /* azul del logotipo */
  --marca-azul-osc:      #164356;
  --marca-azul-mas-osc:  #0F2E3C;   /* fondo de pagina */
  --marca-azul-profundo: #0B242F;   /* círculos de los esquemas */
  --marca-azul-claro:    #26688A;   /* hover */
  --marca-azul-elevado:  #2A6E91;
  --marca-crema:         #eef2f5;   /* fondo claro de las secciones: un
                                        claro apenas azulado, para que
                                        acompane al azul del logotipo. */
  --marca-acento:        #D89A22;   /* el dorado de "system" en el logotipo */
  --marca-acento-claro:  #EFB44A;
  /* El dorado de la marca sirve de FONDO en cualquier sitio, pero como
     TEXTO solo se lee sobre los azules mas oscuros: sobre el azul de
     TARJETA (--bg-3, #1D5670) se queda en 3,27:1. Este es el mismo
     dorado aclarado hasta pasar de 4,5:1 ahi (4,96:1), y es el que usan
     los textos dorados DENTRO de las tarjetas y de la banda de Contacto.
     No se invierte en las zonas claras porque no se usa en ellas. */
  --marca-acento-texto:  #F5C468;
  /* SOL usa el MISMO dorado que la marca. Cuando la paleta era verde el
     dorado estaba reservado al asistente y por eso iba aparte; ahora que
     el dorado ES el acento, tener dos dorados distintos solo se notaria
     como un descuadre. */
  --marca-sol:           var(--marca-acento);
  --marca-sol-claro:     var(--marca-acento-claro);
  --marca-gris:          #4A535C;   /* gris de las tarjetas de valores.
                                        Se oscurecio desde #5C6670: alli el
                                        texto secundario caia a 4,12:1. */
  --line:      rgba(242,245,248,.13);
  --line-soft: rgba(242,245,248,.07);

  --success:   #58c46b;

  /* Type */
  --display: "Space Grotesk", "Arial Narrow", sans-serif;
  --sans:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", monospace;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* El atributo `hidden` tiene que ganar siempre. Su display:none viene de
   la hoja del navegador, con menos peso que cualquier regla propia: en
   cuanto una clase pone display:flex o display:grid, el elemento sigue
   ocupando sitio aunque este "oculto". Paso por eso con el aviso de la
   calculadora, que sumaba 71px invisibles a la seccion de Contacto. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  font-size: 106.5%; /* letras un poco más grandes en todo el sitio (escala rem) */
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--cream);
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 600;
}
::selection { background: var(--accent); color: var(--accent-ink); }

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

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.2rem; background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 900px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,181,41,.18);
}

.eyebrow-line { color: var(--cream-3); font-size: .95rem; }

.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: .9rem; }
.section-head p { margin-top: 1rem; font-size: 1.08rem; color: var(--cream-3); }

/* Fondo dorado en las secciones de contenido (no en portada ni pie):
   el dorado pasa a ser el fondo y el navy pasa a ser el "acento" de esas secciones. */
.section {
  background: var(--marca-crema);
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  /* Verde oscuro para el texto secundario sobre fondo claro. Se oscurecio
     desde #2C4F63 junto con el de #proceso y #contacto, que lo necesitaban
     por las fotos de fondo; aqui solo gana contraste. */
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  --line: rgba(15,46,60,.18);
  --line-soft: rgba(15,46,60,.09);
}
.section-alt { background: #e6ecf1; }   /* la misma crema, un punto mas honda */

/* Las tarjetas conservan siempre su esquema oscuro original, nunca heredan
   el color del fondo de la seccion. El panel de SOL entra aqui porque usa
   el mismo --bg-3: sin esto heredaba el --cream-3 de :root, calibrado
   contra el fondo de pagina (mas oscuro), y sobre el verde de tarjeta
   caia a 3,37:1. */
.card, .form-card, .ai-modal-panel {
  --cream: #f2f5f8;
  --cream-2: #cfdae2;
  /* mas claro que el #93a5b2 de :root: el fondo de tarjeta (--bg-3) es
     mas claro que el de pagina y ahi aquel gris no llegaba a 4,5:1. */
  --cream-3: #b6c6d1;
  --accent: var(--marca-acento);
  --accent-2: var(--marca-acento-claro);
  --line: rgba(242,245,248,.13);
  --line-soft: rgba(242,245,248,.07);
}

/* Halo / mesh backgrounds — never overflow:hidden on the section itself */
.section-halo { position: relative; isolation: isolate; }
.section-halo::before {
  content: ""; position: absolute; inset: -60% -10% -40% -10%; z-index: -1;
  background: radial-gradient(45% 40% at 25% 30%, rgba(242,181,41,.14), transparent 70%);
  filter: blur(110px);
  pointer-events: none;
}

/* =============================================================
   4. Typography components
   ============================================================= */
.text-mono { font-family: var(--mono); }
.text-accent { color: var(--accent); }
em { font-style: normal; color: var(--accent); }

[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-split] { opacity: 1; transform: none; } /* defensive — see gotcha A.4.5 */

[data-split] .split-word,
[data-split] .split-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* =============================================================
   5. Components
   ============================================================= */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  font-weight: 600; font-size: .98rem;
  white-space: nowrap;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(242,181,41,.18), 0 1px 3px rgba(0,0,0,.2);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(242,181,41,.28), 0 10px 20px rgba(0,0,0,.28);
}

/* Variante dorada del boton principal: el mismo par de colores que el
   boton flotante de SOL. Va como modificador y no tocando .btn-primary
   porque esa clase la comparten el formulario, la calculadora y las
   fichas de producto, que siguen en menta. */
.btn-sol {
  background: linear-gradient(140deg, var(--marca-sol-claro), var(--marca-sol) 62%);
  color: var(--sol-ink);
  box-shadow: 0 4px 14px rgba(242,181,41,.22), 0 1px 3px rgba(0,0,0,.2);
}
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn-block { width: 100%; }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* --- Nav --- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  padding-block: 1.15rem;
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), box-shadow .4s var(--ease-out), padding .4s var(--ease-out);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav.is-scrolled,
.pagina-interior .nav {
  /* Clara en vez de navy oscuro: así el azul del logo (su tono más oscuro)
     resalta con nitidez sobre la barra en vez de perderse contra un fondo
     igual de oscuro que él. */
  background: rgba(253,251,246,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(11,36,47,.1), 0 8px 24px -12px rgba(11,36,47,.18);
  padding-block: .8rem;
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  /* Mismo verde oscuro de texto secundario que usa .section. */
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  --line: rgba(11,36,47,.14);
}
.brand { display: flex; align-items: center; gap: .55rem; flex: none; }
.brand-icon-wrap { display: block; perspective: 600px; flex: none; }
.brand-icon {
  animation: brandIconSwing 6.5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes brandIconSwing {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-icon { animation: none; }
}
.brand-mark {
  height: 44px; width: auto; flex: none; display: block;
  /* sin resplandor blanco — solo una sombra sutil para que no se pierda
     si cae sobre una zona muy clara de la foto */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
  transition: filter .4s var(--ease-out), height .4s var(--ease-out);
}
/* Sobre la foto de portada se aclara EL FONDO, no la marca.
   Antes se subía el brillo del logo (brightness 1.12) para despegarlo de
   la foto, pero eso aclara el navy de "hybrid" y lo acerca al color del
   cielo: se leía peor, no mejor. Ahora el navy se mantiene profundo —solo
   se le sube un punto la saturación— y quien se aclara es la foto de
   detrás, con un velo de luz cálida. Es el mismo contraste pero al revés,
   y funciona: el color de marca queda intacto. */
body:not(.pagina-interior) .nav:not(.is-scrolled) .brand-mark {
  filter:
    saturate(1.12)
    drop-shadow(0 2px 10px rgba(0,0,0,.28));
}

/* El velo. Va detrás de la marca, difuminado y sin bordes: no debe leerse
   como una caja, solo como una zona de cielo más clara. */
.brand { position: relative; }
body:not(.pagina-interior) .nav:not(.is-scrolled) .brand::before {
  content: "";
  position: absolute; z-index: -1; pointer-events: none;
  /* Mas ancho que la propia marca: si el velo es mas pequeno, los bordes
     del logo se quedan fuera y siguen peleandose con el cielo. */
  inset: -26% -18%;
  background: radial-gradient(66% 64% at 46% 50%,
    rgba(255, 250, 238, .70) 0%,
    rgba(255, 249, 235, .52) 38%,
    rgba(255, 248, 232, .22) 62%,
    rgba(255, 248, 232, .06) 78%,
    transparent 90%);
  filter: blur(18px);
  transition: opacity .4s var(--ease-out);
}
/* En el pie la marca va en blanco: sobre el navy oscuro, el azul del logo
   se perdía contra el fondo. brightness(0) la aplana a negro e invert(1) la
   pasa a blanco, respetando la transparencia del PNG. */
/* El pie es claro: el logotipo va con sus colores. Antes llevaba
   brightness(0) invert(1), que lo dejaba blanco para que se viera sobre
   el pie verde; sobre crema eso lo haria desaparecer. */
.footer-brand .brand-mark {
  height: 60px;
  filter: none;
}
.nav .brand-mark { height: 142px; }
/* Al bajar, la barra se compacta: el logo baja de tamaño para no comerse
   un 17% del alto de pantalla y para que el salto de los enlaces cuadre. */
.nav.is-scrolled .brand-mark,
.pagina-interior .nav .brand-mark { height: 76px; }
@media (max-width: 539px) {
  .nav.is-scrolled .brand-mark,
  .pagina-interior .nav .brand-mark { height: 62px; }
}
@media (max-width: 539px) { .nav .brand-mark { height: 112px; } }
@media (min-width: 1280px) and (max-width: 1399px) {
  body:not(.pagina-interior) .nav:not(.is-scrolled) .brand-mark { height: 106px; }
}

/* --- Iluminación de la marca: barrido de luz ---------------------------
   En vez de un halo fijo alrededor, una franja de luz cálida recorre el
   logo cada pocos segundos. La franja va recortada con la silueta del
   propio logo (mask), así la luz pasa POR DENTRO de las letras y del
   ícono, sin salirse ni dibujar bordes. */
.brand-icon-wrap,
.brand-word-wrap { position: relative; display: block; flex: none; }

.brand-icon-wrap::after,
.brand-word-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(102deg,
    transparent 42%,
    rgba(255,247,222,.28) 47%,
    rgba(255,252,240,.80) 50%,
    rgba(255,247,222,.28) 53%,
    transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  animation: brilloMarca 7s ease-in-out infinite;
}
.brand-icon-wrap::after {
  mask-image: url("assets/img/logo-icon.webp");
  -webkit-mask-image: url("assets/img/logo-icon.webp");
  /* acompaña el giro del ícono para que la luz no se despegue de la forma */
  animation: brilloMarca 7s ease-in-out infinite,
             brandIconSwing 6.5s ease-in-out infinite;
  transform-style: preserve-3d;
}
.brand-word-wrap::after {
  mask-image: url("assets/img/logo-wordmark.webp");
  -webkit-mask-image: url("assets/img/logo-wordmark.webp");
  animation-delay: .45s;   /* la luz cruza primero el ícono y luego el texto */
}

/* sobre la barra clara el destello se atenúa: ahí las letras son oscuras y
   un brillo fuerte les restaría contraste en vez de realzarlas */
.nav.is-scrolled .brand-icon-wrap::after,
.nav.is-scrolled .brand-word-wrap::after,
.pagina-interior .brand-icon-wrap::after,
.pagina-interior .brand-word-wrap::after { opacity: .42; }

@keyframes brilloMarca {
  0%, 74%  { background-position: 0% 0; }
  100%     { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-icon-wrap::after,
  .brand-word-wrap::after { animation: none; }
}

.nav-links { display: none; align-items: center; gap: 1.1rem; flex-wrap: nowrap; }
.nav-link { white-space: nowrap; }
@media (min-width: 1280px) { .nav-links { display: flex; } }
@media (min-width: 1180px) { .nav-links { gap: 1.4rem; } }
@media (min-width: 1400px) { .nav-links { gap: 1.6rem; } }
.nav-link { position: relative; padding: .3rem 0; font-size: .95rem; color: var(--cream-2); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-burger {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 10px; border: 1px solid var(--line);
}
@media (min-width: 1280px) { .nav-burger { display: none; } }
.nav-burger span { position: relative; width: 18px; height: 2px; background: var(--cream); display: block; }
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--cream);
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 490;
  background: var(--bg);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-soft), visibility 0s .6s;
}
.nav-mobile[data-open="true"] {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path .6s var(--ease-soft), visibility 0s;
}
.nav-mobile-list { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.nav-mobile-list a { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--cream); }
.nav-mobile-list a:hover { color: var(--accent); }
.nav-mobile .btn { margin-top: 1rem; }
.nav-mobile-ai { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 1rem; }
.nav-mobile-ai .btn { margin-top: 0; }

/* --- Cards --- */
.card {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), box-shadow .4s var(--ease-soft), border-color .4s;
}
.has-tilt:hover {
  transition-duration: .15s;
  border-color: rgba(242,181,41,.35);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(242,181,41,.12);
}

/* =============================================================
   6. Sections
   ============================================================= */

/* --- Splash --- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  pointer-events: auto;
  transition: opacity .8s, clip-path 1s;
  animation: splashSafety .01s 4.5s forwards; /* JS-fail safety net */
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-mark {
  width: min(280px, 60vw); height: auto;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.22))
    drop-shadow(0 2px 14px rgba(0,0,0,.35));
  animation: splashPulse 1.6s ease-in-out infinite;
}
@keyframes splashPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 11.5rem; padding-bottom: 3rem;
  overflow: clip; isolation: isolate;
}
.hero-bg-img {
  position: absolute; inset: 0; z-index: -4;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Espejada (16/09/2026): los arboles, que son la parte mas oscura de
     la foto, quedan a la izquierda, detras de la marca y del texto. */
  transform: scaleX(-1);
}
/* Scrim: dark toward the text (left) so copy stays legible, clears toward the
   house detail (right), plus a soft lightening strip at the very top so the
   nav logo always reads regardless of what's behind it. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    /* zócalo claro puntual detrás de la marca, para que nunca se pierda
       contra la foto (sea cual sea lo que haya debajo) */
    radial-gradient(480px 220px at 14% 9%, rgba(245,242,233,.52), transparent 72%),
    linear-gradient(180deg, rgba(245,242,233,.2) 0%, rgba(245,242,233,0) 16%),
    linear-gradient(100deg, rgba(11,36,47,.92) 0%, rgba(11,36,47,.72) 30%, rgba(11,36,47,.32) 55%, rgba(11,36,47,.08) 72%, rgba(11,36,47,.35) 100%),
    /* Zocalo inferior. Sube hasta el 40% y algo mas opaco desde que las
       tres cifras van en dorado: la del 100% cae sobre la ventana
       iluminada de la casa y con el velo anterior se quedaba en 2,85:1. */
    linear-gradient(0deg, rgba(11,36,47,.78) 0%, rgba(11,36,47,.34) 22%, rgba(11,36,47,0) 40%);
}
/* Los paneles, sin velo (16/09/2026). Es la misma foto otra vez, encima
   del oscurecido (.hero-scrim), del brillo y de la malla, y recortada con
   una mascara a la forma del tejado: los paneles se ven con su color real
   y el resto de la foto conserva el velo que hace legible el texto.
   El encuadre tiene que ser IDENTICO al de .hero-bg-img: mismo
   object-fit, mismo object-position y mismo espejo. La mascara se encuadra
   con los mismos valores (mask-size: cover + mask-position: center 40%),
   y como el SVG mide lo mismo que la foto (2000x1125) cae exactamente
   encima del tejado a cualquier tamano de pantalla. */
.hero-bg-paneles {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scaleX(-1);
  pointer-events: none;
  -webkit-mask-image: url("assets/img/mascara-paneles.svg?v=2");
          mask-image: url("assets/img/mascara-paneles.svg?v=2");
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center 40%;
          mask-position: center 40%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* Warm glow bleeding from the lit windows toward the text — "more illumination". */
.hero-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(38% 42% at 62% 58%, rgba(242,181,41,.24), transparent 70%);   /* 62 %: sigue a las ventanas de la foto espejada */
}
.hero-mesh {
  position: absolute; inset: -10%; z-index: -1;
  background:
    radial-gradient(50% 45% at var(--mesh-x) var(--mesh-y), rgba(242,181,41,.14), transparent 62%),
    conic-gradient(from var(--mesh-angle), rgba(255,216,115,.06), rgba(58,111,176,.06), rgba(242,181,41,.08), rgba(255,216,115,.06));
  filter: blur(90px) saturate(120%);
  opacity: .7;
  animation: meshShift 26s linear infinite;
  mix-blend-mode: screen;
}
@keyframes meshShift {
  0%   { --mesh-angle: 0deg;   --mesh-x: 24%; --mesh-y: 30%; }
  50%  { --mesh-angle: 180deg; --mesh-x: 68%; --mesh-y: 55%; }
  100% { --mesh-angle: 360deg; --mesh-x: 24%; --mesh-y: 30%; }
}

.hero-content { max-width: 640px; }

.hero-title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  margin-top: 1.1rem;
  max-width: 26ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--cream-2);
  max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 520px;
}
.hero-stat-value {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  /* En el dorado de SOL, no en la menta: son las tres cifras que sostienen
     la promesa de la portada y el dorado las separa del resto del texto
     claro. Es el mismo --marca-sol del boton del asistente. */
  color: var(--marca-sol-claro);
  display: flex; align-items: baseline; gap: .1em;
}
.hero-stat-label {
  margin-top: .35rem; font-size: .82rem; color: var(--cream);
  max-width: 16ch;
}

.card h3 { font-size: 1.18rem; }
.card p { margin-top: .6rem; font-size: .96rem; color: var(--cream-3); }

.producto-ventajas {
  margin-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem;
}
.producto-ventajas li {
  position: relative; padding-left: 1.4rem;
  font-size: .92rem; color: var(--cream-2); line-height: 1.4;
}
.producto-ventajas li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Aviso de tienda: se ve como botón pero NO es un enlace — todavía no hay
   tienda, así que no debe comportarse como algo pulsable. */
.btn-soon {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: .55rem; width: 100%;
  padding: .7rem 1rem; border-radius: 999px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  background: rgba(242,181,41,.15);
  color: var(--accent-2);
  border: 1px dashed rgba(242,181,41,.5);
  cursor: default; user-select: none;
}
.btn-soon svg { width: 14px; height: 14px; flex: none; }

/* --- Proceso (steps) --- */
.proceso-list { display: grid; gap: 1.4rem; }
@media (min-width: 720px) { .proceso-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .proceso-list { grid-template-columns: repeat(4, 1fr); } }
.proceso-item { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.proceso-num { font-family: var(--mono); font-size: .85rem; color: var(--accent); }
.proceso-item h3 { margin-top: .7rem; font-size: 1.12rem; }
.proceso-item p { margin-top: .55rem; font-size: .94rem; color: var(--cream-3); }


/* --- Pie del botón SOL en el menú móvil --- */
.nav-ai-caption {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  color: var(--accent-2); white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.ai-modal {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  padding: var(--gutter);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.ai-modal[data-open="true"] { opacity: 1; pointer-events: auto; }
.ai-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,10,18,.72);
  backdrop-filter: blur(4px);
}
.ai-modal-panel {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  max-height: min(600px, 85vh);
  display: flex; flex-direction: column;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.7);
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease-soft);
}
.ai-modal[data-open="true"] .ai-modal-panel { transform: translateY(0) scale(1); }
.ai-modal-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream-3); border: 1px solid var(--line);
  transition: color .25s, border-color .25s;
}
.ai-modal-close:hover { color: var(--cream); border-color: var(--accent); }
.ai-modal-close svg { width: 14px; height: 14px; }
.ai-modal-head { display: flex; align-items: center; gap: .7rem; padding-right: 2.5rem; }
.ai-modal-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80; flex: none;
  box-shadow: 0 0 0 4px rgba(74,222,128,.18);
}
.ai-modal-head strong { display: block; font-family: var(--display); color: var(--cream); font-size: 1rem; }
.ai-modal-head span { font-size: .8rem; color: var(--cream-3); }

.ai-modal-log {
  margin-top: 1.2rem; padding-right: .3rem;
  flex: 1; min-height: 140px; max-height: 340px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .7rem;
}
.ai-msg {
  max-width: 88%; padding: .7rem .95rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.5;
}
.ai-msg-bot { align-self: flex-start; background: var(--bg-2); color: var(--cream-2); border-bottom-left-radius: 4px; }
.ai-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; font-weight: 500; }
.ai-msg-error { align-self: flex-start; background: rgba(197,48,30,.15); color: #ff9c8a; border: 1px solid rgba(197,48,30,.3); }
.ai-msg-loading { align-self: flex-start; display: flex; gap: .3rem; padding: .85rem 1rem; }
.ai-msg-loading span { width: 6px; height: 6px; border-radius: 50%; background: var(--cream-3); animation: aiDotPulse 1.1s ease-in-out infinite; }
.ai-msg-loading span:nth-child(2) { animation-delay: .15s; }
.ai-msg-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDotPulse { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-modal-form { margin-top: 1.1rem; display: flex; gap: .6rem; }
.ai-modal-form input {
  flex: 1; padding: .85rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--cream);
  font: inherit; font-size: .92rem;
}
.ai-modal-form input:focus { border-color: var(--accent); }
.ai-modal-form button {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .25s var(--ease-out);
}
.ai-modal-form button:hover { transform: scale(1.06); }
.ai-modal-form button:disabled { opacity: .5; pointer-events: none; }
.ai-modal-form button svg { width: 16px; height: 16px; }
/* Boton "Pedir presupuesto" del asistente. Va con el dorado de marca
   porque es la accion que queremos que se tome; el de enviar pregunta,
   a su lado, es circular y pequeno, asi que no compiten. */
.ai-modal-cta {
  margin-top: .85rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.2rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  text-align: center;
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.ai-modal-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(216,154,34,.75); }
.ai-modal-cta svg { width: 18px; height: 18px; flex: none; }

/* Dos salidas desde SOL: calcular el ahorro (la que queremos) y pedir
   presupuesto. La segunda va en tono suave para que no compitan. */
.ai-modal-acciones { display: grid; gap: .5rem; }
.ai-modal-acciones .ai-modal-cta { margin-top: 0; }
.ai-modal-cta.is-suave {
  background: transparent;
  border: 1px solid rgba(216,154,34,.45);
  color: var(--marca-acento-texto);
  font-weight: 500; font-size: .9rem;
  padding: .62rem 1.1rem;
}
.ai-modal-cta.is-suave:hover {
  background: rgba(216,154,34,.12);
  border-color: var(--accent);
  box-shadow: none;
}
.ai-modal-acciones { margin-top: .85rem; }
.ai-modal-note { margin-top: .8rem; font-size: .74rem; color: var(--cream-3); text-align: center; }
.ai-modal-note a { color: var(--marca-acento-texto); }

/* --- Contacto --- */
.contacto-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .contacto-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; } }
.contacto-info h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.contacto-info > p { margin-top: 1rem; color: var(--cream-3); max-width: 46ch; }
.contacto-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.3rem; }
.contacto-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contacto-list svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: .15rem; }
.contacto-list strong { display: block; color: var(--cream); font-size: .95rem; }
.contacto-list span, .contacto-list a { font-size: .93rem; color: var(--cream-3); }
.contacto-list a:hover { color: var(--accent); }

.form-card { position: relative; background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); }
.cta-form { display: grid; gap: 1.1rem; }
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%; padding: 1.35rem 1rem .55rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--cream);
  font: inherit; font-size: .96rem;
  transition: border-color .25s;
}
.field textarea { resize: vertical; min-height: 110px; padding-top: 1.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field label {
  position: absolute; left: 1rem; top: 1.1rem;
  pointer-events: none; transition: all .22s var(--ease-out);
  color: var(--cream-3); font-size: .95rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field select + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: .45rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-acento-texto);
}
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.cta-submit { position: relative; margin-top: .3rem; }
.cta-form-spinner, .cta-form-check {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.cta-form.is-sending .cta-form-label { opacity: 0; }
.cta-form.is-sending .cta-form-spinner { opacity: 1; }
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px;
  border: 2px solid rgba(58,42,5,.35); border-top-color: var(--accent-ink);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta-form-check path { stroke: currentColor; stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--ease-out); }
.cta-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; position: absolute; inset: 0 auto auto 0; width: 100%; }

/* Aviso de que los campos vienen rellenos desde la calculadora. */
.form-desde-calc {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 0 0 1.1rem; padding: .75rem .9rem;
  border-radius: 10px;
  background: rgba(216, 154, 34, .10);
  border: 1px solid rgba(216, 154, 34, .28);
  font-size: .85rem; line-height: 1.5; color: var(--cream-2);
}
.form-desde-calc svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--accent); }
.form-note { margin-top: 1rem; font-size: .8rem; color: var(--cream-3); }
/* Aviso de envio fallido. Solo aparece si el CRM esta configurado y
   rechaza o no responde: entonces el formulario NO dice "recibida". */
.form-error {
  margin-top: .8rem; padding: .65rem .85rem;
  border-radius: 10px;
  background: rgba(197, 48, 30, .15);
  border: 1px solid rgba(197, 48, 30, .35);
  font-size: .84rem; line-height: 1.45; color: #ff9c8a;
}

/* -------------------------------------------------------------
   Aviso "esto esta en tu factura" + adjuntar la factura
   ------------------------------------------------------------- */
.form-aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: -.2rem 0 0;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: rgba(216, 154, 34, .08);
  border: 1px solid rgba(216, 154, 34, .22);
  font-size: .84rem; line-height: 1.45; color: var(--cream-2);
}
.form-aviso svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; color: var(--marca-acento-texto); }
.form-aviso strong { /* --accent sobre el propio velo de --accent se quedaba en 4,13:1 */
  color: var(--marca-acento-texto); font-weight: 600; }

.adjunto { position: relative; }
/* El input de verdad se esconde pero NO con display:none, que lo
   sacaria del recorrido del tabulador. Se queda de 1px y el anillo de
   foco se pinta sobre la zona, que es lo que se ve. */
.adjunto-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.adjunto-zona {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  border: 1px dashed rgba(245, 242, 233, .28); border-radius: 10px;
  background: var(--bg-2); cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.adjunto-zona:hover,
.adjunto.is-encima .adjunto-zona { border-color: var(--accent); background: rgba(216, 154, 34, .07); }
.adjunto-input:focus-visible + .adjunto-zona { outline: 2px solid var(--accent); outline-offset: 2px; }
.adjunto-zona svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.adjunto-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.adjunto-texto strong { font-size: .92rem; font-weight: 600; color: var(--cream); }
.adjunto-texto em { font-style: normal; font-weight: 400; color: var(--cream-3); }
.adjunto-texto small { font-size: .76rem; color: var(--cream-3); }

.adjunto-lista { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.adjunto-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem .5rem .75rem;
  border-radius: 8px; background: rgba(245, 242, 233, .06);
  font-size: .82rem; color: var(--cream-2);
}
.adjunto-item svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
/* el nombre largo se corta, no empuja al boton de quitar fuera de la ficha */
.adjunto-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto-peso { flex: none; font-family: var(--mono); font-size: .72rem; color: var(--cream-3); }
.adjunto-quitar {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--cream-3); transition: color .2s, background-color .2s;
}
.adjunto-quitar:hover { color: #ff8f7a; background: rgba(255, 143, 122, .12); }
.adjunto-quitar svg { width: 13px; height: 13px; color: currentColor; }
.adjunto-error { margin: .5rem 0 0; font-size: .8rem; color: #ff8f7a; }

.cta-success {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.cta-success.is-visible { display: flex; opacity: 1; }
.cta-success-icon {
  width: 60px; height: 60px; border-radius: 50%; background: rgba(88,196,107,.14);
  display: grid; place-items: center; color: var(--success); margin-bottom: 1.2rem;
}
.cta-success-icon svg { width: 28px; height: 28px; }
.cta-success h3 { font-size: 1.3rem; }
.cta-success p { margin-top: .6rem; color: var(--cream-3); }

/* --- Final CTA band --- */
.final-cta {
  text-align: center;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.final-cta h2 { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 18ch; margin-inline: auto; }
.final-cta p { margin-top: 1rem; color: var(--cream-3); max-width: 50ch; margin-inline: auto; }
.final-cta .hero-actions { justify-content: center; margin-top: 2.2rem; }

/* --- Footer --- */
/* El pie va en claro como el resto del sitio. Antes era verde oscuro, y
   con el logotipo en sus colores propios —pensados para papel blanco— el
   azul del monograma se quedaba en 1,34:1 ahi dentro. Los tokens se
   invierten igual que en .section. */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem;
  background: var(--marca-crema);
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  --line: rgba(11,36,47,.18);
  --line-soft: rgba(11,36,47,.09);
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr repeat(3, .9fr); } }
.footer-brand p { margin-top: 1rem; color: var(--cream-3); max-width: 32ch; font-size: .92rem; }
.footer-col h4 { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3); font-weight: 500; }
.footer-col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { font-size: .92rem; color: var(--cream-2); }
.footer-col a:hover { color: var(--accent); }
.footer-social { display: flex; gap: .8rem; margin-top: 1.4rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--cream-3);
  transition: color .3s, border-color .3s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--cream-3);
}
.footer-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--accent); }

/* =============================================================
   7. Effects (keyframes shared)
   ============================================================= */
@keyframes ambientFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =============================================================
   7-bis. Sistemas — encuadre al llegar desde el menú
   La sección medía 1168px contra 749px útiles, así que al pulsar
   "Sistemas" las tarjetas quedaban cortadas por la mitad. Se compacta
   el encabezado y el aire vertical para que entren enteras.
   ============================================================= */
@media (min-width: 1024px) {
  #sistemas { padding-block: 2rem 4rem; }
  #sistemas .section-head {
    max-width: 780px;          /* el subtítulo entra en una sola línea */
    margin-bottom: 1.4rem;
  }
  #sistemas .section-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.35rem); margin-top: .5rem; }
  #sistemas .section-head p  { margin-top: .6rem; font-size: 1.02rem; }
}

/* =============================================================
   7-ter. Productos adicionales — sin lista de ventajas, fichas más
   grandes: foto mayor y texto con más cuerpo.
   ============================================================= */
@media (min-width: 1024px) {
  #productos-adicionales { padding-block: 2.5rem 4rem; }
  #productos-adicionales .section-head { max-width: 820px; margin-bottom: 1.6rem; }
  #productos-adicionales .section-head h2 { font-size: clamp(1.9rem, 2.8vw, 2.35rem); margin-top: .5rem; }
  #productos-adicionales .section-head p  { margin-top: .6rem; font-size: 1.02rem; }

  #productos-adicionales .btn-soon { margin-top: .5rem; padding: .68rem .9rem; font-size: .78rem; }
}

/* =============================================================
   7-quinquies. Fondos de sección — imágenes CON transparencia real
   (WebP con canal alfa), para que no se vean como una hoja limpia.
   Van detrás del contenido y ya traen su propia opacidad horneada.
   ============================================================= */
/* Sistemas y Productos siguen el mismo patron que Contacto y Como
   funciona: crema de fondo, foto translucida por detras y texto oscuro.
   Antes iban en verde profundo con texto claro, y partian la pagina en
   dos mitades de tono opuesto. Los tokens se invierten igual que en
   .section: lo que en una zona oscura es el color del texto, aqui es el
   del fondo. */
#sistemas, #productos-adicionales {
  background: var(--marca-crema);
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  /* Verde bastante oscuro, el mismo que usan Proceso y Contacto: estas
     secciones llevan foto de fondo y los textos secundarios caian entre
     3,5 y 4,1:1 sobre las zonas mas oscuras de la imagen. */
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  --line: rgba(11,36,47,.18);
  --line-soft: rgba(11,36,47,.09);
  position: relative; isolation: isolate; overflow: clip;
}

/* Sistemas: foto de fondo, con el mismo criterio que Contacto y Como
   funciona — que la imagen se vea, no que se insinue. Antes estaba aqui
   fondo-sistemas.webp, pero su alfa horneado es del 15% y apenas movia
   la luminancia. Esta trae alfa del 55%. */

#sistemas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("assets/img/fondo-testimonios.webp");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
/* El velo. Ahora ACLARA, como el de Contacto y Como funciona: la seccion
   es clara y el texto oscuro. Tiene dos formas segun el ancho, porque el
   reparto del texto cambia: por debajo de 1024px las tres fichas se
   apilan y sus nombres y descripciones quedan repartidos por toda la
   altura, asi que ahi el velo va parejo. De 1024px en adelante van en
   fila, y entonces el texto suelto solo ocupa dos franjas —del 4,5% al
   20,6% el encabezado, y del 73% al 88% los nombres, las descripciones y
   la leyenda del pie—. En medio solo estan las tres fotos de las fichas,
   que son opacas: ahi el velo se suelta y la imagen asoma por los
   margenes y por los huecos entre columnas. */
#sistemas::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(238,242,245,.80);
}
@media (min-width: 1024px) {
  #sistemas::after {
    background: linear-gradient(180deg,
      rgba(238,242,245,.84) 0%,
      rgba(238,242,245,.80) 21%,
      rgba(238,242,245,.22) 29%,
      rgba(238,242,245,.22) 66%,
      rgba(238,242,245,.84) 74%,
      rgba(238,242,245,.86) 100%);
  }
}

/* Productos: la foto de la portada, translúcida (alfa en la propia imagen) */
#productos-adicionales::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("assets/img/fondo-productos.webp");
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
/* Velo sobre la foto. Vuelve a ser crema, como cuando la seccion era
   clara: aclara la imagen para que el texto oscuro descanse encima.
   Entre medias estuvo en verde, cuando la seccion iba en oscuro. */
#productos-adicionales::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(238,242,245,.72) 0%,
    rgba(238,242,245,.52) 45%,
    rgba(238,242,245,.76) 100%);
}
/* =============================================================
   7-septies. Quiénes somos — mismo lenguaje visual que Sistemas y
   Productos: fondo claro con foto transparente, bloques en los
   colores de la marca y tarjetas de valores en gris.
   ============================================================= */
#quienes-somos {
  background: var(--marca-crema);
  position: relative; isolation: isolate; overflow: clip;
}
#quienes-somos::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("assets/img/fondo-nosotros.webp");
  background-size: cover; background-position: center 45%;
  background-repeat: no-repeat;
}
#quienes-somos::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(238,242,245,.66) 0%,
    rgba(238,242,245,.38) 45%,
    rgba(238,242,245,.70) 100%);
}

/* --- Visión / Misión: dos bloques con los colores de la marca --- */
.nosotros-par { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .nosotros-par { grid-template-columns: repeat(2, 1fr); } }

.nosotros-bloque {
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 18px 38px -24px rgba(11,36,47,.5);
}
.nosotros-bloque.is-vision {
  background: var(--marca-azul);
  --cream: #f5f2e9; --cream-2: #cfdae2;
  --accent: var(--marca-acento-texto); --accent-2: var(--marca-acento-claro);
}
.nosotros-bloque.is-mision {
  background: var(--marca-acento);
  --cream: var(--sobre-acento); --cream-2: var(--sobre-acento-2);
  --accent: var(--sobre-acento-3); --accent-2: var(--sobre-acento-2);
}
.nosotros-kicker {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .84rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.nosotros-icono {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.15); color: var(--accent);
}
.nosotros-bloque.is-mision .nosotros-icono { background: rgba(255,255,255,.18); }
html:not(.paleta-logo) .nosotros-bloque.is-mision .nosotros-icono { background: rgba(11,36,47,.14); }
.nosotros-icono svg { width: 17px; height: 17px; }
.nosotros-bloque h3 {
  margin-top: .8rem; font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.18;
  color: var(--cream);
}
.nosotros-desc {
  margin-top: .8rem; font-size: 1.02rem; line-height: 1.55; color: var(--cream-2);
}

/* --- Valores: tres tarjetas en el gris de la marca --- */
.nosotros-encabezado-valores { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.nosotros-encabezado-valores h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }

.nosotros-valores { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .nosotros-valores { grid-template-columns: repeat(3, 1fr); } }

.nosotros-valor {
  background: var(--marca-gris);
  border: 1px solid rgba(11,36,47,.14);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  box-shadow: 0 16px 32px -24px rgba(11,36,47,.45);
  --cream: #f5f2e9; --cream-2: #cfdae2;
  --accent: var(--marca-acento-texto); --accent-2: var(--marca-acento-claro);
}
.nosotros-valor-icono {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(242,181,41,.26), rgba(242,181,41,.08));
  color: var(--accent-2);
}
.nosotros-valor-icono svg { width: 23px; height: 23px; }
.nosotros-valor h3 { margin-top: 1rem; font-size: 1.18rem; color: var(--cream); }
.nosotros-valor p { margin-top: .6rem; font-size: .95rem; line-height: 1.5; color: var(--cream-2); }

/* =============================================================
   8. Responsive extras
   ============================================================= */
@media (min-width: 1280px) {
  .hero-title { max-width: 30ch; }
}

/* =============================================================
   9. Reduced motion — only intrusive effects gated
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-mesh { animation-duration: 60s; }
  .splash-mark { animation: none; }
  /* Do NOT disable: tilt, hover, fades, count-up, faq, testimonials */
}

/* --- 7-octies · Páginas interiores (sin portada) ------------------------
   En index.html la barra superior flota transparente sobre la foto de la
   portada. Una página que empieza directamente con una sección clara no
   tiene esa foto detrás, así que allí la barra va sólida desde el primer
   píxel (reglas .pagina-interior de más arriba) y el contenido arranca
   justo por debajo, no detrás de ella. */
.pagina-interior #main { padding-top: 101px; }
@media (max-width: 539px) { .pagina-interior #main { padding-top: 86px; } }

/* =============================================================
   7-nonies. El resto de secciones, con el mismo lenguaje visual que
   Sistemas, Productos y Quiénes somos: fondo crema con foto translúcida
   y tarjetas en los colores de la marca.
   ============================================================= */

/* --- Base crema compartida --- */
#proceso,
#contacto {
  background: var(--marca-crema);
  position: relative; isolation: isolate; overflow: clip;
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  /* Verde bastante oscuro: estas dos secciones llevan foto de fondo y los
     textos secundarios (rotulo, parrafo, datos de contacto) caian entre
     3,5 y 4,1:1 sobre las zonas mas oscuras de la imagen. */
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  --line: rgba(11,36,47,.18);
  --line-soft: rgba(11,36,47,.09);
}

/* Fotos de fondo: cada una con la suya, y con un velo mucho más suave que
   en Sistemas y Productos para que la imagen se note. */
#proceso::before,
#contacto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-repeat: no-repeat;
}
#proceso::before     { background-image: url("assets/img/fondo-proceso.webp");     background-position: center 42%; }
#contacto::before    { background-image: url("assets/img/fondo-productos.webp");   background-position: center 30%; }
/* velo apenas suficiente para que el texto descanse */
/* El velo de Proceso arranca mas fuerte arriba: el encabezado cae sobre
   la parte mas oscura de la foto (un tejado) y el rotulo se quedaba en
   3,24:1. De la mitad hacia abajo sigue casi transparente, que es donde
   la foto se ve y donde el texto ya va dentro de tarjetas opacas. */
#proceso::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(238,242,245,.66) 0%,
    rgba(238,242,245,.58) 30%,
    rgba(238,242,245,.16) 60%,
    rgba(238,242,245,.34) 100%);
}
#contacto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(238,242,245,.68) 0%,
    rgba(238,242,245,.40) 45%,
    rgba(238,242,245,.72) 100%);
}

/* --- Pasos de "Cómo funciona": los cuatro del mismo navy; el relieve lo
   da el crecimiento al señalar, no el color. --- */
.proceso-item {
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  box-shadow: 0 18px 38px -24px rgba(11,36,47,.5);
  background: var(--marca-azul);
  --cream: #f5f2e9; --cream-2: #cfdae2; --cream-3: #c8d3dc;
  --accent: var(--marca-acento); --accent-2: var(--marca-acento-claro);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), background-color .32s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .proceso-item:hover {
    transform: translateY(-6px) scale(1.035);
    background: var(--marca-azul-claro);
    box-shadow: 0 26px 48px -22px rgba(11,36,47,.62);
  }
}

/* --- Proceso: pasos --- */
.proceso-list { gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .proceso-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .proceso-list { grid-template-columns: repeat(4, 1fr); } }
.proceso-item { border-top: none; padding-top: clamp(1.4rem, 2.6vw, 1.9rem); }
.proceso-item .proceso-num {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--accent);
  margin-top: 0;
}
.proceso-item h3 { margin-top: .9rem; font-size: 1.15rem; color: var(--cream); }
.proceso-item p { margin-top: .6rem; font-size: .95rem; line-height: 1.5; color: var(--cream-2); }

/* --- Contacto: boton de WhatsApp --- */
.contacto-redes { margin-top: 2rem; }
.contacto-redes-titulo {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cream-3);
}
.contacto-redes-botones { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-red {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid transparent;
}
/* Tamano del logo dentro de la pildora. Se probo 23px (demasiado
   protagonista) y 16px (se pierde); 18px es el punto en que se reconoce
   la marca sin comerse la palabra. */
.btn-red svg { width: 18px; height: 18px; }
/* Colores oficiales de cada aplicación */
.btn-red.is-whatsapp { background: #25D366; color: #fff; }
.btn-red.is-whatsapp:hover { background: #1ebe5a; }

/* =============================================================
   7-decies. Encaje vertical en escritorio — cada sección tiene que
   caber entera bajo la barra fija (ventana 900px − barra 101px = 799px
   útiles), así que aquí se recorta el aire vertical: menos relleno de
   sección, encabezados más compactos y tarjetas menos altas.
   ============================================================= */
@media (min-width: 1024px) {
  .section { padding-block: clamp(2.4rem, 4vw, 3.6rem); }

  .section-head { margin-bottom: clamp(1.2rem, 2.2vw, 1.9rem); }
  .section-head h2 { font-size: clamp(1.85rem, 2.9vw, 2.4rem); margin-top: .55rem; }
  .section-head p  { margin-top: .65rem; font-size: 1.02rem; }

  /* Portada: el relleno superior sólo tiene que despejar la barra (163px) */
  .hero { padding-top: 10.2rem; padding-bottom: 2rem; }

  /* Sistemas: tres franjas en una pantalla */
  #sistemas { padding-block: .8rem .9rem; }
  #sistemas .section-head { max-width: 1040px; margin-bottom: .6rem; }
  #sistemas .section-head h2 { font-size: clamp(1.7rem, 2.35vw, 2.05rem); margin-top: .35rem; }
  #sistemas .section-head p  { margin-top: .45rem; font-size: .98rem; }

  /* Productos: mosaico 2×2 menos alto */
  #productos-adicionales { padding-block: 1.2rem 1.4rem; }
  #productos-adicionales .section-head { margin-bottom: .7rem; }

  /* Quiénes somos (página propia): también entera en una pantalla */
  #quienes-somos { padding-block: 1.5rem 1.7rem; }
  #quienes-somos .section-head { max-width: 980px; margin-bottom: .8rem; }
  #quienes-somos .section-head h2 { font-size: clamp(1.75rem, 2.5vw, 2.15rem); margin-top: .4rem; }
  #quienes-somos .section-head p  { margin-top: .5rem; font-size: 1rem; }
  #quienes-somos .nosotros-par { gap: .8rem; }
  #quienes-somos .nosotros-bloque { padding: 1rem 1.4rem 1.1rem; }
  #quienes-somos .nosotros-bloque h3 { margin-top: .5rem; font-size: 1.3rem; line-height: 1.2; }
  #quienes-somos .nosotros-desc { margin-top: .5rem; font-size: .95rem; line-height: 1.45; }
  #quienes-somos .nosotros-icono { width: 27px; height: 27px; }
  #quienes-somos .nosotros-icono svg { width: 14px; height: 14px; }
  #quienes-somos .nosotros-encabezado-valores { margin-top: 1.1rem; margin-bottom: .75rem; }
  #quienes-somos .nosotros-encabezado-valores h2 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
  #quienes-somos .nosotros-valores { gap: .8rem; }
  #quienes-somos .nosotros-valor { padding: .95rem 1.3rem 1rem; }
  #quienes-somos .nosotros-valor-icono { width: 38px; height: 38px; border-radius: 11px; }
  #quienes-somos .nosotros-valor-icono svg { width: 19px; height: 19px; }
  #quienes-somos .nosotros-valor h3 { margin-top: .7rem; font-size: 1.08rem; }
  #quienes-somos .nosotros-valor p { margin-top: .45rem; font-size: .92rem; line-height: 1.45; }

  /* Proceso y contacto */
  #proceso .proceso-list { gap: .9rem; }
  #contacto .contacto-grid { gap: 2rem; }
  #contacto .contacto-list { margin-top: 1.3rem; gap: .9rem; }
  #contacto .contacto-redes { margin-top: 1.3rem; }
  /* La banda de la calculadora cuesta 111px y la seccion iba justa: en
     escritorio va mas apretada para que Contacto siga entrando entera. */
  #contacto .contacto-calc { margin-bottom: 1rem; padding: .6rem .95rem; gap: .8rem; }
  #contacto .contacto-calc-icono { width: 34px; height: 34px; border-radius: 10px; }
  #contacto .contacto-calc-icono svg { width: 19px; height: 19px; }
  #contacto .contacto-calc-texto strong { font-size: .94rem; }
  #contacto .contacto-calc-texto span { font-size: .82rem; }
  #contacto .contacto-calc-boton { padding: .6rem 1rem; font-size: .86rem; }
  /* El formulario crecio 222px con el aviso de la factura y la zona de
     adjunto, y la seccion se pasaba de pantalla. Se recupera el alto
     donde sobraba aire: el hueco entre campos y el area de texto, que
     era la mas holgada del formulario. */
  #contacto .cta-form { gap: .85rem; }
  #contacto .field textarea { min-height: 78px; }
  #contacto .form-aviso { padding: .55rem .75rem; font-size: .81rem; }
  #contacto .adjunto-zona { padding: .7rem .9rem; }
  #contacto .form-note { margin-top: .75rem; }
}

/* Entre 1024 y 1365 el ancho de columna es menor y el texto envuelve mas
   lineas: un punto extra de compresion para que Sistemas siga entrando en
   una pantalla. */
@media (min-width: 1024px) and (max-width: 1365px) {
  #sistemas { padding-block: 1rem 1.1rem; }
}

/* =============================================================
   7-undecies. Titulares con más presencia — mismo tipo de letra
   (Space Grotesk) pero más cuerpo, más peso y menos interletra, para
   que cada título se lea de un golpe de vista.
   ============================================================= */
h1, h2, h3 { font-weight: 700; letter-spacing: -.022em; }

.kicker { font-size: .82rem; }

@media (min-width: 1024px) {
  /* Título de sección */
  .section-head h2 { font-size: clamp(2.15rem, 3.5vw, 3rem); line-height: 1.03; }
  .section-head p  { font-size: 1.06rem; }

  #sistemas .section-head h2             { font-size: clamp(1.95rem, 2.9vw, 2.45rem); }
  #productos-adicionales .section-head h2 { font-size: clamp(2.05rem, 3.1vw, 2.7rem); }
  #quienes-somos .section-head h2         { font-size: clamp(1.95rem, 2.9vw, 2.5rem); }
  #quienes-somos .nosotros-encabezado-valores h2 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
  #contacto .contacto-info h2            { font-size: clamp(2rem, 3.6vw, 2.8rem); }

  /* Títulos de tarjeta */
  #proceso .proceso-item h3              { font-size: 1.32rem; line-height: 1.15; }
  #quienes-somos .nosotros-bloque h3     { font-size: 1.46rem; line-height: 1.14; }
  #quienes-somos .nosotros-valor h3      { font-size: 1.2rem; }
}

/* La portada también */
.hero-title { font-size: clamp(2.2rem, 5.1vw, 3.5rem); }

/* Con la foto de fondo a la vista, el encabezado necesita algo de contraste
   propio: color más firme y un halo claro, en vez de subir el velo (que
   volvería a esconder la imagen). */
/* Un escalon mas oscuro que --marca-azul: este parrafo cae justo sobre el
   tejado de la foto y con el verde medio se quedaba en 2,63:1. */
#proceso .section-head p { color: var(--marca-azul-osc); text-shadow: 0 1px 2px rgba(238,242,245,.9); }
#proceso .section-head h2,
#proceso .kicker { text-shadow: 0 1px 4px rgba(238,242,245,.8); }

/* =============================================================
   7-duodecies. Acceso permanente a WhatsApp — botones
   fijos en pantalla, con la marca oficial de la aplicación y sus
   colores. Van por debajo del asistente SOL (600) y del
   menú móvil (490) para no taparlos.
   ============================================================= */
.redes-flotantes {
  position: fixed; z-index: 480;
  right: clamp(.9rem, 1.6vw, 1.5rem);
  bottom: clamp(.9rem, 1.6vw, 1.5rem);
  display: flex; flex-direction: column; gap: .7rem;
  align-items: flex-end;
}
/* Círculo por defecto — así no se comen ancho de contenido (llegaban a tapar
   el último nodo del diagrama de Sistemas). Al señalarlos se abren hacia la
   izquierda y muestran el nombre. */
.red-flotante {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: 54px; height: 54px; padding: 0;
  border-radius: 999px;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 28px -10px rgba(11,36,47,.55), 0 2px 6px rgba(11,36,47,.2);
  transition: width .3s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.red-flotante svg { width: 26px; height: 26px; flex: none; }
.red-flotante-texto {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  white-space: nowrap;
  max-width: 0; opacity: 0; margin-left: 0;
  transition: max-width .3s var(--ease-out), opacity .22s var(--ease-out), margin-left .3s var(--ease-out);
}
/* SOL: el dorado de la marca, arriba del todo */
/* SOL se queda en amarillo aunque el acento de la marca sea menta: el
   asistente se llama SOL y el dorado es su color. Va con sus propios
   tokens, no con los del acento, justamente para que no le siga la
   corriente si el acento vuelve a cambiar. */
.red-flotante.is-sol {
  background: linear-gradient(140deg, var(--marca-sol-claro), var(--marca-sol) 62%);
  color: var(--sol-ink);
  border: none; cursor: pointer;
  font: inherit;
}
.red-flotante.is-sol svg { width: 24px; height: 24px; }

/* Colores oficiales de cada aplicación */
.red-flotante.is-whatsapp { background: #25D366; }
@media (hover: hover) and (pointer: fine) {
  .red-flotante:hover,
  .red-flotante:focus-visible {
    width: 162px;
    transform: translateY(-3px);
    box-shadow: 0 18px 34px -10px rgba(11,36,47,.6), 0 3px 8px rgba(11,36,47,.24);
  }
  .red-flotante:hover .red-flotante-texto,
  .red-flotante:focus-visible .red-flotante-texto {
    max-width: 7rem; opacity: 1; margin-left: .55rem;
  }
}
.red-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* En pantallas estrechas, algo más pequeños */
@media (max-width: 719px) {
  .redes-flotantes { gap: .6rem; }
  .red-flotante { height: 50px; width: 50px; }
  .red-flotante-texto { display: none; }
}

/* No hace falta ocultarlos con el asistente SOL abierto: su fondo va en
   z-index 600 y ya los tapa. */

@media (prefers-reduced-motion: reduce) {
  .red-flotante { transition: none; }
}

/* Los botones fijos se quedan sobre el final de la página: el pie reserva
   sitio abajo para que no tapen los enlaces legales. */
.footer { padding-bottom: 13rem; }
@media (max-width: 719px) { .footer { padding-bottom: 8.5rem; } }

/* =============================================================
   Productos adicionales — rejilla de seis fichas
   -------------------------------------------------------------
   La foto va arriba y el texto en una tarjeta debajo, en vez del
   mosaico 2x2 anterior que ponia el texto sobre la foto y obligaba
   a oscurecerla con un velo.

   Los seis van a la vista, en tres columnas y dos filas. Antes
   habia aqui un carrusel que mostraba tres y escondia el resto
   detras de unas flechas, para que la seccion entrara en una
   pantalla; se quito porque los tres de atras no los veia nadie.
   La seccion ocupa ahora lo que ocupe. El carrusel completo, con
   sus mandos y su JS, esta en archivo/productos-carrusel/.
   ============================================================= */
.producto-rejilla {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .producto-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .producto-rejilla { grid-template-columns: repeat(3, 1fr); } }

.producto-ficha {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  /* Fichas en el azul del logotipo (16/09/2026; antes iban en el dorado
     de SOL). Llevan el mismo esquema que las tarjetas: texto claro y
     rotulo en el dorado aclarado para texto. El degradado va del azul de
     marca hacia el oscuro y no hacia el claro: sobre #26688A el rotulo
     dorado se quedaba en 3,8:1. */
  background: linear-gradient(168deg, var(--marca-azul), var(--marca-azul-osc) 72%);
  box-shadow: 0 18px 38px -24px rgba(11,36,47,.6);
  --cream: #f2f5f8; --cream-2: #cfdae2; --cream-3: #b6c6d1;
  --accent: var(--marca-acento-texto); --accent-2: #F8D488;   /* el aviso "Proximamente" con el claro normal: 3,5:1 */
  --line: rgba(242,245,248,.2); --line-soft: rgba(242,245,248,.1);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
/* mismo filo dorado que las franjas de Sistemas, para que la página hable un solo idioma */
/* Con la ficha azul, el filo superior vuelve a ser dorado. */
.producto-ficha::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--marca-acento) 0%, var(--marca-acento-claro) 22%, rgba(216,154,34,.14) 78%, transparent 100%);
}
@media (hover: hover) and (pointer: fine) {
  .producto-ficha:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -24px rgba(11,36,47,.62);
  }
}

/* --- foto --- */
.producto-ficha-foto { position: relative; }
.producto-ficha-foto img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
/* la ficha del icono monta sobre la costura foto/texto */
.producto-ficha-icono {
  position: absolute; left: 1.1rem; bottom: -21px; z-index: 2;
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--marca-acento); color: var(--accent-ink);
  box-shadow: 0 8px 18px -8px rgba(11,36,47,.7);
}
.producto-ficha-icono svg { width: 21px; height: 21px; }

/* --- texto --- */
.producto-ficha-cuerpo {
  display: flex; flex-direction: column; flex: 1;
  padding: 1.75rem 1.15rem 1.1rem;
}
.producto-ficha-kicker {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.producto-ficha h3 {
  margin-top: .5rem; font-size: 1.16rem; line-height: 1.2; color: var(--cream);
}
.producto-ficha-desc {
  margin-top: .55rem; font-size: .93rem; line-height: 1.45; color: var(--cream-2);
  flex: 1;
}
/* compacto: el botón no ocupa todo el ancho y el aviso cabe en una línea */
.producto-ficha-acciones {
  margin-top: .9rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: .5rem .6rem;
}
.producto-ficha-acciones .btn { padding: .55rem 1.05rem; font-size: .86rem; }
.producto-ficha-acciones .btn-soon {
  margin-top: 0; width: auto;
  padding: .42rem .7rem; font-size: .68rem; white-space: nowrap;
}
.producto-ficha-acciones .btn-soon svg { width: 12px; height: 12px; }

/* --- Rótulo permanente junto a SOL -----------------------------------
   El botón dorado por sí solo no dice qué hace. El texto va siempre a la
   vista, en blanco; y como los botones flotan sobre fondos muy distintos
   (foto oscura de la portada, crema de las secciones, navy del pie), el
   blanco necesita una píldora navy detrás para leerse en todos. */
/* Rótulo al costado del botón, sin recuadro. En móvil se oculta: ahí los
   tres botones son círculos y el texto no cabría. */
.sol-flotante { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.sol-flotante-texto {
  display: none;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  line-height: 1.2; text-align: right;
  color: #ffffff; max-width: 92px;
  /* sin recuadro: el contraste lo da un halo oscuro, porque el blanco solo
     desaparecería sobre el crema de las secciones */
  text-shadow:
    0 1px 2px rgba(11,36,47,.95),
    0 0 8px rgba(11,36,47,.85),
    0 0 18px rgba(11,36,47,.65);
}
/* El botón lleva su nombre escrito, y el rótulo al costado. El rótulo se
   retira en cuanto se baja de la portada: ahí la columna de contenido llega
   hasta el borde y taparía el último nodo de los esquemas y la última ficha
   de productos. Sobre la portada hay cielo de sobra. */
@media (min-width: 1024px) {
  .sol-flotante-texto { display: block; }
  .ha-bajado .sol-flotante-texto { display: none; }
  .red-flotante.is-sol { width: auto; padding: 0 1.05rem 0 .9rem; gap: .5rem; }
  .red-flotante.is-sol .red-flotante-texto {
    display: inline; max-width: none; opacity: 1; margin-left: 0;
  }
  .red-flotante.is-sol:hover { width: auto; }
}
@media (max-width: 719px) {
  .red-flotante.is-sol { width: 50px; }
}

/* La página interior no tiene portada: su contenido empieza pegado a la barra
   y llega hasta el borde, así que ahí el rótulo no cabe en ningún momento. */
.pagina-interior .sol-flotante-texto { display: none; }

/* =============================================================
   PALETA ALTERNATIVA · logo azul + verde + gris
   -------------------------------------------------------------
   Para probarla: añadir class="paleta-logo" a la etiqueta <html>
   de index.html y quienes-somos.html. Para volver al navy + dorado,
   quitar esa clase (no hay que tocar nada más).

   Va sobre <html> y no sobre <body> a propósito: --bg y compañía se
   declaran en :root, y una variable declarada ahí se resuelve con el
   valor que tiene en ESE elemento. Puesto en <body> no llegaría.

   Los tres colores están muestreados del archivo original del logo
   (Code_Generated_Image (15).png): azul #22446a del monograma, verde
   #26754b de "hybrid" y gris #6c6c6c de "system".

   El verde del flujo de energía de los esquemas NO cambia: sigue
   siendo el #5fd07a claro, más brillante que el verde de marca, para
   que en los diagramas se distinga qué es circulación de energía.
   ============================================================= */
html.paleta-logo {
  --marca-azul:          #22446a;   /* azul del monograma */
  --marca-azul-osc:      #1a3553;
  --marca-azul-mas-osc:  #13263c;
  --marca-azul-profundo: #0f1e30;
  --marca-azul-claro:    #2d5885;
  --marca-azul-elevado:  #2f5c8c;
  --marca-crema:         #f3f5f7;   /* claro frío, acompaña al verde */
  --marca-acento:        #26754b;   /* verde de "hybrid" */
  --marca-acento-claro:  #38a06a;
  --marca-gris:          #6c6c6c;   /* gris de "system" */
  --accent-ink:          #ffffff;   /* sobre verde, texto blanco */
  /* el verde del logo es oscuro: lo que va encima se invierte */
  --sobre-acento:        #ffffff;
  --sobre-acento-2:      #dbe4ec;
  --sobre-acento-3:      #ffffff;
}

/* =============================================================
   7-quaterdecies. Portada en pantallas de poco alto
   -------------------------------------------------------------
   La portada mide 100svh, pero su CONTENIDO necesitaba ~900px: en un
   monitor con la ventana en 780 (que es lo normal en un portátil, con
   la barra del navegador y la del sistema) los tres datos de abajo
   quedaban fuera y había que desplazarse para ver la portada entera.
   Aquí se comprime en dos escalones según el alto de la ventana. El
   ahorro grande está en la barra: bajar el logo del estado inicial
   reduce el hueco superior, que era lo que más pesaba.
   ============================================================= */
@media (min-width: 1024px) and (max-height: 879px) {
  .nav .brand-mark { height: 115px; }
  .hero { padding-top: 8.4rem; padding-bottom: 1.4rem; }
  .hero-title { font-size: clamp(2rem, 4.2vw, 2.9rem); margin-top: .8rem; }
  .hero-sub { margin-top: 1rem; font-size: clamp(1rem, 1.4vw, 1.1rem); }
  .hero-ctas { margin-top: 1.6rem; }
  .hero-stats { margin-top: 1.6rem; padding-top: 1.3rem; }
  .hero-stat-value { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
  .hero-stat-label { margin-top: .25rem; font-size: .78rem; }
}
@media (min-width: 1024px) and (max-height: 739px) {
  .nav .brand-mark { height: 96px; }
  .hero { padding-top: 7rem; padding-bottom: 1rem; }
  .hero-title { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
  .hero-sub { margin-top: .8rem; font-size: 1rem; max-width: 52ch; }
  .hero-ctas { margin-top: 1.2rem; }
  .hero-stats { margin-top: 1.2rem; padding-top: 1rem; }
}


/* =============================================================
   Sistemas — mapas del circuito sobre foto real
   -------------------------------------------------------------
   Tres casos en fila, cada uno con su foto y su circuito encima:
     On-Grid  -> una casa
     Off-Grid -> una nave industrial
     Hibrido  -> una estacion de servicio
   Al senalar uno, su columna se ensancha y aparecen los rotulos.
   Los otros dos se encogen pero siguen a la vista.

   Como se ensancha, que no es un capricho de implementacion:
   se anima grid-template-columns, no un transform: scale. Con
   scale la foto se ampliaria pixelada y los rotulos, que son HTML
   con cuerpo de letra fijo, se deformarian. Cambiando el ancho de
   la columna la foto se recalcula limpia, el SVG del circuito
   comparte viewBox con ella y las chinchetas van por porcentaje,
   asi que todo sigue cuadrando solo.

   Sustituye a las fichas grises con esquema abstracto; el diseno
   anterior queda en archivo/sistemas-fichas-grises/.
   ============================================================= */

#sistemas {
  --oro-mapa: #f6c451;
  /* La energia circula en cian electrico, no en el dorado de la marca.
     Con dorado la linea y las chinchetas eran del mismo color y el
     circuito se confundia con los equipos; el cian los separa y ademas
     se lee como electricidad. Sobre el velo oscuro de la foto da 9,2:1
     de contraste. Las chinchetas se quedan doradas: son los equipos, y
     ahi es donde va el color de marca. */
  --flujo-mapa: #00e5ff;
  /* La leyenda del pie va sobre el fondo de la seccion, no sobre la foto
     de la ficha. Con la seccion otra vez en crema necesita el cian
     oscuro: el claro —el mismo de las lineas del mapa— se desvanece
     sobre fondo claro. Las lineas SI se quedan en el cian claro, porque
     van sobre las fotos, que siguen siendo oscuras. */
  --flujo-pie: #0a707e;
  /* Cuanto se ensancha la ficha senalada, como multiplicador de su
     propio ancho. Las otras dos NO se encogen: la senalada se sale de
     su columna y se les pone encima. */
  --zoom: 1.75;
  --pin: 46px;
  --rot: .78rem;
  --rot-pad: .24rem .62rem;
  /* El fondo (verde profundo) y los tokens de texto claro los pone la
     regla 7-quinquies, que agrupa esta seccion con #productos-adicionales.
     Aqui habia un background: var(--marca-crema) que, por estar mas abajo
     con la misma especificidad, la pisaba: el texto ya era claro y el
     fondo seguia crema, asi que el titulo quedaba a 1,02:1. */
  position: relative; isolation: isolate; overflow: clip;
}

/* --- la fila de tres casos --- */
.casos { display: flex; flex-direction: column; gap: 1.6rem; }

/* --- cada caso --- */
.caso { min-width: 0; }
.caso:focus { outline: none; }
.caso:focus-visible .mapa { outline: 3px solid var(--marca-acento); outline-offset: 3px; }
.caso { cursor: pointer; }

.caso-pie { margin-top: .5rem; }
/* Solo el nombre del sistema. Antes habia debajo un titulo con el
   tipo de local ("una casa", "una estacion de servicio"): se quito
   porque la foto es un ejemplo, no el publico al que va dirigido
   cada sistema, y nombrarlo lo dejaba pareciendo una restriccion. */
.caso-nombre {
  /* Tokens, no un color fijo: la seccion paso de crema a verde profundo
     y en verde oscuro este texto quedaba a 1,78:1. */
  color: var(--cream);
  font-family: var(--display); font-weight: 600;
  font-size: 1.15rem; line-height: 1.2;
}
.caso-desc { margin-top: .2rem; font-size: .87rem; color: var(--cream-2); line-height: 1.35; }

/* ===================================================================
   Efecto de tecleado — presentación
   -------------------------------------------------------------------
   Dos capas superpuestas por cada texto:

   .tipeo-hueco  el texto completo, en transparente. NO se ve, pero
                 ocupa su sitio: es lo que impide que la ficha pegue
                 tirones mientras crece de una línea a tres. También es
                 lo que leen los lectores de pantalla.
   .tipeo-vista  encima y en absoluto, con lo que se lleva escrito.

   Las dos tienen que componer EXACTAMENTE igual —misma fuente, mismo
   interlineado, mismo ancho— o el texto bailaría al terminar de
   escribirse. Por eso la de arriba hereda todo y sólo se posiciona.
   =================================================================== */

.tipeo { position: relative; display: block; }

.tipeo-hueco {
  color: transparent;
  /* Seleccionar texto invisible confunde: la selección se hace sobre
     la capa de arriba, que es la que se ve. */
  user-select: none;
}

.tipeo-vista {
  position: absolute; inset: 0;
  color: inherit; font: inherit; line-height: inherit;
  letter-spacing: inherit; word-spacing: inherit; text-align: inherit;
  white-space: normal;
}

/* El cursor. Va como elemento aparte y no como borde del último
   carácter, para que no se mueva de sitio al saltar de línea. */
.tipeo-cursor {
  display: inline-block;
  width: .08em; height: 1em;
  margin-left: .06em;
  vertical-align: -.12em;
  background: currentColor;
  animation: tipeoParpadeo .9s steps(2, start) infinite;
}
.tipeo-cursor[hidden] { display: none; }

@keyframes tipeoParpadeo {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Quien pide menos animación no ve ni el tecleado ni el cursor: el JS
   escribe el texto de una vez y aquí se apaga el parpadeo. */
@media (prefers-reduced-motion: reduce) {
  .tipeo-cursor { animation: none; opacity: 0; }
}

/* --- la foto y su capa de dibujo --- */
.mapa {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 44px -30px rgba(11, 36, 47, .7);
  /* contenedor de consulta: el tamano de chinchetas y rotulos se decide
     por lo ancha que sea LA FOTO, no la ventana. Antes iba por @media y
     fallaba en cuanto los dos dejaban de ir de la mano: a 1366x640 la
     ventana es ancha pero la foto queda en 348 px, y los rotulos, que
     seguian en tamano grande, se pisaban. */
  container-type: inline-size;
}
.mapa img { width: 100%; height: auto; display: block; }
/* velo: las tres fotos son de atardecer y las lineas necesitan apoyo */
.mapa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,36,47,.46) 0%, rgba(11,36,47,.26) 45%, rgba(11,36,47,.44) 100%);
}
.mapa-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

/* --- lineas de energia ---
   Van en tres capas. Con una sola linea fina el circuito se perdia
   sobre la foto: segun por donde pasara caia sobre cielo claro o
   sobre sombra y desaparecia. La FUNDA oscura de debajo le da a la
   linea un borde propio que funciona sobre cualquier fondo. */
.mapa-funda {
  fill: none; stroke: rgba(6, 14, 26, .82);
  stroke-width: 16; stroke-linecap: round; stroke-linejoin: round;
}
.mapa-riel {
  fill: none; stroke: rgba(0, 229, 255, .32);
  stroke-width: 9; stroke-linecap: round;
}
.mapa-flujo {
  fill: none; stroke: var(--flujo-mapa);
  stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 22 30;
  animation: mapaFluir 1.15s linear infinite;
  filter: drop-shadow(0 0 7px rgba(0, 229, 255, .8));
}
/* con la bateria y con la red se intercambia en los dos sentidos */
.mapa-linea.is-doble .mapa-flujo { animation: mapaFluirIdaVuelta 3.8s ease-in-out infinite; }
.mapa-punta {
  fill: var(--flujo-mapa);
  stroke: rgba(6, 14, 26, .82); stroke-width: 3.5; stroke-linejoin: round;
  paint-order: stroke;
}

@keyframes mapaFluir { to { stroke-dashoffset: -52; } }
@keyframes mapaFluirIdaVuelta {
  0%, 6%    { stroke-dashoffset: 0; }
  44%, 56%  { stroke-dashoffset: -52; }
  94%, 100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-flujo { animation: none; stroke-dasharray: none; opacity: .95; }
}

/* --- chinchetas y rotulos, en HTML ---
   El punto mide exactamente lo que la chincheta y se centra en la
   coordenada; el rotulo va colgado por posicion absoluta. Antes eran
   los dos una columna flex centrada en el punto, asi que la chincheta
   quedaba desplazada media altura de rotulo (y con el rotulo al
   costado, media anchura: hasta 36 px fuera de sitio). La flecha
   apuntaba a la coordenada y el equipo estaba en otro lado. */
.mapa-punto {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--pin); height: var(--pin);
  transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
}
.mapa-pin {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11, 36, 47, .94);
  border: 2.5px solid var(--oro-mapa);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .6);
  transition: none;
}
.mapa-pin svg { width: 60%; height: 60%; color: var(--oro-mapa); }

/* De menor a mayor. Los cortes son los medidos: por debajo de 376 px de
   foto los rotulos empiezan a alcanzar la chincheta de al lado, y a
   partir de 480 caben ya a tamano completo. */
/* Por debajo de 230 px no hay forma: seis nombres no caben en esa foto
   por chicos que se pongan, y a ese cuerpo no se leerian. Se quedan las
   chinchetas solas. Es una red de seguridad; ningun escritorio normal
   deberia llegar aqui. */
@container (max-width: 229px) {
  .mapa-punto { --pin: 20px; }
  .mapa-rotulo { display: none; }
}
@container (min-width: 230px) and (max-width: 289px) {
  .mapa-punto { --pin: 22px; --rot: .46rem; --rot-pad: .06rem .26rem; }
}
@container (min-width: 290px) and (max-width: 375px) {
  .mapa-punto { --pin: 28px; --rot: .56rem; --rot-pad: .1rem .32rem; }
}
@container (min-width: 376px) {
  .mapa-punto { --pin: 36px; --rot: .68rem; --rot-pad: .16rem .44rem; }
}
@container (min-width: 480px) {
  .mapa-punto { --pin: 46px; --rot: .78rem; --rot-pad: .24rem .62rem; }
}

/* El nombre del equipo va SIEMPRE justo encima de su dibujo. Antes se
   repartian en cuatro direcciones para que no se pisaran, pero costaba
   leerlos: habia que buscar a que chincheta pertenecia cada uno. Con
   todos arriba la lectura es inmediata, y lo que se separa para que no
   choquen son los equipos, no los carteles. */
.mapa-rotulo {
  position: absolute; white-space: nowrap;
  background: rgba(11, 36, 47, .86);
  border: 1px solid rgba(246, 196, 81, .45);
  color: #f5f2e9;
  font-family: var(--display); font-weight: 600;
  font-size: var(--rot); padding: var(--rot-pad); border-radius: 999px;
  left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
}

/* --- pie: que significa cada tipo de flecha --- */
.mapa-sentidos {
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid rgba(11, 36, 47, .12);
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
}
.mapa-sentido { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--cream-2); }
.mapa-sentido svg { width: 58px; height: 16px; flex: none; }
.mapa-sentido-riel { stroke: rgba(10,112,126,.28); stroke-width: 6; stroke-linecap: round; }
.mapa-sentido-flujo { stroke: var(--flujo-pie); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 11 15; }
.mapa-sentido-punta { fill: var(--flujo-pie); }

/* =============================================================
   ESCRITORIO: los tres en fila y el senalado se ensancha
   ============================================================= */
@media (min-width: 1024px) {
  #sistemas { padding-block: 1.1rem 1.4rem; }
  #sistemas .section-head { margin-bottom: .6rem; }
  #sistemas .section-head h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin-top: .3rem; }
  #sistemas .section-head p { margin-top: .4rem; font-size: .95rem; }

  /* La ficha senalada crece SIN encoger a las otras dos y SIN taparlas.
     Las tres tienen ancho propio y la fila va centrada: al ensanchar
     una, las otras conservan su tamano y solo se corren hacia afuera.
     La fila entonces se sale del contenedor, y ahi esta el truco: se
     mete en los margenes de la pagina, que es espacio vacio.
     Antes probe otras dos maneras y las dos fallaban:
       · repartir las columnas (1fr) encogia a las vecinas hasta
         dejarlas sin sitio para sus nombres;
       · dar mas ancho que su columna a la senalada la hacia pisar la
         foto y el pie de la de al lado.
     Es ancho de verdad, no transform: scale. La foto se recalcula a su
     tamano nuevo y sale nitida; escalada saldria blanda, porque el
     navegador ampliaria el dibujo ya hecho a 395 px. */
  .casos {
    flex-direction: row; justify-content: center; align-items: flex-start;
    gap: 1rem;
    /* ancho de una ficha en reposo: el contenedor menos los dos huecos,
       entre tres */
    --w: calc((100% - 2rem) / 3);
  }
  .caso {
    position: relative;
    flex: 0 0 auto;
    /* el tope de altura limita a la FICHA, no solo a la foto: si lo
       llevaba solo la foto, la ficha crecia de ancho y la imagen se
       quedaba corta y centrada, con dos huecos vacios a los lados */
    width: min(var(--w), var(--tope));
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
  }
  /* El min() es el que impide que la fila se salga de la ventana: como
     mucho, la senalada ocupa lo que quede tras las otras dos, los huecos
     y 2,5rem de aire contra los bordes.
     Va por :hover Y por la clase .is-abierto que pone el guion: el hover
     solo cubre el raton, y en una tablet en horizontal (que entra por
     este mismo @media) no hay hover ninguno. */
  .caso:hover, .caso.is-abierto {
    width: min(
      calc(var(--w) * var(--zoom)),
      calc(100vw - 2 * var(--w) - 2rem - 2.5rem),
      var(--tope)
    );
  }

  /* TOPE DE ALTURA. El alto de la seccion lo marca la foto abierta:
     medido, hacen falta 295 px mas de cabecera, pie, leyenda, margenes
     y padding. O sea que la foto no puede pasar de (alto util - 295), y
     como es 4:3 eso son 4/3 de esa altura en ancho:
         100vh - 101 (barra fija) - 275  ->  x 4/3  ->  133.33vh - 506px, con 6 px de margen: 512
     Sin este tope la seccion se salia de pantalla en medidas muy
     comunes que no habia probado: 8 px a 1536x864 —un 1920x1080 con la
     escala de Windows al 125%— y 97 px a 1366x640. El max() es para que
     en ventanas muy bajas el calculo no se vuelva negativo, que dejaria
     la regla invalida y sin tope ninguno.
     Lo aplica la FICHA entera, no solo la foto: si lo llevaba solo la
     imagen, la ficha crecia de ancho y la foto se quedaba corta y
     centrada, dejando dos huecos vacios a los lados. */
  #sistemas { --tope: max(280px, calc(133.33vh - 512px)); }

  /* En chico los rotulos se pisarian unos con otros: solo aparecen
     cuando el caso esta abierto. Las chinchetas se quedan siempre,
     para que se vea de un vistazo cuantos equipos lleva cada sistema.
     Los nombres estan SIEMPRE a la vista, abierta o cerrada la ficha:
     antes solo salian al senalarla y la ficha en reposo era una foto
     con circulos sin explicar. Lo que cambia al abrir no es que
     aparezcan, sino que crecen junto con la chincheta. */
  .mapa-punto { transition: width .45s, height .45s; }

  .caso-nombre { font-size: 1.05rem; }
  .caso-desc { font-size: .83rem; }
  .mapa-sentidos { margin-top: .8rem; padding-top: .6rem; }
}

/* Entre 1024 y 1279 la foto cerrada baja a 298 px: ahi la chincheta
   normal se comeria el 12% del ancho y el rotulo de una alcanzaria la
   chincheta de al lado. Achicar solo la letra no bastaba (probado):
   hay que achicar tambien el circulo. */
/* portatiles bajos: se aprieta el pie, no la foto */
@media (min-width: 1024px) and (max-height: 810px) {
  /* aqui la cabecera y el pie van apretados, asi que el hueco que hay
     que reservar baja de 275 a 255 px y la foto puede ser algo mayor */
  #sistemas { --tope: max(280px, calc(133.33vh - 505px)); }
  #sistemas .section-head { margin-bottom: .6rem; }
  #sistemas .section-head h2 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
  #sistemas .section-head p { margin-top: .3rem; font-size: .87rem; }
  .caso-pie { margin-top: .5rem; }
  .caso-nombre { font-size: .97rem; }
  .caso-desc { font-size: .79rem; line-height: 1.32; }
  .mapa-sentidos { margin-top: .7rem; padding-top: .6rem; }
  .mapa-sentido { font-size: .82rem; }
  /* Al abrir una, la foto pasa de 296 a 461 px de alto y la seccion crece
     165 px. En pantallas de 768-810 px de alto eso se sale (77-95 px a
     1366x768, que es la mas apretada: solo deja 84 px de holgura), asi
     que aqui el zoom es mas suave: 1,5 en vez de 2,3. */
}

/* En ventanas estrechas la ficha crecida se saldria del ancho de la
   pagina, asi que crece algo menos. */
@media (min-width: 1024px) and (max-width: 1279px) { #sistemas { --zoom: 1.4; } }
@media (min-width: 1280px) and (max-width: 1439px) { #sistemas { --zoom: 1.6; } }

/* En movil y tablet no hace falta ninguna regla propia: los tres casos
   caen uno debajo de otro por el flex de .casos, van todos abiertos, y
   el tamano de chinchetas y rotulos lo resuelve solo la consulta de
   contenedor de mas arriba (a 333 px de foto entra el escalon chico). */

/* =============================================================
   Contacto en pantallas bajas
   -------------------------------------------------------------
   El aviso de la factura y la zona de adjunto sumaron 222px al
   formulario. Con la compresion general la seccion vuelve a entrar
   a 1440x900 y 1536x864, pero a 768 y 800 de alto seguia pasandose
   (38px a 1366x768, 12px a 1024x768). Aqui se aprieta un punto mas:
   menos aire de seccion, tarjeta menos acolchada y campos mas bajos.
   ============================================================= */
@media (min-width: 1024px) and (max-height: 900px) {
  #contacto { padding-block: 2.1rem; }
  #contacto .form-card { padding: 1.5rem; }
  #contacto .cta-form { gap: .7rem; }
  #contacto .field input, #contacto .field select { padding: 1.2rem 1rem .5rem; }
  #contacto .field textarea { min-height: 64px; padding-top: 1.35rem; }
  /* OJO: esta regla lleva #contacto, asi que por especificidad le gana a
     la que sube la etiqueta cuando el campo tiene valor. Sin repetir aqui
     el estado "subida", la etiqueta se queda a media altura y se monta
     encima de lo que el visitante escribe. */
  #contacto .field label { top: .95rem; }
  #contacto .field input:focus + label,
  #contacto .field input:not(:placeholder-shown) + label,
  #contacto .field select + label,
  #contacto .field textarea:focus + label,
  #contacto .field textarea:not(:placeholder-shown) + label { top: .35rem; }
  #contacto .form-aviso { padding: .5rem .7rem; font-size: .79rem; }
  #contacto .adjunto-zona { padding: .6rem .85rem; }
  #contacto .adjunto-texto small { font-size: .72rem; }
  #contacto .adjunto-item { padding: .38rem .5rem .38rem .65rem; font-size: .79rem; }
  #contacto .contacto-list { margin-top: 1rem; gap: .7rem; }
  #contacto .contacto-redes { margin-top: 1rem; }
  #contacto .form-note { margin-top: .6rem; }
  #contacto .contacto-calc { margin-bottom: .8rem; padding: .55rem .85rem; }
  /* En pantalla baja la banda se queda con el titular y el boton: la
     frase explicativa es lo primero que sobra cuando falta alto. */
  #contacto .contacto-calc-texto span { display: none; }
}

/* =============================================================
   Contacto — invitación a la calculadora
   -------------------------------------------------------------
   Banda ancha sobre las dos columnas del formulario. Es un enlace
   entero, no un botón dentro de una tarjeta: así toda la superficie
   es pulsable, que en móvil es la diferencia entre que se use y que
   no. Va compacta a propósito — la sección de Contacto ya venía
   justa de alto y no puede pasarse de pantalla.
   ============================================================= */
.contacto-calc {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.5rem; padding: .95rem 1.2rem;
  border-radius: 14px;
  /* OJO con los tokens: dentro de .section, --accent se vuelve el verde
     oscuro porque el fondo es claro. Usando var(--accent) aqui el boton
     salia verde oscuro con tinta oscura encima: invisible. La banda lleva
     su propio esquema oscuro, igual que hace .form-card. */
  background: linear-gradient(120deg, var(--marca-azul), var(--marca-azul-osc));
  border: 1px solid rgba(216,154,34,.42);
  color: #f5f2e9;
  transition: border-color .3s, transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.contacto-calc:hover {
  border-color: var(--marca-acento);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -18px rgba(216,154,34,.55);
}
.contacto-calc-icono {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marca-acento-claro), var(--marca-acento));
  color: var(--accent-ink);
}
.contacto-calc-icono svg { width: 22px; height: 22px; }
.contacto-calc-texto { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.contacto-calc-texto strong {
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--marca-acento-texto);
}
.contacto-calc-texto span { font-size: .86rem; line-height: 1.45; color: #cfdae2; }
/* El boton de la banda va en el dorado de SOL, igual que el de la
   portada: los dos llevan al mismo sitio y conviene que se reconozcan. */
.contacto-calc-boton {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.15rem; border-radius: 999px;
  background: linear-gradient(140deg, var(--marca-sol-claro), var(--marca-sol) 62%);
  color: var(--sol-ink);
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  white-space: nowrap;
}
.contacto-calc-boton svg { width: 16px; height: 16px; }
.contacto-calc:hover .contacto-calc-boton svg { transform: translateX(3px); transition: transform .3s var(--ease-soft); }

/* En estrecho el botón baja y la banda se apila. */
@media (max-width: 767px) {
  .contacto-calc { flex-wrap: wrap; gap: .8rem; }
  .contacto-calc-boton { margin-left: 0; width: 100%; justify-content: center; }
}

/* =============================================================
   Contacto en pantallas de 768 px de alto
   -------------------------------------------------------------
   La banda de la calculadora cuesta unos 78 px y en estas medidas
   —1366x768 y 1024x768, muy comunes en portatiles— la sección se
   pasaba por 7 y 28 px. Se recorta el aire que queda, sin tocar el
   tamaño de los campos: lo que se aprieta es el hueco entre ellos.
   ============================================================= */
@media (min-width: 1024px) and (max-height: 800px) {
  #contacto { padding-block: 1.7rem; }
  #contacto .cta-form { gap: .55rem; }
  #contacto .field textarea { min-height: 54px; }
  #contacto .contacto-list { margin-top: .8rem; gap: .55rem; }
  #contacto .contacto-redes { margin-top: .8rem; }
  #contacto .contacto-calc { margin-bottom: .65rem; }
  #contacto .form-aviso { padding: .45rem .65rem; font-size: .77rem; }
  #contacto .form-note { margin-top: .5rem; font-size: .76rem; }
}

/* =============================================================
   Área de texto: el rótulo flotante no debe pisar el contenido
   -------------------------------------------------------------
   Cuando el campo llega relleno desde la calculadora, el rótulo ya
   está arriba y el texto empieza justo debajo. En pantallas
   estrechas ese rótulo puede envolver a dos líneas y montarse sobre
   la primera línea del mensaje, que es exactamente lo que pasaba.
   Se le deja sitio suficiente y se le impide crecer a lo ancho más
   de lo que hay.
   ============================================================= */
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  right: 1rem;
  line-height: 1.25;
}
@media (max-width: 559px) {
  .field textarea { padding-top: 2.1rem; }
}
/* ============================================================================
   Sin efectos
   ----------------------------------------------------------------------------
   Se quitan los adornos: el barrido de luz del logotipo, el balanceo del
   icono, el halo, las sombras de la marca, el fondo animado y las entradas
   al hacer scroll.

   Lo que NO se quita: los cambios de color al pasar el raton y el foco del
   teclado. Eso no es adorno, es lo que le dice al visitante que algo se
   puede pulsar.

   El navegador ya trae una forma de pedir esto —prefers-reduced-motion— y el
   sitio la respeta; esto es lo mismo pero para todo el mundo.
   ========================================================================== */

/* --- el logotipo, liso ---------------------------------------------------- */
.brand-icon-wrap::after,
.brand-word-wrap::after { display: none !important; }

.brand-mark,
body:not(.pagina-interior) .nav:not(.is-scrolled) .brand-mark,
.footer-brand .brand-mark {
  animation: none !important;
}
/* Sin realce ni sombra: el logotipo plano se defiende solo. */
.brand-mark,
body:not(.pagina-interior) .nav:not(.is-scrolled) .brand-mark { filter: none !important; }
/* El pie paso a claro, asi que el logotipo va con sus colores propios.
   Mientras el pie fue verde oscuro hacia falta pasarlo a blanco; si algun
   dia vuelve a oscurecerse, hay que devolver ese filtro. */
.footer-brand .brand-mark { filter: none !important; }

/* El velo detras de la marca NO se quita: no es adorno, es contraste.
   Sobre el cielo del atardecer el verde del logo se pelea con el fondo;
   aclarar esa zona es lo que lo hace legible. Va mas fuerte que en la
   version navy porque este verde es mas oscuro y necesita mas separacion.
   Lo que si se quito es su transicion: aparece y punto, no se enciende. */
/* LUZ PAREJA (16/09/2026). Antes el velo era un foco: muy claro en el
   centro y cada vez mas tenue hacia los bordes, asi que el monograma y el
   principio de las palabras quedaban sobre claro y el final de "hybrid" y
   de "system" sobre el cielo oscuro; la marca se veia con dos luces. Ahora
   el velo es una MESETA: la misma opacidad sobre todo el rectangulo del
   logotipo, y solo se desvanece fuera de el. Con este inset la esquina
   del logotipo cae al 82 % del radio de la elipse, y la meseta llega al
   84 %. */
body:not(.pagina-interior) .nav:not(.is-scrolled) .brand::before {
  display: block !important;
  inset: -45% -30%;
  /* Con la foto espejada la marca cae sobre los arboles, la zona mas
     oscura. El dorado de "system" tiene una luminancia media (0,37): sobre
     un gris medio desaparece, y el azul, sobre oscuro. Lo unico que sirve a
     los dos es un fondo CLARO, como el papel para el que se dibujo el
     logotipo; por eso el velo sube a .80. Para que no parezca una mancha
     blanca va en un tono calido de cielo de atardecer y con un borde largo
     y muy difuminado. (A .60 sobre los arboles quedaba gris medio: el
     dorado se confundia con el fondo.) */
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(252, 244, 228, .80) 0%,
    rgba(252, 244, 228, .80) 74%,
    rgba(250, 240, 222, .45) 86%,
    rgba(248, 236, 216, .14) 95%,
    transparent 100%);
  filter: blur(40px);
  transition: none !important;
}

.brand-icon { animation: none !important; transform: none !important; }

/* --- fondos y entradas ---------------------------------------------------- */
/* Los degradados que se movian solos de fondo. OJO con los nombres: el
   del hero es .hero-mesh, no .section-mesh; buscarlos por el nombre que
   uno supone deja la mitad andando. */
.hero-mesh,
.section-halo::before,
.section-mesh::before,
.section-mesh::after { animation: none !important; }

/* La pantalla de carga esta oculta, pero su animacion seguia declarada. */
.splash, .splash-mark { animation: none !important; }

/* Todo aparece ya puesto, sin deslizarse al hacer scroll. */
[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  clip-path: none !important;
}

/* La pantalla de carga se va de inmediato. */
.splash { display: none !important; }

/* --- inclinaciones y levantamientos --------------------------------------- */
/* El tilt de las tarjetas y el iman de los botones los aplica el JS con
   transform en linea; aqui se anulan. */
[data-tilt],
[data-magnetic] { transform: none !important; }

/* Nada se levanta, se agranda ni se desliza al pasar por encima. Buscados
   uno a uno en la hoja: quedarse con la lista de memoria habria dejado
   fuera la mitad. */
.card:hover,
.producto-ficha:hover,
.btn:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-red:hover,
.ai-modal-form button:hover,
.ai-modal-cta:hover,
.contacto-calc:hover,
.red-flotante:hover,
.red-flotante:focus-visible { transform: none !important; }
.contacto-calc:hover .contacto-calc-boton svg { transform: none !important; }
/* El subrayado que crecia solo bajo los enlaces del menu. */
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1) !important; transition: none !important; }

/* --- lo que se conserva ---------------------------------------------------
   Las lineas de energia de los esquemas de Sistemas SIGUEN animadas: ahi el
   movimiento no decora, explica hacia donde va la corriente. Quitarlo seria
   quitar informacion, no un efecto. */