/* diegocuesta.com/dj — v2, sobria (ES + EN)
   Paleta tomada de las propuestas impresas: azul noche, marfil y latón. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --noche:  #121a23;
  --bahia:  #1f2a36;
  --bahia2: #263343;
  --marfil: #f0e9dc;
  --bruma:  #98a2ad;
  --laton:  #c9a96e;
  --laton2: #a8874f;
  --linea:  rgba(240,233,220,.12);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1160px;
  --gut: clamp(1rem, 4vw, 2.5rem);
}

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: var(--sans); font-size: 1rem; line-height: 1.6; background: var(--noche); color: var(--marfil); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: rgba(201,169,110,.3); }
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ctr { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- Navegación ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(18,26,35,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.top .ctr { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1.5rem; }
.marca { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.marca span { color: var(--bruma); font-weight: 400; }
.menu { display: flex; gap: 1.6rem; list-style: none; }
.menu a { font-size: .875rem; color: var(--bruma); text-decoration: none; transition: color .2s; }
.menu a:hover { color: var(--marfil); }
.top-der { display: flex; align-items: center; gap: 1.1rem; font-size: .875rem; }
.idioma a, .idioma span { text-decoration: none; color: var(--bruma); }
.idioma [aria-current] { color: var(--marfil); }
.volver { color: var(--bruma); text-decoration: none; }
.volver:hover, .idioma a:hover { color: var(--marfil); }
.menu-btn { display: none; background: none; border: 1px solid var(--linea); color: var(--marfil); font: inherit; font-size: .875rem; padding: .4rem .8rem; border-radius: 4px; cursor: pointer; }
.cajon { display: none; border-top: 1px solid var(--linea); padding: .5rem var(--gut) 1.25rem; }
.cajon a { display: block; padding: .7rem 0; font-family: var(--serif); font-size: 1.35rem; text-decoration: none; border-bottom: 1px solid var(--linea); }
.cajon.abierto { display: block; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border-radius: 4px; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-p { background: var(--laton); color: var(--noche); }
.btn-p:hover { background: #d6b882; }
.btn-s { border-color: var(--linea); color: var(--marfil); }
.btn-s:hover { border-color: var(--laton); }

/* ---------- Hero ---------- */
.hero .ctr { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.025em; font-optical-sizing: auto; margin-bottom: 1.6rem; max-width: 13ch; }
.hero .intro { font-size: 1.125rem; color: var(--bruma); max-width: 34rem; margin-bottom: 2.2rem; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.2rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); max-width: 34rem; }
.hero .datos dt { font-size: .8rem; color: var(--bruma); }
.hero .datos dd { font-family: var(--serif); font-size: 1.15rem; }

.cuadro { position: relative; aspect-ratio: 9 / 16; max-height: 78vh; justify-self: end; width: 100%; max-width: 380px; background: var(--bahia); }
.cuadro video, .cuadro img { width: 100%; height: 100%; object-fit: cover; }
.cuadro::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(240,233,220,.14); pointer-events: none; }
.cuadro figcaption { position: absolute; left: 0; right: 0; bottom: -2rem; font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--bruma); }

/* Único momento animado: entrada del hero */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .intro, .hero .acciones, .hero .datos { animation: subir .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .intro { animation-delay: .12s; }
  .hero .acciones { animation-delay: .22s; }
  .hero .datos { animation-delay: .32s; }
  .cuadro { animation: aparecer 1.4s ease both .1s; }
  @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Secciones ---------- */
.sec { padding: clamp(4rem, 9vw, 7.5rem) 0; border-top: 1px solid var(--linea); }
.sec-cab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.sec h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; }
.sec-cab p { color: var(--bruma); max-width: 38rem; font-size: 1.05rem; }

/* Servicios: lista, no tarjetas */
.lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 5rem); }
.lista > div { padding: 1.5rem 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; }
.lista dt { font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; }
.lista dd { color: var(--bruma); font-size: .95rem; }

/* Galería: tira horizontal de formato vertical */
.tira { --borde: max(var(--gut), calc((100vw - var(--ancho)) / 2 + var(--gut))); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 24vw, 290px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde); padding: 0 var(--borde) 1.25rem; scrollbar-width: thin; scrollbar-color: var(--bahia2) transparent; }
.tira figure { scroll-snap-align: start; }
.tira .m { position: relative; aspect-ratio: 9 / 16; background: var(--bahia); overflow: hidden; }
.tira .m img, .tira .m video { width: 100%; height: 100%; object-fit: cover; }
.tira figcaption { margin-top: .7rem; font-size: .875rem; color: var(--bruma); }
.tira figcaption b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: var(--marfil); }
.sonido { position: absolute; right: .6rem; bottom: .6rem; background: rgba(18,26,35,.82); color: var(--marfil); border: 1px solid var(--linea); border-radius: 4px; font: inherit; font-size: .78rem; padding: .35rem .6rem; cursor: pointer; }
.sonido[aria-pressed="true"] { border-color: var(--laton); color: var(--laton); }
.tira-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: -3.2rem; margin-bottom: 2rem; }
.tira-nav button { width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--linea); background: none; color: var(--marfil); font-size: 1.1rem; cursor: pointer; }
.tira-nav button:hover { border-color: var(--laton); }

