/* ============================================================
   RAYO · SISTEMA "CAMPO"
   La capa de página que sale de la dirección C (kora/powder).
   Se monta sobre tokens.css y no define ni un color a mano:
   todo sale de la marca activa.

   Piezas:
     .marco        el sitio flotando en su rectángulo redondeado
     .pastilla     barra y píldoras flotantes
     .accion       botones en píldora
     .imagen       el generador de campos de color (las "fotos")
     .cinta        el texto que corre
     .comparacion  antes / después
     .bloque       sección de servicio con imagen
     .cifras       datos grandes
     .cierre       llamada final sobre campo
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--suelo);color:var(--ink);font-family:var(--font-text);
     font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;padding:9px}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:99px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   PALETAS DE IMAGEN
   Cuatro tonos por marca. Son los únicos colores que existen
   fuera de tokens.css, porque una imagen necesita más rango
   cromático del que da una paleta de interfaz.
   ============================================================ */
[data-brand="studio"]{
  --suelo:#E8E6E2;
  --tono-1:#C9BCF5; --tono-2:#F0C9A8; --tono-3:#8E79D6; --tono-4:#453873;
}
[data-brand="lab"]{
  --suelo:#E6E8E3;
  --tono-1:#BFD4C8; --tono-2:#E8DCC0; --tono-3:#7FA098; --tono-4:#33443F;
}
[data-brand="nose"]{
  --suelo:#E5E9E4;
  --tono-1:#A8D8B4; --tono-2:#F2E2BC; --tono-3:#5FA872; --tono-4:#25482F;
}

/* ---------- estructura ---------- */
.marco{background:var(--bg);border-radius:26px;overflow:clip;position:relative}
.ancho{max-width:1180px;margin:0 auto;padding-inline:38px}
.seccion{padding-block:clamp(64px,8vw,116px)}
.seccion.corta{padding-block:clamp(44px,5vw,72px)}
@media (max-width:640px){
  body{padding:5px} .marco{border-radius:18px} .ancho{padding-inline:22px}
}

/* ---------- tipografía de página ---------- */
.rotulo{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:14px}
.titulo{font-size:clamp(29px,3.8vw,50px);font-weight:600;letter-spacing:-.04em;
        line-height:1.06;text-wrap:balance;max-width:19ch}
.entrada{font-size:clamp(16px,1.4vw,18px);color:var(--muted);max-width:46ch;margin-top:16px}

/* ============================================================
   IMAGEN · el campo de color
   Manchas muy desenfocadas + grano. Cada composición coloca los
   focos distinto, para que dos imágenes seguidas no se repitan.
   ============================================================ */
.imagen{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;
        background:var(--img-4);
        --img-1:var(--tono-1); --img-2:var(--tono-2);
        --img-3:var(--tono-3); --img-4:var(--tono-4)}
/* Rotar la paleta hace que dos imágenes seguidas no se parezcan aunque
   compartan los mismos cuatro tonos. Sin esto, todas salían iguales. */
.imagen.p2{--img-1:var(--tono-2); --img-2:var(--tono-3);
           --img-3:var(--tono-1); --img-4:var(--tono-4)}
.imagen.p3{--img-1:var(--tono-3); --img-2:var(--tono-1);
           --img-3:var(--tono-2); --img-4:var(--tono-4)}
.imagen.p4{--img-1:var(--tono-2); --img-2:var(--tono-1);
           --img-3:var(--tono-4); --img-4:var(--tono-3)}
.imagen::before{content:"";position:absolute;inset:-18%;z-index:0;
  filter:blur(60px) saturate(1.2)}
.imagen::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.1;mix-blend-mode:overlay}
.imagen > *{position:relative;z-index:2}

/* a · diagonal, de arriba-izquierda a abajo-derecha */
.imagen.a::before{background:
  radial-gradient(38% 46% at 22% 26%, var(--img-1) 0%, transparent 62%),
  radial-gradient(44% 48% at 76% 30%, var(--img-2) 0%, transparent 60%),
  radial-gradient(48% 54% at 62% 78%, var(--img-3) 0%, transparent 64%),
  linear-gradient(146deg, var(--img-4) 0%, var(--img-3) 58%, var(--img-1) 100%)}
