/*
  TRILOGÍA DEL SER
  =================
  Hoja de estilos principal.

  Guía rápida para personalizar:
  1. Cambia colores y medidas globales en :root.
  2. Sustituye los bloques .visual y .event-image por imágenes reales.
  3. Cada bloque está comentado para localizarlo fácilmente.
*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display:ital@0;1&display=swap");

/* 1. Variables globales: colores, ancho de contenido y sombras */
:root {
  --paper: #fbf8f2;
  --cream: #f0e8dc;
  --brown: #443229;
  --ink: #2e2924;
  --muted: #6d6258;
  --olive: #4b5130;
  --gold: #a17b2c;
  --gold-light: #d8bd76;
  --line: rgba(68, 50, 41, 0.14);
  --shadow: 0 22px 50px rgba(56, 40, 27, 0.12);
  --image-letterbox: #74604f;
  --page-width: min(1180px, calc(100% - 10vw));
  --header-height: 5.8rem;
}

/* 2. Reset y estilos base */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 "DM Sans", sans-serif;
  animation: page-fade-in 0.6s ease both;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: var(--gold-light);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* Oculta visualmente pero mantiene accesible para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace de accesibilidad, visible al navegar con teclado */
.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: white;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* 3. Tipografía compartida */
h1,
h2,
h3 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(3.1rem, 5.4vw, 5rem);
  line-height: 0.92;
}

h2 {
  font-size: clamp(3rem, 5vw, 4.7rem);
  line-height: 0.92;
}

h3 {
  font-size: clamp(1.9rem, 3vw, 2.45rem);
  line-height: 0.98;
}

p {
  margin: 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
  color: var(--olive);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.eyebrow::before {
  width: 2rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.lead,
.copy p:not(.eyebrow),
.page-hero p,
.description,
.contact-card p {
  color: var(--muted);
}

.lead {
  max-width: 30rem;
  line-height: 1.8;
}

.intro .copy p.lead-italic {
  margin-bottom: 1.6rem;
  color: var(--gold);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-style: italic;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--ink);
}

.check-list li::before {
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
  content: "✓";
}

/* 4. Cabecera y navegación */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 248, 242, 0.96);
  box-shadow: 0 7px 24px rgba(50, 36, 26, 0.04);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: 1.45rem/0.77 "DM Serif Display", Georgia, serif;
  letter-spacing: -0.03em;
}

.brand b {
  font-weight: 400;
  font-style: italic;
}

/* Logotipo de los tres círculos */
.brand-mark {
  position: relative;
  display: block;
  width: 2.85rem;
  height: 2.45rem;
  flex: 0 0 auto;
}

.brand-mark i {
  position: absolute;
  width: 1.82rem;
  height: 1.82rem;
  border: 1.5px solid var(--olive);
  border-radius: 50%;
}

.brand-mark i:nth-child(1) {
  top: 0.38rem;
  left: 0;
  background: rgba(184, 151, 55, 0.72);
}

.brand-mark i:nth-child(2) {
  top: 0;
  left: 0.78rem;
  background: rgba(238, 233, 200, 0.78);
}

.brand-mark i:nth-child(3) {
  top: 0.5rem;
  left: 1.1rem;
  background: rgba(52, 64, 33, 0.75);
}

.navigation {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.7vw, 2.4rem);
  font-size: 0.88rem;
}

.navigation a:not(.nav-cta) {
  position: relative;
  padding: 0.35rem 0;
}

.navigation a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--olive);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.navigation a:hover::after,
.navigation a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--olive);
  border-radius: 99px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.nav-cta:hover {
  background: var(--olive);
  color: white;
  transform: translateY(-2px);
}

/* Botón del menú, visible solo en móvil */
.menu-toggle {
  display: none;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  display: block;
  width: 1.05rem;
  height: 1px;
  margin: 0.24rem auto;
  background: currentColor;
  content: "";
  transition: transform 0.2s;
}

