/* ==========
   Base y variables
   ========== */
:root{
  --bg: #f8fafc;
  --text: #0e151b;
  --muted: #4e7997;
  --line: #e7eef3;
  --primary: #1991e6;
  --chip: #e7eef3;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --mw: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
button{font:inherit}
a{color:inherit;text-decoration:none}

/* Contenedores fluidos para el resto del sitio */
.container{width:100%;max-width:var(--mw);margin-inline:auto;padding-inline:clamp(12px,4vw,40px)}
.page{min-height:100dvh;display:flex;flex-direction:column}
.main{flex:1}

/* ==========
   Header FULL-WIDTH (sin .container)
   ========== */
.header{
  width:100%;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr; /* logo | nav (incluye burger en móvil) */
  align-items:center;
  gap:12px;
  padding:12px clamp(12px,4vw,40px); /* padding propio => full-width real */
}

/* Sticky + sombra en desktop */
@media (min-width:992px){
  .header{
    position: sticky;
    top: 0;
    z-index: 50;
    background:#fff;
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  }
}
.scroll-sentinel{ height:1px; }
@media (min-width:992px){
  body:has(.scroll-sentinel:not(:in-view)) .header{
    background: rgba(255,255,255,0.75);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom-color: rgba(231,238,243,.6);
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  }
}

/* Marca */
.brand{display:flex;align-items:center;gap:.5rem}
.brand__dot{width:18px;height:18px}
.brand__title{font-size:clamp(1.05rem,2.5vw,1.25rem);font-weight:800;letter-spacing:-.015em;margin:0}

/* Toggle + burger */
.nav__toggle{ position:absolute; opacity:0; pointer-events:none; }
.burger{
  justify-self:end; /* a la derecha del header */
  display:inline-flex; flex-direction:column; gap:4px; padding:8px 6px;
  border-radius:10px; cursor:pointer; border:1px solid transparent;
}
.burger span{
  width:22px; height:2px; background:var(--text); display:block;
  transition:transform .2s ease, opacity .2s ease;
}

/* NAV dentro del header__inner */
.nav{
  width:100%;
  background:#fff;
  max-height:0;               /* cerrado en móvil */
  overflow:hidden;
  transition:max-height .25s ease, border-color .25s ease;
  border-top:1px solid transparent;
}
.nav__panel{
  /* MÓVIL: contenido alineado a la derecha */
  padding:10px 0;
  display:flex; flex-direction:column; gap:12px;
  align-items:flex-end;           /* <-- alinea a la derecha */
  text-align:right;               /* <-- texto a la derecha */
}
.nav__link{ padding:10px 2px; font-weight:600; opacity:.95; }
.nav__link:hover{ opacity:1; }
.header__cta{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  justify-content:flex-end;       /* CTA a la derecha en móvil */
}

/* Abrir/cerrar en móvil */
.nav__toggle:checked ~ .header__inner .nav{
  max-height:500px; border-top:1px solid var(--line);
}
.nav__toggle:checked ~ .header__inner .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle:checked ~ .header__inner .burger span:nth-child(2){ opacity:0; }
.nav__toggle:checked ~ .header__inner .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* DESKTOP: 1 fila completa, barra a lo ancho */
@media (min-width:992px){
  .burger, .nav__toggle{ display:none; }

  .header__inner{
    grid-template-columns:auto 1fr; /* logo | barra ocupa el resto */
    column-gap:clamp(16px, 2vw, 32px);
  }

  .nav{
    max-height:none; overflow:visible; border-top:0; background:transparent;
  }

  /* Distribución a lo ancho:
     4 enlaces | espacio flexible | CTA al final (todo en una fila) */
  .nav__panel{
    width:100%;
    display:grid;
    grid-auto-flow:column;
    align-items:center;
    gap:clamp(16px,2vw,32px);
    grid-template-columns:auto auto auto auto 1fr auto;
    align-items:center;
    text-align:left;   /* vuelve a alineación normal en desktop */
  }
  .nav__panel .nav__link{ padding:0 }
  .nav__panel .header__cta{ justify-self:end; }
}

/* Avatar */
.avatar{
  width:40px;height:40px;border-radius:999px;background-size:cover;background-position:center;
  flex:0 0 40px
}

/* ==========
   Botones
   ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 16px;border:0;border-radius:var(--radius);
  cursor:pointer;font-weight:800;letter-spacing:.015em;white-space:nowrap
}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{filter:brightness(.95)}
.btn--secondary{background:var(--line)}
.btn--lg{height:52px;padding:0 20px}
.icon{display:inline-flex}

/* ==========
   Hero
   ========== */
.hero{
  min-height:min(70vh,560px);display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;border-radius:16px;
  margin-block:24px;padding:clamp(12px,4vw,24px);box-shadow:var(--shadow)
}
.hero__title{
  color:#fff;font-size:clamp(1.8rem,5vw,3rem);font-weight:900;letter-spacing:-.033em;line-height:1.1;margin:0
}
.hero__subtitle{
  color:#fff;font-size:clamp(.95rem,2.2vw,1.0625rem);max-width:720px;margin:.25rem auto 0
}

/* ==========
   Secciones
   ========== */
.section{margin-block:8px}
.section__title{
  font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:800;letter-spacing:-.015em;
  padding:8px 0 0 0;margin:0
}

/* Chips (decorativo) */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;padding:12px 0}
.chip{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;
  background:var(--chip);border-radius:12px;font-size:.95rem;font-weight:600
}

