/* ============================================================
   MUNDO POSTALES — estilos del sitio publico
   v2 — identidad de correo aereo, en clave comercial.
   Contraste alto, color vivo, urgencia visual, movil primero.
   ============================================================ */

:root{
  /* --- Base --- */
  --tinta:#0A1130;
  --tinta-2:#141F4D;
  --tinta-suave:#5B6889;
  --papel:#FFFDF9;
  --blanco:#FFFFFF;
  --kraft:#FFF1DC;

  /* --- Acentos vivos --- */
  --correo-rojo:#E11D2E;
  --rojo-hondo:#A3121F;
  --rojo-vivo:#FF3B4E;
  --sello:#FFB020;
  --sello-claro:#FFD46B;
  --verde-ok:#12A05C;
  --verde-hondo:#0B7442;

  --linea:rgba(10,17,48,.12);
  --linea-fuerte:rgba(10,17,48,.22);

  /* --- Formas --- */
  --r-s:6px; --r-m:14px; --r-l:22px; --r-xl:30px;
  --ancho:1160px;
  --gutter:clamp(1rem,4vw,2rem);

  /* --- Sombras --- */
  --sombra-s:0 2px 8px rgba(10,17,48,.08);
  --sombra-m:0 10px 28px rgba(10,17,48,.12);
  --sombra-l:0 26px 60px rgba(10,17,48,.22);
  --brillo-rojo:0 12px 28px rgba(225,29,46,.38);
  --brillo-oro:0 12px 30px rgba(255,176,32,.35);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15.5px,.55vw + 14.6px,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* ninguna pantalla debe desplazarse de lado */
  display:flex;flex-direction:column;min-height:100dvh;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--correo-rojo);text-underline-offset:.18em}

h1,h2,h3,h4{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;line-height:1.06;letter-spacing:-.025em;
  margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(1.95rem,6.2vw,3.9rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.5rem,4.4vw,2.6rem);font-weight:900}
h3{font-size:clamp(1.1rem,2.6vw,1.45rem)}
p{margin:0 0 1em;max-width:66ch;overflow-wrap:break-word}

/* Titulo de seccion con subrayado de acento */
.seccion > .envoltura > h2{position:relative;padding-bottom:.45rem}
.seccion > .envoltura > h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:68px;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--correo-rojo),var(--sello));
}
.centro > h2::after,.centro h2::after{left:50%;transform:translateX(-50%)}

.envoltura{width:min(100% - (var(--gutter) * 2),var(--ancho));margin-inline:auto}
.seccion{padding-block:clamp(2.5rem,7vw,5.5rem)}
.centro{text-align:center}
.centro p{margin-inline:auto}


/* --- Enlace de salto para teclado y lectores de pantalla --- */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tinta);color:#fff;font-family:"Archivo",sans-serif;font-weight:800;
  padding:.8rem 1.2rem;border-radius:0 0 var(--r-m) 0;text-decoration:none;
}
.saltar:focus{left:0}

