/* ASTEX Programas · versión interactiva
   Sistema de diseño medido del original: BentonSans + Playfair Display Italic.
   Mobile first: todo lo de abajo es el móvil; los @media suben a tablet/escritorio.
   ------------------------------------------------------------------------- */

@font-face { font-family:'BentonSans'; src:url('fonts/BentonSans-Light.woff2')   format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'BentonSans'; src:url('fonts/BentonSans-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'BentonSans'; src:url('fonts/BentonSans-Medium.woff2')  format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'BentonSans'; src:url('fonts/BentonSans-Bold.woff2')    format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Playfair';   src:url('fonts/PlayfairDisplay-MediumItalic.woff2') format('woff2'); font-style:italic; font-weight:500; font-display:swap; }

:root{
  --ink:#4A4A4A;
  --texto:#6C6C6C;
  --coral:#F0867E;
  --acento:#F0867E;          /* lo pisa el color de cada guía */
  --acento-suave:#F0867E1a;
  --linea:#E6E3E0;
  --fondo:#FFFFFF;
  --fondo-2:#FAF8F7;
  --radio:14px;
  --sombra:0 1px 2px rgba(74,74,74,.05), 0 8px 24px rgba(74,74,74,.07);
  --ancho:min(100% - 32px, 1080px);
  --sans:'BentonSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--fondo); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.envoltorio{ width:var(--ancho); margin-inline:auto; }
.oculto{ display:none !important; }

/* --- Barra superior ------------------------------------------------------ */
.barra{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.barra-in{
  width:var(--ancho); margin-inline:auto;
  height:56px; display:flex; align-items:center; gap:12px;
}
.barra img{ height:24px; width:auto; }
/* Solo en interno.html: los accesos que el equipo usa a diario. */
.barra-cta{ margin-right:14px; }
.barra #cta-revisar{ margin-right:18px; }
@media (max-width:520px){
  .barra-cta{ margin-right:10px; padding:8px 13px; font-size:13px; }
  .barra #cta-revisar{ display:none; }
}
.barra .sep{ flex:1; }
.volver{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:8px 0; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--texto);
}
.volver:hover{ color:var(--ink); }

/* --- Cabecera de guía ---------------------------------------------------- */
.hero{ padding:32px 0 24px; border-bottom:1px solid var(--linea); }
.hero .cintillo{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acento); margin:0 0 10px;
}
.hero h1{
  font-size:clamp(28px,7vw,44px); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; margin:0 0 10px;
}
.hero .claim{
  font-family:'Playfair', Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(17px,4.4vw,22px); color:var(--texto); margin:0 0 16px;
}
.hero .meta{ display:flex; flex-wrap:wrap; gap:8px; }

.pildora{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:var(--fondo-2); border:1px solid var(--linea);
  font-size:12.5px; font-weight:500; color:var(--texto);
}
.pildora.acento{ background:var(--acento-suave); border-color:transparent; color:var(--acento); font-weight:700; }

/* --- Filtro por edad ----------------------------------------------------- */
.filtros{
  position:sticky; top:56px; z-index:40;
  background:var(--fondo); border-bottom:1px solid var(--linea);
  padding:14px 0;
}
.filtros-in{ width:var(--ancho); margin-inline:auto; }
.filtros .titulo{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto); margin:0 0 9px;
}
.chips{ display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea); background:#fff;
  font-size:13.5px; font-weight:500; color:var(--texto);
  transition:.15s;
}
.chip:hover{ border-color:var(--acento); color:var(--ink); }
.chip[aria-pressed="true"]{
  background:var(--acento); border-color:var(--acento); color:#fff; font-weight:700;
}
.chip .n{ opacity:.55; font-weight:500; font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] .n{ opacity:.75; }
.recuento{ margin:10px 0 0; font-size:13px; color:var(--texto); }

