/* Secciones propias del sitio definitivo: los momentos de la noche, la parte
   corporativa, el formulario público de reseñas y el pie con la columna legal.
   Usa las mismas variables de color y tipografía que el resto del sitio. */

/* Enlace para saltar al contenido: aparece solo al llegar con el teclado. */
.salto:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto;
  clip: auto; padding: .7rem 1.1rem; border-radius: 10px; background: var(--acento); color: var(--sobre-acento);
  font-weight: 700;
}

/* ---------- La noche con Daap: un servicio para cada momento ---------- */
.momentos { counter-reset: momento; display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: var(--radio-caja); overflow: hidden; }
.momento { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: clamp(1.3rem, 3vw, 2rem); background: var(--bg); opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.momento.visible { opacity: 1; transform: none; }
.momento-n { font: 700 clamp(1.6rem, 4vw, 2.6rem)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--cian); text-shadow: 0 0 18px rgba(0, 240, 255, .35); }
.momento h3 { margin: 0 0 .3rem; font-size: clamp(1.2rem, 3vw, 1.8rem); text-transform: uppercase; letter-spacing: -.01em; }
.momento p { margin: 0; color: var(--muted); }
.momento:hover .momento-n { -webkit-text-stroke-color: var(--rosa); text-shadow: 0 0 22px rgba(255, 43, 214, .45); }

.lema-noche { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; font: 700 clamp(1.1rem, 2.6vw, 1.7rem)/1.3 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.lema-noche em { font-style: normal; color: #fff; text-shadow: 0 0 6px var(--rosa), 0 0 18px var(--rosa); }

/* ---------- Eventos corporativos ---------- */
.corp-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.corp-in p { color: var(--muted); }
.corp-lema { margin-bottom: 1.6rem; color: var(--text) !important; font-weight: 600; }
.corp-grito { margin: 0; font: 700 clamp(1.4rem, 3.4vw, 2.6rem)/1.15 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
@media (max-width: 860px) { .corp-in { grid-template-columns: 1fr; } }

.cinta-logos { margin-top: clamp(2.5rem, 6vw, 4rem); background: var(--surf-2); }
.cinta-logos-in span { display: grid; place-items: center; padding: 1.1rem 2.2rem; }
.cinta-logos-in span::after { content: none; }
.cinta-logos-in img { width: auto; height: 46px; object-fit: contain; filter: grayscale(1) brightness(1.7); opacity: .75; transition: filter .3s, opacity .3s; }
.cinta-logos-in img:hover { filter: none; opacity: 1; }

/* ---------- Dejar una reseña ---------- */
.dejar-resena { margin-top: clamp(2rem, 5vw, 3rem); padding: clamp(1.4rem, 3.5vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radio-caja); background: var(--surf); }
.dejar-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.dejar-cab h3 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.7rem); text-transform: uppercase; }
.dejar-cab p { margin: .2rem 0 0; flex: 1 1 22rem; }
.form-resena { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: grid; gap: 1rem; }
.form-resena textarea { width: 100%; padding: .8rem 1rem; border-radius: var(--radio); border: 1px solid var(--line); background: var(--campo); color: var(--text); resize: vertical; }
.form-resena button[type="submit"] { justify-self: start; }

/* Campo trampa: invisible para las personas, tentador para los bots. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-privacidad { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.form-privacidad a { color: var(--cian); }

/* ---------- Pie ---------- */
.pie-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.pie-marca p { margin: .8rem 0; color: var(--muted); max-width: 30ch; }
.pie-col h2 { margin: 0 0 .8rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cian); }
.pie-col nav, .pie-marca nav { display: grid; gap: .5rem; }
.pie-col a, .pie-marca nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.pie-col a:hover, .pie-marca nav a:hover { color: var(--text); text-decoration: underline; }
.pie-legal { margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; padding: 1.2rem clamp(16px, 4vw, 40px) 0; max-width: 1240px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pie-in { grid-template-columns: 1fr; } }

/* El menú del celular usa los enlaces grandes de la propuesta 2, pero el botón
   de WhatsApp debe verse como botón: sin esto hereda el tamaño del titular y
   el texto se sale de la pantalla. */
@media (max-width: 1040px) {
  .menu-movil > a.btn {
    justify-content: center; margin-top: 1.4rem; padding: .9rem 1.2rem; border-bottom: 0;
    font: 600 1rem/1.2 var(--body); text-transform: none; letter-spacing: normal; text-align: center;
  }
}

/* Página de error: centrada en la pantalla. */
.pagina-404 { min-height: 70vh; display: grid; align-content: center; }

/* Al saltar desde el menú, la sección tiene que quedar bajo la cabecera fija.
   En celular la cabecera es más alta que el espacio que reserva el CSS base. */
@media (max-width: 1040px) {
  html { scroll-padding-top: 118px; }
}

/* Reseña: elegir varios servicios y la pregunta de verificación. */
.elegir-varios { border: 0; margin: 0; padding: 0; }
.elegir-varios legend { padding: 0; margin-bottom: .6rem; }
.form-resena .elegir-servicios { display: flex; flex-wrap: wrap; gap: .5rem; }
.campo-corto { max-width: 22rem; }
.campo-corto input { width: 100%; }

/* Si el navegador no deja reproducir el video de fondo (iPhone con ahorro de
   batería), se esconde y queda su imagen de portada: la sección se ve igual y
   sin el triángulo de "reproducir" que dibuja Safari sobre un video detenido. */
.con-portada { background-image: var(--portada); background-size: cover; background-position: center; background-color: #07060B; }
.video-fondo.sin-reproduccion, .ficha-video.sin-reproduccion { opacity: 0; }
/* La foto se cambia por el video con una transición corta, sin parpadeo. */
.video-fondo, .ficha-video { transition: opacity .4s ease; }