/* ============================================================
   BEBOLOGY — hoja de estilos
   Paleta de marca. Si cambias un color aquí, cambia en todo el sitio.
   ============================================================ */
:root{
  --bg:        #12081f;
  --bg-2:      #1c0f30;
  --bg-3:      #241541;
  --linea:     #382660;

  --fucsia:    #ff1f8f;
  --fucsia-2:  #ff5cbb;
  --naranja:   #ff6a1f;
  --turquesa:  #2fe6d4;
  --amarillo:  #ffd23f;
  --verde:     #38d478;

  /* colores tomados del logo, para que la marca se escriba igual en todo el sitio */
  --logo-rosa:    #e24aa0;
  --logo-violeta: #7a88d4;
  --logo-navy:    #102050;

  --tinta:     #fff6fb;
  --tinta-2:   #c9b8d9;
  --tinta-3:   #8f7ba3;

  --display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --ancho: 1180px;
  --radio: 20px;
  --sombra-cta: 0 12px 32px -10px rgba(255,31,143,.6);
  --sombra: 0 24px 48px -24px rgba(0,0,0,.75);
}

*{ box-sizing:border-box; }
/* el atributo hidden debe ganarle a cualquier display de abajo */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.02; letter-spacing:.01em; }

/* ---------- 1 · MARQUESINA ---------- */
.marquesina{
  background:linear-gradient(90deg,var(--fucsia),var(--naranja));
  color:#fff; overflow:hidden; padding:.5rem 0; position:relative; z-index:60;
}
.marquesina__pista{ display:flex; width:max-content; animation:correr 28s linear infinite; }
.marquesina__item{ font-size:.78rem; font-weight:700; letter-spacing:.06em; white-space:nowrap; text-transform:uppercase; }
.marquesina__sep{ opacity:.55; margin:0 1.4rem; font-size:.6rem; align-self:center; }
@keyframes correr{ to{ transform:translateX(-50%); } }

/* ---------- 2 · HEADER ---------- */
.cabecera{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  padding:.7rem 1rem; background:rgba(18,8,31,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--linea);
}
.cabecera__menu{ background:none; border:0; cursor:pointer; display:grid; gap:5px; padding:10px 8px; }
.cabecera__menu span{ width:22px; height:2px; background:var(--tinta); border-radius:2px; transition:.25s; }
.cabecera__menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.cabecera__menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.cabecera__logo{ justify-self:center; text-decoration:none; }
.cabecera__logo img{ height:34px; width:auto; }
.cabecera__logoTexto{ font-family:var(--display); font-size:1.5rem; letter-spacing:.04em; color:var(--tinta); }
.cabecera__carrito{ justify-self:end; color:var(--tinta); display:grid; place-items:center; width:40px; height:40px; }

.menu{ background:var(--bg-2); border-bottom:1px solid var(--linea); padding:.6rem 1rem 1rem; display:grid; gap:.1rem; position:sticky; top:52px; z-index:49; }
.menu a{ padding:.7rem .4rem; text-decoration:none; font-weight:600; border-bottom:1px solid rgba(56,38,96,.5); }
.menu a:last-child{ border-bottom:0; }

/* ---------- utilidades ---------- */
.etiqueta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--turquesa); margin:0 0 1rem; display:flex; align-items:center; gap:.5rem;
}
.punto{ width:8px; height:8px; border-radius:50%; background:var(--fucsia); box-shadow:0 0 10px var(--fucsia); flex:none; }
.punto--amarillo{ background:var(--amarillo); box-shadow:0 0 10px var(--amarillo); }
.punto--verde{ background:var(--verde); box-shadow:0 0 10px var(--verde); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:linear-gradient(135deg,var(--fucsia),var(--naranja)); color:#fff;
  font-weight:800; font-size:1rem; padding:.95rem 1.6rem; border:0; border-radius:999px;
  text-decoration:none; cursor:pointer; box-shadow:var(--sombra-cta);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(255,31,143,.75); }
.btn:active{ transform:translateY(0); }
.btn--grande{ font-size:1.08rem; padding:1.1rem 2rem; }
.btn--bloque{ width:100%; font-size:1.12rem; padding:1.15rem 1.5rem; margin-top:.4rem; }
.btn--chico{ padding:.7rem 1.2rem; font-size:.92rem; }

/* marco de foto: muestra el hueco cuando la imagen aún no existe */
.marco{ position:relative; display:block; border-radius:var(--radio); overflow:hidden; background:var(--bg-3); }
.marco img{ width:100%; height:100%; object-fit:cover; }
.marco img[data-falta]{ opacity:0; }
.marco::after{
  content:attr(data-foto); position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; text-align:center; padding:1.4rem;
  font-family:var(--mono); font-size:.72rem; line-height:1.5; color:var(--tinta-3);
  border:2px dashed var(--linea); border-radius:var(--radio); background:var(--bg-3);
}
.marco.sin-foto::after{ display:flex; }

/* ---------- 3 · HERO ----------
   En celular todo tiene que caber de una: etiqueta, titular, subtítulo,
   botón y la foto del producto, sin que toque hacer scroll para entender
   qué se vende. Por eso los tamaños son contenidos y centrados. */
.hero{
  max-width:var(--ancho); margin:0 auto; padding:1.3rem 1.1rem .8rem;
  display:grid; gap:1.1rem;
  background:radial-gradient(75% 55% at 50% 0%, rgba(255,31,143,.16), transparent 70%);
  text-align:center;
}
/* La etiqueta es un detalle sutil, no compite con el titular */
.hero .etiqueta{
  justify-content:center; font-size:.52rem; letter-spacing:.12em;
  margin-bottom:.9rem; opacity:.85;
}
.hero .etiqueta .punto{ display:none; }
/* El titular manda: corto y grande */
.hero__titulo{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.1rem,8.2vw,3.4rem); line-height:1;
  text-wrap:balance;   /* reparte las líneas parejo en vez de dejar una colgando */
}
.hero__titulo em{ font-style:normal; color:var(--logo-rosa); }
/* El subtítulo pasa a segundo plano: más chico y más gris */
.hero__bajada{
  color:var(--tinta-3); font-size:.82rem; line-height:1.5;
  margin:.9rem auto 1.3rem; max-width:52ch;
  text-wrap:pretty;
}
.hero__bajada b{ color:var(--tinta-2); font-weight:700; }
.hero__micro{
  font-size:.72rem; color:var(--tinta-3); margin:.75rem 0 0;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:center;
}
.hero__micro-sep{ opacity:.4; }
/* 16/9 porque hero.jpg es una toma ancha (1600x893). Con 4/3 se le
   recortaba el 26% de los lados y se perdia la caja de un extremo. */
