/* ──────────────────────────────────────────────────────────────
   Páginas de cada guía  ·  /guias/<provincia>
   Se monta encima de style.css: usa sus variables, sus fuentes y
   sus botones. Acá solo vive lo que no existe en la home.
   ────────────────────────────────────────────────────────────── */

.gp{background:var(--cream);overflow-x:hidden}
.gp-wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* volver — una sola línea, sin el nav completo de la home */
.gp-volver{position:sticky;top:0;z-index:50;background:rgba(248,243,230,.94);
           backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-dark)}
.gp-volver a{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;
             font-family:var(--font-label);font-size:11px;letter-spacing:.14em;
             text-transform:uppercase;color:var(--warm-mid);text-decoration:none}
.gp-volver a:hover{color:var(--warm-dark)}
.gp-volver img{height:26px;width:auto}

/* ── hero ─────────────────────────────────────────────── */
.gp-hero{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
         gap:60px;align-items:center;padding-block:60px 72px}
/* La portada es vertical y si se la deja crecer a gusto empuja la columna de
   texto a flotar en el medio de un hueco. Se le pone techo y se centra. */
.gp-hero-tapa{position:relative;max-width:420px;margin:0 auto;width:100%}
.gp-hero-tapa img{width:100%;max-height:540px;object-fit:cover;
                  border-radius:var(--radius);display:block;
                  box-shadow:0 18px 50px rgba(44,32,16,.22)}
/* La tapa de Catamarca tiene el título arriba y el sello se lo comía:
   con `abajo` el mismo sello se va al pie de la portada. */
.gp-hero-tapa .gp-sello.abajo{top:auto;bottom:16px}
.gp-hero-tapa .gp-sello{position:absolute;top:16px;left:16px;
         background:var(--warm-dark);color:var(--cream);font-family:var(--font-label);
         font-size:10px;letter-spacing:.16em;text-transform:uppercase;
         padding:7px 14px;border-radius:4px}
