/* Home page sections. */

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  max-height: 64rem;
  display: flex;
  align-items: flex-end;
  color: var(--c-cream);
  --focus: var(--c-gold);
  --pp-hilo: rgb(246 238 223 / 0.5);
  --pp-3: #5CA283;
}
.hero__foto, .hero__velo { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.hero__velo {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(21 54 41 / 0.78) 0, rgb(21 54 41 / 0.3) 16%, rgb(21 54 41 / 0) 30%),
    linear-gradient(0deg, rgb(21 54 41 / 0.95) 0, rgb(21 54 41 / 0.84) 42%, rgb(21 54 41 / 0.6) 62%, rgb(21 54 41 / 0.12) 82%, rgb(21 54 41 / 0) 100%);
}
@media (min-width: 992px) {
  .hero__velo {
    background:
      linear-gradient(180deg, rgb(21 54 41 / 0.6) 0, rgb(21 54 41 / 0) 22%),
      linear-gradient(90deg, rgb(21 54 41 / 0.94) 0, rgb(21 54 41 / 0.72) 38%, rgb(21 54 41 / 0.12) 70%, rgb(21 54 41 / 0) 100%);
  }
}
/* the light arriving: a marigold wash that recedes once on load */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 8% 105%, rgb(242 169 59 / 0.55) 0, rgb(242 169 59 / 0) 62%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: amanecer 1.6s var(--ease-out) 0.1s both; }
}
@keyframes amanecer {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.hero__guirnalda {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) - 4px);
  height: clamp(38px, 5vw, 74px);
  z-index: 1;
  pointer-events: none;
}
.hero__contenido { padding-block: 9rem 3rem; position: relative; }
@media (min-width: 992px) { .hero__contenido { padding-block: 10rem 5rem; } }
.hero__titulo {
  color: var(--c-cream);
  font-size: var(--t-hero);
  line-height: 1;
  margin: 0 0 1.1rem;
  max-width: 13ch;
  text-shadow: 0 2px 24px rgb(21 54 41 / 0.45);
}
.hero__texto { font-size: var(--t-lead); max-width: 34rem; margin: 0 0 1.75rem; color: rgb(246 238 223 / 0.95); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__estado { margin-top: 1.75rem; }
@media (min-width: 1200px) { .hero__estado { display: none; } }
@media (max-width: 420px) {
  .hero__acciones .btn-mn { flex: 1 1 100%; }
}

/* ---------- story ---------- */
.historia__rejilla { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .historia__rejilla { grid-template-columns: 5fr 6fr; gap: 5rem; } }
.historia__sol { width: 7rem; margin-bottom: 1.25rem; }
.historia__destacado { font-weight: 500; font-size: clamp(1.15rem, 0.5vw + 1rem, 1.35rem); line-height: 1.45; color: var(--c-ink); margin-bottom: 1.25rem; }
.historia__texto p { max-width: 36rem; }
.historia__foto { margin: 0; position: relative; }
.historia__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-2); display: block; }
@media (min-width: 992px) { .historia__foto { margin-right: -2rem; } }

/* ---------- featured: horizontal showcase ---------- */
.destacados__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.destacados__cabecera .titulo-seccion { margin: 0; }
.destacados__pista {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: max(1rem, calc((100% - 1200px) / 2 + 1.5rem));
  scroll-padding-inline: max(1rem, calc((100% - 1200px) / 2 + 1.5rem));
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--c-agave) transparent;
}
.destacados__lista { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; width: max-content; }
.destacado { width: min(76vw, 22rem); scroll-snap-align: start; }
.destacado__enlace { display: block; text-decoration: none; color: inherit; }
.destacado__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--c-clay); box-shadow: var(--shadow-1); }
.destacado__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.destacado__datos { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0.25rem 0; }
.destacado__nombre { font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.destacado__precio { font-weight: 700; color: var(--c-terra-dark); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .destacado__enlace:hover .destacado__foto img { transform: scale(1.045); }
  .destacado__enlace:hover .destacado__nombre { color: var(--c-terra-dark); }
}

/* ---------- celebrate ---------- */
.celebra { overflow: hidden; }
.celebra::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/ornament/talavera.svg") 0 0 / 96px 96px;
  opacity: 0.07;
  pointer-events: none;
}
.celebra__rejilla { position: relative; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .celebra__rejilla { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.celebra__texto p { font-size: var(--t-lead); max-width: 30rem; margin-bottom: 1.75rem; color: rgb(246 238 223 / 0.92); }
.celebra__lista { list-style: none; margin: 0; padding: 0; background: rgb(246 238 223 / 0.06); border-radius: var(--r-card); border: 1px solid rgb(246 238 223 / 0.16); overflow: hidden; }
.celebra__lista li + li { border-top: 1px solid rgb(246 238 223 / 0.14); }
.celebra__lista a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.25rem;
  color: var(--c-cream);
  text-decoration: none;
  transition: background-color var(--d-ui) ease;
}
.celebra__lista a > .ti:first-child {
  width: 3rem; height: 3rem; flex: none; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--c-gold); color: var(--c-ink); font-size: 1.5rem;
}
.celebra__lista span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.celebra__lista strong { font-size: 1.1rem; }
.celebra__lista small { color: rgb(246 238 223 / 0.8); font-size: var(--t-small); line-height: 1.4; }
.celebra__flecha { font-size: 1.4rem; color: var(--c-gold); transition: transform var(--d-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .celebra__lista a:hover { background: rgb(246 238 223 / 0.09); }
  .celebra__lista a:hover .celebra__flecha { transform: translateX(5px); }
}

/* ---------- good to know ---------- */
.experiencia__cabecera { margin-bottom: 2rem; }
.experiencia__rejilla { display: grid; gap: 2rem; }
@media (min-width: 992px) { .experiencia__rejilla { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; } }
.experiencia__principal { display: grid; gap: 1.75rem; }
.dato-grupo h3 { font-size: 1.2rem; margin: 0 0 0.75rem; color: var(--c-agave); }
.dato-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.dato-lista li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
}
.dato-lista .ti { font-size: 1.2rem; color: var(--c-agave); }
.dato-lista--una { flex-direction: column; align-items: stretch; }
.dato-lista--una li { border-radius: var(--r-control); }
.experiencia__lateral { display: grid; gap: 1.75rem; padding: 1.5rem; background: var(--c-sand); border-radius: var(--r-card); }
.experiencia__lateral .dato-lista li { background: var(--c-cream); }
.dato-nota { margin: 0.8rem 0 0; font-size: var(--t-small); color: var(--c-ink-2); }

