/* =============================================================================
   page-fr-things-to-do.css
   Maquetación de las guías /fr/things-to-do/ (Acapulco, Guadalajara, Monterrey,
   Puerto Vallarta, San Miguel de Allende).

   Se carga DESPUÉS de page-routes.min.css, la hoja que esas páginas ya usan en
   el sitio. Todo va acotado a `.guia-fr-main`, el contenedor del cuerpo de la
   guía: fuera de ese contenedor no se cambia nada, así que la cabecera, el pie
   y el widget de venta conservan los estilos del sitio.

   El diseño de tarjetas es el que ETN aprobó en la maqueta de referencia.
   ============================================================================= */

.guia-fr-main{
  box-sizing:border-box;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5;color:var(--fg);

  --bg:oklch(99% .005 220);
  --fg:oklch(24% .05 245);
  --primary:oklch(32% .075 245);
  --primary-fg:oklch(99% .005 220);
  --secondary:oklch(95% .02 210);
  --accent:oklch(72% .115 195);
  --muted:oklch(96% .012 220);
  --muted-fg:oklch(52% .03 235);
  --border:oklch(90% .015 225);
  --card:oklch(100% 0 0);
  --brand-green:oklch(68% .17 152);
  --page-alt:oklch(95.5% .008 220);
  --deep:oklch(24% .06 248);
  --gradient-deep:linear-gradient(135deg,oklch(26% .06 248) 0%,oklch(36% .08 235) 100%);
  --shadow-card:0 10px 30px -12px oklch(24% .06 248/.25);
  --shadow-lift:0 22px 45px -20px oklch(24% .06 248/.4);
  --radius:20px;
  --wrap:1152px;
}

.guia-fr-main img{max-width:100%;display:block}
.guia-fr-main a{color:inherit;text-decoration:none}
.guia-fr-main h1,.guia-fr-main h2,.guia-fr-main h3,.guia-fr-main h4{font-family:Outfit,system-ui,sans-serif;color:var(--primary);margin:0;font-weight:800;letter-spacing:-.02em}
.guia-fr-main .wrap{width:min(90%,var(--wrap));margin:0 auto;padding:0}

/* ------------------------------------------------------- banner superior */
.guia-fr-main .banner{margin:0;background:var(--deep);line-height:0}
.guia-fr-main .banner img{width:100%;max-width:1456px;margin:0 auto;height:auto}

/* ---------------------------------------------------------------- botones */
.guia-fr-main .btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;border-radius:999px;font-weight:700;font-size:1rem;
  border:1.5px solid transparent;transition:filter .18s ease,transform .18s ease,background .18s ease,color .18s ease}
.guia-fr-main .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.guia-fr-main .btn--primary{background:var(--accent);color:oklch(22% .05 245)}
.guia-fr-main .btn--green{background:var(--brand-green);color:#fff;padding-left:28px;padding-right:28px}
.guia-fr-main .btn--ghost{border-color:var(--border);background:var(--card);color:var(--primary)}
.guia-fr-main .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.guia-fr-main .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.guia-fr-main .btns--center{justify-content:center}

/* --------------------------------------------------------------- portada */
.guia-fr-main .hero{background:var(--card);padding:56px 0 40px}
.guia-fr-main .hero__in{max-width:768px;margin:0 auto;text-align:center}
.guia-fr-main .hero h1{font-size:clamp(2.1rem,5vw,3.75rem);line-height:1.05;margin:0 0 20px}
.guia-fr-main .hero p{margin:0 0 16px;color:var(--muted-fg);font-size:1.03rem;line-height:1.65}
.guia-fr-main .hero p:last-of-type{margin-bottom:0}

/* ------------------------------------------------------------- secciones */
.guia-fr-main .sec{background:var(--card);padding:80px 0}
.guia-fr-main .sec--alt{background:var(--page-alt)}
.guia-fr-main .sec__head{max-width:768px;margin:0 auto;text-align:center}
.guia-fr-main .sec__head h2{font-size:clamp(1.75rem,3.4vw,2.25rem);line-height:1.12}
.guia-fr-main .sec__head p{margin:16px 0 0;color:var(--muted-fg);line-height:1.65}
.guia-fr-main .sec__body{margin-top:40px}
.guia-fr-main .prose p{margin:0 0 16px;color:var(--muted-fg);line-height:1.7}
.guia-fr-main .prose p:last-child{margin-bottom:0}

/* texto + imagen, proporciones alternas como en la referencia */
.guia-fr-main .split{display:grid;gap:32px;align-items:start;grid-template-columns:.85fr 1.15fr}
.guia-fr-main .split--rev{grid-template-columns:1.15fr .85fr}
.guia-fr-main .split img{width:100%;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow-lift)}
.guia-fr-main .split--rev img{order:2}

