/* Hacienda El Salitre — hoja de estilos
   Paleta tomada de la propia hacienda: el verde de los eucaliptos,
   el amarillo de los muros de tapia y el oro de la marca. */

@font-face {
  font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/marcellus-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}

:root {
  --bosque: #17241c;
  --bosque-2: #223429;
  --eucalipto: #4f6657;
  --tapia: #e7c25d;
  --tapia-claro: #f3e2ab;
  --oro: #9c8347;
  --niebla: #f2f4ef;
  --blanco: #ffffff;
  --linea: rgba(23, 36, 28, 0.16);
  --linea-clara: rgba(255, 255, 255, 0.22);
  --wa: #1f7a45;
  --wa-oscuro: #17633a;

  --display: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 78rem;
  --margen: clamp(1.25rem, 4.5vw, 3.5rem);
  --aire: clamp(4rem, 9vw, 8rem);
  --cabecera: calc(clamp(9.5rem, 16vw, 13rem) * 0.2514 + 1.8rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--niebla);
  color: var(--bosque);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--oro); }

:focus-visible { outline: 3px solid var(--tapia); outline-offset: 3px; }
.sobre-claro :focus-visible, .ficha :focus-visible { outline-color: var(--bosque); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.9rem, 8.2vw, 6.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.caja { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--aire); }
.salto { position: absolute; left: -999rem; }
.salto:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--tapia); color: var(--bosque); padding: 0.75rem 1rem; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------ Cabecera */

.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--blanco);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.cabecera::before {
  content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 22, 16, 0.62), rgba(13, 22, 16, 0));
  transition: opacity 0.3s ease;
}
.cabecera--solida { background: var(--bosque); box-shadow: 0 1px 0 var(--linea-clara); }
.cabecera--solida::before { opacity: 0; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.9rem; }
.cabecera__marca img { width: clamp(9.5rem, 16vw, 13rem); }
.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.75rem); font-size: 0.98rem; }
.nav a { text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--tapia); }
.nav .boton { border-bottom: 0; }
.nav__abrir { display: none; }

@media (max-width: 68rem) {
  .nav__abrir {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: none; border: 1px solid var(--linea-clara); color: inherit;
    font: inherit; padding: 0.55rem 0.9rem; cursor: pointer;
  }
  .con-js .nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem;
    padding: 5.5rem var(--margen) 2rem;
    background: var(--bosque);
    font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.2rem);
    visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0.25s;
    overflow-y: auto;
  }
  .con-js .nav--abierta { visibility: visible; opacity: 1; }
  .con-js .nav .boton { font-family: var(--texto); font-size: 1.05rem; margin-top: 1.25rem; }
  html:not(.con-js) .cabecera { position: static; background: var(--bosque); }
  html:not(.con-js) .cabecera__fila { flex-wrap: wrap; }
  html:not(.con-js) .nav { flex-wrap: wrap; }
  html:not(.con-js) .nav__abrir { display: none; }
}

/* ------------------------------------------------ Botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.5rem; border: 1px solid transparent; border-radius: 2px;
  font: 600 1rem/1.1 var(--texto); text-decoration: none; cursor: pointer;
  background: var(--tapia); color: var(--bosque);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.boton:hover { background: var(--blanco); }
.boton--oscuro { background: var(--bosque); color: var(--blanco); }
.boton--oscuro:hover { background: var(--eucalipto); }
.boton--linea { background: transparent; color: inherit; border-color: currentColor; }
.boton--linea:hover { background: var(--blanco); color: var(--bosque); border-color: var(--blanco); }
.sobre-claro .boton--linea:hover, .ficha .boton--linea:hover { background: var(--bosque); color: var(--blanco); border-color: var(--bosque); }
.boton svg { width: 1.2rem; height: 1.2rem; margin-right: 0.55rem; flex: none; }
.boton--wa, .nav .boton--wa { background: var(--wa); color: var(--blanco); }
.boton--wa:hover, .nav .boton--wa:hover { background: var(--wa-oscuro); color: var(--blanco); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ------------------------------------------------ Portada */