/* Cards: móvil carrusel, desktop grilla */
.scroll-x{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.cards{
  display:flex;gap:12px;padding:12px 0 4px 0;
}
.card{
  min-width:75%;
  flex:0 0 auto;display:flex;flex-direction:column;gap:12px;border-radius:12px
}
.card__media{
  aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:12px;box-shadow:var(--shadow)
}
.card__title{font-size:1rem;font-weight:700;margin:0}
.card__text{color:var(--muted);font-size:.95rem;margin:.25rem 0 0}

/* A partir de tablets: 2 columnas; desktop: 3 */
@media (min-width:768px){
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .card{min-width:0}
}
@media (min-width:1120px){
  .cards{grid-template-columns:repeat(3,1fr)}
}

/* Grid de ofertas responsive */
.grid{
  display:grid;gap:12px;padding:12px 0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tile{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.tile__media{
  aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:12px;box-shadow:var(--shadow)
}
.tile__title{font-size:1rem;font-weight:700;margin:0}
.tile__text{color:var(--muted);font-size:.95rem;margin:.25rem 0 0}

@media (min-width:600px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:992px){ .grid{gap:16px} }

/* CTA */
.cta{
  display:grid;gap:16px;align-items:center;justify-items:center;text-align:center;
  padding:clamp(28px,6vw,64px) 0
}
.cta__title{
  font-size:clamp(1.5rem,3.2vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  max-width:720px;margin:0
}
.cta__text{max-width:720px;margin:0;color:var(--text)}
.cta__actions .btn{width:100%}
@media (min-width:540px){ .cta__actions .btn{width:auto} }

/* ==========
   Footer
   ========== */
.site-footer{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:28px clamp(12px,4vw,40px);text-align:center;border-top:1px solid var(--line)
}
.footer__links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.footer__link{color:var(--muted)}
.footer__social{display:flex;gap:16px;justify-content:center}
.social{color:var(--muted)}
.footer__copy{color:var(--muted);margin:0}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ====== Buscador / Inputs ====== */
.search{ margin-top:8px; }
.input-group{
  display:flex; align-items:center;
  background:var(--chip); border-radius:var(--radius-lg);
  height:48px; padding:0 12px; box-shadow:var(--shadow);
}
.input-group__icon{ display:inline-flex; color:var(--muted); }
.input{
  flex:1; border:0; outline:0; background:transparent; color:var(--text);
  font-size:1rem; padding:0 8px;
}
.input::placeholder{ color:var(--muted); }

/* ====== Tabs ====== */
.tabs{
  display:flex; gap:clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line);
  margin-top:12px;
}
.tabs__link{
  display:inline-block; padding:12px 0; font-weight:800; letter-spacing:.015em;
  color:var(--muted); border-bottom:3px solid transparent;
}
.tabs__link:hover{ color:var(--text); }
.tabs__link.is-active{
  color:var(--text); border-bottom-color:var(--primary);
}

/* ====== Paginación ====== */
.pager{
  display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 0;
}
.pager__link{
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--text);
}
.pager__link--active{ background:var(--chip); }
.pager__ellipsis{ color:var(--text); display:flex; align-items:center; justify-content:center; width:40px; height:40px; }

/* ======= Utilidades pequeñas ======= */
.mb-2{ margin-bottom:12px; }
.muted{ color:var(--muted); }

/* ======= Formulario de contacto ======= */
.form{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.form--narrow{ max-width:560px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.label{ font-weight:600; color:var(--text); }
.input-text, .textarea{
  width:100%;
  border:1px solid #dce1e5;
  background:#fff;
  border-radius:var(--radius-lg);
  color:var(--text);
  font-size:1rem;
  padding:15px;
  outline:0;
}
.input-text{ height:56px; }
.textarea{ min-height:144px; resize:vertical; }
.actions{ margin-top:6px; }

/* ======= Lista de información (ubicación, teléfono, etc.) ======= */
.info-list{ display:grid; gap:0; margin-top:6px; border-top:1px solid #dce1e5; }
.info-row{ display:grid; grid-template-columns:minmax(120px,20%) 1fr; gap:16px; padding:14px 0; border-bottom:1px solid #eef2f5; }
.info-key{ color:var(--muted); font-size:.95rem; margin:0; }
.info-val{ color:var(--text); font-size:.95rem; margin:0; }
@media (max-width:600px){
  .info-row{ grid-template-columns:1fr; }
}

/* ======= Redes sociales ======= */
.social-list{
  display:flex; flex-wrap:wrap; gap:12px; padding-top:8px;
}
.social-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:96px; padding:10px 6px; text-align:center;
}
.social-item__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; background:var(--chip); color:var(--text);
}
.social-item__label{ font-size:.95rem; color:var(--text); }


/* ===== HERO con video YouTube ===== */
.hero{
  position: relative;          /* Para posicionar video y overlay */
  overflow: hidden;            /* Recortar video a los bordes redondeados */
}

.hero--video{
  background: none;            /* Sin imagen de fondo */
}

/* Capa del video ocupando todo el hero */
.hero__video{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;        /* Evita captar scroll/clicks sobre el iframe */
}

/* Truco para “cover” con iframe de YouTube */
.hero__video iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  /* Tamaños calculados para cubrir 16:9 sin barras negras en la mayoría de casos */
  width: 100vw;
  height: 56.25vw;             /* 100vw * 9/16 */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  display: block;
}

/* Oscurecido sutil para legibilidad del texto */
.hero--video::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.38));
}

/* Asegurar que el contenido y el botón queden por encima del video */
.hero__content,
.hero .btn{
  position: relative;
  z-index: 2;
}