.menu-toggle.is-open span {
  transform: scaleX(0);
}

.menu-toggle.is-open::before {
  transform: translateY(0.31rem) rotate(45deg);
}

.menu-toggle.is-open::after {
  transform: translateY(-0.31rem) rotate(-45deg);
}

/* 5. Elementos reutilizables */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.button::after {
  content: "→";
  font-size: 1.1em;
  transition: transform 0.25s ease;
}

.button:hover {
  background: #8c681f;
  box-shadow: 0 12px 24px rgba(123, 89, 21, 0.22);
  transform: translateY(-3px);
}

.button:hover::after {
  transform: translateX(3px);
}

.section {
  padding: clamp(5rem, 10vw, 8.5rem) 5vw;
}

.section > * {
  width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
}

/* Páginas de texto legal (aviso legal, privacidad) */
.legal-content {
  max-width: 46rem;
}

.legal-content h2 {
  margin-top: 3rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--muted);
  line-height: 1.8;
}

.legal-content p {
  margin-top: 1rem;
}

.legal-content ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.legal-content li + li {
  margin-top: 0.4rem;
}

.legal-content a {
  color: var(--gold);
  text-decoration: underline;
}

.form-legal-note {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.form-legal-note a {
  color: inherit;
  text-decoration: underline;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3.2rem;
}

/* 6. Portada */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(48rem, calc(100vh - var(--header-height)));
  padding: 6rem 5vw;
  overflow: hidden;
  isolation: isolate;
  background: #533d31;
  color: #fff9ef;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 36%, rgba(221, 187, 112, 0.35) 0 1%, transparent 20%),
    radial-gradient(circle at 72% 68%, rgba(238, 219, 185, 0.18) 0 4%, transparent 25%),
    linear-gradient(115deg, #37261e 0%, #594133 55%, #92745f 150%);
  content: "";
}

/* Círculo decorativo del hero */
.hero::after {
  position: absolute;
  top: 33%;
  right: 8vw;
  z-index: -1;
  width: min(45vw, 36rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 248, 235, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(255, 248, 235, 0.03), 0 0 0 8rem rgba(255, 248, 235, 0.025);
  content: "";
  transform: translateY(-50%);
  animation: orbit 16s ease-in-out infinite;
}

/* Fotografía de portada: se ve completa (sin recortar ni pixelarse), alineada con el círculo */
.hero--photo::before {
  background:
    linear-gradient(90deg, rgba(26, 20, 16, 0.78) 0%, rgba(33, 25, 19, 0.5) 37%, rgba(33, 25, 19, 0.08) 70%),
    url("assets/Intro.png") right 8vw center / contain no-repeat,
    linear-gradient(
      180deg,
      #07090a 0%,
      #070d0a 25%,
      #090b09 45%,
      #080904 60%,
      #241503 66%,
      #552d18 72%,
      #60311e 75%,
      #4d2318 80%,
      #2f1808 86%,
      #1e0d04 91%,
      #140904 100%
    );
}

.hero-content {
  width: var(--page-width);
  margin: 0 auto;
}

.hero .eyebrow {
  color: #ead8af;
}

.hero h1 {
  max-width: 22ch;
  font-size: clamp(2.4rem, 4.2vw, 3.9rem);
  line-height: 1.05;
}

.hero h1 em {
  color: var(--gold);
  font-style: italic;
}

.hero-text {
  max-width: 34rem;
  margin: 2rem 0 2.3rem;
  color: #f4e8d9;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75;
}

/* 7. Bloque editorial "Sobre mí" */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.8fr);
  align-items: center;
  gap: clamp(3rem, 9vw, 9rem);
}

.intro--contain {
  grid-template-columns: max-content minmax(0, 44rem);
  align-items: start;
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  background: var(--cream);
}

.intro--contain .copy p:not(.lead-italic) {
  text-align: justify;
  text-align-last: left;
}

