/* site.css — componentes compartidos urpebank.com multi-página («Mercury completo», 31-ago-2026)
   Estructura calcada de mercury.com en clave verde-pastel (tokens en verde-tokens-v1.css).
   Componentes: navbar+mega-dropdowns, píldora disclaimer, héroes, splits, celdas, tabs,
   FAQ, precios, cifras, cierre+footer legal, reveals con animation-timeline. */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--lienzo); color:var(--ink); font-family:var(--sans); line-height:1.6; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 1.4rem; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
section{ padding:5rem 0; }
h1{ font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem,5vw,3.9rem); line-height:1.04;
  letter-spacing:-.03em; margin:0 auto 1rem; }
h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,3.8vw,2.7rem); line-height:1.12;
  margin:0 0 .7rem; letter-spacing:-.02em; }
h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; line-height:1.2; margin:0 0 .5rem; letter-spacing:-.01em; }
.eyebrow{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--verde-ink); }
.sub{ color:var(--sub); }
.btn-verde{ display:inline-block; background:var(--verde); color:#fff; border:0; border-radius:10px; padding:.7rem 1.3rem;
  font-family:var(--logo); font-weight:600; font-size:.9rem; cursor:pointer; transition:background .18s ease, transform .18s ease; }
.btn-verde:hover{ background:var(--verde-ink); transform:translateY(-1px); }
.btn-claro{ display:inline-block; background:var(--verde-suave); color:var(--verde-ink); border:0; border-radius:10px;
  padding:.7rem 1.3rem; font-family:var(--logo); font-weight:600; font-size:.9rem; cursor:pointer; transition:background .18s ease; }
.btn-claro:hover{ background:#CFE2D5; }

/* ————— transición entre páginas (calcado del fade suave de Mercury) ————— */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation-duration:.14s; }
  ::view-transition-new(root){ animation-duration:.18s; }
}

/* ————— navbar + mega dropdowns ————— */
.navbar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--lienzo) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); }
nav{ display:flex; justify-content:space-between; align-items:center; padding:.9rem 0; }
.wordmark{ font-family:var(--logo); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; }
.wordmark small{ font-weight:400; color:var(--sub); }
.nav-links{ display:flex; gap:.4rem; align-items:center; font-size:.9rem; }
.nav-item{ position:relative; }
.nav-trigger{ display:flex; align-items:center; gap:.35rem; background:none; border:0; font:inherit; color:var(--sub);
  padding:.55rem .8rem; border-radius:8px; cursor:pointer; transition:color .15s ease, background .15s ease; }
.nav-trigger svg{ transition:transform .18s ease; }
.nav-item:hover .nav-trigger, .nav-item.abierto .nav-trigger{ color:var(--ink); background:var(--lienzo-tinte); }
.nav-item.abierto .nav-trigger svg{ transform:rotate(180deg); }
.nav-item.actual .nav-trigger, .nav-link-directo.actual{ color:var(--ink); font-weight:600; }
.nav-link-directo{ color:var(--sub); padding:.55rem .8rem; border-radius:8px; transition:color .15s ease, background .15s ease; }
.nav-link-directo:hover{ color:var(--ink); background:var(--lienzo-tinte); }
.nav-cta{ margin-left:.6rem; }
.nav-panel{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--superficie); border:1px solid var(--hairline); border-radius:16px; padding:1rem;
  box-shadow:0 24px 60px rgba(18,53,40,.14); display:flex; gap:1rem; min-width:320px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility 0s .18s; }
.nav-item.abierto .nav-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s; }
.nav-panel-ancha{ min-width:720px; }
.panel-col{ display:flex; flex-direction:column; min-width:220px; }
.panel-head{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--sub);
  padding:.55rem .8rem .3rem; }
.panel-col > a{ display:block; padding:.55rem .8rem; border-radius:10px; transition:background .15s ease; }
.panel-col > a:hover{ background:var(--lienzo-tinte); }
.panel-col > a b{ display:block; font-size:.92rem; font-weight:600; font-family:var(--logo); }
.panel-col > a span{ display:block; font-size:.8rem; color:var(--sub); line-height:1.45; margin-top:.1rem; }
.panel-destacada{ justify-content:stretch; }
.panel-card{ display:flex; flex-direction:column; gap:.35rem; background:var(--lienzo-tinte-2); border-radius:12px;
  padding:1.1rem; height:100%; transition:background .15s ease; }
