/* ═══════════════════════════════════════════
   BERTIS — Cosmetología & Spa
   Clinical Fresh Design System
   ═══════════════════════════════════════════ */

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

/* ── Variables ── */
:root{
  /* Brand Blues */
  --blue:#4A90B8;
  --blue-dark:#2B6A8E;
  --blue-deeper:#1A3F5C;
  --blue-light:#B5D8E8;
  --blue-pale:#E8F4FA;

  /* Teal / Turquoise (products) */
  --teal:#3BBFAD;
  --teal-dark:#2A9E8E;
  --teal-light:#D4F1EC;

  /* Green (leaf accent) */
  --green:#5EAA46;
  --green-light:#E2F5DC;

  /* Neutrals */
  --dark:#1A2F3D;
  --text:#2D3E4A;
  --text-light:#5A7184;
  --gray:#8B9DAA;
  --gray-light:#C8D5DD;
  --border:#E2EBF0;
  --bg:#F4F9FC;
  --bg-alt:#EDF5F9;
  --white:#FFFFFF;

  /* Pinks (accent from social) */
  --pink:#E88FC4;
  --pink-light:#FDF0F7;

  /* Typography */
  --font-heading:'Montserrat', sans-serif;
  --font-body:'DM Sans', sans-serif;

  /* Layout */
  --nav-h:76px;
  --section-py:clamp(80px, 10vw, 130px);
  --container:1200px;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:20px;

  /* Motion */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:0.4s var(--ease-out);
}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--dark)}
ul{list-style:none}

/* ── Container ── */
.container{width:min(92%, var(--container));margin:0 auto}

/* ── Section Commons ── */
.section-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin-bottom:1rem;
}
.section-label::before{
  content:'';width:28px;height:2px;background:var(--teal);border-radius:2px;
}
.section-title{font-size:clamp(1.8rem, 4.5vw, 3rem);margin-bottom:.75rem}
.section-subtitle{
  font-size:clamp(.95rem, 1.5vw, 1.08rem);color:var(--text-light);
  max-width:620px;margin:0 auto 3rem;line-height:1.75;font-weight:400;
}
.text-center{text-align:center}

/* ── Reveal ── */
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.9rem 2.2rem;font-size:.82rem;font-weight:600;font-family:var(--font-heading);
  letter-spacing:.06em;border-radius:50px;transition:all var(--transition);
  position:relative;overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff;box-shadow:0 4px 20px rgba(59,191,173,.25);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(59,191,173,.35);
}
.btn-outline-light{
  border:1.5px solid rgba(255,255,255,.4);color:#fff;
  backdrop-filter:blur(4px);
}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{border:1.5px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}
.btn-sm{padding:.65rem 1.5rem;font-size:.75rem}

.btn-whatsapp{
  display:inline-flex;align-items:center;gap:8px;
  padding:.9rem 2.2rem;background:#25D366;color:#fff;
  font-size:.85rem;font-weight:600;border-radius:50px;
  font-family:var(--font-heading);
  box-shadow:0 4px 20px rgba(37,211,102,.25);transition:all var(--transition);
}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,211,102,.4)}
.btn-whatsapp svg{width:20px;height:20px;fill:#fff}


/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(180deg, #fff 0%, #eef7fb 100%);
  transition:all .5s var(--ease-out);
}
.nav.scrolled{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 2px 24px rgba(26,47,61,.08);
}
.nav .container{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:1.1rem clamp(1.2rem, 3vw, 2rem);
  transition:padding .5s var(--ease-out);
}
.nav.scrolled .container{padding:.45rem clamp(1.2rem, 3vw, 2rem)}
.nav-wave{
  position:absolute;bottom:-58px;left:0;right:0;
  width:100%;height:60px;display:block;pointer-events:none;
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.nav.scrolled .nav-wave{opacity:0;transform:translateY(-12px)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:70px;width:auto;animation:logo-spin 3s ease-in-out infinite;transition:height .5s var(--ease-out)}
.nav.scrolled .nav-logo img{height:42px}
@keyframes logo-spin{
  0%,75%,100%{transform:rotateY(0deg)}
  37%{transform:rotateY(360deg)}
}
.nav-links{display:flex;align-items:center;gap:clamp(1.2rem, 2.5vw, 2.2rem)}
.nav-links a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-heading);font-size:.85rem;font-weight:600;
  letter-spacing:.02em;color:var(--text);
  transition:color .3s;position:relative;padding:.3rem 0;
}
.nav-links a svg{
  width:16px;height:16px;stroke:var(--teal);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover svg{transform:scale(1.15)}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2.5px;
  background:linear-gradient(90deg, var(--teal), var(--blue-light));
  border-radius:2px;transition:width .4s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a:hover{color:var(--teal)}
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:.7rem 1.8rem;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  color:#fff;font-family:var(--font-heading);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;
  border-radius:50px;transition:all var(--transition);
}
.nav-cta svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(59,191,173,.3)}