/* Estilos musicales */
.generos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.generos h3 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin-bottom: .5rem; }
.generos p { color: var(--bruma); font-size: .95rem; }
.nota { margin-top: 3rem; font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4; max-width: 44rem; }

/* Equipo: ficha técnica */
.ficha { width: 100%; border-collapse: collapse; }
.ficha th, .ficha td { text-align: left; vertical-align: top; padding: 1.1rem 0; border-top: 1px solid var(--linea); }
.ficha th { font-weight: 400; color: var(--bruma); font-size: .95rem; width: 32%; padding-right: 1.5rem; }
.ficha td { font-family: var(--serif); font-size: 1.2rem; }
.ficha td small { display: block; font-family: var(--sans); font-size: .9rem; color: var(--bruma); margin-top: .2rem; }

/* Paquetes */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.pack { padding: 2rem clamp(1rem, 2.5vw, 2rem) 2rem 0; display: flex; flex-direction: column; }
.pack + .pack { padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--linea); }
.pack h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin-bottom: .4rem; }
.pack .para { color: var(--bruma); font-size: .95rem; margin-bottom: 1.4rem; min-height: 3em; }
.pack ul { list-style: none; margin-bottom: 1.8rem; flex: 1; }
.pack li { padding: .45rem 0 .45rem 1.1rem; position: relative; font-size: .95rem; }
.pack li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 6px; height: 1px; background: var(--laton); }
.pack .elegido { font-size: .8rem; color: var(--laton); margin-bottom: .5rem; }
.pack a { align-self: flex-start; color: var(--marfil); font-weight: 600; font-size: .95rem; text-decoration: underline; text-decoration-color: var(--laton); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.pack a:hover { color: var(--laton); }
.aclara { margin-top: 2rem; color: var(--bruma); font-size: .95rem; }

/* Cómo reservar + preguntas */
.pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.pasos li { counter-increment: paso; padding-top: 1.1rem; border-top: 1px solid var(--laton2); }
.pasos li::before { content: counter(paso); display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--laton); margin-bottom: .9rem; }
.pasos h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin-bottom: .35rem; }
.pasos p { color: var(--bruma); font-size: .95rem; }
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--linea); }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; position: relative; font-family: var(--serif); font-size: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 1.05rem; font-family: var(--sans); font-weight: 300; font-size: 1.5rem; color: var(--laton); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .fa { color: var(--bruma); padding: 0 2.5rem 1.4rem 0; max-width: 44rem; }

/* ---------- Reseñas (HTML generado por dj/resenas/lib.php) ---------- */
.fa-star::before { content: '★'; }
.far.fa-star { opacity: .25; }
.fas.fa-star, .far.fa-star { font-style: normal; }
.rv-sum { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 2rem; }
.rv-avg { font-family: var(--serif); font-size: 3.2rem; font-weight: 300; line-height: 1; }
.rv-sum-stars, .rv-stars { color: var(--laton); letter-spacing: .12em; }
.rv-count { color: var(--bruma); font-size: .95rem; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2.5rem clamp(2rem, 5vw, 4rem); }
.rv { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.rv-stars { font-size: .85rem; }
.rv-text { font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; flex: 1; }
.rv-text p::before { content: '“'; }
.rv-text p::after { content: '”'; }
.rv-orig { font-size: .8rem; color: var(--bruma); font-style: italic; }
.rv-meta { display: flex; flex-direction: column; }
.rv-author { font-weight: 600; font-size: .95rem; }
.rv-ev { font-size: .875rem; color: var(--bruma); }
.rv-empty { color: var(--bruma); font-family: var(--serif); font-size: 1.25rem; max-width: 36rem; }
.rv-status { margin-bottom: 1.6rem; padding: .9rem 1.1rem; border-left: 2px solid; font-size: .95rem; background: var(--bahia); }
.rv-status.rv-ok { border-color: var(--laton); }
.rv-status.rv-err { border-color: #d9826a; }

.rv-form-wrap { margin-top: 3rem; }
.rv-form-wrap > summary { list-style: none; display: inline-flex; }
.rv-form-wrap > summary::-webkit-details-marker { display: none; }
.rv-form-wrap[open] > summary { margin-bottom: 1.6rem; }
.rv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; max-width: 760px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bahia); }
.rv-form label, .rv-form legend { font-size: .875rem; font-weight: 600; }
.rv-form label { display: grid; grid-template-columns: auto 1fr; column-gap: .35rem; row-gap: .45rem; align-items: baseline; }
.rv-form label > input, .rv-form label > select, .rv-form label > textarea { grid-column: 1 / -1; }
.rv-form label > span { font-weight: 400; color: var(--bruma); justify-self: start; }
.rv-form input:not([type=radio]):not([type=checkbox]), .rv-form select, .rv-form textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--marfil); background: var(--noche); border: 1px solid var(--linea);
  border-radius: 4px; padding: .7rem .85rem; width: 100%; color-scheme: dark; }
