:root {
  --ink: #201d22;
  --ink-2: #2b262d;
  --ink-soft: rgba(255, 255, 255, 0.06);
  --ink-line: rgba(255, 255, 255, 0.1);
  --coral: #ff6a4d;
  --coral-dark: #e5522f;
  --coral-glow: rgba(255, 106, 77, 0.35);
  --lime: #cbe86b;
  --cream: #faf3ea;
  --card: #ffffff;
  --muted: #8c8890;
  --text: #29262b;
  --radius: 1rem;
  --radius-lg: 1.6rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Inter", Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.script {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
}

p {
  margin: 0 0 1rem;
}

.eyebrow, .hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--coral-dark);
  margin-bottom: 0.7rem;
}

/* Reveal-on-scroll (progressive enhancement; content is visible with no JS) */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

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

.js .reveal-group .reveal:nth-child(1) { transition-delay: 0.05s; }
.js .reveal-group .reveal:nth-child(2) { transition-delay: 0.15s; }
.js .reveal-group .reveal:nth-child(3) { transition-delay: 0.25s; }
.js .reveal-group .reveal:nth-child(4) { transition-delay: 0.35s; }
.js .reveal-group .reveal:nth-child(5) { transition-delay: 0.45s; }
.js .reveal-group .reveal:nth-child(6) { transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .hero-image, .float-blob { animation: none !important; }
  #hero-visual-frame.has-carousel .hero-slide, .hero-dot::before { transition: none; }
}

/* Grain texture for dark sections */

.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sticky nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(32, 29, 34, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-line);
}

.site-nav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cream);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.site-nav-brand img {
  width: 40px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.site-nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-links a {
  color: #d8d3cf;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color 0.15s ease;
}

.site-nav-links a:hover {
  color: var(--lime);
}

.site-nav-cta {
  display: inline-block;
  background: var(--coral);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.site-nav-cta:hover {
  background: #ff8465;
  transform: translateY(-1px);
}

@media (max-width: 700px) {
  .site-nav-links { display: none; }
}

/* Hero */

.hero {
  background: var(--ink);
  color: var(--cream);
  padding: 3.5rem 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -140px;
  width: 340px;
  height: 340px;
  background: var(--lime);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.16;
  pointer-events: none;
}

.hero-grid {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  color: var(--lime);
}

.hero h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.1rem);
  color: var(--cream);
  line-height: 1.05;
}

.hero-tagline {
  font-size: 1.12rem;
  color: #d8d3cf;
  max-width: 460px;
  margin: 0 0 1.7rem;
}

.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: #201d22;
  font-weight: 700;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 16px 30px -14px var(--coral-glow);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button-primary:hover {
  background: #ff8465;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -14px var(--coral-glow);
}

.button-primary-light {
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
}

.button-primary-light:hover {
  background: #fff;
}

.button-primary svg {
  width: 18px;
  height: 18px;
}

/* Hero visual */

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

.hero-visual-frame {
  position: relative;
  width: min(100%, 380px);
}

.float-blob {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at 50% 45%, var(--coral) 0%, transparent 62%);
  opacity: 0.4;
  filter: blur(30px);
  animation: pulse 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.06); opacity: 0.55; }
}

.hero-image {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  animation: floaty 6s ease-in-out infinite;
}

.hero-image-logo {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
  opacity: 1;
  transition: opacity 1.4s ease;
}

/* Fotos reales de Carlos superpuestas al logo, en el mismo hueco — el
   carrusel de JS (ver el script al final del body) va mostrando una cada
   pocos segundos. Sin JS se queda siempre el logo, quieto. */
.hero-image-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* La segunda foto es de la barra «Dos 5 Tröika»: se recorta a un
   cuadrado desde Carlos hacia el letrero, no por el centro exacto. */
.hero-image-photo-2 {
  object-position: 50% 52%;
}

/* Carrusel: con JS activo solo se ve la diapositiva marcada .is-active. */
#hero-visual-frame.has-carousel .hero-slide {
  opacity: 0;
  transition: opacity 1.4s ease;
}

#hero-visual-frame.has-carousel .hero-slide.is-active {
  opacity: 1;
}

.hero-dots {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
}

.hero-dot {
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-dot:hover::before { border-color: var(--coral); }

.hero-dot.is-active::before {
  background: var(--coral);
  border-color: var(--coral);
  transform: translate(-50%, -50%) scale(1.25);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 50%;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding-bottom: 2rem;
  }

  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-tagline, .hero-note { max-width: 460px; }
  .hero-visual { order: -1; margin-bottom: 0.5rem; }
  .hero-visual-frame { width: min(72%, 300px); }
}

/* Marquee */

