/* ============================================================
   047 Records — styles.css
   Paleta: negros + grises + amarillos
   Motif: cinta amarilla/negra tipo barrera
   Objetivo: layout escalable, limpio y comentado
============================================================ */

/* =======================
   VARIABLES / BASE
   - Colores y radios reutilizables
   - Márgenes laterales globales
======================= */
:root{
  /* Colores base */
  --bg:#0b0b0c;
  --panel:#121217;
  --panel2:#0e0f14;
  --stroke:#1f212b;
  --text:#f3f4f6;
  --muted:#a5abb5;

  /* Colores del fondo geométrico */
  --tri-black:#0b0b0c;
  --tri-gray1:#2b2f38;
  --tri-gray2:#3a3f4b;
  --tri-yellow1:#ffd24a;
  --tri-yellow2:#caa21d;

  /* Acentos */
  --accent:#ffd24a;
  --accent2:#caa21d;

  /* Iconos / checks OK */
  --ok:#1ed28b;

  /* Sombras y esquinas redondeadas */
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --r:18px;

  /* Altura aproximada del header (para cálculos de scroll si hiciera falta) */
  --header-h: 150px;

  /* Márgenes laterales máximos (pides ~20px) */
  --page-pad: 20px;

  /* Cinta amarilla/negra (altura) */
  --tape-h: 25px;

  /* Safe areas para móviles con notch */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Reseteo básico y tipografía global */
*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Respeta preferencia del usuario para reducir animaciones */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Scroll suave y compensación del header sticky */
html{
  scroll-behavior:smooth;         /* scroll suave al hacer clic en los anchors */
  scroll-padding-top:155px;       /* altura que se reserva arriba cuando saltas a una sección */
}

/* Enlaces e imágenes base */
a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

/* Colores de texto auxiliares */
.muted{
  color:var(--muted);
}

.note{
  font-size:.92rem;
  color:#b6bcc7;
}

/* =======================
   CONTAINERS GENERALES
   - header-container
   - hero-container
   - section-container
   - footer-container
   Todos usan padding lateral controlado por --page-pad
======================= */
.header-container,
.hero-container,
.section-container,
.footer-container{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--page-pad);
}

/* Header ligeramente más ancho */
.header-container{
  max-width:1480px;
}

/* Hero: ancho algo menor y padding vertical controlado */
.hero-container{
  max-width:1480px;
}

/* Secciones: mismo ancho que header para coherencia */
.section-container{
  max-width:1480px;
}

/* Footer: si quisieras, podrías hacerlo un pelín más estrecho
.footer-container{ max-width:1320px; }
*/

/* =======================
   TARJETAS / UI GENÉRICO
======================= */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--stroke);
  border-radius:var(--r);
  padding:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}

.shadow{
  box-shadow:var(--shadow);
}

/* Pills / tags reutilizables */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .62rem;
  border:1px solid var(--stroke);
  border-radius:999px;
  background:rgba(18,18,23,.72);
  color:#d8dbe2;
  font-size:.82rem;
  white-space:nowrap;
  transition:all .2s ease;
  text-decoration:none;
}

.tag:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.tag:hover{
  border-color:rgba(255,210,74,.35);
  background:rgba(18,18,23,.9);
}

