/* ================================
   EL PUESTO HOME V1 STYLES
   Minimal / Premium / Fast
   ================================ */

   :root{
    --bg: #0e0f11;
    --bg-soft: #15171a;
    --bg-alt: #0b0c0e;
    --text: #f3f3f3;
    --muted: #b9bcc2;
    --brand: #c8924b;        /* warm fire-gold */
    --brand-2: #e2b36a;
    --stroke: rgba(255,255,255,.08);
    --radius: 18px;
    --shadow: 0 10px 40px rgba(0,0,0,.45);
    --maxw: 1100px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
  }

  .serif {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    letter-spacing: .5px;
  }

/* ================================
   HEADER / NAV DARK ALWAYS
   ================================ */

/* --- BASE BRAND --- */
.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  letter-spacing:.3px;
}
.brand img{
  padding:0;
  margin:0;
  border-radius:0;
  background:transparent;
}

/* --- HEADER CORE --- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:none; /* 👈 sin borde, adiós línea */
  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    backdrop-filter .25s ease;
}

/* 1) TRANSPARENTE SOBRE HERO (negro → transparente) */
.site-header.transparent{
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.60),
    rgba(0,0,0,0)
  );
  box-shadow:none;
  backdrop-filter:none;
}

/* texto claro en transparente */
.site-header.transparent .nav a,
.site-header.transparent .brand,
.site-header.transparent .brand span{
  color:#fff;
}

/* 2) SOLID OSCURO AL SALIR DEL HERO */
.site-header.solid{
  background:rgba(5,6,8,0.96); /* negro casi pleno */
  border-bottom:none;          /* 👈 asegurado sin borde */
  backdrop-filter:saturate(150%) blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.65);
}

/* texto claro en solid también */
.site-header.solid .nav a,
.site-header.solid .brand,
.site-header.solid .brand span{
  color:#f5f5f5;
}

/* LOGOS USAMOS SOLO EL BLANCO */
.brand .logo{
  height:44px;
  width:auto;
  display:block;
  transition:opacity .25s ease;
}

/* logo blanco siempre visible */
.brand .logo-light{ opacity:1; }

/* logo negro se mantiene oculto */
.brand .logo-dark{
  opacity:0;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}

/* aseguramos que al hacer scroll NO cambie a logo negro */
.site-header.solid .logo-light{ opacity:1; }
.site-header.solid .logo-dark{ opacity:0; }

/* Header móvil: ocultar logo y alinear botón menú a la derecha */
@media (max-width: 640px){
  .site-header .brand{
    display:none;
  }

  .site-header{
    justify-content:flex-end;
    padding-inline: 16px;
  }
}

  /* ================================
     SECTIONS GLOBAL
     ================================ */
  
     .section{
      max-width:var(--maxw);
      margin:0 auto;
      padding:64px 18px;
    }
    
    .section h2{
      font-size:clamp(22px, 3vw, 30px);
      margin:0 0 8px;
      letter-spacing:.3px;
    }
    
    .section .sub{
      color:var(--muted);
      margin-top:4px;
    }
    
    .center{ text-align:center; }

    /* GENERAL LINK STYLE (premium) */
    a {
      color: var(--brand); /* or your gold / accent color */
      text-decoration: none;
    }

    /* HOVER EFFECT */
    a:hover {
      opacity: 0.8;
    }

    /* VISITED LINKS (prevent ugly purple) */
    a:visited {
      color: var(--brand);
    }

    

/* ================================
   PREMIUM HAMBURGER WHITE + TIGHT
   ================================ */

   .nav-toggle{
    display:grid;
    place-items:center;
    width:48px;
    height:36px;
    background:transparent;
    border:none;
    cursor:pointer;
    transition:transform .25s ease;
    gap:2px;
  }
  .nav-toggle:hover{ transform:translateY(-1px); }
  
  .nav-toggle span{
    display:block;
    width:30px;
    height:2px;
    background:#fff;
    border-radius:999px;
    margin:3px 0;
    transition:transform .25s ease, opacity .25s ease, background .25s ease;
  }
  
  /* en solid header → líneas negras */
  .site-header.solid .nav-toggle span{
    background:#111;
  }
  


