/* =================================================================
   Piano 77 — centro de eventos
   Misma paleta que la tienda de Piano Gourmet (negro, acento blanco)
   para que se lean como la misma marca, pero con tipografía display
   con serifas: un recinto de eventos se vende con otra voz que un
   market, y la serif es lo que hace esa diferencia sin cambiar color.
   ================================================================= */

:root {
    --bg: #0a0a0a;
    --bg-alt: #101010;
    --card: #161616;
    --card-hover: #1c1c1c;
    --line: rgba(255, 255, 255, 0.09);
    --line-fuerte: rgba(255, 255, 255, 0.18);
    --texto: #ffffff;
    --texto-2: #a8a8a8;
    --texto-3: #6f6f6f;
    --claro: #ffffff;
    --claro-tinta: #0a0a0a;
    --error: #ff6b5a;
    --radio: 14px;
    --maxw: 1200px;
    --display: 'Cormorant Garamond', Georgia, serif;
    --cuerpo: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: var(--cuerpo);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

p { margin: 0 0 1rem; color: var(--texto-2); }
.bajada { font-size: 1.08rem; max-width: 58ch; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.antetitulo {
    display: block; text-transform: uppercase; letter-spacing: 0.2em;
    font-size: 0.7rem; font-weight: 600; color: var(--texto-3); margin-bottom: 14px;
}
.texto-centrado { text-align: center; }
.centrado { justify-content: center; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--cuerpo); font-weight: 600; font-size: 0.94rem;
    border: 1px solid transparent; border-radius: 999px; padding: 12px 26px;
    cursor: pointer; transition: background .15s, border-color .15s, transform .12s;
    white-space: nowrap;
}
.btn-claro { background: var(--claro); color: var(--claro-tinta); }
.btn-claro:hover { background: #e4e4e4; transform: translateY(-1px); }
.btn-fantasma { border-color: var(--line-fuerte); color: var(--texto); }
.btn-fantasma:hover { border-color: var(--texto-2); background: rgba(255, 255, 255, 0.05); }
.btn-grande { padding: 15px 32px; font-size: 1rem; }
.btn-bloque { width: 100%; }

/* ---------- Marco de foto ----------
   Toda imagen vive acá dentro. El marco tiene fondo y un ícono tenue, así que
   cuando la foto todavía no existe en Cloudinary el hueco se ve deliberado y
   no roto. El `<img>` va encima y lo tapa por completo. */
.marco {
    position: relative; overflow: hidden; border-radius: var(--radio);
    background: linear-gradient(140deg, #1a1a1a, #101010);
    border: 1px solid var(--line);
    aspect-ratio: 1 / var(--ratio, 0.66);
}
.marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marco-icono {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: rgba(255, 255, 255, 0.09);
}
.marco img ~ .marco-icono { display: none; }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 60;
    background: rgba(10, 10, 10, 0.85); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.cabecera-fila { display: flex; align-items: center; gap: 24px; height: 70px; }
.marca { font-family: var(--display); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.marca span { color: var(--texto-3); }
/* El logo llega como PNG con transparencia, generado desde el JPEG que mandó
   el cliente: el original venía sobre negro puro y el fondo del sitio es
   #0a0a0a, así que pegado tal cual dejaba un recuadro visible. */
.marca .logo { height: 40px; width: auto; }
.pie .marca .logo { height: 46px; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 0.92rem; font-weight: 500; color: var(--texto-2); }
.nav a:hover { color: var(--texto); }
.cabecera-acciones { display: flex; gap: 10px; align-items: center; }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero .marco {
    border: none; border-radius: 0; aspect-ratio: auto;
    height: clamp(460px, 78vh, 760px);
}
/* Velo: sin esto el texto blanco pelea con la foto y deja de leerse en cuanto
   la imagen tiene zonas claras — un salón iluminado las tiene casi siempre. */
.hero .marco::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(10, 10, 10, .96) 6%, rgba(10, 10, 10, .55) 48%, rgba(10, 10, 10, .35));
}
.hero-texto { position: absolute; inset: auto 0 0 0; z-index: 2; padding-bottom: clamp(40px, 7vw, 84px); }
.hero-texto .bajada { margin-top: 18px; color: #d4d4d4; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 9vw, 110px) 0; }
.seccion-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.seccion-titulo { margin-bottom: 48px; max-width: 60ch; }

/* ---------- Espacios ---------- */
.espacio {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px);
    align-items: center; padding: 34px 0; border-top: 1px solid var(--line);
}
.espacio:first-of-type { border-top: none; padding-top: 0; }
.espacio-invertido .marco { order: 2; }
.espacio h3 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.cifras { display: flex; gap: 30px; margin: 18px 0 20px; }
.cifras div { display: flex; flex-direction: column; }
.cifras b { font-family: var(--display); font-size: 2rem; font-weight: 600; line-height: 1; }
.cifras span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--texto-3); margin-top: 6px; }
.lista-check { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-2); font-size: 0.94rem; }
.lista-check i { color: var(--texto); margin-top: 3px; }

