/* Grupo Beracay — estilos. Medidas tomadas del sitio original a 1440 px. */
@import url("fuentes.css");

:root {
  --fondo: #090a11;
  --panel: #0d1717;
  --tarjeta: #111322;
  --oro: #d2a53d;
  --oro-oscuro: #b88c2c;
  --texto: #cdcecf;
  --blanco: #fffefe;
  --negro: #030306;
  --linea: rgba(255, 254, 254, .12);
  --titulos: "Syne", "Arial Black", sans-serif;
  --cuerpo: "Poppins", Arial, sans-serif;
  --contorno: "Syncopate", "Syne", sans-serif;
  --ancho: 1290px;
  --margen: 70px;
  --cab-alto: 111px;
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 15px/1.84 var(--cuerpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 700; color: var(--blanco); margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
strong { color: var(--blanco); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--oro); color: var(--negro); padding: 8px 14px; }
.saltar:focus { left: 8px; }
.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.antetitulo { font: 700 12px/1.5 var(--titulos); text-transform: uppercase; letter-spacing: .5px; color: var(--blanco); margin: 0 0 12px; }
.titulo-seccion { font-size: 47px; line-height: 1.02; letter-spacing: -.5px; }

/* línea animada de enlaces (crece al pasar el ratón) */
.t { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; padding-bottom: 1px; transition: background-size .5s cubic-bezier(.25, .46, .45, .94), background-position 0s .5s; }
@media (hover: hover) and (pointer: fine) {
  a:hover .t, button:hover .t { background-size: 100% 1px; background-position: 100% 100%; }
}

/* botón dorado */
.boton { display: inline-flex; align-items: center; justify-content: center; background: var(--oro); color: var(--blanco); font: 700 15px/1.4 var(--titulos); padding: 13px 40px; transition: background-color .3s, color .3s; }
.boton:hover { background: var(--blanco); color: var(--negro); }
.boton .t { background-image: none; }

/* enlace con flecha → */
.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1.2 var(--titulos); color: var(--blanco); }
.enlace-flecha::after { content: ""; width: 14px; height: 10px; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.enlace-flecha:hover { color: var(--oro); }
.enlace-flecha:hover::after { transform: translateX(5px); }

/* ---------- cabecera */
.cab { position: sticky; top: 0; z-index: 60; background: var(--panel); transition: transform .35s ease, background-color .35s; }
.cab--oculta { transform: translateY(-100%); }
.cab__fila { display: flex; align-items: center; height: var(--cab-alto); padding: 0 var(--margen); gap: 0; }
.cab__logo img { width: 113px; }
.cab__logo { margin-right: 50px; }
.menu { flex: 1; display: flex; align-items: center; }
.menu > ul { display: flex; list-style: none; margin: 0; padding: 0; }
.menu li { position: relative; }
.menu > ul > li > a { display: block; padding: 13px 17.6px; font: 700 16px/1.5 var(--titulos); color: var(--blanco); }
/* la opción activa y la que tiene el ratón encima llevan una raya que la tacha, como el original */
.menu > ul > li > a .t { position: relative; background: none; padding: 0; }
.menu > ul > li > a .t::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.6, 0, .3, 1); }
.menu > ul > li > a[aria-current] .t::after, .menu > ul > li:hover > a .t::after, .menu > ul > li > a:focus-visible .t::after { transform: scaleX(1); transform-origin: left; }
.menu li ul { position: absolute; left: 0; top: 100%; min-width: 240px; list-style: none; margin: 0; padding: 18px 0; background: var(--panel); border-top: 2px solid var(--oro); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; }
.menu li:hover > ul, .menu li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.menu li ul a { display: block; padding: 7px 26px; font: 500 14px/1.5 var(--cuerpo); color: var(--texto); }
.menu li ul a:hover, .menu li ul a[aria-current] { color: var(--oro); }
.menu__telefono, .abrir-sub, .cab__hamburguesa { display: none; }
.cab__telefono { font: 700 19px/1 var(--titulos); color: var(--blanco); margin-right: 40px; }
.cab__telefono:hover { color: var(--oro); }
.cab__boton { padding: 13px 40px; }