/* b · floración centrada */
.imagen.b::before{background:
  radial-gradient(44% 46% at 50% 44%, var(--img-2) 0%, transparent 58%),
  radial-gradient(56% 58% at 50% 52%, var(--img-1) 0%, transparent 66%),
  radial-gradient(40% 40% at 26% 74%, var(--img-3) 0%, transparent 60%),
  linear-gradient(180deg, var(--img-3) 0%, var(--img-4) 100%)}
/* c · horizonte, luz arriba */
.imagen.c::before{background:
  radial-gradient(70% 40% at 50% 8%, var(--img-2) 0%, transparent 62%),
  radial-gradient(50% 36% at 22% 40%, var(--img-1) 0%, transparent 60%),
  linear-gradient(180deg, var(--img-1) 0%, var(--img-3) 46%, var(--img-4) 100%)}
/* d · destello en una esquina */
.imagen.d::before{background:
  radial-gradient(52% 56% at 86% 18%, var(--img-2) 0%, transparent 62%),
  radial-gradient(46% 50% at 18% 68%, var(--img-1) 0%, transparent 60%),
  linear-gradient(120deg, var(--img-4) 0%, var(--img-3) 100%)}
/* e · dos aguas */
.imagen.e::before{background:
  radial-gradient(50% 60% at 12% 30%, var(--img-1) 0%, transparent 58%),
  radial-gradient(50% 60% at 88% 70%, var(--img-2) 0%, transparent 58%),
  linear-gradient(90deg, var(--img-3) 0%, var(--img-4) 100%)}
/* f · niebla baja */
.imagen.f::before{background:
  radial-gradient(60% 44% at 50% 96%, var(--img-1) 0%, transparent 64%),
  radial-gradient(40% 34% at 76% 24%, var(--img-2) 0%, transparent 58%),
  linear-gradient(180deg, var(--img-4) 0%, var(--img-3) 100%)}

/* ------------------------------------------------------------
   FOTO GENERADA
   Reemplaza al campo CSS donde importa (heros y bloques grandes).
   Sale de `generar_heros.py`, que captura el algoritmo p5 de
   `pruebas/algorithmic-art/`. El campo CSS se queda para piezas
   pequeñas, donde una foto no aporta y sí pesa.
   ------------------------------------------------------------ */
.imagen.foto::before{
  background-size:cover;background-position:center;filter:none;inset:0}
[data-brand="studio"] .imagen.foto::before{background-image:url("imagenes/hero-studio.jpg")}
[data-brand="lab"]    .imagen.foto::before{background-image:url("imagenes/hero-lab.jpg")}
[data-brand="nose"]   .imagen.foto::before{background-image:url("imagenes/hero-nose.jpg")}
/* La foto ya trae su propio grano: no hace falta la capa de encima. */
.imagen.foto::after{background-image:none}
/* Velo de legibilidad. Antes se volvía transparente entre el 34% y el 56%, y
   ahí es justo donde cae el titular: medido daba 1.40 sobre un mínimo de 3.
   Ahora es continuo y pesa más abajo, que es donde vive el texto del hero. */
.imagen.foto.legible::after{background-image:none;
  background:linear-gradient(to bottom,
    rgba(18,14,32,.46) 0%,
    rgba(18,14,32,.28) 24%,
    rgba(18,14,32,.52) 46%,
    rgba(18,14,32,.72) 72%,
    rgba(18,14,32,.82) 100%);opacity:1;mix-blend-mode:normal}

/* El bloque de cierre lleva encima titular, texto y formulario, así que
   necesita su propio velo: sin él el degradado clarea por la izquierda. */
.imagen.cierre::after{background-image:none;
  background:linear-gradient(105deg, rgba(18,14,32,.52) 0%,
             rgba(18,14,32,.30) 46%, rgba(18,14,32,.42) 100%);
  opacity:1;mix-blend-mode:normal}