.hero__media .marco{ aspect-ratio:16/9; box-shadow:var(--sombra); }

/* pantallas bajas: apretar un poco más para que la foto entre */
@media (max-width:859px) and (max-height:760px){
  .hero{ padding-top:.8rem; gap:.8rem; }
  .hero__titulo{ font-size:clamp(1.8rem,7.4vw,2.4rem); }
  .hero__bajada{ font-size:.78rem; margin:.7rem auto 1rem; }
  .hero .btn--grande{ font-size:.98rem; padding:.9rem 1.5rem; }
}

/* ---------- secciones ---------- */
.seccion{ max-width:var(--ancho); margin:0 auto; padding:3.6rem 1.1rem; }
.seccion--ancha{ max-width:1340px; }
.seccion--angosta{ max-width:760px; }
.seccion__eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fucsia); text-align:center; margin:0 0 .7rem;
}
.seccion__titulo{ font-family:var(--display); font-size:clamp(1.9rem,6.4vw,3rem); text-transform:uppercase; text-align:center; }
.seccion__bajada{ text-align:center; color:var(--tinta-2); margin:.9rem auto 2rem; max-width:52ch; }

/* ---------- 4 · OFERTAS ---------- */
.ofertas{ display:grid; gap:.9rem; max-width:620px; margin:0 auto; }
.oferta{
  position:relative; display:block; cursor:pointer;
  background:var(--bg-2); border:2px solid var(--linea); border-radius:var(--radio);
  padding:1.1rem; transition:border-color .2s, background .2s;
}
.oferta:has(input:checked){ border-color:var(--fucsia); background:var(--bg-3); box-shadow:0 0 0 4px rgba(255,31,143,.12); }
.oferta input{ position:absolute; opacity:0; pointer-events:none; }
.oferta__cinta{
  position:absolute; top:-11px; left:1.1rem;
  background:linear-gradient(135deg,var(--fucsia),var(--naranja)); color:#fff;
  font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px;
}
.oferta--destacada{ margin-top:.6rem; }
.oferta__cuerpo{ display:grid; grid-template-columns:74px 1fr; gap:.9rem; align-items:center; }
.oferta__foto{ width:74px; height:74px; border-radius:14px; flex:none; }
.oferta__foto::after{ font-size:.5rem; padding:.4rem; }
.oferta__info{ display:grid; gap:.12rem; }
.oferta__nombre{ font-weight:800; font-size:1.08rem; }
.oferta__desc{ font-size:.82rem; color:var(--tinta-3); }
.oferta__precios{ display:flex; align-items:baseline; gap:.5rem; margin-top:.25rem; }
.oferta__precio{ font-size:1.32rem; color:var(--amarillo); font-weight:800; }
.oferta__antes{ color:var(--tinta-3); font-size:.88rem; }
.oferta__cada{ font-size:.74rem; color:var(--turquesa); }
.oferta__bullets{ display:none; gap:.3rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--linea); }
.oferta:has(input:checked) .oferta__bullets{ display:grid; }
.oferta__bullets span{ font-size:.84rem; color:var(--tinta-2); }

/* ---- tarjetas de oferta del inicio (llevan a producto.html) ---- */
/* Las tres ofertas en una sola fila que se desliza con el dedo.
   La siguiente queda asomándose para que se note que hay más. */
.tarjetas{
  display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:.9rem .3rem .4rem;
  max-width:880px; margin:0 auto;
}
.tarjetas::-webkit-scrollbar{ display:none; }
.tar{
  scroll-snap-align:center; flex:0 0 min(250px,70vw);
  position:relative; display:grid; gap:.3rem; justify-items:center; text-align:center; text-decoration:none;
  background:var(--bg-2); border:2px solid var(--linea); border-radius:var(--radio);
  padding:1.3rem 1rem 1.1rem; transition:transform .2s, border-color .2s;
}
.tarjetas__ayuda{
  text-align:center; font-size:.74rem; color:var(--tinta-3);
  font-family:var(--mono); letter-spacing:.06em; margin:.3rem 0 0;
}
.tar:hover{ transform:translateY(-4px); border-color:var(--fucsia); }
.tar--top{ border-color:var(--fucsia-2); }
.tar__cinta{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(135deg,var(--fucsia),var(--naranja)); color:#fff;
  font-size:.58rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px;
}
.tar__foto{ width:100%; aspect-ratio:1/1; border-radius:14px; margin-bottom:.5rem; }
.tar__foto::after{ font-size:.5rem; padding:.5rem; }
.tar__nombre{ font-weight:800; font-size:1.05rem; }
.tar__bajada{ font-size:.76rem; color:var(--tinta-3); }
.tar__precios{ display:flex; align-items:baseline; gap:.45rem; margin-top:.3rem; }
.tar__precios b{ color:var(--amarillo); font-size:1.24rem; }
.tar__antes{ color:var(--tinta-3); font-size:.82rem; }
.tar__ahorro{ color:var(--verde); font-size:.68rem; font-weight:800; }
.tar__ver{ color:var(--fucsia-2); font-size:.8rem; font-weight:700; margin-top:.45rem; }
.tarjetas__cta{ display:flex; margin:1.8rem auto .9rem; width:fit-content; }
.despacho--centro{ justify-content:center; max-width:460px; margin:0 auto; }

.garantia{
  display:flex; gap:.75rem; align-items:flex-start;
  background:rgba(47,230,212,.07); border:1px solid rgba(47,230,212,.25);
  border-radius:14px; padding:.85rem 1rem; font-size:.84rem; color:var(--tinta-2);
}
.garantia b{ color:var(--turquesa); display:block; }
.garantia__icono{ color:var(--turquesa); font-size:1.1rem; line-height:1.3; }
.despacho{ font-size:.84rem; color:var(--tinta-2); display:flex; gap:.5rem; align-items:flex-start; margin:0; }
.despacho .punto{ margin-top:.45rem; }
.despacho__txt{ flex:1; }
.despacho b{ color:var(--tinta); }

