/* ============================================================
   GUAYKU.COM — Design system B2C
   Base: paleta y tipografías aprobadas en LP Búzios (mayo 2026).
   Legibilidad 50+: body ≥17px, contraste AA, targets ≥48px.
   ============================================================ */

:root{
  /* Paleta tomada del guayku.com vigente: blanco + familia de verdes de marca */
  --verde:        #2B9927;   /* verde de marca: SOLO decorativo (bordes, ✓, barras). Con texto blanco da 3,69:1 y reprueba AA */
  --verde-texto:  #1E7A1C;   /* verde para texto chico sobre blanco: AA 5,45:1 */
  --verde-medio:  #18963F;  /* sin uso hoy: queda documentado como verde de marca de guayku.com */
  --verde-claro:  #46DD6B;
  --verde-oscuro: #10501F;
  --verde-ink:    #0A3614;
  --coral:        #FF6B4A;  /* SOLO estados de error de formulario */
  --dorado:       #8A6D22;  /* SOLO estrellas de testimonios. #C9A961 daba 2,25:1 sobre blanco; este da 4,89:1 */
  --beige:        #FFFFFF;   /* fondo base: blanco, como guayku.com */
  --beige-warm:   #F1F7F1;   /* secciones alternas: verde muy suave */
  --sand:         #DCE9DC;
  --negro:        #333333;   /* color de texto de guayku.com */
  --gris:         #5F6B60;
  --gris-claro:   #E3EAE3;
  --rule:         #E2EAE2;
  --wa:           #25D366;
  --wa-dark:      #128C7E;
  --wa-ink:       #0A3614;   /* texto/ícono sobre el verde de WhatsApp: AA 6,8:1 */
  --font-display: 'Sansita', Georgia, serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --ancho:        min(94vw, 1680px);   /* antes 1120px fijos: sobraban 400px por lado en 1920 */
  --pad-section:  clamp(44px, 6vw, 84px);
  --radius:       18px;
  --shadow:       0 2px 6px rgba(0,40,12,.06), 0 14px 34px rgba(0,40,12,.09);
  --shadow-lift:  0 6px 14px rgba(0,40,12,.10), 0 22px 48px rgba(0,40,12,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:17.5px; line-height:1.65;
  color:var(--negro); background:var(--beige);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde-texto);text-decoration:none}  /* --verde da 3,69:1 y reprueba AA en texto chico */
a:hover{color:var(--verde-oscuro)}

h1,h2,h3{font-family:var(--font-display);color:var(--verde-oscuro);line-height:1.15;font-weight:800}
h1{font-size:clamp(38px,6.4vw,68px);letter-spacing:-.5px}
h2{font-size:clamp(30px,4.6vw,48px)}
h3{font-size:clamp(21px,2.6vw,27px)}
h2 em, h1 em{font-style:italic;color:var(--verde)}
.hero-home h1 em, .cta-final h2 em{color:#46DD6B} /* verde claro: legibilidad sobre fondo oscuro */

.eyebrow{
  display:block;font-size:13px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--verde-oscuro);margin-bottom:14px;
}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 clamp(22px,2.5vw,44px)}
/* El renglón se topa en 90 caracteres —el máximo que se sigue leyendo cómodo—
   pero en pantalla grande la letra crece, así que ocupa más ancho sin volverse
   una línea de 150 caracteres donde se pierde dónde sigue. */
