/* ═══════════════════════════════════════════════════════
   OFERTA VENEZUELA · Guías de Margarita

   Páginas para leer, no para navegar. Todo el diseño empuja
   hacia lo mismo: que el texto se lea cómodo en un teléfono
   con una mano, de noche, después de un día de playa.
   ═══════════════════════════════════════════════════════ */

:root{
  --navy:#0A1D3D;
  --teal:#00B4A6;
  --gold:#FFB400;
  --coral:#FF5B5B;
  --crema:#FFF6EE;
  --papel:#FFFFFF;
  --suave:#6B7A96;
  --linea:#E8DFD4;
  --texto:#233350;
}

*{box-sizing:border-box;margin:0;padding:0}

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

body{
  background:var(--crema);
  color:var(--texto);
  font-family:Quicksand,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Cabecera ── */
.top{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--navy);
  padding:13px max(5vw,18px);
  padding-top:calc(13px + env(safe-area-inset-top));
}
.marca img{height:32px;width:auto;display:block}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a{
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.82);
  padding:9px 14px;border-radius:10px;
  transition:color .2s, background .2s;
}
.top nav a:hover{
  color:#fff;background:rgba(255,255,255,.1);text-decoration:none;
}
.top nav .cta{
  background:var(--gold);color:var(--navy);font-weight:700;
}
.top nav .cta:hover{background:#F0A800;color:var(--navy)}

/* ── El texto ── */
.hoja{
  max-width:720px;
  margin:0 auto;
  padding:28px max(5vw,20px) 10px;
}

.volver{
  display:inline-block;
  font-size:.82rem;font-weight:600;color:var(--suave);
  margin-bottom:20px;
}
.volver:hover{color:var(--teal)}

.portada{margin:0 0 30px}
.portada img{
  width:100%;border-radius:18px;
  aspect-ratio:16/9;object-fit:cover;
  background:var(--linea);
}

/* Mientras no haya foto, un degradado de marca en vez de un
   ícono roto. Se quita solo cuando la imagen exista. */
.portada img:not([src$=".webp"]),
article figure img:not([src$=".webp"]){background:var(--linea)}

.portada img[data-falta],article figure img[data-falta]{
  background:linear-gradient(135deg,var(--navy),#123058);
}

article h1{
  font-size:clamp(1.85rem,5.2vw,2.6rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--navy);
  margin-bottom:22px;
}

article h2{
  position:relative;
  font-size:clamp(1.28rem,3.4vw,1.6rem);
  font-weight:600;
  line-height:1.3;
  color:var(--navy);
  margin:42px 0 14px;
  padding-top:18px;
}
/* Una línea corta arriba: separa sin gritar */
article h2::before{
  content:'';
  position:absolute;left:0;top:0;
  width:34px;height:3px;border-radius:3px;
  background:var(--teal);
}

article h3{
  font-size:1.1rem;font-weight:600;color:var(--navy);
  margin:28px 0 10px;
}

article h2 a,article h3 a{color:var(--navy)}
article h2 a:hover{color:var(--teal);text-decoration:none}

article p{margin-bottom:20px}

article strong{font-weight:700;color:var(--navy)}
article em{font-style:italic}

article ul{
  margin:6px 0 26px;
  padding:20px 22px;
  list-style:none;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:16px;
}
article li{
  position:relative;
  padding-left:26px;
  margin-bottom:13px;
  font-size:.96rem;
  line-height:1.65;
}
article li:last-child{margin-bottom:0}
article li::before{
  content:'';
  position:absolute;left:4px;top:.66em;
  width:8px;height:8px;border-radius:50%;
  background:var(--teal);
}

article figure{margin:30px 0}
article figure img{
  width:100%;border-radius:16px;
  aspect-ratio:16/9;object-fit:cover;
  background:var(--linea);
}

article hr{
  border:none;
  height:1px;
  background:var(--linea);
  margin:34px 0;
}

/* El párrafo que solo contiene el enlace a la categoría se
   convierte en botón: es la acción, no una frase más. */
article p:has(> strong > a):not(:has(em)){
  margin:26px 0 20px;
}
article p > strong > a{
  display:inline-block;
  background:var(--navy);color:#fff;
  font-size:.92rem;font-weight:600;
  border-radius:13px;
  padding:14px 24px;
  text-decoration:none;
  transition:transform .18s, box-shadow .18s;
}
article p > strong > a:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(10,29,61,.18);
}

/* El último párrafo suele ser la nota en cursiva */
article hr + p{
  font-size:.92rem;
  color:var(--suave);
}

/* El nombre de la isla, en el trazo de la marca */
article h1 .mano{
  font-family:'Caveat Brush',cursive;
  font-style:normal;
  font-weight:400;
  color:var(--gold);
  font-size:1.14em;
  line-height:.9;
}

/* La frase que presenta las tarjetas · no es un párrafo más */
.invita{
  position:relative;
  background:var(--papel);
  border:1px solid var(--linea);
  border-left:3px solid var(--gold);
  border-radius:0 15px 15px 0;
  padding:18px 22px;
  margin:28px 0 6px !important;
  font-size:.96rem;
  line-height:1.7;
  color:var(--suave);
}
.invita strong{
  display:block;
  font-size:1.06rem;
  color:var(--navy);
  margin-bottom:5px;
}

/* ── TARJETAS DEL ÍNDICE ──
   Un título con un párrafo debajo se lee como contenido, no como
   algo donde entrar. Con número, ícono de color y flecha, se nota
   que es una pieza en la que se puede tocar. */
.tarjetas{margin:34px 0 10px}

.tarjetas{display:grid;gap:12px}

.tj{
  display:flex;align-items:center;gap:16px;
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:18px;
  padding:13px 18px 13px 13px;
  color:inherit;text-decoration:none;
  transition:transform .22s cubic-bezier(.34,1.3,.5,1),
             box-shadow .22s, border-color .22s;
}
.tj:hover{
  text-decoration:none;
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--c) 40%, #fff);
  box-shadow:0 12px 30px rgba(10,29,61,.09);
}