/* --- Franja de correo aereo: el motivo firma del sitio --- */
.franja-aerea{
  height:8px;
  background:repeating-linear-gradient(
    -45deg,
    var(--correo-rojo) 0 14px,
    var(--papel) 14px 28px,
    var(--tinta) 28px 42px,
    var(--papel) 42px 56px);
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.cabecera{
  background:rgba(255,253,249,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:60;
}
.cabecera .envoltura{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;min-height:68px;
}
.logo img{max-height:42px;width:auto}
.logo{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(1.05rem,3.4vw,1.35rem);
  color:var(--tinta);text-decoration:none;letter-spacing:-.035em;
  line-height:1.06;min-width:0;
}
.logo-nombre,.logo img{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-dominio{
  font-family:"Public Sans",system-ui,sans-serif;font-weight:700;
  font-size:clamp(.62rem,1.9vw,.74rem);letter-spacing:.02em;
  color:var(--correo-rojo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-cab{display:flex;align-items:center;gap:.5rem;flex:none}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:99px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;line-height:1.2;
  min-height:48px;                       /* area de toque comoda */
  text-align:center;
  transition:transform .14s ease,box-shadow .18s ease,background-color .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-principal{
  background:linear-gradient(135deg,var(--rojo-vivo),var(--correo-rojo) 55%,var(--rojo-hondo));
  color:#fff;box-shadow:var(--brillo-rojo);
}
.btn-principal:hover{filter:saturate(115%) brightness(1.04);box-shadow:0 16px 34px rgba(225,29,46,.46)}

.btn-tinta{
  background:linear-gradient(135deg,var(--tinta-2),var(--tinta));
  color:#fff;box-shadow:var(--sombra-m);
}
.btn-tinta:hover{box-shadow:0 16px 34px rgba(10,17,48,.28)}

.btn-linea{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.btn-linea:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}

.btn-wa{background:linear-gradient(135deg,#25D366,var(--verde-ok) 60%,var(--verde-hondo));color:#fff;
  box-shadow:0 12px 28px rgba(18,160,92,.35)}

.btn-grande{font-size:1.08rem;padding:1.05rem 1.75rem;width:100%;min-height:56px}
.btn-chico{font-size:.86rem;padding:.5rem 1rem;min-height:40px}

:focus-visible{outline:3px solid var(--sello);outline-offset:3px;border-radius:var(--r-s)}

/* ============================================================
   PORTADA
   ============================================================ */
.portada{
  background:
    radial-gradient(120% 90% at 82% -10%,rgba(255,176,32,.30),transparent 58%),
    radial-gradient(90% 70% at 0% 100%,rgba(225,29,46,.26),transparent 60%),
    linear-gradient(150deg,var(--tinta-2),var(--tinta) 70%);
  color:var(--papel);position:relative;overflow:hidden;
}
/* Cosido diagonal tenue de correo aereo */
.portada::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px);
}
.portada .envoltura{
  position:relative;z-index:2;
  padding-block:clamp(2rem,6vw,4.5rem);
  display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
}
.portada h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.portada p{color:rgba(255,253,249,.86);font-size:clamp(1rem,2.4vw,1.1rem)}

.destino{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:"Archivo",sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta);
  background:linear-gradient(135deg,var(--sello-claro),var(--sello));
  border-radius:99px;padding:.38rem 1rem;margin-bottom:1.1rem;
  box-shadow:var(--brillo-oro);
}

/* --- La postal: elemento protagonista --- */
.postal{
  background:var(--papel);padding:13px;border-radius:var(--r-s);
  box-shadow:var(--sombra-l);
  transform:rotate(-1.6deg);position:relative;
  max-width:520px;margin-inline:auto;
}
.postal-marco{border:2px dashed rgba(10,17,48,.28);padding:9px;background:var(--kraft)}
.postal img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#e6e0d6;border-radius:2px}
.postal-vacia{
  aspect-ratio:1/1;display:grid;place-items:center;background:var(--kraft);
  color:var(--tinta-suave);font-family:"Archivo",sans-serif;font-weight:700;
  text-align:center;padding:1.5rem;font-size:.95rem;
}
.matasellos{
  position:absolute;top:-20px;right:-14px;width:102px;height:102px;
  border:3px solid var(--correo-rojo);border-radius:50%;
  display:grid;place-content:center;text-align:center;
  color:var(--correo-rojo);background:rgba(255,253,249,.94);
  transform:rotate(13deg);font-family:"Archivo",sans-serif;line-height:1.05;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.matasellos b{display:block;font-size:1.55rem;font-weight:900}
.matasellos span{display:block;font-size:.58rem;font-weight:800;letter-spacing:.09em}

/* --- Barra de disponibilidad real --- */
.medidor{margin-top:1.6rem;max-width:470px}
.medidor-cifras{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:.92rem;margin-bottom:.45rem;
}
.medidor-cifras b{
  font-size:clamp(1.35rem,4vw,1.75rem);font-weight:900;
  background:linear-gradient(135deg,var(--sello-claro),var(--sello));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.medidor-pista{
  height:16px;background:rgba(255,253,249,.16);border-radius:99px;
  overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.medidor-relleno{
  height:100%;border-radius:99px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--sello),var(--sello-claro));
  box-shadow:0 0 18px rgba(255,176,32,.55);
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.medidor-relleno::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:brillo 2.6s ease-in-out infinite;
}
@keyframes brillo{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.medidor small{
  display:block;margin-top:.55rem;color:rgba(255,253,249,.75);font-size:.86rem;
  overflow-wrap:break-word;
}

/* ============================================================
   GALERIA DEL PREMIO
   ============================================================ */
.galeria{
  display:grid;gap:.85rem;margin-top:1.75rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.galeria figure{
  margin:0;background:var(--blanco);padding:8px;
  border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:var(--sombra-s);transition:transform .18s ease,box-shadow .18s ease;
}
.galeria figure:hover{transform:translateY(-3px);box-shadow:var(--sombra-m)}
.galeria img{aspect-ratio:1/1;object-fit:cover;border-radius:8px}
.galeria figcaption{font-size:.84rem;color:var(--tinta-suave);padding-top:.5rem;text-align:center}

/* ============================================================
   PAQUETES
   ============================================================ */
.fondo-kraft{
  background:linear-gradient(180deg,var(--kraft),#FFF8EC);
  border-block:1px solid rgba(255,176,32,.28);
}

.paquetes{
  display:grid;gap:1.25rem;margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  align-items:stretch;
}
.paquete{
  background:var(--blanco);border:1.5px solid var(--linea);
  border-radius:var(--r-l);padding:1.6rem 1.4rem;position:relative;
  display:flex;flex-direction:column;
  box-shadow:var(--sombra-s);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.paquete:hover{transform:translateY(-4px);box-shadow:var(--sombra-m);border-color:var(--linea-fuerte)}

.paquete.recomendado{
  border:2.5px solid transparent;
  background:
    linear-gradient(var(--blanco),var(--blanco)) padding-box,
    linear-gradient(135deg,var(--correo-rojo),var(--sello)) border-box;
  box-shadow:var(--sombra-m);
  margin-top:.65rem;
}
.paquete.recomendado:hover{box-shadow:0 22px 48px rgba(10,17,48,.2)}

.cinta{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--rojo-vivo),var(--correo-rojo));
  color:#fff;font-family:"Archivo",sans-serif;font-weight:900;
  font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.35rem 1.05rem;border-radius:99px;white-space:nowrap;
  box-shadow:var(--brillo-rojo);
}
.paquete-cant{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(2.4rem,8vw,3.1rem);line-height:.95;letter-spacing:-.05em;
  background:linear-gradient(135deg,var(--tinta-2),var(--correo-rojo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.paquete-cant span{
  font-size:.95rem;font-weight:800;color:var(--tinta-suave);
  display:block;letter-spacing:.04em;text-transform:uppercase;
  -webkit-text-fill-color:var(--tinta-suave);margin-top:.25rem;
}
.paquete-gancho{color:var(--correo-rojo);font-weight:800;margin:.7rem 0 .1rem;font-size:.98rem}
.paquete-precio{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(1.7rem,5vw,2rem);margin:.55rem 0 .2rem;letter-spacing:-.03em;
}
.paquete-precio small{
  display:block;font-size:.76rem;font-weight:700;color:var(--tinta-suave);
  letter-spacing:.06em;text-transform:uppercase;
}
.paquete-benef{
  font-size:.93rem;color:var(--tinta-suave);
  border-top:1px solid var(--linea);padding-top:.9rem;margin:1rem 0 1.25rem;flex:1;
}
.paquete .btn{margin-top:auto}

/* ============================================================
   CANTIDAD LIBRE
   ============================================================ */
.libre{display:flex;flex-wrap:nowrap;gap:.6rem;align-items:stretch;margin-top:1.25rem;max-width:420px}
.paso{
  flex:none;width:58px;min-height:58px;
  font-size:1.6rem;font-family:"Archivo",sans-serif;font-weight:900;
  background:var(--blanco);border:2px solid var(--tinta);border-radius:var(--r-m);
  cursor:pointer;color:var(--tinta);line-height:1;
  transition:background-color .15s ease,color .15s ease;
}
.paso:hover{background:var(--tinta);color:#fff}
.libre input[type=number]{
  flex:1;min-width:0;text-align:center;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem;
  padding:.5rem;border:2px solid var(--linea-fuerte);
  border-radius:var(--r-m);background:var(--blanco);color:var(--tinta);
  -moz-appearance:textfield;
}
.libre input[type=number]::-webkit-outer-spin-button,
.libre input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.total-vivo{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(1.4rem,4.5vw,1.7rem);margin:1rem 0 1.1rem;letter-spacing:-.02em;
}
.total-vivo span{color:var(--correo-rojo)}

/* ============================================================
   PASOS
   ============================================================ */
.pasos{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));margin-top:2.5rem}
.paso-item{display:flex;gap:.95rem;align-items:flex-start}
.paso-num{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--rojo-vivo),var(--correo-rojo));
  color:#fff;display:grid;place-items:center;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:1.25rem;
  box-shadow:var(--brillo-rojo);
}
.paso-item h3{font-size:1.05rem;margin-bottom:.2rem}
.paso-item p{font-size:.94rem;color:var(--tinta-suave);margin:0}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.tarjeta{
  background:var(--blanco);border:1.5px solid var(--linea);
  border-radius:var(--r-l);padding:clamp(1.25rem,4vw,2.4rem);
  box-shadow:var(--sombra-s);
}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-weight:700;font-size:.94rem;margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem .95rem;font:inherit;font-size:16px; /* evita el zoom de iOS */
  color:var(--tinta);background:var(--blanco);
  border:1.5px solid var(--linea-fuerte);border-radius:var(--r-m);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--correo-rojo);outline:none;
  box-shadow:0 0 0 4px rgba(225,29,46,.14);
}
.campo .pista{font-size:.85rem;color:var(--tinta-suave);margin-top:.3rem}
.dos-col{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}

.aviso{
  padding:1rem 1.15rem;border-radius:var(--r-m);margin-bottom:1.5rem;
  border-left:6px solid;font-size:.96rem;box-shadow:var(--sombra-s);
}
.aviso-ok{background:#E6F7EE;border-color:var(--verde-ok);color:#0A5235}
.aviso-error{background:#FDECEE;border-color:var(--correo-rojo);color:#8A1220}
.aviso-info{background:var(--kraft);border-color:var(--sello);color:#6A4A08}

/* ============================================================
   RESULTADO DE NUMEROS
   ============================================================ */
.rejilla-num{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.bolita{
  font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(.95rem,2.6vw,1.05rem);
  background:linear-gradient(135deg,var(--tinta-2),var(--tinta));
  color:var(--papel);padding:.45rem .75rem;
  border-radius:10px;letter-spacing:.07em;box-shadow:var(--sombra-s);
}
.bolita.premiada{
  background:linear-gradient(135deg,var(--sello-claro),var(--sello));
  color:var(--tinta);box-shadow:var(--brillo-oro);
}

.recibo{
  border:1.5px dashed var(--linea-fuerte);border-radius:var(--r-m);
  padding:1.15rem;margin-bottom:1.15rem;background:var(--blanco);
}
.recibo-cab{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:.5rem}
.recibo-cab b{font-family:"Archivo",sans-serif;font-size:1.05rem}
.etiqueta{
  font-size:.74rem;font-weight:900;padding:.24rem .68rem;border-radius:99px;
  font-family:"Archivo",sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.et-pagada{background:#D7F5E6;color:#0A5235}
.et-pendiente{background:#FFEFCF;color:#6A4A08}
.et-rechazada{background:#FDE0E3;color:#8A1220}
.et-anulada{background:#ECE9E3;color:#4A4A4A}

/* ============================================================
   METODOS DE PAGO
   ============================================================ */
.pagos{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:.5rem}
.pago-opcion{position:relative}
.pago-opcion input{position:absolute;opacity:0;width:0;height:0}
.pago-opcion span{
  display:flex;align-items:center;justify-content:center;min-height:54px;
  text-align:center;padding:.8rem .6rem;cursor:pointer;
  border:2px solid var(--linea-fuerte);border-radius:var(--r-m);
  font-weight:800;background:var(--blanco);
  transition:border-color .15s ease,background-color .15s ease,transform .15s ease;
}
.pago-opcion span:hover{transform:translateY(-2px)}
.pago-opcion input:checked + span{
  border-color:var(--correo-rojo);background:#FFF4F5;
  box-shadow:0 0 0 4px rgba(225,29,46,.12);
}
.pago-opcion input:focus-visible + span{outline:3px solid var(--sello);outline-offset:2px}

/* --- Dos columnas que colapsan --- */
.col-principal{
  display:grid;gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;
}

/* ============================================================
   PIE
   ============================================================ */
.pie{
  background:linear-gradient(160deg,var(--tinta-2),var(--tinta) 65%);
  color:rgba(255,253,249,.76);padding-block:2.5rem;margin-top:auto;
}
.pie a{color:var(--papel)}
.pie-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pie h4{color:#fff;font-size:1rem;margin-bottom:.2rem}
.pie-dominio{
  margin:0 0 .55rem;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:.86rem;letter-spacing:.01em;
  color:var(--sello);
}
.pie ul{list-style:none;padding:0;margin:0;font-size:.93rem;line-height:1.95}
.pie-legal{
  border-top:1px solid rgba(255,253,249,.16);margin-top:1.9rem;padding-top:1.1rem;
  font-size:.83rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
}

/* ============================================================
   CONTENIDO LEGAL
   ============================================================ */
.prosa h2{margin-top:2.1rem}
.prosa h2::after{display:none}
.prosa ul{max-width:66ch}

/* ============================================================
   BARRA FLOTANTE MOVIL
   ============================================================ */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,253,249,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--linea);
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(10,17,48,.14);
}
.barra-movil .btn{font-size:1rem;padding-inline:1rem}


/* ============================================================
   POSTALES UNICAS DE CADA COMPRA
   ============================================================ */
.postal-doble{
  display:grid;gap:1.25rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.postal-cara{margin:0}
.postal-cara img{
  width:100%;height:auto;border-radius:var(--r-m);
  box-shadow:var(--sombra-l);background:var(--kraft);
}
.postal-cara figcaption{
  font-size:.84rem;color:var(--tinta-suave);text-align:center;
  padding-top:.6rem;font-weight:600;
}

.postal-acciones{
  display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem;
  justify-content:center;
}
.postal-acciones .btn{flex:1 1 250px;max-width:340px}

.postal-galeria{
  display:grid;gap:1rem;margin-top:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.postal-mini{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--r-m);overflow:hidden;background:var(--blanco);
  border:2px solid var(--linea);box-shadow:var(--sombra-s);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.postal-mini:hover{transform:translateY(-3px);box-shadow:var(--sombra-m)}
.postal-mini img{width:100%;height:auto;display:block}
.postal-mini span{
  display:block;text-align:center;padding:.5rem .4rem;
  font-family:"Archivo",sans-serif;font-weight:800;font-size:.92rem;
  letter-spacing:.05em;
}
.postal-mini.activa{border-color:var(--correo-rojo);box-shadow:var(--brillo-rojo)}
.postal-mini.premiada{border-color:var(--sello)}
.postal-mini.premiada span{background:linear-gradient(135deg,var(--sello-claro),var(--sello));color:var(--tinta)}

/* Aviso de postal lista, dentro del recibo de compra */
.postal-aviso{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.25rem;padding:1rem 1.15rem;border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--kraft),#FFF8EC);
  border:1.5px solid rgba(255,176,32,.5);
}
.postal-aviso p{margin:0;flex:1 1 220px;font-size:.94rem}
.postal-aviso .btn{flex:0 0 auto}

@media(max-width:700px){
  .postal-doble{grid-template-columns:1fr;gap:1rem}
  .postal-galeria{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .postal-acciones .btn{flex:1 1 100%;max-width:none}
}

/* ============================================================
   ADAPTACION POR PANTALLA
   ============================================================ */

/* --- Tablet --- */
@media(max-width:900px){
  .portada .envoltura{grid-template-columns:1fr}
  .portada .postal{order:-1}            /* la imagen del premio primero */
  .col-principal{grid-template-columns:1fr}
  .col-principal aside{position:static!important}
}

/* --- Movil --- */
@media(max-width:700px){
  .barra-movil{display:block}
  body{padding-bottom:88px}             /* espacio para la barra fija */
  .postal{transform:none;max-width:100%}
  .paquetes{grid-template-columns:1fr;gap:1.5rem}
  .paquete.recomendado{margin-top:1rem}
  .pasos{grid-template-columns:1fr;gap:1.15rem}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.65rem}
  .pie-legal{flex-direction:column;text-align:left}
  .seccion{padding-block:2.5rem}
  p{max-width:none}
}

/* --- Movil estrecho: el encabezado debe caber en una sola fila --- */
@media(max-width:620px){
  .cabecera .envoltura{min-height:62px;gap:.5rem}
  .nav-cab .btn{
    padding:.6rem .9rem;min-height:42px;font-size:.88rem;border-width:1.5px;
  }
  /* Etiquetas cortas en pantalla chica; el texto real sigue
     disponible para lectores de pantalla. */
  .nav-cab .btn-linea{font-size:0;padding-inline:.85rem}
  .nav-cab .btn-linea::after{content:"Mis números";font-size:.88rem}
  .nav-cab .btn-principal{font-size:0;padding-inline:1rem}
  .nav-cab .btn-principal::after{content:"Comprar";font-size:.88rem}
}

@media(max-width:600px){
  .dos-col{grid-template-columns:1fr}
}

@media(max-width:520px){
  .portada .btn{width:100%}
  .matasellos{width:78px;height:78px;top:-14px;right:-8px;border-width:2.5px}
  .matasellos b{font-size:1.15rem}
  .matasellos span{font-size:.5rem}
  .pagos{grid-template-columns:1fr 1fr}
  .medidor-cifras{font-size:.85rem}
}

/* --- Pantallas muy estrechas (360px y menos) --- */
@media(max-width:400px){
  .nav-cab{gap:.35rem}
  .nav-cab .btn{padding-inline:.65rem}
  .logo-dominio{font-size:.62rem;letter-spacing:0}
  .nav-cab .btn-linea{display:none}
  .nav-cab .btn-linea::after,.nav-cab .btn-principal::after{font-size:.84rem}
  .paso{width:50px;min-height:50px;font-size:1.4rem}
  .logo{font-size:.95rem}
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .btn:hover,.paquete:hover,.galeria figure:hover{transform:none}
}

@media print{
  .cabecera,.barra-movil,.franja-aerea,.pie{display:none}
  body{padding-bottom:0;background:#fff}
}