/* Overlay container*/
.nav-overlay{
  position:fixed;
  inset:0;
  background:#050505;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;      
  /* START STATE */
  opacity:0;
  transform:translateX(8%);   /* 🔥 sweep from right */
  pointer-events:none;

  /* ANIMATIONS */
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* subtle grain/texture */
.nav-overlay::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(200,146,75,.05), transparent 55%),
    radial-gradient(700px 500px at 90% 80%, rgba(255,255,255,.03), transparent 60%),
    repeating-radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.015) 0 1px,
      transparent 1px 3px);
  mix-blend-mode:screen;
  opacity:.35;
  pointer-events:none;
}

/* open state */
body.nav-open .nav-overlay{
  opacity:1;
  transform:translateX(0);  
  pointer-events:auto;
}

/* Close (X) */
.nav-close{
  position:absolute;
  top:26px;
  right:26px;           /* moved to right */
  width:44px;
  height:44px;
  background:transparent !important;
  border:none !important;
  color:var(--brand-2);
  font-size:26px;       /* slightly larger, more elegant */
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .25s ease, color .25s ease;
}

.nav-close:hover{
  transform:translateY(-1px);
  color:#f8d79a;        /* lighter gold on hover */
}

/* Panel */
.nav-panel{
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:26px;
  z-index:2;

  opacity:0;
  transform:translateX(18px);  /* enters from right */
  transition:
    opacity .35s ease .10s,
    transform .45s cubic-bezier(.22,.61,.36,1) .10s;
}

body.nav-open .nav-panel{
  opacity:1;
  transform:translateX(0);
}

/* stagger items */
.nav-panel li{
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}

body.nav-open .nav-panel li{
  opacity:1;
  transform:translateY(0);
}

/* delays */
body.nav-open .nav-panel li:nth-child(1){ transition-delay:.12s; }
body.nav-open .nav-panel li:nth-child(2){ transition-delay:.20s; }
body.nav-open .nav-panel li:nth-child(3){ transition-delay:.28s; }
body.nav-open .nav-panel li:nth-child(4){ transition-delay:.36s; }
body.nav-open .nav-panel li:nth-child(5){ transition-delay:.44s; }


/* Items */
.nav-panel a{
  text-decoration:none;
  color:var(--brand-2);  /* dorado fuego */
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:clamp(16px, 2.2vw, 22px);
  opacity:.9;
  transition:opacity .2s ease, transform .2s ease, color .2s ease;
  position:relative;
  padding:6px 10px 14px;
}

/* ember glow divider line */
.nav-panel a::after{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:64px; height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity:.45;
  box-shadow:0 0 10px rgba(200,146,75,.55);
}

.nav-panel a:hover{
  opacity:1;
  transform:translateY(-1px);
  color:#f2c57a;
}

/* Reduce overlays on tiny screens */
@media (max-width: 520px){
  .nav-panel{ gap:20px; }
  .nav-panel a{ letter-spacing:.22em; }
}