.gp-eyebrow{font-family:var(--font-label);font-size:11px;letter-spacing:.22em;
            text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.gp-titulo{font-family:var(--font-title);font-size:clamp(34px,5vw,52px);
           line-height:1.1;color:var(--warm-dark);margin:0 0 18px}
.gp-lead{font-size:16.5px;line-height:1.75;color:var(--warm-mid);margin:0 0 28px}

.gp-precio{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.gp-precio .ahora{font-family:var(--font-title);font-size:38px;color:var(--warm-dark)}
.gp-precio .antes{font-size:17px;color:var(--warm-light);text-decoration:line-through}
.gp-precio .off{background:var(--terra);color:var(--cream);font-family:var(--font-label);
                font-size:10px;letter-spacing:.1em;padding:4px 9px;border-radius:3px}
.gp-nota{font-size:13px;color:var(--warm-light);margin:0 0 22px}
.gp-acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ── bloques ──────────────────────────────────────────── */
.gp-bloque{padding:68px 0;border-top:1px solid var(--cream-dark)}
.gp-bloque.oscuro{background:var(--warm-dark)}
.gp-bloque.oscuro .gp-h2,.gp-bloque.oscuro .gp-sub{color:var(--cream)}
.gp-bloque.oscuro .gp-sub{opacity:.72}
.gp-h2{font-family:var(--font-title);font-size:clamp(26px,3.4vw,36px);
       color:var(--warm-dark);text-align:center;margin:0 0 12px}
.gp-sub{text-align:center;color:var(--warm-mid);max-width:620px;margin:0 auto 44px;
        line-height:1.75}

/* qué trae */
.gp-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
          max-width:1000px;margin:0 auto}
.gp-item{background:var(--white);border:1px solid var(--cream-dark);
         border-radius:var(--radius);padding:26px 24px}
.gp-item h3{font-family:var(--font-label);font-size:13px;letter-spacing:.1em;
            text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.gp-item p{margin:0;font-size:14.5px;line-height:1.7;color:var(--warm-mid)}

/* ── el celular con las capturas ───────────────────────── */
/* Carrusel con leyenda al lado: el celular a la izquierda del centro y, a su
   derecha, un texto que cambia con la página que se está mirando. Mostrar seis
   celulares sueltos llenaba el ancho pero no explicaba nada. */
.gp-muestra{display:grid;grid-template-columns:minmax(0,464px) minmax(0,1fr);
            gap:64px;align-items:center;max-width:1040px;margin:0 auto}
.gp-muestra > div{min-width:0}
.gp-fonos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
          scrollbar-width:none}
.gp-fonos::-webkit-scrollbar{display:none}
/* El padding no es decorativo: el marco medía exactamente lo que la
   diapositiva, y como el carrusel scrollea en horizontal recorta todo lo
   que se sale. La sombra quedaba cortada al ras de los bordes y lo único
   que sobrevivía eran las cuñas de las esquinas, que se leían como un
   recuadro cuadrado asomando del celular. Con este margen la sombra entra
   entera y se desvanece como corresponde. */
.gp-fono{margin:0;flex:0 0 100%;scroll-snap-align:center;
         padding:16px 32px 34px}

/* Las leyendas se apilan en la misma celda: así el alto no salta al cambiar
   de página y la transición es un fundido, no un empujón. */
.gp-leyendas{display:grid}
.gp-leyenda{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
            transition:opacity .35s ease,transform .35s ease}
.gp-leyenda.on{opacity:1;visibility:visible;transform:none}
.gp-leyenda .num{font-family:var(--font-label);font-size:11px;letter-spacing:.2em;
                 text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.gp-leyenda h3{font-family:var(--font-title);font-size:27px;line-height:1.25;
               color:var(--warm-dark);margin:0 0 14px}
.gp-leyenda p{margin:0;font-size:15.5px;line-height:1.8;color:var(--warm-mid)}

.gp-flechas{display:flex;gap:10px;margin-top:28px}
.gp-flechas button{width:42px;height:42px;border-radius:50%;cursor:pointer;
                   border:1px solid var(--cream-dark);background:var(--white);
                   color:var(--warm-dark);font-size:17px;line-height:1;
                   transition:border-color .2s,background .2s}
.gp-flechas button:hover{border-color:var(--gold);background:var(--cream)}
/* El bisel es padding, no border, y la foto se redondea sola.
   Con `border` + `border-radius` + `overflow:hidden` el navegador tiene que
   recortar a la imagen contra el radio interior del borde, y ese recorte no
   se aplica igual en todos lados: en Safari, dentro de un contenedor que
   scrollea como este carrusel, directamente no recorta y las puntas
   cuadradas de la foto se veían saliendo del celular. Así no hay recorte
   que valga: el marco es el fondo que asoma por el padding y la imagen
   lleva su propio radio. */
/* La sombra va con `filter`, no con `box-shadow`.
   Un box-shadow se pinta en todo el rectángulo del elemento menos su
   silueta redondeada, así que llena las cuatro cuñas de las esquinas.
   Eso normalmente no se ve porque se funde con la sombra de afuera — pero
   este carrusel scrollea en horizontal y recorta todo lo que sale de la
   diapositiva: se comía la sombra de alrededor y dejaba solo las cuñas,
   que se leían como un recuadro cuadrado asomando del celular.
   drop-shadow sigue la silueta real y no pinta nada en las esquinas. */
.gp-fono-marco{padding:11px;border-radius:36px;
               background:#1b1b1b;
               filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));
               position:relative}
.gp-fono-marco::before{content:"";position:absolute;top:11px;left:50%;
               transform:translateX(-50%);width:98px;height:17px;background:#1b1b1b;
               border-radius:0 0 12px 12px;z-index:3}
/* 25px = los 36 del marco menos los 11 del bisel */
.gp-fono-marco img{width:100%;display:block;background:var(--cream);
                   border-radius:25px}