/* ---------------------------------------------------------------- fichas */
.guia-fr-main .grid{display:grid;gap:24px;grid-template-columns:repeat(2,1fr);margin-top:24px}
.guia-fr-main .grid--3{grid-template-columns:repeat(3,1fr)}
.guia-fr-main .grid--4{grid-template-columns:repeat(4,1fr)}
.guia-fr-main .card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease}
.guia-fr-main .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.guia-fr-main .ribbon{background:var(--primary);color:var(--primary-fg);
  font-family:Outfit,sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.016em;
  padding:8px 14px}
.guia-fr-main .card__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:20px}
.guia-fr-main .card__body p{margin:0;font-size:.875rem;line-height:1.65;color:var(--fg)}

/* ---------------------------------------------------------------- listas */
.guia-fr-main .chips{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.guia-fr-main .chips li{border:1px solid var(--border);background:var(--card);border-radius:14px;
  padding:16px;font-size:.875rem;line-height:1.6}
.guia-fr-main .dots{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.guia-fr-main .dots li{display:flex;gap:12px;background:var(--card);border-radius:14px;padding:16px;
  font-size:.875rem;line-height:1.6;box-shadow:var(--shadow-card)}
.guia-fr-main .dots li::before{content:"";flex:0 0 auto;margin-top:.5em;width:8px;height:8px;border-radius:50%;background:var(--brand-green)}
.guia-fr-main .sub{font-family:Outfit,sans-serif;font-weight:700;color:var(--primary);margin:32px 0 0;font-size:1rem}

/* ----------------------------------------------------------------- nota */
.guia-fr-main .nota{background:var(--card);border-left:4px solid var(--brand-green);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-card);margin-top:24px}
.guia-fr-main .nota p{margin:0;font-size:.875rem;line-height:1.65;color:var(--fg)}

/* ------------------------------------------------------------ banda CTA */
.guia-fr-main .sec--band{padding:40px 0}
.guia-fr-main .ctaband{background:var(--gradient-deep);border-radius:var(--radius);
  padding:40px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}

/* --------------------------------------------------------- sección oscura */
.guia-fr-main .sec--deep{background:var(--deep);color:var(--primary-fg)}
.guia-fr-main .sec--deep h2{color:var(--primary-fg)}
.guia-fr-main .sec--deep .sec__head p{color:oklch(85% .02 225)}
.guia-fr-main .seasons{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:40px}
.guia-fr-main .season{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
  border-radius:var(--radius);padding:24px}
.guia-fr-main .season p{margin:0 0 10px;font-size:.94rem;line-height:1.65;color:oklch(92% .015 225)}
.guia-fr-main .season p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- caja clara */
.guia-fr-main .box{background:var(--card);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lift)}
.guia-fr-main .box .btns{margin-top:24px;flex-direction:column}
.guia-fr-main .box .btn{width:100%}

/* --------------------------------------------------------------- móvil */
@media(max-width:1000px){
.guia-fr-main .grid--3,.guia-fr-main .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
.guia-fr-main .sec{padding:56px 0}
.guia-fr-main .split,.guia-fr-main .split--rev{grid-template-columns:1fr}
.guia-fr-main .split--rev img{order:0}
.guia-fr-main .grid,.guia-fr-main .grid--3,.guia-fr-main .grid--4,.guia-fr-main .chips,.guia-fr-main .dots,.guia-fr-main .seasons{grid-template-columns:1fr}
.guia-fr-main .ctaband{padding:28px 22px}
}

/* --------------------------- ajustes de medida de línea y de columnas ---- */
.guia-fr-main .sec__body > .prose{max-width:820px;margin-left:auto;margin-right:auto}
/* dentro de un bloque con imagen el contenido ocupa toda su columna */
.guia-fr-main .split .prose,.guia-fr-main .split .nota,.guia-fr-main .split .sub{max-width:none;margin-left:0;margin-right:0}

.guia-fr-main .split .chips,.guia-fr-main .split .dots{grid-template-columns:1fr}
/* la cinta se alinea aunque el título ocupe dos líneas */
.guia-fr-main .ribbon{display:flex;align-items:center;min-height:3.15em}

/* imagen a todo el ancho cuando la sección no lleva texto a su lado */
.guia-fr-main .figura{margin:0 0 32px}
.guia-fr-main .figura img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-lift)}

/* fichas: 4 columnas en escritorio, 2 en tableta, 1 en móvil (como la referencia) */
@media(max-width:1200px){.guia-fr-main .grid--4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:1000px){.guia-fr-main .grid--3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:820px){
.guia-fr-main .grid,.guia-fr-main .grid--3,.guia-fr-main .grid--4,.guia-fr-main .chips,.guia-fr-main .dots,.guia-fr-main .seasons{grid-template-columns:1fr}
.guia-fr-main .figura img{aspect-ratio:16/10}
}

/* junto a una imagen las fichas caben en dos columnas */
.guia-fr-main .split .grid,.guia-fr-main .split .grid--3,.guia-fr-main .split .grid--4{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.guia-fr-main .split .grid,.guia-fr-main .split .grid--3,.guia-fr-main .split .grid--4{grid-template-columns:1fr}}

/* varios CTA dentro de una misma banda */
.guia-fr-main .ctaband{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}