/* ═══════════════════════════════════════════════════════════════════════════
   wedcut-v3.css · 14-09-2026 · PROPUESTA «LAVADO» (capa sobre wedcut.css + v2)
   ─────────────────────────────────────────────────────────────────────────
   Adrián: «me gusta, pero hay que mantener la estructura de la web anterior:
   las páginas completas de Análisis y Montaje son buenas para la indexación».
   Esta capa NO toca el HTML, las claves i18n, el JSON-LD ni el código de
   precios: solo re-estiliza. Quitar el <link> = volver a la v2 tal cual.

   Lo que cambia y por qué (sus palabras: «el negro muy puro y el amarillo al
   contraste se ve muy IA»):
   · fondo grafito con lavados grandes y suaves (taupe cálido + pizarra fría),
     no negro puro;
   · el acento pasa de oro saturado a champán apagado. --gold se redefine para
     que TODOS los acentos de las páginas cambien a la vez; el oro de marca
     #d4a843 se queda solo en el wordmark;
   · paneles esmerilados en lugar de tiles grises planos;
   · portada con vídeo de bodas de fondo bajo un lavado (wedcut-v3-hero.js).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#141619;
  --surf:rgba(255,250,240,.045);
  --surf2:rgba(255,250,240,.06);
  --line:rgba(236,232,225,.09);
  --line2:rgba(236,232,225,.16);
  --cream:#ece8e1;
  --muted:#a6a29a;
  --faint:#8e8a83;
  --gold:#d9c7a1;            /* acento champán (antes oro saturado) */
  --gold-hi:#eadcbd;
  --brand-gold:#d4a843;      /* solo marca */
  --v3-taupe:rgba(140,120,88,.34);
  --v3-slate:rgba(92,110,130,.32);
  --v3-btn-a:#5e533f;--v3-btn-b:#857456;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-tile:28px;
  --v3-ease:cubic-bezier(.16,1,.3,1);
}