/* ================================
   HERO hybrid (Luxury clean + Cinematic ghost)
   ================================ */
   .hero{
    position:relative;
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:var(--bg-alt);
    color:#fff;
  }
  
  .hero-bg,
  .hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.03);
    filter: contrast(1.08) saturate(1.1) brightness(.95);
  }
  
  /* overlay cinematic */
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(900px 600px at 50% 65%, rgba(0,0,0,.05), rgba(0,0,0,.72)),
      linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.78));
    z-index:1;
  }
  
  /* ghost logo watermark */
  .hero-ghost{
    position:absolute;
    inset:0;
    background-image:url("assets/images/logo.png");
    background-repeat:no-repeat;
    background-position:center 45%;
    background-size:min(68vw, 520px);
    opacity:.07;
    filter: invert(1) brightness(1.1) blur(.2px); /* ✅ ghost blanco */
    transform: translateY(6px);
    z-index:1;
    pointer-events:none;
  }
  
  /* content */
  .hero-content{
    position:relative;
    z-index:3;
    text-align:center;
    padding:110px 18px 56px;
    max-width:900px;
    margin-inline:auto;
  }
  
    /* ✅ hero logo always white */
    .hero-logo{
      width:140px;
      height:auto;
      margin:0 auto 18px;
      opacity:.95;
      filter: invert(1) brightness(1.2) drop-shadow(0 6px 20px rgba(0,0,0,.55));
    }
  
    .hero-title{
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-size:clamp(26px, 4.2vw, 50px);
      margin:0 0 8px;
      line-height:1.1;
      color:#fff;
      text-shadow:0 4px 16px rgba(0,0,0,.55);
    }
  
    .hero-subtitle{
      color:var(--brand-2);
      font-weight:600;
      letter-spacing: 0.4px;
      font-size: 1.65rem;
      margin-bottom:12px;
      text-shadow:0 3px 10px rgba(0,0,0,.6);
    }
  
  .hero-text{
    color:rgba(255,255,255,.85);
    font-size:clamp(15px, 2vw, 18px);
    max-width:100%;
    margin:0 auto 22px;
    line-height:1.6;
    text-shadow:0 3px 12px rgba(0,0,0,.6);
  }
  
  /* CTA buttons premium */
  .cta-group{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:12px;
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.28);
    text-decoration:none;
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:.35px;
    transition: all .2s ease;
    background:rgba(0,0,0,.18);
    backdrop-filter: blur(4px);
  }
  
  .btn:hover{
    transform: translateY(-1px);
    border-color:rgba(255,255,255,.5);
    background:rgba(0,0,0,.4);
  }
  
  .btn.primary {
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    color:#111;
    border:none;
  }
  
  .btn.ghost {
    border:1px solid rgba(255,255,255,.7);
    background:transparent;
  }
  
  .hero-scroll{
    margin-top:26px;
    font-size:20px;
    opacity:.6;
    animation: floaty 1.8s ease-in-out infinite;
  }
  
  @keyframes floaty{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(6px); }
  }
  
  @media (max-width: 680px) {

    .hero-content{
      padding-top: 110px;   /* baja un poco más el bloque para respirar */
      padding-left: 16px;
      padding-right: 16px;
    }
  
    .hero-logo{
      width: 90px;
    }
  
    .hero-title{
      font-size: 1.7rem;    /* MÁS GRANDE en mobile */
      letter-spacing: .08em;
    }
  
    .hero-subtitle{
      font-size: 1.4rem;    /* buen tamaño para el tagline */
      margin-top: 10px;
      margin-bottom: 10px;
    }
  
    .hero-text{
      font-size: 0.95rem;   /* subimos un poco el cuerpo */
      line-height: 1.6;
      max-width: 32rem;
    }
  }
  
