/* La portada. Sale de la propuesta v03, congelada el 6-sep-2026.
 *
 * Va APARTE de estilo.css a proposito: la portada y las paginas legales no
 * comparten nada mas que el color del fondo, y mezclarlas obligaria a que un
 * retoque de la portada no rompiera las legales sin que nadie lo mire.
 *
 * Se edita AQUI, no en web/propuesta/. Esa carpeta es la maqueta de donde
 * salio esto y ya no manda. */

/* La letra del titular: Cormorant Garamond 300.
 * Decision de Erick del 6-sep-2026, elegida entre cuatro mirandolas.
 *
 * Los @font-face estan COPIADOS aqui, no enlazados desde /css/fuentes.css,
 * porque ese archivo trae ocho familias que nadie usa. Salen de ahi: si se
 * cambia de tipografia se toca FAMILIAS en web/fuentes.mjs, se ejecuta, y se
 * vuelven a copiar.
 *
 * Los archivos se sirven desde aqui y nunca desde Google: enlazarlos alli le
 * manda la IP de cada visitante a Estados Unidos. Decision del 25-ago-2026. */

@font-face {
  font-family: 'CormorantGaramond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'CormorantGaramond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CormorantGaramond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'CormorantGaramond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'CormorantGaramond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'CormorantGaramond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/cormorant-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    --fondo:#0D0D0D; --superficie:#171717; --texto:#F2F2F2; --texto2:#A3A3A3;
    --texto3:#525252; --borde:#262626; --verde:#22C55E;
    --serif:Georgia,'Times New Roman',serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans);font-size:17px;line-height:1.6}
  h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.02;letter-spacing:-.025em}
  p{margin:0}
  img,video{display:block;width:100%;height:100%;object-fit:cover}

  /* ===== PORTADA — el video partido, lo primero que se ve ===== */

  .port{position:relative;background:#000}

  /* 2:1 = dos videos cuadrados uno al lado del otro, EXACTO.
     Asi entran enteros y no se recorta ni un pixel en ninguna pantalla. */
  .port__doble{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:2/1}
  .port__mitad{position:relative;overflow:hidden;background:#0a0a0a}
  .port__mitad+.port__mitad::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
    background:rgba(255,255,255,.16);z-index:4}

  /* Desaturado, pero NO blanco y negro: se sigue viendo que hay color detras,
     y por eso el lado de Nero canta mas al lado. */
  .port__mitad--viejo video{filter:saturate(.28) contrast(1.04) brightness(.82)}

  /* Los tres videos de cada lado viven apilados; solo se ve el que toca. */
  .port__mitad video{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
  .port__mitad video.activo{opacity:1}

  .port__velo{position:absolute;inset:0;z-index:5;pointer-events:none;
    background:linear-gradient(180deg,rgba(13,13,13,.58) 0%,rgba(13,13,13,0) 30%,
      rgba(13,13,13,0) 52%,rgba(13,13,13,.88) 100%)}

  /* La marca va CENTRADA arriba, justo sobre la costura entre los dos videos
     (Erick, 6-sep-2026). Como .port__top esta pegada a los dos lados con el
     mismo margen, su centro es el centro de la pantalla.
     El aviso de «Proximamente» se queda a la derecha, por su cuenta. */
  .port__top{position:absolute;top:22px;left:26px;right:26px;z-index:6;
    display:flex;justify-content:flex-end;align-items:center}
  .port__marca{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:clamp(24px,3.4vw,48px);font-weight:600;letter-spacing:.32em;text-transform:uppercase;
    white-space:nowrap;
    /* El espaciado entre letras deja aire DESPUES de la ultima O que no
       existe delante de la N, asi que la caja quedaba centrada y la palabra
       no: se veia media letra corrida a la izquierda de la costura. Este
       relleno pone el mismo aire delante y devuelve la simetria. */
    padding-left:.32em}
  .port__estado{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto2);
    border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;
    display:inline-flex;align-items:center;gap:7px;background:rgba(13,13,13,.35)}
  .port__estado i{width:6px;height:6px;border-radius:50%;background:var(--verde)}

  .port__rotulo{position:absolute;bottom:22px;z-index:6;font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.66);
    background:rgba(13,13,13,.42);backdrop-filter:blur(5px);border-radius:999px;padding:5px 11px}
  .port__rotulo--izq{left:26px}
  .port__rotulo--der{right:26px}

  /* La letra fina, decidida el 6-sep-2026 (opcion 3).
     Va MAS grande que la normal a proposito: al adelgazar el trazo la palabra
     pierde peso en la pagina y hay que devolverselo con tamaño. */
  .port__h{position:absolute;left:0;right:0;bottom:0;z-index:6;text-align:center;
    padding:0 26px 74px;
    font-family:'CormorantGaramond',Georgia,serif;font-weight:300;
    font-size:clamp(38px,6.4vw,84px)}
  .port__h em{font-style:normal}

  /* ===== resto de la propuesta ===== */
  .marco{max-width:1180px;margin:0 auto;padding:0 24px}
  /* Sin borde: Erick pidio que no haya lineas cortando la pagina de lado a
     lado. Las zonas se separan por espacio, no por rayas. */
  .rotulo{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--texto3);
    margin:64px 0 12px}
  .rotulo em{font-style:normal;color:var(--verde)}

  /* ===== PANTALLA 2 — la demostracion de Combinar ===== */

  .demo{padding:clamp(52px,7vw,104px) 0 clamp(40px,5vw,72px)}
  .demo__h{font-family:'CormorantGaramond',Georgia,serif;font-weight:300;
    font-size:clamp(32px,5vw,68px);text-align:center;
    margin:0 auto clamp(30px,4vw,56px)}

  /* Las tres NO caben en cajas iguales: A y B son capturas (0.595) y C es una
     generacion (0.747). Se ponen a la MISMA ALTURA y cada una se queda con su
     ancho. Asi no se recorta ninguna. */
  /* Las columnas se reparten en PROPORCION a lo ancha que es cada imagen
     (595, 595 y 747). Como cada caja lleva luego su propia proporcion, las
     tres acaban midiendo EXACTAMENTE lo mismo de alto, y el conjunto cabe
     siempre en el ancho disponible.
     Con altura fija se salia de la pantalla y aparecia scroll horizontal. */
  /* EL ANCHO SALE DE LA ALTURA, no al reves.
     Las tres columnas juntas miden 1,937 veces su altura (0.595+0.595+0.747).
     Asi que para que la tira ocupe como maximo 78 de cada 100 de pantalla de
     alto, su ancho tiene que ser 1,937 x 78vh. Con eso llena lo que puede en
     cualquier monitor —tambien en un 4K— y nunca se sale por abajo.
     Con un tope fijo de 900 px se quedaba en una postal en pantallas grandes. */
  .tira{display:grid;grid-template-columns:595fr 595fr 747fr;
    gap:clamp(8px,1.2vw,18px);align-items:start;
    width:100%;
    max-width:min(1900px, 94vw, calc(1.937 * 78vh));
    margin:0 auto}
  /* MARCO. El fondo de la interfaz de las capturas es casi el mismo negro que
     el de la pagina, asi que sin marco la captura no tiene borde y se derrama
     sobre el fondo. Con un filo claro se lee como una pantalla de movil.
     Va en las tres para que el trio se lea como una sola pieza. */
  .paso__caja{position:relative;border-radius:16px;overflow:hidden;
    background:#191919;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55)}

  /* El paspartu lo hace el propio hueco de 5 px de la imagen: una imagen
     colocada en absoluto se mide contra la caja de relleno, asi que poner
     ademas padding en la caja no hacia nada. */
  .paso__caja img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);
    object-fit:contain;border-radius:11px;
    opacity:0;transition:opacity .5s ease}
  /* Los resultados son fotos, no capturas: no necesitan paspartu, llenan la
     caja hasta el filo. */
  .paso--c .paso__caja img,
  .paso--res .paso__caja img{inset:0;width:100%;height:100%;border-radius:0}
  .paso__caja img.activo{opacity:1}
  .paso--a .paso__caja,.paso--b .paso__caja{aspect-ratio:1206/2026}
  .paso--c .paso__caja{aspect-ratio:896/1200}

  .paso__eti{margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--texto3);text-align:center}
  .paso--c .paso__eti{color:var(--texto2)}

  /* Puntitos que dicen por cual vamos. */
  .demo__pasos{display:flex;justify-content:center;gap:7px;margin-top:clamp(24px,3vw,38px)}
  .demo__pasos i{width:6px;height:6px;border-radius:50%;background:var(--borde);
    transition:background .3s ease}
  .demo__pasos i.activo{background:var(--verde)}

  /* --- La tira de Copiar Look: dos imagenes en vez de tres ---------------
     Misma idea, otras proporciones. Erick recorto las capturas el 6-sep-2026
     para acercarlas al resultado: 1206x2136 (0.565), antes 1206x2622 (0.460).
     Con 0.747 del resultado suman 1,312, y de ahi sale el ancho maximo.
     Estos tres numeros van juntos: si cambia el recorte, cambian los tres. */
  .tira--dos{grid-template-columns:565fr 747fr;
    max-width:min(1500px, 94vw, calc(1.312 * 78vh))}
  .paso--ins .paso__caja{aspect-ratio:1206/2136}
  .paso--res .paso__caja{aspect-ratio:896/1200}

  /* ===== PANTALLA 4 — EL CARRUSEL =====
     Una sola tira (Erick, 6-sep-2026: con tres parecia un mosaico), dentro del
     ancho de la pagina y no de borde a borde, y con las imagenes a medio camino
     entre lo que median antes y lo que mide la demostracion de arriba. */

  .muro-sec{padding:clamp(48px,5vw,80px) 0}
  /* El recorte lo hace ESTE div, no la ventana: asi la tira empieza y acaba en
     el mismo sitio que el resto de la pagina. */
  /* MISMO ANCHO que la tira de dos imagenes de arriba: se alinean.
     Son los mismos tres numeros de .tira--dos (565+747 = 1,312 veces la
     altura, y como mucho 78 de cada 100 de pantalla de alto). Si alli cambia
     el recorte, aqui hay que cambiarlo tambien o dejan de cuadrar. */
  .carrusel-caja{width:100%;max-width:min(1500px, 94vw, calc(1.312 * 78vh));
    margin:0 auto}
  .carrusel{overflow:hidden;border-radius:10px}
  .carrusel__cinta{display:flex;width:max-content;
    animation:desliza var(--dur) linear infinite}
  /* Al pasar el raton se para: si no, hay que cazar una imagen en movimiento
     para poder abrirla. */
  .carrusel:hover .carrusel__cinta{animation-play-state:paused}
  /* El margen va en TODAS, ultima incluida: es lo que hace que la mitad de la
     cinta caiga exacta y el bucle no de un tiron. */
  .carrusel__cinta img{height:clamp(230px,40vh,430px);width:auto;
    margin-right:10px;border-radius:8px;background:var(--superficie);
    cursor:pointer;transition:opacity .25s ease}
  .carrusel__cinta img:hover{opacity:.72}
  @keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* Quien haya pedido menos movimiento en su sistema no ve nada moverse: la
     tira se queda quieta y se arrastra con el dedo. */
  @media(prefers-reduced-motion:reduce){
    .carrusel__cinta{animation:none}
    .carrusel{overflow-x:auto}
  }

  .muro__nota{margin-top:22px;font-size:12.5px;color:var(--texto3);text-align:center}

  /* ===== LA GALERIA =====
     Se abre al pulsar una imagen del carrusel. Carga otra copia mas grande
     (860 px) solo en ese momento: la del carrusel mide 520 y ampliada se veria
     blanda, y cargar las 47 grandes de entrada serian 5,5 MB por nada. */

  .galeria{position:fixed;inset:0;z-index:50;display:none;
    background:rgba(8,8,8,.94);backdrop-filter:blur(6px)}
  .galeria[data-abierta]{display:grid;place-items:center}
  .galeria__img{max-width:min(92vw,760px);max-height:88vh;width:auto;height:auto;
    object-fit:contain;border-radius:10px}
  .galeria__btn{position:absolute;background:none;border:0;color:var(--texto);
    cursor:pointer;padding:16px;line-height:1;font-size:30px;opacity:.62;
    transition:opacity .2s ease;font-family:var(--sans)}
  .galeria__btn:hover{opacity:1}
  .galeria__btn--cerrar{top:10px;right:14px;font-size:34px}
  .galeria__btn--ant{left:6px;top:50%;transform:translateY(-50%)}
  .galeria__btn--sig{right:6px;top:50%;transform:translateY(-50%)}
  .galeria__cuenta{position:absolute;bottom:22px;left:0;right:0;text-align:center;
    font-size:12px;letter-spacing:.14em;color:var(--texto3)}

  /* ===== PANTALLA 5 — LA FRASE =====
     Va sola y respira. El espacio de arriba y abajo es lo que la separa de las
     otras zonas: sin rayas, que es lo que se decidio el 6-sep-2026. */

  .frase{padding:clamp(48px,5.5vw,92px) 0}
  .frase__h{font-family:'CormorantGaramond',Georgia,serif;font-weight:300;
    font-size:clamp(30px,4.6vw,62px);text-align:center;line-height:1.14}
  .frase__h em{font-style:normal;color:var(--texto)}
  /* La negativa apagada y la positiva encendida, no al reves (Erick, 6-sep-2026). */
  .frase__neg{color:var(--texto2)}

  /* ===== PANTALLA 6 — EL CIERRE =====
     Copiado de la v01. El unico sitio de la pagina con otro fondo. */

  .lema{padding:clamp(58px,6.5vw,112px) 0;text-align:center;background:var(--superficie)}
  .lema__it{font-family:'CormorantGaramond',Georgia,serif;font-weight:400;
    font-size:clamp(30px,5.2vw,62px);line-height:1.14;letter-spacing:-.02em;
    max-width:18ch;margin:0 auto}
  /* Mayuscula, pero SIN engordar la letra: si NERO sale en negrita dentro de
     una frase fina, se lee como un logotipo pegado y no como la palabra. */
  .lema__marca{font-weight:inherit;letter-spacing:.02em}
  .lema__es{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--texto3)}
  /* ===== EL PIE ===== */

  .pie{padding:clamp(60px,8vw,120px) 0 clamp(40px,5vw,64px);text-align:center}
  .pie__marca{font-size:15px;font-weight:600;letter-spacing:.36em;text-transform:uppercase}
  .pie__pronto{margin-top:14px;font-size:13px;color:var(--texto2);letter-spacing:.04em}
  .pie__enlaces{margin-top:clamp(34px,4vw,54px);display:flex;justify-content:center;
    flex-wrap:wrap;gap:10px clamp(20px,3vw,38px)}
  .pie__enlaces a{color:var(--texto2);font-size:13.5px;text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
  .pie__enlaces a:hover{color:var(--texto);border-bottom-color:var(--borde)}
  .pie__abajo{margin-top:clamp(30px,3.6vw,48px);display:flex;justify-content:center;
    flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--texto3)}
  /* En la maqueta los idiomas eran texto suelto; ahora son enlaces de verdad,
     y sin esto salian en el azul subrayado del navegador. */
  .pie__idioma a{color:inherit;text-decoration:none;transition:color .2s ease}
  .pie__idioma a:hover{color:var(--texto)}
  .pie__idioma a[aria-current]{color:var(--texto2)}

  @media(max-width:820px){
    /* Las mitades NO se apilan: apiladas dejan de ser una comparacion.
       Lo que baja es el titular, que encima de un 2:1 en un movil no cabe. */
    .port__h{position:static;padding:22px 22px 0;text-align:left;font-size:clamp(27px,7.6vw,38px)}
    .port__velo{display:none}
    .port__rotulo{bottom:auto;top:56px;font-size:9px;letter-spacing:.14em;padding:4px 8px}
    .port__rotulo--izq{left:14px} .port__rotulo--der{right:14px}
    .port__top{left:16px;right:16px;top:16px}
    /* En un movil, la marca centrada y el aviso de la derecha se pisaban:
       NERO acababa en 235 y «Proximamente» empezaba en 224. Se encogen los
       dos, y quedan 30 px de aire entre ellos. */
    .port__marca{font-size:16px;letter-spacing:.26em}
    .port__estado{font-size:9px;padding:5px 9px;letter-spacing:.14em}
    /* En el movil se quedan EN FILA, no apiladas (Erick, 6-sep-2026).
       Apiladas cada imagen se ve mejor, pero se pierde lo que la tira cuenta:
       esta prenda MAS esta otra IGUAL este resultado. Leidas una debajo de
       otra parecen tres fotos sueltas.
       Se conserva el reparto proporcional de columnas; solo se aprieta el
       hueco entre ellas y se deja que ocupen casi todo el ancho. */
    .tira,.tira--dos{gap:5px;max-width:96vw}
    .demo__h{font-size:clamp(27px,7.4vw,38px)}
  }