/* =========================================================================
   BARBERLAND — HOJA DE ESTILOS PRINCIPAL
   Se usa tanto en index.html como en nosotros.html (mismo header/footer).
   El archivo se mantiene en una línea por regla (formato original del
   proyecto) pero organizado por bloques con comentarios explicativos.
   ========================================================================= */

/* --- 1. VARIABLES GLOBALES (colores, tipografías, transición estándar) --- */
:root{--black:#090909;--black-soft:#111;--black-light:#181818;--gold:#c59b5b;--gold-light:#dfbb7d;--white:#f6f3ee;--gray:#a7a7a7;--gray-dark:#666;--border:rgba(197,155,91,.22);--font-heading:"Oswald",sans-serif;--font-body:"DM Sans",sans-serif;--container:1200px;--transition:300ms cubic-bezier(.4,0,.2,1)}

/* --- 2. RESET BÁSICO Y ESTILOS BASE --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--white);color:var(--black);font-family:var(--font-body);overflow-x:hidden}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(100% - 40px,var(--container));margin-inline:auto}
h1,h2,h3{font-family:var(--font-heading);text-transform:uppercase;line-height:.95}
h1{font-size:clamp(3.5rem,11vw,8rem)}
h2{font-size:clamp(3rem,7vw,5.5rem)}
h2 span,h1 span{color:var(--gold)}
p{line-height:1.7}

/* --- 3. HEADER (cabecera fija, logo, navegación, iconos sociales, logo circular) --- */
.header{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(9,9,9,.82);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06);transition:var(--transition)}
.header.scrolled{background:rgba(9,9,9,.96)}
/* header__inner usa flexbox + "order" en cada hijo para poder colocar el logo
   circular (.logo-image) siempre a la derecha, delante del botón hamburguesa */
.header__inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:14px}

/* Logo de texto (izquierda) */
.logo{display:flex;flex-direction:column;order:1}
.logo__main{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;letter-spacing:.08em;color:var(--white)}
.logo__sub{font-size:.48rem;letter-spacing:.3em;color:var(--gold);margin-top:3px}

/* Logo circular (imagen), colocado a la derecha del header mediante "order" */
.logo-image{order:4;flex-shrink:0;display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .35s ease}
.logo-image img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%}
/* El círculo COMPLETO (borde + imagen) crece al pasar el cursor, usando
   "transform:scale()" en el propio contenedor. transform NO participa en
   el flujo del layout (a diferencia de cambiar width/height), así que este
   efecto nunca desplaza el menú, el header ni ningún otro elemento. */
.logo-image:hover{transform:scale(1.18)}

/* Navegación principal (menú a pantalla completa en móvil, fila en escritorio) */
.nav{order:2;position:fixed;top:78px;left:0;width:100%;height:calc(100vh - 78px);background:var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transform:translateX(100%);transition:transform var(--transition)}
.nav.active{transform:translateX(0)}
.nav__link{position:relative;color:var(--gray);font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:var(--transition)}
.nav__link:hover,.nav__link.active{color:var(--white)}
.nav__link::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--gold);transition:var(--transition)}
.nav__link:hover::after,.nav__link.active::after{width:100%}
.nav__cta{padding:13px 22px;background:var(--gold);color:var(--black);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;transition:var(--transition)}
.nav__cta:hover{background:var(--gold-light);transform:translateY(-2px)}

/* Iconos sociales del header (Instagram + Booksy, enlaces directos). Ocultos en móvil. */
.header__socials{order:3;display:none}
/* order:5 asegura que el botón hamburguesa quede siempre al final (extremo derecho) en móvil */
.menu-toggle{order:5;width:42px;height:42px;border:0;background:transparent;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer}
.menu-toggle span{width:25px;height:2px;background:var(--white);transition:var(--transition)}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- 4. HERO (portada principal) --- */
/* El fondo es un <video> en bucle (ver comentario detallado en el HTML).
   ".hero" usa el negro de marca como base mientras el vídeo/poster cargan. */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;color:var(--white);background:var(--black)}
