/* =========================================================
   Apartamentos Rurales Las Muelas - 2026
   Arangas · Cabrales · Asturias
   ========================================================= */

/* --- Reset & base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --verde-profundo:#2f4a36;
  --verde-musgo:#4a6b4e;
  --verde-claro:#89a879;
  --tierra:#8a5a3b;
  --crema:#f5efe4;
  --crema-oscuro:#e8ddc9;
  --marron:#3b2a1d;
  --texto:#2a2a25;
  --texto-suave:#5c5c55;
  --blanco:#ffffff;
  --sombra-sm:0 2px 10px rgba(0,0,0,.08);
  --sombra-md:0 8px 30px rgba(0,0,0,.12);
  --sombra-lg:0 20px 60px rgba(0,0,0,.18);
  --radio:6px;
  --radio-lg:14px;
  --max:1200px;
  --trans:all .35s cubic-bezier(.2,.7,.3,1);
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:var(--verde-profundo); text-decoration:none; transition:var(--trans); }
a:hover{ color:var(--tierra); }

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', 'Georgia', serif;
  font-weight:600;
  line-height:1.2;
  color:var(--marron);
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.2rem, 5vw, 3.8rem); }
h2{ font-size:clamp(1.8rem, 3.5vw, 2.6rem); }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); }
p{ margin-bottom:1rem; }

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.5rem;
}

/* --- Header / Nav --- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(245,239,228,.92);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:var(--trans);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1.5rem;
  max-width:var(--max);
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:'Cormorant Garamond', serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--marron);
  letter-spacing:.02em;
}
.brand-logo{
  width:52px; height:52px;
  border-radius:6px;
  display:block;
  object-fit:contain;
  box-shadow:var(--sombra-sm);
  background:var(--marron);
}
.brand small{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:.7rem;
  color:var(--texto-suave);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.nav-links{
  display:flex;
  gap:1.8rem;
  list-style:none;
  align-items:center;
}
.nav-links a{
  font-size:.95rem;
  font-weight:500;
  color:var(--texto);
  position:relative;
  padding:.3rem 0;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--tierra);
  transition:var(--trans);
}
.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

.nav-cta{
  background:var(--verde-profundo);
  color:var(--crema) !important;
  padding:.55rem 1.1rem !important;
  border-radius:var(--radio);
  font-weight:600;
}
.nav-cta:hover{
  background:var(--tierra);
  color:var(--crema) !important;
}
.nav-cta::after{ display:none; }

.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--marron);
}

/* --- Hero (dos columnas: texto + imagen del edificio) --- */
.hero{
  position:relative;
  background:linear-gradient(135deg, var(--verde-profundo) 0%, var(--verde-musgo) 60%, #5d7e5a 100%);
  color:var(--blanco);
  overflow:hidden;
  padding:5rem 0 4rem;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at top right, rgba(137,168,121,.3), transparent 60%),
    radial-gradient(ellipse at bottom left,  rgba(138,90,59,.18),  transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.5rem;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:3.5rem;
  align-items:center;
}
.hero-text{
  text-align:left;
}
.hero-eyebrow{
  display:inline-block;
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--crema);
  border:1px solid rgba(255,255,255,.35);
  padding:.45rem 1.1rem;
  border-radius:100px;
  margin-bottom:1.5rem;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}