/* =========================================
   EXPERIENCIA + HIGHLIGHTS + COLLAGE
   ========================================= */

   section.experiencia{
    padding: clamp(40px, 6vw, 82px) 0 clamp(20px, 7vw, 20px);
    background: radial-gradient(
      1200px 700px at 50% -10%,
      rgba(255,255,255,.04),
      transparent 60%
    );
  }
  
  .experiencia .wrap{
    width:min(1100px, 92vw);
    margin:0 auto;
  }
  
  /* ------------------------------
     TÍTULO + SUBTÍTULO
     ------------------------------ */
  .exp-head{
    text-align:center;
    margin-bottom: clamp(18px, 3vw, 28px);
  }
  
  .exp-head h2{
    font-size:clamp(22px, 3vw, 30px);
    margin:0;
    letter-spacing:.3px;
  }
  
  .exp-head p{
    max-width: 620px;
    margin: 6px auto 0;
    color:var(--muted);
    font-size:clamp(14px, 1.8vw, 16px);
  }
  
  /* ------------------------------
     HIGHLIGHTS GRID
     (soporta highlights o highlights-grid)
     ------------------------------ */
  .highlights,
  .highlights-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-bottom: clamp(22px, 3vw, 34px);
  }
  
  .highlight{
    background:var(--bg-soft);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    padding:20px 18px;
    box-shadow:var(--shadow);
    text-align:center;
  }
  
  .highlight h3{
    margin:0 0 6px;
    font-size:18px;
    color:var(--brand-2);
  }
  
  .highlight p{
    margin:0;
    font-size:15px;
    color:var(--muted);
  }
  
  /* Responsive: highlights se apilan */
  @media(max-width:820px){
    .highlights,
    .highlights-grid{
      grid-template-columns:1fr;
      gap:14px;
    }
  }
  
  /* ------------------------------
     COLLAGE 3 IMÁGENES OVERLAP
     ------------------------------ */
  .triple-collage{
    position:relative;
    height: clamp(300px, 42vw, 460px);
    display:grid;
    place-items:center;
    isolation:isolate;
    margin-top: clamp(8px, 1.6vw, 14px);
  }
  
  .triple-collage .shot{
    position:absolute;
    width: clamp(220px, 38vw, 420px);
    aspect-ratio: 4 / 3;
    overflow:hidden;
    border-radius:18px;
    background:#0b0c0e;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 60px rgba(0,0,0,.55);
    transform-origin:center;
    transition: transform .45s ease, box-shadow .45s ease;
  }
  
  .triple-collage .shot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.02);
  }
  
  /* Posiciones */
  .shot-center{
    z-index:3;
    width: clamp(240px, 42vw, 460px);
    transform: translateY(0) scale(1);
    box-shadow:0 22px 70px rgba(0,0,0,.65);
  }
  
  .shot-left{
    z-index:2;
    transform: translateX(-48%) translateY(8%) scale(.96) rotate(-1.2deg);
    filter:saturate(.95) contrast(1.02);
  }
  
  .shot-right{
    z-index:1;
    transform: translateX(48%) translateY(12%) scale(.94) rotate(1.2deg);
    filter:saturate(.95) contrast(1.02);
  }
  
  /* Hover suave desktop */
  @media (hover:hover){
    .triple-collage .shot:hover{
      transform: translateX(var(--tx,0)) translateY(var(--ty,0)) scale(1.01);
      box-shadow:0 26px 80px rgba(0,0,0,.75);
      z-index:4;
    }
    .shot-left:hover{ --tx:-48%; --ty:6%; }
    .shot-right:hover{ --tx:48%; --ty:10%; }
    .shot-center:hover{ --tx:0%; --ty:-1%; }
  }
  
  /* Mobile: apilado */
  @media(max-width:720px){
    .triple-collage{
      height:auto;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
  
    .triple-collage .shot{
      position:relative;
      width:100%;
      max-width:520px;
      transform:none !important;
    }
  
    .shot-center{ order:1; }
    .shot-left{ order:2; }
    .shot-right{ order:3; }
  }
  
  

/* ================================
   CTA RESERVA – Versión Premium
   ================================ */

   .cta-strip{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    padding: 80px 20px 70px; /* MÁS AIRE */
    margin: 90px 0 80px;     /* separación más elegante entre secciones */
  }
  
  .cta-inner{
    max-width: var(--maxw);
    margin: 0 auto;
    text-align:center;
  }
  
  .cta-strip h2{
    margin: 0 0 14px;       /* más espacio bajo el título */
    font-size: 2rem;
  }
  
  .cta-strip p{
    margin: 0 0 26px;       /* más espacio bajo el texto principal */
    font-size: 1.05rem;
  }
  
  /* BOTÓN PRINCIPAL */
  .btn.cta-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 38px;
    border-radius:999px;
    background:#111;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 10px 32px rgba(0,0,0,.45);
    margin-bottom: 26px;     /* separa del texto secundario */
  }
  
  /* TEXTO SECUNDARIO ("¿Quieres ver qué ofrecemos?…") */
  .cta-secondary{
    margin-top: 12px;
    font-size:.92rem;
    color: rgba(44, 28, 15, .75); /* más elegante */
    line-height: 1.55;
  }
  
  .cta-secondary a{
    color: rgba(44, 28, 15, .95);
    font-weight:600;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.25);
    padding-bottom:1px;
  }
  
  .cta-secondary a:hover{
    opacity:.85;
  }
  

  
/* ================================
   EXPERIENCE (2 cols)
   ================================ */

   .section.experience{
    max-width: var(--maxw);
    margin: 80px auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
  }
  
  .exp-content h2{
    margin: 0 0 16px;
    font-size: 2rem;
  }
  
  .exp-content p{
    color: var(--muted);
    margin: 0 0 22px;
    line-height: 1.7;
  }
  
  .exp-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .exp-image img{
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: var(--shadow);
    transform: translateX(-60px);
  }
  
  /* Mobile */
  @media(max-width: 820px){
    .section.experience{
      grid-template-columns: 1fr;
      gap: 22px;
      margin: 50px auto;
      text-align:center;
    }
  
    .exp-actions{
      justify-content:center;
    }
  
    .exp-image img{
      max-height:none;
      transform:none;
    }
  }
  
  
/* ================================
   VISÍTANOS / UBICACIÓN
   ================================ */

   .visitanos{
    padding: 70px 20px 90px;
  }
  
  .visitanos-inner{
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1.1fr); /* texto izq, mapa der */
    gap: 40px;
    align-items: center;
  }
  
  .visitanos-info{
    flex: 1;
    max-width: 380px;          /* acota el ancho para mejor lectura */
  }

  .visitanos-info h2{
    margin: 0 0 16px;
    font-size: 2rem;
  }
  
  .visitanos-texto{
    color: var(--muted);
    margin: 0 0 10px;
    line-height: 1.7;
    font-size: 0.98rem;
  }
  
  
  .visitanos-info a{
    color: var(--brand-2);
    text-decoration: none;
  }
  
  .visitanos-info a:hover{
    opacity: .9;
  }
  
