/* Santo y Seña home v6 (Emilio, 2026-10-13): hero de madeinhaus con la letra de extrafazant, equipo (madeinhaus), sectores (extrafazant),
   franjas (serious.business), "Contra la mala publicidad" (springsummer sobre el fondo de Paradigm) y la ilustracion con el pie de
   Paradigm. Menu de WHP como en la v5. Rutas url() relativas a este archivo (home/v6/). Ver docs/SPEC_V6.md. */

/* ------------------------------------------------------------------ color de la pagina (lo mueve el hero, como en madeinhaus.com) */
html{--page-background-color:#f3f3ef;--page-background-color-transition-time:1s}
/* ------------------------------------------------------------------ paleta de la casa: Papel picado (Emilio, 2026-10-23) */
/* Seis colores parejos (rosa, amarillo, cerillo, verde, azul, lila) + tinta para toda la letra, crema para la letra sobre azul y tinta,
   y hueso como claro de sectores, franjas, contacto y articulos (Emilio eligio hueso sobre crema y lila palido). Regla: cada pantalla un
   color de la tira y nunca el mismo que la de arriba. Los modulos usan var(--sys-*, <valor>) con el mismo valor de respaldo para que sus
   test.html aislados (sin esta hoja) se vean igual. La computadora (neutomni) y el manifiesto se quedan como estaban, por pedido de Emilio. */
html{--sys-rosa:#FF0083;--sys-amarillo:#FFD36A;--sys-cerillo:#F54302;--sys-verde:#0BA13B;--sys-azul:#0038FF;--sys-lila:#B9B2FD;--sys-tinta:#131901;--sys-crema:#FDF5E9;--sys-hueso:#F3F3EF}
html body{background-color:var(--page-background-color);transition:background-color var(--page-background-color-transition-time) ease-in-out}

/* ------------------------------------------------------------------ menu (WHP), como en la v5 */
#sec-whp{--background:#131901;--foreground:#FDF5E9;--color-black:#131901;--color-white:#FDF5E9}
#sec-whp [style*="conic-gradient(rgb(77, 166, 253)"]{background:conic-gradient(#FF0083,#FFD36A,#FF0083)!important}
#sec-whp .bg-foreground{background-color:#f3f3ef}
#sec-whp .bottom-fade{display:none}
#sec-whp .menu-bar-colors.bg-black\/10:not(.footer-active){background-color:rgb(19 25 1 / .86)}

/* ------------------------------------------------------------------ Paradigm: sin line-up y sin la tarjeta gris de la v5 */
/* El line-up de nombres no entra (Emilio, tira del 2026-10-13): queda la ilustracion y el pie. La seccion de springsummer de arriba
   pinta el mismo fondo (textura + degradado) y home/v6/efectos.js lo empalma pixel a pixel. Colores originales de Paradigm. */
#sec-paradigm .section_line-up1{display:none}
#sec-paradigm{background:#131901}

/* ------------------------------------------------------------------ pie del hero: la frase va arriba de la barra del menu */
/* En Haus el pie es un renglon pegado abajo; aqui la frase de Anomaly ocupa dos renglones y la barra del menu de WHP (48px + 32px
   de margen, centrada) la tapaba. La frase sube 84px; el @ y el lugar se quedan en las esquinas, donde la barra no llega. */
#sec-haus-hero .HeroFootnote_tagline{margin-bottom:84px;max-width:min(100%, 760px)}

/* ------------------------------------------------------------------ aire entre la seccion roja y la figura de Paradigm */
/* En springsummer el bloque termina y sigue su pie con su propio margen; aqui lo que sigue es la figura flotando de Paradigm y
   quedaba pegada a la liga "¿Te late? sigue leyendo" (Emilio, 2026-10-13). Mismo aire que arriba del titulo (7.5rem del sitio). */
#sec-springsummer-lfi .ss-page{padding-bottom:calc(7.5 * var(--ss-rem))}
@media (max-width:899px){#sec-springsummer-lfi .ss-page{padding-bottom:calc(5 * var(--ss-rem))}}

/* ------------------------------------------------------------------ credito de Tersefy al final del pie (Emilio, 2026-10-19) */
/* "hay que poner lo de tersefy hasta abajo con el logo y todo como en vida, con link a tersefy": mismos numeros que el pie de
   vidawellnessandbeauty.com (bloque centrado con linea arriba al 8 %, logo blanco de 20 px al 40 %, texto de 11 px al 35 % con
   .05em de espaciado); el marcado lo inserta build_v6.py en home/v6/secciones/paradigm/section.html. */
#sec-paradigm .tersefy-credit{text-align:center;padding:20px 0 92px;border-top:1px solid rgba(255,255,255,.08);margin-top:20px}   /* abajo 92 px en vez de los 10 de VIDA: la pastilla fija del menu (48 px, a 32 del borde) tapaba el renglon al llegar al final */
#sec-paradigm .tersefy-credit a{text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:inherit}
#sec-paradigm .tersefy-credit img{height:20px;width:auto;opacity:.4;display:block}
#sec-paradigm .tersefy-credit span{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.05em;line-height:1}

/* ------------------------------------------------------------------ boton "Menu" fuera durante la computadora (Emilio, 2026-10-16) */
/* "justo despues de esa seccion que el boton del menu se vaya, y regresa hasta que salgamos de la tele justo en la siguiente seccion,
   para que la experiencia sea totalmente inmersiva". home/v6/efectos.js (menuInmersivo()) pone .menu-oculto en la pastilla del menu
   de WHP mientras la seccion de la computadora ocupa la pantalla (de que su tope llega arriba hasta que su final llega abajo); la
   pastilla baja 6 rem y se desvanece en 0.35 s, y vuelve igual. Con !important porque WHP escribe opacidades en linea.
   2026-10-20 (noche): la misma clase se pone mientras el pie de neutomni (#sec-neutomni-pie) esta en pantalla, para que la pastilla
   no quede encima del logotipo al llegar al final (misma funcion, segunda zona; las reglas de aqui no cambian). */
#sec-whp .menu-bar-colors.fixed{transition:opacity .35s ease,margin-bottom .35s ease,background-color .3s ease,visibility 0s linear 0s}
#sec-whp .menu-bar-colors.fixed.menu-oculto{opacity:0 !important;visibility:hidden;margin-bottom:-6rem !important;pointer-events:none;transition:opacity .35s ease,margin-bottom .35s ease,background-color .3s ease,visibility 0s linear .35s}

/* ------------------------------------------------------------------ tele vieja (CRT) de thedesignsociety.fr, SOLO dentro del monitor */
/* Emilio, 2026-10-15: "aplicalo a nuestro home para ver como se ve" y 2026-10-16: "si quiero el efecto desde el inicio, desde el
   hero vaya, y solamente se quita hasta el zoom out de la tele, el efecto se queda en la tele". Las 5 capas (grano, scanlines,
   reflejo, vignette, bisel) y el filtro de aberracion son los de referencias/thedesignsociety/crt.css con los mismos numeros, en
   dos copias que monta home/v6/efectos.js (crt()): .crt-page, fija sobre toda la pagina desde el hero hasta que el monitor de la
   seccion de la computadora empieza a alejarse (80 % de su recorrido), y .crt-screen, hija de .external_ps_wrap y colocada sobre
   el cristal medido en la imagen del monitor (no sobre la caja del escritorio, que solo cubre los dos tercios de abajo del
   cristal), encima de las ventanas y sin recibir clics, que se enciende en ese relevo y viaja con la tele. Mas abajo de ahi la
   web queda limpia. Las rayas del cristal se compensan con la escala (--crt-s) para no hacer moire al encoger. Para quitarlo:
   borrar este bloque y crt() de efectos.js. */
:root {
    --crt-scanline-opacity: 0.18;     /* visibilidad de las rayas (mas alto = mas marcado) */
    --crt-scanline-spacing: 3px;      /* separacion de las rayas (2px = muy denso, 4px = aireado) */
    --crt-aberration: 0.8;            /* desfase RGB en px (0 = nada, 1.5 = muy visible); el valor real esta en el filtro SVG */
    --crt-vignette-strength: 0.35;    /* oscurecimiento de bordes (0 = nada, 1 = muy oscuro) */
    --crt-glow: 0.05;                 /* reflejo arriba a la izquierda */
    --crt-grain-opacity: 0.05;        /* intensidad del grano animado */
  }

  .crt-svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

  /* aberracion: en toda la pagina mientras la capa de pagina esta encendida (html.crt-on, lo pone crt()); despues, solo en el
     escritorio del monitor. Nunca las dos a la vez. */
  html.crt-on { filter: url(#crt-chroma); }
  #sec-neutomni-pc .desktop_display { filter: url(#crt-chroma); }
  html.crt-on #sec-neutomni-pc .desktop_display { filter: none; }

  /* Safari: el filtro hace repasar todo por un grafo SVG en cada cuadro y deja costuras; como en el original, sin aberracion */
  @supports (-webkit-hyphens: none) {
    html.crt-on, #sec-neutomni-pc .desktop_display { filter: none; }
  }

  /* la copia de pagina: fija sobre la ventana, encendida desde el hero hasta el zoom out del monitor */
  .crt-page { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2147483000; --crt-s: 1; }

  /* la caja que cubre la pantalla del monitor; encima de todas las ventanas (que suben su z-index al arrastrarlas) */
  /* la caja del cristal: hija de .external_ps_wrap (viaja con el monitor), encima de .desktop_display (z 20) y de sus ventanas;
     posicion, tamano y radio los pone crt() midiendo la imagen del monitor */
  .crt-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 30; --crt-s: 1; }

  .crt-bezel {
    position: absolute; inset: 0; pointer-events: none; z-index: 6;
    box-shadow:
      inset 0 0 60px 10px rgba(0,0,0,0.35),
      inset 0 0 160px 40px rgba(0,0,0,0.18);
  }

  .crt-scanlines {
    position: absolute; inset: 0; pointer-events: none; z-index: 4;
    /* grosor y separacion divididos entre la escala del monitor (--crt-s): en pantalla siempre son 1 px de cada 3 */
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,var(--crt-scanline-opacity)) 0px,
      rgba(0,0,0,var(--crt-scanline-opacity)) calc(1px / var(--crt-s, 1)),
      transparent calc(1px / var(--crt-s, 1)),
      transparent calc(var(--crt-scanline-spacing) / var(--crt-s, 1))
    );
  }

  .crt-glare {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background:
      radial-gradient(ellipse 80% 50% at 30% 20%, rgba(255,255,255,var(--crt-glow)), transparent 60%);
  }

  .crt-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse 130% 90% at 50% 50%, transparent 65%, rgba(0,0,0,var(--crt-vignette-strength)) 100%);
  }

  .crt-grain {
    position: absolute; inset: -50%; width: 200%; height: 200%;
    pointer-events: none; z-index: 1;
    opacity: var(--crt-grain-opacity);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
    animation: crt-grain-shift 0.4s steps(4) infinite;
  }
  @keyframes crt-grain-shift {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -2%); }
    100% { transform: translate(0,0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .crt-grain { animation: none; }
  }

  /* celular, simplificado como en el original: sin filtro de aberracion ni grano; rayas menos densas, bisel mas suave */
  @media (max-width: 768px) {
    html.crt-on, #sec-neutomni-pc .desktop_display { filter: none; }
    .crt-grain { display: none; }
    .crt-bezel { box-shadow: inset 0 0 40px 8px rgba(0,0,0,0.25); }
    .crt-scanlines {
      background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.12) 0px,
        rgba(0,0,0,0.12) calc(1px / var(--crt-s, 1)),
        transparent calc(1px / var(--crt-s, 1)),
        transparent calc(4px / var(--crt-s, 1))
      );
    }
  }