.marquee {
  background: var(--ink-2);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  padding: 0.85rem 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: scroll-left 78s linear infinite;
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track span {
  color: #cfc9c3;
  font-family: "Bricolage Grotesque", "Inter", Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}

.marquee-track span.dot {
  color: var(--coral);
  font-style: normal;
}

/* Sections */

.section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.section-alt {
  background: #f2e9dd;
  max-width: none;
}

.section-alt > * {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* Sección Servicios con vídeo de fondo (toma aérea de San Salvador): se
   vuelve full-bleed como Contacto, con sus hijos recentrados a 1040px. */
#servicios {
  max-width: none;
  position: relative;
  overflow: hidden;
}

#servicios > * {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* El fondo claro de .section se queda como base: si el vídeo no carga (o
   no se pide, ver el script al final del body) se ve igual que antes.
   Selector con #servicios > para pesar más que la regla "#servicios > *"
   de arriba (que si no, le seguiría metiendo max-width:1040px). */
#servicios > .services-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

/* Capa oscura encima del vídeo para que el eyebrow/título/nota sigan legibles. */
#servicios > .services-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none;
  margin: 0;
  background: rgba(20, 16, 14, 0.6);
}

#servicios > .eyebrow,
#servicios > h2,
#servicios > .cards,
#servicios > .eyebrow {
  color: var(--lime);
}

#servicios > h2 {
  color: var(--cream);
}

.section h2 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  max-width: 640px;
}

.about-text {
  max-width: 560px;
  color: #4a454b;
}

/* Split layout (quien-es) */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.split-media {
  position: relative;
}

.split-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 50px -22px rgba(32, 29, 34, 0.4);
}

/* El vídeo va encima de la foto, en el mismo hueco — la foto es la base
   de siempre (se queda así sin JS, con "reducir movimiento", o mientras
   el vídeo carga), y el vídeo solo se hace visible si de verdad llega a
   reproducirse. */
.split-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.split-video.is-playing {
  opacity: 1;
}

.media-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: linear-gradient(155deg, #2b262d 0%, #201d22 55%, #3a2620 100%);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #d8d3cf;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

.media-placeholder svg {
  width: 30px;
  height: 30px;
  opacity: 0.7;
  color: var(--coral);
}

.feature-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: #4a454b;
}

.feature-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--coral);
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split-media { order: -1; max-width: 420px; margin: 0 auto; }
}

/* Statement / pull quote */

.statement {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Vídeo de fondo (Carlos capando un trago arcoíris): el fondo --ink de
   arriba se queda como base, así que si el vídeo no carga (o no se
   pide, ver el script al final del body) se ve ese fondo igual que
   antes. Solo se reproduce un tramo de 9s del vídeo (del segundo 5 al
   14, la parte más vistosa) en bucle, controlado por JS — no hay forma
   de recortar el archivo en sí aquí, así que se consigue el mismo
   efecto reproduciendo solo ese tramo una y otra vez. */
.statement-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(32, 29, 34, 0.74);
}

.statement::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--lime) 0%, transparent 65%);
  opacity: 0.12;
  filter: blur(20px);
  pointer-events: none;
}

.statement-text {
  position: relative;
  z-index: 2;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  color: var(--cream);
  max-width: 720px;
  margin: 0 auto 0.8rem;
  line-height: 1.25;
}

.statement-text .accent {
  color: var(--lime);
}

.statement-sub {
  position: relative;
  z-index: 2;
  color: #a9a4a0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
}

/* Gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.gallery-item {
  grid-column: span 2;
  grid-row: span 1;
}

.gallery-item.is-large {
  grid-column: span 4;
  grid-row: span 2;
}

.gallery-item.is-tall {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-placeholder {
  height: 100%;
  width: 100%;
  background: linear-gradient(155deg, #2b262d 0%, #201d22 55%, #3a2620 100%);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #d8d3cf;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.gallery-photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.gallery-item:hover .gallery-photo {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 34px -18px rgba(32, 29, 34, 0.5);
}

/* Vídeo de la galería CON sonido: a diferencia de los vídeos de fondo
   del resto del sitio, este no se reproduce solo — hace falta que el
   visitante le dé al play, porque los navegadores no dejan reproducir
   sonido sin que la persona interactúe primero (y tampoco lo
   queríamos poner a sonar solo). El botón desaparece en cuanto empieza
   a reproducirse. */
.gallery-video-frame {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.gallery-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gallery-video-play:hover {
  background: rgba(0, 0, 0, 0.3);
}

.gallery-video-play svg {
  width: 56px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.gallery-video-play:hover svg {
  transform: scale(1.08);
}

.gallery-video-frame.is-playing .gallery-video-play {
  display: none;
}

.gallery-placeholder svg {
  width: 22px;
  height: 22px;
  opacity: 0.7;
  color: var(--coral);
}

.gallery-placeholder:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 34px -18px rgba(32, 29, 34, 0.5);
}

.gallery-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1.4rem;
}

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .gallery-item, .gallery-item.is-large, .gallery-item.is-tall {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Cards / servicios */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid #ece3d4;
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem 1.5rem;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--coral);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 36px -22px rgba(32, 29, 34, 0.35);
  border-color: transparent;
}

.card:hover::before {
  transform: scaleY(1);
}

.card-index {
  display: block;
  font-family: "Bricolage Grotesque", "Inter", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--coral-dark);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.card h3 {
  font-size: 1.15rem;
  color: var(--ink);
}