/* ---------- 5 · VIDEOS ---------- */
/* Videos en fila deslizable: se arrastra con el dedo y cada uno se
   acomoda solo al centro. En escritorio entran varios a la vez. */
.videos{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:.3rem .3rem 1rem;
}
.videos::-webkit-scrollbar{ display:none; }
.vcard{
  scroll-snap-align:center; flex:0 0 min(300px,78vw);
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column;
}
.videos__ayuda{
  text-align:center; font-size:.74rem; color:var(--tinta-3);
  font-family:var(--mono); letter-spacing:.06em; margin:.2rem 0 0;
}
.vcard__media{ aspect-ratio:9/16; background:var(--bg-3); position:relative; }
.vcard__media video, .vcard__media img{ width:100%; height:100%; object-fit:cover; }
.vcard__hueco{
  position:absolute; inset:0; display:grid; place-content:center; gap:.6rem; text-align:center; padding:1.2rem;
  border:2px dashed var(--linea); border-radius:var(--radio);
  font-family:var(--mono); font-size:.7rem; color:var(--tinta-3); line-height:1.6;
}
.vcard__hueco b{ color:var(--tinta-2); font-size:1.6rem; display:block; }
.vcard__pie{ padding:.9rem 1rem 1.1rem; display:grid; gap:.55rem; }
.vcard__estrellas{ color:var(--amarillo); font-size:.8rem; }
.vcard__cita{ font-size:.92rem; font-style:italic; color:var(--tinta); }
.vcard__oferta{ display:flex; align-items:center; gap:.6rem; border-top:1px solid var(--linea); padding-top:.7rem; }
.vcard__precio{ color:var(--amarillo); font-weight:800; }

/* ---------- 6 · ALIADOS ---------- */
/* Los logos se achican en celular para que la fila no se parta */
/* Aliados uno encima del otro: logo chico a la izquierda, nombre al
   medio, "ver video" al final. Ocupa menos y se lee de una pasada. */
.aliados{ display:grid; gap:.6rem; max-width:540px; margin:0 auto; }
.aliado{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:14px;
  cursor:pointer; color:inherit; width:100%; padding:.7rem .9rem;
  display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:.85rem;
  text-align:left; transition:border-color .18s, transform .18s;
}
.aliado:hover{ border-color:var(--fucsia); transform:translateX(2px); }
.aliado__logo{
  width:46px; height:46px; border-radius:50%; object-fit:contain;
  background:#fff; padding:3px; box-shadow:0 0 0 1px var(--linea);
}
.aliado__info{ display:grid; gap:.1rem; min-width:0; }
.aliado__nombre{ font-weight:800; font-size:.94rem; display:block; }
.aliado__bajada{ font-size:.74rem; color:var(--tinta-3); display:block; text-align:left; }
.aliado__play{
  font-size:.64rem; color:var(--turquesa); font-family:var(--mono);
  letter-spacing:.07em; white-space:nowrap;
}
/* cuando haya 4+ aliados, la fila gira sola muy lento */
.aliados--marquesina{ flex-wrap:nowrap; width:max-content; animation:correr 60s linear infinite; }
.aliados--marquesina:hover{ animation-play-state:paused; }
.aliados__viewport{ overflow:hidden; }

