/* =========================================================
   Componentes compartidos
   ========================================================= */

/* ---------- Barra superior (dentro de cada hero) ---------- */
.barra-sup {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding-top: clamp(16px, 2.2vw, 40px);
  color: var(--blanco); font-size: var(--t-chico); line-height: 1.35;
}
.barra-sup__estado { display: flex; align-items: center; gap: 8px; }
.barra-sup__punto { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); flex: none; }
.barra-sup__punto.is-abierto { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }
.barra-sup__logo { display: block; width: clamp(220px, 20vw, 340px); }
.barra-sup__logo { color: var(--blanco); }
.barra-sup__logo-svg { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 166.49; }
.barra-sup__saludo { text-align: right; }
@media (max-width: 767px) {
  .barra-sup { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .barra-sup__logo { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 220px; }
  .barra-sup__estado, .barra-sup__saludo { font-size: .8rem; }
}

/* ---------- Navegación cápsula (sticky en toda la página) ---------- */
/* El ancla queda al pie del hero; la cápsula se dibuja --nav-sube px arriba.
   Al llegar arriba, el ancla se pega a top = 14px + --nav-sube, así la cápsula queda a 14px. */
.nav-anclaje {
  --nav-h: clamp(52px, 4.4vw, 82px);
  --nav-sube: calc(var(--nav-h) + clamp(20px, 2.6vw, 44px));
  position: sticky; top: calc(14px + var(--nav-sube)); z-index: 60;
  height: 0; display: flex; justify-content: center;
  pointer-events: none;
}
.nav-capsula {
  pointer-events: auto;
  translate: 0 calc(var(--nav-sube) * -1);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(4px, 1.6vw, 28px);
  max-width: calc(100vw - 24px);
  padding: 0 clamp(10px, 2.2vw, 40px);
  background: linear-gradient(90deg, var(--naranja-oscuro), var(--naranja-claro) 45%, var(--crema) 70%, var(--rosa));
  border-radius: clamp(18px, 1.6vw, 28px);
  box-shadow: 0 10px 30px rgba(66, 33, 11, .18);
  overflow-x: auto; scrollbar-width: none;
}
.nav-capsula::-webkit-scrollbar { display: none; }
.nav-capsula a {
  flex: none;
  padding: clamp(8px, .8vw, 12px) clamp(10px, 1.2vw, 18px);
  color: var(--blanco); text-decoration: none; white-space: nowrap;
  font-size: clamp(.95rem, 1.35vw, 1.6rem); font-weight: 500;
  border-radius: 12px; position: relative;
  transition: background-color var(--t-hover);
}
.nav-capsula a:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 480px) {
  .nav-capsula { gap: 0; padding: 0 6px; }
  .nav-capsula a { font-size: .84rem; padding: 8px 7px; }
}
.nav-capsula a[aria-current="page"]::after {
  content: ""; position: absolute; left: clamp(10px, 1.2vw, 18px); right: clamp(10px, 1.2vw, 18px); bottom: 6px;
  height: 2px; background: currentColor; border-radius: 2px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px;
  padding: clamp(.8em, 1vw, 1em) clamp(1.8em, 3vw, 3.4em);
  border: 2px solid transparent; border-radius: var(--radio-boton);
  font-family: var(--f-texto); font-size: clamp(1rem, 1.45vw, 1.75rem); font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover), transform var(--t-hover);
}
.boton:hover { transform: translateY(-2px); }
.boton--naranja { background: var(--naranja); color: var(--blanco); }
.boton--naranja:hover { background: var(--naranja-20); }
.boton--crema { background: var(--crema); color: var(--blanco); }
.boton--crema:hover { background: var(--crema-20); }
.boton--contorno { border-color: var(--crema); color: var(--crema); background: transparent; border-radius: 999px; }
.boton--contorno:hover { background: var(--crema); color: var(--cafe); }

/* ---------- Tarjeta punteada ---------- */
.tarjeta {
  background: var(--panel-tarjeta);
  border: var(--borde-punteado);
  border-radius: var(--radio-tarjeta);
  padding: clamp(20px, 2vw, 36px);
}
.tarjeta h3 { font-weight: 700; font-size: clamp(1.25rem, 1.6vw, 1.9rem); line-height: 1.2; margin-bottom: .45em; }
.tarjeta p { font-size: var(--t-p-tarjeta); font-weight: 500; line-height: 1.6; }

