/* ═══════════════════════════════════════════════════════════════
   Paula Andrea — hoja de estilos
   Concepto: manifiesto de vuelo. Bandas alternadas:
   TIENDA = fondo claro · VIAJES = fondo tinta. Un solo acento.

   ▸ PARA CAMBIAR LOS COLORES DE MARCA: edita solo el bloque
     :root de abajo. Todo lo demás sale de esas variables.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* --- Paleta de marca — tomada del logo de Paula --- */
  --ink:         #1A0D16;  /* negro ciruela: fondo de las bandas de viajes */
  --ink-2:       #2A1526;  /* un tono más claro: tarjetas sobre tinta */
  --ink-3:       #3D2036;  /* bordes sobre tinta */
  --paper:       #FFFFFF;  /* blanco del logo: bandas de tienda */
  --tint:        #FDF1F7;  /* rosa muy pálido: banda de preguntas */
  --graphite:    #6B5A65;  /* gris con sesgo rosa, texto secundario */
  --line:        #EFE1EA;  /* líneas sobre papel */
  --brand:       #EA1580;  /* magenta del logo: acento único */
  --brand-deep:  #B80F63;  /* magenta legible sobre fondo blanco */
  --brand-light: #FF6FB4;  /* magenta legible sobre fondo tinta */
  --brand-soft:  #FDE6F1;  /* relleno suave del acento */

  /* --- Semánticos (estados de stock) — no son el acento --- */
  --ok:   #12795A;
  --ok-bg:#E3F3EC;
  --wait: #8A5A00;
  --wait-bg:#FFF3DC;
  --off:  #6E6270;
  --off-bg:#F0EAEE;

  /* --- Tipografía --- */
  --display: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", Impact, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", monospace;

  /* --- Ritmo --- */
  --wrap: 1180px;
  --r: 4px;                /* radio: casi recto, es señalética, no una app */
}

/* Este sitio es una identidad de marca y se compromete con un solo
   look. Todos los colores se pintan explícitamente desde tokens,
   así que se ve igual en cualquier host, claro u oscuro. */

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo hidden tiene que ganarle a cualquier display de más
   abajo. Sin esto, .cart (display:flex) y los .btn (inline-flex)
   se siguen dibujando aunque el JS los marque como ocultos. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--brand); color:#fff;
  padding:.7rem 1.1rem; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.wrap{
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2.5rem);
}

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ───────────────────────── Tipografía de marca ───────────────────── */

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-light);
  margin:0 0 .9rem;
}
.eyebrow--dark{ color:var(--brand-deep); }

.sec-title{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6vw, 4rem);
  line-height:.95;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.sec-title--light{ color:var(--paper); }

.sec-head{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
  align-items:end;
  margin-bottom:2.6rem;
}
@media (min-width:860px){
  .sec-head{ grid-template-columns:1fr minmax(300px, 42%); gap:3rem; }
}
.sec-note{
  margin:0;
  color:var(--graphite);
  font-size:.98rem;
  max-width:62ch;
}
.sec-note--light{ color:#C7B5C1; }

/* ───────────────────────── Bandas ───────────────────────── */

.band{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.band--paper{ background:var(--paper); color:var(--ink); }
.band--tint{ background:var(--tint); color:var(--ink); }
.band--ink{ background:var(--ink); color:var(--paper); }

/* ───────────────────────── Aviso de bosquejo ───────────────────────── */

.bosquejo{
  background:var(--brand);
  color:#fff;
}
.bosquejo-inner{
  display:flex; flex-wrap:wrap; gap:.4rem .6rem;
  align-items:baseline;
  padding-block:.7rem;
  font-size:.83rem; line-height:1.45;
}
.bosquejo b{ font-weight:700; }
.bosquejo span{ opacity:.92; }

/* ───────────────────────── Header ───────────────────────── */

.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:68px;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; margin-right:auto;
}
.brand-mark{
  width:40px; height:40px; flex:none;
  display:block;
}
.brand-mark svg{ width:100%; height:100%; display:block; }
.brand-logo{
  height:46px; width:auto;
  border-radius:50%;
  background:#fff;          /* el logo viene con fondo blanco */
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.13em;
  font-size:1.02rem; font-weight:700;
}
.brand-sub{
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--graphite);
}
@media (max-width:620px){ .brand-sub{ display:none; } }

.nav{ display:none; gap:1.6rem; }
@media (min-width:900px){ .nav{ display:flex; } }
.nav a{
  text-decoration:none;
  font-size:.86rem; letter-spacing:.04em;
  color:var(--graphite);
  padding-block:.4rem;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--brand); }