/* ---------- 7 · RESEÑAS ---------- */
.resumen{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.resumen__nota{ font-family:var(--display); font-size:2.6rem; color:var(--amarillo); line-height:1; }
.resumen__det{ display:grid; gap:.15rem; }
.resumen__estrellas{ color:var(--amarillo); letter-spacing:.1em; }
.resumen__cant{ font-size:.8rem; color:var(--tinta-3); }

.filtros{ display:flex; gap:.45rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.chip{
  background:var(--bg-2); border:1px solid var(--linea); color:var(--tinta-2);
  font-size:.78rem; padding:.42rem .85rem; border-radius:999px; cursor:pointer; transition:.18s;
}
.chip:hover{ border-color:var(--fucsia-2); color:var(--tinta); }
.chip--on{ background:var(--fucsia); border-color:var(--fucsia); color:#fff; font-weight:700; }

/* Carrusel pensado para el pulgar: la tarjeta ocupa casi todo el ancho
   y las flechas van ABAJO y centradas, no a los lados. */
.carrusel{ display:grid; grid-template-areas:"pista pista" "ant sig"; justify-content:center; gap:.9rem .8rem; }
.carrusel__pista{ grid-area:pista; }
#resAnt{ grid-area:ant; justify-self:end; }
#resSig{ grid-area:sig; justify-self:start; }
.carrusel__flecha{
  background:var(--bg-2); border:1px solid var(--linea); color:var(--tinta);
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1; flex:none;
  transition:.18s;
}
.carrusel__flecha:hover{ border-color:var(--fucsia); color:var(--fucsia); }
.carrusel__pista{
  display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:.4rem; scroll-behavior:smooth;
}
.carrusel__pista::-webkit-scrollbar{ display:none; }

/* Tarjeta centrada: comillas, texto, estrellas y nombre, todo al centro */
.resena{
  scroll-snap-align:center; flex:0 0 min(430px,88vw);
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.9rem 1.5rem 1.6rem;
  display:grid; gap:1rem; align-content:center; justify-items:center; text-align:center;
  min-height:19rem;
}
.resena__comillas{
  font-family:var(--display); font-size:3rem; color:var(--fucsia);
  line-height:.55; display:block;
}
.resena__texto{
  font-size:1.12rem; line-height:1.4; color:var(--tinta); margin:0;
  text-wrap:pretty; max-width:28ch;
}
.resena__estrellas{ color:var(--amarillo); font-size:1.25rem; letter-spacing:.14em; }
.resena__autor{
  font-weight:800; font-size:.98rem; color:var(--tinta);
  display:flex; align-items:center; gap:.4rem;
}
.resena__ok{
  width:17px; height:17px; border-radius:50%; background:var(--turquesa); color:var(--bg);
  display:grid; place-items:center; font-size:.62rem; font-weight:900; flex:none;
}
.resena__prod{
  font-size:.86rem; color:var(--tinta-3); text-decoration:underline;
  text-underline-offset:3px;
}
.resena__prod:hover{ color:var(--fucsia-2); }
.carrusel__puntos{ display:flex; gap:.35rem; justify-content:center; margin-top:1.1rem; }
.carrusel__punto{ width:7px; height:7px; border-radius:50%; background:var(--linea); border:0; padding:0; cursor:pointer; }
.carrusel__punto--on{ background:var(--fucsia); width:20px; border-radius:999px; }

/* ---------- 8 · ANTES / DESPUÉS ---------- */
.seccion--efecto{ display:grid; gap:2rem; }
.efecto__texto .seccion__eyebrow,
.efecto__texto .seccion__titulo,
.efecto__texto .seccion__bajada{ text-align:left; margin-left:0; }
.efecto__texto .seccion__bajada{ margin-bottom:1.4rem; }
/* 16/9 para que calce exacto con antes.jpg y despues.jpg (1600x893).
   Con 4/3 se recortaba el 26% de los lados y el deslizador le cortaba
   la cara a las personas de las puntas del sofa, que son justo las que
   hacen que se entienda el antes y el despues. */
.comparador__caja{
  position:relative; aspect-ratio:16/9; border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra); background:var(--bg-3); user-select:none;
}
.comparador__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparador__recorte{ position:absolute; inset:0; width:50%; overflow:hidden; }
.comparador__recorte .comparador__img{ width:100vw; max-width:none; }
.comparador__hueco{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:2rem;
  border:2px dashed var(--linea); border-radius:var(--radio); background:var(--bg-3);
  font-family:var(--mono); font-size:.74rem; line-height:1.6; color:var(--tinta-3);
}
.comparador__hueco b{ color:var(--amarillo); }
.comparador--vacio .comparador__img,
.comparador--vacio .comparador__recorte,
.comparador--vacio .comparador__manija,
.comparador--vacio .comparador__etq{ display:none; }
.comparador__etq{
  position:absolute; top:.9rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  background:rgba(18,8,31,.78); padding:.3rem .6rem; border-radius:999px; backdrop-filter:blur(4px);
}
.comparador__etq--izq{ left:.9rem; color:var(--tinta-2); }
.comparador__etq--der{ right:.9rem; color:var(--amarillo); }
.comparador__rango{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0;
}
.comparador__manija{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; pointer-events:none;
  box-shadow:0 0 18px rgba(255,255,255,.55);
}
.comparador__manija span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; color:var(--bg);
  display:grid; place-items:center; font-weight:800; font-size:.8rem; letter-spacing:-1px;
}

/* ---------- CÓMO SE JUEGA ---------- */
.pasos{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.paso{
  display:grid; grid-template-columns:48px 1fr; gap:1rem; align-items:center;
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--radio); padding:1.2rem;
}
.paso__num{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg,var(--fucsia),var(--naranja));
}
.paso h3{ font-size:1.05rem; margin-bottom:.25rem; }
.paso p{ margin:0; font-size:.9rem; color:var(--tinta-2); }
.paso__foto{ display:none; }
.c-rosa{ color:var(--fucsia); } .c-naranja{ color:var(--naranja); } .c-negro{ color:var(--tinta-3); }

/* ============================================================
   FICHA DE PRODUCTO  (producto.html)
   ============================================================ */
.cabecera__volver{
  justify-self:start; color:var(--tinta); text-decoration:none;
  width:40px; height:40px; display:grid; place-items:center; font-size:1.8rem; line-height:1;
}
.ficha{ max-width:var(--ancho); margin:0 auto; padding:1.6rem 1.1rem 2rem; display:grid; gap:1.6rem; }
.ficha__principal{ aspect-ratio:1/1; box-shadow:var(--sombra); }
/* La galeria va alternando fotos verticales (las cartas, el dado, el juego
   de frente) con fotos horizontales (la principal, el grupo jugando). En un
   recuadro cuadrado, recortar al vuelo le cortaba la mitad a unas o a otras.
   Con "contain" sale la foto completa siempre; como todas estan sobre fondo
   oscuro, las franjas no se notan contra el fondo de la pagina. */
.ficha__principal img{ object-fit:contain; }
.ficha__miniaturas{ display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-top:.55rem; }
.mini{ aspect-ratio:1/1; border:1px solid var(--linea); padding:0; cursor:pointer; background:var(--bg-3); transition:border-color .18s, transform .18s; }
.mini:hover{ transform:translateY(-2px); }
/* Marca cual es la que esta arriba, para que se note que son tocables. */
.mini--on{ border-color:var(--fucsia); }
.mini::after{ font-size:.5rem; padding:.3rem; }
.ficha__titulo{ font-family:var(--display); font-size:clamp(1.8rem,6vw,2.6rem); text-transform:uppercase; }
.ficha__rating{ display:flex; align-items:center; gap:.5rem; margin:.55rem 0 .2rem; }
.ficha__estrellas{ color:var(--amarillo); letter-spacing:.09em; }
.ficha__cant{ font-size:.82rem; color:var(--tinta-3); }
.ficha__resumen{ color:var(--tinta-2); font-size:.98rem; margin:.5rem 0 1.4rem; }
.ficha__resumen b{ color:var(--tinta); }
.ficha__eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fucsia); margin:0 0 .2rem;
}
.ficha__sub{ color:var(--tinta-3); font-size:.84rem; margin:0 0 1rem; }
.ficha__bullets{ list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.42rem; }
.ficha__bullets li{ font-size:.84rem; color:var(--tinta-2); }