/* --- Avisos de la comparación con la web (SOLO pantalla interna) --------- */
.aviso-web{
  position:absolute; top:10px; right:10px; z-index:2;
  padding:4px 9px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  background:rgba(255,255,255,.95); border:1px solid var(--linea);
}
.aviso-web.g1{ background:#C0392B; border-color:transparent; color:#fff; }
.aviso-web.g2{ background:#E08A2E; border-color:transparent; color:#fff; }
.aviso-web.g3{ color:var(--texto); }
.aviso-web.g4{ color:var(--texto); }

.grupo-revisar{ padding:26px 0 0; }
.grupo-revisar + .grupo-revisar{ border-top:1px solid var(--linea); margin-top:22px; }
.grupo-revisar h2{
  margin:0 0 4px; font-size:19px; font-weight:700; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.grupo-revisar h2 span{
  font-size:11px; letter-spacing:.04em; color:var(--acento);
  background:var(--acento-suave); border-radius:999px; padding:3px 9px;
}
.grupo-revisar .pie-grupo{ margin:0 0 16px; font-size:14px; color:var(--texto); max-width:62ch; }
.filas-rev{ display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.fila-rev{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:12px 14px; background:#fff;
  border:1px solid var(--linea); border-radius:11px;
}
.rev-txt{ min-width:0; }
.rev-txt b{ display:block; font-size:15.5px; font-weight:700; }
.rev-txt small{ display:block; font-size:12px; color:var(--ink-3, var(--texto)); margin-top:1px; }
.rev-txt .det{
  display:block; margin-top:5px; font-size:12.5px; color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.rev-txt .det b{ display:inline; font-size:12.5px; color:var(--ink); }

/* --- Bloques de la portada ----------------------------------------------- */
.bloque{ padding:26px 0 6px; }
.bloque + .bloque{ border-top:1px solid var(--linea); }
.bloque-cab h2{
  margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:-.01em;
}
.bloque-cab h2 span{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral); margin-left:8px; vertical-align:middle;
}
.bloque-cab p{
  margin:0; font-family:'Playfair', Georgia, serif; font-style:italic;
  font-size:15.5px; color:var(--texto);
}
.bloque .rejilla{ padding:16px 0 26px; }

/* --- Rejilla de destinos ------------------------------------------------- */
.rejilla{
  display:grid; grid-template-columns:1fr; gap:16px;
  padding:22px 0 40px;
}
@media (min-width:640px){ .rejilla{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:980px){ .rejilla{ grid-template-columns:repeat(3,1fr); } }

.tarjeta{
  /* Posicionada siempre: el aviso de la comparación con la web se coloca
     respecto a la tarjeta, y sin esto se iba a la esquina de la ventana. */
  position:relative;
  display:flex; flex-direction:column; text-align:left; width:100%;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; cursor:pointer; padding:0;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:transparent; }
.tarjeta .foto{
  aspect-ratio:16/10; background:var(--fondo-2);
  position:relative; overflow:hidden;
}
.tarjeta .foto img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* La foto de portada va limpia, sin velo de color encima: son las mismas fotos
   que llevan los PDF y se ven mejor tal cual. */
/* El hueco de la foto que falta.

   Al EQUIPO se le dice, para que se vea lo que queda por hacer. A una familia
   no: «Foto pendiente» es disculparse por algo que no le importa, y encima
   suena a que no estamos listos. Para ella es solo un hueco tranquilo. */
.tarjeta .foto.vacia{
  background:linear-gradient(160deg, var(--fondo-2), #EFEBE8);
}
:root[data-modo="equipo"] .tarjeta .foto.vacia::after{
  content:'Foto pendiente'; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#C9C4C0;
}
.tarjeta .sello{
  position:absolute; top:10px; left:10px;
  background:rgba(255,255,255,.94); border-radius:999px; padding:4px 10px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--acento);
}
.tarjeta .cuerpo{ padding:15px 16px 17px; display:flex; flex-direction:column; flex:1; gap:7px; }
.tarjeta .pais{
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto);
}
.tarjeta h3{ margin:0; font-size:19px; font-weight:700; line-height:1.2; letter-spacing:-.01em; }
.tarjeta .tagline{ margin:0; font-size:14px; color:var(--texto); line-height:1.45; }
.tarjeta .pie{
  margin-top:auto; padding-top:11px; border-top:1px solid var(--linea);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.tarjeta .edad{ font-size:13px; color:var(--texto); }
.tarjeta .desde{ font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap; }
.tarjeta .desde small{ font-size:11px; font-weight:500; color:var(--texto); display:block; text-align:right; }

.vacio{
  padding:48px 20px; text-align:center; color:var(--texto);
  border:1px dashed var(--linea); border-radius:var(--radio); margin:24px 0;
}

/* --- Ficha --------------------------------------------------------------- */
.ficha{ padding-bottom:96px; }
.ficha-foto{
  width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--fondo-2);
}
@media (min-width:760px){ .ficha-foto{ border-radius:var(--radio); margin-top:20px; } }

.ficha-cab{ padding:22px 0 18px; }
.ficha-cab .pais{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acento); margin:0 0 8px;
}
.ficha-cab h1{ font-size:clamp(26px,6.5vw,38px); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0 0 8px; }
.ficha-cab .tagline{
  font-family:'Playfair', Georgia, serif; font-style:italic; font-size:clamp(16px,4.2vw,20px);
  color:var(--texto); margin:0 0 14px;
}

.destacado{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--linea); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; margin:4px 0 26px;
}
.destacado > div{ background:#fff; padding:14px 16px; }
.destacado .et{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto); margin:0 0 4px;
}
.destacado .va{ font-size:17px; font-weight:700; margin:0; }

.seccion{ padding:0 0 26px; }
.seccion h2{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento); margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--linea);
}
.seccion p{ margin:0 0 10px; color:var(--texto); }
.seccion ul{ margin:0 0 10px; padding-left:20px; }
.seccion li{ margin-bottom:5px; color:var(--texto); }
.item{ margin:0 0 10px; color:var(--texto); }
.item b{ color:var(--ink); font-weight:700; }