/* Grupo de tags en “fila” */
.chips{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* =======================
   FONDO DEL HERO (triangles)
   - La imagen SVG está inline en base64.
======================= */
.triangles{
  position:relative;
  overflow:hidden;
  border-bottom:none; /* la cinta será la que remate el hero */
}

/* Capa con el patrón geométrico */
.triangles::before{
  content:"";
  position:absolute;
  inset:-160px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22420%22%20height%3D%22420%22%20viewBox%3D%220%200%20420%20420%22%3E%0A%20%20%3Crect%20width%3D%22420%22%20height%3D%22420%22%20fill%3D%22%230b0b0c%22/%3E%0A%20%20%3Cg%3E%0A%20%20%20%20%3Cpolygon%20points%3D%220%2C0%20210%2C0%200%2C210%22%20fill%3D%22%232b2f38%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22210%2C0%20420%2C0%20420%2C210%22%20fill%3D%22%233a3f4b%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%220%2C210%20210%2C0%20210%2C420%22%20fill%3D%22%23ffd24a%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22210%2C420%20420%2C210%20420%2C420%22%20fill%3D%22%23caa21d%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%220%2C210%20210%2C420%200%2C420%22%20fill%3D%22%233a3f4b%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22210%2C0%20210%2C210%200%2C210%22%20fill%3D%22%230b0b0c%22%20opacity%3D%220.18%22/%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22210%2C210%20420%2C210%20210%2C420%22%20fill%3D%22%230b0b0c%22%20opacity%3D%220.14%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-size:420px 420px;
  background-repeat:repeat;
  opacity:.10;
  transform:rotate(-6deg);
  pointer-events:none;
  filter:saturate(110%);
}

/* Capa con un brillo radial amarillo suave por arriba */
.triangles::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(70% 70% at 50% 0%, rgba(255,210,74,.18), transparent 60%);
  pointer-events:none;
}

/* =======================
   CINTA AMARILLA/NEGRA
   - Imagen repetida en X.
   - Se estira 20px extra a cada lado para compensar el padding.
======================= */
.tape{
  height:var(--tape-h);
  width:100%;
  display:block;

  background-image:url("../static/imagenes/ccin.png");
  background-repeat:repeat-x;
  background-position:left center;   /* importante: anclado a la izquierda para que coincida arriba/abajo */
  background-size:auto 100%;
}

/* La cinta dentro de una tarjeta (.card) sí necesita "salirse" del padding
   de la tarjeta para llegar borde a borde; las cintas de header/hero ya
   están fuera de cualquier contenedor con padding, así que no lo necesitan. */
.card .tape{
  margin-left:-20px;
  margin-right:-20px;
  width:calc(100% + 40px);
}

/* =======================
   BOTONES
======================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.92rem 1.1rem;
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#161824,#10111a);
  color:#fff;
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 26px rgba(0,0,0,.35);
  white-space:nowrap;
  cursor:pointer;
  font-size:inherit;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  border-color:rgba(255,210,74,.25);
}

.btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.btn:active{
  transform:translateY(0);
}

/* Botón amarillo principal */
.btn.primary{
  border-color:transparent;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#0b0b0c;
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 40px rgba(0,0,0,.45);
}

.btn.primary:focus{
  outline-color:#0b0b0c;
}

/* Botón transparente (solo borde) */
.btn.ghost{
  background:transparent;
}

/* =======================
   HEADER / NAV
======================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  padding-top:var(--safe-top);
  background:rgba(11,11,12,.72);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:0;
  will-change:transform;
}

/* Nav principal: una sola línea en desktop */
.nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  position:relative;   /* ancla el panel desplegable de móvil */
}

/* Bloques izquierdo y derecho de la barra */
.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Evitamos que se rompa en varias líneas en escritorio */
.nav-bar{
  flex-wrap:nowrap;
}

.nav-right{
  flex-wrap:nowrap;
  flex:0 0 auto;
}

.nav-left{
  min-width:0;
  flex:1 1 auto;
}

/* Logo: imagen + texto */
.logo{
  height:100px;
  width:auto;
  display:flex;
  align-items:center;
  gap:.65rem;
  font-weight:900;
  letter-spacing:.4px;
  flex:0 0 auto;
  transition:opacity .2s ease;
}

.logo:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.logo:hover{
  opacity:.9;
}

/* Solo la imagen del logo */
.logo-img{
  height:100px;
  width:100px;
  display:block;
}

/* Tags del header en una sola línea con recorte si falta espacio */
.nav-tags{
  display:flex;
  gap:.5rem;
  flex-wrap:nowrap;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}

