/* ===== Light Theme: whites + blues + greens + purples ===== */
:root{
  /* Core neutrals (light theme) */
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --surface-2:#F1F5FF;
  --text:#17223B;
  --muted:#5B6B86;

  /* Accents (azul–morado con acento verde) */
  --accent:#6B4DE6;
  --accent-blue:#2563EB;
  --accent-2:#22C55E;

  --ring: color-mix(in oklab, var(--accent) 25%, transparent);
  --shadow: 0 10px 24px rgba(31,42,68,.10);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{font-size:18px;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-size:18px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #e8f0ff 0%, transparent 55%),
    radial-gradient(900px 500px at 100% -10%, #efe9ff 0%, transparent 50%),
    var(--bg);
  line-height:1.7;
}

.container{max-width:1280px;margin:0 auto;padding:0 clamp(24px, 5vw, 64px)}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid #e6ebf5;
}
.nav{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--text)}
.brand-main{font-weight:800;letter-spacing:.5px}
.brand-sub{font-weight:600;opacity:.8}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:1.2rem}
.nav-list{display:flex;gap:18px;list-style:none;margin:0 8px 0 0;padding:0;align-items:center}
.nav-link{color:var(--text);text-decoration:none;opacity:.85}
.nav-link:hover{opacity:1}
.cta-inline{border:1px solid #cad8ff;padding:.35rem .75rem;border-radius:999px}
.hidden-sm{display:inline-flex}

@media (max-width: 900px){
  .nav{min-height:60px}
  .nav-toggle{display:inline-flex}
  .nav-list{
    position:fixed;inset:60px 12px auto 12px;padding:16px;
    flex-direction:column;gap:12px;border-radius:var(--radius);
    background:var(--surface);box-shadow:var(--shadow);display:none
  }
  .nav-list.open{display:flex}
  .hidden-sm{display:none}
}

/* ===== Buttons & links ===== */
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;
  padding:1.05rem 1.25rem;border-radius:14px;border:1px solid transparent;
  font-weight:600;text-decoration:none;cursor:pointer;transition:.2s}
