/* Peninsula Country - Static Website Styles (primary #1D3973) */

/* ========== Reset y bases ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Colores */
  --primary: #1D3973;           /* azul principal */
  --primary-light: #2951A4;     /* azul claro derivado */
  --primary-dark: #112142;      /* azul oscuro derivado */
  --primary-rgb: 29,57,115;     /* para rgba() */

  --accent: hsl(122,55%,32%);   /* verde */
  --white:#fff; --black:#000;
  --gray:hsl(0,0%,70%); --light-gray:hsl(0,0%,96%); --muted:hsl(0,0%,70%);

  /* Tipografía */
  --font-family:'Montserrat',sans-serif;
  --font-weight-light:300; --font-weight-regular:400; --font-weight-medium:500;
  --font-weight-semibold:600; --font-weight-bold:700;

  /* Espaciado */
  --spacing-xs:.5rem; --spacing-sm:1rem; --spacing-md:1.5rem; --spacing-lg:2rem;
  --spacing-xl:3rem; --spacing-2xl:4rem;

  /* Transiciones y sombras */
  --transition:all .3s cubic-bezier(.4,0,.2,1); --transition-fast:all .2s ease-out;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1); --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1);

  /* Bordes */
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-2xl:1.5rem;

  /* Motion defaults (reveal) */
  --reveal-distance: 28px;
  --reveal-duration: 1100ms;
  --reveal-ease: cubic-bezier(.22,1,.36,1);
  --stagger: 90ms;

  /* Safe-areas fallbacks (se actualizan más abajo si hay soporte) */
  --sa-top: 0px; --sa-right: 0px; --sa-bottom: 0px; --sa-left: 0px;
}

@supports (padding: env(safe-area-inset-top)) {
  :root{
    --sa-top: env(safe-area-inset-top);
    --sa-right: env(safe-area-inset-right);
    --sa-bottom: env(safe-area-inset-bottom);
    --sa-left: env(safe-area-inset-left);
  }
}