/* ---------- hero */
.hero { position: relative; height: 900px; overflow: hidden; background: var(--fondo); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--img-fondo) center / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 2.4s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 767px) { .hero::before { background-image: var(--img-fondo-movil); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 10, 17, .35), rgba(9, 10, 17, .55) 70%, rgba(9, 10, 17, .75)); }
.cargada .hero::before { opacity: 1; transform: none; }
.hero > * { position: absolute; z-index: 1; }
.hero__titulo { left: var(--margen); top: 388px; font-weight: 700; margin: 0; white-space: nowrap; }
.hero__linea { display: block; }
.hero__solido { font: 700 109px/148px var(--titulos); letter-spacing: -2.97px; color: #fff; }
.hero__contorno { font: 700 103px/171px var(--contorno); letter-spacing: -2.97px; color: transparent; -webkit-text-stroke: 1px #fff; margin-left: 20px; }
.hero__con { font-size: 79px; position: relative; top: 32px; margin-left: 10px; }
.hero__lema { left: var(--margen); top: 637px; width: 373px; margin: 0; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .9); }
.hero__bajar { left: var(--margen); top: 705px; width: 14px; height: 40px; }
.hero__bajar::before { content: ""; position: absolute; left: 6px; top: 0; width: 1px; height: 38px; background: #fff; }
.hero__bajar::after { content: ""; position: absolute; left: 2px; bottom: 3px; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); }
.hero__bajar { animation: botar 2.2s ease-in-out infinite; }
@keyframes botar { 50% { transform: translateY(8px); } }
.hero__marca { right: var(--margen); top: 702px; margin: 0; font: 700 109px/148px var(--titulos); letter-spacing: -2.97px; color: var(--oro); white-space: nowrap; }

/* letras que suben una a una (hero) */
.js [data-letras] .letra { display: inline-block; opacity: 0; transform: translateY(70%); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js [data-letras].visible .letra { opacity: 1; transform: none; }
.js .hero__lema, .js .hero__bajar { opacity: 0; transition: opacity 1s ease 1.6s; }
.cargada .hero__lema, .cargada .hero__bajar { opacity: 1; }

/* ---------- cintas que corren solas */
.cinta { display: block; overflow: hidden; white-space: nowrap; }
.cinta__pista { display: inline-flex; animation: correr 38s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.cinta--locales { height: 70px; display: flex; align-items: center; }
.cinta--locales span { font: 700 21px/1 var(--titulos); color: var(--oro); padding: 0 14px; word-spacing: 6px; }
.cinta--locales span::after { content: "•"; color: var(--blanco); margin-left: 28px; font-size: 16px; }
.cinta--reserva { height: 114px; display: flex; align-items: center; background: var(--oro); }
.cinta--reserva .cinta__pista { animation-duration: 26s; animation-direction: reverse; }
.cinta--reserva span { display: inline-flex; align-items: center; font: 700 44px/1 var(--titulos); color: var(--negro); padding: 0 13px; }
.cinta--reserva span::after { content: ""; width: 28px; height: 28px; margin-left: 26px; border-radius: 50%; background: radial-gradient(circle, var(--oro) 0 3px, var(--negro) 3.5px 6px, var(--oro) 6.5px 7.5px, var(--negro) 8px); }

/* ---------- destino */
.destino { position: relative; padding: 120px 0; }
.destino__rejilla { display: grid; grid-template-columns: 630px 518px; justify-content: space-between; align-items: start; }
.destino__izq .titulo-seccion { max-width: 540px; margin-bottom: 90px; }
.destino__foto-izq { width: 410px; height: 600px; object-fit: cover; margin-left: auto; margin-right: 60px; }
.destino__foto-der { width: 518px; height: 700px; object-fit: cover; margin-bottom: 60px; }
.destino__der p { font-size: 15px; }

/* brillos de fondo (sustituyen las imágenes difuminadas del tema) */
.brillo { position: absolute; pointer-events: none; z-index: 0; filter: blur(40px); opacity: .55; }
.brillo--izq { left: -120px; top: 45px; width: 380px; height: 700px; background: radial-gradient(ellipse at center, rgba(120, 60, 200, .55), transparent 70%); }
.brillo--der { right: -80px; top: -170px; width: 900px; height: 920px; background: radial-gradient(ellipse at 60% 40%, rgba(70, 60, 190, .35), transparent 65%); }
.brillo--der-bajo { right: -100px; top: 140px; width: 420px; height: 760px; background: radial-gradient(ellipse at center, rgba(130, 70, 210, .5), transparent 70%); }
.destino > .contenedor, .contacto-bloque > .contenedor { position: relative; z-index: 1; }

/* ---------- tarjetas de locales apiladas */
/* overflow-x: clip recorta los brillos sin crear un contenedor de scroll (con hidden dejaría de funcionar el sticky) */
.pila { position: relative; margin-top: 120px; overflow-x: clip; }
.destino { overflow-x: clip; }
.pila__tarjeta { position: sticky; top: 0; height: 810px; padding: 30px var(--margen); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; transform-origin: 50% 50%; will-change: transform, opacity; background: var(--fondo); }
.pila__foto { height: 750px; overflow: hidden; }
.pila__foto img { width: 100%; height: 100%; object-fit: cover; }
.pila__foto img.arriba { object-position: 50% 0; }
.pila__texto { background: var(--tarjeta); height: 750px; margin-left: -80px; padding: 77px 70px 70px; display: flex; flex-direction: column; }
.pila__num { font: 500 28px/1 var(--titulos); color: var(--blanco); margin-bottom: auto; }
.pila__texto h2 { font-size: 57px; line-height: 1; letter-spacing: -1.7px; margin-bottom: 26px; }
.pila__texto p { font-size: 15px; max-width: 460px; margin-bottom: 40px; }

/* ---------- franjas doradas inclinadas */
.franjas { position: relative; padding: 80px 0 75px; overflow: hidden; }
.franja { display: flex; align-items: center; gap: 70px; background: var(--oro); padding: 0 50px; height: 130px; width: 115%; margin-left: -7.5%; white-space: nowrap; transform: rotate(var(--giro-franja)) translateX(var(--mov, 0px)); will-change: transform; }
.franja span { font: 700 82.65px/1 var(--titulos); color: var(--negro); letter-spacing: -1px; }
.franja--1 { --giro-franja: -3deg; justify-content: center; }
.franja--2 { --giro-franja: 0deg; margin-top: 95px; }
.franja--3 { --giro-franja: -3deg; margin-top: 95px; justify-content: flex-end; padding-right: 12%; }
.franja--3 span { text-transform: uppercase; }
.deco { flex: none; color: var(--negro); }
.deco--estrella { width: 70px; height: 70px; background: var(--negro); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 4l12 4-4 4zM36 4l-4 12-4-4zM36 36l-12-4 4-4zM4 36l4-12 4 4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 4l12 4-4 4zM36 4l-4 12-4-4zM36 36l-12-4 4-4zM4 36l4-12 4 4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.deco--asteriscos { font: 700 82px/1 var(--titulos); font-style: normal; letter-spacing: 4px; margin-left: 80px; margin-right: 60px; }
.deco--disco { width: 70px; height: 70px; border-radius: 50%; margin-right: auto; margin-left: 40px; background: radial-gradient(circle, var(--oro) 0 6px, var(--negro) 6.5px 14px, var(--oro) 14.5px 16px, var(--negro) 16.5px); }

/* ---------- contacto */
.contacto-bloque { position: relative; padding: 120px 0; overflow: hidden; }
.contacto-bloque__rejilla { display: grid; grid-template-columns: 488px 568px; justify-content: space-between; align-items: center; padding: 0 68px; }
.tarjeta-form { background: #fff; color: #6d7373; padding: 120px 0; margin: 0 -60px; padding: 110px 60px 110px; }
.tarjeta-form h2 { color: var(--negro); font-size: 47px; line-height: 1.02; margin-bottom: 30px; }
.formulario { display: grid; gap: 18px; position: relative; }
.formulario input:not([type=checkbox]), .formulario textarea { width: 100%; border: 0; border-bottom: 1px solid #d9dada; background: transparent; padding: 14px 0 14px 28px; font: 400 14px/1.5 var(--cuerpo); color: var(--negro); outline: none; transition: border-color .3s; }
.formulario textarea { resize: vertical; min-height: 80px; }
.formulario input:focus, .formulario textarea:focus { border-color: var(--oro); }
.campo { position: relative; display: block; }
.campo::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 14px; background: #9aa0a0; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.campo--nombre { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3' fill='none' stroke='%23000'/%3E%3Cpath d='M2 15c0-3.3 2.7-5 6-5s6 1.7 6 5' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.campo--email { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='3.5' width='13' height='9' fill='none' stroke='%23000'/%3E%3Cpath d='M1.5 4l6.5 5 6.5-5' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.campo--mensaje { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 14l1-4 8-8 3 3-8 8z' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #8a8f8f; }
.casilla input { margin-top: 2px; accent-color: var(--oro); }
.casilla a { text-decoration: underline; }
.formulario .boton { justify-self: start; padding: 12px 28px; font-size: 13px; }
.formulario__estado { margin: 0; font-size: 13px; min-height: 1.4em; color: var(--negro); }
.contacto-bloque__info .titulo-seccion { margin-bottom: 30px; }
.datos { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.datos li { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--texto); letter-spacing: .5px; }
.datos li::before { content: ""; width: 14px; height: 14px; background: var(--oro); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.datos__lugar { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15s5-5 5-9A5 5 0 003 6c0 4 5 9 5 9z' fill='none' stroke='%23000'/%3E%3Ccircle cx='8' cy='6' r='1.8' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.datos__tel { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1.5' width='8' height='13' rx='1.5' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.datos__tel a { font-weight: 600; color: var(--blanco); }

/* ---------- pie */
.pie { background: #000; padding: 100px 0 30px; }
.pie__reserva { font: 700 47px/1.02 var(--titulos); color: var(--blanco); letter-spacing: -.5px; margin-bottom: 70px; }
.pie__reserva a { color: var(--oro); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pie__reserva a:hover { color: var(--blanco); }
.pie__legal { display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--texto); }
.pie__legal p { margin: 0; }
.pie__legal a:hover { color: var(--oro); }
.pie__legal p + p a { margin-left: 18px; }
.subir { position: fixed; right: 30px; bottom: 30px; z-index: 50; width: 40px; height: 40px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, background-color .3s; }
.subir::before { content: ""; position: absolute; inset: 13px; background: var(--negro); -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; transform: rotate(-90deg); }
.subir.visible { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--oro); }
.whatsapp-flotante { position: fixed; right: 30px; bottom: 84px; z-index: 50; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: transform .3s; }
.whatsapp-flotante:hover { transform: scale(1.08); color: #fff; }
.whatsapp-flotante svg { width: 28px; height: 28px; }

/* ---------- visor de fotos */
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: transparent; }
.visor img { max-width: 90vw; max-height: 88vh; width: auto; height: auto; }
.ventana__cerrar { position: fixed; top: 20px; right: 20px; width: 36px; height: 36px; }
.ventana__cerrar::before, .ventana__cerrar::after { content: ""; position: absolute; left: 6px; top: 17px; width: 24px; height: 1.5px; background: #fff; transform: rotate(45deg); }
.ventana__cerrar::after { transform: rotate(-45deg); }
.visor__nav { position: fixed; top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.visor__nav::before { content: ""; position: absolute; inset: 16px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; }
.visor__nav--ant { left: 20px; } .visor__nav--ant::before { transform: rotate(-135deg); }
.visor__nav--sig { right: 20px; } .visor__nav--sig::before { transform: rotate(45deg); }

/* =====================================================================
   PÁGINAS INTERIORES
   ===================================================================== */

/* cabecera de sección con foto de luces (Locales, Servicios, Galería) */
.pagina-hero { position: relative; height: 360px; display: grid; place-items: center; overflow: hidden; background: #050610 var(--img-fondo) center / cover no-repeat; }
.pagina-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 10, 17, .15), rgba(9, 10, 17, .55)); }
.pagina-hero h1 { position: relative; z-index: 1; font-size: 57px; letter-spacing: -1.7px; }

/* ficha de local o de servicio */
.ficha { padding: 140px 0 120px; }
.ficha__rejilla { display: grid; grid-template-columns: 507px 560px; justify-content: space-between; padding-left: 68px; }
.ficha__titulo { font-size: 57px; letter-spacing: -1.7px; line-height: 1; margin-bottom: 70px; max-width: 480px; }
.ficha__sangria { padding-left: 126px; }
.ficha__sangria p { max-width: 380px; margin-bottom: 60px; }
.ficha__foto-peq { width: 380px; height: 400px; object-fit: cover; }
.ficha__foto { width: 560px; height: 600px; object-fit: cover; }
.ficha__wa { display: inline-block; margin-top: 60px; font: 700 24px/1 var(--titulos); color: var(--texto); }
.ficha__wa:hover { color: var(--oro); }

.servicios-bloque { padding: 0 0 130px; }
.servicios-bloque__rejilla { display: grid; grid-template-columns: 577px 1fr; gap: 35px; }
.servicios-bloque__izq .titulo-seccion { margin-bottom: 40px; max-width: 500px; }
.servicios-bloque__logo { max-width: 300px; max-height: 245px; width: auto; height: auto; }
.servicios-bloque__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.servicio { display: grid; grid-template-columns: 78px 1fr; gap: 20px; align-items: start; }
.servicio__icono { width: 78px; height: 82px; padding: 20px; border: 1px solid var(--linea); color: var(--oro); transition: background-color .35s, color .35s; }
.servicio:hover .servicio__icono { background: var(--oro); color: var(--negro); }
.servicio h3 { font-size: 28px; line-height: 1.2; margin: 2px 0 6px; }
.servicio p { font-size: 15px; line-height: 1.3; margin: 0; }
.servicio p a { color: var(--oro); }
.servicio p a:hover { color: var(--blanco); }

.mapa-ancho { margin-bottom: 120px; }
.mapa { height: 400px; background: #10121c; display: grid; place-items: center; }
.mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.4) contrast(1.05); }
.mapa__cargar { font: 700 17px/1 var(--titulos); color: var(--blanco); padding: 16px 28px; border: 1px solid var(--linea); }
.mapa__cargar:hover { border-color: var(--oro); color: var(--oro); }

.reserva-bloque { padding-bottom: 120px; }
.reserva-bloque__rejilla { display: grid; grid-template-columns: 630px 511px; justify-content: space-between; align-items: center; }
.reserva-bloque__foto { position: relative; }
.reserva-bloque__foto img { width: 600px; height: 700px; object-fit: cover; }
.nota-google { position: absolute; right: 0; bottom: -1px; width: 353px; height: 148px; margin: 0; display: flex; align-items: center; padding: 0 40px; background: var(--fondo); font: 700 35px/1 var(--titulos); color: var(--blanco); }
.reserva-bloque__texto .titulo-seccion { margin-bottom: 20px; }
.reserva-bloque__enlaces { list-style: none; margin: 30px 0 0; padding: 0; }
.reserva-bloque__enlaces li { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.reserva-bloque__enlaces li:last-child { border: 0; }
.reserva-bloque__enlaces a { font: 700 24px/1.2 var(--titulos); color: var(--texto); }
.reserva-bloque__enlaces a:hover { color: var(--oro); }

.redes-bloque { text-align: center; padding: 0 0 120px; }
.redes-bloque .antetitulo { margin-bottom: 16px; }
.redes { display: flex; justify-content: center; gap: 12px; }
.redes a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--oro); border: 1px solid var(--linea); transition: background-color .3s, color .3s; }
.redes a:hover { background: var(--oro); color: var(--negro); }
.redes svg { width: 20px; height: 20px; }

/* índice de locales: casillas con foto y nombre (3 por fila, a sangre) */
.rejilla-locales { display: grid; grid-template-columns: repeat(3, 1fr); padding: 120px 0 0; }
.casilla-local { position: relative; display: block; aspect-ratio: 475 / 500; overflow: hidden; }
.casilla-local img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1), filter .6s; }
.casilla-local::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 10, 17, 0) 40%, rgba(9, 10, 17, .75)); }
.casilla-local__nombre { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 26px; text-align: center; font: 700 32px/1.05 var(--titulos); color: var(--blanco); letter-spacing: -.5px; transition: transform .5s cubic-bezier(.2, .7, .3, 1), color .3s; }
@media (hover: hover) { .casilla-local:hover img { transform: scale(1.08); filter: brightness(1.1); } .casilla-local:hover .casilla-local__nombre { transform: translateY(-8px); color: var(--oro); } }

/* índice de servicios */
.rejilla-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 45px; padding-top: 120px; padding-bottom: 120px; }
.tarjeta-servicio { display: block; color: var(--texto); }
.tarjeta-servicio__foto { display: block; aspect-ratio: 410 / 300; overflow: hidden; margin-bottom: 22px; }
.tarjeta-servicio__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.tarjeta-servicio__titulo { display: block; font: 700 28px/1.1 var(--titulos); color: var(--blanco); margin-bottom: 8px; }
.tarjeta-servicio__texto { display: block; font-size: 13px; line-height: 1.6; }
@media (hover: hover) { .tarjeta-servicio:hover img { transform: scale(1.06); } }

