input,
select,
textarea {
width: 100%;
max-width: 100%;
}
.form-wrapper {
width: 100%;
max-width: 600px;
margin: auto;
}
.container,
.about-wrapper,
section {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


html {  
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}

section{
  scroll-margin-top: 100px; /* altura del header fijo */
}


.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

.header-flex {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

.nav {
display: flex;
gap: 20px;
}



:root{
  --purple:#3c1478;
  --gold:#f5c542;
  --white:#ffffff;
}
/* Contenedor centrado arriba*/
.hero-centered{
  max-width: 1100px;
  margin: 0 auto;
padding-top: clamp(80px, 12vw, 120px);
  text-align: center;
}


img {
  max-width: 100%;
  height: auto;
}



/* ===============================
ABOUT SECTION
=============================== */


.about-header {
  text-align: center;
  margin-bottom: 40px;
}

.about-badge {
  display: inline-block;
  background: rgba(233, 0, 0, 0.15);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.about-header h2 {
  font-size: 36px;
  font-weight: 700;
}

.about-header h2 span {
  color: #ffffff;
}

.about-content {
  max-width: 850px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}

.about-content p {
  margin-bottom: 18px;
}

.about-highlight {
  margin-top: 30px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.12);
  border-left: 4px solid #cdb4ff;
  border-radius: 8px;
  font-size: 17px;
}

/* ===============================
RESPONSIVE
=============================== */

@media (max-width: 768px) {
  .about-header h2 {
    font-size: 28px;
  }

  .about-content {
    font-size: 15px;
  }
}



.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* móviles pequeños */
@media (max-width: 360px) {}

/* móviles estándar */
@media (max-width: 480px) {}

/* móviles grandes */
@media (max-width: 576px) {}

/* tablets */
@media (max-width: 768px) {}



/* =====================================
ABOUT MODERN – OVAL DESIGN
===================================== */
.about-modern {
  padding: 100px 0;
  position: relative;
  color: #fff;
  overflow: hidden;

  /* Fondo morado elegante con textura sutil */
  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.06),
      transparent 45%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0,0,0,0.25),
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #3c1478,
      #5a1e8a,
      #4a1a6b
    );
}

.about-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.about-wrapper{
  position: relative;
  z-index: 2;
}




.about-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  padding: 0 20px;
}

/* TEXTO */
.about-text h2 {
  font-size: 42px;
  margin: 15px 0 25px;
  color: #6d0d70;
}

.about-text h2 span {
  color: #d4af37;
}

.about-text p {
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 18px;
  color: #6d0d70;
}

.about-badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  letter-spacing: 1px;
}

.about-highlight {
  margin-top: 25px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.15);
  border-left: 4px solid #d4af37;
  border-radius: 10px;
  font-size: 16px;
}

/* IMÁGENES */
.about-images{
  position: relative;
  width: 300px;
  height: 420px;
}


/* decorativos */
.shape{
  position: absolute;
  z-index: 1;
}


.about-images {
position: relative;
width: 100%;
max-width: 420px;
height: auto;
margin: 0 auto;
}

.image-main {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 50%;
overflow: hidden;
}

.image-main img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* IMAGEN PEQUEÑA */
.image-small {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  z-index: 4;
  background: #fff;
}

.image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* OVALOS */
.about-oval {
  position: absolute;
  border-radius: 50% / 60%;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
  background: #fff;
}

.about-oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* GRANDE */
.about-oval.big {
  width: 320px;
  height: 420px;
  right: 0;
  top: 0;
}

/* PEQUEÑO */
.about-oval.small {
  width: 180px;
  height: 220px;
  right: 240px;
  bottom: -20px;
  border: 6px solid #6a2da8;
}

/* RESPONSIVE */
@media (max-width: 992px) {

.about-wrapper {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}

}

  .about-images {
    height: 360px;
  }

  .about-oval.big {
    right: 50%;
    transform: translateX(50%);
  }

  .about-oval.small {
    right: 50%;
    transform: translateX(120%);
  }

/* =====================================
ABOUT DECORATIVE SHAPES (LIKE IMAGE)
===================================== */

.about-modern {
  position: relative;
}

/* CONTENEDOR */
.about-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* BASE SHAPE */
.shape {
  position: absolute;
  opacity: 0.85;
}

/* =======================
CIRCULOS
======================= */
.shape.circle {
  border-radius: 50%;
  filter: blur(0.5px);
}

.shape.circle.purple {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #9b5de5, #5a189a);
  top: -40px;
  left: -60px;
}

.shape.circle.gold {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, #ffd166, #d4af37);
  bottom: 120px;
  right: 80px;
}

/* =======================
OVALOS ORGÁNICOS
======================= */
.shape.oval {
  border-radius: 50% / 60%;
  filter: blur(0.2px);
}

.shape.oval.orange {
  width: 220px;
  height: 140px;
  background: #f4a261;
  top: 120px;
  right: 40px;
  transform: rotate(15deg);
}

.shape.oval.blue {
  width: 160px;
  height: 110px;
  background: #4cc9f0;
  bottom: 60px;
  right: 200px;
  transform: rotate(-12deg);
}

/* =======================
LINEA CURVA
======================= */
.shape.line {
  width: 300px;
  height: 300px;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 50%;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
}

/* =======================
ESTRELLAS
======================= */
.shape.star {
  font-size: 26px;
  color: #fff;
  top: 60px;
  right: 120px;
  animation: twinkle 3s infinite ease-in-out;
}

.shape.star.small {
  font-size: 16px;
  top: 280px;
  right: 300px;
  opacity: 0.7;
}

/* =======================
PUNTOS
======================= */
.shape.dots {
  width: 120px;
  height: 80px;
  background-image: radial-gradient(rgba(255,255,255,0.45) 2px, transparent 2px);
  background-size: 14px 14px;
  bottom: 40px;
  left: 120px;
  opacity: 0.6;
}