/* Enlaces de navegación: en escritorio se comportan como el antiguo .nav-right */
.nav-links{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Botón hamburguesa: oculto en escritorio, solo aparece en móvil */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}

.nav-toggle:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.nav-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}

/* Estado abierto: transformamos las 3 barras en una "X" */
.nav-toggle.is-active .nav-toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2){
  opacity:0;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* =======================
   SECCIONES / TIPOGRAFÍA
======================= */
.section{
  padding:58px 0;
  border-bottom:1px solid var(--stroke);
  scroll-margin-top:40px;   /* compensa el header sticky al hacer scroll a la sección */
}

/* Títulos generales */
h1{
  font-size:clamp(2rem, 2.8rem, 3.2rem);
  line-height:1.05;
  margin:.2rem 0 .8rem;
}

h2{
  font-size:1.65rem;
  margin:0 0 14px;
}

h3{
  margin:.15rem 0 .35rem;
}

/* Párrafo lead (se usa en el hero) */
.lead{
  font-size:1.06rem;
  line-height:1.6;
  max-width:60ch;
}

/* =======================
   HERO (estructura actual)
======================= */

/* Clase .hero (aplicada al contenedor del hero dentro de triangles) */
.hero{
  padding:0;       /* controlamos alto solo mediante padding del contenedor */
  min-height:0;
}

/* Ajustes específicos de hero-container para la portada */
.hero-container{
  max-width:1320px;              /* un poco más estrecho para que el texto no se haga enorme */
  padding-top:135px;             /* separa del nav + cinta superior */
  padding-bottom:135px;          /* deja hueco antes de la cinta inferior */
  display:flex;
  justify-content:flex-start;    /* podrías usar center si quisieras centrar todo el bloque */
}

/* Bloque de contenido dentro del hero */
.hero-grid{
  display:flex;
  justify-content:center;
  max-width:760px;               /* ancho máximo del texto */
  margin-inline:auto;            /* centra el bloque dentro del hero-container */
}

/* Extra por si en el futuro quieres tocar este bloque */
.hero-main{
  /* vacío a propósito */
}

/* Títulos solo en el hero (más grandes que el h1 genérico) */
.hero h1{
  font-size:clamp(2.8rem, 4.3vw, 3.6rem);
  line-height:1.05;
}

/* Subtexto algo más grande en el hero */
.hero .lead{
  font-size:1.12rem;
}

/* Más aire entre texto y botones */
.hero-actions{
  margin-top:24px;
}

/* =======================
   GRIDS GENERALES (reutilizados)
======================= */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

/* =======================
   SERVICIOS
======================= */
.service{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#12131b,#0d0e14);
  transition:transform .2s ease, box-shadow .2s ease;
}

.service:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.service:focus-within,
.service:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Icono del servicio (emoji o imagen) */
.icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#0b0b0c;
  box-shadow:0 0 0 1px rgba(0,0,0,.22) inset;
  flex:0 0 auto;
  font-size:1.2rem;
}

/* Imagen dentro de un icono (tarjeta socio) */
.icon img{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* =======================
   SECCIÓN NOSOTROS
   - Texto + galería/slider
======================= */
.section-nosotros{
  /* spacing general ya lo da .section */
}

/* Grid de 2 columnas: texto y galería */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr);
  gap:24px;
  align-items:stretch;
}

/* Tarjeta de galería, columna derecha */
.about-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Contenedor general del slider */
.about-slider{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--stroke);
}

/* Ventana visible del slider con relación de aspecto fija */
.about-slider-window{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3; /* puedes cambiarlo a 16/9 si quieres más panorámico */
  background:#050507;
}

/* Track de imágenes (por si algún día animas desplazamiento) */
.about-slider-track{
  width:100%;
  height:100%;
  position:relative;
}

/* Cada imagen del slider */
.about-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}