/* índice de galería: logos */
.rejilla-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; padding-top: 120px; padding-bottom: 120px; align-items: center; justify-items: center; }
.logo-galeria { display: grid; place-items: center; width: 100%; max-width: 280px; min-height: 200px; }
.logo-galeria img { max-width: 220px; max-height: 190px; width: auto; height: auto; transition: transform .5s cubic-bezier(.2, .7, .3, 1), filter .5s; }
@media (hover: hover) { .logo-galeria:hover img { transform: scale(1.08); filter: drop-shadow(0 0 22px rgba(210, 165, 61, .45)); } }

/* galería de un local: álbumes */
.galeria-local { padding-top: 120px; padding-bottom: 120px; }
.galeria-local .titulo-seccion { margin-bottom: 50px; }
.rejilla-albumes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; }
.album { display: block; color: var(--texto); border: 1px solid var(--linea); padding: 14px 14px 18px; transition: border-color .35s; }
a.album:hover { border-color: var(--oro); }
.album__foto { display: block; aspect-ratio: 6 / 5; overflow: hidden; margin-bottom: 14px; }
.album__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.album__titulo { display: block; font: 700 20px/1.15 var(--titulos); color: var(--blanco); }
.album__fecha { display: block; font-size: 13px; margin-top: 4px; }
.album__ver { display: inline-block; margin-top: 12px; font: 700 14px/1 var(--titulos); color: var(--oro); }
@media (hover: hover) { a.album:hover img { transform: scale(1.06); } }

