/*
Theme Name: Adventure Gear Mexico
Theme URI: https://www.adventuregearmexico.mx/
Author: Adventure Gear Mexico
Author URI: https://www.adventuregearmexico.mx/
Description: Tema one-page corporativo con paleta AGM. Optimizado para revisión de Meta.
Version: 1.1
License: GPL-2.0-or-later
Text Domain: adventure-gear-mexico
*/

/* =========  PALETA AGM  =========
   Sea of Tranquility  #81CCD9
   Porpita Porpita     #2696BE
   Eerie Black         #1A1A1A
   White Smoke         #F5F5F5
==================================*/
:root{
  --bg:#1A1A1A;          /* fondo general */
  --card:#202224;        /* tarjetas / paneles */
  --soft:#17191a;        /* variante más oscura */
  --brand:#2696BE;       /* primario (botones, CTAs) */
  --brand-2:#81CCD9;     /* acentos / links */
  --text:#F5F5F5;        /* texto principal */
  --muted:#C8D6DB;       /* texto secundario */
  --accent:#81CCD9;      /* realces */
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:linear-gradient(180deg,#121314,var(--bg));
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ======= Header ======= */
header.site-header{
  position:sticky; top:0; z-index:999;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(16,18,20,.7);
  border-bottom:1px solid rgba(129,204,217,.15);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:12px;align-items:center}
.logo img{height:44px;width:auto;object-fit:contain;border-radius:8px;background:#ffffff12;padding:2px}
@media (max-width:640px){ .logo img{height:36px} }
.brand{font-weight:700;letter-spacing:.2px}
.tag{font-size:12px;color:var(--muted)}

/* ======= Botones ======= */
.btn{
  display:inline-block;padding:12px 18px;border-radius:14px;
  background:var(--brand); color:#09232d; font-weight:700;
  border:1px solid #1E7898; box-shadow:0 6px 24px rgba(38,150,190,.35);
  transition:.2s;
}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent;color:var(--text);border-color:#2a3033}
.btn.outline:hover{border-color:rgba(129,204,217,.6)}

/* ======= Hero ======= */
.hero{
  position:relative;
  padding:80px 0 40px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(129,204,217,.14), transparent),
    radial-gradient(1000px 600px at -10% 10%, rgba(38,150,190,.10), transparent);
  z-index:1;
}
/* overlay para legibilidad sobre foto de fondo */
.hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  z-index:0;
}
.hero > .wrap{ position:relative; z-index:2; }

.hero h1{font-size:clamp(30px,5vw,56px);margin:10px 0}
.hero p{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:780px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ======= Grid / Cards ======= */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  background:linear-gradient(180deg,var(--card),var(--soft));
  border:1px solid rgba(129,204,217,.18);
  border-radius:20px;padding:22px;
}
.kpi{grid-column:span 4;min-height:120px}
@media(max-width:900px){.kpi{grid-column:span 12}}

.section{padding:64px 0}
h2{font-size:clamp(22px,3.6vw,34px);margin:0 0 12px}
p.lead{color:var(--muted);max-width:800px}

ul.clean{list-style:none;padding:0;margin:16px 0 0}
ul.clean li{margin:8px 0;padding-left:26px;position:relative}
ul.clean li:before{content:"✔";position:absolute;left:0;top:0;color:var(--accent)}

.features .card{display:flex;gap:14px;align-items:flex-start}
.features .icon{
  height:36px;width:36px;border-radius:10px;
  background:rgba(129,204,217,.10);
  display:flex;align-items:center;justify-content:center;
  border:1px solid #2a3033;
}

/* ======= Footer ======= */
footer.site-footer{
  padding:50px 0;
  border-top:1px solid rgba(129,204,217,.15);
  background:linear-gradient(180deg,#121314,#0d0e0f);
}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}

.small{font-size:14px;color:var(--muted)}
.badge{font-size:12px;padding:6px 10px;border:1px solid #2a3033;border-radius:999px;color:var(--brand-2)}
.note{font-size:13px;color:var(--muted)}

/* Utilidades */
.section .card h3{margin:0 0 6px}
.hidden{display:none}

/* =======================
   RESPONSIVE / MOBILE
   Pégalo al final del CSS
=========================*/

/* Medidas fluidas por defecto */
img, video, canvas, iframe {max-width:100%; height:auto; display:block}
.wrap{padding:0 16px}

/* Header compacto y legible en móviles */
@media (max-width: 900px){
  header.site-header{
    backdrop-filter:saturate(130%) blur(6px);
    background:rgba(16,18,20,.75);
  }
  .nav{padding:10px 0}
  .logo img{height:34px}
  .brand{font-size:15px}
  .tag{display:none} /* quita subtítulo del logo para dar aire */
}

/* Hero: tipografías y espaciados más contenidos, CTAs en columna */
@media (max-width: 768px){
  .hero{padding:60px 0 28px}
  .hero > .wrap{ text-align:center }
  .hero h1{font-size:clamp(26px,8vw,36px)}
  .hero p{font-size:16px; margin-left:auto; margin-right:auto}
  .hero .ctas{gap:10px; justify-content:center}
  .hero .ctas .btn{width:100%; text-align:center; padding:12px 14px}
}

/* Grid a 1 columna en secciones estrechas, tarjetas más compactas */
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(12,1fr); gap:14px}
  .kpi{grid-column:span 12}
  .features .card{
    flex-direction:column;
    align-items:flex-start;
  }
  .features .icon{
    height:32px; width:32px; border-radius:8px;
  }
}
@media (max-width: 520px){
  .card{padding:16px; border-radius:16px}
  .section{padding:44px 0}
  h2{font-size:22px}
}