/* ── atmósfera: lavados quietos detrás de toda la página ───────────────── */
html{background:#141619}
body{background:transparent;font-family:var(--sans);color:var(--cream)}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:
  radial-gradient(40% 36% at 10% 16%,var(--v3-taupe),transparent 70%),
  radial-gradient(46% 42% at 90% 40%,var(--v3-slate),transparent 72%),
  radial-gradient(44% 40% at 28% 90%,rgba(92,110,130,.22),transparent 72%),
  radial-gradient(38% 34% at 82% 98%,rgba(140,120,88,.24),transparent 72%),
  linear-gradient(180deg,#16181b,#121316)}
.grain{opacity:.03}

/* ── tipografía ────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--sans)}
h1{font-weight:800;letter-spacing:-.04em}
h2{font-weight:700;letter-spacing:-.03em}
.lead{color:var(--muted)}
.lead strong,.lead b{color:var(--cream)}
.gold{color:var(--gold)}
.mono{color:var(--gold)}

/* ── wordmark: el único oro de verdad ──────────────────────────────────── */
.brand b,.wcw b{color:var(--brand-gold)}
.btn:not(.btn-ghost) .wcw b{color:inherit}

/* ── nav esmerilado ────────────────────────────────────────────────────── */
nav{background:rgba(20,22,25,.62);border-bottom:1px solid var(--line)}
.nav-in{height:64px}
.nav-links a{font-size:14px;color:#cfcac1}
.nav-links a:hover,.nav-links a.active{color:#fff}
@media(max-width:840px){.nav-links{top:64px;background:#17191c}}

/* ── botones: sin amarillo; principal en taupe con brillo suave ────────── */
.btn{background:linear-gradient(135deg,var(--v3-btn-a),var(--v3-btn-b));color:#fffaf0;border-radius:14px;
  box-shadow:0 10px 30px -12px rgba(185,165,126,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.btn:hover{background:linear-gradient(135deg,var(--v3-btn-a),var(--v3-btn-b));filter:brightness(1.08);box-shadow:0 12px 34px -12px rgba(185,165,126,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.btn .ico{background:rgba(255,250,240,.16)}
.btn-ghost{background:rgba(20,22,25,.35);color:var(--cream);border:1px solid var(--line2);box-shadow:none;border-radius:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(20,22,25,.45);border-color:rgba(217,199,161,.5);filter:none;box-shadow:none}
.nav-links a.btn,.nav-links a.btn:hover{color:#fffaf0}
.nav-links .nav-cta a.btn{border-radius:12px}

/* ── paneles esmerilados (sustituyen a los tiles grises planos) ────────── */
.v2-tile,.feat,.fr-visual,.cta,.pack,.v2-screen,.cpanel,
.t-fila,.t-cuenta,.t-oferta,.t-lanz,.wcui{
  background:linear-gradient(180deg,rgba(255,250,240,.05),rgba(255,250,240,.018));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.v2-surf .v2-tile{background:linear-gradient(180deg,rgba(255,250,240,.05),rgba(255,250,240,.018))}
.v2-screen{box-shadow:0 30px 80px -36px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05)}
.v2-screen img,.v2-screen video{border-radius:14px}

/* las «zonas grises» de la v2 pasan a ser un velo apenas visible */
.v2-surf{background:linear-gradient(180deg,rgba(255,250,240,.015),rgba(255,250,240,.035) 50%,rgba(255,250,240,.015))}

/* ── eyebrows: un solo tono (la v2 usaba morado, rosa y verde de Apple) ── */
.v2-eyebrow{color:var(--gold) !important;font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.feat .k,.pipe-step .n{color:var(--gold)}
.v2-index a{color:var(--gold)}
.v2-index a:hover{color:var(--gold-hi)}

/* la curva emocional de la portada: del morado al champán */
#inteligencia .fr-visual path[stroke]{stroke:var(--gold)}
#inteligencia .fr-visual circle{fill:var(--gold)}

/* ── 3 pasos ───────────────────────────────────────────────────────────── */
.pipe::before{background:linear-gradient(90deg,rgba(217,199,161,.5),rgba(236,232,225,.12))}
.pipe-step::before{width:11px;height:11px;border-radius:50%;top:2px;background:#16181b;border:2px solid var(--gold)}

/* ── chips ─────────────────────────────────────────────────────────────── */
.chips span{border-color:var(--line2);color:#cfcac1;background:rgba(255,250,240,.03)}
.chips span.hot{background:rgba(217,199,161,.12);border-color:rgba(217,199,161,.4);color:var(--gold-hi)}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line)}
summary .pm{color:var(--gold)}

/* ── cierre (CTA) ──────────────────────────────────────────────────────── */
.cta{background:
  radial-gradient(70% 90% at 20% 0%,rgba(140,120,88,.30),transparent 60%),
  radial-gradient(70% 90% at 90% 100%,rgba(92,110,130,.28),transparent 62%),
  linear-gradient(180deg,rgba(255,250,240,.05),rgba(255,250,240,.02))}
#f50 .cta{border:1px solid rgba(217,199,161,.35)}

footer{border-top:1px solid var(--line)}

/* ── componentes recreados de la app (Análisis y Montaje) ──────────────── */
.wcui .st,.wcui .prog,.wcui .fmt,.wcui .opts .sel,.wcui .dots span{background:rgba(10,11,13,.45);border-color:var(--line)}
.wcui .st .v{color:var(--gold)}
.wcui .prog .bar{background:rgba(236,232,225,.1)}
.wcui .prog .bar i{background:linear-gradient(90deg,#b9a57e,var(--gold))}
.wcui .fmt.on{border-color:rgba(217,199,161,.55);background:linear-gradient(180deg,rgba(217,199,161,.14),rgba(217,199,161,.04))}
.wcui .opts .cb.on::before{background:var(--gold);border-color:var(--gold)}
.wcui .b.gen{background:linear-gradient(135deg,var(--v3-btn-a),var(--v3-btn-b));color:#fffaf0}

/* ═══ PORTADA · vídeo de bodas de fondo con lavado ═══════════════════════
   El hero se estira por debajo del nav (que es translúcido) y el vídeo ocupa
   todo el ancho de la ventana aunque el hero viva dentro de .wrap. */
.hero.v3-hero{position:relative;isolation:isolate;margin-top:-64px;padding-top:calc(64px + clamp(56px,8vh,110px));min-height:100svh}
.v3-hero-bg{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
.v3-hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;
  filter:brightness(.66) saturate(.82) contrast(.96);transform:scale(1.05);animation:v3drift 28s ease-in-out infinite alternate}
.v3-hero-bg video.on{opacity:1}
@keyframes v3drift{from{transform:scale(1.05)}to{transform:scale(1.12) translate3d(-1.2%,-.8%,0)}}
.v3-hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(65% 55% at 50% 45%,rgba(18,19,22,.28) 0%,rgba(18,19,22,.66) 100%),
  linear-gradient(115deg,rgba(92,110,130,.30),rgba(140,120,88,.22)),
  linear-gradient(180deg,rgba(18,19,22,.45) 0%,rgba(18,19,22,.10) 32%,rgba(18,19,22,.30) 74%,rgba(18,19,22,0) 100%)}
.hero.v3-hero::before{display:none}
.hero.v3-hero h1{color:#f6f2ea;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero.v3-hero h1 .gold{background:linear-gradient(100deg,#f3e9d4 0%,#d9c7a1 45%,#c4ae84 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.v3-hero .lead{color:#e2ddd4}
.hero.v3-hero .tag{background:rgba(20,22,25,.4);border-color:var(--line2);color:#cfcac1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero.v3-hero .tag .dot{background:var(--gold)}
.hero.v3-hero .hero-trust{color:#cfcac1}
.v3-video-ctl{position:absolute;right:0;bottom:28px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line2);background:rgba(20,22,25,.45);color:#cfcac1;font:500 13px var(--sans);cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.v3-video-ctl:hover{color:#fff}
@media(max-width:840px){.v3-video-ctl{bottom:16px}}
@media (prefers-reduced-motion:reduce){.v3-hero-bg video{animation:none;transition:none}}

/* ═══ PRECIOS · la cuota en dos tarjetas de plan (solo CSS: ids y JS intactos) ═ */
#t-cuota-zona{grid-template-columns:1fr 1fr;max-width:1000px;gap:24px;align-items:stretch}
#t-cuota-zona .t-fila.t-cuota{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:38px 36px 34px;border-radius:32px;text-align:left}
#t-cuota-zona .t-cuota .t-talla{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#cfcac1}
#t-cuota-zona .t-cuota .t-brutos{order:3;font-size:15px;line-height:1.5;color:var(--muted);margin:14px 0 30px;padding-top:22px;border-top:1px solid var(--line)}
#t-cuota-zona .t-cuota .t-que{display:contents}
#t-cuota-zona .t-cuota .t-precio{order:2;text-align:left;margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#t-cuota-zona .t-cuota .t-precio .t-p{font-size:clamp(46px,5.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1}
#t-cuota-zona .t-cuota .t-precio .t-lab{font-size:15px;text-transform:none;letter-spacing:0;color:var(--muted)}
#t-cuota-zona .t-cuota .btn{order:4;margin-top:auto;width:100%;justify-content:center;padding:15px 22px;font-size:15px}
#t-cuota-zona .t-cuota:nth-child(1) .btn{background:rgba(20,22,25,.35);border:1px solid var(--line2);box-shadow:none}
#t-cuota-zona .t-cuota:nth-child(2){border-color:rgba(217,199,161,.34);background:
  radial-gradient(120% 70% at 0% 0%,rgba(217,199,161,.26),transparent 58%),
  radial-gradient(90% 60% at 100% 100%,rgba(92,110,130,.18),transparent 60%),
  linear-gradient(180deg,rgba(255,250,240,.06),rgba(255,250,240,.02))}
@media(max-width:760px){#t-cuota-zona{grid-template-columns:1fr}}
.t-grid{max-width:1000px}
.t-fila{border-radius:18px;padding:18px 22px}
.t-fila .t-talla b{color:var(--gold)}
.t-50{color:var(--gold);border-color:rgba(217,199,161,.4);background:rgba(217,199,161,.08)}
.t-precio .t-n.gancho{color:var(--gold)}
.t-oferta{max-width:760px;border-color:rgba(217,199,161,.3);background:linear-gradient(180deg,rgba(217,199,161,.10),rgba(217,199,161,.03))}
.t-of-h b,.t-of-k{color:var(--gold)}
.t-lanz{max-width:1000px;border-color:rgba(217,199,161,.3);background:linear-gradient(180deg,rgba(217,199,161,.09),rgba(217,199,161,.02))}
.t-lanz .ico{background:var(--gold);color:#17191c}
.t-dato,.t-cuenta input{background:rgba(10,11,13,.45)}
.t-dato .v.si{color:var(--gold)}
.proxi-velo span{background:rgba(20,22,25,.9)}

/* los precios grandes con cifras tabulares separaban la coma: «9 , 99» con la coma separada */
#t-cuota-zona .t-precio .t-p,.t-of-h b{font-variant-numeric:normal;letter-spacing:-.02em}

/* [14-09 · Adrián] «eliminar el logo de encima del texto: ahí que vaya el texto solo encima del vídeo» */
.hero .v2-appicon{display:none}

/* [14-09 · Adrián] tres titulares que rotan sobre el vídeo (frases 1, 4 y 6).
   Todos en la misma celda de rejilla: la altura es la del más alto y no salta. */
.hero .v3-rot{display:grid;margin:18px auto 0}
.hero .v3-rot > h1,.hero .v3-rot > .v3-h{grid-area:1/1;margin:0;align-self:center;
  transition:opacity 1s var(--v3-ease),transform 1s var(--v3-ease),filter 1s var(--v3-ease)}
.hero .v3-rot > :not(.on){opacity:0;transform:translateY(12px);filter:blur(6px);pointer-events:none}
.hero .v3-rot > .v3-h{font-family:var(--sans);font-size:clamp(2.6rem,6.4vw,4.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:#f6f2ea;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .v3-rot > .v3-h .gold{background:linear-gradient(100deg,#f3e9d4 0%,#d9c7a1 45%,#c4ae84 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){.hero .v3-rot > *{transition:none}}

/* [14-09] logo nuevo (anillo con corte + brillo) en el nav de la propuesta */
.brand svg.v3-mark{width:30px;height:30px}

/* ═══ OFERTA DE LANZAMIENTO fuera del «pegote» (propuesta, ver wedcut-v3-oferta.js) ═════ */
/* En Precios desaparecen la tarjeta de oferta y la banda de lanzamiento de encima de las cuotas */
.t-lanz{display:none!important}
#t-oferta{margin:0}
.v3-oferta-a #t-oferta,.v3-oferta-c #t-oferta{display:none!important}

/* la coma de los precios de la oferta (la regla en línea de la página ganaba a la de arriba) */
.t-oferta .t-of-h b,#t-cuota-zona .t-cuota .t-precio .t-p{font-variant-numeric:normal!important;letter-spacing:-.02em}

/* barra de aviso arriba, en todas las páginas */
.v3-bar{position:relative;z-index:101;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 52px;
  background:linear-gradient(90deg,rgba(92,110,130,.55),rgba(140,120,88,.55)),#17191c;border-bottom:1px solid rgba(236,232,225,.14);color:#f3eee4;font-size:14px}
.v3-bar-in{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;text-align:center}
.v3-bar-k{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#eadcbd;border:1px solid rgba(234,220,189,.4);border-radius:999px;padding:3px 10px}
.v3-bar-c{display:inline-flex;align-items:baseline;gap:6px;color:#e2ddd4}
.v3-bar-n{font-family:var(--mono,'JetBrains Mono',monospace);font-variant-numeric:tabular-nums;font-size:13px}
.v3-bar-n b{color:#fff;font-weight:500}
.v3-bar-a{color:#eadcbd;font-weight:600;white-space:nowrap}
.v3-bar-a:hover{color:#fff}
.v3-bar-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#cfcac1;font-size:20px;cursor:pointer}
.v3-bar-x:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:700px){.v3-bar{font-size:13px;padding:8px 44px 8px 14px;justify-content:flex-start}.v3-bar-in{justify-content:flex-start;text-align:left;gap:4px 10px}.v3-bar-k{display:none}}

/* B · ventana lateral */
.v3-pop{position:fixed;right:24px;bottom:24px;z-index:90;width:min(360px,calc(100vw - 32px));padding:22px 22px 18px;border-radius:22px;
  border:1px solid rgba(217,199,161,.35);background:radial-gradient(120% 70% at 0% 0%,rgba(217,199,161,.22),transparent 60%),rgba(24,26,30,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .45s var(--v3-ease,ease),transform .45s var(--v3-ease,ease)}
.v3-pop.on{opacity:1;transform:none;pointer-events:auto}
.v3-pop .t-oferta{max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left}
.v3-pop .t-of-h{font-size:22px;margin-top:10px}
.v3-pop .t-of-d{font-size:13.5px}
.v3-pop-btn{width:100%;justify-content:center;margin-top:16px;padding:13px 18px}
.v3-pop-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#cfcac1;font-size:20px;cursor:pointer}
.v3-pop-x:hover{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:700px){.v3-pop{right:12px;left:12px;bottom:12px;width:auto}}
@media (prefers-reduced-motion:reduce){.v3-pop{transition:none}}

/* C · etiqueta en la tarjeta mensual */
.v3-chip{order:0;display:flex;flex-direction:column;gap:2px;margin:-8px 0 18px;padding:10px 14px;border-radius:14px;border:1px solid rgba(217,199,161,.35);background:rgba(217,199,161,.08)}
.v3-chip-k{font-weight:700;color:#eadcbd;font-size:14px}
.v3-chip-d{font-size:12.5px;color:var(--muted)}
#t-cuota-zona .t-cuota .v3-chip{order:1}
#t-cuota-zona .t-cuota .t-talla{order:0}

/* sin la banda de lanzamiento, el titular de la cuota quedaba pegado al texto de arriba */
.proxi h2[data-i18n="t_cuota_h"]{margin-top:clamp(48px,6vw,80px)!important}

/* C · la etiqueta se montaba sobre el nombre del plan: va debajo, con aire */
#t-cuota-zona .t-cuota .v3-chip{margin:16px 0 0}

/* ═══ 14-09 · RONDA 4 (Adrián) ═══════════════════════════════════════════════ */

/* portada: fuera la línea de «selección de brutos · …» y el botón «Cómo funciona» */
.hero.v3-hero .hero-trust{display:none}
.hero.v3-hero .hero-cta a[href$="about.html"]{display:none}

/* «Para editores y videógrafos de boda»: bajo los botones, como una firma y no como píldora */
.hero.v3-hero .tag{border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:30px auto 0;
  display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--sans);font-size:15px;letter-spacing:.01em;color:#ddd7cc;text-transform:none}
.hero.v3-hero .tag .dot{display:none}
.hero.v3-hero .tag::before,.hero.v3-hero .tag::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,199,161,.7))}
.hero.v3-hero .tag::after{background:linear-gradient(90deg,rgba(217,199,161,.7),transparent)}

/* precios: la oferta vive en la barra y en la tarjeta mensual (opción A + etiqueta) */
.v3-oferta #t-oferta{display:none!important}
.v3-pop,.v3-chip{display:none!important}
#t-cuota-zona .t-cuota{position:relative}
#t-cuota-zona .t-cuota.v3-con-regalo{border-color:rgba(217,199,161,.42);padding-top:46px;
  background:radial-gradient(90% 55% at 50% 0%,rgba(217,199,161,.16),transparent 62%),linear-gradient(180deg,rgba(255,250,240,.055),rgba(255,250,240,.02))}
.v3-gift-tab{position:absolute;top:-17px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 18px 8px 14px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.005em;color:#211b10;
  background:linear-gradient(135deg,#f6ecd6 0%,#dcc79c 48%,#bfa370 100%);
  box-shadow:0 10px 26px -10px rgba(217,199,161,.65),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.08)}
.v3-gift-tab svg{width:17px;height:17px;flex:none}
#t-cuota-zona .t-cuota .t-precio{order:2}
.v3-gift-d{order:3;display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:11px 14px;border-radius:14px;
  background:rgba(217,199,161,.08);border:1px solid rgba(217,199,161,.22);color:#d8d2c7;font-size:14px;line-height:1.45}
.v3-gift-d::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23211b10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat,linear-gradient(135deg,#f3e7cc,#c9ae7c)}
.v3-gift-d b{color:#f3e7cc;font-weight:700}
.v3-gift-d[hidden]{display:none}
#t-cuota-zona .t-cuota .t-brutos{order:4}
#t-cuota-zona .t-cuota .btn{order:5}
@media(max-width:760px){#t-cuota-zona{row-gap:34px}.v3-gift-tab{font-size:13px}}

/* «con qué funciona»: Mac y Windows, en todo el mundo y los tres editores */
.v3-compat{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:34px auto 0;max-width:1000px}
.v3-compat.left{justify-content:flex-start;margin-left:0}
.v3-pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(20,22,25,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#e2ddd4;font-size:15.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.v3-pill > svg,.v3-os svg{width:19px;height:19px;color:#e9e4db;flex:none}
.v3-os{display:inline-flex;gap:6px}
.v3-apps{gap:14px;padding:0 18px}
.v3-apps svg{width:30px;height:30px}
.v3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){.v3-pill{min-height:46px;font-size:14.5px;padding:0 16px}.v3-apps svg{width:27px;height:27px}}

/* móvil: el importe del regalo no se parte (el importe partido en dos líneas) y la firma del hero no se aprieta entre las rayas */
.v3-gift-d b{white-space:nowrap}
@media(max-width:600px){
  .hero.v3-hero .tag{font-size:14px;gap:10px;padding:0 8px}
  .hero.v3-hero .tag::before,.hero.v3-hero .tag::after{width:18px;flex:none}
}

/* ═══ 14-09 · MI CUENTA · el panel de saldo y cuota «se veía desaliñado» (Adrián) ═══════════
   · los <button> no heredan la tipografía: «Gestionar mi cuota» salía en Arial y «Añadir bodas»
     (que es un enlace) en la de la web;
   · «Gestionar mi cuota» es secundario (.btn.sec) pero cogía el relleno del principal;
   · los botones medían 64 px de alto y no estaban a la misma altura a los dos lados. */
button.btn{font-family:inherit}
.btn.sec{background:rgba(20,22,25,.35);border:1px solid var(--line2);color:var(--cream);box-shadow:none}
.btn.sec:hover{background:rgba(20,22,25,.5);border-color:rgba(217,199,161,.5);filter:none;box-shadow:none}
.c-card{background:linear-gradient(180deg,rgba(255,250,240,.05),rgba(255,250,240,.018));border:1px solid var(--line);border-radius:26px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.c-estado > section{display:flex;flex-direction:column;align-items:flex-start}
.c-estado > .sep{background:linear-gradient(180deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent)}
.c-estado .et{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.c-estado .n{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:48px;font-variant-numeric:normal;min-height:48px}
.c-estado .cuota{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;min-height:48px;display:flex;align-items:center}
.c-estado .p,.c-estado .fecha{color:var(--muted);font-size:14px;font-weight:400;line-height:1.45;margin-top:10px}
.c-estado .acc{margin-top:auto;padding-top:22px;gap:10px}
.c-estado .acc .btn{min-height:44px;padding:0 20px;font-size:14.5px;font-weight:600;border-radius:12px;margin-top:0}
.c-estado .acc .btn:not(.sec){box-shadow:0 8px 22px -12px rgba(185,165,126,.5),inset 0 1px 0 rgba(255,255,255,.14)}
@media (max-width:620px){.c-estado .acc{margin-top:0}.c-estado .n,.c-estado .cuota{min-height:0}}