html{ scroll-behavior:smooth; font-size:16px; }
body{ font-family:var(--font-family); line-height:1.6; color:var(--black); background:var(--white); overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

/* ========== Header ========== */
.header{
  position:fixed; inset:0 0 auto 0;
  background:var(--primary); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--primary-light);
  z-index:1000; transition:var(--transition);
  padding-top: max(12px, var(--sa-top));
}
.header-content{ height:4rem; display:flex; align-items:center; justify-content:space-between; }
.header .container{
  padding-left: max(16px, var(--sa-left));
  padding-right: max(16px, var(--sa-right));
}
.logo-img{ height:2.5rem; width:auto; }
.nav{ display:none; align-items:center; gap:var(--spacing-lg); }
.nav-link{ color:var(--white); font-weight:var(--font-weight-medium); transition:var(--transition); padding:var(--spacing-xs) var(--spacing-sm); border-radius:var(--radius-md); }
.nav-link:hover{ color:var(--accent); background:rgba(255,255,255,.1); }
.contact-btn{
  background:var(--accent); color:#fff; padding:var(--spacing-xs) var(--spacing-md);
  border-radius:var(--radius-md); font-weight:var(--font-weight-semibold);
  transition:var(--transition); box-shadow:var(--shadow-md);
  margin-right: max(0px, calc(var(--sa-right) - 8px));
}
.contact-btn:hover{ background:hsl(0, 0%, 100%); transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ========== Hero ========== */
.hero-section{ position:relative; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-background{ position:absolute; inset:0; will-change:transform; transition:transform .2s linear; z-index:-1; }
.hero-bg-img{ width:100%; height:100%; object-fit:cover; } /* fallback si se usa imagen */
.hero-bg-video{ width:100%; height:100%; object-fit:cover; } /* video fondo */
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    to right,
    rgba(var(--primary-rgb), .60),
    rgba(var(--primary-rgb), .20),
    rgba(var(--primary-rgb), .10)
  );
}
.hero-content{ position:relative; z-index:10; text-align:center; color:#fff; padding:0 1rem; max-width:72rem; margin:0 auto; }
.hero-title{font-size:clamp(2.5rem,8vw,4.5rem); font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-md); line-height:1.1; }
.hero-subtitle{ font-size:clamp(1.25rem,4vw,2rem); font-weight:var(--font-weight-light); margin-bottom:var(--spacing-sm); opacity:.95; }
.hero-text{ font-size:clamp(1.125rem,3vw,1.5rem); font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-xl); }
.hero-buttons{ display:flex; flex-direction:column; gap:var(--spacing-md); justify-content:center; align-items:center; }
.hero-btn{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 2rem; border-radius:var(--radius-md); font-size:1.125rem; font-weight:var(--font-weight-medium); transition:var(--transition); text-align:center; min-width:200px; }
.hero-btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow-lg); }
.hero-btn-primary:hover{ background:var(--primary-light); transform:translateY(-3px); box-shadow:var(--shadow-xl); }
.hero-btn-outline{ border:2px solid #fff; color:#fff; background:transparent; }
.hero-btn-outline:hover{ background:#fff; color:var(--primary); }
.scroll-indicator{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:#fff; animation:bounce 2s infinite; }
.scroll-mouse{ width:1.5rem; height:2.5rem; border:2px solid #fff; border-radius:1rem; display:flex; justify-content:center; padding-top:.5rem; }
.scroll-dot{ width:.25rem; height:.75rem; background:#fff; border-radius:.125rem; animation:pulse 2s infinite; }

/* ========== Secciones base ========== */
section{ padding:5rem 0; }
.section-header{ text-align:center; margin-bottom:var(--spacing-2xl); }
.section-title{ font-size:clamp(2rem,6vw,3rem); font-weight:var(--font-weight-bold); color:var(--primary); margin-bottom:var(--spacing-md); }
.section-subtitle{ font-size:clamp(1.25rem,4vw,1.75rem); font-weight:var(--font-weight-light); margin-bottom:var(--spacing-sm); }
.section-description{
  font-size:1.125rem; color:#286565; max-width:48rem; margin:0 auto; line-height:1.7;
  background:rgba(255,255,255,.8); backdrop-filter:blur(10px); padding:var(--spacing-md);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}

/* ========== Video ========== */
.video-section{ background:#fff; }
/* Full-bleed utilitario (ancho completo de la ventana) */
.video-fullbleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  padding-inline: max(0px, var(--sa-left)) max(0px, var(--sa-right));
}
/* Marco responsive 16:9 */
.video-embed{ position:relative; aspect-ratio:16 / 9; background:#000; }
@supports not (aspect-ratio: 16 / 9){ .video-embed{ padding-top:56.25%; } }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ========== Ubicación / Mapa ========== */
.location-section{ background:linear-gradient(180deg, var(--light-gray) 0%, var(--white) 100%); }
.location-grid{ display:grid; gap:var(--spacing-xl); align-items:center; }
.location-info{ display:flex; flex-direction:column; gap:var(--spacing-lg); }
.info-card{ background:#fff; padding:var(--spacing-lg); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.info-title{ font-size:1.5rem; font-weight:var(--font-weight-bold); color:var(--primary); margin-bottom:var(--spacing-sm); }
.info-text{ color:var(--muted); line-height:1.7; }
.attractions-list{ display:flex; flex-direction:column; gap:.75rem; }
.attraction-item{ display:flex; align-items:center; gap:.75rem; }
.attraction-dot{ width:.5rem; height:.5rem; background:var(--accent); border-radius:50%; }

.location-visual{ position:relative; }
.location-badge{ background:rgba(0,85,149,.1); padding:var(--spacing-lg); border-radius:var(--radius-2xl); text-align:center; }
.location-icon{ width:4rem; height:4rem; background:var(--primary); border-radius:50%; margin:0 auto var(--spacing-sm); display:flex; align-items:center; justify-content:center; }
.location-icon .icon{ width:2rem; height:2rem; color:#fff; }
.location-title{ color:var(--primary); font-weight:var(--font-weight-semibold); font-size:1.125rem; }
.location-subtitle{ color: rgba(var(--primary-rgb), .7); font-size:.875rem; }

.map-shell{ border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; margin-bottom:var(--spacing-md); }
.map-chrome{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; background:#f6f8fa; border-bottom:1px solid #e5e7eb; }
.map-search{ color:#6b7280; font-size:.875rem; }
.map-ctrls button{ width:1.75rem; height:1.75rem; border:1px solid #e5e7eb; background:#fff; border-radius:.375rem; margin-left:.25rem; cursor:pointer; }
.map-canvas{ position:relative; }
.map-canvas img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.map-marker{ position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); width:18px; height:18px; background:#e11d48; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.25); animation: marker-bob 2.4s ease-in-out infinite; }
@keyframes marker-bob{ 0%,100%{ transform: translate(-50%,-50%) } 50%{ transform: translate(-50%,-60%) } }
.map-footer{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; font-size:.75rem; color:#6b7280; background:#fff; border-top:1px solid #e5e7eb; }
.map-open{ color: var(--primary); text-decoration:underline; }
<<<<<<< ours
.map-wrapper{ margin: var(--spacing-xl) 0; }
.map-fullbleed{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  padding-inline: max(0px, var(--sa-left)) max(0px, var(--sa-right));
}
.map-fullbleed #map3d{
  width:100%;
  box-shadow: var(--shadow-lg);
  border-radius:0;
}
=======
>>>>>>> theirs

/* ========== Galería ========== */
.gallery-section{ background:linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%); }
.project-status{ background:var(--accent); color:#fff; padding:var(--spacing-xs) var(--spacing-md); border-radius:2rem; font-size:.875rem; font-weight:var(--font-weight-semibold); display:inline-block; margin-top:var(--spacing-sm); }
.gallery-grid{ display:grid; gap:var(--spacing-lg); grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.gallery-card{ border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .35s ease, box-shadow .35s ease; }
.gallery-card:hover{ transform: translateY(-8px) scale(1.01); box-shadow:var(--shadow-xl); }
.gallery-image{ position:relative; overflow:hidden; }
.gallery-img{ width:100%; height:250px; object-fit:cover; transition:transform .4s ease; }
.gallery-card:hover .gallery-img{ transform:scale(1.1); }
.gallery-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8), transparent); color:#fff; padding:var(--spacing-md); display:flex; flex-direction:column; justify-content:flex-end; opacity:0; transition:opacity .35s ease; }
.gallery-card:hover .gallery-overlay{ opacity:1; }
.gallery-title{ font-size:1.25rem; font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-xs); }
.gallery-desc{ font-size:.875rem; opacity:.9; }

/* ========== Amenidades ========== */
.amenities-section{ background:#fff; }
.amenities-grid{ display:grid; gap:var(--spacing-lg); margin-bottom:var(--spacing-2xl); }
.amenity-card{ background:#fff; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); transition:box-shadow .35s ease; }
.amenity-card:hover{ box-shadow:var(--shadow-xl); }
.amenity-image{ position:relative; overflow:hidden; }
.amenity-img{ width:100%; height:16rem; object-fit:cover; transition:transform .4s ease; }
.amenity-card:hover .amenity-img{ transform:scale(1.05); }
.amenity-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(var(--primary-rgb), .6), transparent); }
.amenity-badge{ position:absolute; bottom:var(--spacing-sm); left:var(--spacing-sm); color:#fff; }
.amenity-title{ font-size:1.5rem; font-weight:var(--font-weight-bold); }
.amenity-content{ padding:var(--spacing-md); }
.amenity-description{ color:var(--muted); margin-bottom:var(--spacing-sm); line-height:1.7; }
.amenity-features{ display:flex; flex-direction:column; gap:var(--spacing-xs); }
.feature-item{ display:flex; align-items:center; gap:var(--spacing-xs); }
.feature-dot{ width:.5rem; height:.5rem; background:var(--accent); border-radius:50%; }
.feature-item span{ font-size:.875rem; color:var(--muted); }

/* Banner de amenities */
.amenities-banner-wrap{ max-width:1200px; margin:3rem auto 0; padding:0 1rem; }
.amenities-banner{ width:100%; height:auto; display:block; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); }

/* Todas las Amenidades (iconos usan azul principal) */
.all-amenities{ text-align:center; }
.all-amenities-title{ font-size:1.5rem; font-weight:var(--font-weight-bold); color:var(--primary); margin-bottom:var(--spacing-lg); }
.amenities-list{ display:grid; gap:var(--spacing-md); grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.amenity-item{ padding:var(--spacing-sm); border-radius:var(--radius-lg); text-align:center; transition:background .25s ease; }
.amenity-item:hover{ background:hsla(0,0%,96%,.8); }
.amenity-icon{
  width:2.5rem; height:2.5rem; margin:0 auto var(--spacing-xs);
  display:grid; place-items:center; color:var(--primary);
  background:transparent; border:2px solid var(--primary); border-radius:50%;
}
.amenity-icon svg{ width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:2; }
.amenity-name{ font-weight:var(--font-weight-semibold); color:var(--primary); font-size:.875rem; }

/* ========== Masterplan ========== */
.masterplan-section{ background:linear-gradient(180deg, rgba(var(--primary-rgb), .05) 0%, var(--light-gray) 100%); }
.highlight{ color:var(--accent); font-weight:var(--font-weight-bold); }
.masterplan-grid{ display:grid; gap:var(--spacing-xl); align-items:center; }
.masterplan-info{ display:flex; flex-direction:column; gap:var(--spacing-lg); }
.lot-info-grid{ display:grid; gap:var(--spacing-md); }
.lot-info-col{ display:flex; flex-direction:column; gap:.25rem .5rem; }
.lot-detail{ display:flex; flex-direction:column; gap:.25rem; }
.lot-label{ font-weight:var(--font-weight-semibold); color:var(--primary); }
.lot-value{ color:var(--muted); }

.benefits-list{ display:flex; flex-direction:column; gap:var(--spacing-sm); }
.benefit-item{ display:flex; align-items:flex-start; gap:var(--spacing-sm); }
/* Viñeta con imagen de check */

.benefit-content{ flex:1; }
.benefit-title{ font-weight:var(--font-weight-semibold); }
.benefit-desc{ color:var(--muted); font-size:.875rem; }

/* Chip de resaltado */
.resaltado{
  color:#fff; background: var(--primary);
  padding:.2em .4em; border-radius:.25rem; font-weight:var(--font-weight-semibold);
}

.masterplan-visual{ position:relative; }
.masterplan-card{ background:#fff; padding:var(--spacing-lg); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); }
.masterplan-image{ margin-bottom:var(--spacing-md); }
.masterplan-img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-xl); }
.masterplan-content{ text-align:center; }
.masterplan-icon{ width:4rem; height:4rem; background:var(--primary); border-radius:50%; margin:0 auto var(--spacing-sm); display:flex; align-items:center; justify-content:center; }
.masterplan-icon .icon{ width:2rem; height:2rem; color:#fff; }
.masterplan-title{ font-size:1.25rem; font-weight:var(--font-weight-bold); color:var(--primary); margin-bottom:var(--spacing-sm); }
.masterplan-benefits{ font-size:.875rem; color:var(--muted); margin-bottom:var(--spacing-md); text-align:left; }
.masterplan-benefits p{ margin-bottom:var(--spacing-xs); }
.reserve-btn{ background:var(--primary); color:#fff; padding:var(--spacing-sm) var(--spacing-lg); border-radius:var(--radius-md); font-weight:var(--font-weight-semibold); transition:var(--transition); display:inline-block; }
.reserve-btn:hover{ background:var(--primary-light); transform:translateY(-2px); }

/* ========== Contacto ========== */
.contact-section{ background:var(--primary); color:#fff; }
.contact-grid{ display:grid; gap:var(--spacing-lg); margin-bottom:var(--spacing-xl); }
.contact-card{
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2); padding:var(--spacing-lg);
  border-radius:var(--radius-xl); text-align:center;
}
.contact-icon{
  width:4rem; height:4rem;
  background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.1));
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-2xl); margin:0 auto var(--spacing-sm);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform .25s ease, box-shadow .25s ease;
}
.contact-icon:hover{ transform:scale(1.05); box-shadow:var(--shadow-xl); }
.contact-icon .icon{ width:2rem; height:2rem; color:#fff; }
.contact-title{ font-size:1.25rem; font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-xs); }
.contact-info{ opacity:.9; }

.contact-cta{ text-align:center; }
.cta-content{ margin-bottom:var(--spacing-lg); }
.cta-title{ font-size:1.5rem; font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-sm); }
.cta-text{ font-size:1.125rem; opacity:.9; }
.cta-buttons{ display:flex; flex-direction:column; gap:var(--spacing-sm); justify-content:center; align-items:center; }
.cta-btn{ padding:var(--spacing-sm) var(--spacing-xl); border-radius:var(--radius-md); font-size:1.125rem; font-weight:var(--font-weight-semibold); transition:var(--transition); min-width:180px; }
.cta-btn-outline{ border:2px solid #fff; color:#fff; background:transparent; }
.cta-btn-outline:hover{ background:#fff; color:var(--primary); }
.cta-btn-contact{ background:var(--accent); color:#fff; }
.cta-btn-contact:hover{ background:hsl(122,55%,28%); }

/* ========== Landpy ========== */
.landpy-section{ background:var(--primary); color:#fff; }
.stats-grid{ display:grid; gap:var(--spacing-lg); margin-bottom:var(--spacing-xl); }
.stat-card{ background:rgba(255,255,255,.15); padding:var(--spacing-lg); border-radius:var(--radius-xl); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); text-align:center; transition:background .25s ease; }
.stat-card:hover{ background:rgba(255,255,255,.2); }
.stat-number{ font-size:3rem; font-weight:var(--font-weight-bold); color:#fff; margin-bottom:var(--spacing-xs); }
.stat-label{ font-size:.875rem; color:rgba(255,255,255,.8); }
.landpy-footer{ text-align:center; }
.landpy-location{ font-size:1.5rem; font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-sm); }
.landpy-slogan{ font-size:1.25rem; color:#fff; font-weight:var(--font-weight-bold); background:rgba(255,255,255,.1); padding:var(--spacing-xs) var(--spacing-md); border-radius:2rem; display:inline-block; }
.landpy-logo{ display:block; margin:0 auto var(--spacing-sm); max-width:min(320px,80%); width:100%; height:auto; object-fit:contain; }

/* ========== Footer ========== */
.footer{ background:hsl(0,0%,10%); color:#fff; padding:var(--spacing-2xl) 0 var(--spacing-lg); }
.footer-content{ display:grid; gap:var(--spacing-xl); margin-bottom:var(--spacing-xl); }
.footer-section{ display:flex; flex-direction:column; gap:var(--spacing-sm); }
.footer-logo{ display:flex; align-items:center; gap:var(--spacing-sm); margin-bottom:var(--spacing-sm); }
.footer-logo-img{ height:2rem; width:auto; }
.footer-logo-img-lg{ height:3.25rem; width:auto; }
@media (min-width:768px){ .footer-logo-img-lg{ height:3.75rem; } }
.footer-description{ color:hsla(0,0%,100%,.8); line-height:1.6; }
.footer-title{ font-size:1.125rem; font-weight:var(--font-weight-bold); margin-bottom:var(--spacing-sm); }
.footer-nav{ display:flex; flex-direction:column; gap:var(--spacing-xs); }
.footer-link{ color:hsla(0,0%,100%,.8); transition:var(--transition); padding:.25rem 0; }
.footer-link:hover{ color:var(--accent); }
.footer-contact{ display:flex; flex-direction:column; gap:var(--spacing-xs); }
.contact-detail{ color:hsla(0,0%,100%,.8); font-size:.875rem; }
.social-links{ display:flex; gap:var(--spacing-sm); margin-top:var(--spacing-sm); }
.social-link{ width:2.5rem; height:2.5rem; background:rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease; }
.social-link:hover{ background:var(--accent); transform:translateY(-2px); }
.social-link .icon{ width:1.25rem; height:1.25rem; }
.footer-divider{ border:0; height:1px; background:rgba(255,255,255,.2); }
.footer-copyright{ text-align:center; padding-top:var(--spacing-lg); }
.footer-copyright p{ color:hsla(0,0%,100%,.6); font-size:.875rem; }

/* ========== Botón flotante WhatsApp ========== */
.whatsapp-float{
  position: fixed;
  right: max(16px, var(--sa-right));
  bottom: max(16px, var(--sa-bottom));
  z-index:1200;
  width: clamp(52px, 8vw, 64px);
  height: clamp(52px, 8vw, 64px);
  border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
  transition:transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.whatsapp-float:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 24px rgba(0,0,0,.28); }
.whatsapp-float svg{ width:60%; height:60%; fill:#fff; display:block; }

/* Reservá espacio inferior para que el FAB no tape contenido fijo */
main{ padding-bottom: calc(96px + var(--sa-bottom)); }
.page-contact main{ padding-bottom: 0; }
.page-ubicacion main{ padding-bottom: 0; }
.page-index main{ padding-bottom: 0; }

/* Evitar clipping por overflow/transform en ancestros del FAB */
.hero-section,
.header, .header-content, .header .container,
.hero-background, .hero-content,
main, .section, .page, .footer, .footer-content { overflow: visible !important; }
body{ transform: none !important; }
.header, .hero-section, .gallery-section, .amenities-section, .masterplan-section, .contact-section, .landpy-section, .footer{ border-radius: 0; }

/* ========== Responsive ========== */
@media (min-width:768px){
  .nav{ display:flex; }
  .hero-buttons{ flex-direction:row; }
  .location-grid, .masterplan-grid{ grid-template-columns:1fr 1fr; }
  .amenities-grid{ grid-template-columns:repeat(3,1fr); }
  .amenities-list{ grid-template-columns:repeat(4,1fr); }
  .contact-grid{ grid-template-columns:repeat(3,1fr); }
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
  .cta-buttons{ flex-direction:row; }
  .footer-content{ grid-template-columns:repeat(3,1fr); }
  .lot-info-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .container{ padding:0 2rem; }
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
  .amenities-list{ grid-template-columns:repeat(5,1fr); }
}

/* ========== Animations básicas ========== */
@keyframes bounce{
  0%,20%,53%,80%,100%{ transform:translate3d(-50%,0,0); }
  40%,43%{ transform:translate3d(-50%,-30px,0); }
  70%{ transform:translate3d(-50%,-15px,0); }
  90%{ transform:translate3d(-50%,-4px,0); }
}
@keyframes pulse{ 0%{opacity:1;} 50%{opacity:.5;} 100%{opacity:1;} }
.icon{ width:1.5rem; height:1.5rem; stroke-width:2; }

/* ========== Motion & Scroll Reveal (más notorio y repetible) ========== */
/* Estado inicial */
[data-reveal]{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition-property: opacity, transform, filter;
  transition-duration: var(--reveal-duration);
  transition-timing-function: var(--reveal-ease);
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
/* Variantes */
[data-reveal="fade-in"]     { transform: none; }
[data-reveal="fade-up"]     { transform: translateY(var(--reveal-distance)); }
[data-reveal="slide-left"]  { transform: translateX(44px); }
[data-reveal="slide-right"] { transform: translateX(-44px); }
[data-reveal="zoom-in"]     { transform: translateY(16px) scale(.92); filter: blur(2px); }
/* Estado visible */
.is-visible[data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }
/* Stagger automático en contenedores marcados */
[data-stagger] > *[data-reveal]{ transition-delay: calc( var(--delay, 0ms) + var(--i, 0) * var(--stagger) ); }
[data-stagger] > * { --i: 0; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal], .gallery-card, .hero-background, .map-marker{
    transition:none !important; transform:none !important; animation:none !important;
    opacity:1 !important; filter:none !important;
  }
}

/* ===== HERO responsive + logo centrado ===== */

/* Asegura que el hero siempre ocupe el alto visible sin esconderse bajo el header fijo */
.hero-section{
  min-height: calc(100svh - max(56px, var(--sa-top))); /* 56px ≈ header alto */
  padding-top: max(12px, var(--sa-top));               /* respeta notch/gestos */
}

/* Contenedor del contenido centrado y con buen respiro lateral en móviles */
.hero-content{
  width: min(92%, 72rem);
  margin: 0 auto;
  text-align: center;
  padding-inline: clamp(12px, 4vw, 24px);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2.5vw, 16px);
}

/* Logo centrado y fluido: no pixela, no “explota” en móviles */
/* Centrar el logo del hero sin escalarlo */
.hero-logo{
  display: block;           /* necesario para margin auto */
  margin-left: auto;
  margin-right: auto;
  width: auto !important;   /* evita reglas previas tipo width: 100%/clamp */
  height: auto !important;  /* respeta tamaño nativo */
  max-width: 100%;          /* por si en mobile el contenedor es más chico */
}


/* Títulos con respiración respecto al logo en pantallas chicas */
.hero-title{ margin-top: clamp(4px, 1.2vw, 8px); }
.hero-subtitle{ margin-top: 0; }

/* Botonera: columna en mobile, fila en desktop (tu CSS ya lo hace; reforzamos tamaños) */
.hero-buttons .hero-btn{
  min-width: clamp(160px, 44vw, 220px);
  padding: clamp(12px, 2.6vw, 16px) clamp(16px, 4.5vw, 24px);
}

/* Evita que el video “aplane” el contenido por escalas raras */
.hero-bg-video{ object-fit: cover; }

/* Fine-tuning por breakpoint */
@media (min-width: 768px){
  .hero-logo{ width: clamp(220px, 20vw, 420px); }
  .hero-content{ gap: 18px; }
}
.hero-title {
  text-transform: none !important;  /* respeta mayúsculas/minúsculas del texto */
}

/* ===== Alternancia de fondos por sección ===== */
:root{
  --on-primary: #ffffff;
  --on-light: #0f172a;         /* gris muy oscuro para buen contraste */
  --primary-soft: #223f84;     /* un pelín más claro para overlays */
}

/* ===== Ajustes específicos para la página de contacto ===== */
.contact-page-section{
  padding-top: calc(6rem + var(--sa-top)); /* deja espacio para el header fijo */
  padding-bottom: 4rem;
}

.contact-form-wrapper{
  margin: 1rem; /* pequeño respiro en mobile */
}

/* centralizar y dar altura minima agradable */
.contact-grid{ display:block; }
.contact-form-wrapper{ max-width:760px; margin: 0 auto; }

@media(min-width:768px){
  .contact-page-section{ padding-top: calc(8rem + var(--sa-top)); }
  .contact-form-wrapper{ padding: 2rem 2.25rem; }
}

/* Fondo azul principal */
.section--primary{
  background: var(--primary);   /* #1D3973 */
  color: var(--on-primary);
}

/* Fondo claro (neutro) */
.section--light{
  background: linear-gradient(180deg, var(--light-gray) 0%, var(--white) 100%);
  color: var(--on-light);
}

/* Titulares y párrafos dentro de cada variante */
.section--primary .section-title{ color:#fff; }
.section--light  .section-title{ color:var(--primary); }

/* Caja de descripción: se adapta a cada fondo */
.section--primary .section-description{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
}
.section--light .section-description{
  color:#286565;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.04);
}

/* Tarjetas: look consistente en ambos fondos */
.section--primary .info-card,
.section--primary .amenity-card,
.section--primary .gallery-card,
.section--primary .masterplan-card,
.section--primary .contact-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  color:#fff;
}
.section--primary .info-title,
.section--primary .amenity-title,
.section--primary .masterplan-title{ color:#fff; }
.section--primary .info-text,
.section--primary .amenity-description,
.section--primary .benefit-desc,
.section--primary .lot-value{ color: rgba(255,255,255,.85); }

/* Overlays de imágenes cuando el fondo de sección es azul (mejor contraste) */
.section--primary .amenity-overlay{
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}
.section--primary .gallery-overlay{
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}

/* Botones dentro de secciones primarias: invertir para resaltar */
.section--primary .hero-btn-primary,
.section--primary .reserve-btn,
.section--primary .cta-btn-contact{
  background:#fff; color: var(--primary);
}
.section--primary .hero-btn-primary:hover,
.section--primary .reserve-btn:hover,
.section--primary .cta-btn-contact:hover{
  background:#f2f6ff; color: var(--primary-dark);
}
.section--primary .hero-btn-outline,
.section--primary .cta-btn-outline{
  border-color:#fff; color:#fff; background:transparent;
}
.section--primary .hero-btn-outline:hover,
.section--primary .cta-btn-outline:hover{
  background:#fff; color: var(--primary);
}

/* Chips y acentos */
.section--primary .resaltado{
  background: rgba(255,255,255,.18);
  color:#fff;
}
.section--light .resaltado{
  background: var(--primary);
  color:#fff;
}

/* Iconos circulares y acentos en secciones primarias */
.section--primary .location-icon,
.section--primary .masterplan-icon{
  background: #fff; color: var(--primary);
}
.section--primary .amenity-icon{
  color:#fff; border-color:#fff;
}

/* Links dentro de sección primaria */
.section--primary a{ color:#fff; }

/* Video full-bleed: se ve bien en ambos fondos */
.section--primary .video-embed{ background: #000; }

/* Footer ya es oscuro, lo dejamos tal cual */


/* ==== FIX: Landpy en fondo claro (section--light) ==== */
.landpy-section.section--light{
  background: linear-gradient(180deg, var(--light-gray) 0%, var(--white) 100%);
  color: var(--on-light);
}

/* Tarjetas de stats: de vidrio/blanco a cards claras con texto oscuro */
.landpy-section.section--light .stat-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-md);
  color: var(--on-light);
}

/* Números y etiquetas con buen contraste */
.landpy-section.section--light .stat-number{
  color: var(--primary);               /* azul corporativo */
}
.landpy-section.section--light .stat-label{
  color: #475569;                      /* slate-600 */
}

/* Títulos y textos del bloque final */
.landpy-section.section--light .landpy-location{
  color: var(--primary);
}
.landpy-section.section--light .landpy-slogan{
  color: var(--primary);
  background: rgba(29,57,115,.08);     /* pill suave */
  border: 1px solid rgba(29,57,115,.12);
}

/* Descripción superior dentro de Landpy (si la usás) */
.landpy-section.section--light .section-description{
  color:#286565;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.04);
}

/* Si hay iconos SVG dentro de las tarjetas, que hereden color oscuro */
.landpy-section.section--light .icon{
  color: var(--primary);
  stroke: currentColor;
}
/* Sección clara con textura repetitiva */
.section--light {
  --section-bg: #F7F9FC;                 /* base muy clara */
  background-color: var(--section-bg);
  background-image: url('assets/textures/light-texture-256.png');
  background-repeat: repeat;
  background-size: 256px 256px;          /* tamaño del tile */
  /* Opcional: suaviza la percepción del patrón si lo querés aún más sutil */
  /* background-image:
      linear-gradient(0deg, rgba(255,255,255,.65), rgba(255,255,255,.65)),
      url('assets/textures/light-texture-256.png'); */
}

/* 1) Paleta on-primary (texto sobre fondo azul) */
:root{
  --on-primary: #ffffff;                 /* texto principal */
  --on-primary-strong: #F3F6FC;          /* títulos / valores */
  --on-primary-muted: rgba(255,255,255,.78);
  --on-primary-subtle: rgba(255,255,255,.6);
  --card-on-primary: rgba(255,255,255,.08);  /* fondo de card sobre azul */
  --card-on-primary-brd: rgba(255,255,255,.18);
  --chip-on-primary: rgba(0,0,0,.22);    /* contorno suave si necesitás */
}

/* 2) Secciones con fondo azul (tu helper section--brand) */
.section--brand,
.masterplan-section{                      /* si masterplan usa el azul */
  background: var(--primary) !important;
  color: var(--on-primary);
}

/* 3) Tipografía dentro de secciones azules */
.section--brand .section-title,
.masterplan-section .section-title{
  color: var(--on-primary-strong);
}

.section--brand .section-description,
.masterplan-section .section-description{
  color: var(--on-primary-muted);
  background: rgba(255,255,255,.06);     /* vitrina suave */
  border: 1px solid var(--card-on-primary-brd);
}

/* 4) Cards informativos: más claros y con borde */
.section--brand .info-card,
.masterplan-section .info-card{
  background: var(--card-on-primary);
  border: 1px solid var(--card-on-primary-brd);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* 5) Títulos y textos dentro del card */
.section--brand .info-title,
.masterplan-section .info-title{
  color: var(--on-primary-strong);
}

.section--brand .lot-label,
.masterplan-section .lot-label{
  color: var(--on-primary-subtle);
}

.section--brand .lot-value,
.masterplan-section .lot-value{
  color: var(--on-primary-strong);
  font-weight: var(--font-weight-semibold);
}

/* 6) Beneficios / bullet list: sube contraste */
.section--brand .benefit-title,
.masterplan-section .benefit-title{
  color: var(--on-primary-strong);
}
.section--brand .benefit-desc,
.masterplan-section .benefit-desc{
  color: var(--on-primary-subtle);
}

/* 7) Botón "Reservar" sobre azul: alto contraste */
.section--brand .reserve-btn,
.masterplan-section .reserve-btn{
  background: #FFFFFF;
  color: var(--primary);
  border: 1px solid rgba(0,0,0,.06);
}
.section--brand .reserve-btn:hover,
.masterplan-section .reserve-btn:hover{
  background: #F3F6FC;
  transform: translateY(-2px);
}

/* 8) Si usás badges/overlays dentro de cards en azul */
.section--brand .amenity-overlay,
.masterplan-section .amenity-overlay{
  background: linear-gradient(to top,
    rgba(0,0,0,.35), transparent);
}

/* 9) Controles de accesibilidad: si el usuario pide más contraste */
@media (prefers-contrast: more){
  .section--brand .info-card,
  .masterplan-section .info-card{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
  }
  .section--brand .section-description,
  .masterplan-section .section-description{
    background: rgba(255,255,255,.10);
  }
}


/* =========================
   Check de beneficios (CSS puro)
   ========================= */

/* Contenedor del item (por si querés alinear mejor el ícono) */
.benefit-item{
  display:flex;
  align-items:flex-start;
  gap: .75rem;
}

/* Ícono: cajita + tilde dibujada con bordes */
.benefit-icon{
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: 2px solid currentColor;   /* usa el color del texto */
  border-radius: .25rem;
  margin-top: .25rem;               /* alinea con el título */
  display: inline-block;
}

/* El tilde: dos bordes rotados */
.benefit-icon::after{
  content: "";
  position: absolute;
  left: 26%;
  top: 16%;
  width: .35rem;                    /* brazo corto */
  height: .70rem;                   /* brazo largo */
  border-right: 3px solid var(--accent);  /* color del tilde */
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Colores por contexto (claro vs fondo azul) */
.benefits-list,
.benefits-list * { color: var(--primary); }                 /* secciones claras */
.section--brand .benefits-list,
.masterplan-section .benefits-list { color: var(--on-primary); } /* secciones azules */

/* Tipos de texto (con mejor contraste en azul) */
.section--brand .benefit-title,
.masterplan-section .benefit-title{ color: var(--on-primary-strong); }
.section--brand .benefit-desc,
.masterplan-section .benefit-desc{ color: var(--on-primary-subtle); }

/* === Override definitivo del icono de beneficios (sin imágenes) === */
.benefits-list .benefit-item .benefit-icon{
  /* anula cualquier imagen previa */
  background: none !important;
  background-image: none !important;

  /* dibuja el cuadro */
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .25rem;
  flex-shrink: 0;

  /* borde del cuadro (hereda el color de texto del contexto) */
  border: 2px solid currentColor !important;
  border-radius: .25rem;
  box-shadow: none !important;   /* por si alguna regla agregaba sombra */
  outline: none !important;      /* evita “borde negro” residual */
}

/* tilde con CSS (verde de --accent) */
.benefits-list .benefit-item .benefit-icon::after{
  content: "";
  position: absolute;
  left: 26%;
  top: 16%;
  width: .35rem;                  /* brazo corto */
  height: .70rem;                 /* brazo largo */
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Colores de texto/contraste en fondos oscuros */
.section--brand .benefits-list .benefit-item,
.masterplan-section .benefits-list .benefit-item{ color: #e9f0ff; }   /* texto claro */
.section--brand .benefits-list .benefit-item .benefit-icon,
.masterplan-section .benefits-list .benefit-item .benefit-icon{ color:#d5e2ff; } /* borde del cuadro */


.section--light{
  position: relative;
  background: #fff;
}
.section--light::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('assets/textures/arena.png');
  background-repeat: repeat;
  background-size: 512px 512px;
  opacity: .20;            /* ajusta intensidad de la textura */
  pointer-events:none;
}

/* ===== Modal de Galería ===== */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(2px);
  z-index:1300;
}
.modal.is-open{display:block;}

.modal__inner{
  position:absolute;
  inset:5% 3%;
  display:grid;
  place-items:center;
  touch-action:none; /* habilita swipe horizontal sin que el browser consuma el gesto */
}

.modal__img{
  max-width:96vw;
  max-height:90vh;
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.modal__close{
  position:absolute;
  top:10px;
  right:14px;
  font-size:32px;
  line-height:1;
  color:#fff;
  cursor:pointer;
  z-index:3; /* asegurar que quede por encima de los botones */
}

/* Navegación */
.modal__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:2;
}
.modal__btn--prev{left:14px;}
.modal__btn--next{right:14px;}

/* ===== Galería ===== */
.gallery-card{cursor:zoom-in;}
.gallery-image{position:relative;}
.gallery-overlay{pointer-events:none;} /* evita que la overlay bloquee el click */


/* ===== Página de Contacto ===== */
.contact-page-section {
  padding-top: calc(5rem + var(--sa-top));
  background: linear-gradient(180deg, var(--light-gray) 0%, var(--white) 100%);
}

.contact-grid {
  display: grid;
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 3fr 2fr;
  }
}

/* Formulario */
.contact-form-wrapper {
  background: #fff;
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: var(--font-weight-medium);
  color: var(--primary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-btn {
  background: var(--primary);
  color: #fff;
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  margin-top: var(--spacing-sm);
}

.submit-btn:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
}

/* Información de contacto */
.contact-info-wrapper {
  align-self: start;
}

.contact-info-card {
  background: var(--primary);
  color: #fff;
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.contact-info-card h3 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-lg);
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-method:last-child {
  border-bottom: none;
}

.contact-method .icon {
  width: 24px;
  height: 24px;
  color: #fff;
  flex-shrink: 0;
}

.contact-method h4 {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
}

.contact-method p {
  opacity: 0.9;
  font-size: 0.9375rem;
}

.contact-method a {
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

.contact-method a:hover {
  opacity: 0.8;
}

/* reCAPTCHA responsive */
.g-recaptcha {
  margin-top: var(--spacing-sm);
}

@media (max-width: 400px) {
  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left center;
  }
}

/* Centrado sin tocar el resto del layout */
.section-actions--center{
  margin-top:24px;
  text-align:center;
}

/* Asegura que el botón conserve su caja */
.section-actions--center .hero-btn{
  display:inline-block;
}

/* --- CONTRASTE REAL PARA OUTLINE --- */
.hero-btn.hero-btn-outline.btn-contrast{
  /* forzamos contraste sobre fondos claros */
  color:#1D3973 !important;
  border-color:#1D3973 !important;
  border-width:2px !important;
  background:rgba(255,255,255,0.98) !important;

  /* legibilidad y relieve */
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  text-shadow:none !important;
  backdrop-filter:saturate(140%);
}

/* Hover/focus bien visibles */
.hero-btn.hero-btn-outline.btn-contrast:hover,
.hero-btn.hero-btn-outline.btn-contrast:focus{
  background:#1D3973 !important;
  color:#fff !important;
  border-color:#1D3973 !important;
}

/* Contenedor centrado con mismo ancho visual que la section-description */
.contact-form-container {
  max-width: 48rem; /* igual que .section-description */
  margin: 0 auto;
}

/* Opcional: ajusta la caja del formulario al ancho completo de ese contenedor */
.contact-form-wrapper {
  width: 100%;
  background: #fff;
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ===== Contact (Home) v2 — aislado para evitar conflictos ===== */
.contact-section-v2{
  background: var(--primary);
  color: #fff;
}

/* Grid responsive: 1 col en móvil, 3 en desktop */
.contact-grid-v2{
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;                /* móvil */
  margin-bottom: var(--spacing-xl);
  align-items: stretch;
}
@media (min-width: 768px){
  .contact-grid-v2{
    grid-template-columns: repeat(3, minmax(0,1fr));  /* desktop */
  }
}

/* Card */
.contact-card-v2{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-align: center;
  height: 100%;                                /* ocupa toda su celda */
  box-shadow: var(--shadow-lg);
}

/* Icono circular “glass” */
.contact-icon-v2{
  width: 4rem; height: 4rem;
  margin: 0 auto var(--spacing-sm);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.contact-card-v2:hover .contact-icon-v2{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.contact-icon-v2 .icon{ width: 2rem; height: 2rem; color: #fff; }

/* Tipos */
.contact-title-v2{ font-size: 1.25rem; font-weight: var(--font-weight-bold); margin-bottom: .25rem; }
.contact-info-v2{ opacity: .92; }
.contact-info-v2 a{ color: #fff; text-decoration: none; }
.contact-info-v2 a:hover{ text-decoration: underline; }

/* CTA inferior */
.contact-cta-v2{ text-align: center; }
.cta-content-v2{ margin-top: var(--spacing-xl); margin-bottom: var(--spacing-lg); }
.cta-title-v2{ font-size: 1.5rem; font-weight: var(--font-weight-bold); margin-bottom: .35rem; }
.cta-text-v2{ font-size: 1.125rem; opacity: .9; }

.cta-buttons-v2{
  display: flex; flex-direction: column; gap: var(--spacing-sm);
  align-items: center; justify-content: center;
}
@media (min-width: 640px){
  .cta-buttons-v2{ flex-direction: row; }
}
.cta-btn-v2{
  padding: var(--spacing-sm) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-size: 1.125rem; font-weight: var(--font-weight-semibold);
  min-width: 180px; transition: var(--transition);
}
.cta-btn-outline-v2{ border: 2px solid #fff; color: #fff; background: transparent; }
.cta-btn-outline-v2:hover{ background: #fff; color: var(--primary); }
.cta-btn-contact-v2{ background: var(--accent); color: #fff; }
.cta-btn-contact-v2:hover{ background: hsl(122,55%,28%); }