/* ═══════════════════════════════════════════════════════════════════════════
   wedcut-v2.css · 31-08-2026 · REDISEÑO "APPLE" (capa sobre wedcut.css)
   ─────────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de wedcut.css y solo re-estiliza. No toca: modal beta,
   selector de idioma (.wc-lang), formulario F50, grain, motion (.js-motion),
   ni ninguna clave i18n. Quitar el <link> de este archivo = volver al diseño
   anterior tal cual (rollback de 1 línea).
   Sistema visual: réplica de las páginas de producto de apple.com con la
   identidad WedCut (negro puro, tiles #1d1d1f r28, dorado #d4a843).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#000000;            /* fondo apple: negro puro (antes #0a0a0c) */
  --surf:#1d1d1f;           /* tiles y modal */
  --surf2:#1d1d1f;
  --cream:#f5f5f7;          /* texto principal apple */
  --muted:#86868b;          /* secundario apple */
  --gold:#d4a843;--gold-hi:#ecc46a;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Inter,Helvetica,Arial,sans-serif;
  --r-tile:28px;
}
body{background:var(--ink);font-family:var(--sans)}

/* ── tipografía (escala apple: 80/64/44/21/17) ─────────────────────────── */
h1{font-size:clamp(2.75rem,7vw,5rem);font-weight:700;letter-spacing:-.015em;line-height:1.05}
h2{font-size:clamp(2rem,4.6vw,4rem);font-weight:600;letter-spacing:-.01em;line-height:1.08}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.45;color:var(--muted)}
.lead strong{color:var(--cream)}

/* ── nav (barra de producto con blur fuerte) ───────────────────────────── */
nav{background:rgba(0,0,0,.8);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(245,245,247,.1)}
.nav-in{height:52px}
.brand{font-size:19px}
.nav-links a{font-size:13px}

/* ── botones píldora ───────────────────────────────────────────────────── */
.btn{border-radius:999px;font-weight:600}
.btn-ghost{border-radius:999px}

/* ── hero: centrado, tipo grande, vídeo a todo el ancho debajo ─────────── */
.hero{display:block;text-align:center;padding-top:clamp(64px,8vw,110px)}
.hero::before{inset:-12% 0 auto 0;background:radial-gradient(52% 62% at 50% 0%,rgba(212,168,67,.12),transparent 74%)}
.hero .tag{justify-content:center}
.hero .lead{max-width:600px;margin-left:auto;margin-right:auto}
.hero-cta{justify-content:center}
.hero-trust{text-align:center}
.hero .frame{margin:clamp(48px,7vw,84px) auto 0;max-width:1240px}
.hero .frame-in{border-radius:var(--r-tile);overflow:hidden;background:var(--surf);border:1px solid rgba(245,245,247,.08);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(212,168,67,.12)}
.hero .chrome{display:none}

/* ── secciones: sin filetes, más aire (apple no usa border-top) ────────── */
section.wrap{border-top:none !important}

/* ── 3 pasos (.pipe) → línea de tiempo con marcas doradas ──────────────── */
.pipe{position:relative;border:none;background:none;padding:0;gap:clamp(24px,4vw,56px)}
.pipe::before{content:"";position:absolute;top:7px;left:0;right:0;height:1px;background:rgba(245,245,247,.14)}
.pipe-step{position:relative;padding:34px 0 0;background:none;border:none}
.pipe-step::before{content:"";position:absolute;top:0;left:0;width:2px;height:15px;background:var(--gold)}
.pipe-step .n{color:var(--gold);letter-spacing:.18em}
.pipe-step h3{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:620;margin-top:12px}

