/* ==========================================================
   Casa de Playa San Bartolo · Los Pelícanos
   Estilos — pensado primero para móvil (mobile-first)

   ÍNDICE
   1. Variables (colores, tipografía, espacios)
   2. Base y reinicio
   3. Utilidades (contenedor, etiquetas, botones, pendiente)
   4. Encabezado
   5. Portada
   6. Secciones genéricas
   7. Galería y video
   8. Qué incluye
   9. Tarifas
   10. Cómo reservar
   11. Zona y mapa
   12. Pie de página y botón flotante
   13. Pantallas medianas (≥ 700px)
   14. Pantallas grandes (≥ 1000px)
   ========================================================== */


/* 1. VARIABLES ============================================= */
:root {
  --marino:        #14284b;
  --marino-oscuro: #0b1a33;
  --marino-claro:  #2c4a7c;
  --arena:         #f5efe4;
  --arena-oscura:  #e4d8c3;
  --blanco:        #ffffff;
  --texto:         #1c2333;
  --texto-suave:   #586174;
  --whatsapp:      #168a46;
  --whatsapp-hover:#11733a;
  --pendiente-fondo: #fff1b8;
  --pendiente-texto: #7a4b00;

  --fuente-titulos: "DM Serif Display", Georgia, "Times New Roman", serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radio: 14px;
  --sombra: 0 6px 24px rgba(11, 26, 51, .10);
  --alto-encabezado: 60px;
  --margen-lateral: 16px;
}


/* 2. BASE ================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-encabezado);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
}

img, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--fuente-titulos);
  font-weight: 400;
  line-height: 1.15;
  color: var(--marino);
}
h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }
a { color: var(--marino-claro); }

:focus-visible {
  outline: 3px solid var(--marino-claro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* 3. UTILIDADES ============================================ */
.contenedor {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 8px; top: 8px; z-index: 100;
  padding: .5em 1em;
  background: var(--blanco);
}

.etiqueta {
  margin: 0 0 .6em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--marino-claro);
}

.centrado { text-align: center; }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.boton:hover { transform: translateY(-1px); }

.boton--whatsapp {
  background: var(--whatsapp);
  color: var(--blanco);
}
.boton--whatsapp:hover { background: var(--whatsapp-hover); }

.boton--grande {
  width: 100%;
  min-height: 58px;
  padding: .9em 1.6em;
  font-size: 1.1rem;
}
.boton--chico {
  min-height: 40px;
  padding: .4em 1em;
  font-size: .95rem;
}

/* Botón del encabezado: "WhatsApp" + número.
   En móvil van en dos líneas para que entre; en pantallas
   medianas, en una sola línea. */
.boton__textos {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.boton__numero {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: .95;
}
@media (min-width: 700px) {
  .boton__textos { flex-direction: row; align-items: baseline; gap: .45em; }
  .boton__numero { font-size: .95rem; font-weight: 700; }
}

.icono {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
}

/* Datos que faltan: muy visibles para no olvidarlos */
.pendiente {
  display: inline-block;
  padding: .05em .5em;
  border: 1px dashed var(--pendiente-texto);
  border-radius: 6px;
  background: var(--pendiente-fondo);
  color: var(--pendiente-texto);
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .04em;
}


/* 4. ENCABEZADO ============================================ */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--arena-oscura);
  backdrop-filter: blur(6px);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--alto-encabezado);
}

.marca {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
}
.marca__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  color: var(--marino);
}
.marca__lugar {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.menu { display: none; }   /* se muestra en pantallas grandes */


/* 5. PORTADA =============================================== */
.portada {
  background: var(--marino);
  color: var(--arena);
}

/* Carrusel de portada: las fotos se superponen y se funden */
.carrusel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;       /* en móvil recorta las fotos verticales */
  background: var(--marino-oscuro);
}
.carrusel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.carrusel__foto--activa { opacity: 1; }