.intro--wide {
  grid-template-columns: 28rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

.intro > .copy {
  margin: 0;
  max-width: none;
}

.dimensions-intro {
  background: var(--paper);
}

.dimensions-statement {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: 1.3rem;
}

.dimensions-statement h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.1;
}

.dimensions-statement h2 em {
  color: var(--gold);
  font-style: italic;
}

.dimensions-statement p {
  margin-top: 0.4rem;
  color: var(--muted);
  line-height: 1.85;
}

.dimensions-showcase {
  background: var(--cream);
}

.showcase-card {
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--paper);
  border-radius: 1.75rem;
  box-shadow: var(--shadow);
}

.showcase-card .formacion-callout {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0;
}

.copy {
  max-width: 33rem;
}

.copy h2 {
  margin-bottom: 1.6rem;
}

.copy p:not(.eyebrow) {
  margin-bottom: 1.8rem;
  line-height: 1.85;
}

/* Sustituye este bloque por una <img> cuando tengas la foto definitiva */
.visual {
  position: relative;
  display: grid;
  min-height: 29rem;
  overflow: hidden;
  background: #a38870;
  place-items: center;
}

.visual::before {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, #f4e4c8 0 3%, transparent 4%),
    linear-gradient(145deg, #d4b48e, #7a624e);
  box-shadow: 0 0 0 1.2rem rgba(255, 255, 255, 0.12), 0 0 0 3rem rgba(255, 255, 255, 0.07);
  content: "";
}

.visual::after {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  content: "";
}

.visual-label {
  position: relative;
  z-index: 1;
  max-width: 13rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(68, 50, 41, 0.28);
  color: #fff9ef;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* Imagen editorial reutilizada en Inicio y Sobre mí */
.portrait-frame {
  position: relative;
  min-height: 32rem;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
}

.portrait-frame::after {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  content: "";
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  object-position: center;
}

/* Variante para imágenes panorámicas (ej. ilustraciones), en vez de retratos verticales */
.portrait-frame--wide {
  width: fit-content;
  max-width: min(100%, 28rem);
  min-height: 0;
  margin: 0;
  justify-self: start;
}

.portrait-frame--wide img {
  width: auto;
  height: auto;
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
}

/* Variante que muestra la foto entera, sin recortar ni hacer zoom.
   El marco usa el ancho de su columna directamente (no "el ancho que
   ocupe la foto") para que su tamaño no dependa de cómo cada navegador
   calcule las dimensiones de la imagen — Safari, en concreto, se hace
   un lío con eso cuando la foto solo tiene una altura fija */
.portrait-frame--contain {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  justify-self: start;
}

.portrait-frame--contain img {
  width: auto;
  max-width: 100%;
  min-height: 0;
  max-height: 46rem;
  object-fit: contain;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.portrait-frame--contain::after,
.portrait-frame--wide::after {
  display: none;
}

/* 8. Cabeceras internas */
.page-hero {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 2rem) 5vw;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.page-hero::after {
  display: none;
}

.page-hero > * {
  position: relative;
  z-index: 1;
  width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
}

.page-hero .eyebrow {
  justify-content: center;
}

.page-hero h1 {
  max-width: none;
  margin: 0 auto;
  color: var(--brown);
  font-size: clamp(1.7rem, 2.2vw, 2.15rem);
  line-height: 1;
}

.page-hero p:not(.eyebrow) {
  max-width: 37rem;
  margin: 0.6rem auto 0;
  line-height: 1.8;
}

/* Variante compacta: permite ver los eventos al cargar la página */
.page-hero--events {
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
}

.page-hero--events p:not(.eyebrow) {
  margin-top: 0.5rem;
}

.page-hero--events::after {
  top: -10rem;
  width: 14rem;
  height: 14rem;
}

/* 9. Tarjetas de eventos y artículos */
.events {
  background: var(--cream);
}

.event-grid,
.home-events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.event-grid .event-card {
  flex: 1 1 22rem;
  max-width: 28rem;
}

.event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.event-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-7px);
}

.event-image,
.detail-image {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--image-letterbox);
  color: #fff8ee;
  place-items: center;
}