/* ---------- order ---------- */
.pedir__rejilla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .pedir__rejilla { grid-template-columns: 1fr 1.25fr; gap: 4rem; } }
.pedir__texto p { max-width: 28rem; font-size: var(--t-lead); margin: 0; }
.pedir__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 575px) { .pedir__acciones .btn-mn { width: 100%; } }

/* ---------- gallery ---------- */
.galeria__cabecera { margin-bottom: 1.75rem; }
.galeria__mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(8.5rem, 34vw, 13rem);
  grid-auto-flow: dense;
}
@media (min-width: 992px) {
  .galeria__mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(11rem, 17vw, 15rem); gap: 0.75rem; }
}
.gal { min-width: 0; min-height: 0; }
.gal--ancha { grid-column: span 2; }
.gal--alta { grid-row: span 2; }
.gal__boton {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--c-clay);
  border-radius: var(--r-card); overflow: hidden; cursor: zoom-in;
}
.gal__boton picture, .gal__boton img { display: block; width: 100%; height: 100%; }
.gal__boton img { object-fit: cover; transition: transform 0.5s var(--ease-out); }
.gal__boton:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .gal__boton:hover img { transform: scale(1.05); } }

.lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgb(21 54 41 / 0.95); color: var(--c-cream);
  --focus: var(--c-gold);
}
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; padding: 1rem; animation: lb-entra 0.22s var(--ease-out); }
.lightbox::backdrop { background: rgb(21 54 41 / 0.7); }
.lightbox__figura { margin: 0; min-width: 0; text-align: center; }
.lightbox__figura img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: var(--r-control); box-shadow: var(--shadow-2); }
.lightbox__figura figcaption { margin-top: 0.75rem; font-weight: 500; }
.lightbox__cerrar, .lightbox__nav {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1.5px solid rgb(246 238 223 / 0.5);
  background: rgb(21 54 41 / 0.6); color: var(--c-cream); font-size: 1.5rem; cursor: pointer;
  transition: background-color var(--d-ui) ease, transform var(--d-press) var(--ease-out);
}
.lightbox__cerrar { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.lightbox__cerrar:active, .lightbox__nav:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .lightbox__cerrar:hover, .lightbox__nav:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); } }
@media (max-width: 575px) {
  .lightbox[open] { grid-template-columns: 1fr; align-content: center; }
  .lightbox__nav { position: absolute; bottom: 1.25rem; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
}
@keyframes lb-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* ---------- location ---------- */
.ubicacion__rejilla { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .ubicacion__rejilla { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.mapa { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--c-clay); box-shadow: var(--shadow-1); }
.mapa__vista { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); }
.mapa__velo {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  padding: 1.5rem; text-align: center; color: var(--c-cream);
  background: linear-gradient(0deg, rgb(21 54 41 / 0.7), rgb(21 54 41 / 0.25));
}
.mapa__velo > .ti { font-size: 2.75rem; color: var(--c-gold); }
.mapa__velo small { max-width: 26rem; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ubicacion__lugar { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; margin-bottom: 1.25rem; }
.ubicacion__lugar .ti { color: var(--c-terra); font-size: 1.4rem; }
.ubicacion__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 1.25rem; }

/* ---------- social ---------- */
.social__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.social__titulo { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); margin: 0; }
.social__enlaces { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.social__enlaces a {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0.4rem 1.2rem 0.4rem 0.95rem;
  border: 1.5px solid var(--c-agave); border-radius: var(--r-pill); color: var(--c-agave); font-weight: 700; text-decoration: none;
  transition: background-color var(--d-ui) ease, color var(--d-ui) ease, transform var(--d-press) var(--ease-out);
}
.social__enlaces a:active { transform: scale(0.97); }
.social__enlaces .ti { font-size: 1.4rem; }
.social__enlaces small { font-weight: 400; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .social__enlaces a:hover { background: var(--c-agave); color: var(--c-cream); } }

/* ---------- celebrations: 12 cells on desktop (3 rows of 4), 10 on phones, no holes ----------
   order: tall, big (2x2), tall, wide, wide */
.eventos__cabecera { margin-bottom: 1.75rem; }
.eventos__mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(8.5rem, 34vw, 13rem);
  grid-auto-flow: dense;
}
@media (min-width: 992px) {
  .eventos__mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(10rem, 15vw, 14rem); gap: 0.75rem; }
}
.ev { min-width: 0; min-height: 0; }
.ev--alta { grid-row: span 2; }
.ev--ancha { grid-column: span 2; }
.ev--grande { grid-column: span 2; }
@media (min-width: 992px) { .ev--grande { grid-row: span 2; } }