/* =======================
ANIMACIONES SUAVES
======================= */
@keyframes twinkle {
  0%,100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* =======================
CAPAS CORRECTAS
======================= */
.about-wrapper {
  position: relative;
  z-index: 2;
}
/* =====================================
ABOUT – ANIMACIONES PREMIUM
===================================== */

/* Movimiento flotante general */
@keyframes floatSlow {
  0%   { transform: translateY(0) translateX(0); }
  50%  { transform: translateY(-18px) translateX(6px); }
  100% { transform: translateY(0) translateX(0); }
}

/* Flotación secundaria */
@keyframes floatSoft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Línea respirando */
@keyframes breathe {
  0%   { transform: scale(1); opacity: .35; }
  50%  { transform: scale(1.08); opacity: .6; }
  100% { transform: scale(1); opacity: .35; }
}

/* Estrellas */
@keyframes sparkle {
  0%   { opacity: .4; transform: rotate(0deg) scale(1); }
  50%  { opacity: 1; transform: rotate(180deg) scale(1.25); }
  100% { opacity: .4; transform: rotate(360deg) scale(1); }
}

/* =======================
APLICACIÓN A SHAPES
======================= */

.shape.circle.purple {
  animation: floatSlow 14s infinite ease-in-out;
}

.shape.circle.gold {
  animation: floatSoft 10s infinite ease-in-out;
}


.shape.oval.blue {
  animation: floatSoft 12s infinite ease-in-out;
}

.shape.line {
  animation: breathe 8s infinite ease-in-out;
}

.shape.star {
  animation: sparkle 6s infinite linear;
}

.shape.star.small {
  animation: sparkle 9s infinite linear;
}

.shape.dots {
  animation: floatSoft 18s infinite ease-in-out;
}

/* =======================
SUAVIDAD GLOBAL
======================= */
.about-decor * {
  will-change: transform, opacity;
}




.shape.orange{
  position: absolute;
  top: -30px;
  left: 0;

  width: 160px;
  height: 160px;

  background: #f6b26b;
  border-radius: 50%;
  opacity: .6;
  z-index: 1;
}

.shape.blue{
  position: absolute;
  bottom: -20px;
  left: 60px;

  width: 200px;
  height: 200px;

  background: #6fa8dc;
  border-radius: 50%;
  opacity: .7;
  z-index: 1;
}


.image-oval{
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

.image-oval img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ÓVALOS – FUERA DEL CONTENEDOR DE IMÁGENES */

.shape.oval.blue{
  right: -260px;   /* 🔥 fuera */
  bottom: 20px;
}

/* CÍRCULOS – NO TOCAN IMÁGENES */

.shape.circle.purple{
  right: 360px;    /* se aleja del bloque imagen */
  top: 120px;
}

.shape.circle.gold{
  right: 420px;
  bottom: 140px;
}


.shape.star{
  z-index: 2; /* decorativo medio */
}

.shape.line{
  right: 460px;
  top: 30px;
}


/* ===============================
MULTISTEP SLIDE ANIMATION
=============================== */

.form-step {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;

  opacity: 0;
  transform: translateX(100%);
  transition: transform .45s ease, opacity .35s ease;
  pointer-events: none;
    transition: transform .45s cubic-bezier(.2,.65,.2,1),
              opacity .35s ease;
}


/* activo */
.form-step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}

/* cuando viene desde atrás */
.form-step.prev-step {
  transform: translateX(-100%);
}

/* contenedor */
#quoteForm {
  position: relative;
  overflow: hidden;
  min-height: 420px; /* evita saltos */
}