.rv-form textarea { resize: vertical; min-height: 130px; }
.rv-form input:focus, .rv-form select:focus, .rv-form textarea:focus { outline: none; border-color: var(--laton); }
.rv-full, .rv-rate { grid-column: 1 / -1; }
.rv-rate { border: 0; }
.rv-rate-in { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; margin-top: .3rem; }
.rv-rate-in input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-rate-in label { font-size: 1.8rem; line-height: 1; color: var(--bahia2); cursor: pointer; transition: color .15s; }
.rv-rate-in label:hover, .rv-rate-in label:hover ~ label, .rv-rate-in input:checked ~ label { color: var(--laton); }
.rv-rate-in input:focus-visible + label { outline: 2px solid var(--laton); outline-offset: 3px; }
.rv-check { display: flex !important; align-items: flex-start; gap: .6rem !important; font-weight: 400 !important; color: var(--bruma); }
.rv-check input { margin-top: .3rem; accent-color: var(--laton); }
.rv-note { font-size: .875rem; color: var(--bruma); }
.rv-form .btn-p { justify-self: start; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Contacto ---------- */
.cierre h2 { max-width: 16ch; margin-bottom: 1.4rem; }
.cierre .ctr > p { color: var(--bruma); max-width: 36rem; font-size: 1.05rem; margin-bottom: 2.5rem; }
.canales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.canales a { padding: 1.6rem 1.5rem 1.6rem 0; text-decoration: none; display: block; }
.canales a + a { padding-left: 1.5rem; border-left: 1px solid var(--linea); }
.canales span { display: block; font-size: .875rem; color: var(--bruma); margin-bottom: .3rem; }
.canales b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.6rem); transition: color .2s; }
.canales a:hover b { color: var(--laton); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 2.5rem 0 3rem; font-size: .875rem; color: var(--bruma); }
.pie .ctr { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.pie .firma { font-family: var(--serif); font-size: 1.1rem; color: var(--marfil); }
.pie a { color: var(--bruma); }
.pie a:hover { color: var(--marfil); }
.pie p + p { margin-top: .25rem; }

/* WhatsApp fijo, discreto */
.wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--bahia2); border: 1px solid var(--linea); display: grid; place-items: center; color: var(--marfil); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: border-color .2s, color .2s; }
.wa:hover { border-color: var(--laton); color: var(--laton); }
.wa svg { width: 24px; height: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .menu { display: none; }
  .menu-btn { display: inline-block; }
  .generos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero .ctr { grid-template-columns: 1fr; }
  .cuadro { justify-self: start; max-width: 250px; max-height: none; margin-bottom: 2rem; }
  .sec-cab { grid-template-columns: 1fr; align-items: start; }
  .lista { grid-template-columns: 1fr; }
  .packs { grid-template-columns: 1fr; }
  .pack, .pack + .pack { padding: 1.8rem 0; border-left: 0; }
  .pack + .pack { border-top: 1px solid var(--linea); }
  .pack .para { min-height: 0; }
  .canales { grid-template-columns: 1fr; }
  .canales a, .canales a + a { padding: 1.3rem 0; border-left: 0; }
  .canales a + a { border-top: 1px solid var(--linea); }
  .tira-nav { display: none; }
}
@media (max-width: 560px) {
  .volver { display: none; }
  .lista > div { grid-template-columns: 1fr; gap: .4rem; }
  .generos, .pasos { grid-template-columns: 1fr; }
  .hero .datos { gap: 1.4rem; }
  .ficha th { width: 40%; }
  .ficha td { font-size: 1.05rem; }
  .rv-form { grid-template-columns: 1fr; }
}