.marcas{ list-style:none; margin:0; padding:0; }
.marcas li{
  position:relative; padding-left:26px; margin-bottom:7px; color:var(--texto);
}
.marcas li::before{
  position:absolute; left:0; top:0; font-weight:700; font-size:14px;
}
.marcas.si li::before{ content:'\2713'; color:#5BA97A; }
.marcas.no li::before{ content:'\00D7'; color:#C98A84; }

/* --- Galería con swipe --------------------------------------------------- */
.galeria-sec h2{ display:flex; align-items:center; gap:8px; }
.cuenta-fotos{
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  background:var(--acento-suave); color:var(--acento);
  padding:2px 7px; border-radius:999px;
}

.galeria{ position:relative; }
.tira{
  display:flex; gap:0; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* Sin scroll-behavior:smooth aqui a proposito: lo pide el JS cuando toca,
     con scrollTo. Puesto en CSS afecta tambien al dedo y pelea con el snap. */
  border-radius:var(--radio); background:var(--fondo-2);
  scrollbar-width:none;
}
.tira::-webkit-scrollbar{ display:none; }
.diapo{ flex:0 0 100%; scroll-snap-align:center; }
.diapo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

.flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:0; background:rgba(255,255,255,.92); color:var(--ink);
  font-size:22px; line-height:1; display:none; place-items:center;
  box-shadow:0 2px 10px rgba(74,74,74,.18);
}
.flecha.izq{ left:10px; }
.flecha.der{ right:10px; }
.flecha:hover{ background:#fff; }
/* En móvil sobra: se pasa con el dedo. Las flechas son para el ratón. */
@media (hover:hover) and (min-width:760px){ .flecha{ display:grid; } }

.puntos{ display:flex; justify-content:center; gap:7px; padding:12px 0 0; }
.puntos .punto{
  width:7px; height:7px; padding:0; border-radius:999px; cursor:pointer;
  border:0; background:var(--linea); transition:.2s;
}
.puntos .punto[aria-current="true"]{ background:var(--acento); width:20px; }

@media (prefers-reduced-motion:reduce){ .tira{ scroll-behavior:auto; } }

/* --- Tabla de precios ---------------------------------------------------- */
.precios{ width:100%; border-collapse:collapse; font-size:14.5px; }
.precios th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto);
  padding:0 10px 8px 0; border-bottom:1px solid var(--linea);
}
.precios th:last-child, .precios td:last-child{ text-align:right; padding-right:0; }
.precios td{ padding:9px 10px 9px 0; border-bottom:1px solid var(--linea); color:var(--texto); }
.precios td:last-child{ font-weight:700; color:var(--ink); white-space:nowrap; }
.precios .grupo td{
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acento); padding-top:16px; border-bottom:0;
}
.nota{
  margin:12px 0 0; padding:12px 14px; border-radius:10px;
  background:var(--fondo-2); font-size:13.5px; color:var(--texto);
}