*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins}
body{background:#ffffff;color:#222}

.container{max-width:1200px;margin:auto;padding:0 20px}

/* Título principal */

.hero-title{
  line-height: 1.05;
  margin-bottom: 25px;
}

.hero-white{
  color: var(--white);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: 1px;
}

.hero-gold{
  color: var(--gold);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  display: inline-block;
}


/*   Subtítulo (ligeramente menor)  */
.hero-subtitle{
  color: #f2f2f2;
  font-size: clamp(18px, 2.2vw, 24px);
  max-width: 760px;
  margin: 0 auto 40px;
  line-height: 1.4;
}


/*   CTA — Rectángulo dividido en diagonal  */

.hero-cta-box{
  width: 460px;
  height: 70px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

/*  Diagonal divisoria   */

.hero-cta-box::after{
  content:"";
  position:absolute;
  width: 2px;
  height: 140%;
  background: rgba(255,255,255,.4);
  top:-20%;
  left:50%;
  transform: rotate(18deg);
}


/*  CTA Izquierdo — Dorado   */

.cta-left{
  background: var(--gold);
  color: #000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  text-decoration:none;
  font-size: 17px;
  transition: all .3s ease;
}

.cta-left:hover{
  background:#ffd96a;
}

/*  CTA Derecho — Blanco */
.cta-right{
  background: rgba(255,255,255,.92);
  color: var(--purple);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  text-decoration:none;
  font-size: 17px;
  transition: all .3s ease;
}

.cta-right:hover{
  background:#ffffff;
}



/* Responsive (móvil tipo app)*/
@media (max-width: 600px){

  .hero-cta-box{
    width: 100%;
    height: 64px;
  }

  .hero-centered{
padding-top: clamp(80px, 12vw, 120px);
  }
}






/* HEADER */
.header{
  position: relative;
  z-index: 9999;
  background: rgba(252, 230, 246, 0.75);

 /* morado translúcido */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 99;
  transition: background .35s ease, box-shadow .35s ease;
}


.header-flex{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.nav a{margin-left:20px;text-decoration:none;color:#333;font-weight:500}
.btn-cta{background:#ffcc00;padding:10px 20px;border-radius:30px}

/* HERO */
.hero{
  min-height: auto; /* compatible Android moderno */
  padding-top: 80px;
  display: flex;
  align-items: center;
  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
}


.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(60,20,120,.6);
  z-index:1;
}

.hero-content{
  position:relative;
  z-index:2;
}


.hero h1{font-size:48px}
.hero-buttons{margin-top:30px}
.btn-yellow{background:#ffcc00;color:#000;padding:14px 28px;border-radius:30px;text-decoration:none}
.btn-outline{border:2px solid #fff;color:#fff;padding:14px 28px;border-radius:30px;margin-left:15px}

/* INFO CARDS */
.info-cards{margin-top:-80px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}
.info-card{background:#ffffff;border-radius:16px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,.1)}
.info-card h3{padding:15px}
.info-card p{padding:0 15px 20px}

/* =========================
   INFO CARDS IMÁGENES FIX
   ========================= */

.info-card{
  background:#e7e0e0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:all .35s ease;
  display:flex;
  flex-direction:column;
}

/* 🔥 LA CLAVE ESTÁ AQUÍ */
.info-card img{
  width:100%;
  height:auto;          /* ✅ quita altura forzada */
  object-fit:contain;   /* ✅ imagen completa */
  display:block;
  padding:0;            /* sin espacios */
}

/* contenido */
.info-card-content{
  padding:25px;
  text-align:center;
  flex:1;
}
.info-card img{
  max-height:220px;
  margin:auto;
}


/* SERVICES */
.services{padding:100px 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.service{background:#fff;padding:25px;border-radius:14px;text-align:center}

/* WHY */
.why{background:#fdfdfd;padding:50px 0}
.why-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}

/* TESTIMONIAL */
.testimonial{background:#3a146b;color:#fff;padding:60px 0;text-align:center}

/* FORM */
.quote{padding:100px 0}
input,button{width:100%;padding:14px;margin-top:15px;border-radius:10px;border:none}
button{background:#ffcc00;color:#000;font-weight:600}

.quote-box{
  max-width:900px;
  margin:auto;
  background:#3a1d5d;
  padding:40px;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(243, 51, 163, 0.4);
}

.form-section h2{color:#fff}
.form-section .subtitle{color:#aaa;margin-bottom:30px}

.form-section h3{
  margin-top:40px;
  color:#f7c600;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.checkbox-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:10px 0;
}

.checkbox-inline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin:15px 0;
}

.form-section input,
.form-section select,
.form-section textarea{
  background:#4c2e6f;
  border:1px solid #9c75ca;
  color:#9c75ca;
}

.form-section label{color:#9c75ca}

.terms{
  font-size:14px;
  margin:20px 0;
}

@media(max-width:768px){
  .form-grid,
  .checkbox-inline{
    grid-template-columns:1fr;
  }
}



/* WHATSAPP */
.whatsapp{position:fixed;bottom:25px;right:25px;background:#25d366;width:60px;height:60px;
border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px}
.logo-area img{
  height:55px;
}
.form-sub{
  font-size:14px;
  opacity:.8;
  margin-bottom:20px;
}

.quote-form h4{
  margin-bottom:10px;
}

select, textarea{
  width:100%;
  padding:14px;
  margin-top:12px;
  border-radius:10px;
  border:none;
}

textarea{
  resize:none;
  height:100px;
}

.checkbox{
  display:block;
  margin-top:10px;
  font-size:14px;
}

.terms{
  font-size:13px;
  margin-top:10px;
}




.logo img {
  max-width: 140px;
  height: auto;
}

@media (max-width: 480px) {
  .logo img {
    max-width: 110px;
  }
}


/* LOGO TEXTO ESTILO IMAGEN GUIA */
.logo-text{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1;
}

.logo-main{
  font-size:28px;
  font-weight:700;
  letter-spacing:2px;
  color:#2b0f6b; /* morado oscuro corporativo */
}

.logo-sub{
  font-size:14px;
  font-weight:500;
  letter-spacing:3px;
  color:#9c0808;
  margin-top:4px;
}

/* BRAND LOGO + TEXT */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  transition:all .4s ease;
}

.brand img{
  height:80px; /* más presencia */
  transition:height .35s ease;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.brand-main{
  font-size:60px;
  font-weight:700;
  letter-spacing:1px;
  color:#ffffff;
}

.brand-sub{
  font-size:13px;
  font-weight:500;
  letter-spacing:3px;
  margin-top:4px;
  color:#2b0f6b;
}
/* SCROLL ANIMATION */
/* HEADER SCROLL FIX (REAL) */
.header-flex{
  transition:padding .35s ease;
}

.header.scrolled .header-flex{
  padding:8px 0;
}

/* BRAND SCROLL ANIMATION */
.brand{
  transition:all .35s ease;
}

.brand-main,
.brand-sub{
  transition:font-size .35s ease, letter-spacing .35s ease;
}

.brand.scrolled img{
  height:34px;
}

.brand.scrolled .brand-main{
  font-size:22px;
  letter-spacing:1.5px;
}

.brand.scrolled .brand-sub{
  font-size:11px;
  letter-spacing:2px;
}

.brand.scrolled img{
  height:34px;
}

.brand.scrolled .brand-main{
  font-size:2px;
}

.brand.scrolled .brand-sub{
  font-size:11px;
}
.header.scrolled{
  background: rgba(62, 2, 53, 0.95); /* morado casi sólido */
  box-shadow: 0 6px 25px rgba(0,0,0,.25);
}

/* LINKS SOBRE HERO */
.header .brand-main,
.header .brand-sub{
  color: transparent !important;
}

/* TEXTO DEL HEADER */
.header .nav a,
.header .brand-main,
.header .brand-sub{
  color:#cf22b8;
}

/* Botón CTA */
.header .btn-cta{
  background:#ffcc00;
  color:#000;
}
/* HERO SCROLL ANIMATION */
.animate-hero{
  opacity:0;
  transform:translateY(40px);
  transition:all 1s ease-out;
}

.animate-hero.visible{
  opacity:1;
  transform:translateY(0);
}

/* Animación escalonada */
.hero-title{
  transition-delay:.2s;
}

.hero-text{
  transition-delay:.4s;
}

.hero-buttons{
  transition-delay:.6s;
}
/* FORM ANIMATION */
.animate-form{
  opacity:0;
  transform:translateY(60px);
  transition:all .9s ease-out;
}

.animate-form.visible{
  opacity:1;
  transform:translateY(0);
}
/* ===================================== */
/* INFO CARDS SECTION */
/* ===================================== */

.info-cards{

  padding:100px 0 120px;
  margin-top:-100px; /* OVERLAP CON HERO */
  position:relative;
  z-index:5;
}

/* GRID */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

/* CARD */
.info-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;

  box-shadow:0 15px 35px rgba(0,0,0,.08);

  transition:all .35s ease;
}

/* HOVER LIFT */
.info-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 50px rgba(0,0,0,.15);
}

/* IMAGE */
/* IMAGE PERFECT FIT (SIN RECORTE) */
.info-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(255, 255, 255, 0.08);
  transition:all .35s ease;
}


@media(max-width:768px){
  .info-card img{
    aspect-ratio: 1/1; /* más cuadrado en móvil */
  }
}

/* BODY */
.card-body{
  padding:22px;
}

.card-body h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
  color:#222;
}

.card-body p{
  font-size:14px;
  color:#666;
  line-height:1.5;
}

/* ===================================== */
/* SCROLL ANIMATION */
/* ===================================== */

.animate-cards{
  opacity:0;
  transform:translateY(50px);
  transition:all 1s ease;
}

.animate-cards.visible{
  opacity:1;
  transform:translateY(0);
}

/* ===================================== */
/* LIGHTBOX */
/* ===================================== */

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.lightbox img{
  max-width:90%;
  max-height:90%;
  border-radius:10px;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:768px){
  .info-cards{
    margin-top:0; /* sin overlap móvil */
    padding:60px 0;
  }

  .info-card img{
    height:180px;
  }
}
/* SERVICES */
.services{
  padding:110px 0;
}

.section-title{
  text-align:center;
  font-size:32px;
  margin-bottom:60px;
  color:#2b0f6b;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

.service{
  background:#fff;
  padding:35px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:all .3s ease;
  font-size:32px;
}

.service h3{
  font-size:18px;
  margin:15px 0 8px;
}

.service p{
  font-size:14px;
  color:#666;
}

.service:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* ANIMATION */
.animate-services{
  opacity:0;
  transform:translateY(50px);
  transition:all 1s ease;
}

.animate-services.visible{
  opacity:1;
  transform:translateY(0);
}
/* GALLERY */

.lightbox-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#ffffff;
  border:none;
  width:48px;
  height:48px;
  border-radius:50%;
  cursor:pointer;
  font-size:22px;
  font-weight:bold;
  z-index:10000;
}

.lightbox-btn.prev{ left:20px; }
.lightbox-btn.next{ right:20px; }

.lightbox{
  cursor:pointer;
}


@media(max-width:768px){
  .gallery{
    backdrop-filter:none; /* mejor rendimiento móvil */
    background: rgba(255,255,255,0.9);
  }
}


.services-title {
  font-size: 56px;
  font-weight: 800;
  color: #f5c400;
  margin-bottom: 20px;
}

.services-subtitle {
  color: #6f0750;
  font-size: 18px;
  max-width: 720px;
  margin: 0 auto 70px;
}

.services-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}

.service-card {
  background: #f9f7fc;
  border-radius: 22px;
  padding: 40px 28px;
  box-shadow:
    0 25px 45px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(255,255,255,0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 35px 60px rgba(0,0,0,0.35);
}

.service-card .icon {
  font-size: 48px;
  margin-bottom: 18px;
}

.service-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #2e1a47;
  margin-bottom: 14px;
}

.service-card p {
  font-size: 15px;
  color: #5a4a72;
  line-height: 1.6;
}

.services-premium {
  padding: 120px 0;
  text-align: center;

  /* BASE MORADO */
  background:
    /* Textura sutil tipo tapizado */
    repeating-radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,0.035) 0,
      rgba(255,255,255,0.035) 1px,
      transparent 2px,
      transparent 6px
    ),

    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.02) 0,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 6px
    ),

    /* Degradado principal */
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 45%,
      #ffffff 100%
    );

  position: relative;
  overflow: hidden;
}



/* SECCIÓN Why Choose */
.why-choose {
  padding: 120px 20px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.025) 0,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 7px
    ),
    /* Degradado principal */
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 45%,
      #ffffff 100%
    );
  color: #58053b;
}