.card p {
  font-size: 0.92rem;
  color: #55555c;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
}

/* Cócteles */

.cocktail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.8rem;
}

.cocktail-card {
  position: relative;
  background: var(--card);
  border: 1px solid #ece3d4;
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s ease;
}

.cocktail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 36px -22px rgba(32, 29, 34, 0.35);
  border-color: transparent;
}

.cocktail-icon {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--coral-dark);
  margin-bottom: 0.9rem;
}

.cocktail-card h3 {
  font-size: 1.1rem;
  color: var(--ink);
}

.cocktail-card p {
  font-size: 0.9rem;
  color: #55555c;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
}

.cocktail-card.has-photo {
  padding: 0;
  display: block;
}

.cocktail-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.cocktail-card.has-photo:hover .cocktail-photo {
  transform: scale(1.04);
}

.cocktail-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 14, 0) 45%, rgba(20, 16, 14, 0.85) 100%);
}

.cocktail-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.4rem 1.3rem;
}

.cocktail-card-info h3 {
  color: var(--cream);
  margin-bottom: 0.4rem;
}

.cocktail-card-info p {
  color: rgba(250, 243, 234, 0.88);
}

@media (max-width: 700px) {
  .cocktail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

/* Contact */

.section-contact {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  max-width: none;
  padding: 5.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Vídeo de fondo (botella de vino sirviéndose): el color de fondo de
   arriba (--ink) se queda como base, así que si el vídeo no carga (o no
   se pide, ver el script al final del body) se ve ese fondo igual que
   antes. */
.contact-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa oscura encima del vídeo para que el texto siga siendo legible. */
.contact-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(32, 29, 34, 0.72);
}

.section-contact::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, var(--coral) 0%, transparent 65%);
  opacity: 0.28;
  filter: blur(20px);
  pointer-events: none;
}

.section-contact h2 {
  color: var(--lime);
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.section-contact p {
  color: #d8d3cf;
  position: relative;
  z-index: 2;
}

.section-contact .button-primary {
  position: relative;
  z-index: 2;
}

/* Footer */

.footer {
  text-align: center;
  padding: 1.8rem 1.5rem 2.2rem;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
}

/* WhatsApp floating button */

.whatsapp-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #25d366;
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}

.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.03);
}

.whatsapp-float svg {
  width: 22px;
  height: 22px;
}

/* Mobile */

@media (max-width: 700px) {
  .hero h1 {
    font-size: 2.1rem;
  }

  .hero {
    padding-top: 2.2rem;
  }

  .hero-visual-frame {
    width: min(52%, 220px);
  }

  .section {
    padding: 3.5rem 1.5rem;
  }

  .statement {
    padding: 3.5rem 1.5rem;
  }
}

/* Formulario de contacto */

.contact-form {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1.6rem;
  text-align: left;
  background: rgba(32, 29, 34, 0.82);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}

.contact-form .campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cream);
}

.contact-form .campo-ancho { grid-column: 1 / -1; }

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form input[type="date"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.7rem;
  padding: 0.7rem 0.85rem;
  color-scheme: dark;
}

.contact-form select option { color: #201d22; background: #fff; }
.contact-form textarea { resize: vertical; min-height: 6rem; }

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(250, 243, 234, 0.45); }

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  border-color: var(--coral);
}

/* Campo trampa para robots: fuera de pantalla, no escondido con display:none */
.form-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form .campo-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.1rem 0 1.2rem;
  font-size: 0.85rem;
  color: #d8d3cf;
}

.contact-form .campo-check input { margin-top: 0.2rem; accent-color: var(--coral); width: 1.05rem; height: 1.05rem; }
.contact-form .campo-check a { color: var(--lime); }

.contact-form .button-primary { border: 0; cursor: pointer; font: inherit; font-weight: 700; width: 100%; justify-content: center; }
.contact-form .button-primary:disabled { opacity: 0.6; cursor: progress; transform: none; }

.form-estado { margin: 0.9rem 0 0; min-height: 1.3em; font-size: 0.92rem; text-align: center; }
.form-estado.es-ok { color: var(--lime); }
.form-estado.es-error { color: #ffb4a3; }

.section-contact .contact-o { margin: 1.8rem 0 0.9rem; }
.section-contact .contact-correo { margin: 1.2rem 0 0; font-size: 0.92rem; }
.section-contact .contact-correo a { color: var(--lime); }

.footer-marca { margin-top: 0.3rem; }
.footer-marca a { color: inherit; }

@media (max-width: 640px) {
  .contact-form { padding: 1.2rem; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Páginas de texto (privacidad, 404) */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 7rem 1.5rem 4rem;
}

.legal h1 { margin: 0.4rem 0 0.6rem; }
.legal h2 { font-size: 1.15rem; margin: 2rem 0 0.4rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 1.2rem; }
.legal a:not(.button-primary) { color: var(--coral-dark); }
.legal-fecha { color: var(--muted); font-size: 0.9rem; }
.not-found { text-align: center; padding-top: 9rem; }