.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 60rem);
  display: flex; align-items: flex-end;
  color: var(--blanco); background: var(--bosque);
}
.portada--interna { min-height: min(78svh, 46rem); }
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 22, 16, 0.9) 0%, rgba(13, 22, 16, 0.5) 38%, rgba(13, 22, 16, 0.05) 70%);
}
.portada__texto { padding-block: clamp(7rem, 16vh, 11rem) clamp(2.5rem, 7vh, 5rem); }
.portada h1 { max-width: 13ch; text-wrap: balance; }
.portada--interna h1 { font-size: clamp(2.6rem, 6.8vw, 5.2rem); max-width: 16ch; }
.portada__entrada { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45; max-width: 46ch; margin: 1.4rem 0 2rem; }
.migas { font-size: 0.95rem; margin-bottom: 1.25rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }

@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: asentar 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .portada__texto > * { animation: aparecer 0.9s ease both; }
  .portada__texto > *:nth-child(2) { animation-delay: 0.12s; }
  .portada__texto > *:nth-child(3) { animation-delay: 0.24s; }
  .portada__texto > *:nth-child(4) { animation-delay: 0.36s; }
}
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.portada__video.en-marcha { opacity: 1; }
.portada__pausa {
  position: absolute; top: calc(var(--cabecera) + 1rem); right: var(--margen); z-index: 1;
  background: rgba(13, 22, 16, 0.5); color: var(--blanco); border: 1px solid var(--linea-clara); border-radius: 999px;
  font: 600 0.88rem/1 var(--texto); padding: 0.6rem 0.95rem; cursor: pointer;
}
.portada__pausa:hover { background: var(--bosque); }
@keyframes asentar { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------ Definición y ficha */

.definicion { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr; }
.definicion__texto { font-size: clamp(1.3rem, 2.3vw, 1.95rem); line-height: 1.38; letter-spacing: -0.012em; max-width: 34ch; }
.definicion__foto { margin-bottom: 1.5rem; }
.definicion__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.definicion__apoyo { align-self: end; }
@media (min-width: 60rem) { .definicion { grid-template-columns: 1.35fr 1fr; } }

.ficha { background: var(--tapia); color: var(--bosque); }
.ficha__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ficha__cabeza p { max-width: 40ch; margin: 0; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); margin: 0; }
.datos > div { padding: 1.15rem 0 1.3rem; border-top: 1px solid rgba(23, 36, 28, 0.35); }
.datos dt { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; }
.datos dd { margin: 0; font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; letter-spacing: -0.01em; }
.datos dd small { display: block; font-weight: 400; font-size: 0.98rem; line-height: 1.45; letter-spacing: 0; margin-top: 0.35rem; }

/* ------------------------------------------------ Historia (arco) */

.oscura { background: var(--bosque); color: var(--blanco); }
.oscura a:hover { text-decoration-color: var(--tapia); }
.historia { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; grid-template-columns: 1fr; }
.historia__arco { max-width: 26rem; width: 100%; justify-self: center; }
.historia__arco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
.historia__arco figcaption { font-size: 0.92rem; margin-top: 0.9rem; opacity: 0.8; }
.historia h2 { margin-bottom: 1.5rem; max-width: 14ch; }
@media (min-width: 56rem) { .historia { grid-template-columns: minmax(16rem, 26rem) 1fr; } }
figure { margin: 0; }

/* ------------------------------------------------ Usos */

.cabeza-seccion { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2rem, 4.5vw, 4rem); }
.cabeza-seccion h2 { max-width: 18ch; }
@media (min-width: 56rem) { .cabeza-seccion { grid-template-columns: 1.1fr 1fr; align-items: end; } }

.usos { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
.uso { display: block; text-decoration: none; }
.uso__foto { overflow: hidden; background: var(--bosque-2); }
.uso__foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.uso:hover .uso__foto img { transform: scale(1.03); }
.uso h3 { margin: 1rem 0 0.35rem; }
.uso p { margin: 0; }
.uso span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 48rem) {
  .usos { grid-template-columns: repeat(6, 1fr); }
  .uso { grid-column: span 3; }
  .uso--grande { grid-column: span 6; display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
  .uso--grande .uso__foto img { aspect-ratio: 16 / 9; }
  .uso--grande h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top: 0; }
}
@media (min-width: 72rem) { .uso { grid-column: span 2; } .uso--grande { grid-column: span 6; } }