.event-image {
  height: 16rem;
}

/* .has-image solo se añade a .event-image/.detail-image (ver script.js) —
   se ve la foto entera (sin recortar cabezas/cuerpos), no un recorte ampliado.
   Posición absoluta en vez de depender del alto/ancho del recuadro grid:
   así la foto siempre encaja exactamente en el recuadro en cualquier
   navegador, sin depender de que se calcule bien un alto en porcentaje. */
.has-image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: var(--image-letterbox);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* En la tarjeta pequeña la foto llena todo el hueco (sin marco de color
   alrededor); la foto completa sin recortar se reserva para la página
   grande del propio evento (.detail-image, justo abajo) */
.event-image.has-image img {
  object-fit: cover;
  object-position: center 25%;
}

.event-card:hover .has-image img {
  transform: scale(1.06);
}

.has-image::before,
.has-image::after {
  display: none;
}

.event-image::before,
.detail-image::before {
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #f3d998 0 3%, transparent 3.4%),
    linear-gradient(135deg, #b79a6f, #604e41);
  box-shadow: 0 0 0 1.4rem rgba(255, 255, 255, 0.1);
  content: "";
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.event-card:hover .event-image::before {
  transform: scale(1.12) rotate(18deg);
}

.event-image::after,
.detail-image::after {
  position: relative;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(68, 50, 41, 0.32);
  content: attr(data-label);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.event-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.8rem;
}

.date {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.event-body h3 {
  margin: 0.7rem 0 0.95rem;
}

.event-body > p:not(.date) {
  color: var(--muted);
  line-height: 1.75;
}

.event-meta {
  display: flex;
  gap: 1.2rem;
  margin: 1.45rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.event-body .button {
  margin-top: auto;
  padding: 0.76rem 1.05rem;
  font-size: 0.75rem;
}

/* Carrusel de Eventos: las flechas se activan por JavaScript al añadir más de 3 tarjetas */
.events-page {
  padding-top: 1.5rem;
}

.carousel {
  position: relative;
}

/* Flechas ancladas a los laterales, a media altura de las tarjetas */
.carousel-controls {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.carousel.has-overflow .carousel-controls {
  display: flex;
}

.carousel-controls [data-carousel-prev] {
  transform: translateX(-50%);
}

.carousel-controls [data-carousel-next] {
  transform: translateX(50%);
}

/* A partir de cuatro eventos, JavaScript añade .has-overflow y muestra tres por vista. */
.carousel.has-overflow .carousel-track {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 1.75rem;
  overflow: hidden;
  scroll-behavior: smooth;
}

.carousel.has-overflow .event-card,
.carousel.has-overflow .testimonial-card {
  flex: 0 0 calc((100% - 3.5rem) / 3);
}

.carousel-button {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--olive);
  font-size: 1.1rem;
  cursor: pointer;
  pointer-events: auto;
  place-items: center;
  box-shadow: 0 12px 28px rgba(56, 40, 27, 0.16);
  transition: background 0.2s, color 0.2s, opacity 0.2s, border-color 0.2s;
}

.carousel-button:hover:not(:disabled) {
  background: var(--olive);
  border-color: var(--olive);
  color: white;
}

.carousel-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 10. Detalle y reservas */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

/* Texto largo y opcional del evento (columna "descripcion" de la hoja),
   escondido en un desplegable "Más información" para no alargar la
   página a quien solo quiere ver los datos básicos y reservar */
.detail-more {
  padding-top: 0;
}

.detail-more-toggle {
  max-width: 42rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}

.detail-more-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  color: var(--brown);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.4rem;
}

.detail-more-toggle summary::-webkit-details-marker {
  display: none;
}

.detail-more-toggle summary::after {
  flex: none;
  color: var(--gold);
  font-size: 1.7rem;
  line-height: 1;
  content: "+";
  transition: transform 0.2s ease;
}

.detail-more-toggle[open] summary::after {
  transform: rotate(45deg);
}

.detail-more-content {
  margin-top: 1.5rem;
}

.detail-more-content p {
  margin-top: 1.3rem;
  color: var(--ink);
  line-height: 1.85;
}

.detail-more-content p:first-child {
  margin-top: 0;
}

.detail-image {
  min-height: 34rem;
}

/* Ese alto mínimo es solo para cuando el evento no tiene foto (así el
   recuadro "Próximamente" no queda en tamaño cero); en cuanto hay una
   foto de verdad, el recuadro se ajusta a ella sin mínimos que dejen
   hueco por arriba o por abajo */
.detail-image.has-image {
  min-height: 0;
}

/* La foto grande del evento (y su galería) no se recorta a un marco de
   forma fija: el marco se ajusta a la forma real de cada foto, así una
   foto vertical no se queda pequeña con franjas de color a los lados */
.detail-image.has-image img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 40rem;
  min-height: 0;
}

.detail-image.gallery::before {
  display: none;
}

.gallery-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(0deg, rgba(26, 20, 16, 0.75) 0%, rgba(26, 20, 16, 0) 100%);
}

.gallery-arrow {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.35);
  color: #fff8ee;
  cursor: pointer;
  transition: background 0.25s ease;
}