.hero h1{
  color:var(--blanco);
  margin-bottom:1.2rem;
  line-height:1.1;
  font-size:clamp(2.1rem, 4.2vw, 3.4rem);
}
.hero p.lead{
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  max-width:520px;
  margin:0 0 2.2rem;
  color:rgba(255,255,255,.92);
  line-height:1.65;
}
.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-image{
  position:relative;
  border-radius:var(--radio-lg);
  overflow:hidden;
  box-shadow:var(--sombra-lg);
  aspect-ratio: 5/6;
  max-height:640px;
}
.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-image::after{
  content:'';
  position:absolute;
  inset:1rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radio-lg);
  pointer-events:none;
}
.hero-image .hero-caption{
  position:absolute;
  bottom:1.2rem;
  left:1.2rem;
  right:1.2rem;
  background:rgba(59,42,29,.78);
  color:var(--crema);
  padding:.7rem 1rem;
  border-radius:var(--radio);
  font-size:.82rem;
  backdrop-filter:blur(8px);
  text-align:center;
  letter-spacing:.05em;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.9rem 1.6rem;
  border-radius:var(--radio);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  border:2px solid transparent;
  cursor:pointer;
  transition:var(--trans);
}
.btn-primary{
  background:var(--tierra);
  color:var(--blanco) !important;
  border-color:var(--tierra);
}
.btn-primary:hover{
  background:transparent;
  color:var(--tierra) !important;
  transform:translateY(-2px);
}
.btn-outline{
  background:transparent;
  color:var(--blanco) !important;
  border-color:rgba(255,255,255,.7);
}
.btn-outline:hover{
  background:var(--blanco);
  color:var(--marron) !important;
  transform:translateY(-2px);
}
.btn-dark{
  background:var(--verde-profundo);
  color:var(--crema) !important;
}
.btn-dark:hover{
  background:var(--marron);
  color:var(--crema) !important;
  transform:translateY(-2px);
}

/* --- Secciones genéricas --- */
section{ padding:5rem 0; }
.section-title{
  text-align:center;
  margin-bottom:3rem;
}
.section-title .eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--tierra);
  font-weight:600;
  margin-bottom:.8rem;
}
.section-title p{
  max-width:640px;
  margin:1rem auto 0;
  color:var(--texto-suave);
}

/* --- Bienvenida / sobre --- */
.sobre{
  background:var(--crema);
}
.sobre-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
}
.sobre-img{
  position:relative;
  border-radius:var(--radio-lg);
  overflow:hidden;
  box-shadow:var(--sombra-lg);
  aspect-ratio: 4/5;
}
.sobre-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s ease;
}
.sobre-img:hover img{ transform:scale(1.05); }
.sobre-img::before{
  content:'';
  position:absolute;
  inset:1rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radio-lg);
  z-index:2;
  pointer-events:none;
}
.sobre-text p{
  color:var(--texto-suave);
  font-size:1.02rem;
}
.sobre-text p:first-of-type::first-letter{
  font-family:'Cormorant Garamond', serif;
  font-size:3.2rem;
  float:left;
  line-height:1;
  padding:.3rem .6rem 0 0;
  color:var(--tierra);
  font-weight:600;
}

/* --- Apartamentos listado (cards) --- */
.apartamentos{
  background:linear-gradient(180deg, var(--crema) 0%, var(--crema-oscuro) 100%);
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:2rem;
}
.card{
  background:var(--blanco);
  border-radius:var(--radio-lg);
  overflow:hidden;
  box-shadow:var(--sombra-sm);
  transition:var(--trans);
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-lg);
}
.card-img{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
}
.card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.card:hover .card-img img{ transform:scale(1.08); }
.card-badge{
  position:absolute;
  top:1rem; left:1rem;
  background:var(--verde-profundo);
  color:var(--crema);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.35rem .8rem;
  border-radius:100px;
  font-weight:600;
}
.card-badge.adaptado{ background:var(--tierra); }
.card-body{
  padding:1.8rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.card-body h3{ margin-bottom:.4rem; }
.card-meta{
  display:flex;
  gap:1rem;
  color:var(--texto-suave);
  font-size:.88rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
}
.card-meta span{ display:inline-flex; align-items:center; gap:.35rem; }
.card-body p{
  color:var(--texto-suave);
  font-size:.95rem;
  margin-bottom:1.2rem;
  flex:1;
}
.card-body .btn{
  align-self:flex-start;
  padding:.65rem 1.2rem;
  font-size:.88rem;
}

/* --- Galería exterior (home) --- */
.exterior{
  background:var(--blanco);
  padding:5rem 0;
}
.exterior-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-top:2.5rem;
}
.exterior-card{
  position:relative;
  border-radius:var(--radio-lg);
  overflow:hidden;
  aspect-ratio: 4/3;
  box-shadow:var(--sombra-md);
}
.exterior-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}
.exterior-card:hover img{ transform:scale(1.06); }
.exterior-card .caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.5rem 1.5rem 1.2rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.7) 70%);
  color:var(--blanco);
}
.exterior-card .caption h3{
  color:var(--blanco);
  font-size:1.25rem;
  margin-bottom:.2rem;
}
.exterior-card .caption p{
  margin:0;
  font-size:.88rem;
  color:rgba(255,255,255,.85);
}
@media (max-width: 720px){
  .exterior-grid{ grid-template-columns:1fr; }
}