/* Capa 0: el vídeo, cubre todo el hero (igual que antes lo hacía la imagen/logo de fondo) */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Capa 1: degradado de izquierda a derecha — oscuro donde cae el texto (izquierda,
   para que se lea bien) y más transparente hacia la derecha, para dejar ver el vídeo */
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.25) 100%)}
/* Capa 2: el texto, siempre por encima del vídeo y del degradado */
.hero__content{position:relative;z-index:1;padding-top:100px}
.hero__eyebrow,.eyebrow{display:block;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;margin-bottom:20px}
.hero h1{max-width:850px}
.hero p{max-width:500px;margin:28px 0;color:#d1d1d1;font-size:1rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:var(--transition)}
.btn--primary{background:var(--gold);color:var(--black)}
.btn--primary:hover{background:var(--gold-light);transform:translateY(-3px)}
.btn--outline{border:1px solid rgba(255,255,255,.4);color:var(--white)}
.btn--outline:hover{border-color:var(--gold);color:var(--gold)}
.hero__info{display:flex;flex-wrap:wrap;gap:24px;margin-top:55px;color:#aaa;font-size:.75rem}
.hero__info div{display:flex;align-items:center;gap:8px}
.hero__info i{color:var(--gold)}
.hero__scroll{position:absolute;bottom:30px;right:35px;display:flex;align-items:center;gap:12px;color:#aaa;font-size:.65rem;text-transform:uppercase;letter-spacing:.15em;writing-mode:vertical-rl}
.hero__scroll i{color:var(--gold)}

/* --- 5. UTILIDADES DE SECCIÓN (usadas por casi todas las secciones) --- */
.section{padding:90px 0}
.section--dark{background:var(--black);color:var(--white)}
.section-heading{margin-bottom:45px}
.section-heading--center{text-align:center}
.section-heading h2{max-width:700px}
.section-heading--center h2{margin-inline:auto}
.section-top{margin-bottom:50px}
.section-top>p{max-width:500px;color:var(--gray)}

/* --- 6. INTRO ("TU IMAGEN IMPORTA" en home / texto principal en nosotros.html) --- */
.intro{background:var(--white)}
.intro__grid{display:grid;gap:30px}
.intro__text{max-width:550px}
.intro__text p{margin-bottom:18px;color:#555}
.text-link{display:inline-flex;align-items:center;gap:12px;margin-top:18px;color:var(--black);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.text-link i{color:var(--gold);transition:var(--transition)}
.text-link:hover i{transform:translateX(5px)}

/* --- 7. SERVICIOS --- */
.services__grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.service-card{position:relative;padding:35px 28px;background:var(--black-soft);transition:var(--transition)}
.service-card:hover{background:var(--black-light);transform:translateY(-5px);z-index:2}
.service-card--featured{background:linear-gradient(145deg,#191510,#111)}
.service-card__badge{position:absolute;top:20px;right:20px;padding:6px 9px;background:var(--gold);color:var(--black);font-size:.55rem;font-weight:700;letter-spacing:.08em}
.service-card__number{position:absolute;top:20px;left:20px;color:rgba(255,255,255,.12);font-family:var(--font-heading);font-size:2rem}
.service-card__icon{color:var(--gold);font-size:1.6rem;margin:35px 0 25px}
.service-card h3{font-size:1.8rem;margin-bottom:15px}
.service-card p{min-height:80px;color:var(--gray);font-size:.85rem}
.service-card__bottom{display:flex;align-items:end;justify-content:space-between;padding-top:25px;margin-top:25px;border-top:1px solid rgba(255,255,255,.08)}
.service-card__bottom span{color:var(--gray-dark);font-size:.7rem;text-transform:uppercase}
.service-card__bottom strong{color:var(--gold);font-family:var(--font-heading);font-size:1.8rem}

/* --- 8. GALERÍA ESTÁTICA (grid de fotos de la home) --- */
.gallery{background:#efede8}
.gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gallery__item{overflow:hidden;aspect-ratio:1/1}
.gallery__item--large{grid-row:span 2;aspect-ratio:auto}
.gallery__item--wide{grid-column:span 2;aspect-ratio:2/1}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery__item:hover img{transform:scale(1.06)}
/* Variante para mostrar una foto COMPLETA, sin recortes artificiales,
   respetando su formato original (miguel_trabajando.jpg). "contain" nunca
   recorta la imagen; el hueco que pueda quedar se rellena con el mismo
   color de fondo de la sección para que no se note como una "barra". */
.gallery__item--contain img{object-fit:contain;background:#efede8}

/* =========================================================================
   9. SECCIÓN "COMUNIDAD" — Tarjetas de redes sociales / Booksy
   ========================================================================= */
.social{overflow:hidden}
.social__box{display:grid;gap:50px;padding:45px 25px;border:1px solid var(--border);background:radial-gradient(circle at top right,rgba(197,155,91,.12),transparent 40%)}
.social__content h2{margin-bottom:20px}
.social__content p{max-width:500px;color:var(--gray)}
.social__links{display:grid;gap:10px}

/* Tarjeta base (Instagram, WhatsApp, Booksy). Grid de 3 columnas:
   icono | texto | icono derecho (flecha o chevron). */
.social-card{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);transition:var(--transition)}
.social-card:hover{transform:translateX(6px);border-color:var(--gold)}
.social-card__icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);font-size:1.3rem;transition:var(--transition)}
.social-card span{display:block;margin-bottom:4px;color:var(--gray-dark);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}
.social-card strong{font-size:.85rem}
.social-card>i{color:var(--gray-dark);font-size:.75rem}

/* Colores de marca al pasar el ratón sobre cada tarjeta */
.social-card--instagram:hover .social-card__icon{color:#e1306c}
.social-card--whatsapp:hover .social-card__icon{color:#25d366}
/* Booksy ahora usa una imagen (ver bloque 9.2), por eso el efecto hover se
   aplica a la propia imagen (.icon-booksy) y no a un color de icono de fuente */
.social-card--booksy:hover .icon-booksy{transform:scale(1.08)}

/* --- 9.2 ICONO DE BOOKSY COMO IMAGEN (punto 2 del encargo) ---
   Sustituye al icono de FontAwesome <i class="fa-solid fa-calendar-check">.
   Se usa la misma etiqueta <img src="img/iconos/iconos.jpg" class="icon-booksy">
   en el header, el footer y la tarjeta de la sección "Comunidad", ajustando
   el tamaño en cada contexto para que visualmente pese igual que los demás
   iconos (Instagram/WhatsApp) de esa misma zona. */
.icon-booksy{display:block;border-radius:6px;object-fit:cover;transition:transform var(--transition)}
/* Tamaño pequeño: iconos sueltos del header y del footer (mismo peso visual que fa-brands) */
.header__socials .icon-booksy,.footer__socials .icon-booksy{width:18px;height:18px;border-radius:5px}
/* Tamaño mediano: dentro del círculo/cuadro ".social-card__icon" (52x52px) de la tarjeta grande */
.social-card__icon .icon-booksy{width:26px;height:26px;border-radius:7px}
/* Efecto hover equivalente al que ya tienen los iconos de FontAwesome (cambio de color) */
.header__socials a:hover .icon-booksy,.footer__socials a:hover .icon-booksy{transform:scale(1.12)}

/* --- 10. LLAMADA A LA ACCIÓN "RESERVA" --- */
.booking{position:relative;min-height:500px;display:grid;place-items:center;text-align:center;color:var(--white);overflow:hidden}
.booking__background{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.9)),url("https://images.unsplash.com/photo-1599351431202-1e0f0137899a?auto=format&fit=crop&w=2000&q=90") center/cover;transform:scale(1.02)}
.booking__content{position:relative;z-index:1}
.booking__content h2{max-width:850px;margin-inline:auto}
.booking__content p{color:#ccc;margin:25px 0 30px}
.btn--large{padding:18px 30px}

/* --- 11. UBICACIÓN / MAPA --- */
.location{background:var(--white)}
.location__grid{display:grid;gap:45px}
.location__info h2{margin-bottom:20px}
.location__info>p{color:#666;margin-bottom:35px}
.location__details{display:grid;gap:20px;margin-bottom:35px}
.location__details>div{display:flex;align-items:center;gap:16px}
.location__details i{color:var(--gold);font-size:1.1rem}
.location__details strong,.location__details span{display:block}
.location__details strong{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.location__details span{color:#777;font-size:.8rem;margin-top:4px}
.btn--dark{background:var(--black);color:var(--white)}
.btn--dark:hover{background:var(--gold);color:var(--black)}
.location__map{position:relative;min-height:350px;overflow:hidden;background:#ddd}
.location__map iframe{width:100%;height:100%;min-height:350px;border:0;filter:grayscale(1)}
.map__label{position:absolute;bottom:15px;left:15px;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--black);color:var(--white);font-size:.65rem;font-weight:700;letter-spacing:.08em}
.map__label i{color:var(--gold)}

/* =========================================================================
   12. CARRUSEL / GALERÍA MULTIMEDIA (nosotros.html) — punto 4 del encargo
   Componente 100% nuevo, en JS nativo (ver js/script.js). Estructura:
   .carousel > .carousel__track > .carousel__slide (uno por foto/vídeo)
   más los botones prev/next y los puntos de paginación.
   ========================================================================= */
.carousel{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--black-soft)}
/* La "pista" (track) contiene todas las slides en fila; JS mueve su transform
   para deslizar de una foto a otra */
.carousel__track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* Cada slide ocupa siempre el 100% del ancho visible del carrusel. Se usa
   una proporción cuadrada (1:1) en TODAS las pantallas -en vez de una
   distinta por breakpoint- porque es la que mejor acomoda tanto fotos
   verticales como horizontales sin tener que recortarlas. */
.carousel__slide{flex:0 0 100%;width:100%;aspect-ratio:1/1;background:var(--black)}
/* CORRECCIÓN (fotos "cortadas" en Nosotros): "object-fit:contain" muestra
   la fotografía COMPLETA, tanto si es vertical como horizontal, sin recortar
   nada; si sobra espacio dentro de la slide (porque la foto no es cuadrada)
   queda relleno con el fondo oscuro de arriba, a modo de "marco", en vez de
   recortar la imagen para que ocupe todo el hueco. */
.carousel__slide img,.carousel__slide video{width:100%;height:100%;object-fit:contain;display:block}
/* Botones de navegación (flecha izquierda/derecha), superpuestos sobre la imagen */
.carousel__btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;background:rgba(9,9,9,.55);color:var(--white);border:1px solid rgba(255,255,255,.25);cursor:pointer;transition:var(--transition);z-index:2}
.carousel__btn:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.carousel__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.carousel__btn--prev{left:12px}
.carousel__btn--next{right:12px}
/* Puntos de paginación (indican la slide activa y permiten saltar a ella) */
.carousel__dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.carousel__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);border:0;padding:0;cursor:pointer;transition:var(--transition)}
.carousel__dot:hover{background:rgba(255,255,255,.75)}
.carousel__dot.is-active{background:var(--gold);width:22px;border-radius:5px}
/* Pantallas medianas y grandes: mismos botones más grandes; la proporción
   1:1 de la slide se mantiene igual que en móvil (ver bloque 12 más arriba)
   para que las fotos, verticales u horizontales, sigan viéndose enteras */
@media(min-width:700px){.carousel__btn{width:48px;height:48px}
  /* Carrusel un 30% más pequeño (a partir de tablet) para que las fotos no
     dominen tanto la página; en móvil se deja al 100% del ancho por
     usabilidad (pantalla ya estrecha de por sí). Se mantiene centrado. */
  .carousel{max-width:70%;margin-inline:auto}
}

/* --- 13. FOOTER --- */
.footer{background:#050505;color:var(--white);padding:50px 0 25px}
/* footer__top pasa a ser un GRID (en vez de flex) para poder colocar el
   nuevo enlace "Nosotros" en la columna central real del footer (punto 3
   del encargo), quedando: [logo] — [Nosotros] — [iconos sociales].
   En móvil (una sola columna) se apila todo centrado para que siga siendo
   100% responsive. */
.footer__top{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px;padding-bottom:35px;border-bottom:1px solid rgba(255,255,255,.08)}
/* Enlace(s) central(es) del footer, ej. "Nosotros" */
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.footer__nav a{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray);transition:var(--transition)}
.footer__nav a:hover{color:var(--gold)}
.footer__socials{display:flex;align-items:center;gap:8px}
.footer__socials>a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);color:#aaa;transition:var(--transition)}
.footer__socials>a:hover{border-color:var(--gold);color:var(--gold)}
.footer__bottom{display:flex;flex-direction:column;gap:15px;padding-top:25px;color:#555;font-size:.65rem}
.footer__bottom div{display:flex;gap:20px}
.footer__bottom a:hover{color:var(--gold)}
/* El enlace "Aviso Legal y Privacidad" es un <button> (abre un modal, no navega),
   así que reseteamos los estilos por defecto de botón para que se vea igual
   que un enlace normal del footer */
.footer__legal-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;transition:var(--transition)}
.footer__legal-link:hover{color:var(--gold)}

/* --- 14. BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:900;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;font-size:1.5rem;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:var(--transition)}
.whatsapp-float:hover{transform:translateY(-5px) scale(1.05)}

/* =========================================================================
   15. MODAL "AVISO LEGAL Y PRIVACIDAD"
   Overlay de pantalla completa (fondo oscurecido + panel centrado), oculto
   por defecto ("visibility:hidden") y mostrado al añadirle la clase
   "is-open" (ver js/script.js, bloque 7). Mismo lenguaje visual oscuro y
   dorado que el resto de la web.
   ========================================================================= */
.legal-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity var(--transition),visibility var(--transition)}
.legal-modal.is-open{visibility:visible;opacity:1}
/* Fondo oscuro semitransparente; al hacer clic en él también se cierra el modal (ver JS) */
.legal-modal__backdrop{position:absolute;inset:0;background:rgba(5,5,5,.82);backdrop-filter:blur(3px)}
/* Panel central con el contenido, con scroll propio si el texto no cabe en pantalla */
.legal-modal__panel{position:relative;z-index:1;width:min(560px,100%);max-height:85vh;overflow-y:auto;background:var(--black-soft);border:1px solid var(--border);padding:40px 30px 34px;transform:translateY(16px);transition:transform var(--transition)}
.legal-modal.is-open .legal-modal__panel{transform:translateY(0)}
.legal-modal h2{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:20px;color:var(--white)}
.legal-modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--gray);cursor:pointer;transition:var(--transition)}
.legal-modal__close:hover{border-color:var(--gold);color:var(--gold)}
.legal-modal__body p{color:#bbb;font-size:.85rem;margin-bottom:16px}
.legal-modal__body strong{color:var(--white)}
/* Email de contacto: se rellena por JS a partir de los atributos data-user/data-domain (ofuscación antispam) */
.legal-modal__email{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:13px 20px;background:var(--gold);color:var(--black);font-size:.8rem;font-weight:700;letter-spacing:.04em;transition:var(--transition)}
.legal-modal__email:hover{background:var(--gold-light)}

/* =========================================================================
   16. MEDIA QUERIES (mobile-first: de pantallas pequeñas a grandes)
   ========================================================================= */

/* Tablet / escritorio pequeño (≥700px) */
@media(min-width:700px){
  .container{width:min(100% - 70px,var(--container))}
  .section{padding:120px 0}
  .intro__grid{grid-template-columns:1fr 1fr;align-items:center;gap:100px}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .social__box{padding:70px}
  .location__grid{grid-template-columns:.8fr 1.2fr;align-items:stretch}
  .footer__bottom{flex-direction:row;justify-content:space-between}
  /* A partir de aquí el footer vuelve a ser una fila de 3 columnas:
     logo | Nosotros (centrado real) | iconos sociales */
  .footer__top{grid-template-columns:1fr auto 1fr;justify-items:start;text-align:left}
  .footer__top .footer__nav{justify-self:center}
  .footer__top .footer__socials{justify-self:end}
}

/* Escritorio (≥1000px): navegación horizontal, iconos sociales visibles, menú hamburguesa oculto */
@media(min-width:1000px){
  .header__inner{min-height:88px}
  .nav{position:static;width:auto;height:auto;flex-direction:row;background:transparent;transform:none;gap:30px}
  .header__socials{display:flex;align-items:center;gap:15px;margin-left:20px}
  .header__socials>a{color:#999;transition:var(--transition)}
  .header__socials>a:hover{color:var(--gold)}
  .menu-toggle{display:none}
  .hero__content{padding-top:120px}
  .hero p{font-size:1.1rem}
  .services__grid{grid-template-columns:repeat(3,1fr)}
  .social__box{grid-template-columns:1fr 1fr;align-items:center;gap:100px}
  .booking{min-height:600px}
}

/* Pantallas muy grandes (≥1400px) */
@media(min-width:1400px){
  .hero__content{padding-top:100px}
  .hero h1{font-size:8rem}
}

/* =========================================================================
   17. OPINIONES DE GOOGLE — REVIEWS WIDGET
   -------------------------------------------------------------------------
   Integración de prueba del widget Grid de Reviews Widget.
   Estas clases solo afectan a la sección de opiniones.
   ========================================================================= */
.google-reviews{background:var(--black);color:var(--white);overflow:hidden}
.google-reviews__header{text-align:center;max-width:760px;margin:0 auto 34px}
.google-reviews__header h2{margin-inline:auto}
.google-reviews__header p{max-width:620px;margin:16px auto 0;color:var(--gray)}
.google-reviews__widget{width:100%;max-width:1180px;margin:0 auto;min-height:360px;display:block;overflow:hidden}
.google-reviews__widget [data-reviewgrid]{width:100%;max-width:100%}
.google-reviews__cta-text{margin:0 0 14px;text-align:center;color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.5}
.google-reviews__cta{display:flex;flex-direction:column;align-items:center;margin-top:28px}
.google-reviews__cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.google-reviews__cta i{font-size:1rem}
.google-reviews__leave-btn{min-width:250px}
@media(max-width:699px){
  .google-reviews__header{margin-bottom:26px}
  .google-reviews__header h2{font-size:2.4rem}
  .google-reviews__widget{min-height:320px}
  .google-reviews__cta{margin-top:22px}
  .google-reviews__leave-btn{width:100%;max-width:320px}
}