/* ── colage "por dentro" → pantallas en tiles ──────────────────────────── */
.cpanel{background:#0e0a0b;border:1px solid rgba(245,245,247,.08);border-radius:var(--r-tile);overflow:hidden;padding:clamp(10px,1.4vw,18px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.cpanel img,.cpanel video{border-radius:12px}

/* ── curva emocional en panel tile ─────────────────────────────────────── */
.fr-visual{background:linear-gradient(180deg,var(--surf),#141416);border:1px solid rgba(245,245,247,.08);border-radius:var(--r-tile)}

/* ── chips ─────────────────────────────────────────────────────────────── */
.chips span{border-radius:999px;border-color:rgba(245,245,247,.16);color:var(--muted)}
.chips span.hot{background:var(--gold);border-color:var(--gold);color:#1a1206}

/* ── features (.feats) → tiles apple ───────────────────────────────────── */
.feats{gap:20px}
.feat{background:var(--surf);border:none;border-radius:var(--r-tile);padding:clamp(28px,3vw,40px)}
.feat .k{color:var(--gold);letter-spacing:.22em}
.feat h4{font-size:19px;font-weight:620}

/* ── CTA y F50: panel tile grande ──────────────────────────────────────── */
.cta{background:var(--surf);border:none;border-radius:var(--r-tile)}
#f50 .cta{border:1px solid rgba(212,168,67,.35)}   /* el F50 conserva su marco dorado */

/* ── NUEVO BLOQUE · timecode (20h → 2,5h) ──────────────────────────────── */
.v2-tc{background:var(--surf);text-align:center;padding:clamp(72px,9vw,130px) 0;margin:0}
.v2-tc-row{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:clamp(16px,4vw,44px)}
.v2-tc-num{font-family:var(--mono);font-size:clamp(2rem,7vw,4.8rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v2-tc-num.before{color:var(--muted);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(212,168,67,.65)}
.v2-tc-num.after{color:var(--gold)}
.v2-tc-arrow{font-size:clamp(1.3rem,3.4vw,2.2rem);color:var(--muted)}
.v2-tc-labels{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,6vw,100px);margin-top:14px}
.v2-tc-labels span{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ── NUEVO BLOQUE · bodegón de cierre (imagen sobre negro) ─────────────── */
.bodegon{padding:0 0 clamp(48px,6vw,80px)}
.bodegon img{display:block;width:100%;max-width:1240px;margin:0 auto}

/* ── footer ────────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(245,245,247,.1)}

/* ── v2 · componentes del layout apple (hero welcome, índice, features) ── */
.v2-appicon{width:64px;height:64px;border-radius:22.5%;margin:18px auto;display:block}
.v2-surf{background:var(--surf);padding:clamp(88px,12vw,170px) 0}
.v2-def{padding-top:0}
.v2-index{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:12px;padding:0}
.v2-index a{color:var(--gold);font-size:clamp(19px,2.4vw,24px);font-weight:500;transition:color .15s}
.v2-index a::after{content:' ›'}
.v2-index a:hover{color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px}
.v2-eyebrow{display:block;font-weight:600;font-size:clamp(17px,2vw,22px);line-height:1.3;margin-bottom:12px}
.v2-screen{background:#0e0a0b;border:1px solid rgba(245,245,247,.08);border-radius:var(--r-tile);overflow:hidden;
  padding:clamp(10px,1.4vw,18px);margin:clamp(36px,5vw,56px) 0 0;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(212,168,67,.1)}
.v2-screen img,.v2-screen video{width:100%;display:block;border-radius:12px}
.v2-media2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(36px,5vw,56px)}
.v2-media2 .v2-screen{margin-top:0}
@media(max-width:760px){.v2-media2{grid-template-columns:1fr}}
.v2-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.v2-tile{background:var(--surf);border-radius:var(--r-tile);padding:clamp(26px,3vw,38px)}
.v2-surf .v2-tile{background:#141416}
.v2-tile p{font-size:17px;line-height:1.5;color:var(--muted)}
.v2-tile b{color:var(--cream);font-weight:600}

/* ── v2 · nav: [logo + idioma] a la izquierda · [categorías + Probar] a la derecha
   (en desktop .nav-links pasa a display:contents para poder ordenar el selector
   de idioma —que el i18n inyecta dentro— junto al logo; en móvil no se toca) ── */
@media(min-width:841px){
  .nav-links{display:contents}
  .nav-in{gap:26px}
  .nav-in .brand{margin-right:0}
  .nav-in .wc-lang{order:1;margin-right:auto}
  .nav-in .nav-links a{order:2}
  .nav-in .nav-links a.btn{order:3}
}

/* ── v2 · zona gris centrada: definición + índice, con aire entre bloques ── */
.v2-center{text-align:center}
.v2-center .lead{max-width:68ch;margin:22px auto 0}
.v2-desc-h{margin-top:clamp(64px,9vw,120px)}
.v2-center .v2-index{align-items:center;margin-top:34px;gap:16px}

/* ── v2 · RESPIRACIÓN [31-08] · cada sección abre y cierra con aire generoso;
   nada pegado al corte. La web debe transmitir calma, estilo apple. ── */
section{padding-top:clamp(110px,14vw,190px);padding-bottom:clamp(110px,14vw,190px)}
.hero{padding-bottom:clamp(90px,11vw,150px)}
.v2-surf{padding:clamp(120px,15vw,210px) 0}
.bodegon{padding:clamp(60px,8vw,110px) 0}

/* dentro de cada sección: titular → párrafo → media, con escalones claros */
.v2-eyebrow{margin-bottom:16px}
section .lead[style]{margin-top:22px !important}      /* gana al inline de producción */
.v2-center .lead{margin:26px auto 0}
.v2-screen{margin-top:clamp(52px,7vw,84px)}
.v2-media2{margin-top:clamp(52px,7vw,84px)}
.v2-media2 + .v2-media2{margin-top:20px}
.v2-media2 + .v2-tiles{margin-top:28px}
.v2-tiles{margin-top:clamp(52px,7vw,84px)}
.pipe{margin-top:clamp(56px,7vw,88px)}
.fr-visual{margin-top:clamp(52px,7vw,84px) !important}
.chips{margin-top:clamp(36px,5vw,56px)}
.v2-desc-h{margin-top:clamp(90px,12vw,160px)}
.v2-center .v2-index{margin-top:44px;gap:20px}
.hero .frame{margin-top:clamp(64px,8vw,100px)}

/* el .wrap de producción (padding:0 clamp) dejaba las secciones negras SIN aire
   vertical — de ahí que fueran "pegadas al corte". section.wrap gana en especificidad
   y solo toca el eje vertical (el lateral sigue siendo el del .wrap). */
section.wrap{padding-top:clamp(110px,14vw,190px);padding-bottom:clamp(110px,14vw,190px)}

/* ── v2 · medios sin deformar: el height:auto anula los atributos width/height
   fijos cuando el CSS escala el ancho (la foto del MacBook se estiraba) ── */
img,video{max-width:100%;height:auto}

/* ── v2 · selector de idioma junto al logo también en móvil ── */
@media(max-width:840px){
  .nav-in .brand{margin-right:0}
  .nav-in .wc-lang{margin-right:auto;margin-left:12px}
}
/* el hero-vid de producción forzaba 16:9 con recorte; el demo es 1280x800 (16:10)
   y recortaba la interfaz. A ratio nativo y sin crop. */
.hero-vid{aspect-ratio:auto;object-fit:contain;height:auto}

/* ═══ v2 · SCROLL POR CATEGORÍAS [31-08 · idea del usuario, estilo brokkeboys] ═══
   El scroll "salta" y encaja en el inicio de cada sección: imposible quedarse a
   medias entre dos. Cada categoría ocupa ~una pantalla (min-height 100svh) con su
   contenido centrado en vertical. Si una sección es más alta que la pantalla, el
   estándar permite scroll libre DENTRO de ella y vuelve a encajar al salir.
   scroll-padding-top compensa la barra de navegación fija. */
html:has(body.v2-snap){scroll-snap-type:y proximity;scroll-padding-top:52px}
.v2-snap .hero,
.v2-snap section.wrap,
.v2-snap .v2-surf,
.v2-snap .bodegon,
.v2-snap #f50{
  scroll-snap-align:start;
  
  min-height:calc(100svh - 52px);
  display:flex;flex-direction:column;justify-content:center;
}
.v2-surf > .wrap{width:100%}
footer{scroll-snap-align:end}
/* dentro del viewport-sección el aire se reparte solo (justify-center):
   los paddings gigantes ya no hacen falta y dejarían secciones de 1,5 pantallas */
section.wrap,.v2-surf{padding-top:clamp(64px,7vh,96px);padding-bottom:clamp(64px,7vh,96px)}
.hero{padding-top:clamp(56px,7vh,90px);padding-bottom:clamp(56px,7vh,90px)}
.bodegon{padding:clamp(40px,5vh,70px) 0}


/* ═══ v2 · UNA PANTALLA POR IMÁN [31-08] · todo legible sin scroll interno ═══
   Los medios se acotan en svh para que cada sección quepa entera en su imán. */
.v2-snap .hero-media{scroll-snap-align:start;min-height:calc(100svh - 52px);
  display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vh,64px) 0}
.hero-media .frame{max-width:1240px;margin:0 auto;width:100%}
.hero-media .frame-in{border-radius:var(--r-tile);overflow:hidden;background:#0e0a0b;border:1px solid rgba(245,245,247,.08);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(212,168,67,.12)}
.hero-media .chrome{display:none}
.hero-vid{width:100%;height:auto;max-height:calc(100svh - 200px);object-fit:contain;display:block}

/* medios acotados a la pantalla en todas las secciones-imán */
.v2-screen img,.v2-screen video{max-height:56svh;object-fit:contain}
.v2-media2 .v2-screen img{max-height:38svh}
.fr-visual svg{max-height:30svh;width:100%;height:auto}
section .v2-screen{margin-top:clamp(32px,4vh,48px)}
.v2-media2,.v2-tiles{margin-top:clamp(32px,4vh,48px)}
.chips{margin-top:clamp(24px,3vh,36px)}
.pipe{margin-top:clamp(36px,5vh,56px)}
.v2-desc-h{margin-top:0}
.v2-center .v2-index{margin-top:38px}

/* paddings de imán: justos, el centrado hace el resto */
section.wrap,.v2-surf{padding-top:clamp(48px,6vh,72px);padding-bottom:clamp(48px,6vh,72px)}
.hero{padding-top:clamp(40px,5vh,64px);padding-bottom:clamp(40px,5vh,64px)}

/* ajuste fino de los 3 imanes que excedían pantalla en 1280x800 */
.hero .tag{margin-bottom:6px}
.v2-appicon{margin:14px auto 12px}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.5rem)}
.hero .lead{margin-top:16px !important}
.hero-cta{margin-top:26px}
.hero-trust{margin-top:18px}
#inteligencia .fr-visual{padding:20px 22px !important;margin-top:clamp(24px,3vh,36px) !important}
#inteligencia .chips{margin-top:20px}
#inteligencia .chips span{padding:7px 13px;font-size:12px}
#entrega .v2-media2 .v2-screen img{max-height:30svh}
#entrega .v2-tile{padding:20px 26px}
#entrega .v2-tiles,#entrega .v2-media2{margin-top:clamp(22px,3vh,34px)}


/* ── v2 · componentes de las otras pestañas [31-08] ── */
.pack{background:var(--surf);border:none;border-radius:16px;padding:22px 24px}
.packs{gap:16px}
.frow .fr-visual{margin-top:0 !important}
.faq{max-width:820px}

/* ── v2 · el panel del menú móvil sigue a la barra [31-08] ────────────────
   wedcut.css ancla el desplegable en `top:64px` porque esa era la altura del
   nav; v2 la baja a 52px y quedaba una franja de 12px por la que se veía el
   hero. Medido en el navegador a 375px: hueco 12px → 0. Vive aquí, en la
   capa, para que quitar este CSS devuelva el nav de 64px Y su menú. */
@media(max-width:840px){ .nav-links{top:52px} }

/* ── v2 · nueva-clave.html sigue la tipografía del rediseño [31-08] ───────
   Esa página fija `font-family:'Schibsted Grotesk'` en un <style> EN LÍNEA que
   va después de este fichero, así que a igual especificidad ganaba él y la
   página se quedaba con la tipografía vieja. `body .nk-wrap` sube la
   especificidad lo justo. Quitar esta capa la devuelve a Schibsted. */
body .nk-wrap{font-family:var(--sans)}

/* ── v2 · EN MÓVIL, SCROLL NORMAL · SIN IMÁN [31-08 · decisión de Adrián] ──
   El imán está pensado para una pantalla ancha, donde cada sección cabe
   entera. En un móvil no caben, y forzarlas a 100svh dejaba pantallas medio
   vacías: medido, 7 de 15 secciones con más del 45 % de aire y la peor al
   72 %. Aquí el scroll vuelve a ser el del navegador de toda la vida —cada
   sección mide lo que mide su contenido— y los medios recuperan su tamaño
   natural, porque los topes en svh solo tenían sentido para que la sección
   cupiese en su imán.
   ⚠️ Va al FINAL del fichero a propósito: los topes svh se declaran más
   arriba y, a igual especificidad, gana el último.
   El ordenador, desde el 09-09, va en `proximity` y sin stop:always (el imán atrapaba la rueda). */
@media(max-width:760px){
  html:has(body.v2-snap){scroll-snap-type:none}
  .v2-snap .hero,
  .v2-snap section.wrap,
  .v2-snap .v2-surf,
  .v2-snap .bodegon,
  .v2-snap #f50,
  .v2-snap .hero-media{
    scroll-snap-align:none;scroll-snap-stop:normal;
    min-height:0;display:block}
  footer{scroll-snap-align:none}
  .v2-screen img,.v2-screen video,
  .v2-media2 .v2-screen img,
  #entrega .v2-media2 .v2-screen img,
  .fr-visual svg,
  .hero-vid{max-height:none}
}

/* ── v2 · EL CTA SON DOS BOTONES, NO UNO [10-09 · Adrián] ─────────────────
   «divide los dos botones de la web iniciar sesión o crear cuenta». Hasta hoy
   una sola píldora decía «Iniciar sesión o crear cuenta» y llevaba a los dos
   sitios a la vez: quien ya tenía cuenta y quien no leían el mismo botón.
   Ahora son dos, siempre en el mismo orden y con la misma jerarquía en toda
   la web — «Crear cuenta» en oro (la acción que queremos) y «Iniciar sesión»
   en contorno — y cada uno cae donde debe: #crear abre directamente el
   formulario de alta de cuenta.html.

   .nav-cta  → la pareja del nav.        .cta-duo → la pareja de los cierres.
   El hero no lleva envoltorio: .hero-cta ya es la fila flex y ahí los dos
   botones son hermanos de «Cómo funciona». */
.nav-cta{display:flex;align-items:center;gap:10px}
/* En escritorio .nav-links es display:contents, así que la pareja es un hijo
   flex de .nav-in y necesita su orden como lo tenía el botón único. */
@media(min-width:841px){
  .nav-in .nav-cta{order:3}
  /* Dos píldoras en una barra de 52 px: se aprietan un punto para que respiren
     arriba y abajo. Medido: 45 px de alto con el .btn de serie → 35 px. */
  /* El de contorno lleva `border:1px` y el de oro `border:none`: sin igualarlo
     uno medía 42 px y el otro 40 y se veía el escalón. Borde transparente en
     los dos → misma caja. */
  .nav-links .nav-cta a.btn{font-size:13px;padding:9px 17px}
  .nav-links .nav-cta a.btn:not(.btn-ghost){border:1px solid transparent}
}
/* wedcut.css fuerza `color:#1a1206` en todo `.nav-links a.btn` (texto oscuro
   sobre oro). En el de contorno el fondo es transparente: sin esto el texto
   quedaría casi negro sobre el nav negro. */
.nav-links .nav-cta a.btn-ghost{color:var(--cream)}
.nav-links .nav-cta a.btn-ghost:hover{color:var(--cream)}
@media(max-width:840px){
  /* Dentro del menú desplegable van uno debajo del otro, a todo el ancho,
     como ya hacía el botón único. */
  .nav-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
  .nav-links .nav-cta a.btn{margin-top:0;justify-content:center;font-size:16px;padding:15px 22px}
  /* Aquí `.nav-links a` pone un `border-bottom` de separador entre filas del
     menú: en estos dos no lo queremos, y además hay que igualar la caja (el de
     contorno tiene borde y el de oro no). Borde completo en los dos. */
  .nav-links .nav-cta a.btn:not(.btn-ghost){border:1px solid transparent}
  .nav-links .nav-cta a.btn-ghost{border:1px solid var(--line2)}
}
.cta-duo{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ── v2 · LA WEB RECONOCE AL QUE YA HA ENTRADO [10-09 · Adrián] ───────────
   «añade el botón mi cuenta cuando estás logeado». Quien tiene sesión no ve
   «Crear cuenta / Iniciar sesión» en ningún sitio: ve **Mi cuenta**. El estado
   vive en el <body> (`.dentro`), así que el mismo interruptor sirve para los
   tres huecos —el nav, el hero y los cierres— sin repetir lógica.

   Los tres botones están en el HTML desde el principio, NO se inyectan: el
   i18n traduce en la carga, y un botón creado después se quedaría en español.
   Manda `wedcut.js`, que pone o quita `.dentro` según haya sesión y la
   reevalúa al entrar o al salir, sin recargar la página.

   El texto reaprovecha `c_tag`, que ya dice «Mi cuenta» en los 8 idiomas y ya
   se usaba con este mismo sentido en precios.html. */
.wc-dentro{display:none}
body.dentro .wc-dentro{display:inline-flex}
body.dentro .wc-fuera{display:none}

/* [14-09 · Adrián] dentro de un botón dorado, «Cut» dorado sobre dorado desaparecía («Descarga Wed»):
   ahí la palabra entera toma el color del texto del botón. En los botones oscuros sigue dorado.
   Va en esta hoja y no en wedcut.css porque esta lleva ?v= y el arreglo llega sin caché vieja. */
.btn:not(.btn-ghost) .wcw b{color:inherit}