/* ---------- Tipos de evento ---------- */
.grilla-eventos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tarjeta-evento {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radio);
    padding: 28px 24px; display: flex; flex-direction: column;
    transition: background .15s, border-color .15s, transform .15s;
}
.tarjeta-evento:hover { background: var(--card-hover); border-color: var(--line-fuerte); transform: translateY(-2px); }
.tarjeta-evento p { font-size: 0.93rem; margin: 12px 0 18px; flex: 1; }
.enlace { font-size: 0.88rem; font-weight: 600; display: inline-flex; gap: 7px; align-items: center; }

/* ---------- Servicios ---------- */
.grilla-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 34px 44px; }
.servicio { display: flex; gap: 18px; }
.servicio i { font-size: 1.35rem; color: var(--texto-2); margin-top: 4px; }
.servicio h3 { font-size: 1.3rem; margin-bottom: 7px; }
.servicio p { font-size: 0.93rem; margin: 0; }

/* ---------- Píldoras del hero ---------- */
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pildora {
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; color: #d8d8d8;
    border: 1px solid var(--line-fuerte); background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
}

/* ---------- Conócenos ---------- */
.conocenos-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 70px); align-items: center; }

/* ---------- Galería ---------- */
.grilla-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.medio {
    position: relative; padding: 0; border: none; background: none; cursor: pointer;
    display: block; width: 100%; border-radius: var(--radio); overflow: hidden;
}
.medio .marco { transition: transform .3s ease; }
.medio:hover .marco { transform: scale(1.03); }
.medio:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
/* La lupa aparece al pasar por encima: es la señal de que la foto se abre.
   En touch no hay hover, así que ahí se deja siempre visible. */
.lupa, .insignia-video {
    position: absolute; display: grid; place-items: center;
    border-radius: 999px; background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(6px); color: #fff; pointer-events: none;
}
.lupa { right: 10px; bottom: 10px; width: 34px; height: 34px; font-size: 0.95rem; opacity: 0; transition: opacity .2s; }
.medio:hover .lupa, .medio:focus-visible .lupa { opacity: 1; }
.insignia-video { inset: 0; margin: auto; width: 56px; height: 56px; font-size: 1.7rem; border: 1px solid rgba(255, 255, 255, .35); }
@media (hover: none) { .lupa { opacity: 1; } }

/* ---------- Visor ---------- */
/* Esta regla NO es opcional. `display: grid` de acá abajo le gana al
   `[hidden] { display: none }` del navegador —los estilos del autor mandan
   sobre los del user-agent—, así que sin esto el visor arranca tapando la
   página entera y el sitio queda inusable. Ojo al depurar: el atributo
   `hidden` y la propiedad `.hidden` se ven correctos igual; lo que hay que
   mirar es el `display` calculado. */
.visor[hidden] { display: none; }

.visor {
    position: fixed; inset: 0; z-index: 200; background: rgba(6, 6, 6, 0.96);
    display: grid; grid-template-columns: 64px 1fr 64px; align-items: center;
    backdrop-filter: blur(8px);
}
.visor-lienzo {
    grid-column: 2; display: grid; place-items: center;
    width: 100%; height: 100vh; overflow: hidden;
    /* El navegador se queda con el gesto de pinch para su propio zoom si no se
       le dice acá que esta zona los maneja ella. */
    touch-action: none;
}
.visor-lienzo img {
    max-width: 100%; max-height: 88vh; object-fit: contain;
    transition: transform .18s ease-out; transform-origin: center; will-change: transform;
}
.visor.con-zoom .visor-lienzo img { transition: none; cursor: grabbing; }
.visor-lienzo video { max-width: 100%; max-height: 88vh; border-radius: var(--radio); background: #000; }
.visor-btn {
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-fuerte);
    color: #fff; width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
    display: grid; place-items: center; font-size: 1.05rem; transition: background .15s;
}
.visor-btn:hover { background: rgba(255, 255, 255, 0.18); }
.visor-antes { grid-column: 1; justify-self: center; }
.visor-despues { grid-column: 3; justify-self: center; }
.visor-cerrar { position: absolute; top: 18px; right: 18px; z-index: 2; }
.visor-pie {
    position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
    color: var(--texto-3); font-size: 0.82rem; letter-spacing: 0.08em;
}