.btn-sm{padding:.5rem .85rem;border-radius:12px;font-size:0.95rem}
.btn-primary{
  background:linear-gradient(135deg, var(--accent-blue), var(--accent));
  color:white;box-shadow:0 10px 20px rgba(37,99,235,.20);
}
.btn-primary:hover{filter:brightness(1.04)}
.btn-outline{border-color:#cfd7ea;color:var(--text);background:transparent}
.btn-outline:hover{border-color:#9fb2da}
.btn-ghost{background:transparent;border:1px dashed #cfd7ea;color:var(--text)}

.contact-form .btn-primary{
  font-size: 0.95rem;
}

.link{color:var(--accent-2);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* ===== Hero ===== */
.hero{padding: clamp(90px, 13vw, 160px) 0 clamp(60px, 8vw, 120px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px, 4vw, 56px);align-items:center}
.hero .lead{opacity:.9;margin:.5rem 0 1.4rem;font-size:clamp(1.06rem, 1.5vw, 1.28rem)}
.hero .accent{color:var(--accent-2)}
.hero-badges{display:flex;flex-wrap:wrap;gap:12px;opacity:.9}
.hero-badges span{
  display:inline-flex;gap:8px;align-items:center;
  background:#eef3ff;padding:.5rem .7rem;border-radius:999px;border:1px solid #d9e3ff
}

.cards-stack{display:grid;gap:14px}
.illus-card{
  background:linear-gradient(180deg, #ffffff, #f6f8ff);
  padding:18px;border-radius:16px;border:1px solid #e6ebf5;box-shadow:var(--shadow)
}
.illus-card i{font-size:1.6rem;color:var(--accent-2)}
.illus-card h3{margin:.4rem 0 .2rem}

.scroll-down{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);opacity:.7;color:var(--text)}

/* ===== Sections ===== */
.section{position:relative;padding:clamp(72px, 9vw, 120px) 0}

.grid{display:grid;gap:clamp(20px, 3vw, 32px)}
.grid.cards{grid-template-columns:repeat(3, 1fr)}
.grid.services{grid-template-columns:repeat(4, 1fr)}
.grid.two{grid-template-columns:repeat(2, 1fr)}
@media (max-width: 900px){
  .grid.cards{grid-template-columns:1fr}
  .grid.services{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
}

.card,.service-card{background:var(--surface);border:1px solid #e6ebf5;padding:clamp(20px,2.2vw,28px);border-radius:20px;box-shadow:var(--shadow)}
.card-icon{font-size:1.6rem;color:var(--accent)}
.service-card i{font-size:1.6rem;color:var(--accent)}

/* ===== Tabs ===== */
.tabs{display:flex;gap:10px;margin:8px 0 12px}
.tab{background:transparent;border:1px solid #cfd7ea;padding:.45rem .9rem;border-radius:999px;color:var(--text);cursor:pointer}
.tab.active{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--ring)}
.tab-panels{border:1px solid #e6ebf5;background:#fbfcff;padding:16px;border-radius:var(--radius)}

/* ===== Testimonials ===== */
.testimonials{grid-template-columns:repeat(3, 1fr)}
.testimonial{background:#ffffff;border:1px solid #e6ebf5;border-radius:20px;padding:clamp(18px,2vw,26px)}

/* ===== Accordion (FAQ) ===== */
.accordion{display:grid;gap:10px}
.acc-item{border:1px solid #d8e3f2;border-radius:12px;background:#f8fbff;padding:.6rem 1rem}
.acc-item summary{cursor:pointer;font-weight:600;list-style:none}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item[open]{box-shadow:0 0 0 3px var(--ring)}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.contact-list{list-style:none;padding:0;margin:10px 0 22px;display:grid;gap:clamp(8px,1.6vw,12px)}
.contact-list a{color:var(--text);text-decoration:none;border-bottom:1px dotted #cfd7ea}
.contact-form{display:grid;gap:clamp(14px,2.2vw,18px)}
.contact-form label{display:grid;gap:8px}
.contact-form input,.contact-form select,.contact-form textarea{
  padding:.75rem .85rem;border-radius:12px;border:1px solid #d5def0;
  background:#ffffff;color:var(--text);outline:none
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{box-shadow:0 0 0 3px var(--ring);border-color:var(--accent-blue)}
.form-status{margin:.2rem 0 0;color:var(--accent-2)}

@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr}
}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #e6ebf5;padding:22px 0;background:#f7f9ff}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-grid .mini-links{display:flex;gap:10px;align-items:center;opacity:.9}
.footer-grid a{color:var(--text);text-decoration:none}

/* ===== Modal ===== */
.modal{border:0;border-radius:16px;padding:0;background:transparent}
.modal::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.modal-card{min-width:min(630px, 92vw);background:var(--surface);border:1px solid #e6ebf5;border-radius:16px;box-shadow:var(--shadow)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #e6ebf5}
.modal-body{font-size:18px;padding:14px 16px;display:grid;gap:12px}
.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:14px 16px;border-top:1px solid #e6ebf5}
.icon-btn{background:transparent;border:0;color:var(--text);cursor:pointer;font-size:1.1rem}

/* ===== Floating WhatsApp ===== */
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;z-index:1200;
  width:56px;height:56px;border-radius:50%;
  display:inline-grid;place-items:center;border:0;color:white;
  background:#25D366;box-shadow:0 10px 20px rgba(0,0,0,.15);cursor:pointer
}
.whatsapp-float:hover{filter:brightness(1.05)}

/* ===== Reveal animations ===== */
.reveal{opacity:0;transform:translateY(12px);transition:.5s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}


/* Brand logo */
.brand-logo{height:32px;width:auto;display:block}
@media (max-width:900px){.brand-logo{height:28px}}

/* Screen-reader only text */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

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


/* ===== Responsive refinements ===== */
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-actions .btn{flex:0 0 auto}

@media (min-width:1280px){
  .grid.cards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .grid.services{grid-template-columns:repeat(4, minmax(0,1fr))}
}

@media (max-width:1200px){
  .grid.cards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .grid.services{grid-template-columns:repeat(3, minmax(0,1fr))}
}

@media (max-width:1024px){
  .hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px, 4vw, 56px);align-items:center}
  .grid.cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid.services{grid-template-columns:repeat(2, minmax(0,1fr))}
  .testimonials{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-grid{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:768px){
  .nav-list{inset:60px 16px auto 16px}
  .hero{padding: clamp(90px, 13vw, 160px) 0 clamp(60px, 8vw, 120px);position:relative}
  .hero-actions .btn{width:100%}
  .testimonials{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:1fr}
  .grid.services{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .modal-card{min-width:min(560px, 96vw)}
}

@media (max-width:576px){
  .brand-logo{height:24px}
  .cta-inline{padding:.4rem .7rem}
  .btn{padding:.8rem 1rem}
  .section-title{font-size:clamp(2rem, 3.5vw, 2.9rem);margin:0 0 12px}
  .nav-list{inset:58px 12px auto 12px}
  .modal-card{min-width:min(480px, 96vw)}
}


/* ===== Section background images ===== */
#inicio.hero{
  padding: clamp(90px, 13vw, 160px) 0 clamp(60px, 8vw, 120px);
  position: relative;
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.70)),
    url('img/T00.svg') center bottom / 100% auto no-repeat;
}

#interes{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.70)),
    url('img/t1.svg') center bottom / 100% auto no-repeat;
}

#servicios{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.70)),
    url('img/t2.svg') center top / 100% auto no-repeat;
}

#nosotros{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    url('img/t3.svg') center top / 100% auto no-repeat;
}

#testimonios{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    url('img/T4.svg') center center / cover no-repeat;
}

#faq{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.70)),
    url('img/t6.svg') center center / cover no-repeat;
}

#contacto{
  background:
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.70)),
    url('img/t7.svg') center center / cover no-repeat;
}