.carrusel__puntos {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.carrusel__punto {
  width: 28px;              /* área táctil cómoda */
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carrusel__punto::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: background-color .3s, transform .3s;
}
.carrusel__punto[aria-current="true"]::before {
  background: var(--blanco);
  transform: scale(1.25);
}

.portada__texto {
  padding: 2rem var(--margen-lateral) 2.5rem;
}
.portada .etiqueta { color: var(--arena-oscura); }

.portada h1 { color: var(--blanco); }
.portada h1 span {
  display: block;
  color: var(--arena-oscura);
  font-size: .62em;
  margin-top: .2em;
}

.portada__frase {
  font-size: 1.15rem;
  color: var(--arena);
}

.datos-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.datos-rapidos li {
  padding: .35em .9em;
  border: 1px solid rgba(245, 239, 228, .35);
  border-radius: 999px;
  font-size: .95rem;
}
.datos-rapidos strong { color: var(--blanco); }

.portada__nota {
  margin: .9rem 0 0;
  font-size: .9rem;
  text-align: center;
  color: var(--arena-oscura);
}


/* 6. SECCIONES ============================================= */
.seccion { padding: 3.5rem 0; }
.seccion--arena  { background: var(--arena); }
.seccion--marino { background: var(--marino); color: var(--arena); }
.seccion--marino h2,
.seccion--marino h3 { color: var(--blanco); }
.seccion--marino .etiqueta { color: var(--arena-oscura); }

.seccion__encabezado {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}
.seccion__encabezado p:last-child { color: var(--texto-suave); }
.seccion--marino .seccion__encabezado p:last-child { color: var(--arena-oscura); }
.seccion__encabezado--izquierda { margin-inline: 0; text-align: left; }

.tarjeta {
  padding: 1.4rem;
  background: var(--blanco);
  border: 1px solid var(--arena-oscura);
  border-radius: var(--radio);
}
.tarjeta p:last-child { margin-bottom: 0; }

.dos-columnas {
  display: grid;
  gap: 1.25rem;
}


/* 7. GALERÍA Y VIDEO ======================================= */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: var(--arena);
}

.galeria figure {
  position: relative;
  margin: 0;
}

.galeria img {
  width: 100%;
  aspect-ratio: 3 / 4;       /* mismo formato que las fotos originales */
  object-fit: cover;
  transition: transform .4s;
}
.galeria a:hover img { transform: scale(1.04); }

.galeria figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .7rem .55rem;
  background: linear-gradient(transparent, rgba(11, 26, 51, .78));
  color: var(--blanco);
  font-size: .85rem;
  font-weight: 600;
}

.video {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin-top: 3rem;
  padding: 1.5rem;
  background: var(--arena);
  border-radius: var(--radio);
}
.video__texto p { margin: 0; color: var(--texto-suave); }

.video__reproductor {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 480 / 848;
  border-radius: 10px;
  background: var(--marino-oscuro);
}


/* 8. QUÉ INCLUYE =========================================== */
.incluye {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.incluye .tarjeta {
  border-top: 4px solid var(--marino);
}
.incluye h3 { margin-bottom: .35em; }
.incluye p { color: var(--texto-suave); }


/* 9. TARIFAS =============================================== */
.lista-datos { margin: 0; }
.lista-datos > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--arena-oscura);
}
.lista-datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-datos dt {
  flex-shrink: 0;
  color: var(--texto-suave);
}
.lista-datos dt small { font-size: .85em; }
.lista-datos dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.nota {
  margin: 1rem 0 1.1rem;
  color: var(--texto-suave);
  font-size: .95rem;
}

.notas {
  margin: 1.1rem 0 0;
  padding: 1rem 1rem 1rem 2rem;
  background: var(--arena);
  border-radius: 10px;
  color: var(--texto-suave);
  font-size: .92rem;
}
.notas li + li { margin-top: .4rem; }

/* Botón dentro de tarjetas (no oculta el botón flotante) */
.boton--mediano {
  width: 100%;
  min-height: 50px;
  padding: .7em 1.4em;
  font-size: 1rem;
}


/* 10. CÓMO RESERVAR ======================================== */
.pasos {
  display: grid;
  gap: 1rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos li {
  position: relative;
  padding: 1.4rem 1.4rem 1.4rem 4.6rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(245, 239, 228, .2);
  border-radius: var(--radio);
  counter-increment: paso;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 1.3rem;
  top: 1.35rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--arena);
  color: var(--marino);
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
}
.pasos h3 { margin-bottom: .25em; }
.pasos p { margin: 0; color: var(--arena-oscura); }

.seccion--marino .boton--grande { max-width: 420px; }

/* Bloque "Agenda una visita" */
.visita {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.6rem 1.4rem;
  border: 1px dashed rgba(245, 239, 228, .45);
  border-radius: var(--radio);
  text-align: center;
}
.visita h3 { margin-bottom: .4em; }
.visita p { color: var(--arena-oscura); }
.visita .boton--mediano { max-width: 320px; }

/* Botón claro (sobre fondo azul marino) */
.boton--claro {
  background: var(--arena);
  color: var(--marino);
}
.boton--claro:hover { background: var(--blanco); }