/* página de un álbum */
.album-pagina { padding: 110px 0 120px; text-align: center; }
.album-pagina__logo { max-width: 180px; max-height: 120px; width: auto; margin: 10px auto 24px; }
.album-pagina__autor { margin: 10px 0 50px; font-size: 13px; }
.rejilla-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: left; }
.rejilla-fotos a { display: block; aspect-ratio: 1; overflow: hidden; }
.rejilla-fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .3, 1), filter .5s; }
@media (hover: hover) { .rejilla-fotos a:hover img { transform: scale(1.07); filter: brightness(1.12); } }
.album-pagina__volver { margin-top: 50px; }

/* línea de colores encima del pie (en el original era una imagen del tema) */
.pie { border-top: 4px solid transparent; border-image: linear-gradient(90deg, #2b1a6b, #7b2cbf, #d2a53d, #e2556f, #3a0ca3) 1; }

/* contacto */
.mapas-contacto { display: grid; grid-template-columns: 1fr 1fr; }
.contacto-pagina { padding: 120px 0; }
.contacto-pagina__rejilla { display: grid; grid-template-columns: 480px 1fr; gap: 90px; align-items: start; }
.contacto-pagina__info .titulo-seccion { margin-bottom: 16px; }
.contacto-pagina__info > p:not(.antetitulo) { margin-bottom: 26px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.formulario--oscuro input:not([type=checkbox]), .formulario--oscuro textarea { color: var(--blanco); border-bottom-color: var(--linea); }
.formulario--oscuro input::placeholder, .formulario--oscuro textarea::placeholder { color: var(--texto); opacity: .8; }
.formulario--oscuro .campo::before { background: var(--texto); }
.formulario--oscuro .formulario__estado { color: var(--texto); }
.formulario__pie { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 16px; }
.formulario__pie .casilla { color: var(--texto); }
.campo--tel { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1.5' width='8' height='13' rx='1.5' fill='none' stroke='%23000'/%3E%3C/svg%3E"); }
.campo--asunto { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23000'/%3E%3Cpath d='M8 5v4M8 11v.5' stroke='%23000'/%3E%3C/svg%3E"); }
.palabras { padding: 0 var(--margen) 130px; text-align: center; }
.palabras p { max-width: 1050px; margin: 0 auto; font: 700 40px/1.35 var(--titulos); text-transform: uppercase; color: var(--blanco); letter-spacing: -.3px; }
.palabras i { font-style: normal; color: var(--oro); margin: 0 6px; }

/* blog */
.blog { padding-top: 120px; padding-bottom: 120px; }
.posts-rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 45px; }
.post-tarjeta { display: block; color: var(--texto); }
.post-tarjeta__imagen { display: block; aspect-ratio: 410 / 300; overflow: hidden; margin-bottom: 18px; }
.post-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.post-tarjeta__fecha { display: block; font: 700 12px/1.5 var(--titulos); text-transform: uppercase; color: var(--oro); margin-bottom: 6px; }
.post-tarjeta__titulo { display: block; font: 700 24px/1.15 var(--titulos); color: var(--blanco); }
@media (hover: hover) { .post-tarjeta:hover img { transform: scale(1.06); } }
.articulo__cab { position: relative; min-height: 560px; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 120px var(--margen) 70px; background: var(--img-fondo) center / cover no-repeat; }
.articulo__cab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 23, 23, .35), rgba(13, 23, 23, .95)); }
.articulo__cab-texto { position: relative; max-width: 900px; }
.articulo__cat { display: inline-block; background: var(--oro); color: var(--negro); font: 700 11px/1 var(--titulos); text-transform: uppercase; padding: 7px 12px; margin-bottom: 22px; }
.articulo__cab h1 { font-size: 52px; line-height: 1.04; letter-spacing: -1px; margin-bottom: 18px; }
.articulo__cab time { font-size: 13px; color: var(--texto); }
.articulo__cuerpo { max-width: 800px; margin: 0 auto; padding: 80px var(--margen) 100px; font-size: 16px; line-height: 1.75; }
.articulo__cuerpo h2 { font-size: 38px; line-height: 1.08; margin: 56px 0 18px; }
.articulo__cuerpo h3 { font-size: 26px; line-height: 1.15; margin: 38px 0 12px; }
.articulo__cuerpo h2 strong, .articulo__cuerpo h3 strong { font-weight: inherit; }
.articulo__cuerpo ul, .articulo__cuerpo ol { padding-left: 22px; }
.articulo__cuerpo li { margin-bottom: 6px; }
.articulo__cuerpo a { color: var(--oro); text-decoration: underline; text-underline-offset: 3px; }
.articulo__cuerpo a:hover { color: var(--blanco); }
.articulo__cuerpo img { margin: 30px 0; }
.articulo__cierre { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.articulo__cierre .boton { text-decoration: none; color: var(--blanco); }
.articulo__compartir { margin: 0; font-size: 13px; }
.articulo__compartir a { margin-left: 14px; color: var(--blanco); text-decoration: none; font-weight: 600; }
.relacionados { padding: 0 0 120px; }
.relacionados .titulo-seccion { margin-bottom: 40px; }

/* ---------- entradas (riff-fadeinup del original) */
.js [data-anim] { opacity: 0; }
.js [data-anim].visible { animation: 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.js [data-anim="fade-up"].visible { animation-name: subir; }
.js [data-anim="fade"].visible { animation-name: aparecer; }
@keyframes subir { from { opacity: 0; transform: translate3d(0, 50px, 0); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* movimiento con el scroll (igual que en Varesi) */
[data-mov="desplazar"] { transform: translate3d(0, var(--desp, 0px), 0); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-letras] .letra, .js .hero__lema, .js .hero__bajar { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .cinta__pista, .hero__bajar { animation: none; }
  .pila__tarjeta { transform: none !important; opacity: 1 !important; }
  [data-mov] { --desp: 0px !important; }
  html { scroll-behavior: auto; }
}

/* ---------- tablet */
@media (max-width: 1200px) {
  :root { --margen: 40px; }
  .cab__logo { margin-right: 20px; }
  .menu > ul > li > a { padding: 13px 12px; font-size: 15px; }
  .cab__telefono { display: none; }
  .hero__solido, .hero__marca { font-size: 84px; line-height: 1.2; }
  .hero__contorno { font-size: 78px; line-height: 1.4; }
  .hero__con { font-size: 60px; }
  .destino__rejilla { grid-template-columns: 1fr 1fr; gap: 50px; }
  .destino__foto-izq, .destino__foto-der { width: 100%; height: auto; aspect-ratio: 410 / 600; margin: 0; }
  .pila__texto { padding: 60px 45px; }
  .pila__texto h2 { font-size: 44px; }
  .franja span { font-size: 60px; }
  .contacto-bloque__rejilla { grid-template-columns: 1fr 1fr; gap: 60px; padding: 0; }
  .tarjeta-form { margin: 0; padding: 70px 45px; }
  .ficha__rejilla, .reserva-bloque__rejilla { grid-template-columns: 1fr 1fr; gap: 50px; padding: 0; }
  .ficha__sangria { padding-left: 60px; }
  .ficha__foto-peq, .ficha__foto, .reserva-bloque__foto img { width: 100%; height: auto; aspect-ratio: 560 / 600; }
  .servicios-bloque__rejilla { grid-template-columns: 1fr 1fr; }
  .rejilla-locales, .rejilla-servicios, .rejilla-albumes { grid-template-columns: 1fr 1fr; }
  .rejilla-fotos { grid-template-columns: repeat(3, 1fr); }
  .contacto-pagina__rejilla { grid-template-columns: 1fr 1fr; gap: 50px; }
  .posts-rejilla { grid-template-columns: 1fr 1fr; }
  .nota-google { width: 70%; height: 110px; font-size: 26px; padding: 0 28px; }
}

@media (max-width: 1024px) {
  :root { --cab-alto: 80px; }
  .cab__hamburguesa { display: block; width: 40px; height: 40px; position: relative; margin-left: 16px; }
  .cab__hamburguesa span, .cab__hamburguesa span::before, .cab__hamburguesa span::after { position: absolute; left: 9px; width: 22px; height: 2px; background: var(--blanco); content: ""; transition: transform .3s; }
  .cab__hamburguesa span { top: 19px; }
  .cab__hamburguesa span::before { top: -7px; left: 0; }
  .cab__hamburguesa span::after { top: 7px; left: 0; }
  .menu-abierto .cab__hamburguesa span { background: transparent; }
  .menu-abierto .cab__hamburguesa span::before { transform: translateY(7px) rotate(45deg); }
  .menu-abierto .cab__hamburguesa span::after { transform: translateY(-7px) rotate(-45deg); }
  .cab__boton { margin-left: auto; padding: 10px 22px; font-size: 13px; }
  .menu { position: fixed; top: var(--cab-alto); left: 0; width: 100vw; bottom: 0; background: var(--panel); flex-direction: column; align-items: stretch; padding: 20px var(--margen) 40px; overflow-y: auto; display: none; }
  .menu-abierto .menu { display: flex; animation: aparecer .25s ease; }
  .menu > ul { flex-direction: column; }
  .menu > ul > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--linea); }
  .menu > ul > li > a { flex: 1; padding: 16px 0; font-size: 20px; }
  .menu li ul { position: static; flex-basis: 100%; opacity: 1; visibility: visible; transform: none; display: none; border: 0; padding: 0 0 14px; background: none; }
  .menu li.sub-abierto > ul { display: block; }
  .menu li ul a { padding: 6px 0 6px 14px; }
  .abrir-sub { display: block; width: 44px; height: 44px; position: relative; }
  .abrir-sub::after { content: ""; position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-right: 2px solid var(--blanco); border-bottom: 2px solid var(--blanco); transform: rotate(45deg); transition: transform .3s; }
  .sub-abierto > .abrir-sub::after { transform: rotate(-135deg); top: 20px; }
  .menu__telefono { display: block; margin-top: 30px; font: 700 22px/1 var(--titulos); color: var(--oro); }
  .pila__tarjeta { height: auto; min-height: 0; position: relative; grid-template-columns: 1fr; gap: 0; padding: 20px var(--margen); }
  .pila__foto { height: 360px; }
  .pila__texto { height: auto; margin: 0; padding: 40px 30px; }
  .pila__num { margin-bottom: 30px; }
}

/* ---------- móvil */
@media (max-width: 767px) {
  :root { --margen: 16px; }
  .titulo-seccion { font-size: 34px; }
  .cab__logo img { width: 92px; }
  .cab__boton { display: none; }
  .cab__hamburguesa { margin-left: auto; }
  .hero { height: 100svh; min-height: 620px; }
  .hero__titulo { top: auto; bottom: 330px; white-space: normal; }
  .hero__solido { font-size: 52px; line-height: 1.1; display: block; }
  .hero__contorno { font-size: 46px; line-height: 1.25; margin-left: 0; }
  .hero__con { font-size: 36px; top: 0; }
  .hero__lema { top: auto; bottom: 200px; width: auto; right: var(--margen); }
  .hero__bajar { top: auto; bottom: 140px; }
  .hero__marca { font-size: 50px; line-height: 1.1; top: auto; bottom: 40px; right: var(--margen); }
  .cinta--locales span { font-size: 18px; }
  .cinta--reserva { height: 70px; }
  .cinta--reserva span { font-size: 26px; }
  .destino { padding: 70px 0; }
  .destino__rejilla { grid-template-columns: 1fr; }
  .destino__izq .titulo-seccion { margin-bottom: 30px; }
  .pila__foto { height: 280px; }
  .pila__texto h2 { font-size: 34px; }
  .franjas { padding: 40px 0; }
  .franja { height: 70px; gap: 30px; }
  .franja--2, .franja--3 { margin-top: 30px; }
  .pila { margin-top: 40px; }
  .franja span, .deco--asteriscos { font-size: 34px; }
  .deco--estrella, .deco--disco { width: 36px; height: 36px; }
  .contacto-bloque { padding: 70px 0; }
  .contacto-bloque__rejilla { grid-template-columns: 1fr; }
  .tarjeta-form { padding: 50px 24px; }
  .tarjeta-form h2 { font-size: 34px; }
  .pie { padding: 60px 0 100px; }
  .pie__reserva { font-size: 30px; margin-bottom: 40px; }
  .pie__legal { flex-direction: column; }
  .pie__legal p + p a:first-child { margin-left: 0; }
  .pagina-hero { height: 240px; }
  .blog { padding-top: 60px; padding-bottom: 70px; }
  .posts-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .articulo__cab { min-height: 420px; padding-bottom: 40px; }
  .articulo__cab h1 { font-size: 32px; }
  .articulo__cuerpo { padding-top: 50px; padding-bottom: 60px; }
  .articulo__cuerpo h2 { font-size: 28px; }
  .articulo__cuerpo h3 { font-size: 21px; }
  .relacionados { padding-bottom: 70px; }
  .mapas-contacto { grid-template-columns: 1fr; }
  .contacto-pagina { padding: 60px 0; }
  .contacto-pagina__rejilla { grid-template-columns: 1fr; gap: 40px; }
  .formulario__fila { grid-template-columns: 1fr; gap: 18px; }
  .palabras { padding-bottom: 70px; }
  .palabras p { font-size: 24px; }
  .rejilla-locales { grid-template-columns: 1fr 1fr; padding-top: 50px; }
  .casilla-local__nombre { font-size: 20px; bottom: 14px; }
  .rejilla-servicios, .rejilla-albumes { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; }
  .rejilla-logos { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 60px; padding-bottom: 70px; }
  .logo-galeria { min-height: 120px; } .logo-galeria img { max-width: 140px; max-height: 110px; }
  .galeria-local { padding-top: 60px; padding-bottom: 70px; }
  .album-pagina { padding: 60px 0 70px; }
  .rejilla-fotos { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pagina-hero h1 { font-size: 40px; }
  .ficha { padding: 60px 0 70px; }
  .ficha__rejilla, .reserva-bloque__rejilla, .servicios-bloque__rejilla { grid-template-columns: 1fr; gap: 40px; }
  .ficha__titulo { font-size: 40px; margin-bottom: 30px; }
  .ficha__sangria { padding-left: 0; }
  .ficha__sangria p { margin-bottom: 30px; }
  .ficha__wa { margin-top: 24px; font-size: 20px; }
  .servicios-bloque { padding-bottom: 70px; }
  .servicio { grid-template-columns: 58px 1fr; }
  .servicio__icono { width: 58px; height: 62px; padding: 14px; }
  .servicio h3 { font-size: 22px; }
  .mapa { height: 300px; }
  .mapa-ancho, .reserva-bloque, .redes-bloque { margin-bottom: 0; padding-bottom: 70px; }
  .nota-google { width: 80%; height: 90px; font-size: 22px; }
  .reserva-bloque__enlaces a { font-size: 19px; }
  .subir { right: 16px; bottom: 16px; }
  .whatsapp-flotante { right: 16px; bottom: 70px; }
}

/* las páginas interiores del original van sobre el verde muy oscuro de la cabecera */
body.interior, body.interior .pila__tarjeta { background: var(--panel); }
body.interior .nota-google { background: var(--panel); }

/* legales y 404 */
.legal { padding: 120px 0; }
.legal__cuerpo { max-width: 820px; font-size: 16px; line-height: 1.7; }
.legal__cuerpo h1 { margin-bottom: 30px; }
.legal__cuerpo h2 { font-size: 26px; margin: 36px 0 12px; }
.pendiente { background: #fff3cd; color: #6b4e00; border-left: 4px solid var(--oro); padding: 14px 18px; font-size: 14px; }
.error-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 120px var(--margen); }
.error-404 .titulo-seccion { font-size: 57px; }
.error-404 .boton { margin-right: 24px; }

/* dirección, horario y reservas en la ficha de cada local */
.datos-local { list-style: none; margin: 0 0 60px; padding: 0; max-width: 380px; display: grid; gap: 18px; }
.datos-local li { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 2px solid var(--oro); line-height: 1.6; }
.datos-local__etq { font: 700 11px/1.4 var(--titulos); letter-spacing: 2px; text-transform: uppercase; color: var(--oro); margin-bottom: 2px; }
.datos-local a { color: var(--blanco); font-weight: 600; width: fit-content; }
.datos-local a:hover { color: var(--oro); }
.datos-local__ir { margin-top: 4px; }
@media (max-width: 767px) { .datos-local { margin-bottom: 30px; } }