/* ---------- Fotos ---------- */
.foto { border-radius: var(--radio-foto); overflow: hidden; background: rgba(66, 33, 11, .12); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--sombra { box-shadow: 0 18px 40px rgba(66, 33, 11, .22); }

/* Collage de 3 fotos inclinadas (heros interiores) */
.collage { position: relative; width: 100%; aspect-ratio: 820 / 900; }
.collage .foto { position: absolute; }
.collage__1 { left: 0; top: 0; width: 41%; aspect-ratio: 320 / 260; rotate: -5deg; z-index: 2; }
.collage__2 { left: 16%; top: 19%; width: 56%; aspect-ratio: 460 / 600; rotate: 4deg; z-index: 1; }
.collage__3 { right: 0; bottom: 0; width: 40%; aspect-ratio: 310 / 320; rotate: 0deg; z-index: 3; }
.collage--ancha .collage__2 { aspect-ratio: 470 / 560; }
.collage--ancha .collage__3 { aspect-ratio: 310 / 310; }

/* Sello (insignia y marca de agua) */
.sello-insignia {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  width: clamp(120px, 13vw, 250px); aspect-ratio: 1; z-index: 2;
  filter: drop-shadow(0 8px 20px rgba(66, 33, 11, .15));
}
.marca-agua {
  position: absolute; pointer-events: none; user-select: none;
  width: clamp(260px, 32vw, 620px); aspect-ratio: 1; z-index: 0;
}

/* Lista con viñetas suaves */
.lista-puntos { list-style: none; display: grid; gap: 1.4em; }
.lista-puntos li { position: relative; padding-left: 1em; }
.lista-puntos li::before { content: "•"; position: absolute; left: 0; }

/* Botón de pausa (rueda) */
.boton-pausa {
  position: absolute; right: var(--gutter); bottom: 18px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgba(66, 33, 11, .55); color: var(--blanco); cursor: pointer;
  transition: background-color var(--t-hover);
}
.boton-pausa:hover { background: rgba(66, 33, 11, .8); }
.boton-pausa svg { width: 18px; height: 18px; }
.boton-pausa .icono-play { display: none; }
.boton-pausa[aria-pressed="true"] .icono-play { display: block; }
.boton-pausa[aria-pressed="true"] .icono-pausa { display: none; }

/* Carrusel continuo (reseñas y galería) */
.carrusel { overflow: hidden; }
.carrusel__pista { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; }

/* ---------- Íconos (Font Awesome Free, en línea) ---------- */
.icono { width: 1em; height: 1em; flex: none; }
.nav-capsula__home { display: inline-flex; align-items: center; gap: .45em; }
.nav-capsula__home .icono { width: .95em; height: .95em; }

/* ---------- Menú en pantallas angostas (menos de 1080 px) ---------- */
.menu-boton, .menu-movil { display: none; }
@media (max-width: 1079px) {
  .nav-anclaje { display: none; }
  .hero, .hero-int { padding-bottom: clamp(48px, 8vw, 96px); }

  .menu-boton {
    position: fixed; z-index: 90; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
    translate: -50% 0;
    display: inline-flex; align-items: center; gap: 22px;
    padding: 12px 22px 12px 26px; min-height: 56px;
    border: 0; border-radius: 22px; cursor: pointer;
    background: linear-gradient(90deg, var(--naranja-oscuro), var(--naranja-claro) 40%, var(--crema) 70%, var(--rosa));
    color: var(--blanco); font-size: 1.15rem; font-weight: 500;
    box-shadow: 0 10px 28px rgba(66, 33, 11, .28);
  }
  .menu-boton .icono { width: 30px; height: 30px; }
  .menu-boton .icono-cerrar { display: none; }
  .menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
  .menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }

  .menu-movil {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    gap: clamp(18px, 5vh, 64px); padding: 28px 24px 108px;
    background: var(--naranja-oscuro); color: var(--blanco);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .menu-movil.is-abierto { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .menu-movil__sello { width: min(clamp(150px, 26vw, 240px), 20vh); height: auto; flex: none; }
  .menu-movil__lista { list-style: none; display: grid; gap: clamp(8px, 2.6vh, 36px); text-align: center; }
  .menu-movil__lista a {
    display: inline-flex; align-items: center; gap: .35em;
    color: var(--blanco); text-decoration: none;
    font-size: min(clamp(2.2rem, 8vw, 4.2rem), 6.4vh); font-weight: 500; line-height: 1.1;
    translate: 0 16px; opacity: 0;
    transition: translate .45s var(--curva-salida), opacity .45s var(--curva-salida), color var(--t-hover);
  }
  .menu-movil.is-abierto .menu-movil__lista a { translate: 0 0; opacity: 1; }
  .menu-movil__lista li:nth-child(2) a { transition-delay: .04s; }
  .menu-movil__lista li:nth-child(3) a { transition-delay: .08s; }
  .menu-movil__lista li:nth-child(4) a { transition-delay: .12s; }
  .menu-movil__lista li:nth-child(5) a { transition-delay: .16s; }
  .menu-movil__lista li:nth-child(6) a { transition-delay: .2s; }
  .menu-movil__lista a:hover { color: var(--acento); }
  .menu-movil__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .18em; }
  .menu-movil__home .icono { width: .8em; height: .8em; }
  body.menu-abierto { overflow: hidden; }
  /* el botón de pausa de la rueda no debe quedar tapado por el botón Menú */
  .boton-pausa { bottom: 18px; right: 16px; }
  .pie__legal { padding-bottom: 100px; }
}
@media (max-width: 1079px) and (prefers-reduced-motion: reduce) {
  .menu-movil, .menu-movil__lista a { transition: none; translate: none; }
}