/* =========================================================
   PORTE FINANCIERO — Design tokens (Manual de identidad)
   ========================================================= */
:root{
  --color-primary:#14B0BF;      /* Verde institucional */
  --color-corporate:#203240;    /* Azul oscuro */
  --color-gray-light:#F6F6F6;
  --color-gray-dark:#636363;
  --color-white:#FFFFFF;

  --font-main:'Montserrat', Arial, sans-serif;

  --header-h:76px;
  --pad-inline: clamp(20px, 5vw, 72px);
  --section-pad-block: clamp(56px, 9vw, 120px);

  --ease:cubic-bezier(.4,0,.2,1);
}

/* =========================================================
   RESET — sin márgenes globales, ancho 100% siempre
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body,h1,h2,h3,h4,p,ul,figure,form{ margin:0; }
body{
  width:100%;
  min-width:0;
  overflow-x:hidden;
  font-family:var(--font-main);
  color:var(--color-gray-dark);
  background:var(--color-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--color-primary); color:var(--color-white);
  padding:12px 20px;
}
.skip-link:focus{ left:0; }

/* =========================================================
   LAYOUT PRIMITIVES — full width, no side gutters on the page,
   only breathing room inside each section
   ========================================================= */
.section{
  width:100%;
  padding-block:var(--section-pad-block);
}
.section-inner{
  width:100%;
  padding-inline:var(--pad-inline);
}
.section-white{ background:var(--color-white); }
.section-light{ background:var(--color-gray-light); }
.section-dark{ background:var(--color-corporate); color:var(--color-white); }
.section-accent{ background:var(--color-primary); color:var(--color-white); }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* Typography helpers */
.eyebrow{
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-primary);
}
.eyebrow-wide{
  font-size:clamp(.4rem, 2.3cqw, .78rem);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
}
@supports not (container-type: inline-size){
  .eyebrow-wide{ font-size:clamp(.4rem, 1.9vw, .78rem); }
}
.tag{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--color-primary); margin-bottom:14px;
}
.tag-on-dark{ color:var(--color-primary); }
.section-title{
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight:800; color:var(--color-corporate);
  line-height:1.2; max-width:900px; margin-bottom:22px;
}
.title-on-dark{ color:var(--color-white); }
.lead{
  font-size:clamp(1rem,1.3vw,1.15rem); color:var(--color-gray-dark);
  max-width:760px; margin-bottom:8px;
}
.lead-on-dark{ color:var(--color-white); opacity:.9; }
.text-accent{ color:var(--color-primary); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-block; padding:15px 30px; font-weight:700; font-size:.92rem;
  letter-spacing:.03em; border-radius:2px; border:2px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--color-primary); color:var(--color-white); }