/* 11. ZONA Y MAPA ========================================== */
.distancias {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.distancias li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .75rem 0 .75rem 1.1rem;
  border-bottom: 1px solid var(--arena-oscura);
  position: relative;
}
.distancias li::before {          /* puntito azul marino */
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marino);
}
.distancias__lugar { font-weight: 700; color: var(--marino); }
.distancias__tiempo { color: var(--texto-suave); font-size: .95rem; }

.zona__subtitulo { margin-top: .5rem; font-size: 1.3rem; }

.cercanos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.cercanos li {
  padding: .35em .9em;
  border-radius: 999px;
  background: var(--arena);
  border: 1px solid var(--arena-oscura);
  color: var(--marino);
  font-size: .92rem;
  font-weight: 600;
}

.aviso {
  padding: .9rem 1rem;
  border-left: 4px solid var(--marino);
  background: var(--arena);
  border-radius: 0 8px 8px 0;
  font-size: .95rem;
}

.mapa iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radio);
  background: var(--arena);
}
.mapa__nota {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--texto-suave);
}


/* 12. PIE Y BOTÓN FLOTANTE ================================= */
.pie {
  padding: 2.25rem 0 6rem;     /* espacio extra para el botón flotante */
  background: var(--marino-oscuro);
  color: var(--arena-oscura);
  font-size: .95rem;
}
.pie__fila {
  display: grid;
  gap: 1rem;
}
.pie p { margin: 0; }
.pie__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  color: var(--blanco);
}
.pie__whatsapp {
  color: var(--blanco);
  font-weight: 700;
}

.whatsapp-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--blanco);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.whatsapp-flotante:hover { transform: scale(1.06); }
.whatsapp-flotante .icono { width: 32px; height: 32px; }
.whatsapp-flotante { transition: transform .2s, opacity .25s; }
/* Se oculta (con JS) mientras se ve un botón grande de WhatsApp */
.whatsapp-flotante--oculto {
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}


/* 12b. VISOR DE FOTOS (lo crea js/main.js) ================= */
.sin-scroll { overflow: hidden; }

.visor {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blanco);
}
.visor::backdrop { background: rgba(11, 26, 51, .94); }

.visor__figura {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 3.5rem .75rem 4rem;
}
.visor__imagen {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 7.5rem);
  border-radius: 8px;
  object-fit: contain;
}
.visor__leyenda {
  position: fixed;
  left: 0; right: 0; bottom: 1.1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: .95rem;
}
.visor__contador { color: var(--arena-oscura); }

.visor__boton {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--blanco);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.visor__boton:hover { background: rgba(255, 255, 255, .28); }
.visor__cerrar    { top: .6rem; right: .6rem; }
.visor__anterior  { left: .5rem;  top: 50%; transform: translateY(-50%); }
.visor__siguiente { right: .5rem; top: 50%; transform: translateY(-50%); }


/* 13. PANTALLAS MEDIANAS (≥ 700px) ========================= */
@media (min-width: 700px) {
  :root { --margen-lateral: 32px; }

  .seccion { padding: 5rem 0; }

  .galeria { grid-template-columns: repeat(3, 1fr); gap: .9rem; }

  .incluye { grid-template-columns: repeat(2, 1fr); }

  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  .pasos { grid-template-columns: repeat(3, 1fr); }
  .pasos li { padding: 4.4rem 1.4rem 1.4rem; }

  .video { grid-template-columns: 1fr auto; padding: 2rem 2.5rem; }
  .video__reproductor { width: 300px; }

  .pie__fila { grid-template-columns: 1fr auto; align-items: center; }
  .pie { padding-bottom: 2.25rem; }
}


/* 14. PANTALLAS GRANDES (≥ 1000px) ========================= */
@media (min-width: 1000px) {
  :root { --alto-encabezado: 72px; }

  .menu {
    display: flex;
    gap: 1.75rem;
  }
  .menu a {
    color: var(--texto);
    font-weight: 600;
    text-decoration: none;
  }
  .menu a:hover { color: var(--marino-claro); }

  /* Portada: texto a la izquierda, foto vertical a la derecha */
  .portada {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--alto-encabezado));
  }
  .portada__foto { order: 2; aspect-ratio: auto; }
  .portada__texto {
    align-self: center;
    max-width: 560px;
    margin-left: auto;
    padding: 3rem 4rem 3rem 32px;
  }
  .portada .boton--grande { width: auto; }
  .portada__nota { text-align: left; }

  .galeria { grid-template-columns: repeat(4, 1fr); }

  .incluye { grid-template-columns: repeat(3, 1fr); }

  .dos-columnas--zona { grid-template-columns: 2fr 3fr; align-items: center; gap: 3rem; }
  .mapa iframe { height: 380px; }
}