/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;width:26px;cursor:pointer;z-index:1001;padding:4px 0}
.nav-hamburger i{display:block;height:2px;background:var(--dark);border-radius:2px;transition:all .4s var(--ease-out)}
.nav-hamburger.active i:nth-child(1){transform:rotate(45deg) translate(4px,5px)}
.nav-hamburger.active i:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.active i:nth-child(3){transform:rotate(-45deg) translate(4px,-5px)}

.mobile-menu{
  position:fixed;inset:0;
  background:linear-gradient(160deg,var(--dark) 0%,var(--blue-deeper) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  z-index:999;opacity:0;pointer-events:none;transition:opacity .5s var(--ease-out);
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{
  font-family:var(--font-heading);font-size:1.6rem;font-weight:700;
  color:#fff;opacity:0;transform:translateY(20px);transition:all .4s var(--ease-out);
}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}
.mobile-menu.open a:nth-child(2){transition-delay:.13s}
.mobile-menu.open a:nth-child(3){transition-delay:.18s}
.mobile-menu.open a:nth-child(4){transition-delay:.23s}
.mobile-menu.open a:nth-child(5){transition-delay:.28s}
.mobile-menu.open a:nth-child(6){transition-delay:.33s}

@media(max-width:920px){
  .nav-links,.nav-cta-wrap{display:none}
  .nav-hamburger{display:flex}
}


/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--dark);
  margin-top:100px;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;
  background-size:cover;background-position:center;
}
.hero-slide.active{opacity:1}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg, rgba(26,47,61,.8) 0%, rgba(43,106,142,.55) 50%, rgba(26,47,61,.8) 100%);
}
.hero-content{position:relative;z-index:2;text-align:center;max-width:820px;padding:0 1.5rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:.5rem 1.2rem;border-radius:50px;
  background:rgba(59,191,173,.15);backdrop-filter:blur(8px);
  border:1px solid rgba(59,191,173,.25);
  font-family:var(--font-heading);font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-light);
  margin-bottom:1.5rem;
}
.hero-badge svg{width:14px;height:14px;fill:var(--teal-light)}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.2rem);color:#fff;
  font-weight:800;margin-bottom:1.2rem;letter-spacing:-.01em;
}
.hero h1 span{
  color:#fff;-webkit-text-fill-color:#fff;
}
.hero-text{
  font-size:clamp(.95rem, 1.3vw, 1.08rem);color:rgba(255,255,255,.95);
  max-width:540px;margin:0 auto 2.5rem;line-height:1.8;font-weight:400;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.hero-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.hero-dots{
  position:absolute;bottom:110px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:3;
}
.hero-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:all .4s;
}
.hero-dot.active{background:var(--teal);transform:scale(1.2);box-shadow:0 0 12px rgba(59,191,173,.5)}

.hero-brands{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:1.2rem 0;
  background:rgba(255,255,255,.06);backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(1.5rem, 4vw, 3.5rem);flex-wrap:wrap;
}
.hero-brands span{
  font-family:var(--font-heading);font-size:clamp(.7rem, 1vw, .85rem);
  color:rgba(255,255,255,.4);letter-spacing:.12em;font-weight:600;text-transform:uppercase;
}


/* ═══════════════════════════════════════════
   NOSOTROS
   ═══════════════════════════════════════════ */