/* ---- la escalera ---- */
.escalera{ display:grid; gap:.85rem; margin-bottom:1rem; }
.esc{
  position:relative; display:block; cursor:pointer;
  background:var(--bg-2); border:2px solid var(--linea); border-radius:16px;
  padding:.95rem 1rem; transition:border-color .18s, background .18s;
}
.esc--top{ margin-top:.65rem; }
.esc:has(input:checked){ border-color:var(--fucsia); background:var(--bg-3); box-shadow:0 0 0 4px rgba(255,31,143,.12); }
.esc input{ position:absolute; opacity:0; pointer-events:none; }
.esc__cinta{
  position:absolute; top:-11px; left:.9rem;
  background:linear-gradient(135deg,var(--fucsia),var(--naranja)); color:#fff;
  font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:999px;
}
.esc__fila{ display:grid; grid-template-columns:20px 54px 1fr auto; gap:.7rem; align-items:center; }
.esc__check{
  width:19px; height:19px; border-radius:50%; border:2px solid var(--tinta-3); position:relative;
}
.esc:has(input:checked) .esc__check{ border-color:var(--fucsia); }
.esc:has(input:checked) .esc__check::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--fucsia);
}
.esc__foto{ width:54px; height:54px; border-radius:11px; }
.esc__foto::after{ font-size:.42rem; padding:.2rem; }
.esc__info{ display:grid; gap:.1rem; min-width:0; }
.esc__nombre{ font-weight:800; font-size:1rem; }
.esc__bajada{ font-size:.76rem; color:var(--tinta-3); }
.esc__precios{ display:grid; justify-items:end; gap:.1rem; }
.esc__precio{ font-size:1.18rem; color:var(--amarillo); font-weight:800; }
.esc__antes{ color:var(--tinta-3); font-size:.78rem; }
.esc__ahorro{ color:var(--verde); font-size:.66rem; font-weight:800; letter-spacing:.03em; }
.esc__detalle{ display:none; gap:.3rem; margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--linea); }
.esc:has(input:checked) .esc__detalle{ display:grid; }
.esc__detalle span{ font-size:.82rem; color:var(--tinta-2); }
.esc__unidad{ color:var(--turquesa) !important; font-weight:700; }

.trae{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.trae li{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:12px;
  padding:.8rem 1rem; font-size:.92rem; color:var(--tinta-2);
}
.trae b{ color:var(--tinta); }

@media (min-width:860px){
  .ficha{ grid-template-columns:1fr 1fr; gap:3rem; align-items:start; padding:2.6rem 2rem 3rem; }
  .ficha__galeria{ position:sticky; top:84px; }
  .esc__fila{ grid-template-columns:20px 62px 1fr auto; }
  .esc__foto{ width:62px; height:62px; }
}

/* ============================================================
   PÁGINA LEGAL  (política de datos)
   Texto largo: columna angosta y buen interlineado para que se lea.
   ============================================================ */
.pagina-legal{ background:var(--bg); }
.legal{ max-width:720px; margin:0 auto; padding:2rem 1.2rem 4rem; }
.legal__titulo{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,6.4vw,2.4rem); line-height:1.05; margin-bottom:.5rem;
}
.legal__fecha{ color:var(--tinta-3); font-size:.8rem; margin:0 0 2rem; }
.legal h2{
  font-size:1.02rem; color:var(--fucsia-2); margin:2rem 0 .6rem;
  padding-top:1.3rem; border-top:1px solid var(--linea);
}
.legal p{ color:var(--tinta-2); font-size:.93rem; line-height:1.65; margin:0 0 .9rem; }
.legal p b{ color:var(--tinta); }
.legal ul{ margin:0 0 1rem; padding-left:1.1rem; display:grid; gap:.42rem; }
.legal li{ color:var(--tinta-2); font-size:.91rem; line-height:1.55; }
.legal a{ color:var(--fucsia-2); }
.legal__destacado{
  background:var(--bg-2); border:1px solid var(--linea); border-left:3px solid var(--turquesa);
  border-radius:12px; padding:.85rem 1rem; color:var(--tinta) !important; font-weight:600;
}
.legal__volver{ margin-top:2rem; }

/* ============================================================
   PÁGINAS DE AVISO  (gracias / error / pendiente)
   A estas llega el cliente después de pagar en Mercado Pago.
   ============================================================ */
.pagina-aviso{
  min-height:100vh; display:flex; flex-direction:column;
  background:radial-gradient(70% 45% at 50% 0%, rgba(255,31,143,.14), transparent 70%), var(--bg);
}
.aviso{
  flex:1; display:grid; align-content:center; justify-items:center;
  max-width:500px; margin:0 auto; padding:2rem 1.1rem 3rem; width:100%;
}
.aviso__caja{
  background:var(--bg-2); border:1px solid var(--linea); border-top:3px solid var(--fucsia);
  border-radius:var(--radio); padding:2.2rem 1.5rem 1.7rem;
  text-align:center; box-shadow:var(--sombra); width:100%;
}
.aviso__caja--bien{ border-top-color:var(--verde); }
.aviso__caja--mal{ border-top-color:var(--naranja); }
.aviso__caja--espera{ border-top-color:var(--amarillo); }
.aviso__icono{ font-size:2.6rem; display:block; margin-bottom:.7rem; }
.aviso__titulo{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.2rem); line-height:1.02; margin-bottom:.9rem;
}
.aviso__texto{ color:var(--tinta-2); font-size:.94rem; line-height:1.5; margin:0 0 1.4rem; }
.aviso__texto b{ color:var(--tinta); }
.aviso__pasos{
  list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.5rem; text-align:left;
}
.aviso__pasos li{
  background:var(--bg-3); border:1px solid var(--linea); border-radius:11px;
  padding:.65rem .9rem; font-size:.84rem; color:var(--tinta-2);
}
.aviso__pasos b{ color:var(--turquesa); }
.aviso__secundario{
  display:inline-block; margin-top:.9rem; font-size:.86rem;
  color:var(--tinta-3); text-decoration:underline; text-underline-offset:3px;
}
.aviso__secundario:hover{ color:var(--fucsia-2); }
.aviso__pie{ font-size:.82rem; color:var(--tinta-3); margin:1.1rem 0 0; }
.aviso__pie a{ color:var(--fucsia-2); }
.aviso__extra{ color:var(--tinta-3); font-size:.86rem; margin-top:1.3rem; text-align:center; }

/* ============================================================
   PÁGINA DE DATOS DE ENVÍO  (comprar.php)
   Mismos campos y mismo orden que antes: solo cambia el vestido.
   ============================================================ */
.pagina-envio{ background:radial-gradient(70% 50% at 50% 0%, rgba(255,31,143,.14), transparent 70%), var(--bg); }
.envio{ max-width:520px; margin:0 auto; padding:1.6rem 1.1rem 3rem; }