.panel-card:hover{ background:var(--verde-suave); }
.panel-card b{ font-family:var(--serif); font-weight:400; font-size:1.15rem; }
.panel-card span:last-child{ font-size:.82rem; color:var(--sub); line-height:1.5; }
.nav-burger{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease; }

/* ————— píldora sticky de disclaimer (firma Mercury) ————— */
.pildora-legal{ position:fixed; left:50%; transform:translateX(-50%); bottom:1.1rem; z-index:40;
  background:var(--verde-oscuro); color:#CFE2D5; font-size:.72rem; line-height:1.5; padding:.55rem 1.2rem;
  border-radius:999px; max-width:min(92vw, 62rem); text-align:center; box-shadow:0 10px 30px rgba(18,53,40,.28); }
.pildora-legal a{ color:#EFF5F0; text-decoration:underline; }

/* ————— héroe centrado de producto ————— */
.hero-centro{ text-align:center; padding:4.5rem 0 0; }
.hero-centro h1{ max-width:880px; }
.hero-centro .sub{ font-size:1.05rem; max-width:36rem; margin:0 auto 1.6rem; }
.hero-media{ margin-top:3rem; }
.hero-media img{ width:min(96%,1060px); border-radius:14px 14px 0 0; border:1px solid var(--hairline); border-bottom:0;
  box-shadow:0 30px 80px rgba(18,53,40,.14); display:block; margin:0 auto; }
.hero-borde{ border-bottom:1px solid var(--hairline); }
form.lista{ display:flex; gap:.6rem; max-width:27rem; margin:0 auto; justify-content:center; }
form.lista input{ flex:1; background:#fff; border:1px solid var(--hairline); border-radius:10px;
  color:var(--ink); padding:.8rem 1rem; font-size:.95rem; min-width:0; }
form.lista input:focus{ outline:2px solid var(--verde); }
.resultado{ margin-top:1rem; color:var(--verde-ink); font-weight:600; display:none; }
.resultado .pos{ font-family:var(--serif); font-size:1.5rem; }
.nota-fdic{ margin-top:.9rem; font-size:.72rem; color:var(--sub); }

/* ————— grid de valor (celdas) ————— */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.2rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:2.2rem; }
.celda{ background:var(--superficie); border:1px solid var(--hairline); border-radius:16px; padding:1.5rem;
  transition:transform .2s ease, box-shadow .2s ease; }
.celda:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(18,53,40,.10); }
.celda .ic{ width:38px; height:38px; border-radius:10px; background:var(--verde-suave); color:var(--verde-ink);
  display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:.9rem; }
.celda b{ display:block; font-size:1rem; margin-bottom:.3rem; }
.celda p{ margin:0; color:var(--sub); font-size:.9rem; }
a.celda{ display:block; }
a.celda .mas{ display:inline-block; margin-top:.8rem; color:var(--verde-ink); font-weight:600; font-size:.85rem; }
.tinte{ background:var(--lienzo-tinte); border-top:1px solid var(--hairline); }
.tinte-2{ background:var(--lienzo-tinte-2); }
.tinte .celda, .tinte-2 .celda{ border-color:transparent; }

/* ————— split (media + texto con flechas, calcado) ————— */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.4rem; align-items:center; }
.split + .split{ margin-top:4.5rem; }
.split.invertida .split-media{ order:2; }
.split-texto h2{ max-width:30rem; }
.split-texto .raya{ border:0; border-top:1px solid var(--hairline); margin:1.1rem 0 1.2rem; }
.flechas{ list-style:none; margin:0; padding:0; }
.flechas li{ position:relative; padding:.42rem 0 .42rem 1.6rem; color:var(--sub); font-size:.95rem; }
.flechas li::before{ content:"→"; position:absolute; left:0; color:var(--verde-ink); }
.flechas li b{ color:var(--ink); font-weight:600; }
.split-media{ background:var(--lienzo-tinte-2); border-radius:18px; padding:2rem; }
.split-media img{ width:100%; height:auto; border-radius:10px; display:block; }
.split-media.movil img{ width:auto; max-height:520px; margin:0 auto; }

/* ————— mini-mockups UI inline (nitidez infinita, estilo Mercury) ————— */
.ui-card{ background:#fff; border:1px solid var(--hairline); border-radius:14px; padding:1.1rem 1.2rem;
  box-shadow:0 18px 44px rgba(18,53,40,.10); font-size:.85rem; text-align:left; }