/* HEADER */
.why-header {
  max-width: 800px;
  margin: 0 auto 70px;
  text-align: center;
}

.why-header h2 {
  font-size: 48px;
  color: #f5c542;
  margin-bottom: 15px;
}

.why-header p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}

/* LISTA */
.why-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 26px;
}

/* TARJETA */
.why-card {
  display: flex;
  gap: 22px;
  padding: 26px 30px;
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.05)
    );

  backdrop-filter: blur(6px);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ICONO */
.why-icon {
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: bold;
  color: #4c1878;

  background:
    radial-gradient(
      circle at top left,
      #ffe08a,
      #f5c542
    );



    
  box-shadow:
    0 8px 20px rgba(0,0,0,0.35),
    inset 0 1px 2px rgba(255,255,255,0.4);
}

/* TEXTO */
.why-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.why-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(121, 7, 107, 0.9);
}



/* =====================================
OUR WORK – PURPLE SECTION
===================================== */

.gallery{
  padding:110px 0;
  background: linear-gradient(
    135deg,
    #ffffff,
    #ffffff
  );
  position:relative;
  overflow:hidden;
}

.slider{  
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:30px;
  position:relative;
  overflow:hidden;
}

.slides{
  display:flex;
  transition:transform .5s ease;
}

.slides img{
  width:100%;
  height:420px;
  object-fit:contain; /* 🔥 IMAGEN COMPLETA */
  flex-shrink:0;
  background: transparent; /* ✅ fondo transparente */
  padding:10px;
}


.slide-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#2b0f6b;
  color:#fff;
  border:none;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
}

.prev{ left:10px; }
.next{ right:10px; }
/* =====================================
SECTION TITLES
===================================== */

.section-title{
  text-align:center;
  font-size:38px;
  font-weight:700;
  margin-bottom:60px;
  color:#fed801;
}


/* =====================================
WHY – VERTICAL INTERACTIVE LIST
===================================== */

