/* ===============================
   Alice Wood Travel – styles.css
   =============================== */

/* --- Variables & base --- */
:root{
  --primary:#0b6efd;
  --accent:#ff7a59;
  --dark:#0f172a;
  --light:#f8fafc;
  --hero-img:url('https://alicewoodtravel.com/images/hero.webp');
  --hero-parallax: 0px;
  --hero-focus-y: 140px; /* puedes subir/bajar la imagen ajustando este valor */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#1b1b1f;
  background:#fff;
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}

/* --- Navbar --- */
.Navbar{
  position:sticky;top:0;z-index:40;
  background:#fff;box-shadow:0 4px 22px rgba(0,0,0,.06);
  backdrop-filter:saturate(1.1) blur(2px);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.Navbar img{height:64px;object-fit:contain}
.menu{list-style:none;display:flex;gap:1.25rem;padding:0;margin:0}
.menu a{color:var(--dark);text-decoration:none;font-weight:600}
.menu a:hover{color:var(--primary)}
@media(max-width:768px){ .Navbar img{height:56px} }

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#0aa;color:#fff;border:none;border-radius:999px;
  padding:1rem 1.8rem;font-weight:800;letter-spacing:.2px;text-decoration:none;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn .btn-icon{line-height:0;display:inline-flex}
@media(hover:hover){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 22px 54px rgba(0,0,0,.3); background:#0b9; }
}
.btn-outlined{
  display:inline-flex;align-items:center;gap:.45rem;
  border:2px solid #fff;color:#fff;border-radius:999px;
  padding:.6rem 1rem;background:transparent;font-weight:700;text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
@media(hover:hover){ .btn-outlined:hover{ transform:translateY(-1px); background:#fff; color:#0b6efd; } }

/* === HERO === */
.SectionHero, .hero{
  position: relative;
  color:#fff; text-align:center;
  min-height: clamp(560px, 78vh, 960px);
  display:grid; place-items:center;
  padding: clamp(3rem, 6vh, 5rem) 0;
  overflow:hidden;
}

/* Imagen de fondo: enfocada arriba (offset controlado por --hero-focus-y) */
.SectionHero::after, .hero::after{
  content:"";
  position:absolute;
  inset:-16vh -10vw;
  background-image: var(--hero-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center calc(0% + var(--hero-focus-y)) !important;
  transform: translate3d(0, var(--hero-parallax), 0) scale(0.99);
  will-change: transform;
  z-index: 0;
}

/* Degradado superpuesto */
.SectionHero::before, .hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(11,110,253,.35), rgba(255,122,89,.35)),
    linear-gradient(180deg, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.58) 100%);
  z-index:1; pointer-events:none;
}

/* Contenido hero */
.SectionHero .container, .hero .container{
  position:relative;
  z-index:2;
}

/* Logo dentro del hero (usa tu valor actual) */
.hero-mark{
  width: clamp(186px, 4.8vw, 256px);
  display:block;
  margin:0 auto 0.6rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Textos hero */
.SectionHero h1, .hero h1{
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.05;
  margin: .2rem 0 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.SectionHero .hero-sub, .hero .hero-sub{
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  opacity:.95;
  margin:0 0 1.6rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.hero-help{ margin-top:1.2rem }
.help-actions{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }

/* ============================
   Sección Acerca (consolidada)
   ============================ */
.About{
  padding: clamp(2.5rem, 6vh, 4.5rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  background:#e9e0d7; /* tono cálido como la referencia */
}
.About .container{ width: min(1200px, 92%); }
.About h2{
  text-align:center;
  font-size: clamp(2rem, 4.8vw, 3rem);
  font-weight: 800;
  letter-spacing:-.015em;
  margin: 0 0 .6rem;
  color:#2d2d2d;
}
.About .section-sub{
  text-align:center;
  margin: 0 auto clamp(1.8rem, 4vh, 2.2rem);
  color:#5b5b5b;
  font-weight: 500;
}
.about-grid{
  display:grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 900px){
  .about-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.Card{
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  display:flex;flex-direction:column;
  box-shadow:
    0 1px 0 rgba(0,0,0,.02),
    0 10px 24px rgba(0,0,0,.10),
    0 18px 40px rgba(0,0,0,.10);
  transition: transform .24s ease, box-shadow .24s ease;
}
@media (hover:hover){
  .Card:hover{
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(0,0,0,.02),
      0 14px 30px rgba(0,0,0,.14),
      0 24px 56px rgba(0,0,0,.18);
  }
}
.card-media{ position:relative; overflow:hidden; }
.card-media img{
  width:100%; height: clamp(200px, 28vw, 260px);
  object-fit: cover; object-position: center;
  transform: none;
}
.card-body{
  border-top: 1px solid rgba(0,0,0,.06);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.4rem, 3vw, 1.8rem);
  display:flex; flex-direction:column; gap:.55rem;
  color:#2b2b2b; line-height:1.65;
}
.card-title{ display:flex; align-items:center; gap:.75rem; margin:.2rem 0 .35rem; }
.card-icon{
  width:30px;height:30px;min-width:30px;
  display:inline-flex;align-items:center;justify-content:center;color:#0aa;
}
.Card h3{ margin:0; font-size:clamp(1.05rem, 2.4vw, 1.5rem); line-height:1.25; font-weight:800; color:#1f2937; }
.Card p{ margin:0; color:#2d2d2d; line-height:1.75; }

/* ============================
   Destinos (nuevo layout)
   ============================ */
.Destinations{
  background: linear-gradient(180deg, #2d8f8b 0%, #317a7a 100%);
  padding: clamp(2.4rem, 6vh, 4rem) 0 clamp(2.6rem, 6vh, 4.2rem);
}
.Destinations h2{
  text-align:center; color:#fff; font-weight:800;
  font-size: clamp(1.9rem, 4.8vw, 2.6rem);
  letter-spacing:-.015em; margin: 0 0 .35rem;
}
.Destinations .section-sub{
  text-align:center; color:#e6f4f4; margin:0 auto clamp(1.4rem, 3vh, 1.8rem);
}

/* GRID 12 columnas para spans precisos */
.destinations-grid{
  display:grid;
  gap: clamp(.9rem, 2vw, 1.2rem);
  grid-template-columns: repeat(12, 1fr);
}

/* Tile base */
.Tile{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  grid-column: span 6;              /* por defecto 1/2 de fila en >=900px */
  transition: transform .22s ease, box-shadow .22s ease;
}
.Tile img{
  width:100%; height:100%; display:block;
  object-fit: cover; object-position: center;
}
.Tile::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.62) 100%);
  pointer-events:none; z-index:1;
}
.Tile .label{ position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:2; }
.Tile .label h3{
  margin:0 0 .2rem; color:#fff; font-weight:800;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.Tile .label p{ margin:0; color:#fff; opacity:.95; }

@media (hover:hover){
  .Tile:hover{ transform: translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.22); }
}

/* Tile XL (Playas): más ancho */
.tile--xl{ grid-column: span 8; }

/* Alturas */
.tile--xl{ aspect-ratio: 16/7; }
.destinations-grid .Tile:not(.tile--xl){ aspect-ratio: 16/10; }

/* Orden por filas (maqueta) */
@media (min-width: 900px){
  .tile--xl{ grid-row: 1; }
  .destinations-grid .Tile:nth-of-type(2){ grid-row:1; }
  .destinations-grid .Tile:nth-of-type(3){ grid-row:2; }
  .destinations-grid .Tile:nth-of-type(4){ grid-row:2; }
  .destinations-grid .Tile:nth-of-type(5){ grid-row:3; }
}

/* Tablet: 1 columna por fila */
@media (max-width: 899.98px){
  .destinations-grid{ grid-template-columns: repeat(8, 1fr); }
  .Tile{ grid-column: span 8; }
  .tile--xl{ aspect-ratio: 16/9; }
}

/* Móvil */
@media (max-width: 520px){
  .tile--xl{ aspect-ratio: 4/3; }
  .destinations-grid .Tile:not(.tile--xl){ aspect-ratio: 16/11; }
}

/* ============================
   Galería
   ============================ */
.Gallery{padding:3rem 0;background:#f8fafc}
.masonry{columns:3 280px;column-gap:1rem}
.masonry .Tile{break-inside:avoid;margin:0 0 1rem;box-shadow:0 4px 10px rgba(0,0,0,.1)}
.masonry img{width:100%;height:auto;border-radius:12px;object-fit:contain}

/* ============================
   Contacto
   ============================ */
.Contact{padding:3rem 0;background:#f8fafc}
.contact-form{display:grid;gap:.8rem;max-width:560px;margin:1rem auto 0}
.contact-form input,.contact-form textarea{
  width:100%;padding:.8rem 1rem;border-radius:10px;border:1px solid #cbd5e1;font:inherit
}
.contact-form button{justify-self:start}

/* ===== CTA final sin formulario ===== */
.LeadCTA{
  padding: clamp(2.6rem, 7vh, 5rem) 0;
  text-align:center;
  color:#fff;
  background: linear-gradient(135deg, #b46c71 0%, #d2878d 100%);
}
.LeadCTA h2{
  margin:0 0 .4rem;
  font-weight:800;
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  letter-spacing:-.015em;
}
.leadcta-sub{
  margin:0 auto clamp(1.2rem, 2.8vh, 1.6rem);
  opacity:.95;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}

/* fila de contacto (icono + texto) */
.cta-contacts{
  display:flex; gap: clamp(1rem, 3vw, 3rem);
  justify-content:center; flex-wrap:wrap;
  margin: 0 auto clamp(1.2rem, 3vh, 1.8rem);
}
.cta-item{
  display:flex; align-items:center; gap:.8rem;
  color:#fff;
}
.cta-icon{
  width:48px;height:48px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.cta-text .label{
  display:block; font-weight:700; margin-bottom:.15rem;
}
.cta-text a{
  color:#fff; text-decoration:none; opacity:.95;
}
.cta-text a:hover{ text-decoration:underline; }

/* botón principal grande con glow */
.btn-cta-lg{
  margin: .4rem auto 1rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  padding: 1rem 1.6rem;
  position:relative;
}
.btn-cta-lg::after{
  content:""; position:absolute; inset:auto 0 -14px 0; height:26px;
  filter: blur(14px); background: rgba(0,0,0,.35);
  border-radius: 999px; z-index:-1;
}

/* texto auxiliar + botones secundarios */
.leadcta-help{ margin:.6rem 0 .6rem; opacity:.9; }
.leadcta-actions{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}

/* Opcional: si aún tienes la sección antigua de formulario en el HTML y no la has eliminado, la ocultamos: */
.Contact{ display:none !important; }


/* ============================
   Footer
   ============================ */
.Footer{background:var(--dark);color:#e2e8f0;text-align:center;padding:2rem 0}
.Footer .social{display:flex;gap:1rem;justify-content:center;list-style:none;padding:0;margin:1rem 0 0}
.Footer .social a{color:#e2e8f0;text-decoration:none}
.Footer .social a:hover{color:#fff}

/* ===== Footer 3 columnas ===== */
.Footer{
  background:#2f2f2f;
  color:#e6e6e6;
  padding: 1.8rem 0 1.2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items:center;
}
.foot-col{ text-align:center; }

.foot-brand{ text-align:left; }
.foot-logo{ height:72px; object-fit:contain; }
.foot-tagline{
  margin:.9rem 0 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color:#dadada;
}

.foot-contact h3,
.foot-social h3{
  margin:0 0 .8rem;
  color:#d28a90;            /* título rosado como la referencia */
  font-weight:800;
  letter-spacing:.02em;
}
.foot-contact a{
  display:block;
  color:#e6e6e6;
  text-decoration:none;
  margin:.25rem 0;
}
.foot-contact a:hover{ text-decoration:underline; }

.foot-icons{ display:flex; gap:.9rem; justify-content:center; }
.circle{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .2s ease, background-color .2s ease;
}
@media (hover:hover){
  .circle:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); }
}

.foot-rule{
  margin: 1.1rem 0 .8rem;
  border:0; height:1px;
  background: rgba(255,255,255,.16);
}
.foot-copy p{
  margin:0;
  text-align:center;
  color:#cfcfcf;
  font-size: .98rem;
}

/* Responsive: footer en una columna */
@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .foot-brand{ text-align:center; }
}

/* ===== Galería — título centrado y con mismo peso que otros H2 ===== */
.Gallery h2{
  text-align:center;
  font-weight:800;
  font-size: clamp(1.9rem, 4.8vw, 2.6rem);
  letter-spacing:-.015em;
  color:#1b1b1f;
  margin: 0 0 .35rem;
}
.Gallery .section-sub{
  text-align:center;
  margin: 0 auto 1.4rem;
  color:#4b4b4b;
}
/* =========================================================
   Degradados de sección + “orbs” animadas con parallax suave
   ========================================================= */

/* Paleta reutilizable */
:root{
  --g-teal:#1f8a8a;
  --g-teal-2:#2c7b7b;
  --g-rose:#c07a81;
  --g-rose-2:#d4878e;
  --g-surface:#f7fafb;
}

/* Fondos degradados listos para aplicar por sección */
.bg-diag-teal{
  background:
    linear-gradient(140deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.00) 38%),
    linear-gradient(180deg, var(--g-teal) 0%, var(--g-teal-2) 100%);
  position: relative; isolation:isolate;
}
.bg-diag-rose{
  background:
    linear-gradient(140deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.00) 38%),
    linear-gradient(180deg, var(--g-rose) 0%, var(--g-rose-2) 100%);
  position: relative; isolation:isolate;
}
.bg-soft{
  background: var(--g-surface);
  position: relative; isolation:isolate;
}

/* Separadores entre secciones (suaves, sin imágenes) */
.section-divider{
  height: 72px; /* puedes 56–120px */
  background:
    radial-gradient(120% 68% at 50% 120%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.0) 100%);
  opacity:.35;
  filter: blur(2px);
}

/* ====== Orbs / Pills decorativas ====== */
.shape{
  position:absolute; inset:auto; z-index:0; pointer-events:none;
  filter: blur(0px);
  will-change: transform;
}
.shape.orb{
  width: clamp(120px, 22vw, 260px);
  height: clamp(120px, 22vw, 260px);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 70%);
  mix-blend-mode: soft-light;
  opacity:.65;
}
.shape.pill{
  width: clamp(220px, 28vw, 360px);
  height: clamp(70px, 10vw, 120px);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  mix-blend-mode: overlay;
  opacity:.45;
}
.shape.ring{
  width: clamp(160px, 24vw, 300px);
  height: clamp(160px, 24vw, 300px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 10px rgba(255,255,255,.04) inset;
  mix-blend-mode: soft-light;
  opacity:.5;
}

/* Animaciones flotantes suaves */
@keyframes float-y{
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-12px) }
}
@keyframes drift{
  0%   { transform: translate3d(0,0,0) rotate(0deg) }
  50%  { transform: translate3d(6px,-10px,0) rotate(3deg) }
  100% { transform: translate3d(0,0,0) rotate(0deg) }
}
.float-slow{ animation: float-y 9s ease-in-out infinite; }
.drift-slow{ animation: drift 14s ease-in-out infinite; }

/* Parallax: los elementos con data-parallax tendrán un translateY dinámico */
.parallax{ will-change: transform; }

/* Accesibilidad: desactiva animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .float-slow, .drift-slow{ animation: none !important; }
  .parallax{ transform: none !important; }
}

/* Utilidades de z-index para que el contenido quede encima */
.section-content{ position:relative; z-index:1; }