/* Imagen visible (la actual) */
.about-slide.is-active{
  opacity:1;
  pointer-events:auto;
}

/* Flechas izquierda/derecha del slider */
.about-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.55);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:1.1rem;
  padding:0;
  transition:all .2s ease;
  z-index:10;
  min-height:44px;
  min-width:44px;
}

.about-prev{
  left:10px;
}

.about-next{
  right:10px;
}

.about-arrow:hover{
  background:rgba(0,0,0,.8);
  border-color:rgba(255,210,74,.7);
  transform:translateY(-50%) scale(1.1);
}

.about-arrow:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.about-arrow:active{
  transform:translateY(-50%) scale(0.95);
}

/* Puntos de navegación del slider */
.about-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:6px;
  flex-wrap:wrap;
}

.about-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.3);
  padding:0;
  cursor:pointer;
  transition:all .2s ease;
  min-height:44px;
  min-width:44px;
  display:grid;
  place-items:center;
}

/* Punto activo (un poco más largo) */
.about-dot.is-active{
  width:18px;
  background:var(--accent);
  border-color:var(--accent);
}

.about-dot:hover{
  border-color:rgba(255,210,74,.7);
  background:rgba(255,255,255,.5);
}

.about-dot:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Logo dentro de la tarjeta de "Quiénes somos" */
.about-logo{
  margin-top: 32px;        /* espacio respecto al último párrafo */
  text-align: center;      /* centra la imagen dentro de la tarjeta */
}

.about-logo img{
  width: 200px;            /* tamaño base del logo */
  max-width: 60%;          /* por si en móviles el contenedor es más estrecho */
  height: auto;            /* mantiene la proporción real (el logo es cuadrado) */
  aspect-ratio: 1 / 1;      /* refuerzo extra para que nunca se ovale */
  display: inline-block;   /* para respetar bien el centrado */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); /* sombra suave, opcional */
}

/* =======================
   PRECIOS
======================= */
.pricing{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.price-card{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:20px;
  background:linear-gradient(180deg,#12131b,#0d0e14);
}

.price{
  font-size:2rem;
  font-weight:900;
  margin:.12rem 0;
}

.check{
  color:var(--ok);
  margin-right:.45rem;
}

/* =======================
   TRABAJOS / GALERÍA
======================= */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.gallery a{
  position:relative;
  display:block;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--stroke);
  transition:transform .2s ease, box-shadow .2s ease;
}

.gallery a:hover{
  transform:scale(1.02);
  box-shadow:var(--shadow);
}

.gallery a:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.gallery a img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Etiqueta overlay en la parte baja de cada imagen */
.gallery a span{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.08);
  padding:.25rem .55rem;
  border-radius:10px;
  font-size:.8rem;
  color:#fff;
  transition:all .2s ease;
}

.gallery a:hover span{
  background:rgba(0,0,0,.75);
  border-color:rgba(255,210,74,.25);
}

/* =======================
   FORMULARIOS / MAPA
   - Estilos compartidos por mapas e inputs
======================= */

/* Contenedor del iframe de Google Maps */
.map{
  border:1px solid var(--stroke);   /* Borde gris oscuro como el resto de tarjetas */
  border-radius:16px;               /* Esquinas redondeadas */
  overflow:hidden;                  /* Oculta lo que sobresalga del iframe */
}

/* Inputs y textareas generales (se aplica al formulario de reserva también) */
input,
textarea{
  width:100%;
  margin-top:.35rem;
  margin-bottom:.8rem;
  padding:.9rem;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:#0c0d12;
  color:#fff;
  outline:none;
  font:inherit;
  font-size:16px;
}

/* Enfoque con borde amarillo (cuando haces click en un input/textarea) */
input:focus,
textarea:focus{
  border-color:rgba(255,210,74,.35);
  box-shadow:0 0 0 3px rgba(255,210,74,.1);
}