.nosotros{padding:var(--section-py) 0;background:var(--white)}
.nosotros-intro{
  font-size:clamp(1.1rem, 2.2vw, 1.4rem);color:var(--blue-dark);
  max-width:700px;margin:0 auto 3.5rem;line-height:1.7;font-weight:400;text-align:center;
}
.nosotros-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem}
.nosotros-card{
  background:var(--white);border-radius:var(--radius);
  border:1px solid var(--border);overflow:hidden;
  transition:all .5s var(--ease-out);
}
.nosotros-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(74,144,184,.12);
  border-color:var(--blue-light);
}
.nosotros-card-img{position:relative;height:230px;overflow:hidden}
.nosotros-card-img img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transition:opacity 1s ease;
}
.nosotros-card-img img.active{opacity:1}

/* Slide Arrows */
.slide-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  opacity:0;transition:all .3s var(--ease-out);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.slide-arrow svg{width:16px;height:16px;stroke:var(--dark);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.slide-prev{left:8px}
.slide-next{right:8px}
.nosotros-card-img:hover .slide-arrow{opacity:1}
.slide-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nosotros-card-body{padding:1.8rem}
.nosotros-card-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--teal-light), var(--blue-pale));
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.nosotros-card-icon svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nosotros-card h3{font-size:1.25rem;margin-bottom:.6rem}
.nosotros-card p{font-size:.88rem;color:var(--text-light);line-height:1.7}
@media(max-width:900px){.nosotros-grid{grid-template-columns:1fr;max-width:500px;margin-left:auto;margin-right:auto}}

/* Nosotros — Detalle */
.nosotros-detalle{
  display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;
  align-items:center;margin-top:4rem;
}
.nosotros-detalle-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.08)}
.nosotros-detalle-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:380px}
.nosotros-detalle-content h3{
  font-size:1.2rem;color:var(--blue-dark);margin-bottom:.6rem;margin-top:1.8rem;
}
.nosotros-detalle-content h3:first-child{margin-top:0}
.nosotros-detalle-content p{font-size:.92rem;color:var(--text-light);line-height:1.75}
.nosotros-detalle-content strong{color:var(--text);font-weight:600}
.nosotros-lista{margin-top:.6rem;display:flex;flex-direction:column;gap:.7rem}
.nosotros-lista li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.9rem;color:var(--text-light);line-height:1.65;
}
.nosotros-lista li svg{
  width:18px;height:18px;flex-shrink:0;margin-top:2px;
  stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:768px){
  .nosotros-detalle{grid-template-columns:1fr;gap:2rem}
  .nosotros-detalle-img img{min-height:260px}
}