.pasosenvio{
  list-style:none; display:flex; gap:.4rem; padding:0; margin:0 0 1.4rem;
  counter-reset:paso; justify-content:center; flex-wrap:wrap;
}
.pasosenvio__i{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-3); display:flex; align-items:center; gap:.4rem;
}
.pasosenvio__i::before{
  counter-increment:paso; content:counter(paso);
  width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-3); border:1px solid var(--linea); font-size:.6rem;
}
.pasosenvio__i:not(:last-child)::after{ content:"›"; opacity:.4; margin-left:.3rem; }
.pasosenvio__i--ok{ color:var(--turquesa); }
.pasosenvio__i--ok::before{ content:"✓"; background:var(--turquesa); color:var(--bg); border-color:var(--turquesa); }
.pasosenvio__i--on{ color:var(--tinta); font-weight:700; }
.pasosenvio__i--on::before{ background:var(--fucsia); border-color:var(--fucsia); color:#fff; }

.envio__caja{
  background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.6rem 1.3rem 1.5rem; box-shadow:var(--sombra);
}
.envio__titulo{ font-family:var(--display); font-size:clamp(1.7rem,7vw,2.3rem); text-transform:uppercase; margin-top:.2rem; }
.envio__sub{ color:var(--tinta-2); font-size:.9rem; margin:.7rem 0 1.3rem; }

.envio__resumen{
  display:grid; grid-template-columns:auto 1fr auto; gap:.8rem; align-items:center;
  background:var(--bg-3); border:1px solid var(--linea); border-radius:14px; padding:.8rem;
}
.envio__foto{ width:52px; height:52px; border-radius:10px; }
.envio__foto::after{ display:none; }
.envio__info{ display:grid; gap:.1rem; min-width:0; }
.envio__info b{ font-size:.92rem; }
.envio__info span{ font-size:.74rem; color:var(--turquesa); }
.envio__precio{ display:grid; justify-items:end; }
.envio__precio b{ color:var(--amarillo); font-size:1.1rem; }
.envio__precio s{ color:var(--tinta-3); font-size:.74rem; }
.envio__cambiar{
  display:inline-block; margin:.6rem 0 1.2rem; font-size:.78rem;
  color:var(--fucsia-2); text-decoration:none;
}
.envio__cambiar:hover{ text-decoration:underline; }

.envio__error{
  background:rgba(192,0,0,.14); border:1px solid rgba(255,90,90,.45); color:#ffb3b3;
  border-radius:12px; padding:.8rem 1rem; font-size:.84rem; margin-bottom:1.1rem;
}

.envio__form{ display:grid; gap:.2rem; }
.envio__form label{
  font-size:.78rem; font-weight:700; color:var(--tinta-2);
  margin-top:.9rem; margin-bottom:.3rem;
}
.envio__opc{ font-weight:400; color:var(--tinta-3); }
.envio__form input{
  background:var(--bg-3); border:1px solid var(--linea); color:var(--tinta);
  border-radius:12px; padding:.85rem 1rem; font-size:1rem; font-family:inherit; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.envio__form input::placeholder{ color:var(--tinta-3); }
.envio__form input:focus{
  outline:none; border-color:var(--fucsia); box-shadow:0 0 0 3px rgba(255,31,143,.16);
}
.envio__form .btn{ margin-top:1.4rem; }
.envio__seguro{ text-align:center; font-size:.76rem; color:var(--tinta-3); margin:.9rem 0 0; }
.envio__seguro b{ color:var(--tinta-2); }

/* Aviso de ley 1581: tiene que estar, pero sin robarle atencion al boton. */
.envio__legal{ text-align:center; font-size:.72rem; line-height:1.45; color:var(--tinta-3); opacity:.8; margin:.7rem 0 0; }
.envio__legal a{ color:inherit; text-decoration:underline; }
.envio__ayuda{ text-align:center; font-size:.8rem; color:var(--tinta-3); margin-top:1.3rem; }
.envio__ayuda a{ color:var(--fucsia-2); }

/* ============================================================
   DEMO DE CARTAS
   Los dorsos están hechos con CSS, no con imágenes: así se ven
   nítidos en cualquier pantalla y a cualquier tamaño.
   ============================================================ */
.cartas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr));
  gap:1.1rem; max-width:1020px; margin:0 auto;
}
.carta{
  background:none; border:0; padding:0; cursor:pointer;
  perspective:1400px; aspect-ratio:5/7; width:100%;
  -webkit-tap-highlight-color:transparent;
  /* grid para que el hijo se estire: dentro de un <button> el height:100%
     no resuelve contra una altura derivada de aspect-ratio */
  display:grid; grid-template:1fr / 1fr;
}
.carta__giro{
  display:block; position:relative; min-height:0; min-width:0;
  transform-style:preserve-3d; transition:transform .65s cubic-bezier(.3,.8,.3,1);
}
.carta.volteada .carta__giro{ transform:rotateY(180deg); }
.carta:hover:not(.volteada) .carta__giro{ transform:translateY(-6px) rotateY(-6deg); }

.carta__cara{
  display:block; position:absolute; inset:0; border-radius:18px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 20px 38px -18px rgba(0,0,0,.85);
}