.gallery-arrow:hover {
  background: rgba(26, 20, 16, 0.6);
}

.gallery-counter {
  color: #fff8ee;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.detail-image::before {
  width: 48%;
}

.detail-info {
  position: sticky;
  top: 8rem;
}

.detail-info h1 {
  margin-bottom: 1.6rem;
  color: var(--brown);
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  line-height: 1.08;
}

.description {
  line-height: 1.8;
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
  margin: 2rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fact {
  font-size: 0.92rem;
}

.fact small {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.booking {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: clamp(3rem, 10vw, 10rem);
  background: var(--cream);
}

.booking h2 {
  margin-bottom: 1.3rem;
}

.booking--completo {
  grid-template-columns: 1fr;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.booking--completo .lead {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Aviso de plazas, en la tarjeta y en la página del evento */
.plazas-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.plazas-badge--completo {
  background: rgba(68, 50, 41, 0.12);
  color: var(--muted);
}

.plazas-badge--pocas {
  background: rgba(161, 123, 44, 0.15);
  color: var(--gold);
}

.button--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.form {
  display: grid;
  gap: 1rem;
}

.form label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(68, 50, 41, 0.2);
  background: rgba(255, 253, 249, 0.72);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--gold);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(161, 123, 44, 0.12);
  background: white;
}

.form textarea {
  min-height: 7rem;
  resize: vertical;
}

.form-message {
  min-height: 1.5rem;
  color: var(--olive);
  font-size: 0.82rem;
}

/* 11. Contacto */
.contact {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  align-items: start;
  gap: clamp(3rem, 9vw, 9rem);
}

.contact-card {
  position: relative;
  padding: 2.4rem;
  overflow: hidden;
  background: var(--cream);
}

.contact-card::after {
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(75, 81, 48, 0.22);
  border-radius: 50%;
  content: "";
}

.contact-card h2 {
  margin-bottom: 1rem;
}

.contact-card a {
  color: var(--olive);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(75, 81, 48, 0.35);
  text-underline-offset: 3px;
}

/* 12. Enlaces de texto */
.text-link {
  display: inline-flex;
  gap: 0.45rem;
  margin-top: 1.3rem;
  color: var(--olive);
  font-size: 0.82rem;
  font-weight: 600;
}

.text-link::after {
  content: "→";
  transition: transform 0.2s;
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* Inicio: adelanto de las próximas fechas, con enlace a la página de Eventos */
.next-event {
  background: var(--cream);
}

.home-events-grid .event-card {
  flex: 1 1 20rem;
  max-width: 24rem;
}

/* Estado de carga / vacío mientras se leen los eventos desde la hoja de cálculo */
.events-loading,
.events-empty {
  grid-column: 1 / -1;
  padding: 2rem 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

/* 13. Pie de página */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.7rem 5vw;
  background: #2e2924;
  color: #f7f1e7;
  font-size: 0.8rem;
}

.footer-brand .brand-mark i {
  border-color: #d7c58b;
}

.social {
  display: flex;
  gap: 1.4rem;
}

.social a {
  color: #eadfce;
  transition: color 0.2s;
}

.social a:hover {
  color: var(--gold-light);
}

/* 14. Animaciones suaves */
.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Las fotografías se asientan lentamente cuando entran en pantalla */
.reveal.is-visible .has-image img,
.portrait-frame.reveal.is-visible img {
  animation: image-settle 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-content > * {
  animation: hero-in 0.8s both;
}

.hero-content .eyebrow {
  animation-delay: 0.1s;
}

.hero-content h1 {
  animation-delay: 0.2s;
}

.hero-content .hero-text {
  animation-delay: 0.35s;
}

.hero-content .button {
  animation-delay: 0.5s;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes orbit {
  50% {
    transform: translateY(-50%) scale(1.05) rotate(8deg);
  }
}

@keyframes image-settle {
  from {
    filter: saturate(0.72) contrast(0.92);
    transform: scale(1.1);
  }

  to {
    filter: saturate(1) contrast(1);
    transform: scale(1);
  }
}

/* Respeta a quien haya desactivado animaciones en su dispositivo */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 15. Diseño para tablet y móvil */
@media (max-width: 800px) {
  :root {
    --page-width: min(100%, calc(100% - 12vw));
    --header-height: 4.7rem;
  }

  .header {
    padding: 0 6vw;
  }

  .menu-toggle {
    display: block;
  }

  .navigation {
    position: fixed;
    inset: var(--header-height) 0 auto;
    display: grid;
    gap: 0.2rem;
    padding: 1.3rem 6vw 1.7rem;
    border-bottom: 1px solid var(--line);
    background: rgba(251, 248, 242, 0.98);
    box-shadow: 0 14px 25px rgba(52, 38, 28, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity 0.2s, transform 0.2s;
  }

  .navigation.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .navigation a:not(.nav-cta) {
    padding: 0.65rem 0;
  }

  .navigation a:not(.nav-cta)::after {
    display: none;
  }

  .nav-cta {
    width: max-content;
    margin-top: 0.5rem;
  }

  .hero {
    min-height: 42rem;
    padding: 5rem 6vw;
  }

  .hero::after {
    right: -8rem;
    width: 23rem;
  }

  /* En móvil la foto ocupa todo el hueco (en vez de verse pequeña con un
     recuadro suelto) y se oscurece de forma uniforme para que el texto
     se lea bien caiga donde caiga, no solo por la izquierda */
  .hero--photo::before {
    background:
      linear-gradient(180deg, rgba(20, 14, 10, 0.78) 0%, rgba(20, 14, 10, 0.5) 45%, rgba(20, 14, 10, 0.8) 100%),
      url("assets/Intro.png") center 22% / cover no-repeat;
  }

  .section {
    padding-right: 6vw;
    padding-left: 6vw;
  }

  .intro,
  .detail,
  .booking,
  .contact,
  .dimensions-statement,
  .intro--wide,
  .intro--contain {
    grid-template-columns: 1fr;
  }

  .intro {
    gap: 2.5rem;
  }

  /* El texto justificado deja huecos feos entre palabras cuando la
     columna es tan estrecha como en móvil, así que aquí se alinea
     a la izquierda en vez de justificarse */
  .intro--contain .copy p:not(.lead-italic) {
    text-align: left;
  }

  /* En móvil el bloque de texto se quedaba más estrecho que el ancho
     disponible (dejando un hueco vacío a la derecha, todo pegado a la
     izquierda); aquí ocupa todo el ancho de verdad */
  .intro > .copy {
    width: 100%;
    margin: 0;
  }

  .visual {
    min-height: 22rem;
  }

  .portrait-frame,
  .portrait-frame img {
    min-height: 25rem;
  }

  .detail-info {
    position: static;
  }

  .detail-image {
    min-height: 24rem;
  }

  .carousel.has-overflow .event-card,
  .carousel.has-overflow .testimonial-card {
    flex-basis: calc((100% - 1.75rem) / 2);
  }

  /* En móvil las flechas vuelven a ir debajo: más fáciles de tocar que flotando sobre las tarjetas */
  .carousel-controls {
    position: static;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .carousel-controls [data-carousel-prev],
  .carousel-controls [data-carousel-next] {
    transform: none;
  }

  .section-heading {
    display: grid;
    gap: 1.2rem;
  }

  .footer {
    flex-wrap: wrap;
    padding-right: 6vw;
    padding-left: 6vw;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(3.6rem, 18vw, 5.1rem);
  }

  .hero {
    min-height: 38rem;
  }

  .hero::after {
    opacity: 0.6;
  }

  .page-hero::after {
    right: -7rem;
  }

  .carousel.has-overflow .event-card,
  .carousel.has-overflow .testimonial-card {
    flex-basis: 100%;
  }

  .event-image {
    height: 14rem;
  }

  .detail-image.has-image img {
    max-height: 28rem;
    min-height: 0;
  }

  .facts {
    gap: 1rem;
  }

  .footer {
    display: grid;
  }

  .social {
    grid-row: 2;
  }
}

/* 16. Entrada de página y profundidad en la portada */
@keyframes page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Parallax suave: la foto de portada se mueve más despacio que el scroll (solo escritorio) */
@media (min-width: 801px) {
  .hero--photo::before {
    background-attachment: fixed;
  }
}

/* Indicador de scroll en la portada */
.scroll-cue {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
  color: #f4e8d9;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.85;
  transform: translateX(-50%);
  animation: hero-in 0.8s both;
  animation-delay: 0.7s;
}

.scroll-cue::after {
  width: 1px;
  height: 2.4rem;
  margin: 0 auto;
  background: linear-gradient(#f4e8d9, transparent);
  content: "";
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-move {
  0%,
  100% {
    transform-origin: top;
    transform: scaleY(0.4);
    opacity: 0.5;
  }

  50% {
    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (max-width: 800px) {
  .scroll-cue {
    display: none;
  }
}

/* 17. Los tres pilares */
.pillars {
  background: var(--paper);
}

.pillars-intro {
  max-width: 34rem;
  margin-bottom: 3.4rem;
}

.pillars-intro h2 {
  margin-bottom: 1.2rem;
}

.pillars-intro p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.85;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.pillar-card {
  position: relative;
  padding: 2.6rem 2.1rem;
  background: var(--cream);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pillar-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-6px);
}

.pillar-number {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.7rem;
  border: 1px solid var(--olive);
  border-radius: 50%;
  color: var(--olive);
  font: 1.05rem "DM Serif Display", Georgia, serif;
  place-items: center;
  transition: background 0.3s ease, color 0.3s ease;
}

.pillar-card:hover .pillar-number {
  background: var(--olive);
  color: white;
}

.pillar-card h3 {
  margin-bottom: 0.95rem;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
}

.pillar-card p {
  color: var(--muted);
  line-height: 1.8;
}

/* 17b. Las cuatro dimensiones */
.formacion-callout {
  max-width: 46rem;
  margin-bottom: 3.4rem;
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-left: 3px solid var(--gold);
}

.formacion-callout p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.8;
}

.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}

.dimension-detail {
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.dimension-detail p {
  margin-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.dimension-detail p:last-child {
  margin-bottom: 0;
}

.dimension-detail strong {
  color: var(--brown);
}

.integradora {
  background: var(--ink);
  text-align: center;
}

.integradora .eyebrow {
  justify-content: center;
  color: var(--gold-light);
}

.integradora h2 {
  max-width: 44rem;
  margin: 0 auto;
  color: var(--paper);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.3;
}

/* 18. Testimonios */
.testimonials {
  background: var(--cream);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.7rem 2.2rem 2.3rem;
  background: var(--paper);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.testimonial-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-6px);
}

.testimonial-mark {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--gold-light);
  font: italic 400 3.4rem/1 "DM Serif Display", Georgia, serif;
}

.testimonial-quote {
  margin-bottom: 1.7rem;
  color: var(--ink);
  font-size: 1.01rem;
  font-style: italic;
  line-height: 1.85;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.testimonial-author strong {
  font-size: 0.92rem;
  font-style: normal;
}

.testimonial-author span {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

/* 19. Preguntas frecuentes */
.faq {
  background: var(--paper);
}

.faq-list {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.faq-item {
  border: 1px solid var(--line);
  background: var(--cream);
  transition: border-color 0.25s ease;
}

.faq-item.is-open {
  border-color: var(--gold);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem 1.6rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 1rem "DM Sans", sans-serif;
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
}

.faq-icon::before,
.faq-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--olive);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.faq-icon::before {
  width: 1.1rem;
  height: 1.5px;
}

.faq-icon::after {
  width: 1.5px;
  height: 1.1rem;
}

.faq-item.is-open .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer p {
  padding: 0 1.6rem 1.55rem;
  color: var(--muted);
  line-height: 1.8;
}

/* 20. Newsletter */
.newsletter {
  position: relative;
  overflow: hidden;
  background: #533d31;
  color: #fff9ef;
  text-align: center;
}

.newsletter::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(221, 187, 112, 0.22) 0, transparent 32%),
    radial-gradient(circle at 84% 74%, rgba(221, 187, 112, 0.15) 0, transparent 30%);
  content: "";
}

.newsletter > * {
  position: relative;
  z-index: 1;
}

.newsletter .eyebrow {
  justify-content: center;
  color: #ead8af;
}

.newsletter h2 {
  max-width: 22ch;
  margin: 0 auto 1.1rem;
}

.newsletter p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0 auto 2.3rem;
  color: #f4e8d9;
  line-height: 1.8;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  max-width: 30rem;
  margin: 0 auto;
}

.newsletter-form .form-legal-note,
.newsletter-form .form-message {
  flex-basis: 100%;
  margin-top: 0;
}

.newsletter-form input {
  flex: 1;
  padding: 0.95rem 1.15rem;
  border: 1px solid rgba(255, 249, 239, 0.35);
  background: rgba(255, 249, 239, 0.08);
  color: #fff9ef;
  transition: border-color 0.2s, background 0.2s;
}

.newsletter-form input::placeholder {
  color: rgba(255, 249, 239, 0.55);
}

.newsletter-form input:focus {
  outline: 0;
  border-color: var(--gold-light);
  background: rgba(255, 249, 239, 0.14);
}

.newsletter-form .button {
  flex: 0 0 auto;
  border-color: var(--gold-light);
}

.newsletter .form-message {
  margin-top: 1.1rem;
  color: #ead8af;
}

.newsletter .form-legal-note {
  margin-top: 0.9rem;
  color: rgba(244, 232, 217, 0.75);
}

.newsletter .form-legal-note a {
  color: #ead8af;
}

/* 21. Ajustes responsive de las secciones nuevas */
@media (max-width: 800px) {
  .pillars-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

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

  .faq-question {
    padding: 1.2rem 1.3rem;
  }

  .faq-answer p {
    padding: 0 1.3rem 1.3rem;
  }
}

@media (max-width: 560px) {
  .newsletter-form {
    flex-direction: column;
  }

  .dimensions-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  .scroll-cue::after {
    animation: none;
  }
}