/* --- Preguntas frecuentes ------------------------------------------------ */
.faq{ padding:8px 0 30px; border-top:1px solid var(--linea); margin-top:28px; }
.faq > h2{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acento); margin:26px 0 6px;
}
.pregunta{ border-bottom:1px solid var(--linea); }
.pregunta summary{
  list-style:none; cursor:pointer; padding:15px 34px 15px 0; position:relative;
  font-size:15.5px; font-weight:500; color:var(--ink);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:20px; font-weight:400; color:var(--acento); line-height:1;
}
.pregunta[open] summary::after{ content:'−'; }
.pregunta summary:hover{ color:var(--acento); }
.pregunta .respuesta{ padding:0 0 18px; }
.pregunta .respuesta p{ margin:0 0 10px; font-size:14.5px; color:var(--texto); }
.pregunta .respuesta ul{ margin:0 0 10px; padding-left:20px; }
.pregunta .respuesta li{ margin-bottom:5px; font-size:14.5px; color:var(--texto); }
.pregunta .respuesta .item{ font-size:14.5px; color:var(--texto); }
.pregunta .respuesta b{ color:var(--ink); font-weight:700; }

/* El aviso del vuelo: sobrio a propósito. Es información, no una alarma.
   Va pegado a la caja del precio —de eso habla— y con aire por debajo, para
   que no parezca el subtítulo de la sección que viene detrás. */
.destacado.con-aviso{ margin-bottom:9px; }
.aviso-precio{
  margin:0 0 30px; font-size:12.5px; line-height:1.45; color:var(--texto);
  padding-left:19px; position:relative;
}
.aviso-precio::before{
  content:'ⓘ'; position:absolute; left:0; top:1px; color:var(--acento); font-size:13px;
}

/* --- Barra de acción fija ------------------------------------------------ */
.accion{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  padding:11px 0 calc(11px + env(safe-area-inset-bottom));
}
.accion-in{
  width:var(--ancho); margin-inline:auto;
  display:flex; align-items:center; gap:12px;
}
.accion .txt{ flex:1; min-width:0; }
.accion .txt .a{ font-size:12px; color:var(--texto); }
.accion .txt .b{ font-size:17px; font-weight:700; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  background:var(--acento); color:#fff; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:filter .15s;
}
.btn:hover{ filter:brightness(.94); }
.btn.fantasma{ background:transparent; border-color:var(--linea); color:var(--ink); }
.btn.fantasma:hover{ border-color:var(--acento); color:var(--acento); filter:none; }
.btn.ancho{ width:100%; }
.btn.pequeno{ padding:9px 16px; font-size:13.5px; }

/* --- Panel de contacto (llamar o escribir) -------------------------------- */
.panel-fondo{
  position:fixed; inset:0; z-index:100;
  background:rgba(74,74,74,.42); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:aparece .18s ease-out;
}
@media (min-width:640px){ .panel-fondo{ align-items:center; } }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }

.panel{
  position:relative; width:min(100% - 20px, 420px);
  background:#fff; border-radius:var(--radio) var(--radio) 0 0;
  padding:26px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 40px rgba(74,74,74,.22);
  animation:sube .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width:640px){
  .panel{ border-radius:var(--radio); padding-bottom:24px; }
}
@keyframes sube{ from{ transform:translateY(18px) } to{ transform:none } }
@media (prefers-reduced-motion:reduce){
  .panel-fondo, .panel{ animation:none; }
}

.panel-x{
  position:absolute; top:10px; right:12px;
  width:34px; height:34px; border:0; background:none; cursor:pointer;
  font-size:26px; line-height:1; color:var(--texto);
}
.panel-x:hover{ color:var(--ink); }

.panel-tit{
  margin:0 0 16px; font-size:17px; font-weight:700; padding-right:30px;
}
.panel-pie{ margin:16px 0 0; font-size:12.5px; color:var(--texto); text-align:center; }