/* ------------------------------------------------ Tabla de espacios */

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
caption { text-align: left; font-size: 0.95rem; padding-bottom: 1rem; }
th, td { padding: 1.1rem 1.25rem 1.1rem 0; vertical-align: top; border-top: 1px solid var(--linea); }
thead th { font-size: 0.95rem; font-weight: 600; border-top: 0; padding-bottom: 0.7rem; white-space: nowrap; }
tbody th { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; min-width: 11rem; }
tbody th a { text-decoration-color: var(--oro); }
.cifra { font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.cifra small { font-weight: 400; font-size: 0.95rem; letter-spacing: 0; }
.oscura th, .oscura td { border-top-color: var(--linea-clara); }
.tabla-foto { width: 7.5rem; min-width: 7.5rem; }
.tabla-foto img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 44rem) {
  .tabla-envoltura { overflow: visible; }
  table, tbody, th, td, caption { display: block; }
  thead { position: absolute; left: -999rem; }
  tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--linea); }
  .oscura tbody tr { border-top-color: var(--linea-clara); }
  tbody th, tbody td { border: 0; padding: 0; min-width: 0; }
  tbody th { grid-column: 1; }
  tbody td { grid-column: 1 / -1; }
  tbody th + td { grid-column: 2; grid-row: 1; text-align: right; }
  tbody td[data-t]::before { content: attr(data-t) ": "; font-weight: 600; }
  .tabla-foto { display: none; }
}

/* ------------------------------------------------ Texto con foto */

.par { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: 1fr; }
.par h2 { margin-bottom: 1.25rem; max-width: 16ch; }
.par h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.par__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.par__foto--alta img { aspect-ratio: 4 / 5; }
@media (min-width: 56rem) {
  .par { grid-template-columns: 1fr 1fr; }
  .par--invertido .par__foto { order: 2; }
}
.lista { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lista li { padding: 0.8rem 0; border-top: 1px solid var(--linea); max-width: 68ch; }
.oscura .lista li { border-top-color: var(--linea-clara); }
.lista strong { font-weight: 600; }

.prosa h2 { margin: 2.6rem 0 1rem; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.prosa h3 { margin: 2rem 0 0.7rem; }
.prosa ul, .prosa ol { max-width: 68ch; padding-left: 1.2rem; margin: 0 0 1.1em; }
.prosa li { margin-bottom: 0.4rem; }
.prosa > :first-child { margin-top: 0; }
.estrecha { max-width: 46rem; }
.meta { font-size: 0.95rem; color: var(--eucalipto); margin-bottom: 2rem; }
.nota { background: var(--tapia-claro); padding: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.5rem; }
.nota h2, .nota h3 { margin: 0 0 0.8rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

/* ------------------------------------------------ Servicios (glifos de la marca) */

.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem 1rem; margin: 0; padding: 0; list-style: none; }
.servicios li { display: grid; gap: 0.6rem; justify-items: start; align-content: start; font-size: 1rem; line-height: 1.35; }
.servicios img { width: 4.25rem; height: 4.25rem; object-fit: contain; }
.servicios strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.25rem; }

/* ------------------------------------------------ Reseñas */

.resenas { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.resena { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.oscura .resena { border-top-color: var(--linea-clara); }
.resena p { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; }
.resena footer { font-size: 0.95rem; margin-top: 1rem; }

/* ------------------------------------------------ Preguntas */

.preguntas { border-bottom: 1px solid var(--linea); }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: 1.2rem 0; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.25;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--texto); font-size: 1.5rem; line-height: 1; flex: none; transition: transform 0.2s ease; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 1.4rem; }
.preguntas h3 { font: inherit; margin: 0; }
.preguntas details table { max-width: 46rem; }
.grupo-preguntas + .grupo-preguntas { margin-top: clamp(3rem, 6vw, 5rem); }
.grupo-preguntas > h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.25rem; }

/* ------------------------------------------------ Cómo llegar */

.plano img { width: 100%; background: var(--blanco); }
.plano figcaption { font-size: 0.92rem; margin-top: 0.8rem; }
.mapa { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; filter: saturate(0.85); }
address { font-style: normal; }

/* ------------------------------------------------ Contacto */