/* --- Entorno / destino --- */
.entorno{
  background:var(--blanco);
}
.entorno-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:2rem;
  margin-top:2rem;
}
.entorno-item{
  text-align:center;
  padding:2rem 1.5rem;
  border-radius:var(--radio-lg);
  background:var(--crema);
  transition:var(--trans);
}
.entorno-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-md);
  background:var(--blanco);
}
.entorno-icon{
  width:64px; height:64px;
  margin:0 auto 1rem;
  display:grid; place-items:center;
  background:var(--verde-profundo);
  color:var(--crema);
  border-radius:50%;
  font-size:1.6rem;
}
.entorno-item h3{ font-size:1.25rem; margin-bottom:.5rem; }
.entorno-item p{ color:var(--texto-suave); font-size:.92rem; margin:0; }

/* --- Tarifas --- */
.tarifas{
  background:linear-gradient(135deg, var(--verde-profundo), var(--verde-musgo));
  color:var(--crema);
}
.tarifas h2, .tarifas .eyebrow{ color:var(--crema); }
.tarifas .eyebrow{ color:var(--crema-oscuro); }
.tarifas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
  max-width:900px;
  margin:0 auto;
}
.tarifa-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:2rem;
  border-radius:var(--radio-lg);
  text-align:center;
  backdrop-filter:blur(10px);
}
.tarifa-card h3{
  color:var(--crema);
  font-size:1.3rem;
  margin-bottom:.3rem;
}
.tarifa-card .temporada{
  font-size:.8rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--crema-oscuro);
  margin-bottom:1.2rem;
}
.tarifa-precio{
  font-family:'Cormorant Garamond', serif;
  font-size:3.2rem;
  font-weight:600;
  line-height:1;
  color:var(--blanco);
}
.tarifa-precio small{
  font-size:1rem;
  font-family:'Inter', sans-serif;
  font-weight:400;
  color:var(--crema-oscuro);
  display:block;
  margin-top:.4rem;
}
.tarifa-card ul{
  list-style:none;
  margin-top:1.2rem;
  font-size:.9rem;
  color:var(--crema-oscuro);
}
.tarifa-card ul li{ margin:.35rem 0; }

.tarifas-nota{
  text-align:center;
  max-width:700px;
  margin:2.5rem auto 0;
  font-size:.9rem;
  color:var(--crema-oscuro);
  padding:1rem;
  border-top:1px solid rgba(255,255,255,.15);
}

/* --- CTA banda (color sólido) --- */
.cta-banda{
  background:var(--marron);
  background-image:
    radial-gradient(circle at 20% 0%,  rgba(138,90,59,.35), transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(47,74,54,.45),  transparent 50%);
  color:var(--crema);
  text-align:center;
  padding:5rem 1.5rem;
}
.cta-banda h2{ color:var(--blanco); }
.cta-banda p{
  max-width:600px;
  margin:1rem auto 2rem;
  color:rgba(255,255,255,.88);
}

/* =========================================================
   PÁGINA DETALLE APARTAMENTO
   ========================================================= */