.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.2rem);line-height:1.2;letter-spacing:.2px;margin:0 0 .6rem}


@media (min-width:1360px){
  .container{max-width:1320px}
  .grid.cards{grid-template-columns:repeat(3, minmax(0,1fr))}
  .grid.services{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (min-width:1536px){
  .container{max-width:1440px}
  .hero-grid{grid-template-columns:1.6fr 1fr}
}

 /*===== Section redes sociales ===== */
.social{
  display:flex;
  gap:16px;
  align-items:center;
}

.social a{
  font-size: 2rem;
  color: var(--text);
  text-decoration:none;
}

.social a:hover{
  transform: scale(1.08);
  transition: .2s;
}


.whatsapp-float{
  width:64px;
  height:64px;
}

.whatsapp-float i{
  font-size:2rem;
}


.brand-logo{
  height: 48px;
  width: auto;
  display: block;
}

@media (max-width:900px){
  .brand-logo{
    height: 40px;
  }
}



/* ===== Nosotros / Tabs mejorados ===== */
.about-section{
  position: relative;
}

.about-shell{
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(241,245,255,.92));
  border: 1px solid #e6ebf5;
  border-radius: 28px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.about-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 24px;
}

.about-kicker{
  display: inline-block;
  margin-bottom: 10px;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--accent-blue);
  background: #eef4ff;
  border: 1px solid #d8e6ff;
}

.section-subtitle{
  margin: 0 auto;
  max-width: 720px;
  color: var(--muted);
}

.about-tabs{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.about-tabs .tab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .9rem 1.15rem;
  border-radius: 999px;
  border: 1px solid #d9e3f5;
  background: rgba(255,255,255,.82);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.about-tabs .tab i{
  font-size: 1rem;
  color: var(--accent);
}

.about-tabs .tab:hover{
  transform: translateY(-2px);
  border-color: #bfd2ff;
  box-shadow: 0 8px 18px rgba(37,99,235,.10);
}

.about-tabs .tab.active{
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent));
  box-shadow: 0 12px 24px rgba(37,99,235,.22);
}

.about-tabs .tab.active i{
  color: #fff;
}

.about-panels{
  position: relative;
}

.tab-panel{
  display: none;
  animation: fadePanel .28s ease;
}

.tab-panel.active{
  display: block;
}

.about-panel-card{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  align-items: start;
  background: rgba(255,255,255,.88);
  border: 1px solid #e6ebf5;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 12px 28px rgba(31,42,68,.08);
}

.about-panel-icon{
  width: 90px;
  height: 90px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef4ff, #f3ecff);
  border: 1px solid #dbe6ff;
}

.about-panel-icon i{
  font-size: 2rem;
  color: var(--accent);
}

.about-panel-copy h3{
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.about-panel-copy p{
  margin: 0 0 16px;
  color: var(--muted);
}

.about-points{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.about-points li{
  position: relative;
  padding-left: 28px;
  color: var(--text);
}

.about-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-blue));
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

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

@media (max-width: 768px){
  .about-panel-card{
    grid-template-columns: 1fr;
    text-align: left;
  }

  .about-panel-icon{
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }

  .about-panel-icon i{
    font-size: 1.6rem;
  }

  .about-tabs{
    justify-content: stretch;
  }

  .about-tabs .tab{
    width: 100%;
    justify-content: center;
  }
}

.about-kicker-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.about-logo{
  height: 150px;
  width: auto;
  display: block;
}

.form-status{
  min-height: 1.5em;
  margin-top: .35rem;
  font-weight: 600;
}

.form-status.is-success{
  color: #15803d;
}

.form-status.is-error{
  color: #b91c1c;
}

#contact-submit-btn[disabled]{
  opacity: .75;
  cursor: wait;
}


.form-status{
  min-height: 1.5em;
  margin-top: .35rem;
  font-weight: 600;
}

.form-status.is-success{
  color: #15803d;
}

.form-status.is-error{
  color: #b91c1c;
}