/* ---- dorso: el diseño de los tres mazos ---- */
.carta__dorso{
  display:grid; place-content:center; gap:.5rem; text-align:center;
  background-image:
    radial-gradient(circle at center, rgba(0,0,0,.14) 1.4px, transparent 1.6px),
    linear-gradient(165deg, var(--c1), var(--c2));
  background-size:11px 11px, 100% 100%;
}
.carta--confesion{ --c1:#D8559A; --c2:#A62E74; --tintaCarta:#FBDCEB; --borde:#E0479A; }
.carta--reta{      --c1:#FBA152; --c2:#EC6A22; --tintaCarta:#241A33; --borde:#F07A2A; }
.carta--caos{      --c1:#26242B; --c2:#0A090C; --tintaCarta:#EE5A2A; --borde:#17161A; }
.carta__icono{ width:46px; height:46px; margin:0 auto; color:var(--tintaCarta); }
.carta__palabra{
  font-family:var(--display); font-size:clamp(1.5rem,4.6vw,2.1rem); letter-spacing:.02em;
  color:var(--tintaCarta); text-transform:uppercase; line-height:1;
}
.carta__pista{
  position:absolute; left:0; right:0; bottom:.85rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tintaCarta); opacity:.72;
}
.carta__dedo{ position:absolute; top:.8rem; right:.9rem; font-size:1rem; opacity:.8; }

/* ---- frente: la carta de verdad ---- */
.carta__frente{
  transform:rotateY(180deg);
  background:#FBF6EE; border:9px solid var(--borde);
  display:grid; grid-template-rows:minmax(0,1fr) auto auto auto; gap:.3rem;
  padding:.9rem .85rem .7rem; text-align:center;
}
/* La ilustración se mete dentro de su celda sin recortarse nunca:
   contenedor con alto definido + object-fit contain. */
.carta__ilu{ position:relative; min-height:0; overflow:hidden; }
.carta__ilu img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
}
.carta__texto{
  color:#1b1b1f; font-size:.82rem; line-height:1.28; font-weight:600;
}
.carta__nota{ color:#55525c; font-size:.7rem; line-height:1.25; }
.carta__marca{
  font-family:var(--display); font-size:.72rem; letter-spacing:.06em;
  color:#1b1b1f; text-transform:uppercase; padding-top:.15rem;
}
.cartas__ayuda{ text-align:center; color:var(--tinta-3); font-size:.8rem; margin-top:1.4rem; }

@media (min-width:860px){
  .carta__texto{ font-size:.92rem; }
  .carta__nota{ font-size:.76rem; }
}

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.6rem; }
.faq details{ background:var(--bg-2); border:1px solid var(--linea); border-radius:14px; padding:.95rem 1.1rem; }
.faq summary{ cursor:pointer; font-weight:700; font-size:.96rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--fucsia); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:.7rem 0 0; color:var(--tinta-2); font-size:.9rem; }

/* ---------- CIERRE ---------- */
.cierre{
  text-align:center; padding:4rem 1.1rem;
  background:radial-gradient(60% 80% at 50% 50%, rgba(255,31,143,.18), transparent 70%);
}
.cierre .btn{ margin-top:.6rem; }