.page-hero{
  padding:7rem 1.5rem 3rem;
  background:linear-gradient(135deg, var(--verde-profundo), var(--verde-musgo));
  color:var(--crema);
  text-align:center;
}
.page-hero .eyebrow{
  color:var(--crema-oscuro);
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.page-hero h1{
  color:var(--blanco);
  margin:.5rem 0;
}
.page-hero p{
  max-width:700px;
  margin:0 auto;
  color:rgba(255,255,255,.88);
}

.apto-detalle{
  padding:5rem 0;
}
.apto-layout{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:3rem;
  align-items:start;
}
.apto-info h2{ margin-bottom:1rem; }
.apto-info .lead{
  font-size:1.1rem;
  color:var(--texto-suave);
  margin-bottom:1.5rem;
}
.apto-specs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1rem;
  margin:1.5rem 0 2rem;
}
.spec{
  background:var(--crema);
  padding:1.1rem;
  border-radius:var(--radio);
  text-align:center;
}
.spec .n{
  font-family:'Cormorant Garamond', serif;
  font-size:1.8rem;
  color:var(--tierra);
  font-weight:600;
  line-height:1;
}
.spec .l{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-top:.3rem;
}

.apto-side{
  background:var(--crema);
  padding:2rem;
  border-radius:var(--radio-lg);
  position:sticky;
  top:90px;
}
.apto-side h3{ margin-bottom:1rem; font-size:1.3rem; }
.apto-precio{
  font-family:'Cormorant Garamond', serif;
  font-size:2.8rem;
  color:var(--verde-profundo);
  font-weight:600;
  line-height:1;
}
.apto-precio small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.85rem;
  color:var(--texto-suave);
  font-weight:400;
  margin-top:.3rem;
}
.apto-side hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.1);
  margin:1.5rem 0;
}
.apto-side .btn{ width:100%; justify-content:center; margin-bottom:.6rem; }

.equipamiento{
  background:var(--crema);
  padding:4rem 0;
}
.equip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:.6rem;
  margin-top:2rem;
}
.equip-grid li{
  list-style:none;
  padding:.7rem 1rem;
  background:var(--blanco);
  border-radius:var(--radio);
  font-size:.92rem;
  color:var(--texto-suave);
  display:flex;
  align-items:center;
  gap:.6rem;
}
.equip-grid li::before{
  content:'✓';
  color:var(--verde-musgo);
  font-weight:700;
}