/* ---------- Cotizar ---------- */
.cotizar-grilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 76px); align-items: start; }
.dato-contacto { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.dato-contacto p { display: flex; gap: 11px; font-size: 0.92rem; margin-bottom: 10px; }
.dato-contacto i { color: var(--texto-3); margin-top: 3px; }

.formulario {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radio);
    padding: clamp(24px, 3.5vw, 38px); display: grid; gap: 16px;
}
.campo { display: grid; gap: 7px; }
.campo > span { font-size: 0.83rem; font-weight: 600; color: var(--texto-2); }
.campo > span b { color: var(--texto-3); font-weight: 600; }
.campo input, .campo select, .campo textarea {
    font-family: var(--cuerpo); font-size: 0.97rem; color: var(--texto);
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-fuerte);
    border-radius: 10px; padding: 12px 14px; width: 100%; resize: vertical;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--texto-2); background: rgba(255, 255, 255, 0.07);
}
.campo em { color: var(--error); font-size: 0.83rem; font-style: normal; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* El calendario nativo dibuja su ícono en negro sobre fondo oscuro. */
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
.senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nota { font-size: 0.8rem; color: var(--texto-3); margin: 0; text-align: center; }
.error-general {
    background: rgba(255, 107, 90, 0.1); border: 1px solid rgba(255, 107, 90, 0.35);
    color: #ffc9c1; border-radius: 10px; padding: 12px 15px; font-size: 0.9rem;
    margin: 0; display: flex; gap: 9px; align-items: flex-start;
}

/* ---------- Cómo llegar ---------- */
.llegar-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 70px); align-items: start; }
.mapa { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--line); height: 100%; min-height: 400px; }
.mapa iframe { width: 100%; height: 100%; min-height: 400px; border: 0; filter: grayscale(1) invert(0.92) contrast(0.85); }

/* ---------- Gracias ---------- */
.pantalla-simple { min-height: 62vh; display: flex; align-items: center; }
.icono-grande { font-size: 3rem; color: var(--texto-2); margin-bottom: 20px; display: block; }
.pantalla-simple .bajada { margin: 18px auto 0; }

/* ---------- Pendientes (uso interno) ---------- */
.tabla-pendientes { width: 100%; border-collapse: collapse; margin-top: 30px; font-size: 0.9rem; }
.tabla-pendientes th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-fuerte); color: var(--texto-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.tabla-pendientes td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--texto-2); }
.tabla-pendientes code, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; color: var(--texto); background: rgba(255, 255, 255, .06); padding: 2px 6px; border-radius: 5px; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--line); padding-top: 54px; background: var(--bg-alt); }
.pie-grilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; padding-bottom: 44px; }
.pie p { font-size: 0.91rem; }
.pie strong { color: var(--texto); font-weight: 600; }
.pie a:hover { color: var(--texto); text-decoration: underline; }
.pie-abajo { border-top: 1px solid var(--line); padding: 20px 22px; text-align: center; font-size: 0.84rem; color: var(--texto-3); }
.pie-abajo a { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .nav { display: none; }
    .solo-ancho { display: none; }
    .espacio { grid-template-columns: 1fr; }
    .espacio-invertido .marco { order: 0; }
    .cotizar-grilla, .llegar-grilla, .conocenos-grilla { grid-template-columns: 1fr; }
    /* En el celular las flechas se comerían el ancho de la foto: se dejan
       abajo, flotando sobre la imagen, y el lienzo pasa a ocupar todo. */
    .visor { grid-template-columns: 1fr; }
    .visor-lienzo { grid-column: 1; }
    .visor-antes, .visor-despues { position: absolute; bottom: 54px; grid-column: 1; }
    .visor-antes { left: 22px; justify-self: start; }
    .visor-despues { right: 22px; justify-self: end; }
    .mapa { min-height: 320px; }
    /* Sin esto el pie mantiene sus tres columnas y empuja la página 44px a la
       derecha en un teléfono: la barra de scroll horizontal aparece en TODA la
       página, no solo en el pie. */
    .pie-grilla { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
    .campo-fila { grid-template-columns: 1fr; }
    .cifras { gap: 22px; }
    .hero-botones .btn { flex: 1 1 100%; }
}