.gp-puntos{display:flex;justify-content:center;gap:8px;margin-top:22px}
.gp-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
                  background:var(--warm-light);opacity:.4;cursor:pointer}
.gp-puntos button.on{opacity:1;background:var(--gold);transform:scale(1.25)}
.gp-fono-pie{display:none;text-align:center;font-family:var(--font-label);
             font-size:11px;letter-spacing:.12em;text-transform:uppercase;
             color:var(--warm-light);margin-top:16px}

/* ── el mapa ──────────────────────────────────────────── */
.gp-mapa{display:grid;grid-template-columns:0.85fr 1fr;gap:52px;align-items:center}
.gp-mapa img{width:100%;border-radius:var(--radius);display:block;
             box-shadow:0 16px 44px rgba(44,32,16,.2)}
.gp-mapa ul{list-style:none;padding:0;margin:0}
.gp-mapa li{padding:11px 0 11px 28px;position:relative;line-height:1.65;
            color:var(--warm-mid);border-bottom:1px solid rgba(255,255,255,.1)}
.gp-mapa li::before{content:"✦";position:absolute;left:0;top:11px;color:var(--gold)}
.gp-bloque.oscuro .gp-mapa li{color:rgba(248,243,230,.8)}

/* ── cierre ───────────────────────────────────────────── */
.gp-cierre{text-align:center}
.gp-cierre .gp-precio{justify-content:center}
.gp-cierre .gp-acciones{justify-content:center}

/* ── preguntas ────────────────────────────────────────── */
.gp-faq{max-width:760px;margin:0 auto}
.gp-faq details{border-bottom:1px solid var(--cream-dark);padding:4px 0}
.gp-faq summary{cursor:pointer;padding:17px 0;font-family:var(--font-label);
                font-size:15px;color:var(--warm-dark);list-style:none;
                display:flex;justify-content:space-between;gap:16px;align-items:center}
.gp-faq summary::-webkit-details-marker{display:none}
.gp-faq summary::after{content:"+";font-size:20px;color:var(--gold);flex:0 0 auto}
.gp-faq details[open] summary::after{content:"−"}
.gp-faq p{margin:0 0 20px;color:var(--warm-mid);line-height:1.75;font-size:14.5px}

.gp-pie{text-align:center;padding:44px 24px;border-top:1px solid var(--cream-dark);
        color:var(--warm-light);font-size:13px}
.gp-pie a{color:var(--warm-mid)}

@media (max-width:980px){
  .gp-items{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
  .gp-muestra{grid-template-columns:minmax(0,394px) minmax(0,1fr);gap:40px}
}

@media (max-width:820px){
  .gp-hero,.gp-mapa{grid-template-columns:1fr;gap:30px}
  .gp-hero{padding-block:30px 46px}
  .gp-bloque{padding:52px 0}
  .gp-items{grid-template-columns:1fr}
  /* El título primero: media pantalla de portada antes de saber de qué guía
     se trata es demasiado scroll. */
  .gp-hero-tapa{order:2;max-width:300px}
  .gp-hero-tapa img{max-height:380px}
  .gp-hero > div:last-child{order:1}

  /* El celular arriba y la leyenda debajo */
  /* minmax(0,1fr) y no 1fr: con `1fr` el mínimo de la columna es el
     min-content de lo que tiene adentro, así que el celular empujaba la
     columna a 430 px dentro de un bloque de 394 y la sección se veía más
     ancha que el resto de la página, y corrida. */
  .gp-muestra{grid-template-columns:minmax(0,1fr);gap:30px;max-width:394px}
  /* En el celular cada píxel de ancho cuenta: sombra más corta y, por lo
     tanto, menos aire para que no la corte el carrusel. */
  .gp-fono{padding:6px 13px 16px}
  .gp-fono-marco{filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
  .gp-leyenda{text-align:center}
  .gp-leyenda h3{font-size:23px}
  .gp-flechas{display:none}          /* en el celular se desliza con el dedo */
  .gp-fono-pie{display:block}
}