/* La foto de la guía · convierte la lista en catálogo */
.tj-f{
  flex-shrink:0;
  width:86px;height:86px;
  border-radius:14px;overflow:hidden;
  background:color-mix(in srgb, var(--c) 16%, #fff);
  position:relative;
}
.tj-f img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.3,1,.4,1);
}
.tj:hover .tj-f img{transform:scale(1.07)}

.tj-n{
  display:block;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;
  color:var(--c);
  font-variant-numeric:tabular-nums;
  margin-bottom:3px;
}

.tj-i{
  flex-shrink:0;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  background:color-mix(in srgb, var(--c) 14%, #fff);
  color:color-mix(in srgb, var(--c) 78%, var(--navy));
  transition:background .25s, transform .38s cubic-bezier(.34,1.4,.5,1);
}
.tj-i svg{width:23px;height:23px}
.tj:hover .tj-i{
  background:color-mix(in srgb, var(--c) 24%, #fff);
  transform:scale(1.07) rotate(-4deg);
}

.tj-t{flex:1;min-width:0}
.tj-t b{
  display:block;
  font-size:1.08rem;font-weight:600;line-height:1.3;
  color:var(--navy);
}
.tj-t em{
  display:block;font-style:normal;
  font-size:.88rem;line-height:1.55;
  color:var(--suave);margin-top:4px;
}

.tj-go{
  flex-shrink:0;
  font-size:1.15rem;color:rgba(10,29,61,.25);
  transition:color .25s, transform .28s;
}
.tj:hover .tj-go{color:var(--c);transform:translateX(4px)}

/* Los navegadores viejos no entienden color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .tj-i{background:rgba(10,29,61,.06);color:var(--navy)}
}

/* ── PÁGINAS DE CATEGORÍA ──
   Quien llega aquí desde Google no viene del landing: no sabe
   quiénes somos ni cómo funciona. Eso hay que contarlo. */
.pronto{
  background:#FFF8E6;border:1px solid #F0D89A;
  border-radius:15px;padding:17px 20px;
  font-size:.95rem;line-height:1.65;color:#75623D;
}
.pronto b{
  display:block;font-size:.64rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#8A6300;margin-bottom:6px;
}

/* ── RITMO ──
   Si todo tiene el mismo fondo, el ojo no sabe dónde parar. Las
   secciones se turnan: crema, blanco, azul. Eso solo ya ordena. */
.pasos,.nos{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:44px max(5vw,20px);
}
.pasos > *,.nos > *{max-width:720px;margin-left:auto;margin-right:auto}

/* Cómo funciona · sobre blanco */
.pasos{
  background:var(--papel);
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  margin-top:44px;
}

/* Quiénes somos · sobre azul, que es donde queremos que se detenga */
.nos{
  background:var(--navy);
  color:rgba(255,255,255,.76);
  margin-top:0;
}
.nos h2{color:#fff}
.nos strong{color:#fff}
.nos a{color:var(--gold)}
.nos .k{color:var(--gold)}
.nos .otras-t{color:rgba(255,255,255,.5)}

/* Cómo funciona · tres pasos numerados */
.pasos{margin-bottom:0}
.pasos .k,.nos .k{
  font-size:.64rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px;
}
.pasos h2,.nos h2{
  font-size:clamp(1.3rem,3.6vw,1.6rem);font-weight:600;
  line-height:1.3;color:var(--navy);margin-bottom:20px;
}
.pasos-g{display:grid;gap:12px}
.pasos-g article{
  display:flex;align-items:flex-start;gap:15px;
  background:var(--papel);border:1px solid var(--linea);
  border-radius:16px;padding:18px 20px;
  transition:transform .26s cubic-bezier(.34,1.3,.5,1),
             box-shadow .26s, border-color .26s;
}
.pasos-g article:hover{
  transform:translateY(-3px);
  border-color:rgba(0,180,166,.4);
  box-shadow:0 12px 28px rgba(10,29,61,.08);
}
.pasos-g article:hover .pn{background:var(--teal);color:var(--navy)}
.pn{transition:background .26s, color .26s}
.pn{
  flex-shrink:0;display:grid;place-items:center;
  width:34px;height:34px;border-radius:11px;
  background:var(--navy);color:var(--gold);
  font-size:.8rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pasos-g b{display:block;font-size:1rem;font-weight:600;color:var(--navy)}
.pasos-g em{
  display:block;font-style:normal;font-size:.89rem;line-height:1.6;
  color:var(--suave);margin-top:4px;
}

/* ── QUIÉNES SOMOS ──
   Todo alineado en la misma columna. Si cada bloque trae su
   propio margen, se desalinean entre sí: por eso el ancho y el
   centrado se declaran una sola vez, arriba. */
.nos > p{
  margin:0 auto 18px;
  max-width:720px;
  font-size:1.02rem;
  line-height:1.75;
}
.nos > p strong{color:#fff;font-weight:700}

/* Las cifras · cada una con su acento y respuesta al cursor */
.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:720px;margin:28px auto;
}
.cifras div{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  padding:22px 16px;color:#fff;text-align:center;
  transition:transform .28s cubic-bezier(.34,1.3,.5,1),
             background .28s, border-color .28s;
}
/* Un resplandor que nace del borde de arriba */
.cifras div::before{
  content:'';position:absolute;inset:-1px -1px auto;
  height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;
  transition:transform .4s cubic-bezier(.22,.7,.3,1);
}
.cifras div:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.1);
  border-color:rgba(255,180,0,.42);
}
.cifras div:hover::before{transform:scaleX(1)}
.cifras b{
  display:block;font-size:2rem;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--gold);
}
.cifras span{
  display:block;font-size:.72rem;line-height:1.4;
  color:rgba(255,255,255,.6);margin-top:8px;
}

/* Las redes · dos piezas del mismo tamaño, no dos barras largas */
.redes{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  max-width:720px;margin:0 auto;
}
.redes a{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;border-radius:18px;padding:22px;
  color:#fff;text-decoration:none;
  transition:transform .28s cubic-bezier(.34,1.3,.5,1), box-shadow .28s;
}
.redes a:hover{
  text-decoration:none;
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}
.redes .marco{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.18);
  transition:transform .35s cubic-bezier(.34,1.4,.5,1);
}
.redes a:hover .marco{transform:scale(1.08) rotate(-5deg)}
.redes svg{width:22px;height:22px}
.redes .et{display:block}
.redes .et b{
  display:block;font-size:1rem;font-weight:700;line-height:1.3;
}
.redes .et span{
  display:block;font-size:.8rem;line-height:1.5;
  color:rgba(255,255,255,.78);margin-top:3px;
}
.redes .ig{background:linear-gradient(135deg,#F6A21A,#EF5445 52%,#B455C9)}
.redes .wa{background:linear-gradient(135deg,#25D366,#128C7E)}

/* Otras categorías */
.otras-t{
  max-width:720px;margin:34px auto 12px !important;
  font-size:.64rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.otras{
  display:flex;flex-wrap:wrap;gap:9px;
  max-width:720px;margin:0 auto;
}
.otras a{
  font-size:.86rem;font-weight:600;color:#fff;
  background:color-mix(in srgb, var(--c) 26%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 50%, transparent);
  border-radius:12px;padding:11px 16px;text-decoration:none;
  transition:background .22s, transform .22s;
}
.otras a:hover{
  background:color-mix(in srgb, var(--c) 52%, transparent);
  transform:translateY(-2px);text-decoration:none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .otras a{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
}

@media(max-width:560px){
  .cifras{grid-template-columns:1fr 1fr}
  .cifras div:last-child{grid-column:1 / -1}
  .redes{grid-template-columns:1fr}
  .redes a{flex-direction:row;align-items:center;padding:18px 20px}
}

.cierre-guia{
  font-size:.9rem;color:var(--suave);
  margin-top:34px;padding-top:22px;
  border-top:1px solid var(--linea);
}

@media(max-width:480px){
  .cifras{grid-template-columns:1fr 1fr}
  .cifras div:last-child{grid-column:1 / -1}
}

/* ── El cierre, que lleva al registro ── */
.cierre{
  max-width:720px;
  margin:34px auto 40px;
  background:linear-gradient(140deg,#123058,#0A1D3D);
  border-radius:20px;
  padding:30px max(6vw,24px);
  color:#fff;
  text-align:center;
}
.cierre .k{
  font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:9px;
}
.cierre h2{
  font-size:clamp(1.3rem,4vw,1.7rem);
  font-weight:600;line-height:1.28;
  margin-bottom:12px;
}
.cierre p{
  font-size:.92rem;line-height:1.7;
  color:rgba(255,255,255,.76);
  max-width:38ch;margin:0 auto;
}
.cierre .btn{
  display:inline-block;
  margin-top:22px;
  background:var(--gold);color:var(--navy);
  font-size:.88rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  border-radius:13px;
  padding:15px 30px;
}
.cierre .btn{transition:transform .22s cubic-bezier(.34,1.3,.5,1), box-shadow .22s}
.cierre .btn:hover{
  background:#F0A800;text-decoration:none;
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(255,180,0,.32);
}

/* ── Preguntas frecuentes ──
   Desplegables: se leen rápido en el teléfono y Google igual
   lee todo el texto, abierto o cerrado. */
.faq{display:grid;gap:10px;margin:6px 0 30px}
.faq details{
  background:var(--papel);border:1px solid var(--linea);
  border-radius:16px;transition:border-color .2s, box-shadow .2s;
}
.faq details[open]{border-color:#BDE9E4;box-shadow:0 10px 26px rgba(10,29,61,.06)}
.faq summary{
  position:relative;list-style:none;cursor:pointer;
  padding:16px 52px 16px 20px;
  font-size:1rem;font-weight:700;line-height:1.45;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:16px;top:50%;
  width:26px;height:26px;margin-top:-13px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,180,166,.12);color:var(--teal);
  font-size:1.15rem;font-weight:700;line-height:1;
  transition:transform .25s, background .25s, color .25s;
}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--teal);color:#fff}
.faq summary:hover{color:var(--teal)}
.faq details p{margin:0;padding:0 20px 18px;font-size:.96rem;line-height:1.7}

/* ── Ofertas de la categoría, al final de cada guía ──
   Antes del lanzamiento muestra el aviso; cuando haya ofertas
   publicadas, el script las pinta aquí con las del día. */
.ofertas-guia{
  margin:36px 0 10px;padding:28px 28px 26px;
  border-radius:20px;background:var(--papel);
  border:1px solid var(--linea);
  box-shadow:0 18px 44px rgba(10,29,61,.07);
}
.ofertas-guia .k{
  font-size:.64rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px;
}
.ofertas-guia h2{
  font-size:clamp(1.25rem,3.6vw,1.55rem);font-weight:700;
  line-height:1.3;color:var(--navy);margin-bottom:14px;
}
.og-pronto p{font-size:.95rem;line-height:1.7;margin-bottom:18px}
.og-pronto strong{color:var(--navy)}
.og-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.og-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--navy);
  font-size:.92rem;font-weight:700;
  border-radius:13px;padding:14px 22px;
  transition:transform .22s cubic-bezier(.34,1.3,.5,1), box-shadow .22s, background .22s;
}
.og-btn span{transition:transform .22s}
.og-btn:hover{
  text-decoration:none;background:#F0A800;
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,180,0,.32);
}
.og-btn:hover span{transform:translateX(4px)}
.og-sec{font-size:.88rem;font-weight:700;color:var(--teal)}
.og-lista{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 22px}
.og-lista[hidden]{display:none}
.og-card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--linea);border-radius:16px;background:var(--crema);
  color:var(--texto);transition:transform .22s, box-shadow .22s;
}
.og-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,29,61,.12)}
.og-foto{position:relative;aspect-ratio:16/10;background:var(--linea)}
.og-foto img{width:100%;height:100%;object-fit:cover}
.og-desc{
  position:absolute;right:10px;top:10px;padding:4px 10px;border-radius:999px;
  background:var(--coral);color:#fff;font-size:.78rem;font-weight:800;
}
.og-info{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.og-info small{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.og-info b{font-size:.95rem;line-height:1.35;color:var(--navy)}
.og-precio{margin-top:4px;font-size:.85rem}
.og-precio s{color:var(--suave);margin-right:6px}
.og-precio strong{font-size:1.15rem;color:var(--navy)}
@media(max-width:560px){.og-lista{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════
   DISEÑO DE REVISTA · héroe a todo lo ancho, índice,
   fotos grandes, compartir y guías relacionadas.
   Todo con clases propias: no toca las páginas de categoría.
   ═══════════════════════════════════════════════════════ */
.heroe-guia{
  position:relative;overflow:hidden;
  min-height:clamp(440px,74vh,700px);
  display:flex;align-items:flex-end;
  background:var(--navy);color:#fff;
}
.hg-foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:hgZoom 18s ease-out both;
}
.hg-foto[data-falta]{background:linear-gradient(135deg,var(--navy),#123058)}
@keyframes hgZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.heroe-guia::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,18,40,.92) 0%,rgba(6,18,40,.55) 42%,rgba(6,18,40,.12) 75%,rgba(6,18,40,.3) 100%);
}
.hg-texto{
  position:relative;z-index:1;width:100%;max-width:calc(720px + 2 * max(5vw,20px));
  margin:0 auto;padding:40px max(5vw,20px) clamp(34px,6vh,58px);
}
.hg-texto>*{animation:hgSube .8s cubic-bezier(.2,.7,.2,1) both}
.hg-texto>:nth-child(2){animation-delay:.12s}
.hg-texto>:nth-child(3){animation-delay:.24s}
.hg-texto>:nth-child(4){animation-delay:.38s}
@keyframes hgSube{from{opacity:0;transform:translateY(22px)}}
.hg-volver{
  display:inline-block;margin-bottom:22px;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);
}
.hg-volver:hover{color:#fff}
.hg-cat{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hg-cat span{
  padding:6px 12px;border-radius:999px;background:var(--gold);color:var(--navy);
  letter-spacing:.1em;
}
.heroe-guia h1{
  font-size:clamp(2rem,5.6vw,3.5rem);font-weight:700;line-height:1.1;
  letter-spacing:-.025em;margin-bottom:18px;text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.heroe-guia h1 .mano{font-family:'Caveat Brush',cursive;font-style:normal;font-weight:400;color:var(--gold);font-size:1.12em}
.hg-meta{display:flex;flex-wrap:wrap;gap:6px 0;font-size:.86rem;color:rgba(255,255,255,.78)}
.hg-meta span+span::before{content:'·';margin:0 10px;color:var(--gold)}
.hg-intro p{max-width:60ch;font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.86);margin-bottom:10px}

/* Índice "En esta guía" */
.indice{
  margin:6px 0 34px;padding:20px 22px;
  background:var(--papel);border:1px solid var(--linea);border-radius:18px;
}
.indice p{
  font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:10px;
}
.indice ol{list-style:none;counter-reset:ix;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.indice li{counter-increment:ix}
.indice a{
  display:flex;gap:10px;padding:6px 0;
  font-size:.92rem;font-weight:600;line-height:1.4;color:var(--navy);
}
.indice a::before{
  content:counter(ix,decimal-leading-zero);flex:none;
  font-size:.72rem;font-weight:800;color:var(--gold);padding-top:2px;
}
.indice a:hover{color:var(--teal);text-decoration:none}
.hoja-guia article h2{scroll-margin-top:84px}

/* Letra capital en el primer párrafo */
.hoja-guia article > p:first-child:not(.invita)::first-letter{
  float:left;font-size:3.6em;line-height:.82;font-weight:700;
  color:var(--teal);margin:.08em .1em 0 0;
}

/* Fotos más grandes que el texto, con pie */
.hoja-guia article figure{
  width:min(880px,calc(100vw - 40px));
  margin:38px 0 38px calc(50% - min(440px,50vw - 20px));
}
.hoja-guia article figure img{border-radius:20px;box-shadow:0 22px 50px rgba(10,29,61,.14)}
.hoja-guia article figcaption{
  max-width:720px;margin:12px auto 0;padding:0 max(5vw,20px);
  font-size:.82rem;font-style:italic;text-align:center;color:var(--suave);
}

/* "Ideal para" · el dato rápido, al estilo de las guías de viaje */
.ideal{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:-4px 0 24px !important;padding:12px 16px;
  background:#FFF8E6;border:1px solid #F3DEA6;border-radius:14px;
  font-size:.93rem;font-weight:600;line-height:1.5;color:var(--navy);
}
.ideal b{
  padding:4px 10px;border-radius:999px;background:var(--gold);
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
}

/* Compartir */
.compartir{
  margin:34px 0 0;padding:22px;text-align:center;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.compartir p{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:14px}
.cp-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cp{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:700;color:#fff;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.cp svg{width:18px;height:18px}
.cp:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,29,61,.18)}
.cp.wa{background:#25D366}
.cp.fb{background:#1877F2}
.cp.x{background:#111}
.cp.ig{background:linear-gradient(45deg,#F6A21A,#EF5445 50%,#B455C9)}
.cp-aviso{margin:12px 0 0;font-size:.86rem;font-weight:600;color:var(--teal)}
.cp-aviso[hidden]{display:none}
.cp.copiar{background:var(--navy)}
.cp.copiar.hecho{background:var(--teal)}

/* Te puede interesar */
.relacionadas{
  width:min(880px,calc(100vw - 40px));
  margin:46px 0 20px calc(50% - min(440px,50vw - 20px));
}
.relacionadas h2{
  font-size:clamp(1.3rem,3.6vw,1.7rem);font-weight:700;color:var(--navy);
  margin-bottom:18px;
}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{display:flex;flex-direction:column;color:var(--navy)}
.rel:hover{text-decoration:none}
.rel-f{display:block;overflow:hidden;border-radius:16px;aspect-ratio:16/10;background:var(--linea);margin-bottom:12px}
.rel-f img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rel:hover .rel-f img{transform:scale(1.07)}
.rel-c{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.rel b{font-size:1.05rem;font-weight:700;line-height:1.3;transition:color .2s}
.rel:hover b{color:var(--teal)}

/* Índice de guías: tarjetas tipo revista */
.tarjetas.revista{
  width:min(1120px,calc(100vw - 40px));
  margin:30px 0 10px calc(50% - min(560px,50vw - 20px));
  grid-template-columns:repeat(4,1fr);gap:18px;
}
.revista .tj{
  position:relative;flex-direction:column;align-items:stretch;gap:0;
  padding:0;overflow:hidden;border-radius:20px;
}
.revista .tj:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(10,29,61,.14)}
.revista .tj-f{width:100%;height:auto;aspect-ratio:4/3;border-radius:0}
.revista .tj-t{padding:18px 20px 22px}
.revista .tj-t b{font-size:1.12rem;margin-bottom:2px}
.revista .tj-go{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);font-size:1rem}
.revista .tj:first-child{grid-column:1 / -1;flex-direction:row}
.revista .tj:first-child .tj-f{width:58%;aspect-ratio:16/9}
.revista .tj:first-child .tj-t{display:flex;flex-direction:column;justify-content:center;padding:28px 32px}
.revista .tj:first-child .tj-t b{font-size:1.6rem}
.revista .tj:first-child .tj-n::after{content:'  ·  Empieza aquí';color:var(--coral)}

@media(max-width:1100px){.tarjetas.revista{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .tarjetas.revista{grid-template-columns:1fr 1fr}
  .rel-grid{grid-template-columns:1fr 1fr}
  .rel-grid .rel:last-child{display:none}
}
@media(max-width:560px){
  .heroe-guia{min-height:clamp(420px,78vh,620px)}
  .hg-meta span:last-child{display:none}
  .indice{padding:16px 0 14px;margin-left:calc(-1 * max(5vw,20px));margin-right:calc(-1 * max(5vw,20px));border-radius:0;border-left:0;border-right:0}
  .indice p{padding:0 max(5vw,20px)}
  .indice ol{display:flex;gap:8px;overflow-x:auto;padding:2px max(5vw,20px) 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .indice ol::-webkit-scrollbar{display:none}
  .indice li{flex:none;scroll-snap-align:start}
  .indice a{padding:8px 14px;border:1px solid var(--linea);border-radius:999px;background:var(--crema);white-space:nowrap;font-size:.86rem}
  .tarjetas.revista{grid-template-columns:1fr}
  .revista .tj:first-child{flex-direction:column}
  .revista .tj:first-child .tj-f{width:100%}
  .revista .tj:first-child .tj-t{padding:18px 20px 22px}
  .revista .tj:first-child .tj-t b{font-size:1.3rem}
  .rel-grid{grid-template-columns:1fr}
  .rel-grid .rel:last-child{display:flex}
  .cp span{display:none}
  .cp{padding:12px 14px}
}
@media(prefers-reduced-motion: reduce){
  .hg-foto,.hg-texto>*{animation:none}
}

/* ── Pie ── */
.pie{
  max-width:720px;
  margin:0 auto;
  padding:0 max(5vw,20px) 44px;
  text-align:center;
  font-size:.8rem;
  line-height:1.7;
  color:var(--suave);
}
.pie p{margin-bottom:6px}
.pie strong{color:var(--navy);font-weight:700}
.pie a{color:var(--suave)}
.pie a:hover{color:var(--teal)}
.pie span{display:block;margin-top:10px;font-size:.75rem;opacity:.75}

/* ── Pantallas chicas ── */
@media(max-width:480px){
  body{font-size:16.5px}
  .marca img{height:26px}
  .top nav a{font-size:.8rem;padding:7px 10px}
  .hoja{padding-top:22px}
  .portada img,article figure img{border-radius:14px}
  .cierre{border-radius:16px;margin-left:max(5vw,20px);margin-right:max(5vw,20px)}
}

/* ═══════════════════════════════════════════════════════
   APARICIÓN AL DESPLAZAR

   La regla de oro: sin el script, todo se ve. Solo cuando el
   script confirma que puede animar (clase «animado» en el html)
   se ocultan las piezas para hacerlas aparecer. Así un fallo
   nunca deja la página en blanco.
   ═══════════════════════════════════════════════════════ */
.animado .surge{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.7,.3,1),
             transform .62s cubic-bezier(.22,.7,.3,1);
  will-change:opacity, transform;
}
.animado .surge.visible{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Las tarjetas entran con un poco más de carácter */
.animado .tj.surge{transform:translateY(26px) scale(.985)}
.animado .tj.surge.visible{transform:none}

/* La portada se asienta en vez de subir */
.animado .portada.surge{transform:scale(1.03);opacity:0}
.animado .portada.surge.visible{transform:none;opacity:1}

/* Las cifras y los pasos llegan desde el lado */
.animado .cifras div.surge,
.animado .pasos-g article.surge{transform:translateY(20px)}

/* Los enlaces de otras categorías, más sutiles */
.animado .otras a.surge{transform:translateY(10px)}

/* La línea turquesa de los subtítulos se dibuja sola */
.animado article h2.surge::before{
  width:0;
  transition:width .5s cubic-bezier(.22,.7,.3,1) .12s;
}
.animado article h2.surge.visible::before{width:34px}

/* La cabecera gana sombra al despegarse */
.top{transition:box-shadow .28s, padding .28s}
.top.pegada{box-shadow:0 6px 24px rgba(10,29,61,.22)}

/* Si alguien pidió menos movimiento, nada se anima */
@media(prefers-reduced-motion: reduce){
  .animado .surge,
  .animado .surge.visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .animado article h2.surge::before{width:34px;transition:none}
}

/* ── Al imprimir ── */
@media print{
  .top,.cierre,.volver{display:none}
  body{background:#fff;font-size:12pt}
}

/* ═══════════════════════════════════════════════════════
   FOTOS QUE SE SIENTEN · 29 sep 2026
   · Máscara: toda foto se encuadra sola en 16:9, sin recortar
     el archivo. Si lo importante queda fuera, se mueve el
     encuadre con style="--foco: 50% 30%" en la etiqueta <img>.
   · Al pasar el cursor: zoom lento dentro del marco, luz más
     cálida y el botón "Ver en grande".
   · Al tocarla o hacer clic: se abre a pantalla completa.
   · Al aparecer: la foto se descubre de abajo hacia arriba.
   ═══════════════════════════════════════════════════════ */
.hg-foto,article figure img,.rel-f img,.tj-f img{object-position:var(--foco,50% 50%)}

.marco-foto{
  position:relative;display:block;overflow:hidden;
  border-radius:20px;box-shadow:0 22px 50px rgba(10,29,61,.14);
  cursor:zoom-in;isolation:isolate;
  background:var(--linea);
}
.hoja-guia article .marco-foto img{
  display:block;border-radius:0;box-shadow:none;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.marco-foto::after{   /* velo de luz dorada que entra desde abajo */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(246,162,26,.28),rgba(246,162,26,0) 55%);
  opacity:0;transition:opacity .6s ease;
}
.mf-ver{
  position:absolute;right:14px;bottom:14px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--navy);
  font:700 .78rem/1 'Quicksand',system-ui,sans-serif;
  box-shadow:0 6px 18px rgba(10,29,61,.18);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1);
}
.mf-ver svg{width:14px;height:14px}
.marco-foto:hover img,.marco-foto:focus-visible img{transform:scale(1.06);filter:saturate(1.12) contrast(1.03)}
.marco-foto:hover::after,.marco-foto:focus-visible::after{opacity:1}
.marco-foto:hover .mf-ver,.marco-foto:focus-visible .mf-ver{opacity:1;transform:none}
.marco-foto:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.hoja-guia article figure:hover figcaption{color:var(--navy)}
.hoja-guia article figcaption{transition:color .4s ease}
/* En pantallas táctiles no hay cursor: el botón se ve siempre, discreto */
@media(hover:none){.mf-ver{opacity:.92;transform:none;padding:7px 11px}}

/* La foto se descubre al llegar a ella */
.animado article > figure.surge .marco-foto{clip-path:inset(100% 0 0 0 round 20px);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.animado article > figure.surge.visible .marco-foto{clip-path:inset(0 0 0 0 round 20px)}

/* Crédito de foto (licencias que piden atribución) */
.hg-credito{
  position:absolute;right:14px;bottom:10px;z-index:2;
  font-size:.68rem;color:rgba(255,255,255,.72);
}
.hg-credito a{color:inherit;text-decoration:underline}
.credito{display:block;margin-top:4px;font-size:.72rem;font-style:normal;color:var(--suave)}
.credito a{color:inherit}

/* Pantalla completa */
.visor{
  border:none;padding:0;margin:auto;max-width:100vw;max-height:100vh;
  width:100vw;height:100vh;background:transparent;overflow:hidden;
}
.visor::backdrop{background:rgba(6,18,40,.92);backdrop-filter:blur(6px)}
.visor[open]{display:grid;place-items:center}
.visor figure{margin:0;padding:clamp(14px,4vw,40px);max-width:1400px;text-align:center}
.visor img{
  max-width:100%;max-height:82vh;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);object-fit:contain;
  animation:visorEntra .45s cubic-bezier(.2,.7,.2,1) both;
}
.visor figcaption{margin-top:14px;color:rgba(255,255,255,.86);font-size:.92rem}
.visor-cerrar{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;
  width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
}
.visor-cerrar:hover{background:rgba(255,255,255,.26)}
@keyframes visorEntra{from{opacity:0;transform:scale(.96)}}

/* El héroe se mueve un poco más lento que la página al bajar */
.heroe-guia .hg-foto{will-change:transform}

@media(prefers-reduced-motion: reduce){
  .hoja-guia article .marco-foto img,.marco-foto::after,.mf-ver{transition:none}
  .marco-foto:hover img{transform:none}
  .animado article > figure.surge .marco-foto{clip-path:none}
  .visor img{animation:none}
}

/* Aviso de idioma · discreto, nunca redirige solo */
.aviso-idioma{margin:0 0 22px;text-align:center}
.aviso-idioma a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:var(--papel);border:1px solid var(--linea);
  font-size:.84rem;font-weight:600;color:var(--navy);
  transition:border-color .25s,color .25s,transform .25s;
}
.aviso-idioma a:hover{border-color:var(--teal);color:var(--teal);text-decoration:none;transform:translateY(-1px)}
.rel-d{display:block;margin-top:6px;font-size:.9rem;line-height:1.5;color:var(--suave)}
.rel-grid-2{grid-template-columns:1fr 1fr}
@media(max-width:860px){.rel-grid-2{grid-template-columns:1fr}}

/* Selector de idioma en la barra azul · ES | EN */
.top .idioma{
  display:inline-flex;align-items:center;padding:3px;margin-right:4px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
}
.top nav .idioma a{
  padding:5px 10px;border-radius:999px;
  font-size:.74rem;font-weight:800;letter-spacing:.08em;
  color:rgba(255,255,255,.7);
}
.top nav .idioma a:hover{color:#fff;background:rgba(255,255,255,.12)}
.top nav .idioma a[aria-current]{background:#fff;color:var(--navy);pointer-events:none}
@media(max-width:480px){
  .top nav .idioma a{padding:4px 8px;font-size:.7rem}
  .top .idioma{margin-right:0}
}
@media(max-width:360px){.top nav > a:not(.cta){display:none}}

/* Tablas de comparación (guías Margarita vs. otras islas) — oct 2026 */
.comparar{margin:8px 0 30px;border:1px solid var(--linea);border-radius:18px;overflow:hidden;background:var(--papel);box-shadow:0 10px 26px rgba(10,29,61,.05)}
.comparar table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.comparar th,.comparar td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--linea)}
.comparar thead th{border-top:none;background:var(--navy);color:#fff;font-weight:700;font-size:.9rem}
.comparar thead th:nth-child(2){background:var(--teal)}
.comparar tbody th{color:var(--navy);font-weight:700;width:24%;background:#FBF7F2}
.comparar tbody td:nth-child(2){background:#F2FBFA}
@media(max-width:560px){
  .comparar table{font-size:.84rem}
  .comparar th,.comparar td{padding:10px 9px}
  .comparar tbody th{width:26%}
}
/* El índice en inglés muestra todas sus tarjetas en cualquier pantalla */
.rel-grid-2 .rel:last-child{display:flex}