.cart-btn{
  display:flex; align-items:center; gap:.55rem;
  background:var(--ink); color:var(--paper);
  border:0; border-radius:var(--r);
  padding:.6rem .9rem;
  font-family:var(--body); font-size:.84rem; font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.cart-btn:hover{ background:var(--ink-2); }
.cart-count{
  display:grid; place-items:center;
  min-width:21px; height:21px; padding-inline:5px;
  background:var(--brand); color:#fff;
  border-radius:11px;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
}
@media (max-width:480px){ .cart-btn-label{ display:none; } }

/* ───────────────────────── Hero ───────────────────────── */

.hero-title{
  font-family:var(--display);
  font-size:clamp(2.8rem, 8.5vw, 6rem);
  line-height:.96;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  margin:0 0 1.4rem;
  color:var(--paper);
  max-width:16ch;
  text-wrap:balance;
}

/* letrero split-flap del hero */
.flap{
  display:inline-block;
  background:#0F0710;
  border:1px solid var(--ink-3);
  border-radius:3px;
  padding:.02em .28em .06em;
  color:var(--brand-light);
  min-width:4.2ch;
}
.flap-txt{ display:inline-block; }
.flap-txt.is-flipping{ animation:flip .38s ease-in; }
@keyframes flip{
  0%   { transform:rotateX(0deg);   opacity:1; }
  49%  { transform:rotateX(90deg);  opacity:.25; }
  50%  { transform:rotateX(-90deg); opacity:.25; }
  100% { transform:rotateX(0deg);   opacity:1; }
}

.hero-lead{
  max-width:56ch;
  color:#D9C9D4;
  font-size:1.05rem;
  margin:0 0 2rem;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:3.6rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.85rem 1.5rem;
  border:1px solid transparent; border-radius:var(--r);
  font-family:var(--body); font-size:.92rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active{ transform:translateY(1px); }
.btn--brand{ background:var(--brand); color:#fff; }
.btn--brand:hover{ background:#FF3D97; }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--ink-3); }
.btn--ghost:hover{ border-color:var(--paper); }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ background:var(--ink-2); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* tablero de salidas */
.board{ border-top:1px solid var(--ink-3); padding-top:1.5rem; }
.board-h{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9C8895; font-weight:500;
  margin:0 0 1rem;
}
.board-rows{ display:flex; flex-direction:column; }
.board-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.4rem 1.2rem;
  align-items:baseline;
  padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  text-decoration:none;
}
@media (min-width:760px){
  .board-row{ grid-template-columns:8.5rem 1fr auto auto; }
}
.board-row:hover .board-dest{ color:var(--brand-light); }
.board-date{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.85rem; color:#9C8895; letter-spacing:.02em;
}
.board-dest{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.1em;
  font-size:1.25rem; font-weight:700; color:var(--paper);
  transition:color .15s;
}
.board-meta{ font-size:.82rem; color:#9C8895; }
.board-empty{ color:#9C8895; font-size:.9rem; }

/* ───────────────────────── Controles de tienda ───────────────────── */

.notice{
  margin:0 0 1.8rem;
  padding:.9rem 1.1rem;
  background:var(--brand-soft);
  border-left:3px solid var(--brand);
  color:var(--ink);
  font-size:.9rem;
  max-width:70ch;
}
.notice b{ color:var(--brand-deep); }

/* Sellos de confianza: una línea discreta en vez de un cartel.
   El texto largo vive en el carrito, que es donde se decide. */
.sellos{
  list-style:none; margin:0 0 1.8rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.sellos li{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--graphite);
}
.sellos li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brand); flex:none;
}

.cart-fine--formal{
  padding-top:.5rem; border-top:1px solid var(--line);
}

.controls{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  margin-bottom:2rem;
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.44rem 1rem;
  font-family:var(--body); font-size:.83rem; color:var(--graphite);
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.search input{
  width:min(280px, 60vw);
  padding:.55rem .85rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink);
  font-family:var(--body); font-size:.88rem;
}
.search input::placeholder{ color:#A8919F; }

/* ───────────────────────── Grilla de productos ───────────────────── */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.6rem 1.3rem;
}
.loading{ color:var(--graphite); font-size:.92rem; }
.loading--light{ color:#9C8895; }

.card{ display:flex; flex-direction:column; }

.card-media{
  position:relative;
  aspect-ratio:4/5;
  background:var(--tint);
  border:1px solid var(--line);
  overflow:hidden;
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.card:hover .card-media img{ transform:scale(1.035); }

/* placeholder cuando no hay foto o la foto no carga */
.ph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, #F6EAF1 0 12px, #FCF4F8 12px 24px);
}
.ph span{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.16em;
  font-size:1.5rem; color:#D9BFCF;
}

.tag-origin{
  position:absolute; left:0; top:0;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.32rem .6rem;
}

.card-body{ padding-top:.85rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card-code{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; color:#A8919F;
}
.card-name{
  font-size:1rem; font-weight:600; margin:0; line-height:1.3;
}
.card-desc{
  font-size:.85rem; color:var(--graphite); margin:0;
}
/* selector de tallas */
.sizes{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem; }
.size{
  position:relative;
  min-width:2.3rem;
  padding:.3rem .55rem;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.size:hover:not([disabled]){ border-color:var(--ink); }
.size[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.size[disabled]{
  color:#C4B2BD; border-color:var(--line);
  cursor:not-allowed;
  text-decoration:line-through;
  text-decoration-color:#D9BFCF;
}
/* contador de últimas unidades */
.size-n{
  position:absolute; top:-6px; right:-6px;
  display:grid; place-items:center;
  min-width:15px; height:15px; padding-inline:3px;
  background:var(--brand); color:#fff;
  border-radius:8px;
  font-family:var(--mono); font-size:.58rem; font-style:normal; font-weight:700;
}
.size[aria-pressed="true"] .size-n{ background:var(--brand-light); color:var(--ink); }

.ci-talla{
  display:inline-block;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.06em;
  color:var(--brand-deep);
  background:var(--brand-soft);
  padding:.1rem .35rem; border-radius:2px;
  margin-top:.25rem;
}

.card-price{
  display:flex; align-items:baseline; gap:.55rem;
  margin-top:auto; padding-top:.5rem;
}
.price{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.08rem; font-weight:700;
}
.price--ask{
  font-size:.92rem; font-weight:600; color:var(--brand-deep);
  letter-spacing:.02em;
}
.price-was{
  font-family:var(--mono); font-size:.82rem;
  color:#A8919F; text-decoration:line-through;
}

.state{
  display:inline-flex; align-items:center; gap:.35rem;
  align-self:flex-start;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:2px;
}
.state::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor;
}
.state--ok{   color:var(--ok);   background:var(--ok-bg); }
.state--wait{ color:var(--wait); background:var(--wait-bg); }
.state--off{  color:var(--off);  background:var(--off-bg); }

/* Lo último que trajo Paula. Es lo que más vende, así que se nota. */
.state--nuevo{
  color:#fff; background:var(--brand);
  margin-left:.35rem;
}
.state--nuevo::before{ background:#fff; }

.card-add{
  margin-top:.7rem;
  width:100%;
  padding:.6rem 1rem;
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:var(--r);
  font-family:var(--body); font-size:.85rem; font-weight:600;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.card-add:hover:not([disabled]){ background:var(--ink); color:var(--paper); }
.card-add[disabled]{ border-color:var(--line); color:#A8919F; cursor:not-allowed; }
.card-add.is-added{ background:var(--brand); border-color:var(--brand); color:#fff; }

.empty{
  grid-column:1/-1;
  padding:3rem 0; text-align:center; color:var(--graphite);
}

/* ───────────────────────── Viajes ───────────────────────── */

.trips{ display:grid; gap:1.4rem; }
@media (min-width:820px){ .trips{ grid-template-columns:repeat(2, 1fr); } }

.trip{
  background:var(--ink-2);
  border:1px solid var(--ink-3);
  border-radius:var(--r);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.trip-media{
  position:relative;
  aspect-ratio:16/9;
  background:#150A13;
  overflow:hidden;
}
.trip-media img{ width:100%; height:100%; object-fit:cover; }
.trip-media .ph{
  background:repeating-linear-gradient(135deg,#2A1526 0 14px,#341A2F 14px 28px);
}
.trip-media .ph span{ color:#5C3651; }

.trip-body{ padding:1.4rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }

.trip-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem;
}
.trip-dest{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.09em;
  font-size:1.6rem; font-weight:700; margin:0; color:var(--paper);
  line-height:1;
}
.trip-country{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:#9C8895;
  margin:.35rem 0 0;
}

.trip-dates{
  display:flex; gap:1.6rem;
  padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.trip-dates div{ display:flex; flex-direction:column; gap:.15rem; }
.trip-dates dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:#9C8895;
}
.trip-dates dd{
  margin:0;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.95rem; color:var(--paper);
}

.trip-desc{ font-size:.9rem; color:#C7B5C1; margin:0; }

.trip-incl{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.trip-incl li{
  font-size:.85rem; color:#C7B5C1;
  padding-left:1.1rem; position:relative;
}
.trip-incl li::before{
  content:"→"; position:absolute; left:0; color:var(--brand-light);
  font-family:var(--mono); font-size:.8rem;
}

.trip-foot{
  margin-top:auto; padding-top:1rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.trip-price small{
  display:block;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:#9C8895;
}
.trip-price b{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.25rem; color:var(--paper);
}

.state--seats{ color:var(--brand-light); background:rgba(234,21,128,.18); }
.state--open{  color:#5FD3A6; background:rgba(95,211,166,.13); }
.state--closed{color:#9C8895; background:rgba(142,148,174,.14); }
.state--soon{ color:var(--brand-light); background:rgba(234,21,128,.14); }

/* viaje anunciado, sin detalle todavía */
.trip--soon .trip-media{ opacity:.7; }
.trip-cuando{
  margin:0; padding:.6rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.95rem; color:var(--paper); letter-spacing:.04em;
}

/* ───────────────────────── Quién soy ───────────────────────── */

/* "Quién soy": fotos a la izquierda, texto a la derecha.
   El mosaico va de dos en dos, con Paula al medio a lo ancho. */
.quien-wrap{ display:grid; gap:2.4rem; }
@media (min-width:880px){
  .quien-wrap{
    grid-template-columns:minmax(300px, 46%) 1fr;
    gap:3.5rem; align-items:center;
  }
}

.quien-mosaico{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
}
.mos{
  margin:0; position:relative; overflow:hidden;
  background:var(--paper); border-radius:var(--r);
}
.mos img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.mos:hover img{ transform:scale(1.04); }

.mos--a, .mos--b, .mos--c, .mos--d{ aspect-ratio:1/1; }
.mos--centro{ grid-column:1 / -1; aspect-ratio:4/3; }

/* filo magenta en la del medio, como el logo */
.mos--centro::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:var(--brand);
}

/* sin foto del medio, las cuatro quedan en cuadrícula pareja */
.quien-mosaico[data-centro="no"] .mos{ aspect-ratio:1/1; }

/* el sprite solo guarda los dibujos, no se ve */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.paises{
  list-style:none; margin:1.3rem 0 1.5rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
}
.paises li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .7rem .3rem .35rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--ink);
}
.paises svg{
  width:20px; height:20px; flex:none; display:block;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(26,13,22,.10);
}

.quien-texto p{ color:var(--graphite); max-width:56ch; margin:0 0 .9rem; }
.quien-texto .sec-title{ margin-bottom:1.3rem; }

/* Colección de stickers */
.stickers{ margin-top:2rem; }
.stickers-lbl{
  margin:0 0 .8rem;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.stickers-fila{
  display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
}
.sticker{
  margin:0; text-align:center;
  background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r);
  padding:.5rem .4rem .6rem;
  transition:border-color .15s, transform .2s;
}
.sticker:hover{ border-color:var(--brand); transform:translateY(-2px); }
.sticker img{ width:100%; height:auto; border-radius:2px; }
.sticker figcaption{
  margin-top:.35rem;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--graphite);
}
.stickers-nota{
  margin:.9rem 0 0; font-size:.83rem; color:var(--graphite);
}

.quien-datos{
  display:flex; flex-wrap:wrap; gap:1.8rem;
  margin:1.5rem 0 0; padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.quien-datos div{ display:flex; flex-direction:column; gap:.15rem; }
.quien-datos dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.quien-datos dd{
  margin:0; font-family:var(--display);
  font-size:1.5rem; letter-spacing:.05em; font-weight:700; color:var(--ink);
}

/* ───────────────────────── Cómo comprar ───────────────────────── */

.band--sep{ border-top:1px solid var(--line); }

.comprar{ display:grid; gap:2rem; margin-top:2.4rem; }
@media (min-width:800px){ .comprar{ grid-template-columns:1fr 1fr; gap:3rem; } }

.comprar-via{ display:flex; flex-direction:column; }
.comprar-tag{
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--graphite); margin:0 0 .3rem;
}
.comprar-t{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:1.5rem; font-weight:700; margin:0 0 1.2rem;
  padding-bottom:.7rem; border-bottom:2px solid var(--ink);
}
.comprar-via--enc .comprar-t{ border-bottom-color:var(--brand); }
.comprar-via--enc .comprar-tag{ color:var(--brand-deep); }

.comprar-pasos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem; counter-reset:cp;
}
.comprar-pasos li{
  position:relative; padding-left:2.2rem;
  font-size:.9rem; color:var(--graphite); line-height:1.55;
  counter-increment:cp;
}
.comprar-pasos li::before{
  content:counter(cp);
  position:absolute; left:0; top:.1rem;
  display:grid; place-items:center;
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--tint); color:var(--ink);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
}
.comprar-via--enc .comprar-pasos li::before{
  background:var(--brand-soft); color:var(--brand-deep);
}
.comprar-pasos b{ color:var(--ink); display:block; }

/* aviso de "sigue vitrineando" */
.notice--viaje{
  background:var(--ink); border-left-color:var(--brand); color:var(--paper);
}
.notice--viaje b{ color:var(--brand-light); }
.notice--viaje a{ color:var(--brand-light); }

/* ───────────────────────── Pasos ───────────────────────── */

.steps{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; gap:1.6rem;
  counter-reset:none;
}
@media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1.2rem; } }

.step{
  padding-top:1.1rem;
  border-top:2px solid var(--ink);
  display:flex; flex-direction:column; gap:.5rem;
}
.step-n{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--brand-deep);
}
.step h3{
  font-size:1rem; font-weight:700; margin:0; line-height:1.25;
}
.step p{ margin:0; font-size:.88rem; color:var(--graphite); }

/* ───────────────────────── FAQ ───────────────────────── */

.faq-wrap{ display:grid; gap:2.5rem; }
@media (min-width:900px){
  .faq-wrap{ grid-template-columns:minmax(240px,32%) 1fr; gap:4rem; align-items:start; }
}

.stats{ display:flex; gap:2rem; margin:2rem 0 0; flex-wrap:wrap; }
.stats div{ display:flex; flex-direction:column; gap:.15rem; }
.stats dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.stats dd{
  margin:0;
  font-family:var(--display); font-size:1.7rem; letter-spacing:.05em;
  font-weight:700;
}

.faq-list{ display:flex; flex-direction:column; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa summary{
  cursor:pointer; list-style:none;
  padding:1.1rem 2rem 1.1rem 0;
  font-weight:600; font-size:.98rem;
  position:relative;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+";
  position:absolute; right:0; top:1rem;
  font-family:var(--mono); font-size:1.15rem; color:var(--brand-deep);
}
.qa[open] summary::after{ content:"−"; }
.qa p{
  margin:0 0 1.3rem;
  color:var(--graphite); font-size:.92rem; max-width:64ch;
}

/* ───────────────────────── Footer ───────────────────────── */

.foot{ padding-block:3rem; }
.foot-inner{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
}
/* El logo lleva el nombre en lettering: acá sí hay tamaño para leerlo.
   En el header no cabe — ahí va la maleta dibujada en SVG. */
.foot-logo{
  width:108px; height:108px;
  border-radius:50%;
  background:#fff;
  margin-bottom:.9rem;
}
.foot-brand{
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.13em; font-size:1.2rem; font-weight:700;
  margin:0; color:var(--paper);
}
.foot-sub{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:#9C8895; margin:.3rem 0 0;
}
.foot-legal{
  margin:.7rem 0 0;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.04em; color:#9C8895;
  max-width:46ch; line-height:1.5;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:1.5rem; }

/* casilla de factura dentro del carrito */
.cart-doc{
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:.82rem; color:var(--ink);
  cursor:pointer;
}
.cart-doc input{
  margin:.2rem 0 0; accent-color:var(--brand);
  width:15px; height:15px; flex:none;
}
.foot-links a{
  font-size:.88rem; color:#D9C9D4; text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-links a:hover{ color:var(--brand-light); border-bottom-color:var(--brand-light); }

/* ───────────────────────── Encargos ─────────────────────────
   Tercera línea de negocio, tercer fondo: la tienda va sobre
   blanco, los viajes sobre tinta, los encargos sobre el rosa
   pálido. Se distinguen sin necesidad de tres marcas. */

.enc-wrap{ display:grid; gap:2.5rem; }
@media (min-width:940px){
  .enc-wrap{ grid-template-columns:1fr minmax(360px, 46%); gap:4rem; align-items:start; }
}

.enc-estado{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite);
}
.enc-punto{
  width:8px; height:8px; border-radius:50%;
  background:var(--graphite); flex:none;
}
/* de viaje ahora: el punto late */
.enc-estado.is-live{ color:var(--brand-deep); }
.enc-estado.is-live .enc-punto{
  background:var(--brand);
  animation:latido 1.8s ease-in-out infinite;
}
@keyframes latido{
  0%,100%{ box-shadow:0 0 0 0 rgba(234,21,128,.5); }
  70%    { box-shadow:0 0 0 7px rgba(234,21,128,0); }
}

.enc-lead{
  margin:1.1rem 0 0;
  color:var(--graphite); font-size:1rem; max-width:52ch;
}

.enc-datos{
  display:flex; flex-wrap:wrap; gap:1.8rem;
  margin:1.6rem 0 0;
  padding:1rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.enc-datos div{ display:flex; flex-direction:column; gap:.2rem; }
.enc-datos dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.enc-datos dd{ margin:0; font-size:.95rem; font-weight:600; }

.enc-pasos{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:grid; gap:.6rem;
  counter-reset:paso;
}
.enc-pasos li{
  position:relative; padding-left:2rem;
  font-size:.9rem; color:var(--graphite); line-height:1.5;
  counter-increment:paso;
}
.enc-pasos li::before{
  content:counter(paso);
  position:absolute; left:0; top:.05rem;
  display:grid; place-items:center;
  width:1.35rem; height:1.35rem;
  background:var(--brand-soft); color:var(--brand-deep);
  border-radius:50%;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
}

.enc-form{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:1.4rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.enc-fila{ display:grid; gap:.9rem; }
@media (min-width:520px){ .enc-fila{ grid-template-columns:1fr 1fr; } }

.enc-ok{ text-align:center; align-items:stretch; }
.enc-ok .ok-marca{ margin-bottom:.2rem; }

/* ───────────────────────── Rifa ─────────────────────────
   Campaña con fecha de término. Comparte la paleta pero usa más
   urgencia: barra de avance, números grandes, contador de packs. */

.rifa-hero-wrap{ display:grid; gap:2.5rem; }
@media (min-width:940px){
  .rifa-hero-wrap{ grid-template-columns:1fr minmax(300px,40%); gap:3.5rem; align-items:center; }
}

.rifa-vivo{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-light);
}
.rifa-vivo .enc-punto{
  background:var(--brand);
  animation:latido 1.8s ease-in-out infinite;
}

.rifa-titulo{
  font-family:var(--display);
  font-size:clamp(2.4rem,7vw,4.4rem); line-height:.95;
  letter-spacing:.04em; text-transform:uppercase; font-weight:700;
  margin:0 0 .7rem; color:var(--paper); text-wrap:balance;
}
.rifa-bajada{ margin:0 0 1.6rem; color:#C7B5C1; font-size:1.02rem; max-width:52ch; }

.rifa-premio1{
  border:1px solid var(--ink-3);
  border-left:4px solid var(--brand);
  border-radius:var(--r);
  background:var(--ink-2);
  padding:1.1rem 1.3rem;
  margin-bottom:1.6rem;
}
.premio1-tag{
  margin:0 0 .3rem;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-light);
}
.premio1-nombre{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.05em;
  font-size:1.6rem; font-weight:700; margin:0; color:var(--paper); line-height:1.05;
}
.premio1-detalle{ margin:.5rem 0 0; font-size:.9rem; color:#C7B5C1; }

.rifa-progreso{ margin-bottom:1.8rem; }
.rifa-barra{
  height:9px; border-radius:5px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.rifa-barra span{
  display:block; height:100%; width:0;
  background:var(--brand);
  transition:width .8s ease;
}
.rifa-progreso-txt{
  margin:.6rem 0 0;
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.03em; color:#9C8895;
}

.rifa-datos{
  display:flex; flex-wrap:wrap; gap:1.8rem;
  margin:1.8rem 0 0; padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.rifa-datos div{ display:flex; flex-direction:column; gap:.2rem; }
.rifa-datos dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:#9C8895;
}
.rifa-datos dd{ margin:0; font-size:.95rem; color:var(--paper); }

.rifa-hero-img{
  position:relative; aspect-ratio:4/3;
  background:#150A13; border:1px solid var(--ink-3);
  border-radius:var(--r); overflow:hidden;
}
.rifa-hero-img .ph{
  background:repeating-linear-gradient(135deg,#2A1526 0 14px,#33192E 14px 28px);
}
.rifa-hero-img .ph span{ color:#5C3651; }

/* premios */
.premios{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-top:2.4rem;
}
.premio{
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  background:var(--paper);
}
.premio--1{ border-color:var(--brand); border-width:2px; }
.premio-media{ position:relative; aspect-ratio:4/3; background:var(--tint); }
.premio-body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.premio-puesto{
  margin:0; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand-deep);
}
.premio-nombre{ margin:0; font-size:1.02rem; font-weight:700; line-height:1.25; }
.premio-detalle{ margin:0; font-size:.85rem; color:var(--graphite); }
.premio-quien{
  margin:.3rem 0 0; font-family:var(--mono); font-size:.66rem;
  color:#A8919F; letter-spacing:.04em;
}

/* compra */
.rifa-compra-wrap{ display:grid; gap:2.5rem; }
@media (min-width:940px){
  .rifa-compra-wrap{ grid-template-columns:1fr minmax(360px,46%); gap:4rem; align-items:start; }
}

.rifa-precios{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.8rem; }
.precio-fila{
  display:grid; grid-template-columns:1fr auto auto; gap:1rem;
  align-items:baseline; text-align:left;
  padding:.75rem .9rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--body); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.precio-fila:hover{ border-color:var(--brand); background:var(--brand-soft); }
.precio-cant{ font-size:.92rem; font-weight:600; color:var(--ink); }
.precio-val{ font-size:1rem; font-weight:700; color:var(--ink); }
.precio-unit{ font-size:.75rem; color:var(--graphite); }

.rifa-cant{ display:flex; flex-direction:column; gap:.4rem; }
.rifa-cant-lbl{ font-size:.78rem; font-weight:600; }
.rifa-cant-ctrl{
  display:grid; grid-template-columns:48px 1fr 48px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.rifa-cant-ctrl button{
  border:0; background:var(--tint); color:var(--ink);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:.7rem 0;
}
.rifa-cant-ctrl button:hover{ background:var(--brand-soft); color:var(--brand-deep); }
.rifa-cant-ctrl input{
  border:0; text-align:center;
  font-family:var(--mono); font-size:1.1rem; font-weight:700;
  background:var(--paper); color:var(--ink);
}
.rifa-cant-ctrl input:focus{ outline:none; }

.rifa-nudge{
  margin:0; padding:.6rem .8rem;
  background:var(--brand-soft); border-left:3px solid var(--brand);
  font-size:.84rem; color:var(--ink);
}
.rifa-nudge b{ color:var(--brand-deep); }

.rifa-total{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between;
  padding:1rem 1.1rem;
  background:var(--ink); border-radius:var(--r);
}
.rifa-total div{ display:flex; flex-direction:column; gap:.15rem; }
.rifa-total-lbl{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:#9C8895;
}
.rifa-total b{
  font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--paper);
}
.rifa-total-num b{ color:var(--brand-light); }

/* números entregados */
.rifa-tus-nums-lbl{
  margin:1.2rem 0 .6rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--graphite);
}
.rifa-nums{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.num{
  display:inline-grid; place-items:center;
  min-width:3.2rem; padding:.4rem .6rem;
  background:var(--ink); color:var(--brand-light);
  border-radius:var(--r);
  font-family:var(--mono); font-size:.92rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}

.verificar-wrap{ display:grid; gap:2.5rem; }
@media (min-width:900px){
  .verificar-wrap{ grid-template-columns:1fr minmax(320px,42%); gap:4rem; align-items:start; }
}

.btn--head{ padding:.6rem 1.1rem; font-size:.85rem; }
@media (max-width:900px){ .btn--head{ display:none; } }

/* ───────────────────────── Modal de reserva ───────────────────────── */

.modal-scrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(25,12,22,.6);
}
.modal{
  position:fixed; z-index:90;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(460px, calc(100% - 2rem));
  max-height:calc(100vh - 2rem);
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:var(--r);
  box-shadow:0 24px 70px rgba(25,12,22,.35);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem;
  padding:1.2rem 1.4rem 1rem;
  border-bottom:1px solid var(--line);
}
.modal-eyebrow{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-deep); margin:0 0 .3rem;
}
.modal-title{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.09em;
  font-size:1.3rem; font-weight:700; margin:0; line-height:1;
}
.modal-body{
  padding:1.2rem 1.4rem 1.4rem;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:.85rem;
}
.modal-nota{
  margin:0;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.05em; color:var(--brand-deep);
  background:var(--brand-soft);
  padding:.5rem .7rem; border-radius:2px;
}

.campo{ display:flex; flex-direction:column; gap:.3rem; }
.campo > span{
  font-size:.78rem; font-weight:600; color:var(--ink);
}
.campo > span i{ font-weight:400; font-style:normal; color:var(--graphite); }
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:.9rem;
}
.campo textarea{ resize:vertical; min-height:2.6rem; }
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color:var(--brand); outline:none;
  box-shadow:0 0 0 3px var(--brand-soft);
}

/* campo trampa: fuera de la vista, sin display:none para que
   los robots igual lo encuentren y lo rellenen */
.trampa{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.modal-error{
  margin:0;
  padding:.6rem .8rem;
  background:var(--brand-soft);
  border-left:3px solid var(--brand);
  font-size:.82rem; color:var(--ink); line-height:1.45;
}
.modal-fine{
  margin:0; font-size:.75rem; color:var(--graphite); line-height:1.5;
}

.modal-ok{ text-align:center; padding-block:2rem 1.4rem; }
.ok-marca{
  display:grid; place-items:center;
  width:52px; height:52px; margin:0 auto;
  border-radius:50%;
  background:var(--ok-bg); color:var(--ok);
  font-size:1.6rem; line-height:1;
}
.ok-titulo{
  font-family:var(--display);
  text-transform:uppercase; letter-spacing:.09em;
  font-size:1.4rem; font-weight:700; margin:.3rem 0 0;
}
.ok-texto{
  margin:0 0 .6rem; font-size:.9rem; color:var(--graphite);
  line-height:1.55;
}
.ok-texto b{ color:var(--brand-deep); }

/* ───────────────────────── Carrito ───────────────────────── */

.cart-scrim{
  position:fixed; inset:0; z-index:60;
  background:rgba(25,12,22,.55);
}
.cart{
  position:fixed; right:0; top:0; bottom:0; z-index:70;
  width:min(420px, 100%);
  background:var(--paper);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  box-shadow:-18px 0 50px rgba(25,12,22,.18);
}
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.cart-head h2{
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.12em; font-size:1.15rem; font-weight:700; margin:0;
}
.cart-x{
  background:transparent; border:0; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--graphite);
  padding:0 .2rem;
}
.cart-x:hover{ color:var(--ink); }

.cart-body{ flex:1; overflow-y:auto; padding:1.1rem 1.4rem; }
.cart-empty{ color:var(--graphite); font-size:.92rem; padding-top:1rem; }

.ci{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:.85rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.ci-media{
  width:58px; aspect-ratio:4/5; position:relative;
  background:var(--tint); border:1px solid var(--line); overflow:hidden;
}
.ci-media img{ width:100%; height:100%; object-fit:cover; }
.ci-media .ph span{ font-size:.7rem; }
.ci-name{ font-size:.88rem; font-weight:600; margin:0 0 .15rem; line-height:1.3; }
.ci-code{ font-family:var(--mono); font-size:.66rem; color:#A8919F; letter-spacing:.06em; }
.ci-price{ font-family:var(--mono); font-size:.85rem; margin-top:.3rem; display:block; }
.ci-right{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); }
.qty button{
  width:26px; height:26px; border:0; background:transparent;
  cursor:pointer; color:var(--ink); font-size:1rem; line-height:1;
}
.qty button:hover{ background:var(--tint); }
.qty span{
  font-family:var(--mono); font-size:.82rem; min-width:22px; text-align:center;
}
.ci-del{
  background:transparent; border:0; cursor:pointer;
  font-size:.72rem; color:#A8919F; text-decoration:underline;
  padding:0;
}
.ci-del:hover{ color:var(--ink); }

.cart-foot{
  border-top:1px solid var(--line);
  padding:1.2rem 1.4rem;
  display:flex; flex-direction:column; gap:.7rem;
  background:var(--tint);
}
/* selector de entrega */
.ship{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
  margin:0; padding:.5rem .8rem .7rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.ship legend{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--graphite); padding-inline:.25rem;
}
.ship label{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem 0; cursor:pointer; font-size:.85rem;
}
.ship label span{ flex:1; }
.ship label b{ font-size:.82rem; font-weight:600; color:var(--graphite); }
.ship input{ accent-color:var(--brand); width:15px; height:15px; flex:none; }
.ship label:has(input:checked) b{ color:var(--brand-deep); }

/* totales */
.sums{ margin:0; display:flex; flex-direction:column; gap:.3rem; }
.sums div{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
}
.sums dt{ font-size:.85rem; color:var(--graphite); }
.sums dd{ margin:0; font-size:.88rem; }
.sums-total{
  border-top:1px solid var(--line);
  margin-top:.35rem; padding-top:.5rem;
}
.sums-total dt{ font-size:.95rem; font-weight:600; color:var(--ink); }
.sums-total dd{ font-size:1.3rem; font-weight:700; }

.cart-fine{ margin:0; font-size:.76rem; color:var(--graphite); line-height:1.45; }

/* transferencia bancaria */
.transfer{ border-top:1px solid var(--line); padding-top:.7rem; }
.transfer-t{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:.4rem 0;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--body); font-size:.86rem; font-weight:600; color:var(--ink);
}
.transfer-mas{
  font-family:var(--mono); font-size:1.1rem; color:var(--brand-deep);
  line-height:1;
}
.transfer-body{ display:flex; flex-direction:column; gap:.7rem; padding-top:.6rem; }
.transfer-datos{
  margin:0; display:flex; flex-direction:column; gap:.3rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:.75rem .85rem;
}
.transfer-datos div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
}
.transfer-datos dt{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--graphite);
}
.transfer-datos dd{ margin:0; font-size:.84rem; font-weight:600; }
.transfer-copiar{
  padding:.5rem .9rem;
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:var(--r);
  font-family:var(--body); font-size:.82rem; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s;
}
.transfer-copiar:hover{ background:var(--ink); color:var(--paper); }

.cart-err{
  margin:0;
  padding:.6rem .8rem;
  background:var(--brand-soft);
  border-left:3px solid var(--brand);
  font-size:.8rem; color:var(--ink); line-height:1.45;
}

.cart-foot .btn + .btn{ margin-top:-.2rem; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

html{ scroll-behavior:smooth; scroll-padding-top:80px; }

/* ───────────────────────── Rifa: solo el aviso ─────────────────────────
   Mientras la rifa no esté lista, se anuncia sin mostrar premios,
   precios ni formulario. Nadie puede comprar todavía. */
.rifa-teaser{ padding-block:clamp(2.6rem, 6vw, 4.5rem); }
.rifa-teaser-wrap{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:center; justify-content:space-between;
}
.rifa-teaser .hero-lead{ margin:1rem 0 0; max-width:52ch; }
.rifa-teaser .btn{ flex:none; }