.wrap > p, .prosa{font-size:clamp(17.5px,1.25vw,22px);max-width:90ch}
.section{padding:var(--pad-section) 0}
.section.warm{background:var(--beige-warm)}
.section.dark{background:var(--verde-oscuro);color:#fff}
.section.dark h2,.section.dark h3{color:#fff}
.section-sub{font-size:clamp(17.5px,1.25vw,22px);color:var(--gris);margin:14px 0 0;max-width:90ch}
.section.dark .section-sub{color:rgba(255,255,255,.82)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.site-header .bar{
  max-width:var(--ancho);margin:0 auto;padding:12px clamp(22px,2.5vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.site-header .logo img{height:clamp(32px,3.2vw,46px);width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav a{
  color:var(--negro);font-weight:500;font-size:16.5px;
  padding:12px 2px;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.on{color:var(--verde-oscuro);border-bottom-color:var(--verde)}
.nav .nav-wa{
  background:var(--verde-texto);color:#fff;font-weight:600;border-bottom:none;
  padding:12px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
}
.nav .nav-wa:hover{background:var(--verde-oscuro);color:#fff}
.nav-burger{display:none;background:none;border:0;font-size:30px;color:var(--verde-oscuro);cursor:pointer;padding:8px 12px}
@media(max-width:820px){
  .nav-burger{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--beige);border-bottom:1px solid var(--rule);padding:6px 22px 18px;
  }
  .nav.open{display:flex}
  .nav a{padding:15px 4px;font-size:18px;border-bottom:1px solid var(--rule)}
  .nav .nav-wa{margin-top:14px;justify-content:center;border-radius:999px}
}

/* ---------- Hero home ---------- */
.hero-home{
  position:relative;color:#fff;min-height:min(78vh,640px);
  display:flex;align-items:center;
  background:linear-gradient(160deg,rgba(0,40,12,.72),rgba(0,61,20,.45) 55%,rgba(0,40,12,.65)),
             var(--hero-img,url('assets/dest/maragogi.jpg')) center/cover;
}
.hero-home .wrap{padding-top:70px;padding-bottom:80px}
.hero-home h1{color:#fff;max-width:15ch}
.hero-home .lede{font-size:clamp(18px,2vw,21px);max-width:52ch;margin:20px 0 30px;color:rgba(255,255,255,.94)}
.hero-home .eyebrow{color:var(--verde-claro)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 28px;border-radius:999px;
  font-weight:600;font-size:17px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:0;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-wa{background:var(--verde-texto);color:#fff}
.btn-wa:hover{background:var(--verde-oscuro);color:#fff}
.btn-primario{background:var(--verde-texto);color:#fff}
.btn-primario:hover{color:#fff}
.btn-claro{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-claro:hover{background:rgba(255,255,255,.28);color:#fff}

/* ---------- Ícono de WhatsApp ----------
   Reemplaza al emoji 💬, que dependía de la fuente del sistema y en Windows se
   ve como un bocadillo genérico. Va por máscara para que herede el color del
   texto del botón y no haya que tocar los ~370 enlaces del sitio. */
.btn-wa::before, .nav-wa::before, .hwa::before, .wa-linea::before{
  content:'';flex-shrink:0;
  width:1.25em;height:1.25em;margin-right:.15em;   /* aire alrededor de la marca */
  /* La marca va entera y sin recolorear: círculo verde oficial #25D366 con el
     glifo blanco. Meta pide expresamente no modificar los colores del logo, así
     que no se pinta por máscara — se usa tal cual sobre el botón. */
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2216%22%20fill%3D%22%2325D366%22/%3E%3Cpath%20d%3D%22M16%203C9.4%203%204%208.4%204%2015c0%202.6.8%205%202.3%207L4%2029l7.2-2.3c1.9%201%204%201.6%206.3%201.6h.5c6.6%200%2012-5.4%2012-12S22.6%203%2016%203zm5.9%2017c-.3.8-1.6%201.5-2.3%201.6-.6.1-1.3.2-2.2-.1-.5-.2-1.2-.4-2-.8-3.5-1.5-5.8-5-6-5.3-.2-.2-1.4-1.9-1.4-3.6%200-1.7.9-2.6%201.2-2.9.3-.3.7-.4%201-.4h.7c.2%200%20.5-.1.8.6.3.8%201.1%202.6%201.2%202.8.1.2.2.4%200%20.7-.1.2-.2.4-.4.6l-.6.7c-.2.2-.4.4-.2.8.2.4%201%201.7%202.2%202.7%201.5%201.4%202.8%201.8%203.2%202%20.4.2.6.2.9-.1.2-.3%201-1.2%201.3-1.6.3-.4.5-.3.9-.2.4.1%202.1%201%202.5%201.2.4.2.6.3.7.4.1.3.1.9-.2%201.9z%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") center/contain no-repeat;
}
.hwa::before{width:1.05em;height:1.05em}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--verde-oscuro);color:#fff;padding:26px 0}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.trust-item b{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);display:block;color:var(--verde-claro)}
.trust-item span{font-size:14.5px;opacity:.9}
@media(max-width:680px){.trustbar .wrap{grid-template-columns:repeat(2,1fr);gap:22px 12px}}

/* ---------- Cards de salidas (.pkg — contrato con catalogo.js) ---------- */
.pkg-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:26px;margin-top:38px;
  /* 290px daba 5 columnas de 298px en pantalla ancha y los títulos se partían
     en dos líneas; con 330 quedan 4 de ~380px, cómodas de leer. */
}
/* Destacadas de la home: son 9, así que la grilla se fija en 3 columnas y cierra
   3+3+3 sin huecos. Con auto-fill el número de columnas cambiaba solo y quedaba
   una card suelta al final. */
@media(min-width:1000px){
  [data-catalogo="destacadas"]{grid-template-columns:repeat(3,1fr)}
}
/* En tablet entran 2 y la novena quedaría sola: ocupa el ancho completo */
@media(min-width:640px) and (max-width:999px){
  [data-catalogo="destacadas"]{grid-template-columns:repeat(2,1fr)}
  [data-catalogo="destacadas"] .pkg:last-child:nth-child(odd){grid-column:1/-1}
}
.pkg{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--rule);color:var(--negro);
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s;
}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);color:var(--negro)}
.pkg-img{position:relative;height:190px;background:var(--beige-warm) center/cover no-repeat;overflow:hidden}
.pkg-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;left:14px;top:14px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#fff;text-transform:uppercase;
}
.badge.sga{background:var(--verde-texto)}
.badge.cg{background:var(--verde-oscuro);color:#fff}
.badge.ind{background:var(--verde-claro);color:var(--verde-ink)}
.cupo-pill{
  position:absolute;right:14px;bottom:14px;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:600;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.cupo-pill.disp{color:var(--verde-texto)}
.cupo-pill.ult{color:#C2410C;background:#FFF3EA}
.cupo-pill.agot{color:#B91C1C;background:#FEF1F1}
.cupo-pill.prox{color:var(--gris)}
.pkg.sinlugar .pkg-img{filter:grayscale(.75)}
.pkg.sinlugar{opacity:.82}
.pkg-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;gap:6px}
.pkg-cat{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-oscuro)}
.pkg-title{font-family:var(--font-display);font-size:23px;color:var(--verde-oscuro);line-height:1.2}
.pkg-meta{font-size:15px;color:var(--gris)}
.pkg-desc{font-size:15.5px;color:var(--gris);margin-top:2px;flex:1}
.pkg-priceline{
  display:flex;align-items:flex-end;justify-content:space-between;
  border-top:1px solid var(--rule);margin-top:14px;padding-top:14px;
}
.pkg-price-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.pkg-price{font-family:var(--font-display);font-size:30px;color:var(--verde-oscuro);line-height:1}
.pkg-price small{font-size:15px;margin-right:3px;color:var(--gris)}
.pkg-fine{font-size:13px;color:var(--gris)}
.pkg-more{
  margin-top:4px;font-weight:600;color:var(--verde-texto);font-size:15.5px;
  display:inline-flex;align-items:center;gap:6px;
}
.pkg:hover .pkg-more{color:var(--verde-oscuro)}

/* ---------- Chips de filtros ---------- */
.filtros{display:flex;flex-direction:column;gap:14px;margin-top:30px}
/* La barra de /salidas/ reusa el buscador del hero, pero filtra en vivo:
   17 chips ocupaban 574px y empujaban la primera card fuera de pantalla. */
.filtros-box{box-shadow:var(--shadow);border:1px solid var(--rule)}
.hb-buscar.filtros-reset{
  background:var(--gris-claro);color:var(--verde-oscuro);
  min-height:48px;padding:0 22px;font-size:15.5px;font-weight:600;
}
.hb-buscar.filtros-reset:hover{background:var(--sand);color:var(--verde-oscuro);transform:none}
.filtros .filtros-leyenda{margin-top:0}
.filtros-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  min-height:48px;padding:10px 20px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--sand);background:#fff;color:var(--negro);
  font-family:var(--font-body);font-size:15.5px;font-weight:500;transition:all .14s;
}
.chip:hover{border-color:var(--verde)}
.chip.on{background:var(--verde-oscuro);border-color:var(--verde-oscuro);color:#fff}
/* En mobile los 17 chips apilados medían 574px y empujaban la primera card
   fuera de la pantalla: cada fila pasa a una sola línea con scroll lateral. */
@media(max-width:680px){
  .filtros-row{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -22px;padding:2px 22px;
  }
  .filtros-row::-webkit-scrollbar{display:none}
  .filtros-row .chip{flex:0 0 auto;scroll-snap-align:start}
}

/* Leyenda de las tres modalidades. En desktop va siempre visible; en mobile se
   pliega, para no empujar la primera card fuera de la pantalla. */
.filtros-leyenda{
  font-size:15px;line-height:1.5;color:var(--gris);
  background:var(--beige-warm);border-radius:12px;padding:12px 18px;margin-top:4px;
}
.filtros-leyenda b{color:var(--verde-oscuro)}
.filtros-leyenda summary{
  cursor:pointer;font-weight:600;color:var(--verde-oscuro);font-size:15.5px;
  list-style:none;display:flex;align-items:center;gap:8px;min-height:26px;
}
.filtros-leyenda summary::-webkit-details-marker{display:none}
.filtros-leyenda summary::after{content:'+';font-size:20px;color:var(--verde);margin-left:auto}
.filtros-leyenda[open] summary::after{content:'–'}
.filtros-leyenda[open] summary{margin-bottom:8px}
.filtros-leyenda p{margin-top:6px}
/* El summary queda visible en todos los anchos: es la pregunta que la gente
   se hace igual en desktop, y si se esconde y el JS cerró el details al
   cargar en mobile, al rotar el teléfono queda una barra vacía sin abrir. */

/* Contador vivo y estado vacío del catálogo (los inyecta catalogo.js) */
.cat-count{margin-top:16px;font-size:15.5px;font-weight:600;color:var(--gris)}
.cat-vacio{
  margin-top:38px;padding:38px 30px;text-align:center;
  background:var(--beige-warm);border:1px solid var(--rule);border-radius:var(--radius);
}
.cat-vacio h3{margin-bottom:10px}
.cat-vacio p{color:var(--gris);max-width:52ch;margin:0 auto}
.cat-vacio .btn-row{justify-content:center;margin-top:22px}
/* Mensaje de estado de los formularios (role=status, lo escribe site.js) */
.form-estado{margin-top:14px;font-size:16px;font-weight:600;color:var(--verde-texto)}
.form-estado:empty{display:none}

/* Tabla de gastos de cancelación (/condiciones/) */
.cancel-tabla{margin-top:22px;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.cancel-row{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;padding:15px 20px;border-top:1px solid var(--rule);font-size:16.5px}
.cancel-row:first-child{border-top:0}
.cancel-head{background:var(--beige-warm);font-weight:600;color:var(--verde-oscuro);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.cancel-row span:last-child{text-align:right}
@media(max-width:600px){
  .cancel-row{grid-template-columns:1fr;gap:4px}
  .cancel-row span:last-child{text-align:left}
  .cancel-head{display:none}
}

/* ---------- Bloque SGA vs CG ---------- */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px}
.modo{
  background:#fff;border-radius:var(--radius);padding:34px 32px;
  box-shadow:var(--shadow);border-top:6px solid var(--verde);
}
.modo.cg{border-top-color:var(--verde-oscuro)}
.modo .tag{
  display:inline-block;padding:7px 16px;border-radius:999px;font-size:13px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:var(--verde-texto);margin-bottom:16px;
}
.modo.cg .tag{background:var(--verde-oscuro);color:#fff}
.modo p{color:var(--gris);font-size:16.5px;margin-top:10px}
.modo ul{margin:16px 0 0;padding-left:0;list-style:none}
.modo li{padding:7px 0 7px 30px;position:relative;font-size:16px}
.modo li::before{content:'✓';position:absolute;left:2px;color:var(--verde);font-weight:700}
@media(max-width:760px){.modos{grid-template-columns:1fr}}

/* ---------- Razones ---------- */
/* Sección con foto de fondo muy velada: las tarjetas blancas necesitan algo
   detrás para no leerse como bloques flotando en el vacío. El velo es fuerte a
   propósito — la foto es textura, no protagonista, y el texto conserva su
   contraste AA sobre blanco. */
.section.con-foto{position:relative;isolation:isolate}
.section.con-foto::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(rgba(255,255,255,.93),rgba(241,247,241,.97)), var(--foto) center/cover;
}
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.razon{background:#fff;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow)}
.razon .num{font-family:var(--font-display);font-size:38px;color:var(--verde);line-height:1}
.razon h3{margin:12px 0 8px}
.razon p{color:var(--gris);font-size:16px}
@media(max-width:820px){.razones{grid-template-columns:1fr}}

/* ---------- Testimonios ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.testi{
  background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px;
}
.testi .stars{color:var(--dorado);font-size:17px;letter-spacing:2px}
.testi blockquote{font-size:16.5px;line-height:1.6;color:var(--negro);flex:1}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.testi .who b{display:block;font-size:15.5px;color:var(--verde-oscuro)}
.testi .who span{font-size:13.5px;color:var(--gris)}
@media(max-width:820px){.testis{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:38px auto 0}
.faq details{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:20px 24px;font-weight:600;font-size:17.5px;
  color:var(--verde-oscuro);list-style:none;display:flex;justify-content:space-between;gap:14px;
  min-height:48px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:26px;color:var(--verde);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq .faq-a{padding:0 24px 22px;color:var(--gris);font-size:16.5px}

/* ---------- CTA final ---------- */
.cta-final{
  background:linear-gradient(150deg,var(--verde-oscuro),#0A5A28);
  border-radius:calc(var(--radius) + 6px);color:#fff;text-align:center;
  padding:clamp(44px,6vw,72px) clamp(24px,5vw,64px);
}
.cta-final h2{color:#fff}
.cta-final p{font-size:clamp(17px,1.9vw,20px);color:rgba(255,255,255,.88);max-width:52ch;margin:16px auto 30px}
.cta-final .btn-row{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--verde-ink);color:rgba(255,255,255,.85);padding:56px 0 34px;font-size:15.5px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.site-footer img.flogo{height:52px;width:auto;display:block;margin-bottom:18px}
.site-footer h4{color:#fff;font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.site-footer a{color:rgba(255,255,255,.85);display:block;padding:5px 0}
.site-footer a:hover{color:#fff}
.site-footer .legal{
  border-top:1px solid rgba(255,255,255,.15);margin-top:40px;padding-top:22px;
  font-size:13.5px;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
}
@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr}}

/* ---------- Sticky WhatsApp ---------- */
.wa-sticky{
  position:fixed;right:18px;bottom:18px;z-index:70;
  width:60px;height:60px;border-radius:50%;background:var(--wa);
  /* sin borde: un anillo alrededor del círculo modifica la marca. La sombra alcanza para despegarlo del fondo */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(18,140,126,.45);
  transition:transform .15s;
}
.wa-sticky:hover{transform:scale(1.08)}
.wa-sticky svg{width:32px;height:32px;fill:#fff}
/* Mientras se completa un formulario el botón se va: en mobile se sentaba justo
   encima del último campo y del botón de enviar, y se comía el toque. */
.wa-sticky.escondido{
  transform:translateY(130%);opacity:0;pointer-events:none;
  transition:transform .2s,opacity .2s;
}
.wa-sticky .wa-tip{
  position:absolute;right:70px;white-space:nowrap;background:#fff;color:var(--negro);
  font-size:14px;font-weight:500;padding:9px 14px;border-radius:10px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.wa-sticky:hover .wa-tip{opacity:1}
/* En táctil no existe :hover — el mensaje de horario se muestra siempre,
   con el botón convertido en píldora para que el texto entre en pantalla. */
@media(hover:none),(max-width:820px){
  /* En táctil no hay :hover. El mensaje de horario aparece unos segundos al
     cargar (.saluda) y después colapsa a círculo: una píldora fija ancha
     tapaba el buscador y las cards en pantallas de 375px. */
  .wa-sticky{width:60px;height:60px;border-radius:999px;padding:0;gap:0}
  .wa-sticky svg{width:28px;height:28px;flex-shrink:0}
  .wa-sticky .wa-tip{
    position:static;background:none;box-shadow:none;padding:0;
    color:var(--wa-ink);font-weight:600;font-size:14.5px;
    white-space:nowrap;line-height:1.2;order:2;opacity:1;display:none;
  }
  .wa-sticky.saluda{width:auto;height:auto;padding:12px 20px 12px 16px;gap:10px}
  .wa-sticky.saluda .wa-tip{display:block}
  .wa-sticky .wa-tip:empty{display:none}
}


/* ---------- Ficha de salida (detalle) ---------- */
.hero-salida{
  position:relative;color:#fff;padding:clamp(64px,9vw,110px) 0 clamp(44px,6vw,70px);
  background:linear-gradient(160deg,rgba(0,40,12,.74),rgba(0,61,20,.42) 60%,rgba(0,40,12,.6)),
             var(--hero-img) center/cover;
}
.hero-salida h1{color:#fff}
/* La bajada usa el verde oscuro por defecto y sobre la foto no se lee */
.hero-salida .eyebrow{color:var(--verde-claro)}
/* La fecha dentro del H1: hace único el título de cada ficha sin romper la
   jerarquía visual. Antes 8 fichas tenían el H1 "Maceió" y competían entre sí. */
.hero-salida h1 .h1-fecha{
  display:block;font-size:.42em;font-weight:600;font-family:var(--font-body);
  letter-spacing:0;opacity:.92;margin-top:6px;
}
.hero-salida .sub{font-size:clamp(17px,1.9vw,20px);color:rgba(255,255,255,.92);margin-top:14px}
.hero-salida .badge{position:static;display:inline-block;margin-bottom:18px}
.cupo-banner{
  display:block;margin:26px auto 0;max-width:640px;text-align:center;
  padding:13px 22px;border-radius:12px;font-weight:600;font-size:16px;
}
.cupo-banner.disp{background:rgba(255,255,255,.94);color:var(--verde-texto)}
.cupo-banner.ult{background:#FFF3EA;color:#C2410C}
.cupo-banner.agot{background:#FEF1F1;color:#B91C1C}
.cupo-banner a{text-decoration:underline}

/* En pantalla ancha el aside llegaba a 607px (es una tarjeta de precio, no una
   columna) y los párrafos a 82 caracteres por línea. Se acota el aside y la
   prosa; el ancho que sobra lo aprovechan el comparador de hoteles y las listas. */
.ficha{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,430px);gap:44px;align-items:start;margin-top:44px}
.ficha .bloque > p{max-width:74ch}
.ficha-datos{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px 30px 26px;position:sticky;top:92px;
  /* Si el aside es más alto que la ventana, que scrollee él y no trabe la página. */
  max-height:calc(100vh - 110px);overflow:auto;
}
/* Va DESPUÉS de la regla base a propósito: misma especificidad, gana la última.
   Si se mueve arriba, el position:sticky vuelve a pisar al static y la tarjeta
   de precio queda clavada tapando la ficha entera en mobile. */
@media(max-width:880px){
  .ficha{grid-template-columns:1fr}
  /* El precio, la modalidad y el CTA no pueden quedar al final de la ficha:
     en mobile suben inmediatamente debajo del hero. */
  .ficha-datos{order:-1;position:static;top:auto;margin-top:0;max-height:none;overflow:visible}
}
.ficha-datos .precio-big{font-family:var(--font-display);font-size:46px;color:var(--verde-oscuro);line-height:1}
.ficha-datos .precio-big small{font-size:20px;color:var(--gris)}
.ficha-datos .nota{font-size:14px;color:var(--gris);margin:6px 0 18px}
.dato-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px}
.dato-row b{color:var(--verde-oscuro);font-weight:600}
.ficha-datos .btn{width:100%;margin-top:22px}
.ficha-datos .micro{font-size:13.5px;color:var(--gris);text-align:center;margin-top:12px}

.bloque{margin-top:44px}
.bloque h2{font-size:clamp(26px,3.4vw,36px)}
.lista-incluye{list-style:none;margin-top:20px}
.lista-incluye li{padding:10px 0 10px 38px;position:relative;font-size:17px;border-bottom:1px solid var(--rule)}
.lista-incluye li::before{content:'✓';position:absolute;left:4px;top:10px;color:var(--verde);font-weight:700;font-size:19px}
.lista-incluye.no li::before{content:'✕';color:#B91C1C}

.hotel-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;margin-top:22px;
}
.hotel-card img{width:100%;height:240px;object-fit:cover}
.hotel-card .hc-body{padding:24px 28px}
.hotel-card .hn{font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--verde-oscuro)}
.hotel-card .ha{color:var(--gris);font-size:15.5px;margin:4px 0 12px}
.hotel-card .hr{font-size:16px}
.hotel-card .hr b{color:var(--verde-oscuro)}

/* ---------- Opciones de hotel (garantizadas) ---------- */
.hotel-opcion{
  background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:14px;margin-top:14px;display:flex;
  gap:18px;align-items:center;box-shadow:var(--shadow);
}
/* El <picture> que envuelve las fotos no debe existir para el layout: es inline,
   y el width:100% del <img> se resolvía contra un contenedor de ancho cero. */
.hotel-opcion picture,.pkg-img picture{display:contents}
.hotel-opcion img{width:150px;height:118px;object-fit:cover;border-radius:10px;flex-shrink:0}
.hotel-opcion .hoi{flex:1}
.hotel-opcion .hon{font-weight:700;color:var(--verde-oscuro);font-size:17.5px;letter-spacing:.03em;text-transform:uppercase}
.hotel-opcion .hor{color:var(--verde-texto);font-size:14px;font-weight:600;margin-top:2px}
.hotel-opcion .hod{color:var(--gris);font-size:14.5px;line-height:1.5;margin-top:6px}
.hotel-opcion .hop{text-align:right;white-space:nowrap;flex-shrink:0}
.hotel-opcion .hop b{font-family:var(--font-display);font-size:26px;color:var(--verde-oscuro)}
.hotel-opcion .hop b small{font-size:14px;color:var(--gris);margin-right:2px}
.hotel-opcion .hop span{display:block;font-size:12.5px;color:var(--gris)}
.hotel-opcion .hwa{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
  background:var(--verde-texto);color:#fff;font-size:14.5px;font-weight:600;
  padding:11px 18px;border-radius:999px;min-height:48px;max-width:100%;
  white-space:normal;text-align:center;line-height:1.3;
}
.hotel-opcion .hwa:hover{background:var(--wa);color:var(--wa-ink)}
@media(max-width:640px){
  .hotel-opcion{flex-wrap:wrap}
  .hotel-opcion img{width:100%;height:150px}
  .hotel-opcion .hop{text-align:left;width:100%;border-top:1px solid var(--rule);padding-top:10px}
}

/* ---------- Blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;margin-top:38px}
.post-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  color:var(--negro);display:flex;flex-direction:column;transition:transform .16s;
}
.post-card:hover{transform:translateY(-4px);color:var(--negro)}
.post-card .pc-img{height:180px;background:var(--beige-warm) center/cover}
.post-card .pc-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;gap:8px}
.post-card time{font-size:13.5px;color:var(--gris)}
.post-card h3{font-size:21px}
.post-card p{color:var(--gris);font-size:15.5px;flex:1}
.articulo{max-width:760px;margin:0 auto}
.articulo .post-hero{border-radius:var(--radius);margin:30px 0;max-height:420px;object-fit:cover;width:100%}
.articulo p{margin:0 0 20px;font-size:18px}
.articulo h2{font-size:clamp(24px,3vw,32px);margin:38px 0 16px}
.articulo h3{margin:30px 0 12px}
.articulo ul,.articulo ol{margin:0 0 20px 24px;font-size:18px}
.articulo li{margin-bottom:8px}

/* ---------- Utilidades ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Miga de pan: ubica a quien llega de Google directo a una página interna */
.migas{font-size:14.5px;color:var(--gris);margin-bottom:6px}
.migas a{color:var(--verde-texto)}
.migas a:hover{text-decoration:underline}

/* ---------- Páginas de destino (/destinos/<slug>/) ---------- */
/* Contenido evergreen del destino. Las fichas con fecha caducan; esto no. */
.destino-bloques{display:grid;gap:30px;margin-top:34px}
.destino-bloques .bloque h2{font-size:clamp(23px,2.8vw,30px);margin-bottom:10px}
.destino-bloques .bloque p{font-size:17.5px;color:var(--negro);max-width:70ch}
@media(min-width:900px){.destino-bloques{grid-template-columns:1fr 1fr;gap:34px 44px}}

/* ============================================================
   AGREGADOS jul-2026: selector de mes en hero · financiación
   · cuotas en cards · financiación en ficha · wizard "Armá tu viaje"
   ============================================================ */

/* --- Selector de mes en el hero --- */
.hero-buscador{
  margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);border-radius:16px;
  padding:14px 16px;max-width:520px;
}
.hero-buscador label{font-size:15px;font-weight:600;color:#fff;white-space:nowrap}
.hero-buscador select{
  flex:1;min-width:150px;min-height:48px;border-radius:999px;border:0;
  padding:0 18px;font-size:16px;font-family:var(--font-body);
  background:#fff;color:var(--verde-ink);cursor:pointer;
}
.hero-buscador .btn{min-height:48px;padding:11px 22px;font-size:16px;background:var(--verde-texto);color:#fff}

/* --- Sección Financiación (home) --- */
.financiacion{background:var(--verde-oscuro);color:#fff}
.financiacion h2{color:#fff}
.financiacion h2 em{color:#46DD6B}
.fin-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-top:14px}
.fin-lead{font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.94);margin:10px 0 22px}
.fin-puntos{list-style:none;display:grid;gap:14px}
.fin-puntos li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:rgba(255,255,255,.92)}
.fin-puntos li b{color:#fff}
.fin-check{color:#46DD6B;font-weight:700;flex:none}
.fin-card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:30px 28px;text-align:center;
}
.fin-card .fin-big{font-family:var(--font-display);font-size:clamp(30px,4vw,42px);color:#fff;line-height:1.1}
.fin-card .fin-med{color:#46DD6B}
.fin-pagos{margin-top:18px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.fin-pago{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);
  border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:600;color:#fff;
}
@media(max-width:760px){.fin-grid{grid-template-columns:1fr;gap:26px}}

/* --- Cuotas en las cards del catálogo --- */
.pkg-cuotas{margin-top:5px;font-size:13.5px;font-weight:600;color:var(--verde-texto);display:flex;align-items:center;gap:5px}

/* --- Financiación en la ficha (aside) --- */
.ficha-fin{
  margin-top:16px;background:var(--beige-warm);border:1px solid var(--rule);
  border-radius:12px;padding:13px 15px;font-size:14.5px;color:var(--verde-oscuro);line-height:1.45;
}
.ficha-fin b{color:var(--verde-oscuro)}
/* Destacado "viajás sola" en el panel de precio de las salidas acompañadas */
.dato-single{
  margin-top:14px;background:#EAF7EC;border:1px solid #BEE4C4;
  border-radius:12px;padding:13px 15px;font-size:14.5px;color:var(--verde-oscuro);line-height:1.5;
}
.dato-single b{color:var(--verde-oscuro)}

/* --- Wizard "Armá tu viaje" --- */
.wizard{max-width:640px;margin:34px auto 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,4vw,40px)}
.wizard-pasos{display:flex;gap:8px;margin-bottom:28px}
.wizard-paso{flex:1;height:6px;border-radius:99px;background:var(--gris-claro)}
.wizard-paso.on{background:var(--verde)}
.wizard-paso.done{background:var(--verde-oscuro)}
.wizard-step{display:none}
.wizard-step.on{display:block;animation:wizFade .3s ease}
@keyframes wizFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizard h2{font-size:clamp(24px,3vw,32px)}
.wizard .campo{margin-top:18px}
.wizard label{display:block;font-weight:600;color:var(--verde-oscuro);margin-bottom:7px;font-size:16px}
.wizard input,.wizard select,.wizard textarea{
  width:100%;min-height:52px;border:1.5px solid var(--rule);border-radius:12px;
  padding:12px 16px;font-size:16.5px;font-family:var(--font-body);color:var(--negro);background:#fff;
}
.wizard textarea{min-height:96px;resize:vertical}
.wizard input:focus,.wizard select:focus,.wizard textarea:focus{outline:0;border-color:var(--verde)}
.wizard-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.wizard-opt{
  border:1.5px solid var(--rule);border-radius:14px;padding:16px;cursor:pointer;text-align:center;
  font-weight:600;color:var(--verde-oscuro);transition:border-color .15s,background .15s;
}
.wizard-opt:hover{border-color:var(--verde)}
.wizard-opt.sel{border-color:var(--verde);background:var(--beige-warm)}
.wizard-opt small{display:block;font-weight:400;color:var(--gris);font-size:13.5px;margin-top:3px}
/* El radio se oculta a la vista pero sigue enfocable y lo lee el lector de pantalla:
   con display:none o visibility:hidden dejaría de existir para el teclado. */
.wizard-opt input[type="radio"]{
  position:absolute;width:1px;height:1px;min-height:0;opacity:0;margin:0;padding:0;border:0;
}
.wizard-opt:has(input:focus-visible){outline:2px solid var(--verde-texto);outline-offset:3px}
/* Respaldo para navegadores sin :has() — el foco se ve igual en el borde */
.wizard-opt input:focus-visible ~ span{text-decoration:underline}
.wizard-opt:has(input:checked){border-color:var(--verde);background:var(--beige-warm)}

/* Aviso de campo inválido: el borde de color solo no alcanza (2,82:1 y sin texto) */
.campo-error{
  color:#B91C1C;font-size:15px;font-weight:600;margin-top:8px;
}
.wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.wizard-nav .btn{min-height:50px}
.wizard-back{background:none;color:var(--gris);font-weight:600;border:0;cursor:pointer;font-size:16px}
.wizard-resumen{background:var(--beige-warm);border-radius:12px;padding:16px 18px;margin-top:8px;font-size:15.5px;color:var(--verde-oscuro)}
.wizard-dosc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.wizard-dosc{grid-template-columns:1fr}}

/* ============================================================
   HERO SLIDER (estilo Viajobien) — jul 2026
   ============================================================ */
.hero-slider{position:relative;overflow:hidden;background:var(--verde-oscuro)}
.hero-slides{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hero-slide{
  flex:0 0 100%;min-height:min(82vh,660px);display:flex;align-items:center;
  background-size:cover;background-position:center;position:relative;
}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(0,40,12,.82) 0%,rgba(0,40,12,.55) 45%,rgba(0,40,12,.25) 100%);
}
.hero-slide .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:96px;width:100%}
.hero-slide .eyebrow{color:var(--verde-claro)}
.hero-slide h1,.hero-slide h2{color:#fff;max-width:15ch;line-height:1.08}
.hero-slide h1 em{color:#46DD6B}
.hero-slide .lede{font-size:clamp(18px,2vw,21px);max-width:52ch;margin:18px 0 28px;color:rgba(255,255,255,.94)}
/* Slides de producto */
.hero-slide.prod h2{font-family:var(--font-display);font-size:clamp(38px,6vw,64px);font-weight:600;max-width:16ch}
.hero-slide .hs-meta{font-size:clamp(17px,1.8vw,20px);color:rgba(255,255,255,.92);margin:14px 0 6px}
.hero-slide .hs-precio{font-family:var(--font-display);font-size:clamp(26px,3.4vw,38px);color:#fff;margin:6px 0 4px}
.hero-slide .hs-precio small{font-size:.55em;color:rgba(255,255,255,.8);margin-right:4px}
.hero-slide .hs-cuotas{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15.5px;color:#46DD6B;margin-bottom:24px}
.hero-slide .btn-row{margin-top:8px}
/* Flechas */
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--verde-oscuro);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;
  box-shadow:var(--shadow);
}
.hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.hero-arrow.prev{left:18px}.hero-arrow.next{right:18px}
/* Dots */
.hero-dots{position:absolute;bottom:22px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:9px;
  pointer-events:none} /* la caja ocupa todo el ancho: no debe robarle el click a las flechas */
.hero-dots button{pointer-events:auto}
.hero-dots button{
  /* El punto se ve de 10px pero el área táctil es de 44px (padding transparente) */
  width:10px;height:10px;border-radius:50%;border:0;cursor:pointer;
  padding:17px 8px;background-clip:content-box;box-sizing:content-box;
  background-color:rgba(255,255,255,.45);transition:background-color .2s,width .2s;
}
.hero-dots button.on{background-color:#fff;width:26px;border-radius:6px}
/* ---------- Buscador del hero: píldora flotante sobre la foto ---------- */
.hero-bar{position:relative;z-index:5;margin-top:-64px;padding:0 0 6px}
.hero-bar .wrap{padding-top:0;padding-bottom:0}
.hb-box{
  background:#fff;border-radius:999px;box-shadow:0 10px 34px rgba(0,40,12,.16);
  display:flex;align-items:center;gap:6px;padding:12px 12px 12px 30px;
}
.hb-campo{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hb-campo label{
  font-size:13px;font-weight:600;color:var(--verde-oscuro);
  letter-spacing:.02em;padding-left:2px;cursor:pointer;
}
.hb-campo select{
  border:0;background:transparent;font-family:var(--font-body);font-size:16.5px;
  color:var(--negro);cursor:pointer;padding:2px 2px 2px 0;width:100%;
  min-height:44px;appearance:none;   /* 30px quedaba por debajo del mínimo táctil */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235F6B60'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:20px;padding-right:26px;
}
.hb-campo select:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:6px}
.hb-sep{width:1px;align-self:stretch;background:var(--rule);margin:4px 10px}
.hb-buscar{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--verde-texto);color:#fff;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--font-body);font-size:17px;font-weight:600;
  min-height:56px;padding:0 32px;transition:background .15s,transform .15s;
}
.hb-buscar svg{width:20px;height:20px;fill:currentColor}
.hb-buscar:hover{background:var(--verde-oscuro);transform:translateY(-1px)}
.hb-pie{margin-top:16px;font-size:16px;color:var(--gris);text-align:center}
.hb-pie a{font-weight:600}
@media(max-width:820px){
  /* En mobile la píldora se abre en columna: los selects a ancho completo
     y el botón como barra, que a 375px no entran en una sola línea. */
  .hero-bar{margin-top:-42px}
  .hb-box{flex-direction:column;align-items:stretch;gap:14px;border-radius:22px;padding:20px}
  .hb-campo{border:1.5px solid var(--rule);border-radius:14px;padding:9px 14px}
  .hb-sep{display:none}
  .hb-buscar{width:100%;min-height:52px}
  .hb-pie{text-align:left;font-size:15.5px}
}
@media(max-width:680px){
  /* En táctil las flechas sobran: el slider se pasa con swipe y los dots ya
     tienen área de 44px. Además compartían banda con los dots y quedaban
     apretadas contra ellos. */
  .hero-arrow{display:none}
  .hero-dots{bottom:20px}
}
@media(prefers-reduced-motion:reduce){.hero-slides{transition:none}}

/* ---------- Quién te acompaña (fichas de salida grupal acompañada) ---------- */
.equipo-viaja{background:var(--beige-warm);border-radius:var(--radius);padding:30px}
.equipo-caras{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px}
.equipo-caras figure{width:96px;text-align:center}
.equipo-caras img{width:96px;height:96px;object-fit:cover;border-radius:50%;box-shadow:var(--shadow)}
.equipo-caras figcaption{margin-top:8px;font-size:14.5px;font-weight:600;color:var(--verde-oscuro)}
.equipo-nota{margin-top:20px;font-size:16px;color:var(--gris)}
@media(max-width:520px){
  .equipo-caras{gap:14px;justify-content:space-between}
  .equipo-caras figure,.equipo-caras img{width:72px}
  .equipo-caras img{height:72px}
}

/* Testimonio embebido en la ficha de salida acompañada */
.testi-ficha{background:#fff;border-radius:var(--radius);padding:22px 24px;margin-top:22px;box-shadow:var(--shadow)}
.testi-ficha .stars{color:var(--dorado);font-size:16px;letter-spacing:2px}
.testi-ficha blockquote{margin-top:10px;font-size:16.5px;line-height:1.6;color:var(--negro)}
.testi-ficha figcaption{margin-top:12px;font-size:14.5px;color:var(--gris)}