/* separa dirección del bloque teléfono/mail */
.visitanos-texto + .visitanos-texto{
  margin-top: 8px;
}

/* botón un pelín más separado del texto */
.visitanos .btn.ghost{
  margin-top: 14px;
}

  /* botón ghost ya existe, reutilizas .btn.ghost */
  
  .visitanos-map iframe{
    width: 100%;
    height: 260px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  
  /* MOBILE */
  @media (max-width: 820px){
    .visitanos{
      padding: 60px 20px 80px;
    }
  
    .visitanos-inner{
      grid-template-columns: 1fr;
      gap: 26px;
      text-align: center;
    }
  
    .visitanos-map iframe{
      height: 230px;
    }
  
    .visitanos .btn.ghost{
      justify-content: center;
    }
  }
  
  
  /* ================================
     FOOTER
     ================================ */
  .footer{
    padding:38px 18px;
    text-align:center;
    background:#08090a;
    border-top:1px solid var(--stroke);
  }
  .footer-logo{
    width:70px;
    height:auto;
    margin-bottom:10px;
  }
  .footer-desc{
    color:var(--muted);
    max-width:700px;
    margin:0 auto 14px;
    font-size:15px;
  }
  .footer-badges{
    display:flex;
    justify-content:center;
    gap:12px;
    margin:10px 0 12px;
    flex-wrap:wrap;
  }
  .footer-badges img{
    height:42px; width:auto;
    opacity:.95;
  }
  .footer-address{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
  }
  .footer-address a{ color:var(--text); text-decoration:none; }
  .footer-social{
    margin-top:12px;
  }
  .footer-social img{
    height:20px;
    opacity:.9;
  }
  .footer-copy{
    margin-top:12px;
    color:#777;
    font-size:12px;
  }
  

  .footer-social{
    margin-top: 16px;
  }
  
  .footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }
  
  .icon-ig{
    width:24px;
    height:24px;
    fill:none;
    stroke:#f3f3f3;
    stroke-width:1.6;
  }
  
  .footer-social a:hover .icon-ig{
    stroke:var(--brand-2);
  }

  .footer-seo {
    max-width: 680px;
    margin: 24px auto 12px;
    text-align: center;
    font-size: 0.9rem; 
    line-height: 1.55;
    color: #c9c9c9; 
    opacity: 0.8; /* antes .75 */
  }
  
  .footer-address {
    margin-top: 10px;
  }
  .footer-social {
    margin-top: 10px; /* antes 16px */
  }
  .footer-copy {
    margin-top: 10px; /* antes 12px */
  }
  
  
  /* ================================
   HERO SUBPÁGINAS (CONTACTO, ETC.)
   ================================ */

.hero.hero-sub{
  min-height: 55vh;                /* más baja que el home */
}

.hero.hero-sub .hero-content{
  padding-top: 120px;
  padding-bottom: 70px;
  max-width: 760px;
}

.hero.hero-sub .hero-title{
  font-size: clamp(24px, 3.4vw, 36px);
}

.hero.hero-sub .hero-subtitle{
  font-size: clamp(13px, 1.6vw, 18px);
}

/* opcional: un overlay un pelín más suave que en el home */
.contact-hero::after{
  background:
    radial-gradient(900px 600px at 50% 65%, rgba(0,0,0,.05), rgba(0,0,0,.65)),
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.78));
}

/* ================================
   CONTACTO 2 COLUMNAS
   ================================ */

.contact-section{
  padding: 70px 20px 80px;
}

.contact-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1.1fr);
  gap: 40px;
  align-items: flex-start;
}

.contact-info h2{
  margin: 0 0 14px;
  font-size: 2rem;
}

.contact-lead{
  color: var(--muted);
  margin: 0 0 20px;
  max-width: 420px;
}

.contact-block{
  margin-bottom: 18px;
}

.contact-block h3{
  margin: 0 0 4px;
  font-size: 0.98rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-2);
}