.opcion{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; margin-bottom:10px;
  border:1px solid var(--linea); border-radius:12px;
  text-decoration:none; color:inherit; transition:.15s;
}
.opcion:hover{ border-color:var(--acento); background:var(--acento-suave); }
.opcion .ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:999px;
  background:var(--acento-suave); color:var(--acento);
  display:grid; place-items:center; font-size:17px;
}
.opcion b{ display:block; font-size:15.5px; font-weight:700; }
.opcion small{ display:block; font-size:13px; color:var(--texto); margin-top:1px; }

/* --- Generador de propuesta ---------------------------------------------- */
.pestanas{
  display:flex; gap:6px; padding:20px 0 0;
  border-bottom:1px solid var(--linea);
}
.pestana{
  border:0; background:none; cursor:pointer; padding:10px 2px 12px;
  margin-right:18px; font-size:15px; font-weight:500; color:var(--texto);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.pestana:hover{ color:var(--ink); }
.pestana[aria-pressed="true"]{
  color:var(--acento); font-weight:700; border-bottom-color:var(--acento);
}

/* La barra de acción va fija abajo y tapaba la última fila. El hueco se pone
   en el contenedor de la lista, así vale para las dos pestañas. */
#c-lista{ padding-bottom:7rem; }
.filas-guia{ padding:22px 0 0; display:flex; flex-direction:column; gap:10px; }
.fila-guia{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:10px 14px 10px 10px; cursor:pointer;
  background:#fff; border:1px solid var(--linea); border-radius:12px;
  transition:.15s;
}
.fila-guia:hover{ border-color:var(--acento); box-shadow:var(--sombra); }
.fg-foto{
  flex:0 0 auto; width:62px; height:46px; border-radius:8px;
  background:var(--fondo-2) center/cover no-repeat;
}
.fg-marca{
  flex:0 0 auto; width:26px; height:26px; border-radius:999px;
  border:1px solid var(--linea); background:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700; color:transparent;
}
.fila-guia[data-sel="1"]{ border-color:var(--acento); background:var(--acento-suave); }
.fila-guia[data-sel="1"] .fg-marca{
  background:var(--acento); border-color:var(--acento); color:#fff;
}
.fg-txt{ flex:1; min-width:0; }
.fg-txt b{ display:block; font-size:16px; font-weight:700; }
.fg-txt small{ display:block; font-size:12.5px; color:var(--texto); margin-top:2px; }
.fg-ir{
  flex:0 0 auto; font-size:13px; font-weight:700; color:var(--acento);
  white-space:nowrap;
}
@media (max-width:560px){ .fg-ir{ display:none; } }

/* El `.prop-cab p` de la propuesta es Playfair en cursiva y pisa a esta regla
   por especificidad, así que hay que nombrar las dos. */
.para-quien,
.prop-cab .para-quien{
  font-family:var(--sans); font-style:normal;
  margin:0 0 10px; font-size:13px; font-weight:700; color:var(--texto);
  background:var(--fondo-2); border:1px solid var(--linea);
  border-radius:999px; padding:5px 12px; display:inline-block;
}

.crear-datos{ padding:22px 0 4px; }
@media (min-width:760px){
  .crear-datos{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
}

.buscador{ position:relative; margin-bottom:10px; }
.buscador .lupa{
  position:absolute; left:13px; top:50%; transform:translateY(-52%);
  font-size:17px; color:var(--texto); pointer-events:none;
}
.buscador input{
  width:100%; padding:11px 38px 11px 38px;
  border:1px solid var(--linea); border-radius:999px;
  font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff;
  -webkit-appearance:none;
}
.buscador input:focus{ outline:2px solid var(--acento-suave); border-color:var(--acento); }
.buscador input::-webkit-search-cancel-button{ display:none; }
.buscador .limpiar{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; background:none; cursor:pointer;
  font-size:20px; line-height:1; color:var(--texto);
}
.buscador .limpiar:hover{ color:var(--ink); }

.fila-filtros{ margin-bottom:9px; }
.fila-filtros select{
  width:100%; padding:9px 12px; border:1px solid var(--linea); border-radius:10px;
  font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff;
}
@media (min-width:760px){ .fila-filtros select{ width:auto; min-width:280px; } }

.linea-recuento{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.linea-recuento .recuento{ margin:10px 0 0; }
.linea-recuento .btn{ margin-top:8px; flex:0 0 auto; }
.linea-recuento .btn[hidden]{ display:none; }

.elegidos{ display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; }
.elegidos:empty{ padding-top:0; }
.elegido{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; cursor:pointer;
  background:var(--acento); border:0; color:#fff;
  font-size:12.5px; font-weight:500;
}
.elegido:hover{ filter:brightness(.93); }
.elegido span{ font-size:15px; line-height:1; opacity:.85; }
.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.grupo-crear{ padding:22px 0 0; }
.grupo-crear h2{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto);
  padding-bottom:8px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; gap:8px;
}
.grupo-crear h2 span{
  font-size:10.5px; letter-spacing:.04em; color:var(--acento);
  background:var(--acento-suave); border-radius:999px; padding:2px 7px;
}
.grupo-crear .rejilla{ padding:14px 0 6px; }

.selector .tarjeta{ position:relative; }
.selector .tarjeta[data-sel="1"]{ border-color:var(--acento); box-shadow:0 0 0 2px var(--acento-suave); }
.selector .marca{
  position:absolute; top:10px; right:10px; z-index:2;
  width:28px; height:28px; border-radius:999px;
  background:rgba(255,255,255,.94); border:1px solid var(--linea);
  display:grid; place-items:center; font-size:15px; font-weight:700; color:transparent;
}
.selector .tarjeta[data-sel="1"] .marca{
  background:var(--acento); border-color:var(--acento); color:#fff;
}

.campo{ display:block; margin:0 0 16px; }
.campo span{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto); margin-bottom:7px;
}
.campo input, .campo textarea{
  width:100%; padding:12px 14px; border:1px solid var(--linea); border-radius:10px;
  font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff;
}
.campo input:focus, .campo textarea:focus{ outline:2px solid var(--acento-suave); border-color:var(--acento); }

.enlace-out{
  display:flex; gap:8px; align-items:center;
  padding:12px 14px; border:1px solid var(--linea); border-radius:10px;
  background:var(--fondo-2); font-size:13px; color:var(--texto);
  word-break:break-all;
}

/* Varias guías en un mismo enlace: cada una con su nombre, para que se lean
   como dos programas y no como una lista larga de destinos. */
.grupo-prop{ padding:6px 0 0; }
.grupo-prop + .grupo-prop{ border-top:1px solid var(--linea); margin-top:18px; padding-top:24px; }
.grupo-prop h2{
  margin:0 0 4px; font-size:21px; font-weight:700; letter-spacing:-.01em;
}
.grupo-prop .grupo-claim{
  margin:0; font-family:'Playfair', Georgia, serif; font-style:italic;
  font-size:16px; color:var(--texto);
}
.grupo-prop .rejilla{ padding:16px 0 26px; }

/* --- Propuesta ----------------------------------------------------------- */
.prop-cab{ padding:34px 0 26px; text-align:center; }
.prop-cab .cintillo{
  font-family:var(--sans);   /* el .prop-cab p de abajo es Playfair; este no */
  font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--acento); margin:0 0 12px;
}
.prop-cab h1{ font-size:clamp(26px,6.5vw,40px); font-weight:700; line-height:1.12; margin:0 0 12px; letter-spacing:-.02em; }
.prop-cab p{
  font-family:'Playfair', Georgia, serif; font-style:italic;
  font-size:clamp(16px,4.2vw,20px); color:var(--texto); margin:0 auto; max-width:34em;
}
.firma{
  margin:36px 0 0; padding:22px; border-radius:var(--radio);
  background:var(--fondo-2); text-align:center;
}
.firma p{ margin:0 0 14px; color:var(--texto); }

footer{
  padding:34px 0 40px; margin-top:20px; border-top:1px solid var(--linea);
  font-size:13px; color:var(--texto);
}
footer a{ color:var(--acento); text-decoration:none; font-weight:500; }
footer .descarga{ margin-bottom:10px; }