.contacto { display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: 1fr; }
.contacto h2 { margin-bottom: 1.25rem; max-width: 15ch; }
@media (min-width: 60rem) { .contacto { grid-template-columns: 1fr 1.15fr; } }
.vias { margin: 2rem 0 0; }
.vias > div { padding: 1rem 0; border-top: 1px solid var(--linea-clara); }
.sobre-claro .vias > div { border-top-color: var(--linea); }
.vias dt { font-size: 0.95rem; opacity: 0.85; margin-bottom: 0.2rem; }
.vias dd { margin: 0; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.45; }
.vias dd a { text-decoration: none; border-bottom: 1px solid var(--oro); }

.formulario { display: grid; gap: 1.1rem 1.25rem; grid-template-columns: 1fr 1fr; }
.campo { display: grid; gap: 0.35rem; }
.campo--ancho, .formulario__pie, .formulario__estado { grid-column: 1 / -1; }
.campo label { font-size: 0.95rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; color: var(--blanco);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linea-clara); border-radius: 2px;
  padding: 0.8rem 0.9rem;
}
.campo select option { color: var(--bosque); }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--tapia); outline: 2px solid var(--tapia); outline-offset: 0; }
.campo input[type="date"] { color-scheme: dark; }
.trampa { position: absolute; left: -999rem; }
.acepto { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.93rem; line-height: 1.45; }
.acepto input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; accent-color: var(--tapia); }
.formulario__pie { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 0.5rem; }
.formulario__aviso { font-size: 0.9rem; opacity: 0.8; grid-column: 1 / -1; margin: 0; }
.formulario__estado { min-height: 1.5rem; font-weight: 600; margin: 0; }
.formulario__estado[data-tipo="error"] { color: #ffc9b8; }
.formulario__estado[data-tipo="ok"] { color: var(--tapia); }
@media (max-width: 34rem) { .formulario { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Galería */

.galeria { columns: 3 18rem; column-gap: 0.9rem; }
.galeria a { display: block; margin-bottom: 0.9rem; break-inside: avoid; background: var(--bosque-2); }
.galeria img { width: 100%; }
.galeria a { cursor: zoom-in; }
.galeria-grupo { padding-block: clamp(3rem, 6vw, 5rem) 0; scroll-margin-top: 8rem; }
.galeria-grupo .cabeza-seccion { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.galeria-grupo + .banda { margin-top: var(--aire); }
.indice { position: sticky; top: var(--cabecera); z-index: 20; background: var(--niebla); border-bottom: 1px solid var(--linea); }
.indice .caja { display: flex; gap: 0.4rem 1.6rem; overflow-x: auto; padding-block: 0.95rem; white-space: nowrap; scrollbar-width: none; }
.indice .caja::-webkit-scrollbar { display: none; }
.indice a { text-decoration: none; font-weight: 600; font-size: 0.98rem; border-bottom: 1px solid transparent; }
.indice a:hover { border-bottom-color: var(--oro); }

/* Visor de fotos a pantalla completa (todas las fotos con data-ampliar) */
a[data-ampliar] { cursor: zoom-in; }
.visor { border: 0; padding: 0; background: rgba(13, 22, 16, 0.97); color: var(--blanco); width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; }
.visor::backdrop { background: rgba(13, 22, 16, 0.97); }
.visor[open] { display: grid; place-items: center; }
.visor figure { display: grid; justify-items: center; gap: 0.8rem; max-width: 94vw; }
.visor img { max-width: 94vw; max-height: 78dvh; object-fit: contain; }
.visor figcaption { text-align: center; max-width: 70ch; padding-inline: 1rem; font-size: 0.98rem; }
.visor__cerrar { position: absolute; top: 1rem; right: 1rem; }
.visor__cuenta { position: absolute; top: 1.4rem; left: 1.25rem; margin: 0; font-size: 0.95rem; font-weight: 600; }
.visor__ir {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; border-radius: 999px;
  border: 1px solid var(--linea-clara); background: rgba(13, 22, 16, 0.55); color: var(--blanco); cursor: pointer; display: grid; place-items: center;
}
.visor__ir svg { width: 1.4rem; height: 1.4rem; }
.visor__ir--antes { left: clamp(0.5rem, 2vw, 1.5rem); }
.visor__ir--despues { right: clamp(0.5rem, 2vw, 1.5rem); }
.visor__ir:hover { background: var(--tapia); color: var(--bosque); border-color: var(--tapia); }
.visor[data-unica] .visor__ir, .visor[data-unica] .visor__cuenta { display: none; }

/* ------------------------------------------------ Carrete: tira de fotos que se recorre de lado */

.seccion--carrete { overflow: hidden; }
.seccion--carrete .cabeza-seccion { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.carrete { --alto: clamp(17rem, 58vh, 34rem); --borde: max(var(--margen), calc((100vw - var(--ancho)) / 2)); }
.carrete__pista {
  display: flex; gap: clamp(0.6rem, 1.2vw, 1rem); overflow-x: auto; scroll-snap-type: x proximity;
  padding-inline: var(--borde); scroll-padding-inline: var(--borde); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carrete__pista::-webkit-scrollbar { display: none; }
.carrete__pieza { flex: none; width: min(calc(var(--alto) * var(--r)), 80vw); scroll-snap-align: start; }
@media (max-width: 48rem) {
  .carrete { --alto: clamp(15rem, 70vw, 22rem); }
  .carrete__pieza { width: min(calc(var(--alto) * var(--r)), 170vw); }
}
.carrete__pieza a { display: block; height: var(--alto); overflow: hidden; background: var(--bosque-2); }
.carrete__pieza img { width: 100%; height: 100%; object-fit: cover; }
.carrete__pieza figcaption { margin-top: 0.85rem; font-size: 0.98rem; line-height: 1.4; max-width: 32ch; }
.carrete__pieza figcaption strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.15rem; }
.carrete__botones { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; }
.carrete__botones button {
  width: 3rem; height: 3rem; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit;
  cursor: pointer; display: grid; place-items: center; transition: background-color 0.2s ease, color 0.2s ease;
}
.carrete__botones svg { width: 1.3rem; height: 1.3rem; }
.carrete__botones button:hover:not(:disabled) { background: var(--bosque); color: var(--blanco); border-color: var(--bosque); }
.carrete__botones button:disabled { opacity: 0.3; cursor: default; }
html:not(.con-js) .carrete__botones { display: none; }

/* ------------------------------------------------ Mosaico de fotos */

.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(8.5rem, 42vw, 14rem); grid-auto-flow: dense; gap: clamp(0.45rem, 0.9vw, 0.8rem); }
.mosaico__pieza { display: block; overflow: hidden; background: var(--bosque-2); }
.mosaico__pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mosaico__pieza:hover img { transform: scale(1.03); }
.mosaico__pieza--alta { grid-row: span 2; }
.mosaico__pieza--ancha, .mosaico__pieza--grande { grid-column: span 2; }
.mosaico__pieza--grande { grid-row: span 2; }
@media (min-width: 56rem) { .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(11rem, 19vw, 17rem); } }

/* ------------------------------------------------ Banda: una foto a todo el ancho */

.banda a { display: block; }
.banda img { width: 100%; height: clamp(13rem, 32vw, 30rem); object-fit: cover; }

/* ------------------------------------------------ Escenarios (tarjetas con foto) */

.escenarios { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: 1fr; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.escenario { position: relative; display: block; isolation: isolate; overflow: hidden; color: var(--blanco); text-decoration: none; background: var(--bosque); min-height: 21rem; }
.escenario__foto { position: absolute; inset: 0; z-index: -2; }
.escenario__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
a.escenario:hover .escenario__foto img { transform: scale(1.03); }
.escenario::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 22, 16, 0.9), rgba(13, 22, 16, 0) 55%), linear-gradient(to bottom, rgba(13, 22, 16, 0.6), rgba(13, 22, 16, 0) 38%);
}
.escenario__texto { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: grid; gap: 0.25rem; }
.escenario__texto strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
.escenario__cifra { position: absolute; top: 1.1rem; left: 1.25rem; font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 3.1rem); line-height: 1; letter-spacing: -0.02em; }
.escenario__cifra small { display: block; font-size: 0.95rem; font-weight: 400; letter-spacing: 0; margin-top: 0.35rem; }
.escenario__cifra--texto { font-size: 0.95rem; letter-spacing: 0; padding: 0.4rem 0.75rem; border: 1px solid var(--linea-clara); border-radius: 999px; }
@media (min-width: 48rem) {
  .escenarios { grid-template-columns: repeat(6, 1fr); }
  .escenario { grid-column: span 2; aspect-ratio: 3 / 4; min-height: 0; }
  .escenario--ancho { grid-column: span 3; aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------ Videos (el reproductor se carga al pulsar) */

.videos { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.video__marco { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video__marco img { width: 100%; height: 100%; object-fit: cover; }
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__boton { position: absolute; left: 1rem; bottom: 1rem; width: 3.4rem; height: 3.4rem; border-radius: 999px; background: var(--tapia); display: grid; place-items: center; transition: transform 0.2s ease; }
.video__boton::before { content: ""; border-style: solid; border-width: 0.6rem 0 0.6rem 1rem; border-color: transparent transparent transparent var(--bosque); margin-left: 0.2rem; }
.video__marco:hover .video__boton { transform: scale(1.08); }
.video figcaption { margin-top: 0.75rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.video figcaption strong { font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.25; }
.video figcaption span { font-size: 0.92rem; white-space: nowrap; }

/* ------------------------------------------------ Logos y ornamento */

.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.logos li { background: var(--blanco); display: grid; place-items: center; padding: 1.4rem 1.25rem; aspect-ratio: 3 / 2; }
.logos img { max-height: 4.2rem; width: auto; max-width: 100%; object-fit: contain; }
.ornamento { width: 5.5rem; margin-bottom: 1.6rem; }

/* ------------------------------------------------ Blog */

.articulos { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.articulo-tarjeta { text-decoration: none; display: block; }
.articulo-tarjeta img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.articulo-tarjeta h2, .articulo-tarjeta h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.2; margin: 1rem 0 0.5rem; }
.articulo-tarjeta p { margin: 0; }

/* ------------------------------------------------ Franja final y pie */

.franja { background: var(--tapia); color: var(--bosque); }
.franja__fila { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: end; justify-content: space-between; }
.franja h2 { max-width: 18ch; }

.pie { background: var(--bosque); color: var(--blanco); padding-block: clamp(3rem, 6vw, 5rem) 6.5rem; font-size: 0.98rem; }
.pie__rejilla { display: grid; gap: 2.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
@media (min-width: 64rem) { .pie__rejilla { grid-template-columns: 1.7fr repeat(4, 1fr); } }
.pie address a[href^="tel:"] { white-space: nowrap; }
.pie img { width: 9.5rem; margin-bottom: 1.5rem; }
.pie h2 { font-family: var(--texto); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.8rem; letter-spacing: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pie a { text-decoration: none; border-bottom: 1px solid transparent; }
.pie a:hover { border-bottom-color: var(--tapia); }
.pie__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-clara); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; opacity: 0.85; }

/* Contacto permanente: botón flotante en escritorio, barra fija en móvil */
.fijo { position: fixed; right: clamp(0.9rem, 2.5vw, 1.75rem); bottom: clamp(0.9rem, 2.5vw, 1.75rem); z-index: 60; display: flex; gap: 0.5rem; }
.fijo a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  text-decoration: none; font-weight: 600; padding: 0.9rem 1.3rem; border-radius: 999px;
  box-shadow: 0 0.5rem 1.5rem rgba(13, 22, 16, 0.3);
}
.fijo__wa { background: var(--wa); color: var(--blanco); }
.fijo__wa:hover { background: var(--wa-oscuro); }
.fijo__wa svg { width: 1.35rem; height: 1.35rem; flex: none; }
.fijo__tel { display: none !important; }
@media (max-width: 40rem) {
  body { padding-bottom: 4.5rem; }
  .portada { min-height: calc(min(100svh, 60rem) - 4.5rem); }
  .portada--interna { min-height: calc(min(78svh, 46rem) - 2rem); }
  .fijo {
    left: 0; right: 0; bottom: 0; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--bosque); box-shadow: 0 -1px 0 var(--linea-clara);
  }
  .fijo a { box-shadow: none; border-radius: 2px; padding: 0.85rem 1rem; }
  .fijo__wa { flex: 1; }
  .fijo__tel { display: inline-flex !important; color: var(--blanco); border: 1px solid var(--linea-clara); }
  .pie { padding-bottom: 3rem; }
}

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

@media print {
  .cabecera, .fijo, .formulario, .nav__abrir, .carrete__botones, .portada__pausa, .indice { display: none !important; }
  .portada { min-height: 0; color: #000; background: none; }
  .portada::after, .portada__foto { display: none; }
}