.contact-block p{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.contact-note{
  display:block;
  margin-top: 3px;
  font-size: 0.86rem;
  opacity:.85;
}

.contact-info a{
  color: var(--brand-2);
  text-decoration:none;
}

.contact-info a:hover{
  opacity:.9;
}

.contact-small{
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-map iframe{
  width: 100%;
  height: 310px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* MOBILE CONTACTO */
@media (max-width: 820px){
  .contact-inner{
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
  }
  .contact-lead,
  .contact-block p,
  .contact-small{
    margin-left:auto;
    margin-right:auto;
  }
  .contact-info .btn{
    justify-content:center;
  }
}

/* ================================
   FAQ SOBRIO
   ================================ */

.section.faq{
  padding: 60px 18px 80px;
  max-width: var(--maxw);
  margin: 0 auto 40px;
  border-top: 1px solid var(--stroke);
}

.section.faq h2{
  text-align:center;
  margin-bottom: 22px;
}

.faq-item{
  background: var(--bg-soft);
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  margin-bottom: 12px;
}

.faq-item h3{
  margin: 0 0 6px;
  font-size: 0.98rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-2);
}

.faq-item p{
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height:1.7;
}

.faq-item a{
  color: var(--brand-2);
  text-decoration:none;
}

.faq-item a:hover{
  opacity:.9;
}

.map-note{
  margin-top: 10px;
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
}
.map-note a{
  color: var(--brand-2);
  text-decoration: none;
}

.btn-llamar{
  transform: translateX(-2px);
}
/* =========================================
   LA EXPERIENCIA LAYOUT & BLOQUES
   ========================================= */

/* Overlay del hero ligeramente distinto al de contacto */
.exp-hero::after{
  background:
    radial-gradient(900px 600px at 50% 65%, rgba(0,0,0,.06), rgba(0,0,0,.78)),
    linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,.82));
}

/* BLOQUES DE TEXTO (ORIGEN, FUEGO, AMBIENTE) */

.exp-block{
  /* .section ya trae max-width + padding */
  max-width: var(--maxw);
  margin: 0 auto;
}

.exp-inner{
  /* wrapper interno para controlar layouts */
  max-width: 100%;
}

/* 2 COLUMNAS (texto + imagen) */

.exp-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
  margin-top: 12px;
}

.exp-layout.reverse{
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

/* Texto */
.exp-text h2{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
}

.exp-text p{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.98rem;
}

.exp-text a {
  color: var(--brand); /* tu color dorado */
  text-decoration: none;
  transition: opacity .2s ease;
}

.exp-text a:hover {
  opacity: 0.7;
}

.exp-text a:visited {
  color: var(--brand); /* evitar morado feo */
}

/* Imagen / media */
.exp-media picture,
.exp-media img{
  display:block;
  width:100%;
  height:100%;
}

.exp-media img{
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Variante fuego: leve acento dorado de fondo */
.exp-fire{
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(200,146,75,.05), transparent 60%);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

/* BLOQUE UBICACIÓN / ENTORNO */

.exp-location{
  text-align:left;
}

.exp-location .exp-inner{
  max-width: 760px;
}


/* CTA Buttons Refinement */
.section.exp-cta .cta-actions a {
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all .25s ease;
}

/* Principal */
.section.exp-cta .cta-main {
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 rgba(255,255,255,0);
}

.section.exp-cta .cta-main:hover {
  background: #eaeaea;
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

/* Ghost */
.section.exp-cta .ghost {
  border: 1px solid rgba(255,255,255,0.38);
  color: #f7f7f7;
}

.section.exp-cta .ghost:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}

/* RESPONSIVE */

@media (max-width: 820px){
  .exp-layout,
  .exp-layout.reverse{
    grid-template-columns: 1fr;
    gap: 22px;
    text-align:center;
  }

  .exp-text p{
    margin-left:auto;
    margin-right:auto;
  }

  .exp-media img{
    max-height:none;
  }

  .exp-location{
    text-align:center;
  }
}

.cuts-gallery{
  display:flex;
  gap:20px;
  margin-top:30px;
  overflow-x:auto;
}

.cuts-gallery img{
  width:320px;
  border-radius:14px;
  flex-shrink:0;
}


/* Initial state */
.hero-content {
  opacity: 0;
  transform: translateY(10px);
}

/* When ready */
.hero-content.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-subtitle,
.hero-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease-out 80ms, transform 500ms ease-out 80ms;
}

.hero-content.is-visible .hero-subtitle,
.hero-content.is-visible .hero-text {
  opacity: 1;
  transform: translateY(0);
}