/* Footer en una sola columna, con respiro */
@media (max-width: 900px){
  .cols{grid-template-columns:1fr; gap:16px}
  footer.site-footer{padding:40px 0}
}

/* Botones alternativos: mejor contraste y área táctil */
@media (max-width: 768px){
  .btn{min-height:44px}
  .btn.outline{border-color:#354047}
}

/* Listas limpias: alineación y tamaño en mobile */
@media (max-width: 520px){
  ul.clean li{margin:6px 0; padding-left:24px}
  ul.clean li:before{top:1px}
}

/* Tipografía general ligeramente más grande para legibilidad */
@media (max-width: 520px){
  html, body{font-size:16px}
}

/* Safe areas (iPhone con notch, etc.) */
@supports (padding: max(0px)){
  header.site-header{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
  .wrap{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}

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

/* ==== HEADER FIX MOBILE ==== */
@media (max-width: 768px) {
  .site-header, .header, .logo {
    display: flex;
    flex-direction: column;  /* apila elementos en vertical */
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .site-header img, 
  .logo img {
    max-width: 180px;   /* controla tamaño del logo */
    height: auto;
    margin-bottom: 10px;
  }

  .site-header .contacto,
  .site-header .whatsapp,
  .header-buttons a {
    display: inline-block;
    margin: 5px 0;   /* separa botones */
    width: auto;
  }
}


/* ====== ¿QUÉ OFRECEMOS? (ajuste tamaño) ====== */
.que-ofrecemos { padding: 24px 16px; }
.offer-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  max-width:1100px;         /* limita ancho total en desktop */
  margin:0 auto;
}

/* Tarjetas: control de ALTURA responsiva */
.offer-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  width:100%;
  height: clamp(180px, 55vw, 240px);  /* móvil: 180–240px aprox */
  background:#17191a;
  margin:0 auto;                      /* centra en móvil */
}

.offer-card img{
  width:100%;
  height:100% !important;   /* evita que alguna regla global ponga height:auto */
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Título sobre la foto */
.offer-title{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.35));
  color:#fff; font-weight:700;
  font-size:clamp(14px, 2.8vw, 18px);
  line-height:1.2;
}

/* Desktop: dos columnas y altura menor */
@media (min-width:768px){
  .offer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .offer-card{ height: clamp(220px, 22vw, 320px); } /* ~220–320px */
}

/* ====== CONTENEDOR UNIFICADO ====== */
.que-ofrecemos{
  /* mismo ancho que el resto de tu layout */
  width: min(1100px, 100% - 32px);  /* 16px de gutter por lado */
  margin-inline: auto;
  padding-block: 24px;
}

/* la grilla ocupa el 100% del contenedor de la sección */
.que-ofrecemos .offer-grid{
  max-width: none;         /* quita el centrado independiente */
  margin: 12px 0 0;        /* solo separación respecto al título */
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  .que-ofrecemos .offer-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
  }
}

/* altura controlada (puedes ajustar los valores si las ves altas/bajas) */
.que-ofrecemos .offer-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  height: clamp(180px, 52vw, 240px);
  background: #17191a;
}

@media (min-width:768px){
  .que-ofrecemos .offer-card{ height: clamp(220px, 22vw, 320px); }
}

.que-ofrecemos .offer-card img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* overlay más delgado para que no se vea como “barra negra” pesada */
.que-ofrecemos .offer-title{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  color: #fff; font-weight: 700;
  font-size: clamp(13px, 2.6vw, 17px);
  line-height: 1.2;
}

.que-ofrecemos .offer-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width:768px){
  .que-ofrecemos .offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.que-ofrecemos .offer-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #111;
}

/* Imagen se adapta completa, nunca recorta */
.que-ofrecemos .offer-card img {
  width: 100%;
  height: auto;       /* mantiene proporción original */
  display: block;
  object-fit: contain; /* opcional, pero aquí no recorta */
}

/* Overlay del título */
.que-ofrecemos .offer-title {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px,2vw,18px);
}