.why{
  padding:120px 0;
  background:linear-gradient(135deg, #ce2cc8, #e469ef, #81028d);
}

.why-list{
  max-width:820px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.why-item{
  background:#5f0746;
  border-radius:18px;
  padding:28px 30px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.35s ease;
  overflow:hidden;
}

.why-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.why-head{
  display:flex;
  align-items:center;
  gap:16px;
}

.why-head span{
  font-size:24px;
}

.why-item h3{
  font-size:20px;
  font-weight:600;
}

/* accordion content */
.why-item p{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease;
  opacity:0;
  margin-top:10px;
  color:#6b6b6b;
}

.why-item.active p{
  max-height:200px;
  opacity:1;
}



/* =========================
   AREAS SECTION
========================= */
.premium-areas {
  padding: 110px 20px;
  background:
    radial-gradient(circle at top center, #ffffff 100%, #6f2dbd, #4c1878 65%, #78036b 100%);
  color: #63053a;
  text-align: center;
}

/* HEADER */
.areas-header {
  max-width: 780px;
  margin: 0 auto 50px;
}

.areas-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 30px;
  background: rgba(255,255,255,0.15);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.areas-header h2 {
  font-size: 44px;
  color: #f5c542;
  margin-bottom: 16px;
}

.areas-intro {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* GRID */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto 50px;
}

/* AREA CARD */
.area {
  padding: 18px 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: default;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);

  transition: all 0.35s ease;
}

.area:hover {
  transform: translateY(-6px);
  background: rgba(245,197,66,0.18);
  color: #f5c542;
}




.footer {
  background: rgb(147 49 133 / 95%);
  color: #ffffff;
  padding: 50px 20px 20px;
  font-size: 14px;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  justify-items: center;
}

.footer h3,
.footer h4,
.footer p,
.footer li,
.footer small {
  color: #ffffff;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer li {
  margin-bottom: 8px;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-hours small {
  margin-top: 8px;
  opacity: 0.8;
}

.footer-bottom {
  margin-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
  font-size: 13px;
  opacity: 0.8;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .areas-header h2 {
    font-size: 34px;
  }

  .areas-intro,
  .areas-footer {
    font-size: 15px;
  }
}








/* RESPONSIVE */
@media (max-width: 768px) {
  .areas-header h2 {
    font-size: 34px;
  }

  .areas-intro,
  .areas-footer {
    font-size: 15px;
  }
}




/* =====================================
SCROLL REVEAL ANIMATION
===================================== */

.reveal.show{
  opacity:1;
  transform:translateY(0);
}



/* ===============================
SCROLL REVEAL ANIMATION
=============================== */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay suave para contenido interno */
.reveal-delay {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.1s ease;
  transition-delay: 0.2s;
}

.reveal-delay.active {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================
TESTIMONIALS INTERACTIVE PRO
=============================== */

.testimonials{
  padding:120px 0;
  background:#79026d;
  color:#fff;
  text-align:center;
}

.testimonial-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  position:relative;
}

.testimonial-slider{
  overflow:hidden;
  width:900px;
  max-width:95%;
}

.testimonial-track{
  display:flex;
  transition:transform .6s cubic-bezier(.2,.65,.2,1);
  gap:25px;
}


/* cards */
.t-card{
  flex: 0 0 100%;
  max-width: 680px;           /* límite elegante en desktop */
  margin: 0 auto;             /* centrado real */
  background:#fff;
  color:#333;
  padding:35px 30px;
  border-radius:20px;
  opacity:.4;
  transform:scale(.92);
  transition:.4s ease;
  cursor:pointer;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  word-break: break-word;
}
.t-card p{
  font-size:16px;
  line-height:1.7;
  max-width: 560px;
  margin: 0 auto;
}
.t-card h4{
  margin-top:15px;
  font-weight:600;
  color:#3a146b;
}


.t-card.active{
  opacity:1;
  transform:scale(1.05);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.stars{
  color:#ffcc00;
  margin-bottom:12px;
}

/* arrows */
.nav-btn{
  background:#ffffff;
  border:none;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  font-size:30px;
  font-weight:bold;
}

/* dots */
.dots{
  margin-top:25px;
}

.dots span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#bbb;
  margin:0 6px;
  cursor:pointer;
}

.dots span.active{
  background:#ffcc00;
}


.testimonial-wrapper{
  max-width:1000px;
  margin:auto;
}



/* mobile */
@media(max-width:768px){

  .testimonial-wrapper{
    gap:10px;
  }

  .testimonial-slider{
    width:100%;
    padding:0 10px;
  }

  .t-card{
    flex: 0 0 100%;
    max-width: 100%;
    padding:25px 20px;
    transform:scale(1);
    opacity:1;
  }

  .t-card p{
    font-size:15px;
    line-height:1.6;
  }

  .nav-btn{
    width:38px;
    height:38px;
    font-size:22px;
  }

}


.testimonial-track{
  display:flex;
  transition:transform .6s cubic-bezier(.2,.65,.2,1);
  gap:30px;
  width:100%;
}


.nav-btn{
  position:relative;
  z-index:10;
  pointer-events:auto;
}

/* FORM */
.btn { padding:12px 22px; border:none; cursor:pointer; }
.btn.primary { background:#f7c600; color:#000; }
.buttons { display:flex; gap:15px; margin-top:20px; }

@keyframes fade {
  from { opacity:0; transform:translateY(15px); }
  to { opacity:1; transform:none; }
}


/* ===============================
MULTISTEP FORM – FINAL REAL
=============================== */

.quote-section {
  background: linear-gradient(135deg, #fff6ff, #f3e1f3, #ffffff);
  padding:80px 20px;
}

#quoteForm {
  max-width:900px;  
  margin:auto;
}

.form-progress {
  height: 6px;
  background: #ddd;
  border-radius: 10px;
  margin-bottom: 40px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #8e0969;
  transition: width .4s ease;
}


/* FORM GROUPS */
.form-group {
  margin-bottom:15px;
}

.form-step h3 {
  color:  #f7e922;
  margin-bottom:20px;
}

/* NAV */
.form-navigation {
  display:flex;
  gap:15px;
  margin-top:25px;
}

.form-navigation .btn {
  flex:1;
}

/* ERRORS */
input.error,
select.error,
textarea.error {
  border:2px solid #e53935;
}

/* SHAKE */
.form-step.shake {
  animation:shake .35s;
}

@keyframes shake {
  0%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-6px)}
  100%{transform:translateX(0)}
}


/* ===== MULTISTEP UX ===== */

@keyframes fadeStep {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Inputs táctiles */
.quote-section input,
.quote-section select,
.quote-section textarea {
  font-size: 16px;
  padding: 14px;
  border-radius: 8px;
}

/* Error */
.error {
  border: 2px solid #e53935 !important;
}

/* Review */
.review-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
}

.review-box ul {
  list-style: none;
  padding: 0;
}

.review-box li {
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}

/* Mobile App Feel */
@media (max-width: 768px) {
  .buttons {
    display: flex;
    gap: 10px;
  }

  .buttons button {
    flex: 1;
    font-size: 16px;
  }
}


/* ===========================
STEP 5 – SUMMARY UX
=========================== */

.summary-box{
  background:#fff;
  border-radius:18px;
  padding:25px;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
  font-size:15px;
}

.summary-item{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid #eee;
}

.summary-item:last-child{
  border-bottom:none;
}

.summary-label{
  font-weight:600;
  color:#2b0f6b;
}

.summary-value{
  color:#444;
  text-align:right;
  max-width:60%;
}

/* Mobile */
@media(max-width:768px){
  .summary-item{
    flex-direction:column;
    gap:5px;
  }

  .summary-value{
    text-align:left;
    max-width:100%;
  }
}
.summary-section {
  background: #dd1212; 
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.summary-section h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.edit-btn {
  background: none;
  border: none;
  color: #6a1b9a;
  font-weight: 600;
  cursor: pointer;
}

.edit-btn:hover {
  text-decoration: underline;
}





/* ===============================
HEADER – PREMIUM ANIMATION
=============================== */

.header {
    position: sticky;
    top: 0;
    z-index: 999;
    transform: translateY(-20px);
    opacity: 0;
    transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    opacity .6s ease,
    background .4s ease,
    box-shadow .4s ease,
    padding .4s ease;
}

/* Entrada al cargar */
.header.header-loaded {
  transform: translateY(0);
  opacity: 1;
}

/* Estado scroll */
.header.scrolled {
  background:rgb(147 49 133 / 95%);
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Contenido interno */
.header-flex {
  transition: padding .4s ease;
}

.header.scrolled .header-flex {
  padding: 10px 0;
}

/* LOGO ANIMATION */
.brand {
  transition: all .4s cubic-bezier(.2,.8,.2,1);
}

.brand img {
  height: 50px;
  transition: height .4s cubic-bezier(.2,.8,.2,1);
}

.brand-main,
.brand-sub {
  transition:
    font-size .4s cubic-bezier(.2,.8,.2,1),
    letter-spacing .4s ease,
    opacity .3s ease;
}

/* Logo compacto al scroll */
.brand.scrolled img {
  height: 42px;
}

.brand.scrolled .brand-main {
  font-size: 22px;
  letter-spacing: 1.5px;
}

.brand.scrolled .brand-sub {
  font-size: 11px;
  opacity: .85;
}

/* NAV LINKS */
.nav a {
  position: relative;
  transition: color .3s ease;
}

/* underline animado */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: #f7c600;
  transition: width .3s ease;
}

.nav a:hover::after {
  width: 100%;
}

/* CTA pulse suave */
.btn-cta {
  transition: transform .3s ease, box-shadow .3s ease;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.3);
}


/* ===============================
LOGO ANIMATION – PREMIUM
=============================== */

/* Giro elegante */
@keyframes logoSpin {
  0%   { transform: rotateY(0deg); }
  20%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

.brand img {
  animation: logoSpin 5s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* ===============================
TEXT COLOR ANIMATION
=============================== */

@keyframes textPulse {
  0%   { color: #ffffff; }
  33%  { color: #8b2c82; } /* morado corporativo */
  66%  { color: #ffffff; }
  100% { color: #ffffff; }
}

.brand-main,
.brand-sub {
  animation: textPulse 2s ease-in-out infinite;
}
.brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  padding: 8px 0;
}

/* Líneas elegantes */
.brand-text::before,
.brand-text::after {
  content: "";
  width: 120px;
  height: 2px;
  background: linear-gradient(to right, transparent, #f5c400, transparent);
  opacity: 0.9;
}

.brand-main {
  font-size: 2.8rem; /* +4 niveles aprox */
  font-weight: 800;
  letter-spacing: 3px;
  position: relative;
}

.brand-sub {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 4px;
}


 /* Animación de BARRIDO – COLUMBIA*/

@keyframes sweepColumbia {
  0% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
  100% {
    background-position: 0%;
  }
}

.brand-main {
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: 4px;

  background: linear-gradient(
    120deg,
    #8f4bb8 0%,
    #ffffff 25%,
    #8f4bb8 50%,   /* morado MÁS CLARO */
    #f9ff3f 75%,
    #8f4bb8 100%
  );

  background-size: 400% 400%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: sweepColumbia 2.6s ease-in-out infinite;
}



 /* Animación de BARRIDO – MOVING (amarillo → morado → blanco)*/

@keyframes sweepMoving {
  0% {
    background-position: 100%;
  }
  50% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

.brand-sub {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 5px;

  background: linear-gradient(
    120deg,
    #f7c600 0%,
    #f7c600 20%,
    #8f4bb8 50%,   /* morado equilibrado */
    #ffffff 80%,
    #ffffff 100%
  );

  background-size: 400% 400%;
  background-position: 100% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: sweepMoving 2.6s ease-in-out infinite;
}


/* AJUSTE RESPONSIVE (IMPORTANTE) */
@media (max-width: 768px) {
  .brand-main {
    font-size: 2.2rem;
  }

  .brand-sub {
    font-size: 1.4rem;
  }

  .brand-text::before,
  .brand-text::after {
    width: 90px;
  }
}


.nav a{
  
  transition: transform .15s ease, color .3s ease;
  position: relative;
  padding: 8px 4px;
  transition: color .3s ease;
}

.nav a.active{
  transform: scale(.94);
  color: #ffe609;
  font-weight: 600;
}

.nav a.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #ffe609;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  overflow-y: auto;
}



/* CTA QUOTE */
.nav-quote{
  background: #FFC72C;
  color: #1b1b1b;
  padding: 12px 26px;
  border-radius: 999px; /* OVALADO */
  font-weight: 700;
  margin-left: 12px;
  transition: all .3s ease;
  line-height: 1;
}

/* Hover elegante */
.nav-quote:hover{
  background: #a2038a;
  transform: translateY(-1px);
}

/* Activo */
.nav-quote.active{
  background: #a2038a;
  color: #fff;
}




/* CTA Whasap */
.nav-Whasap{
  background: #31ac0c;
  color: #1b1b1b;
  padding: 12px 26px;
  border-radius: 999px; /* OVALADO */
  font-weight: 700;
  margin-left: 12px;
  transition: all .3s ease;
  line-height: 1;
}

/* Hover elegante */
.nav-quote:hover{
  background: #a2038a;
  transform: translateY(-1px);
}

/* Activo */
.nav-quote.active{
  background: #a2038a;
  color: #fff;
}




/* ===============================
HERO TEXT – BORDE NEGRO REAL
=============================== */

.hero-title,
.hero-subtitle {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  3px 6px rgba(0,0,0,.55);
}
/* ===============================
HERO TEXT – HOVER PREMIUM
=============================== */

.hero-title span,
.hero-subtitle {
  display: inline-block;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    text-shadow .35s ease,
    filter .35s ease;
}

.hero-title span:hover,
.hero-subtitle:hover {
  transform: translateY(-4px) scale(1.03);
  filter: brightness(1.15);
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px  8px 18px rgba(0,0,0,.8);
}


/* ===============================
HERO TEXT – VIDA SUTIL
=============================== */

@keyframes heroPulse {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.hero-title,
.hero-subtitle {
  animation: heroPulse 6s ease-in-out infinite;
}

.hero-title .hero-white {
  color: #ffffff !important;
}

.hero-title .hero-gold {
  color: #f7c600 !important;
}

.hero-subtitle {
  color: #ffffff;
}


/* ===============================
SECTION TITLES – HOVER SCALE
=============================== */

/* Base común para títulos */
.section-title,
.about-header h2,
.services h3,
.why-item h3,
.testimonials h2,
.gallery h2 {
  display: inline-block;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    text-shadow .35s ease,
    filter .35s ease;
  cursor: default;
}

/* Hover elegante */
.section-title:hover,
.about-header h2:hover,
.services h3:hover,
.why-item h3:hover,
.testimonials h2:hover,
.gallery h2:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px  10px 20px rgba(0,0,0,.6);
}


/* ===============================
SECTION TITLES – SOFT FLOAT
=============================== */

@keyframes titleFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.section-title,
.about-header h2,
.testimonials h2 {
  animation: titleFloat 6s ease-in-out infinite;
}
.hero-title span:hover {
  transform: scale(1.08) translateY(-6px);
}
/* ===============================
CENTER ALL TITLES
=============================== */

/* =====================================
REAL FORCE CENTER TITLES – FINAL
===================================== */

/* TODOS los h2 de sección */
section h2,
.section-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* ABOUT */
.about-header h2{
  display:block;
  width:100%;
  text-align:center;
}

/* WHY – corrige flex interno */
.why-head{
  justify-content: center;
}

.why-head h3{
  text-align: center;
  width: 100%;
}

/* TESTIMONIALS */
.testimonials h2{
  text-align:center;
  width:100%;
}

/* SERVICES */
.services h2{
  text-align:center;
  width:100%;
}

/* GALLERY */
.gallery h2{
  text-align:center;
  width:100%;
}

/* AREAS */
.areas h2{
  text-align:center;
  width:100%;
}



/* =========================
   GALLERY PREMIUM
========================= */
.premium-gallery {
  position: relative;
  padding: 120px 20px;
  overflow: hidden;
  background:
  linear-gradient(135deg, #ffffff, #ffffff);
}

/* TITLE */
.premium-gallery .section-title {
  color: #f5c542;
  text-align: center;
  margin-bottom: 50px;
}

/* =========================
   DECORATIVE ELEMENTS
========================= */
.gallery-decor {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* FLOATING CIRCLES */
.decor-circle {
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.45;
  animation: floatSlow 16s ease-in-out infinite alternate;
}

.decor-circle.c1 {
  width: 220px;
  height: 220px;
  background: #d6bed54a;
  top: 15%;
  left: 8%;
}

.decor-circle.c2 {
  width: 300px;
  height: 300px;
  background: #dfafd5a5;
  bottom: 10%;
  right: 6%;
  animation-duration: 20s;
}

/* DOTTED STARS */
.decor-star {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px dashed rgba(147, 12, 93, 0.4);
  animation: rotateSlow 22s linear infinite;
}



.decor-star.s2 {
  bottom: 22%;
  left: 15%;
  width: 65px;
  height: 65px;
  animation-duration: 18s;
}

.decor-star.s3 {
  top: 55%;
  right: 10%;
  width: 50px;
  height: 50px;
  animation-duration: 26s;
}

/* CONTENEDOR */
.floating-circles {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;       /* 1/4 de pantalla */
  height: 50vw;
  max-width: 520px;
  max-height: 520px;
  pointer-events: none;
  z-index: 0;
}

/* CÍRCULOS BASE */
.floating-circles .circle {
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  border-color: rgba(128, 41, 112, 0.35);
  animation-timing-function: linear;
}

/* TAMAÑOS */
.floating-circles .big {
  width: 100%;
  height: 100%;
  border-width: 2px;
  animation: rotateSlow 45s linear infinite;
}

.floating-circles .medium {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-width: 1.5px;
  opacity: 0.6;
  animation: rotateReverse 35s linear infinite;
}

.floating-circles .small {
  width: 40%;
  height: 40%;
  top: 30%;
  left: 30%;
  border-width: 1px;
  opacity: 0.4;
  animation: rotateSlow 25s linear infinite;
}

/* ANIMACIONES */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rotateReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

section {
  padding: 60px 16px;
}


/* =========================
   SLIDER ELEVATION
========================= */
.slider {
  position: relative;
  z-index: 2;
}

/* IMAGES */
.slides img {
  border-radius: 24px;
  box-shadow:
    0 20px 50px rgba(216, 207, 207, 0.45);
  transition: transform 0.4s ease;
}

.slides img:hover {
  transform: scale(1.04);
}

/* NAV BUTTONS */
.lightbox-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 28px;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.lightbox-btn:hover {
  background: #f5c542;
  color: #2a0b45;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes floatSlow {
  0% {
    transform: translateY(0) translateX(0);
  }
  100% {
    transform: translateY(-35px) translateX(20px);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .decor-circle,
  .decor-star {
    opacity: 0.25;
  }
}




/* =====================================
WHATSAPP FLOAT — SOLO MOVIL
===================================== */

@media (max-width:768px){

  .whatsapp-float{
    position:fixed !important;

    bottom:20px !important;
    right:20px !important;

    width:58px !important;
    height:58px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#25D366;
    border-radius:50%;

    box-shadow:0 6px 18px rgba(0,0,0,.35);

    z-index:99999 !important;

    padding:12px;
  }

  .whatsapp-float img{
    width:100% !important;
    height:100% !important;
    object-fit:contain;
  }

}




/* =====================================
WHATSAPP FLOAT GLOBAL (desktop + móvil)
===================================== */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
width: 55px;
height: 55px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
z-index: 1000;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@media (max-width: 480px) {
  .whatsapp-float {
    bottom: 16px;
    right: 12px;
  }
}



.whatsapp-float:hover{
  transform:scale(1.08);
}

.whatsapp-float img{
  width:65%;
  height:65%;
  object-fit:contain;
}


/* ===== móvil un poco más pequeño ===== */
@media (max-width:768px){
  .whatsapp-float{
    width:55px;
    height:55px;
    bottom:20px;
    right:20px;
  }
}
/* HEADER LAYOUT */
.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* BOTÓN WHATSAPP */
.whatsapp-header{
  display:flex;
  align-items:center;
  justify-content:center;

  width:42px;
  height:42px;

  background:#25D366;
  color:#fff;

  border-radius:50%;
  font-size:20px;

  text-decoration:none;
  transition:all .25s ease;
}

/* HOVER elegante */
.whatsapp-header:hover{
  transform:scale(1.08);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* RESPONSIVE */
@media(max-width:768px){
  .whatsapp-header{
    width:36px;
    height:36px;
    font-size:18px;
  }
}
/* layout header */
.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* botón */
.whatsapp-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  height:100%;
  padding:6px 0;
  flex-shrink:0;

  transition:transform .2s ease;
}

/* imagen */
.whatsapp-btn img{
  height:32px;        /* escritorio */
  width:auto;
  object-fit:contain;
  display:block;
}

/* hover elegante */
.whatsapp-btn:hover{
  transform:scale(1.08);
}

/* móvil */
@media (max-width:768px){
  .whatsapp-btn img{
    height:26px;
  }
}


/* ===== Traductor ===== */
.translate-box{
  margin-left:15px;
  display:flex;
  align-items:center;
}

.goog-te-gadget{
  font-size:13px !important;
}

.goog-te-combo{
  padding:6px 10px;
  border-radius:8px;
  border:none;
  background:#3c1478;
  color:#fff;
  cursor:pointer;
}


/* ===============================
MOBILE MENU DEFINITIVO
=============================== */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

/* MENÚ DESKTOP */
.mobile-menu {
  display: flex;
  gap: 30px;
}

/* MOBILE */
@media (max-width: 768px) {

  .menu-toggle {
    display: block;
    z-index: 1001;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 260px;
    background: #3a146b;
    flex-direction: column;
    padding-top: 100px;
    gap: 25px;
    align-items: center;
    transition: right 0.3s ease;
    z-index: 1000;
  }

  .mobile-menu.active {
    right: 0;
  }

  .mobile-menu a {
    font-size: 18px;
    color: #fff;
  }

}
    

.header{
    width:100%;
    background:white;
    position:sticky;
    top:0;
    z-index:1000;
}

.nav-container{
    max-width:1200px;
    margin:auto;
    padding:10px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header{
    background:white;
    box-shadow:0 2px 12px rgb(216, 83, 183);
}
.logo img{
    height:55px;
}
.hamburger{
    width:30px;
    height:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.hamburger span{
    height:3px;
    width:100%;
    background:#333333;
    border-radius:3px;
    transition:0.3s;
}
.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}
.nav-menu{
    position:fixed;
    top:0;
    right:-300px;
    width:300px;
    height:100%;
    background:rgb(255, 228, 249);
    box-shadow:-5px 0 15px rgba(121, 4, 4, 0.274);
    transition:0.4s;
    padding-top:80px;
}

.nav-menu ul{
    list-style:none;
    padding:0;
}

.nav-menu li{
    border-bottom:1px solid #eee;
}

.nav-menu a{
    display:block;
    padding:15px 25px;
    text-decoration:none;
    color:#8b0a81;
    font-size:16px;
    transition:0.3s;
}

.nav-menu a:hover{
    background:#ec70c7c9;
}
.nav-menu.active{
    right:0;
}
.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transition:0.3s;
}

.overlay.active{
    opacity:1;
    visibility:visible;
}

@media(min-width:768px){

    .hamburger{
        display:none;
    }

    .nav-container{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .nav-menu{
        position:static;
        width:100%;
        height:auto;
        box-shadow:none;
        padding:0;
        display:flex;
        justify-content:center;
    }

    .nav-menu ul{
        display:flex;
        gap:35px;
        justify-content:center;
        align-items:center;
    }

    .nav-menu li{
        border:none;
    }

    .nav-menu a{
        font-size:16px;
        font-weight:500;
        padding:10px 5px;
        position:relative;
        transition:0.3s;
    }

}

.nav-menu a::after{
    content:"";
    position:absolute;
    width:0;
    height:2px;
    background:#ff9800;
    left:0;
    bottom:-5px;
    transition:0.3s;
}

.nav-menu a:hover::after{
    width:100%;
}