.ui-card + .ui-card{ margin-top:.9rem; }
.ui-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; }
.ui-head b{ font-family:var(--logo); font-weight:600; font-size:.92rem; }
.ui-head span{ font-size:.72rem; color:var(--sub); }
.ui-monto{ font-family:var(--serif); font-size:1.7rem; letter-spacing:-.01em; }
.ui-fila{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-top:1px solid var(--lienzo-tinte-2); color:var(--sub); }
.ui-fila:first-of-type{ border-top:0; }
.ui-fila b{ color:var(--ink); font-weight:600; }
.ui-chip{ display:inline-block; background:var(--verde-suave); color:var(--verde-ink); border-radius:999px;
  padding:.14rem .6rem; font-size:.7rem; font-weight:700; }
.ui-chip.neutro{ background:var(--lienzo-tinte-2); color:var(--sub); }
.ui-barra{ height:8px; border-radius:999px; background:var(--lienzo-tinte-2); overflow:hidden; margin-top:.5rem; }
.ui-barra i{ display:block; height:100%; background:var(--verde); border-radius:999px; }

/* ————— tabs (controles / testimonios) ————— */
.tabs{ margin-top:2rem; }
.tab-botones{ display:flex; gap:.5rem; flex-wrap:wrap; border-bottom:1px solid var(--hairline); }
.tab-botones button{ background:none; border:0; border-bottom:2px solid transparent; padding:.6rem 1rem; font:inherit;
  font-weight:600; font-size:.9rem; color:var(--sub); cursor:pointer; margin-bottom:-1px; transition:color .15s ease; }
.tab-botones button[aria-selected="true"]{ color:var(--verde-ink); border-bottom-color:var(--verde); }
.tab-botones button:hover{ color:var(--ink); }
.tab-panel{ display:none; padding-top:1.6rem; }
.tab-panel.activo{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:center; }

/* ————— FAQ accordion (details estilizado) ————— */
.faq{ max-width:52rem; margin:2.2rem auto 0; }
.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.05rem 0; font-family:var(--serif); font-size:1.1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--verde-ink); font-size:1.3rem; font-family:var(--logo); flex:0 0 auto;
  transition:transform .18s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-cuerpo{ padding:0 2rem 1.1rem 0; color:var(--sub); font-size:.93rem; }
.faq .faq-cuerpo a{ color:var(--verde-ink); text-decoration:underline; }

/* ————— cifras ————— */
.cifras .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.cifras b{ display:block; font-family:var(--serif); font-weight:400; font-size:2.1rem; color:var(--verde-ink); }
.cifras span{ font-size:.82rem; color:var(--sub); }

/* ————— cita ————— */
.cita{ text-align:center; }
.cita blockquote{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.35;
  max-width:46rem; margin:0 auto 1rem; letter-spacing:-.01em; }
.cita cite{ font-style:normal; color:var(--sub); font-size:.88rem; }

/* ————— precios ————— */
.plan-caja{ border:1px solid var(--hairline); border-radius:18px; background:var(--superficie); overflow:hidden; margin-top:2.4rem; }
.plan-cabecera{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1.6rem;
  border-bottom:1px solid var(--hairline); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--sub); }
.plan-cuerpo{ display:grid; grid-template-columns:1.1fr .9fr; }
.plan-col{ padding:2rem 1.8rem; }
.plan-col + .plan-col{ border-left:1px solid var(--hairline); background:var(--lienzo-tinte); }
.plan-nombre{ font-family:var(--serif); font-size:1.6rem; }
.plan-precio{ font-family:var(--serif); font-size:2.4rem; letter-spacing:-.02em; margin:.2rem 0 .6rem; }
.plan-precio small{ font-size:1rem; color:var(--sub); font-family:var(--sans); }
.check{ list-style:none; margin:1rem 0 0; padding:0; }
.check li{ position:relative; padding:.4rem 0 .4rem 1.7rem; color:var(--sub); font-size:.93rem; }
.check li::before{ content:"✓"; position:absolute; left:0; color:var(--verde-ink); font-weight:700; }
.tarifas{ width:100%; border-collapse:collapse; margin-top:2.2rem; font-size:.93rem; }
.tarifas caption{ text-align:left; font-family:var(--serif); font-size:1.35rem; padding-bottom:.9rem; }
.tarifas th{ text-align:left; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sub);
  border-bottom:1px solid var(--hairline); padding:.6rem 0; font-weight:700; }