/* ---------- 9 · FOOTER ---------- */
.pie{ background:var(--bg-2); border-top:1px solid var(--linea); padding:2.6rem 1.1rem 7rem; }
.pie__grid{ max-width:var(--ancho); margin:0 auto; display:grid; gap:2rem; }
.pie__col{ display:grid; gap:.5rem; align-content:start; }
.pie__col h3{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; }
.pie__logo{ height:30px; width:auto; margin-bottom:.5rem; }
.pie__col h4{ margin:0 0 .3rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); font-family:var(--mono); }
.pie__col a{ text-decoration:none; color:var(--tinta-2); font-size:.92rem; }
.pie__col a:hover{ color:var(--fucsia-2); }
.pie__col--lista p{ color:var(--tinta-2); font-size:.9rem; margin:.2rem 0 .8rem; }
.pie__form{ display:flex; gap:.5rem; }
.pie__form input{
  flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--linea); color:var(--tinta);
  border-radius:999px; padding:.75rem 1.1rem; font-size:.92rem; font-family:inherit;
}
.pie__form input::placeholder{ color:var(--tinta-3); }
.pie__form button{
  background:linear-gradient(135deg,var(--fucsia),var(--naranja)); color:#fff; border:0;
  border-radius:999px; padding:.75rem 1.3rem; font-weight:800; cursor:pointer;
}
.pie__nota{ color:var(--turquesa); font-size:.85rem; margin:.5rem 0 0; }
.pie__nota--mal{ color:#ff8a8a; }
.pie__form button:disabled{ opacity:.6; cursor:default; }
.pie__base{
  max-width:var(--ancho); margin:2.2rem auto 0; padding-top:1.4rem; border-top:1px solid var(--linea);
  color:var(--tinta-3); font-size:.78rem; display:grid; gap:.4rem;
}
.pie__base p{ margin:0; }

/* ---------- BARRA FIJA ---------- */
.barrafija{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1rem; background:rgba(28,15,48,.95); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  transform:translateY(110%); transition:transform .3s ease;
}
.barrafija--on{ transform:translateY(0); }
.barrafija__prod{ display:grid; line-height:1.25; }
.barrafija__prod b{ font-size:.9rem; }
.barrafija__prod span{ color:var(--amarillo); font-weight:800; font-size:1rem; }

/* ---------- FLOTANTES ---------- */
.flota{
  position:fixed; right:1rem; z-index:56; width:50px; height:50px; border-radius:50%;
  display:grid; place-items:center; border:0; cursor:pointer; text-decoration:none;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.7);
}
.flota--wa{ bottom:5.2rem; background:#25d366; color:#fff; }
.flota--top{
  bottom:9.4rem; background:var(--bg-3); color:var(--tinta); border:1px solid var(--linea);
  font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity .25s;
}
.flota--top.on{ opacity:1; pointer-events:auto; }

/* ============================================================
   AVISO DE PAÍS  (visitas de fuera de Colombia)
   Caja clara sobre el sitio oscuro: se lee como un aviso aparte.
   ============================================================ */
.paismodal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1rem; }
.paismodal__fondo{ position:absolute; inset:0; background:rgba(8,3,14,.82); backdrop-filter:blur(5px); }
.paismodal__caja{
  position:relative; width:min(430px,94vw); max-height:92vh; overflow-y:auto;
  background:#fdf8f3; color:#1e1a22; border-radius:22px;
  padding:2.1rem 1.6rem 1.5rem; text-align:center;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.8);
}
.paismodal__x{
  position:absolute; top:.9rem; right:.9rem; width:32px; height:32px; border-radius:50%;
  background:#efe7de; border:0; color:#6b6472; cursor:pointer; font-size:.85rem;
}
.paismodal__x:hover{ background:#e4dad0; }
.paismodal__bandera{
  display:grid; place-items:center; width:58px; height:58px; margin:0 auto .9rem;
  border-radius:50%; background:#f3e9f6; border:1px solid #e3d4e8;
  font-weight:800; font-size:1.05rem; color:var(--logo-navy); letter-spacing:.04em;
}
.paismodal__titulo{ font-size:1.65rem; font-weight:800; line-height:1.15; margin:0 0 .6rem; color:#17141b; }
.paismodal__texto{ font-size:.92rem; line-height:1.5; color:#55505e; margin:0 0 1.1rem; }
.paismodal__aviso{
  background:#f6eef1; border-radius:13px; padding:.9rem 1rem; margin-bottom:1.1rem;
  display:grid; gap:.3rem; text-align:left;
}
.paismodal__aviso b{ font-size:.68rem; letter-spacing:.06em; color:var(--logo-rosa); text-transform:uppercase; }
.paismodal__aviso span{ font-size:.86rem; color:#55505e; line-height:1.4; }
.paismodal__form{ display:flex; gap:.5rem; margin-bottom:.8rem; }
.paismodal__form input{
  flex:1; min-width:0; border:1px solid #ded5cc; background:#fff; color:#1e1a22;
  border-radius:10px; padding:.75rem .9rem; font-size:.92rem; font-family:inherit;
}
.paismodal__form input:focus{ outline:none; border-color:var(--logo-rosa); box-shadow:0 0 0 3px rgba(226,74,160,.15); }
.paismodal__form button{
  background:var(--logo-rosa); color:#fff; border:0; border-radius:10px;
  padding:.75rem 1.05rem; font-weight:800; font-size:.86rem; cursor:pointer; white-space:nowrap;
}
.paismodal__form button:hover{ filter:brightness(1.07); }
.paismodal__form button:disabled{ opacity:.6; cursor:default; }
.paismodal__check{
  display:flex; gap:.5rem; align-items:flex-start; text-align:left;
  font-size:.74rem; color:#6b6472; line-height:1.4; margin-bottom:.7rem;
}
.paismodal__check input{ margin-top:.15rem; accent-color:var(--logo-rosa); flex:none; }
.paismodal__check a{ color:var(--logo-rosa); }
.paismodal__estado{ font-size:.82rem; margin:.2rem 0 .7rem; min-height:1em; }
.paismodal__estado--mal{ color:#c0392b; }
.paismodal__estado--bien{ color:#1c8a5a; font-weight:700; }
.paismodal__redes{ display:flex; gap:1.3rem; justify-content:center; margin-bottom:1rem; }
.paismodal__redes a{
  font-size:.82rem; font-weight:700; color:var(--logo-navy); text-decoration:none;
}
.paismodal__redes a:hover{ color:var(--logo-rosa); }
.paismodal__seguir{
  background:none; border:0; color:#6b6472; font-size:.82rem;
  text-decoration:underline; cursor:pointer; font-family:inherit;
}
.paismodal__seguir:hover{ color:#1e1a22; }

/* ---------- MODAL ---------- */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1rem; }
.modal__fondo{ position:absolute; inset:0; background:rgba(8,3,14,.86); backdrop-filter:blur(6px); }
.modal__caja{ position:relative; width:min(420px,94vw); max-height:88vh; }
.modal__x{
  position:absolute; top:-2.6rem; right:0; background:var(--bg-3); color:var(--tinta);
  border:1px solid var(--linea); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem;
}
.modal__cuerpo{ border-radius:var(--radio); overflow:hidden; background:#000; box-shadow:var(--sombra); }
.modal__cuerpo video{ width:100%; max-height:80vh; display:block; }
.modal__cuerpo iframe{ width:100%; aspect-ratio:9/16; border:0; display:block; }
.modal__perfil{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--bg-2); padding:.8rem 1rem; font-size:.88rem;
}
.modal__perfil b{ color:var(--tinta); }
.modal__perfil a{ color:var(--fucsia-2); text-decoration:none; font-weight:700; white-space:nowrap; }
.modal__perfil a:hover{ text-decoration:underline; }
.modal__aviso{ padding:2rem 1.4rem; text-align:center; background:var(--bg-2); display:grid; gap:1rem; }
.modal__aviso .btn{ justify-self:center; }

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width:860px){
  .cabecera{ grid-template-columns:1fr auto 1fr; padding:.9rem 2rem; }
  .cabecera__menu{ justify-self:start; }
  .menu{ top:62px; display:flex; gap:2rem; justify-content:center; padding:1rem 2rem; }
  .menu a{ border:0; padding:.2rem; }

  .hero{ grid-template-columns:1.05fr 1fr; align-items:center; gap:3rem; padding:4rem 2rem 2rem; text-align:left; }
  .hero .etiqueta{ justify-content:flex-start; font-size:.68rem; }
  .hero__bajada{ font-size:1rem; margin-left:0; margin-right:0; }
  .hero__micro{ justify-content:flex-start; font-size:.78rem; }
  .hero__media .marco{ aspect-ratio:16/9; }

  .seccion{ padding:5rem 2rem; }
  .ofertas{ max-width:680px; }
  .oferta__foto{ width:88px; height:88px; }
  .oferta__cuerpo{ grid-template-columns:88px 1fr; }

  .pasos{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .paso{ grid-template-columns:48px 1fr; align-items:start; }
  /* Mismo caso que la galeria: paso-1, paso-2 y paso-3 son verticales y
     paso-4 es horizontal. "contain" evita que a la foto macro de las cartas
     le corten justo el texto, que es lo unico que esa foto tiene que mostrar. */
  .paso__foto{ display:block; grid-column:1/-1; aspect-ratio:4/3; margin-top:.4rem; }
  .paso__foto img{ object-fit:contain; }

  .seccion--efecto{ grid-template-columns:.85fr 1.15fr; align-items:center; max-width:var(--ancho); }

  /* En escritorio caben las tres ofertas: no hace falta deslizar */
  .tarjetas{ justify-content:center; overflow-x:visible; }
  .tarjetas__ayuda{ display:none; }
  .videos{ justify-content:center; }
  .videos__ayuda{ display:none; }
  /* flechas de reseñas de vuelta a los lados y tarjeta más grande */
  .carrusel{ grid-template-areas:"ant pista sig"; grid-template-columns:auto 1fr auto; align-items:center; }
  .resena{ min-height:17rem; padding:2.2rem 2rem; }
  .resena__texto{ font-size:1.25rem; max-width:30ch; }
  .aliado{ grid-template-columns:56px 1fr auto; padding:.85rem 1.1rem; }
  .aliado__logo{ width:56px; height:56px; }

  .pie__grid{ grid-template-columns:1.6fr 1fr 1fr; gap:3rem; }
  .pie{ padding-bottom:3rem; }

  .barrafija{ padding:.8rem 2rem; }
  .flota--wa{ bottom:1.4rem; }
  .flota--top{ bottom:5.6rem; }
  .barrafija--on ~ .flota--wa{ bottom:5.4rem; }
  .barrafija--on ~ .flota--top{ bottom:9.6rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}