/* --- Galería --- */
.galeria{
  padding:4rem 0;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:.8rem;
}
.gallery-grid a{
  display:block;
  overflow:hidden;
  border-radius:var(--radio);
  aspect-ratio: 4/3;
  cursor:zoom-in;
  position:relative;
}
.gallery-grid img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.gallery-grid a:hover img{ transform:scale(1.08); }

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(10,10,8,.94);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:2rem;
  cursor:zoom-out;
}
.lightbox.active{ display:flex; }
.lightbox img{
  max-width:92vw;
  max-height:90vh;
  border-radius:var(--radio);
  box-shadow:0 30px 100px rgba(0,0,0,.5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  width:48px; height:48px;
  border-radius:50%;
  font-size:1.4rem;
  cursor:pointer;
  display:grid; place-items:center;
  transition:var(--trans);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{ background:rgba(255,255,255,.25); }
.lightbox-close{ top:1.5rem; right:1.5rem; }
.lightbox-prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.5rem; top:50%; transform:translateY(-50%); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contacto-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-top:2rem;
}
.contacto-info{
  background:var(--crema);
  padding:2.5rem;
  border-radius:var(--radio-lg);
}
.contacto-info h3{ margin-bottom:1.5rem; }
.contacto-lista{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.contacto-lista li{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.contacto-lista .ico{
  width:44px; height:44px;
  background:var(--verde-profundo);
  color:var(--crema);
  border-radius:50%;
  display:grid; place-items:center;
  flex-shrink:0;
  font-size:1.1rem;
}
.contacto-lista .lbl{
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-bottom:.15rem;
}
.contacto-lista .val{
  font-size:1.05rem;
  color:var(--marron);
  font-weight:600;
}
.contacto-mapa{
  border-radius:var(--radio-lg);
  overflow:hidden;
  box-shadow:var(--sombra-md);
  min-height:460px;
}
.contacto-mapa iframe{
  width:100%;
  height:100%;
  min-height:460px;
  border:0;
  display:block;
}

/* --- Footer --- */
.site-footer{
  background:var(--marron);
  color:var(--crema-oscuro);
  padding:3.5rem 0 1.5rem;
  font-size:.9rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:2.5rem;
}
.footer-brand{
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem;
  color:var(--crema);
  margin-bottom:.8rem;
}
.footer-col h4{
  color:var(--crema);
  font-size:1rem;
  margin-bottom:1rem;
  font-family:'Inter', sans-serif;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin:.4rem 0; }
.footer-col a{ color:var(--crema-oscuro); }
.footer-col a:hover{ color:var(--blanco); }
.footer-social{
  display:flex;
  gap:.8rem;
  margin-top:1rem;
}
.footer-social a{
  width:40px; height:40px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--crema);
  transition:var(--trans);
}
.footer-social a:hover{
  background:var(--tierra);
  transform:translateY(-3px);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1.5rem;
  text-align:center;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
}
.footer-bottom a{ color:rgba(255,255,255,.75); }

/* --- WhatsApp flotante --- */
.whatsapp-float{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:58px; height:58px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:1.7rem;
  box-shadow:0 8px 24px rgba(37,211,102,.5);
  z-index:90;
  transition:var(--trans);
}
.whatsapp-float:hover{
  transform:scale(1.1);
  color:#fff;
}
.whatsapp-float::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid #25D366;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%  { transform:scale(1);   opacity:.8; }
  100%{ transform:scale(1.5); opacity:0;  }
}

/* --- Animaciones fade-in (solo si JS activo) --- */
html.js .fade-up{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
html.js .fade-up.in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html.js .fade-up{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .sobre-grid,
  .apto-layout,
  .contacto-grid,
  .hero-inner{ grid-template-columns:1fr; }
  .hero-inner{ gap:2.5rem; }
  .hero-text{ text-align:center; }
  .hero-text .hero-actions{ justify-content:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-image{ max-width:480px; margin:0 auto; aspect-ratio: 4/5; }
  .apto-side{ position:static; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* Menu colapsado para todo lo que no sea desktop ancho (incluye móvil horizontal y tablet) */
@media (max-width: 1023px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed;
    top:var(--header-h, 72px);
    left:0; right:0;
    width:100%;
    background:var(--crema);
    flex-direction:column;
    gap:0;
    padding:.5rem 0;
    margin:0;
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    max-height:0;
    overflow:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transition:max-height .4s ease;
    z-index:90;
  }
  .nav-links.open{
    max-height:calc(100dvh - var(--header-h, 72px));
    overflow-y:auto;
    overflow-x:hidden;
    touch-action:pan-y;
  }
  /* Bloquea el scroll del body cuando el menú está abierto (sin tocar el touch del menú) */
  body.menu-open{ overflow:hidden; }
  .nav-links li{
    width:100%;
    text-align:center;
  }
  .nav-links a{
    display:block;
    width:100%;
    padding:.9rem 1.5rem;
    margin:0;
    box-sizing:border-box;
  }
  .nav-links a::after{ display:none; }
  .nav-cta{
    width:calc(100% - 3rem);
    max-width:340px;
    margin:.75rem auto !important;
    padding:.8rem 1.5rem !important;
    border-radius:var(--radio);
  }
  .brand small{ display:none; }
}

/* Compactar header e items del menú en pantallas muy bajas (móvil horizontal) */
@media (max-width: 1023px) and (max-height: 500px){
  .site-header{ padding:.5rem 0; }
  .brand{ font-size:1rem; }
  .brand img{ height:32px !important; width:32px !important; }
  .nav-links a{ padding:.55rem 1.5rem; font-size:.95rem; }
  .nav-cta{ margin:.4rem auto !important; padding:.55rem 1.5rem !important; }
}

@media (max-width: 480px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  section{ padding:3.5rem 0; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
}

/* Print */
@media print{
  .site-header, .whatsapp-float, .site-footer, .nav-toggle{ display:none; }
  body{ background:#fff; color:#000; }
}