.tarifas td{ border-bottom:1px solid var(--lienzo-tinte-2); padding:.8rem 0; }
.tarifas td:last-child, .tarifas th:last-child{ text-align:right; }
.tarifas .gratis{ color:var(--verde-ink); font-weight:700; }

/* ————— cierre + footer (verde oscuro) ————— */
.oscuro{ background:var(--verde-oscuro); color:#EFF5F0; }
.cierre{ text-align:center; }
.cierre h2{ color:#EFF5F0; }
.cierre .sub{ color:var(--verde-claro); }
.cierre form.lista input{ background:rgba(255,255,255,.06); border-color:#2A5643; color:#EFF5F0; }
.cierre form.lista input::placeholder{ color:#7FA890; }
.cierre .resultado{ color:var(--verde-claro); }
footer{ padding:3rem 0 3.2rem; font-size:.85rem; color:#9FBFAC; border-top:1px solid #1C4433; }
.foot-cols{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2rem; padding-bottom:2.4rem; }
.foot-marca .wordmark{ color:#EFF5F0; }
.foot-marca .wordmark small{ color:#7FA890; }
.foot-tag{ font-size:.85rem; color:#7FA890; margin:.7rem 0 .4rem; max-width:16rem; }
.foot-social a{ color:#CFE2D5; }
.foot-col{ display:flex; flex-direction:column; gap:.45rem; }
.foot-col b{ color:#EFF5F0; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem; }
.foot-col a{ color:#9FBFAC; font-size:.85rem; transition:color .15s ease; }
.foot-col a:hover{ color:#EFF5F0; }
.foot-legal{ border-top:1px solid #1C4433; padding-top:2rem; font-size:.74rem; color:#7FA890; }
.foot-legal p{ max-width:70rem; line-height:1.7; margin:0 0 .9rem; }
.foot-legal b{ color:#9FBFAC; }
.foot-legal a{ color:#CFE2D5; text-decoration:underline; }
.foot-copy{ margin-top:1.6rem; }

/* ————— reveals al scroll (calcado del fade+rise de Mercury) ————— */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rev{ animation:revSube linear both; animation-timeline:view(); animation-range:entry 0% entry 42%; }
  }
}
@keyframes revSube{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ————— responsive ————— */
@media (max-width:960px){
  /* sin blur en móvil: backdrop-filter volvería al navbar containing block
     del menú fixed y lo recortaría a una franja */
  .navbar{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--lienzo); }
  .nav-burger{ display:block; }
  .nav-links{ display:none; position:fixed; inset:57px 0 0 0; background:var(--lienzo); overflow:auto;
    flex-direction:column; align-items:stretch; padding:1rem 1.4rem 3rem; gap:.2rem; }
  .nav-links.movil-abierto{ display:flex; }
  html.nav-bloquea-scroll{ overflow:hidden; }
  .nav-item{ border-bottom:1px solid var(--hairline); }
  .nav-trigger{ width:100%; justify-content:space-between; padding:1rem .2rem; font-size:1.05rem; }
  .nav-panel{ position:static; transform:none; opacity:1; visibility:hidden; display:none; box-shadow:none;
    border:0; padding:0 0 1rem; min-width:0; flex-direction:column; }
  .nav-item.abierto .nav-panel{ display:flex; visibility:visible; transform:none; }
  .nav-panel-ancha{ min-width:0; }
  .nav-link-directo{ padding:1rem .2rem; font-size:1.05rem; border-bottom:1px solid var(--hairline); }
  .nav-cta{ margin:1.2rem 0 0; text-align:center; }
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .cifras .grid{ grid-template-columns:repeat(2,1fr); }
  .split, .tab-panel.activo{ grid-template-columns:1fr; gap:1.8rem; }
  .split.invertida .split-media{ order:0; }
  .plan-cuerpo{ grid-template-columns:1fr; }
  .plan-col + .plan-col{ border-left:0; border-top:1px solid var(--hairline); }
  .foot-cols{ grid-template-columns:1fr 1fr; }
}
/* en pantallas chicas la píldora taparía media pantalla: la disclosure ya vive
   en la nota del héroe y en el footer legal completo */
@media (max-width:640px){
  .pildora-legal{ display:none; }
}