.btn-primary:hover{ background:#119aa7; }
.btn-ghost{ border-color:rgba(255,255,255,.5); color:var(--color-white); }
.btn-ghost:hover{ border-color:var(--color-white); background:rgba(255,255,255,.08); }
.btn-light{ background:var(--color-white); color:var(--color-corporate); }
.btn-light:hover{ background:var(--color-gray-light); }
.btn-outline{ border-color:var(--color-corporate); color:var(--color-corporate); }
.btn-outline:hover{ background:var(--color-corporate); color:var(--color-white); }
.btn-small{ padding:10px 20px; font-size:.82rem; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:900;
  height:var(--header-h);
  background:rgba(32,50,64,.92);
  backdrop-filter:blur(8px);
  transition:background .3s var(--ease);
}
.header-inner{
  height:100%; width:100%;
  padding-inline:var(--pad-inline);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.brand{ display:flex; align-items:baseline; gap:4px; flex-shrink:0; }
.brand-porte{ font-weight:800; color:var(--color-white); font-size:1.05rem; letter-spacing:.03em; }
.brand-financiero{ font-weight:300; color:var(--color-primary); font-size:1.05rem; letter-spacing:.05em; }

.main-nav ul{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav-link{
  font-size:.86rem; font-weight:600; color:var(--color-white);
  opacity:.85; padding:8px 2px; position:relative;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover{ opacity:1; color:var(--color-primary); }
.nav-link.active{ opacity:1; color:var(--color-primary); }
.nav-cta{
  background:var(--color-primary); color:var(--color-white) !important;
  padding:10px 20px; border-radius:2px; opacity:1;
  font-weight:700; letter-spacing:.03em;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.nav-cta:hover{ background:#119aa7; color:var(--color-white); transform:translateY(-2px); }

/* Dropdown "Conocenos" */
.nav-dropdown{ position:relative; }
.nav-dropdown-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; font-family:inherit; cursor:pointer;
}
.nav-caret{ width:14px; height:14px; transition:transform .25s var(--ease); }
.nav-dropdown.open .nav-caret{ transform:rotate(180deg); }

.nav-submenu{
  position:absolute; top:calc(100% + 14px); left:0; z-index:20;
  min-width:260px; background:var(--color-corporate);
  border:1px solid rgba(255,255,255,.1); border-radius:4px;
  padding:8px; box-shadow:0 20px 40px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-dropdown.open .nav-submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-sublink{
  display:block; padding:11px 14px; border-radius:3px;
  font-size:.85rem; font-weight:600; color:rgba(255,255,255,.85);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-sublink:hover{ background:rgba(255,255,255,.06); color:var(--color-primary); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; flex-shrink:0;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--color-white);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    background:var(--color-corporate);
    max-height:0; overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .main-nav.open{ max-height:80vh; overflow-y:auto; }
  .main-nav ul{
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--pad-inline) 20px;
  }
  .main-nav li{ border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-link{ display:block; padding:14px 0; }
  .nav-cta{ display:inline-block; margin-top:12px; text-align:center; }

  .nav-dropdown-btn{ width:100%; justify-content:space-between; padding:14px 0; }
  .nav-submenu{
    position:static; min-width:0; border:none; box-shadow:none; background:none;
    padding:0 0 10px 14px; opacity:1; visibility:visible; transform:none;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav-dropdown.open .nav-submenu{ max-height:220px; }
  .nav-sublink{ color:rgba(255,255,255,.75); padding:10px 0; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 40px);
  color:var(--color-white);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1100px 700px at 85% 10%, rgba(20,176,191,.28), transparent 60%),
    linear-gradient(160deg, #17222c 0%, var(--color-corporate) 55%, #16232d 100%);
}
.hero-inner{
  max-width:1400px;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(20px,4vw,60px);
}
.hero-inner-single{ grid-template-columns:1fr; }
.hero-copy{ max-width:640px; min-width:0; container-type:inline-size; }
.hero-title{
  font-size:clamp(2.2rem, 5.2vw, 4rem);
  font-weight:800; line-height:1.08; letter-spacing:-.01em;
  margin-block:18px 22px;
}
.hero-subtitle{
  font-size:clamp(1rem,1.6vw,1.25rem); color:rgba(255,255,255,.85);
  max-width:640px; margin-bottom:38px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

.hero-visual{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-illustration{
  width:100%; max-width:620px; height:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.35));
  animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}

/* Gráfico "recorrido de 4 pasos" del hero */
.hero-journey{
  width:100%; max-width:520px; height:auto;
  animation:heroFloat 7s ease-in-out infinite;
}
.journey-path{ opacity:.85; }
.journey-arrowhead{ opacity:.9; }
.journey-glow{ fill:var(--color-primary); opacity:.16; }
.journey-ring{
  fill:rgba(9,20,28,.55); stroke:var(--color-primary); stroke-width:2;
  animation:journeyPulse 3.2s ease-in-out infinite;
}
.journey-node{ animation:journeyPulse 3.2s ease-in-out infinite; }
@keyframes journeyPulse{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}
.journey-icon{ color:var(--color-primary); overflow:visible; }
.journey-badge{ fill:var(--color-corporate); stroke:var(--color-primary); stroke-width:1.5; }
.journey-badge-num{
  fill:var(--color-white); font-family:var(--font-main); font-weight:800; font-size:13px;
}
.journey-label{
  fill:var(--color-white); font-family:var(--font-main); font-weight:700; font-size:20px;
}
@media (prefers-reduced-motion:reduce){
  .hero-journey,.journey-ring,.journey-node{ animation:none; }
}

/* Subtle animated financial-chart backdrop */
.hero-chart-bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
}
.chart-line{
  fill:none; stroke:var(--color-primary); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.16;
  stroke-dasharray:14 10;
  animation:chartDrift 22s linear infinite;
}
.chart-line-2{ opacity:.09; stroke-width:2; animation-duration:30s; animation-direction:reverse; }
@keyframes chartDrift{
  to{ stroke-dashoffset:-1000; }
}
.chart-dots circle{ fill:var(--color-primary); opacity:.35; animation:chartPulse 3.4s ease-in-out infinite; }
.chart-dots circle:nth-child(2){ animation-delay:.6s; }
.chart-dots circle:nth-child(3){ animation-delay:1.2s; }
.chart-dots circle:nth-child(4){ animation-delay:1.8s; }
@keyframes chartPulse{
  0%,100%{ opacity:.2; r:4; }
  50%{ opacity:.55; r:6; }
}

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; text-align:left; }
  .hero-visual{ order:-1; margin-bottom:8px; }
  .hero-illustration{ max-width:360px; margin-inline:auto; }
  .hero-journey{ max-width:360px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
  .hero-illustration,.chart-line,.chart-dots circle{ animation:none; }
}

.scroll-cue{
  position:absolute; bottom:28px; left:var(--pad-inline);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.5); border-radius:14px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; translate:-50% 0;
  width:4px; height:8px; border-radius:2px; background:var(--color-primary);
  animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{
  0%{ opacity:1; top:7px; }
  70%{ opacity:0; top:20px; }
  100%{ opacity:0; top:7px; }
}

/* =========================================================
   QUÉ ES / CHECKLIST
   ========================================================= */
.checklist{ margin-top:44px; }
.check-item{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--color-white); padding:24px; border-radius:4px;
  border:1px solid #e9e9e9;
}
.check-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:rgba(20,176,191,.12); display:flex; align-items:center; justify-content:center;
}
.check-icon svg{ width:18px; height:18px; fill:none; stroke:var(--color-primary); stroke-width:2.4; }
.check-item p{ color:var(--color-corporate); font-weight:600; }

/* =========================================================
   NOSOTROS / MISIÓN VISIÓN / VALORES
   ========================================================= */
.mv-grid{ margin-top:48px; }
.mv-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:4px; padding:32px;
}
.mv-card h3{
  color:var(--color-primary); font-size:1.1rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;
}
.mv-card p{ color:rgba(255,255,255,.85); }

.values{ margin-top:56px; }
.values-title{
  font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:var(--color-white); margin-bottom:20px;
}
.values-list{ display:flex; flex-wrap:wrap; gap:12px; }
.values-list li{
  border:1px solid rgba(255,255,255,.28); border-radius:30px;
  padding:9px 20px; font-size:.85rem; font-weight:600; color:var(--color-white);
}

/* =========================================================
   PILARES
   ========================================================= */
.pilares-grid{ margin-top:48px; }
.pilar-card{
  background:var(--color-white); border:1px solid #e9e9e9; border-radius:4px;
  padding:30px 26px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pilar-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(32,50,64,.1); }
.pilar-num{
  display:block; font-size:.85rem; font-weight:800; color:var(--color-primary);
  letter-spacing:.08em; margin-bottom:14px;
}
.pilar-card h3{
  color:var(--color-corporate); font-size:1.15rem; font-weight:800; margin-bottom:10px;
}
.pilar-card p{ font-size:.92rem; }

/* =========================================================
   ECOSISTEMA / SERVICIOS
   ========================================================= */
.services-grid{ margin-top:44px; }
.service-card{
  background:var(--color-gray-light); border-left:3px solid var(--color-primary);
  border-radius:2px; padding:22px 24px;
  transition:background .25s var(--ease);
}
.service-card:hover{ background:#eef7f8; }
.service-card h3{ color:var(--color-corporate); font-size:1rem; font-weight:700; }

/* =========================================================
   TEST CTA
   ========================================================= */
.section-accent{
  background:linear-gradient(120deg, var(--color-primary), #0e8a96);
}
.test-inner{ max-width:820px; text-align:left; }
.test-inner .section-title{ max-width:100%; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-grid{ margin-top:44px; align-items:start; }
.contact-form{ display:flex; flex-direction:column; gap:6px; }
.contact-form label{
  font-size:.8rem; font-weight:700; color:var(--color-corporate);
  text-transform:uppercase; letter-spacing:.05em; margin-top:14px;
}
.contact-form input,.contact-form textarea{
  border:1px solid #d8d8d8; background:var(--color-white); border-radius:2px;
  padding:12px 14px; font-size:.95rem; color:var(--color-corporate);
  resize:vertical; transition:border-color .2s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none; border-color:var(--color-primary);
}
.contact-form button{ margin-top:22px; align-self:flex-start; border:none; }

.contact-info-item{ margin-bottom:30px; }
.contact-info-item h3{
  font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-primary); margin-bottom:8px;
}
.contact-info-item p{ color:var(--color-gray-dark); }
.contact-info-item a{ color:var(--color-corporate); font-weight:600; }
.contact-info-item a:hover{ color:var(--color-primary); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--color-corporate); width:100%; }
.footer-inner{
  padding-block:44px; display:flex; flex-wrap:wrap; gap:30px;
  align-items:center; justify-content:space-between;
}
.footer-brand p{ color:rgba(255,255,255,.6); font-size:.85rem; margin-top:6px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-nav a{ color:rgba(255,255,255,.75); font-size:.85rem; font-weight:600; }
.footer-nav a:hover{ color:var(--color-primary); }
.footer-copy{ width:100%; color:rgba(255,255,255,.4); font-size:.78rem; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); margin-top:10px; }

@media (max-width:640px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   HEADER ACTIONS (carrito + hamburguesa)
   ========================================================= */
.header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cart-toggle{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:none; border:none; color:var(--color-white);
}
.cart-toggle svg{ width:21px; height:21px; }
.cart-count{
  position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 3px;
  border-radius:50%; background:var(--color-primary); color:var(--color-white);
  font-size:.64rem; font-weight:800; line-height:16px; text-align:center;
}

/* =========================================================
   ICONOS EN LÍNEA (uso general)
   ========================================================= */
svg use{ color:inherit; }

/* =========================================================
   COMPARATIVA — Por qué Porte Financiero
   ========================================================= */
.compare-grid{ margin-top:44px; }
.compare-card{
  background:var(--color-white); border-radius:4px; padding:32px;
  border-top:3px solid var(--color-gray-dark);
}
.compare-card h3{
  display:flex; align-items:center; gap:10px;
  font-size:1.05rem; font-weight:800; color:var(--color-corporate);
  margin-bottom:20px;
}
.compare-card h3 .compare-icon{ width:24px; height:24px; flex-shrink:0; color:var(--color-gray-dark); }
.compare-list{ display:flex; flex-direction:column; gap:14px; }
.compare-list li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:.94rem; color:var(--color-gray-dark);
}
.compare-list svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; color:var(--color-gray-dark); }

.compare-good{ border-top-color:var(--color-primary); background:#f2fbfc; }
.compare-good h3 .compare-icon{ color:var(--color-primary); }
.compare-good .compare-list li{ color:var(--color-corporate); font-weight:500; }
.compare-good .compare-list svg{ color:var(--color-primary); }

/* =========================================================
   CÓMO LO HACEMOS — intro + timeline
   ========================================================= */
.como-intro{ align-items:center; margin-bottom:64px; }
.como-visual{ display:flex; justify-content:center; }
.como-visual img{ width:100%; max-width:400px; height:auto; }

.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.timeline-item{ display:flex; flex-direction:column; }
.timeline-marker{ display:flex; align-items:center; width:100%; margin-bottom:20px; }
.timeline-circle{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--color-primary); color:var(--color-white);
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.timeline-circle svg{ width:26px; height:26px; }
.timeline-connector{
  flex:1; height:2px; margin-left:6px;
  background:repeating-linear-gradient(to right, var(--color-primary) 0 8px, transparent 8px 14px);
}
.timeline-item:last-child .timeline-connector{ visibility:hidden; }
.timeline-num{
  display:block; font-size:.8rem; font-weight:800; color:var(--color-primary);
  letter-spacing:.08em; margin-bottom:8px;
}
.timeline-content h3{ color:var(--color-corporate); font-size:1.1rem; font-weight:800; margin-bottom:8px; }
.timeline-content p{ font-size:.92rem; }

@media (max-width:900px){
  .como-intro{ margin-bottom:40px; }
  .timeline{ grid-template-columns:1fr; gap:0; }
  .timeline-item{ flex-direction:row; gap:20px; }
  .timeline-marker{
    flex-direction:column; align-items:center; width:auto; margin-bottom:0;
    align-self:stretch;
  }
  .timeline-connector{
    width:2px; height:auto; flex:1; margin-left:0; margin-top:6px; min-height:36px;
    background:repeating-linear-gradient(to bottom, var(--color-primary) 0 8px, transparent 8px 14px);
  }
  .timeline-content{ padding-bottom:28px; }
}

/* =========================================================
   NOSOTROS — ficha del fundador
   ========================================================= */
.founder-card{
  margin-top:48px; display:grid; grid-template-columns:280px 1fr; gap:40px;
  align-items:start; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:6px; padding:32px;
}
.founder-photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
}
.founder-info h3{ color:var(--color-white); font-size:1.3rem; font-weight:800; }
.founder-role{ color:var(--color-primary); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin:6px 0 16px; }
.founder-info > p{ color:rgba(255,255,255,.85); margin-bottom:22px; }
.founder-highlights{ display:flex; flex-direction:column; gap:14px; }
.founder-highlights li{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:rgba(255,255,255,.9); }
.founder-highlights svg{ width:20px; height:20px; flex-shrink:0; color:var(--color-primary); margin-top:1px; }

@media (max-width:760px){
  .founder-card{ grid-template-columns:1fr; }
  .founder-photo img{ max-width:220px; margin-inline:auto; }
}

/* =========================================================
   PLANES — banner del test + pricing cards
   ========================================================= */
.test-banner{
  margin-top:44px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  background:var(--color-white); border:1px solid #e9e9e9; border-left:4px solid var(--color-primary);
  border-radius:4px; padding:28px 30px;
}
.test-banner-icon{
  flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:rgba(20,176,191,.12); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.test-banner-icon svg{ width:26px; height:26px; }
.test-banner-content{ flex:1; min-width:240px; }
.badge-free{
  display:inline-block; background:var(--color-primary); color:var(--color-white);
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px; margin-bottom:10px;
}
.test-banner-content h3{ color:var(--color-corporate); font-size:1.2rem; font-weight:800; margin-bottom:6px; }
.test-banner-content p{ font-size:.92rem; max-width:560px; }

.pricing-grid{ margin-top:44px; align-items:stretch; }
.pricing-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--color-white); border:1px solid #e9e9e9; border-radius:6px;
  padding:32px 28px;
}
.pricing-featured{ border-color:var(--color-primary); box-shadow:0 20px 40px rgba(20,176,191,.14); }
.pricing-badge{
  position:absolute; top:-13px; left:28px; background:var(--color-primary); color:var(--color-white);
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:5px 14px; border-radius:20px;
}
.pricing-icon{
  width:48px; height:48px; border-radius:10px; background:rgba(32,50,64,.06); color:var(--color-corporate);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pricing-featured .pricing-icon{ background:rgba(20,176,191,.12); color:var(--color-primary); }
.pricing-icon svg{ width:24px; height:24px; }
.pricing-card h3{ color:var(--color-corporate); font-size:1.2rem; font-weight:800; }
.pricing-tagline{ font-size:.86rem; color:var(--color-gray-dark); margin:6px 0 18px; }
.pricing-price{ font-size:2rem; font-weight:800; color:var(--color-corporate); margin-bottom:20px; }
.pricing-price span{ font-size:.85rem; font-weight:600; color:var(--color-gray-dark); }
.pricing-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; flex:1; }
.pricing-features li{ display:flex; align-items:flex-start; gap:10px; font-size:.87rem; color:var(--color-gray-dark); }
.pricing-features svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--color-primary); }
.pricing-card > button{ width:100%; border:2px solid var(--color-corporate); }
.pricing-note{ margin-top:20px; font-size:.78rem; color:var(--color-gray-dark); font-style:italic; }

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.testimonials-grid{ margin-top:44px; }
.testimonial-card{
  background:var(--color-gray-light); border-radius:6px; padding:30px;
  display:flex; flex-direction:column;
}
.testimonial-stars{ display:flex; gap:4px; margin-bottom:16px; color:var(--color-primary); }
.testimonial-stars svg{ width:16px; height:16px; }
.testimonial-text{ flex:1; font-style:italic; color:var(--color-gray-dark); margin-bottom:22px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:var(--color-corporate); color:var(--color-white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem;
}
.testimonial-author strong{ display:block; color:var(--color-corporate); font-size:.9rem; }
.testimonial-author span{ display:block; color:var(--color-gray-dark); font-size:.78rem; margin-top:2px; }

/* =========================================================
   TIENDA EJECUTIVA
   ========================================================= */
.tienda-intro{ align-items:center; margin-bottom:48px; }
.tienda-visual{ display:flex; justify-content:center; }
.tienda-visual img{ width:100%; max-width:360px; height:auto; }

.store-grid{ align-items:stretch; }
.store-card{
  display:flex; flex-direction:column;
  background:var(--color-white); border:1px solid #e9e9e9; border-radius:6px; padding:26px;
}
.store-icon{
  width:44px; height:44px; border-radius:10px; background:rgba(32,50,64,.06); color:var(--color-corporate);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.store-icon svg{ width:22px; height:22px; }
.store-card h3{ color:var(--color-corporate); font-size:1rem; font-weight:800; margin-bottom:6px; }
.store-card p{ font-size:.87rem; color:var(--color-gray-dark); flex:1; margin-bottom:20px; }
.store-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.store-price{ font-weight:800; color:var(--color-corporate); font-size:1.05rem; }

/* =========================================================
   CARRITO — overlay + drawer
   ========================================================= */
.cart-overlay{
  position:fixed; inset:0; background:rgba(15,23,29,.55); z-index:1200;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.cart-overlay.open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:1300;
  width:min(420px, 100%); background:var(--color-white);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s var(--ease);
  box-shadow:-20px 0 50px rgba(0,0,0,.2);
}
.cart-drawer.open{ transform:translateX(0); }

.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid #eee;
}
.cart-header h3{ color:var(--color-corporate); font-size:1.1rem; font-weight:800; }
.cart-close{ background:none; border:none; color:var(--color-corporate); width:32px; height:32px; }
.cart-close svg{ width:20px; height:20px; }

.cart-items{ flex:1; overflow-y:auto; padding:20px 24px; }
.cart-empty{ color:var(--color-gray-dark); font-size:.9rem; text-align:center; margin-top:30px; }

.cart-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 0; border-bottom:1px solid #f0f0f0;
}
.cart-item-name{ color:var(--color-corporate); font-weight:700; font-size:.88rem; margin-bottom:6px; }
.cart-item-price{ color:var(--color-gray-dark); font-size:.82rem; }
.cart-item-qty{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.cart-qty-btn{
  width:24px; height:24px; border-radius:50%; border:1px solid #ddd; background:var(--color-white);
  display:flex; align-items:center; justify-content:center; color:var(--color-corporate);
}
.cart-qty-btn svg{ width:12px; height:12px; }
.cart-item-qty span{ font-size:.85rem; font-weight:700; min-width:18px; text-align:center; }
.cart-item-remove{ background:none; border:none; color:var(--color-gray-dark); flex-shrink:0; width:24px; height:24px; }
.cart-item-remove svg{ width:15px; height:15px; }
.cart-item-total{ color:var(--color-corporate); font-weight:800; font-size:.9rem; white-space:nowrap; }

.cart-footer{ padding:20px 24px 26px; border-top:1px solid #eee; }
.cart-total{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:1rem; }
.cart-total strong{ color:var(--color-corporate); font-size:1.3rem; }
.cart-checkout{ width:100%; text-align:center; border:none; }
.cart-clear{
  width:100%; margin-top:10px; background:none; border:none; color:var(--color-gray-dark);
  font-size:.82rem; text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:480px){
  .cart-drawer{ width:100%; }
}

/* =========================================================
   POR QUÉ NOS ELIGEN
   ========================================================= */
.why-grid{ margin-top:44px; }
.why-item{ display:flex; flex-direction:column; gap:14px; }
.why-icon{
  width:52px; height:52px; border-radius:50%;
  background:rgba(20,176,191,.12); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.why-icon svg{ width:24px; height:24px; }
.why-item h3{ color:var(--color-corporate); font-size:1.05rem; font-weight:800; }
.why-item p{ font-size:.92rem; color:var(--color-gray-dark); }

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:var(--color-primary); color:var(--color-white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(20,176,191,.4);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.whatsapp-float:hover{ background:#119aa7; transform:translateY(-3px) scale(1.05); }
.whatsapp-float svg{ width:28px; height:28px; }
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--color-primary); opacity:.6;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float::before{ animation:none; }
}
@media (max-width:640px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}