/* Mejora para inputs en estado inválido */
input:invalid{
  border-color:#ff5252;
}

/* Mejora para inputs deshabilitados */
input:disabled,
textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
}



/* =======================
   RESERVA: layout del formulario
   ======================= */

/* Limitamos el ancho general de la sección para que no se abra tanto */
.section-reserva .section-container{
  max-width: 900px;       /* ajusta si lo quieres más estrecho o más ancho */
  margin-inline:auto;     /* centra el contenedor */
}

/* Tarjeta del formulario: aún más estrecha, efecto 9:16 aprox en escritorio */
.reserva-card{
  max-width: 720px;       /* ancho máximo de la tarjeta del formulario */
  margin-inline:auto;     /* centrada dentro de la sección */
}

/* Botones del formulario en fila con espacio entre ellos */
.form-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

/* Nos aseguramos de que los botones no se estiren raro */
.form-buttons .btn{
  flex:0 0 auto;
  min-height:48px;
}

/* Banner de mensaje (éxito / error) del formulario */
.form-alert{
  margin-top:14px;
  padding:.75rem 1rem;
  border-radius:12px;
  font-size:.9rem;
  line-height:1.5;
  background:rgba(30,210,139,.08);
  border:1px solid var(--ok);
  color:#e6fff6;
}

/* Variante para mensajes de error */
.form-alert.error{
  background:rgba(255,82,82,.08);
  border-color:#ff5252;
  color:#ffecec;
}

/* Clase auxiliar para ocultar el banner cuando no hace falta */
.is-hidden{
  display:none;
}

/* =======================
   FOOTER
======================= */
.site-footer{
  padding:30px 0;      /* solo arriba/abajo, el ancho lo controla footer-container */
  color:#c9ced7;
  background:var(--bg); /* o el color que tengas de fondo */
}

/* Contenedor interno del footer:
   - limita ancho
   - lo centra
   - añade padding lateral
   - y distribuye los elementos izquierda/derecha */
.footer-container{
  max-width:1320px;        /* mismo que section/header para ir alineado */
  margin:0 auto;           /* centra el bloque */
  padding:0 20px;          /* margen lateral dentro del footer */
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;          /* para que en móvil salte a dos líneas bonito */
}

/* =======================
   HELPERS MÓVIL (desktop-only / mobile-only)
======================= */
.mobile-only{
  display:none;
}

.desktop-only{
  display:block;
}

/* CTA fija de móvil (si la usas en otra página) */
.sticky-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:10px 0 calc(10px + var(--safe-bottom));
  background:rgba(11,11,12,.78);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--stroke);
}

.sticky-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:10px;
  align-items:center;
}

.btn.full{
  width:100%;
}

/* ============================================================
   RESPONSIVE
   - Ajustes específicos para tablet y móvil.
============================================================ */