/* El hero respira muy despacio; el resto de imágenes se queda quieto. */
.imagen.viva::before{animation:respirar 30s ease-in-out infinite alternate}
@keyframes respirar{
  from{transform:scale(1)} to{transform:scale(1.08) translate3d(-2%,-1%,0)}
}
/* Oscurece arriba y abajo para que el texto blanco siempre se lea. */
.imagen.legible::after{background-image:var(--grain),
  linear-gradient(to bottom, rgba(18,14,32,.38) 0%, transparent 32%,
                  transparent 58%, rgba(18,14,32,.46) 100%);
  opacity:1;mix-blend-mode:normal}

/* ---------- barra ---------- */
.barra{position:absolute;top:22px;left:0;right:0;z-index:30;
       display:flex;justify-content:space-between;align-items:center;
       gap:16px;padding-inline:26px}
.pastilla{background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
          border-radius:99px;display:flex;align-items:center;
          padding:9px 10px 9px 18px;gap:26px;
          box-shadow:0 2px 14px rgba(20,16,30,.07)}
.pastilla .marca{display:flex;align-items:center;gap:8px;font-weight:600;
                 font-size:17px;letter-spacing:-.03em;color:var(--ink)}
/* El wordmark en su propio span: el gap del flex partiría la palabra. */
.pastilla .marca .wm{white-space:nowrap}
.pastilla .marca i{font-style:italic}
.pastilla .marca .verde{color:var(--brand-green,#43A05E)}
.pastilla nav{display:flex;gap:24px;padding-right:8px}
.pastilla nav a{font-size:14px;color:var(--ink);opacity:.72;transition:opacity .2s}
.pagina-interior .pastilla{gap:22px}
.pagina-interior .pastilla nav{gap:17px}
.pagina-interior .pastilla nav a{font-size:13px}
.pastilla nav a:hover{opacity:1}
.cta-barra{background:var(--accent);color:var(--on-accent);border-radius:99px;
           display:flex;align-items:center;gap:12px;padding:11px 22px;
           font-size:14px;font-weight:600;white-space:nowrap;transition:background .22s var(--ease)}
.cta-barra:hover{background:var(--accent-texto,var(--accent))}
/* el circulito del CTA se retira: los botones van limpios, sin punto */
.cta-barra .ficha{display:none}

/* ---------- menú móvil ----------
   Por debajo de 900px los enlaces de la pastilla no caben. Antes simplemente
   se ocultaban y la página se quedaba SIN navegación, que es de donde llega
   casi todo el tráfico. */
/* Fijo y por encima del panel: así sirve también para cerrarlo. Vive fuera
   de .marco porque .marco tiene overflow:clip y atrapa lo que lleve dentro. */
.menu-btn{display:none;position:fixed;top:22px;right:26px;z-index:50;
  width:44px;height:44px;border-radius:99px;
  /* flex-direction:column es obligatorio: sin él las tres barras se ponen en
     fila y el icono sale como tres rayas sueltas de lado. */
  flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);box-shadow:0 2px 14px rgba(20,16,30,.07);
  border:0;cursor:pointer;color:var(--ink);padding:0}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.menu-btn span{display:block;width:17px;height:1.6px;background:currentColor;
  border-radius:2px;transition:transform .28s var(--ease), opacity .18s}
.menu-btn span + span{margin-top:4.5px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}

/* Hoja que sube desde abajo. Se eligió esta y no un panel a pantalla completa
   porque los enlaces quedan donde llega el pulgar: quien viene de un reel
   sostiene el teléfono con una mano. Y al ver el fondo atenuado nunca se
   pierde de dónde venía. */
.velo-menu{position:fixed;inset:0;z-index:39;background:rgba(18,26,20,.5);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s}
.velo-menu.abierto{opacity:1;visibility:visible}

.panel-menu{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--bg);border-radius:26px 26px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  transform:translateY(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.32,.72,0,1), visibility .34s}
.panel-menu.abierto{transform:none;visibility:visible}
/* El asa: dice "esto sube y baja" sin necesidad de explicarlo */
.panel-menu::before{content:"";display:block;width:38px;height:4px;
  border-radius:99px;background:var(--line);margin:4px auto 14px}
.panel-menu a{font-size:17px;font-weight:500;color:var(--ink);
  padding:15px 4px;border-bottom:1px solid var(--line)}
.panel-menu .cta-panel{background:var(--ink);color:var(--bg);
  border-radius:99px;text-align:center;padding:16px;font-size:15px;
  font-weight:500;border-bottom:0;margin-top:16px}