/* Visión + Misión */
.nosotros-vm{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;
}
.vm-card{
  padding:2.2rem;border-radius:var(--radius-lg);text-align:center;
  border:1px solid transparent;transition:all .5s var(--ease-out);
}
.vm-card--vision{background:#EDF8F0;border-color:#C4E6CE}
.vm-card--mision{background:#EDF2FA;border-color:#C4D6E8}
.vm-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.vm-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto 1rem;
  display:flex;align-items:center;justify-content:center;
}
.vm-card--vision .vm-icon{background:#D4EDDA}
.vm-card--mision .vm-icon{background:#D0DEF0}
.vm-icon svg{width:24px;height:24px;stroke:var(--teal-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vm-card h4{font-size:1.15rem;margin-bottom:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.vm-card--vision h4{color:#2D7A3F}
.vm-card--mision h4{color:#2B6A8E}
.vm-card p{font-size:.88rem;color:var(--text-light);line-height:1.75}
@media(max-width:600px){.nosotros-vm{grid-template-columns:1fr}}

/* Diferencial */
.nosotros-diferencial{
  margin-top:2.5rem;padding:2.2rem 2.5rem;
  background:linear-gradient(135deg, var(--teal-light), var(--blue-pale));
  border-radius:var(--radius-lg);border-left:4px solid var(--teal);
  display:flex;align-items:flex-start;gap:1.2rem;
}
.diferencial-icon{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:rgba(59,191,173,.15);
  display:flex;align-items:center;justify-content:center;
}
.diferencial-icon svg{width:22px;height:22px;stroke:var(--teal-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nosotros-diferencial h4{font-size:1.05rem;color:var(--blue-dark);margin-bottom:.4rem}
.nosotros-diferencial p{font-size:.9rem;color:var(--text-light);line-height:1.7}


/* ═══════════════════════════════════════════
   SERVICIOS
   ═══════════════════════════════════════════ */
.servicios{padding:var(--section-py) 0;background:var(--bg)}

/* Steps */
.steps{
  display:flex;align-items:flex-start;justify-content:center;
  gap:0;margin-bottom:4rem;position:relative;flex-wrap:wrap;
}
.step{flex:0 1 240px;text-align:center;padding:0 1.5rem;position:relative}
.step-icon{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;position:relative;z-index:1;
  box-shadow:0 8px 24px rgba(59,191,173,.2);
}
.step-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step-num{font-family:var(--font-heading);font-size:.7rem;color:var(--teal);margin-bottom:.5rem;letter-spacing:.1em;font-weight:700}
.step h4{font-size:.95rem;margin-bottom:.4rem}
.step p{font-size:.8rem;color:var(--text-light);line-height:1.6}
.step:not(:last-child)::after{
  content:'';position:absolute;top:34px;left:calc(50% + 42px);
  width:calc(100% - 84px);height:2px;
  background:linear-gradient(90deg, var(--teal), var(--blue-light));
  opacity:.3;border-radius:2px;
}
@media(max-width:700px){
  .step:not(:last-child)::after{display:none}
  .steps{flex-direction:column;align-items:center;gap:2rem}
}

/* Tabs */
.tabs{display:flex;gap:.5rem;justify-content:center;margin-bottom:2.5rem;flex-wrap:wrap}
.tab-btn{
  padding:.7rem 2rem;font-family:var(--font-heading);
  font-size:.78rem;font-weight:600;letter-spacing:.05em;
  color:var(--text-light);background:var(--white);
  border:1.5px solid var(--border);border-radius:50px;
  transition:all var(--transition);
}
.tab-btn.active{
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(59,191,173,.2);
}
.tab-btn:hover:not(.active){border-color:var(--teal);color:var(--teal)}

.tab-panels{position:relative}
.tab-panel{display:none;animation:fadeTab .5s var(--ease-out)}
.tab-panel.active{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem}
@keyframes fadeTab{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.service-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:all .5s var(--ease-out);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(74,144,184,.1);
  border-color:var(--blue-light);
}
.service-card-img{position:relative;overflow:hidden}
.service-card img{width:100%;height:200px;object-fit:cover;transition:transform .6s var(--ease-out)}
.service-card:hover img{transform:scale(1.05)}
.service-card-body{padding:1.4rem}
.service-card h4{font-size:1rem;margin-bottom:.4rem}
.service-card p{font-size:.83rem;color:var(--text-light);line-height:1.65}
@media(max-width:768px){.tab-panel.active{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

/* Protocolos */
.protocolos{margin-top:4rem;text-align:center}
.protocolos-text{font-size:.95rem;color:var(--text-light);max-width:700px;margin:0 auto 2.5rem;line-height:1.8}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}
.video-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;aspect-ratio:16/9;background:var(--dark);
}
.video-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.video-card:hover img{transform:scale(1.05)}
.video-card .play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(59,191,173,.35);
  transition:all .4s var(--ease-out);
}
.video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.1)}
.video-card .play-btn svg{width:20px;height:20px;fill:#fff;margin-left:3px}
@media(max-width:600px){.video-grid{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════
   CASOS DE ÉXITO
   ═══════════════════════════════════════════ */
.casos{padding:var(--section-py) 0;background:var(--white)}
.casos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2.5rem}
.caso-card{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--radius);cursor:pointer;
}
.caso-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.caso-card:hover img{transform:scale(1.08)}
.caso-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(26,63,92,.92) 0%, transparent 55%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;
  opacity:0;transition:opacity .5s var(--ease-out);
}
.caso-card:hover .caso-overlay{opacity:1}
.caso-overlay h4{font-size:1rem;color:#fff;margin-bottom:.3rem}
.caso-overlay p{font-size:.78rem;color:rgba(255,255,255,.7)}
.caso-badge{
  position:absolute;top:1rem;left:1rem;padding:.35rem .8rem;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff;font-family:var(--font-heading);font-size:.6rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:50px;z-index:1;
}
@media(max-width:768px){.casos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.casos-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}}


/* ═══════════════════════════════════════════
   COMERCIALIZADORA
   ═══════════════════════════════════════════ */
.comercializadora{padding:var(--section-py) 0;background:var(--bg-alt)}
.marcas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:3rem}
.marca-card{
  background:var(--white);padding:2rem 1.2rem;text-align:center;
  border-radius:var(--radius);border:1px solid var(--border);
  transition:all .5s var(--ease-out);
}
.marca-card:hover{
  transform:translateY(-6px);border-color:var(--teal);
  box-shadow:0 12px 30px rgba(59,191,173,.1);
}
.marca-card-icon{
  width:52px;height:52px;border-radius:50%;margin:0 auto .8rem;
  background:linear-gradient(135deg, var(--teal-light), var(--blue-pale));
  display:flex;align-items:center;justify-content:center;
}
.marca-card-icon svg{width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.marca-card-logo{
  width:min(210px, 100%);height:auto;aspect-ratio:2/1;border-radius:var(--radius-sm);margin:0 auto 1rem;
  overflow:hidden;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .4s;
}
.marca-card:hover .marca-card-logo{border-color:var(--teal)}
.marca-card-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.marca-card h4{font-size:.95rem;margin-bottom:.2rem}
.marca-card p{font-size:.78rem;color:var(--text-light)}
@media(max-width:768px){.marcas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.marcas-grid{grid-template-columns:1fr}}

.como-comprar{
  background:var(--white);padding:2.5rem;border-radius:var(--radius-lg);
  border:1px solid var(--border);max-width:700px;margin:0 auto 3.5rem;text-align:center;
}
.como-comprar h4{font-size:1.3rem;margin-bottom:.8rem}
.como-comprar p{font-size:.92rem;color:var(--text-light);margin-bottom:1.5rem;line-height:1.7}
.dist-badges{display:flex;gap:.6rem;justify-content:center;margin-top:1.2rem;flex-wrap:wrap}
.dist-badge{
  padding:.4rem 1rem;border-radius:50px;
  border:1px solid var(--teal-light);background:var(--teal-light);
  font-family:var(--font-heading);font-size:.6rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark);
}

/* Clientes Carousel */
.clientes-section{margin-top:2.5rem;padding:3rem 0}
.clientes-section h4{font-family:var(--font-heading);font-size:1.3rem;margin-bottom:2.5rem;text-align:center}
.clientes-carousel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.clientes-track{
  display:flex;gap:2.5rem;width:max-content;
  animation:clientes-scroll 30s linear infinite;
}
.clientes-track:hover{animation-play-state:paused}
@keyframes clientes-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.cliente-item{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  flex-shrink:0;width:120px;
}
.cliente-avatar{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:1.1rem;font-weight:800;
  color:#fff;letter-spacing:.04em;
  box-shadow:0 6px 20px rgba(0,0,0,.1);
  transition:transform .4s var(--ease-out), box-shadow .4s;
}
.cliente-item:hover .cliente-avatar{
  transform:scale(1.15) rotate(-5deg);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.cliente-item span{
  font-family:var(--font-heading);font-size:.75rem;font-weight:600;
  color:var(--text-light);text-align:center;line-height:1.3;
}


/* ═══════════════════════════════════════════
   INSTITUTO
   ═══════════════════════════════════════════ */
.instituto{padding:var(--section-py) 0;background:var(--white)}
.instituto-logo{height:237px;width:auto;margin:0 auto 1.5rem;display:block}
.instituto-title{color:#6d947e !important;font-size:clamp(1.4rem, 3.5vw, 2.2rem) !important;line-height:1.3 !important}

/* Accordion */
.programas{max-width:800px;margin:0 auto 4rem;text-align:left}
.programa{
  border:1.5px solid transparent;border-radius:var(--radius);
  margin-bottom:.75rem;overflow:hidden;transition:all .4s var(--ease-out);
  background:var(--white);
}
.programa.active{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}

/* ─ Pastel Variants ─ */
.programa--mint{background:#EEFBF6;border-color:#B8E8D4}
.programa--mint.active{border-color:#5EAA46;box-shadow:0 8px 24px rgba(94,170,70,.12)}
.programa--lavender{background:#F3EEFA;border-color:#D4C4ED}
.programa--lavender.active{border-color:#9B7AC7;box-shadow:0 8px 24px rgba(155,122,199,.12)}
.programa--peach{background:#FFF3ED;border-color:#F0CEBD}
.programa--peach.active{border-color:#D98B6A;box-shadow:0 8px 24px rgba(217,139,106,.12)}
.programa--sky{background:#EDF6FD;border-color:#B6D8F2}
.programa--sky.active{border-color:#4A90B8;box-shadow:0 8px 24px rgba(74,144,184,.12)}

.programa-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 1.5rem;cursor:pointer;transition:all .3s;
}
.programa--mint .programa-header:hover{background:#DFF7EC}
.programa--lavender .programa-header:hover{background:#E9DDF5}
.programa--peach .programa-header:hover{background:#FFE9DC}
.programa--sky .programa-header:hover{background:#DDEEF9}
.programa-header h4{font-size:1.05rem;font-weight:600}
.programa--mint .programa-header h4{color:#2D7A3F}
.programa--lavender .programa-header h4{color:#6B4D8E}
.programa--peach .programa-header h4{color:#9E5C3A}
.programa--sky .programa-header h4{color:#2B6A8E}
.programa-header .toggle{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:all .4s var(--ease-out);flex-shrink:0;
}
.programa--mint .toggle{background:#D0F0E0}
.programa--lavender .toggle{background:#DFD0F0}
.programa--peach .toggle{background:#FDDCC8}
.programa--sky .toggle{background:#C8E2F5}
.programa--mint.active .programa-header .toggle{background:#5EAA46;transform:rotate(45deg)}
.programa--lavender.active .programa-header .toggle{background:#9B7AC7;transform:rotate(45deg)}
.programa--peach.active .programa-header .toggle{background:#D98B6A;transform:rotate(45deg)}
.programa--sky.active .programa-header .toggle{background:#4A90B8;transform:rotate(45deg)}
.programa-header .toggle svg{width:14px;height:14px;stroke:var(--text-light);stroke-width:2;stroke-linecap:round}
.programa.active .programa-header .toggle svg{stroke:#fff}
.programa-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.programa.active .programa-body{max-height:400px}
.programa-content{padding:0 1.5rem 1.5rem}
.programa-content p{font-size:.9rem;color:var(--text-light);line-height:1.7;margin-bottom:1rem}
.programa-metas{display:flex;flex-wrap:wrap;gap:.6rem}
.programa-meta{
  display:flex;align-items:center;gap:6px;
  padding:.35rem .8rem;border-radius:50px;
  font-family:var(--font-heading);font-size:.7rem;font-weight:600;
}
.programa--mint .programa-meta{background:#D0F0E0;color:#2D7A3F}
.programa--mint .programa-meta svg{width:14px;height:14px;stroke:#5EAA46;fill:none;stroke-width:2;stroke-linecap:round}
.programa--lavender .programa-meta{background:#DFD0F0;color:#6B4D8E}
.programa--lavender .programa-meta svg{width:14px;height:14px;stroke:#9B7AC7;fill:none;stroke-width:2;stroke-linecap:round}
.programa--peach .programa-meta{background:#FDDCC8;color:#9E5C3A}
.programa--peach .programa-meta svg{width:14px;height:14px;stroke:#D98B6A;fill:none;stroke-width:2;stroke-linecap:round}
.programa--sky .programa-meta{background:#C8E2F5;color:#2B6A8E}
.programa--sky .programa-meta svg{width:14px;height:14px;stroke:#4A90B8;fill:none;stroke-width:2;stroke-linecap:round}

/* Enseñamos */
.ensenamos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;max-width:800px;margin:0 auto 4rem;text-align:left}
.ensenamos-item{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.5rem;background:var(--bg);border-radius:var(--radius);
  transition:all .4s;border:1px solid transparent;
}
.ensenamos-item:hover{background:var(--blue-pale);border-color:var(--blue-light)}
.ensenamos-icon{
  width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0;
  background:linear-gradient(135deg, var(--teal-light), var(--blue-pale));
  display:flex;align-items:center;justify-content:center;
}
.ensenamos-icon svg{width:20px;height:20px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ensenamos-item p{font-size:.88rem;color:var(--text);line-height:1.6;font-weight:500}
@media(max-width:600px){.ensenamos-grid{grid-template-columns:1fr}}

/* Quote */
.dirigido{
  max-width:700px;margin:0 auto 4rem;position:relative;
  padding:2.5rem 3rem;text-align:left;
  background:linear-gradient(135deg, var(--teal-light), var(--blue-pale));
  border-radius:var(--radius-lg);border-left:4px solid var(--teal);
}
.dirigido::before{
  content:'\201C';font-family:var(--font-heading);font-size:6rem;
  color:var(--teal);opacity:.3;position:absolute;top:-.5rem;left:1.5rem;line-height:1;font-weight:700;
}
.dirigido p{font-size:clamp(1rem, 1.8vw, 1.15rem);color:var(--blue-deeper);line-height:1.7;font-weight:500}

/* Experiencias */
.experiencias{margin-top:3rem}
.experiencias .video-card{max-width:700px;margin:0 auto 2.5rem}
.instituto-banner{
  margin-top:2.5rem;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.instituto-banner img{width:100%;height:auto;display:block}
.galeria-exp{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:900px;margin:0 auto}
.galeria-exp-item{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
}
.galeria-exp-item img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transition:opacity 1s ease;
}
.galeria-exp-item img.active{opacity:1}
.galeria-exp-item .frase{
  position:absolute;bottom:0;left:0;right:0;padding:1.5rem;
  background:linear-gradient(0deg, rgba(26,47,61,.85), transparent);z-index:1;
}
.galeria-exp-item .frase p{
  font-family:var(--font-heading);font-size:.85rem;color:#fff;font-style:italic;font-weight:500;
}
@media(max-width:600px){.galeria-exp{grid-template-columns:1fr;max-width:400px;margin:0 auto}}


/* ═══════════════════════════════════════════
   CERTIFICACIONES
   ═══════════════════════════════════════════ */
.certificaciones{padding:var(--section-py) 0;background:var(--bg)}
.cert-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  gap:1rem;max-width:1000px;margin:0 auto;
}
.cert-card{
  background:var(--white);padding:1.8rem 1.2rem;text-align:center;
  border-radius:var(--radius);border:1px solid var(--border);
  cursor:pointer;transition:all .5s var(--ease-out);
}
.cert-card:hover{
  transform:translateY(-4px);border-color:var(--teal);
  box-shadow:0 10px 28px rgba(59,191,173,.1);
}
.cert-card-icon{
  width:48px;height:48px;border-radius:50%;margin:0 auto .8rem;
  background:linear-gradient(135deg, var(--green-light), var(--teal-light));
  display:flex;align-items:center;justify-content:center;
}
.cert-card-icon svg{width:22px;height:22px;stroke:var(--teal-dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cert-card h4{font-size:.82rem;font-weight:700;line-height:1.4;margin-bottom:.2rem}
.cert-card p{font-size:.7rem;color:var(--text-light)}

/* Cert Modal */
.cert-modal-overlay{
  position:fixed;inset:0;
  background:rgba(26,47,61,.75);backdrop-filter:blur(16px);
  z-index:2000;opacity:0;pointer-events:none;transition:opacity .4s;
  display:flex;align-items:center;justify-content:center;
}
.cert-modal-overlay.open{opacity:1;pointer-events:all}
.cert-modal{
  background:var(--white);max-width:480px;width:90%;padding:3rem;
  text-align:center;border-radius:var(--radius-lg);
  transform:scale(.9) translateY(20px);transition:all .5s var(--ease-out);
}
.cert-modal-overlay.open .cert-modal{transform:scale(1) translateY(0)}
.cert-modal-icon{
  width:72px;height:72px;border-radius:50%;margin:0 auto 1.2rem;
  background:linear-gradient(135deg, var(--teal-light), var(--green-light));
  display:flex;align-items:center;justify-content:center;
}
.cert-modal-icon svg{width:32px;height:32px;stroke:var(--teal-dark);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cert-modal h3{font-size:1.4rem;margin-bottom:.6rem}
.cert-modal p{font-size:.92rem;color:var(--text-light);line-height:1.7;margin-bottom:1.5rem}
.cert-modal-close{
  width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;transition:all .3s;
}
.cert-modal-close:hover{border-color:var(--teal);transform:rotate(90deg);background:var(--teal-light)}
.cert-modal-close svg{width:16px;height:16px;stroke:var(--text);stroke-width:2;stroke-linecap:round}


/* ═══════════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════════ */
.contacto{
  padding:var(--section-py) 0;
  background:linear-gradient(160deg, var(--dark) 0%, var(--blue-deeper) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.contacto::before{
  content:'';position:absolute;top:-50%;right:-20%;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(59,191,173,.08), transparent 70%);
  pointer-events:none;
}
.contacto::after{
  content:'';position:absolute;bottom:-30%;left:-10%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(74,144,184,.06), transparent 70%);
  pointer-events:none;
}
.contacto .container{position:relative;z-index:1}
.contacto-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:start}
.contacto .section-title{color:#fff}
.contacto .section-subtitle{color:rgba(255,255,255,.55);margin-bottom:2.5rem;text-align:left}

/* Form */
.form-group{margin-bottom:1.5rem;position:relative}
.form-group input,.form-group select,.form-group textarea{
  width:100%;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);
  padding:.9rem 1rem;color:#fff;font-size:.9rem;font-family:var(--font-body);
  transition:all .3s;outline:none;
}
.form-group select option{color:var(--text);background:#fff}
.form-group textarea{resize:vertical;min-height:100px}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.3)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--teal);background:rgba(59,191,173,.06);
}
.form-group label{
  position:absolute;top:.9rem;left:1rem;font-size:.85rem;
  color:rgba(255,255,255,.35);pointer-events:none;
  transition:all .3s var(--ease-out);
}
.form-group input:focus ~ label,.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,.form-group textarea:not(:placeholder-shown) ~ label{
  top:-.65rem;left:.6rem;font-size:.65rem;
  padding:0 .4rem;
  color:var(--teal);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--dark);
}
.form-error{font-size:.7rem;color:#FF6B6B;margin-top:.4rem;display:none}
.form-group.error .form-error{display:block}
.form-group.error input,.form-group.error textarea{border-color:#FF6B6B}
.contacto .btn-whatsapp{width:100%;justify-content:center;margin-top:.5rem;padding:1rem}

/* Contact Info */
.contacto-info{padding-top:.5rem}
.contacto-info h3{font-size:1.4rem;margin-bottom:2rem;font-weight:700;color:#fff}
.contacto-info-item{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem}
.contacto-info-item .info-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(59,191,173,.1);border:1px solid rgba(59,191,173,.15);
  display:flex;align-items:center;justify-content:center;
}
.contacto-info-item .info-icon svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contacto-info-item span,.contacto-info-item a{font-size:.9rem;color:rgba(255,255,255,.65);transition:color .3s}
.contacto-info-item a:hover{color:var(--teal)}

.social-links{display:flex;gap:.8rem;margin-top:2rem}
.social-links a{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;transition:all .3s;
}
.social-links a:hover{border-color:var(--teal);background:rgba(59,191,173,.1)}
.social-links a svg{width:18px;height:18px;fill:rgba(255,255,255,.5)}
.social-links a:hover svg{fill:var(--teal)}
@media(max-width:768px){.contacto-grid{grid-template-columns:1fr;gap:3rem}}


/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer{padding:3rem 0 2rem;background:var(--dark);text-align:center;border-top:1px solid rgba(255,255,255,.05)}
.footer-top{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-logo img{height:70px;filter:brightness(0) invert(1);opacity:.7}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.footer-links a{
  font-family:var(--font-heading);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .3s;
}
.footer-links a:hover{color:var(--teal)}
.footer-copy{font-size:.78rem;color:rgba(255,255,255,.2);margin-bottom:1rem}
.footer-brands{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.footer-brands span{
  font-family:var(--font-heading);font-size:.7rem;font-weight:600;
  color:rgba(255,255,255,.15);letter-spacing:.05em;
}


/* ═══════════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════════ */
.whatsapp-float{
  position:fixed;bottom:2rem;right:2rem;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  z-index:900;box-shadow:0 4px 24px rgba(37,211,102,.35);
  transition:all .3s;
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(37,211,102,.45)}
.whatsapp-float svg{width:28px;height:28px;fill:#fff}


/* ═══════════════════════════════════════════
   MISC / DECORATIVE
   ═══════════════════════════════════════════ */

/* Subtle dot pattern for hero */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px;
}