/* =======================
   TABLET (máx 980px)
======================= */
@media (max-width:980px){

  /* El hero puede ocupar más ancho en tablet */
  .hero-container{
    padding-top:90px;
    padding-bottom:70px;
  }

  .hero-grid{
    max-width:100%;
  }

  /* Nosotros: pasamos a una sola columna (texto encima, fotos debajo) */
  .about-grid{
    grid-template-columns:1fr;
  }

  .section{
    scroll-margin-top:80px;
  }

  h1{
    font-size:clamp(2rem, 5vw, 2.8rem);
  }

  /* Grids en columna */
  .grid-3{
    grid-template-columns:1fr;
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  .pricing{
    grid-template-columns:1fr;
  }

  .gallery{
    grid-template-columns:repeat(2,1fr);
  }

  /* Botones más accesibles en tablet */
  .btn{
    min-height:44px;
  }
}

/* =======================
   MÓVIL (máx 760px)
======================= */
@media (max-width:760px){

  /* Reducimos padding lateral general en móvil, pero dejando aire suficiente */
  :root{
    --page-pad:20px;
  }

  html{
    scroll-padding-top:100px;   /* el header en móvil ahora es una sola fila compacta */
  }

  .section{
    scroll-margin-top:70px;
  }

  /* Header en móvil: el logo y "Reservar" comparten la fila;
     "Servicios/Precios/Trabajos" se ocultan en un panel desplegable. */
  .nav-bar{
    flex-wrap:nowrap;     /* una sola fila: logo + hamburguesa + Reservar */
    gap:10px;
  }

  .nav-left{
    flex:1 1 auto;
    min-width:0;
  }

  .nav-right{
    flex:0 0 auto;
    gap:8px;
  }

  /* Ocultamos los tags del header para no recargar */
  .nav-tags{
    display:none;
  }

  .logo-img{
    height:48px;
    width:48px;
  }

  .logo{
    height:auto;
  }

  /* Mostramos el botón hamburguesa */
  .nav-toggle{
    display:flex;
  }

  /* El panel de enlaces se oculta y se convierte en desplegable
     debajo de la barra de navegación */
  .nav-links{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:14px var(--page-pad) 18px;
    background:rgba(11,11,12,.97);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--stroke);
  }

  /* Estado abierto: lo controla el JS añadiendo esta clase */
  .nav-links.is-open{
    display:flex;
  }

  .nav-links .btn{
    width:100%;
  }

  /* El botón Reservar sigue viéndose como CTA, un poco más compacto */
  .nav-right .btn.primary{
    padding:.7rem .9rem;
    white-space:nowrap;
  }

  /* Hero: ajustamos paddings para que quepa mejor en pantallas pequeñas */
  .hero-container{
    padding-top:60px;
    padding-bottom:40px;
  }

  .hero-grid{
    max-width:100%;
  }

  h1{
    font-size:clamp(1.6rem, 7vw, 2.4rem);
    line-height:1.22;
  }

  /* El salto de línea manual del hero está pensado para desktop;
     en móvil dejamos que el texto fluya según el ancho disponible */
  .hero h1 br{
    display:none;
  }

  /* Centramos todo el bloque del hero (chips, título, texto y botones)
     en vez de dejarlo pegado al borde izquierdo */
  .hero-main{
    text-align:center;
  }

  .hero-main .chips{
    justify-content:center;
  }

  .hero-main .lead{
    margin-inline:auto;
  }

  h2{
    font-size:1.3rem;
  }

  /* Botones en móvil: más grandes y fáciles de clickear */
  .btn{
    width:100%;
    padding:.85rem 1rem;
  }

  .hero-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .hero-actions .btn{
    width:100%;
  }

  /* Inputs más legibles en móvil */
  input,
  textarea{
    font-size:16px;
    padding:1rem;
    min-height:44px;
  }

  textarea{
    min-height:120px;
  }

  /* Grids en columna */
  .grid-3{
    grid-template-columns:1fr;
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  .pricing{
    grid-template-columns:1fr;
  }

  .gallery{
    grid-template-columns:1fr;
  }

  /* Nosotros: pasamos a una sola columna (texto encima, fotos debajo) */
  .about-grid{
    grid-template-columns:1fr;
  }

  /* Tarjeta del formulario en móvil */
  .reserva-card{
    max-width:100%;
    padding:20px;
  }

  .form-buttons{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .form-buttons .btn{
    width:100%;
  }

  /* Service cards: mejor espaciado en móvil */
  .service{
    padding:14px;
    gap:12px;
  }

  /* Slider buttons: más grandes en móvil */
  .about-arrow{
    width:40px;
    height:40px;
    font-size:1.3rem;
  }

  .about-slider-window{
    aspect-ratio:1 / 1;
  }

}

/* =======================
   HELPER: si algún día usas mobile.html
======================= */
@media (max-width:920px){
  .desktop-only{display:none;}
  .mobile-only{display:block;}
}