/* Con el panel abierto la página de detrás no debe poder moverse */
body.menu-abierto{overflow:hidden}

@media (max-width:900px){
  .pastilla nav{display:none}
  .menu-btn{display:flex}
  /* El texto del CTA no cabe: en móvil se queda solo la hamburguesa y el
     botón vive dentro del panel. */
  .barra > .cta-barra{display:none}
  /* Sin el CTA, la pastilla ocuparía todo el ancho y quedaría bajo el botón */
  .barra{padding-right:80px}
}
@media (prefers-reduced-motion:reduce){
  .panel-menu,.menu-btn span{transition:none}
}

/* ---------- foco visible ----------
   Quien navega con teclado tiene que ver dónde está. Sin esto el foco existe
   pero es invisible, y la página se vuelve imposible de recorrer sin ratón. */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
/* Sobre imagen el acento verde no se ve: ahí el foco va en blanco. */
.imagen a:focus-visible, .imagen button:focus-visible,
.cierre a:focus-visible, .cierre button:focus-visible, .cierre input:focus-visible{
  outline-color:#fff}
/* Los botones en píldora conservan su forma al recibir foco */
.accion:focus-visible, .cta-barra:focus-visible,
.cta-panel:focus-visible{border-radius:99px}

/* ---------- acciones ---------- */
.accion{display:inline-flex;align-items:center;gap:11px;border-radius:99px;
        padding:12px 15px 12px 22px;font-size:15px;font-weight:500;
        transition:background .22s var(--ease)}
/* el puntito de los botones se retira a pedido: botones limpios */
.accion .punto{display:none}
.accion{padding:12px 22px}
.accion.clara{background:#fff;color:var(--ink)}
.accion.clara:hover{background:color-mix(in srgb, var(--img-1) 26%, #fff)}
/* Primario de marca: verde claro (no oscuro), texto blanco */
.accion.tinta{background:var(--accent);color:var(--on-accent)}
.accion.tinta:hover{background:var(--accent-texto,var(--accent))}
/* Cristal OSCURO, no claro. Con blanco translúcido el texto blanco daba 1.00
   sobre las zonas claras del degradado: literalmente invisible. Oscuro
   garantiza el contraste caiga donde caiga el botón.
   OJO: .vidrio es SOLO para ir encima de una imagen. Sobre fondo claro
   se usa .contorno. */
.accion.vidrio{background:rgba(18,14,32,.42);color:#fff;
               backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.30)}
.accion.vidrio:hover{background:rgba(18,14,32,.56)}

/* Secundario para fondo claro. Faltaba en el sistema, y por eso se acabó
   usando .vidrio sobre blanco, donde no contrasta. */
.accion.contorno{background:transparent;color:var(--ink);
                 border:1px solid var(--line)}
.accion.contorno:hover{background:var(--surface);border-color:var(--accent)}
.accion.contorno .punto{background:var(--accent);opacity:1}
.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- hero ---------- */
.hero{min-height:min(92vh,860px);display:flex;align-items:flex-end;border-radius:0}
.hero .dentro{width:100%;padding-block:min(24vh,210px) 44px}
.hero h1{color:#fff;font-size:clamp(38px,5.2vw,74px);font-weight:600;
         letter-spacing:-.042em;line-height:1.03;text-wrap:balance;max-width:15ch;
         margin-bottom:18px}
.hero .bajada{color:rgba(255,255,255,.84);font-size:clamp(16px,1.5vw,19px);
              max-width:36ch;margin-bottom:28px}

.prueba{display:flex;align-items:center;gap:14px;color:#fff;margin-top:48px}
.caras{display:flex}
.caras span{width:36px;height:36px;border-radius:99px;border:2px solid rgba(255,255,255,.85);
  margin-left:-11px;display:grid;place-items:center;font-size:12px;font-weight:600;
  color:var(--img-4);background:color-mix(in srgb, var(--img-1) 70%, #fff)}
.caras span:first-child{margin-left:0}
.prueba .texto{font-size:14px;opacity:.9}

/* ---------- cinta ---------- */
.cinta{background:var(--ink);color:var(--bg);padding-block:20px;overflow:hidden;
       display:flex;white-space:nowrap}
.cinta div{display:flex;gap:52px;padding-right:52px;
           animation:correr 36s linear infinite;flex:none}
.cinta span{font-size:clamp(18px,2vw,27px);font-weight:500;letter-spacing:-.028em}
.cinta em{font-style:italic;opacity:.5}
@keyframes correr{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* ---------- antes / después ---------- */
.comparacion{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px}
.lado{border-radius:22px;padding:30px}
.lado.antes{background:var(--surface)}
.lado.despues{background:var(--ink);color:var(--bg)}
.lado h3{font-size:13px;font-weight:600;margin-bottom:20px;opacity:.6}
.lado ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.lado li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.lado li::before{content:"";width:7px;height:7px;border-radius:99px;flex:none;margin-top:9px}
.lado.antes li::before{background:var(--soft)}
.lado.antes li{color:var(--muted)}
.lado.despues li::before{background:var(--img-1)}
@media (max-width:760px){ .comparacion{grid-template-columns:1fr} }

/* ---------- bloque de servicio ---------- */
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);
        align-items:center;padding-block:clamp(34px,4.4vw,58px)}
.bloque + .bloque{border-top:1px solid var(--line)}
.bloque.invertido .texto{order:2}
.bloque .arte{aspect-ratio:4/3;border-radius:20px}
/* 12px con letter-spacing amplio se lee mal en un teléfono. En móvil sube a
   13px y afloja el espaciado, que es donde de verdad cuesta leerlo. */
.bloque .num{font-family:var(--font-text);font-size:13px;font-weight:600;color:var(--accent-texto,var(--accent));
             text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:12px}
@media (min-width:901px){ .bloque .num{font-size:12px;letter-spacing:.12em} }
.bloque h3{font-size:clamp(24px,2.7vw,35px);font-weight:600;
           letter-spacing:-.036em;line-height:1.09;margin-bottom:14px}
.bloque p{font-size:16px;color:var(--muted);max-width:40ch}
.bloque ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.bloque li{font-size:13px;color:var(--muted);background:var(--surface);
           border:1px solid var(--line);border-radius:99px;padding:6px 13px}
@media (max-width:860px){
  .bloque{grid-template-columns:1fr;gap:24px}
  .bloque.invertido .texto{order:0}
}

/* ---------- cifras ---------- */
.cifras{background:var(--surface);border-radius:24px;padding:clamp(30px,4vw,52px);
        display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px}
.cifra b{display:block;font-size:clamp(32px,4vw,52px);font-weight:600;
         letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.cifra span{display:block;font-size:14px;color:var(--muted);margin-top:10px;max-width:20ch}

/* ---------- cita ---------- */
.cita{max-width:34ch;margin:0 auto;text-align:center}
.cita p{font-size:clamp(20px,2.4vw,30px);line-height:1.32;letter-spacing:-.028em;
        text-wrap:balance;margin-bottom:16px}
.cita cite{font-size:14px;color:var(--muted);font-style:normal}

/* ---------- cierre ---------- */
.cierre{padding:clamp(50px,7vw,96px) clamp(26px,5vw,60px);text-align:center;
        color:#fff;border-radius:26px}
.cierre h2{font-size:clamp(27px,4vw,52px);font-weight:600;letter-spacing:-.04em;
           line-height:1.07;text-wrap:balance;max-width:18ch;margin:0 auto 16px}
.cierre p{color:rgba(255,255,255,.84);max-width:42ch;margin:0 auto 28px}

/* ---------- pie ---------- */
.pie{padding-block:40px;border-top:1px solid var(--line);
     display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
     font-size:14px;color:var(--muted)}
/* Los enlaces del pie medían 22px de alto: imposibles de acertar con el dedo.
   El padding vertical los lleva a 44px sin cambiar cómo se ven. */
.pie a{display:inline-flex;align-items:center;min-height:44px;padding-block:4px}
.pie a:hover{color:var(--ink)}

/* ---------- revelado ---------- */
.revelar{opacity:0;transform:translateY(18px);
         transition:opacity .7s var(--ease), transform .7s var(--ease)}
.revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .revelar{opacity:1;transform:none} }