/* ===========================
   Tokens — Facturante brand system
   =========================== */
:root{
  /* Gray */
  --gray-0:#FFFFFF;
  --gray-100:#FBFBFB;
  --gray-200:#F1F1F2;
  --gray-300:#EBEBEB;
  --gray-400:#E2E1E4;
  --gray-500:#D2D0D5;
  --gray-600:#C3C0C6;
  --gray-700:#9D98A2; /* decorative/border only — fails AA for text */
  --gray-800:#69676C; /* min. for secondary text on white */
  --gray-900:#353535; /* body text */
  --gray-1000:#12071F; /* headings */

  /* Green — primary brand + success */
  --green-100:#C3F2DD;
  --green-200:#C5E1CF;
  --green-400:#87C19B;
  --green-500:#65B07F;
  --green-700:#28914D;
  --green-800:#126E39; /* primary action */
  --green-900:#005028;

  /* Violet — interactive/form accent only */
  --violet-50:#EEE9F6;
  --violet-80:#E2D9F0;
  --violet-100:#D2C8E1;
  --violet-200:#9A7EC3;
  --violet-400:#774FB1;
  --violet-500:#56229F;
  --violet-700:#3C0091;
  --violet-800:#32086B;
  --violet-900:#280F46;

  /* Yellow — warning only */
  --yellow-100:#FEEEDF;
  --yellow-200:#F9DDC4;
  --yellow-300:#FDD3AC;
  --yellow-500:#FCB879;
  --yellow-800:#DD7F28;
  --yellow-1000:#984F0B;

  /* Red — error/pain only */
  --red-100:#FFE5E5;
  --red-200:#F1CDCD;
  --red-300:#ECA5A5;
  --red-500:#D75D5D;
  --red-800:#BD2828;

  /* Accent — sparing highlight use only */
  --accent-green:#00FF6E;

  /* Type */
  --font-base: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.3rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.6vw, 3.5rem);

  /* Space */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4.5rem;
  --space-9:6.5rem;
  --header-h:76px;

  /* Shape */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-sm: 0 1px 2px rgba(18,7,31,0.06);
  --shadow-md: 0 8px 24px rgba(18,7,31,0.08);
  --shadow-lg: 0 20px 48px rgba(18,7,31,0.12);

  --container: 1180px;
  --focus-ring: 0 0 0 3px var(--gray-0), 0 0 0 5px var(--violet-500);
}

@media (prefers-reduced-motion: no-preference){
  :root{ --transition: 180ms ease; }
}
@media (prefers-reduced-motion: reduce){
  :root{ --transition: 0ms; }
}

/* ===========================
   Reset
   =========================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ height:auto; }
body{
  font-family:var(--font-base);
  color:var(--gray-900);
  background:var(--gray-0);
  line-height:1.55;
  font-size:var(--step-0);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-weight:900; color:var(--gray-1000); text-wrap:balance; line-height:1.12; }
p{ text-wrap:pretty; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--violet-500); outline-offset:2px; border-radius:4px; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gray-1000); color:var(--gray-0);
  padding:var(--space-3) var(--space-4); border-radius:0 0 var(--radius-sm) 0;
  z-index:100;
}
.skip-link:focus{ left:0; }

/* ===========================
   Layout helpers
   =========================== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
.section{ padding-block:var(--space-9); }
.section--tight{ padding-block:var(--space-7); }
.section--tint{ background:var(--gray-200); }
.section-head{ max-width:44rem; margin-bottom:var(--space-7); }
.section-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-1) var(--space-4); border-radius:var(--radius-pill);
  background:var(--green-100); font-size:var(--step--1); font-weight:900; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--green-800); margin-bottom:var(--space-3);
}
.section-head h2{ font-size:var(--step-3); }
.section-head p{ margin-top:var(--space-4); font-size:var(--step-1); color:var(--gray-800); }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ===========================
   Buttons
   =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
  font-weight:700; font-size:var(--step-0); min-height:48px;
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
@media (max-width:599px){
  .btn{ max-width:100%; white-space:normal; text-align:center; }
}
.btn-primary{ background:#126E39; color:var(--gray-0); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--green-900); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--gray-1000); border:1.5px solid var(--gray-400); }
.btn-ghost:hover{ border-color:var(--gray-800); }
.btn-block{ width:100%; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* Halo pulsante sutil para llamar la atención sobre el CTA principal */
@keyframes btn-pulse-glow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0), var(--shadow-sm); }
  50%{ box-shadow:0 0 0 7px rgba(255,255,255,.55), var(--shadow-sm); }
}
.btn--pulse{ animation:btn-pulse-glow 2.6s ease-in-out infinite; }
.btn--pulse:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .btn--pulse{ animation:none; }
}

/* ===========================
   Header / Nav
   =========================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,0.14);
  backdrop-filter:saturate(140%) blur(26px); -webkit-backdrop-filter:saturate(140%) blur(26px);
  transition:background var(--transition);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-3); }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:32px; width:auto; }
.nav__links{ display:none; align-items:center; gap:var(--space-6); }
.nav__links a{
  font-weight:700; font-size:16px; color:var(--gray-1000);
  transition:color var(--transition), text-shadow var(--transition);
}
.nav__links a:hover{ color:var(--green-800); }
.nav__cta{ display:none; }
.nav__toggle{
  display:inline-flex; padding:var(--space-2); border-radius:var(--radius-sm);
  color:var(--gray-1000); transition:color var(--transition);
}
.nav__toggle svg{ width:26px; height:26px; }

/* Header sits over the dark hero image until JS (js/main.js) swaps the logo and removes this class on scroll */
.site-header.is-dark .nav__links a{ color:var(--gray-0); text-shadow:0 1px 3px rgba(0,0,0,.4); }
.site-header.is-dark .nav__links a:hover{ color:var(--green-100); }
.site-header.is-dark .nav__toggle{ color:var(--gray-0); }
.site-header.is-dark .nav__mobile a{ color:var(--gray-0); text-shadow:0 1px 3px rgba(0,0,0,.4); }
@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle{ display:none; }
}
.nav__mobile{
  display:none; flex-direction:column; gap:var(--space-4);
  padding:var(--space-5); border-top:1px solid var(--gray-300);
}
.nav__mobile[data-open="true"]{ display:flex; }
.nav__mobile a{ font-weight:700; font-size:16px; color:var(--gray-1000); }
.nav__mobile .btn-primary{ color:var(--gray-0); }
@media (min-width:900px){ .nav__mobile{ display:none !important; } }

/* ===========================
   Hero — background-image on every breakpoint.
   Mobile/tablet: composition leans bottom (mockup+card), text left-aligned like desktop.
   Desktop (>=960px): directional scrim, text left-aligned, full composition (cards) visible.
   =========================== */
.hero{
  padding-block:calc(var(--header-h) + var(--space-8)) var(--space-9); overflow:visible;
  background-color:rgb(2,68,181);
  background-image:
    linear-gradient(rgba(6,20,46,.5), rgba(6,20,46,.5)),
    url("../assets/heromobile.jpg");
  background-size:100% 100%, 115% auto;
  background-position:0 0, 0% 100%;
  background-repeat:no-repeat, no-repeat;
  min-height:560px; display:flex; align-items:center;
}
.hero > .container{ position:relative; }
.hero__stack{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; max-width:30rem; margin-inline:0; }
.hero h1{ font-size:var(--step-4); color:var(--gray-0); }
.hero__partners{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-6); flex-wrap:nowrap; }
.hero__partner-logo{ width:auto; flex-shrink:0; }
.hero__partner-logo--tn{ height:21px; }
.hero__partner-logo--fact{ height:22px; }
@media (max-width:599px){
  .hero__partner-logo--tn{ height:28px; }
  .hero__partner-logo--fact{ height:21px; }
}
@media (min-width:600px){
  .hero__partners{ gap:var(--space-4); }
  .hero__partner-logo--tn{ height:52px; }
  .hero__partner-logo--fact{ height:35px; }
}
.hero__partner-plus{ font-size:var(--step-1); font-weight:700; color:rgba(255,255,255,.55); line-height:1; }
.hero__lede{ margin-top:var(--space-5); font-size:var(--step-1); color:rgba(255,255,255,.88); max-width:38rem; }
.hero__meta{ margin-top:var(--space-4); font-size:var(--step--1); color:rgba(255,255,255,.75); font-weight:700; }
.hero__actions{ margin-top:var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:flex-start; }
.hero .btn-ghost{ color:var(--gray-0); border-color:rgba(255,255,255,.55); }
.hero .btn-ghost:hover{ border-color:var(--gray-0); }

@media (min-width:600px) and (max-width:959px){
  .hero{
    background-image:
      linear-gradient(rgba(6,20,46,.38), rgba(6,20,46,.38)),
      url("../assets/herotablet.jpg");
    background-size:100% 100%, cover;
    background-position:0 0, center bottom;
    min-height:760px;
  }
}
@media (min-width:960px){
  .hero{
    background-image:
      linear-gradient(100deg, rgba(6,20,46,.72) 0%, rgba(6,20,46,.5) 45%, rgba(6,20,46,.15) 65%, rgba(6,20,46,0) 78%),
      url("../assets/heroazul.jpg");
    background-size:100% 100%, cover;
    background-position:0 0, right center;
    min-height:clamp(640px, 43vw, 820px);
  }
}
@media (min-width:1300px){
  .hero__stack{ max-width:40rem; }
}

/* ===========================
   Trust bar
   =========================== */
.trust{ padding-top:32px; padding-bottom:var(--space-8); border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300); }
.trust__label{ text-align:center; font-size:16px; font-weight:700; letter-spacing:0.04em; color:var(--gray-800); text-transform:uppercase; margin-bottom:var(--space-7); }
.trust__marquee{ overflow:hidden; margin-inline:-16px; padding-inline:16px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.trust__grid{ display:flex; width:max-content; flex-wrap:nowrap; align-items:center; gap:var(--space-8); will-change:transform; }
.trust__grid li{ flex-shrink:0; transition:transform var(--transition); }
.trust__logo{
  height:36px; width:auto; display:block;
  filter:grayscale(1); opacity:.5; mix-blend-mode:multiply;
  transition:filter var(--transition), opacity var(--transition);
}
.trust__logo--cai,
.trust__logo--rr{ height:32px; }
.trust__logo--luce{ height:24px; }
.trust__grid li:hover{ transform:scale(1.12); }
.trust__grid li:hover .trust__logo{ filter:none; opacity:1; }

/* ===========================
   Statement — high-impact bridge line between trust bar and problem section
   =========================== */
.statement{
  background-color:rgb(10,20,60);
  background-image:url("../assets/sectionoscura.jpg");
  background-size:cover;
  background-position:center;
  padding-block:var(--space-9);
}
.statement__text{
  max-width:46rem; margin-inline:auto; text-align:center;
  font-size:clamp(1.5rem, 1.15rem + 2vw, 2.5rem);
  font-weight:700; line-height:1.3; color:var(--gray-0);
  text-wrap:balance;
}
.statement__text strong{ color:var(--yellow-500); font-weight:900; }

/* ===========================
   Problem section
   =========================== */
.problem{
  background-color:rgb(202,181,164);
  background-image:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.85)),
    url("../assets/sectionproblems.jpg");
  background-size:cover;
  background-position:center;
}
.problem__grid{ display:grid; gap:var(--space-7); }
@media (min-width:1117px){
  .problem__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:center; gap:var(--space-8); }
}
.problem__intro{ display:flex; flex-direction:column; }
.problem__intro h2{ font-size:var(--step-3); }
.problem__intro > .eyebrow{ align-self:flex-start; }
.problem__accent{ color:var(--green-700); }
.problem__divider{ width:56px; height:4px; border-radius:var(--radius-pill); background:var(--green-700); margin:var(--space-4) 0 var(--space-5); }
.problem__lede{ font-size:var(--step-1); color:var(--gray-900); line-height:1.6; }
.problem__lede strong{ color:var(--gray-1000); }
.problem__callout{
  margin-top:var(--space-6); padding:var(--space-5); border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--green-100), var(--violet-50));
  border:1px solid var(--green-200);
  display:flex; gap:var(--space-4); align-items:flex-start;
}
.problem__callout-icon{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background:var(--gray-0); border:1.5px solid var(--green-400);
  display:flex; align-items:center; justify-content:center; color:var(--green-700);
}
.problem__callout-icon svg{ width:22px; height:22px; }
@media (max-width:599px){
  .problem__callout-icon{ width:28px; height:28px; }
  .problem__callout-icon svg{ width:13px; height:13px; }
}
.problem__callout p{ margin:0; color:var(--gray-900); font-size:var(--step-0); }
.problem__callout strong{ color:var(--gray-1000); }

/* Before/after comparison card */
.problem-compare{
  position:relative; background:var(--gray-0); border:1px solid var(--gray-300);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-6);
}
@media (min-width:600px){
  .problem-compare{ flex-direction:row; padding:var(--space-7); }
}
.problem-compare__col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:var(--space-5); }
.problem-compare__col--bad{ padding-bottom:var(--space-5); border-bottom:1px solid var(--gray-300); }
@media (min-width:600px){
  .problem-compare__col--bad{ padding-bottom:0; padding-right:var(--space-6); border-bottom:none; border-right:1px solid var(--gray-300); }
  .problem-compare__col--good{ padding-left:var(--space-6); }
}
.problem-compare__badge{
  align-self:flex-start; font-size:var(--step--1); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.problem-compare__badge--bad{ color:var(--gray-800); }
.problem-compare__badge--good{ color:var(--green-800); }
.problem-compare__list{ display:flex; flex-direction:column; gap:var(--space-4); }
.problem-compare__list li{ display:flex; align-items:flex-start; gap:var(--space-4); }
.problem-compare__icon{
  position:relative; flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-0); border:1.5px solid var(--gray-300);
}
.problem-compare__icon svg{ width:20px; height:20px; }
.problem-compare__icon--bad{ color:var(--red-500); border-color:var(--red-200); }
.problem-compare__icon--good{ color:var(--green-700); border-color:var(--green-200); }
.problem-compare__mark{
  position:absolute; bottom:-3px; right:-3px; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--gray-0);
}
.problem-compare__mark svg{ width:10px; height:10px; }
.problem-compare__mark--bad{ background:var(--red-500); color:var(--gray-0); }
.problem-compare__mark--good{ background:var(--green-700); color:var(--gray-0); }
.problem-compare__text strong{ display:block; color:var(--gray-1000); font-size:var(--step-0); }
.problem-compare__text p{ margin:2px 0 0; color:var(--gray-800); font-size:var(--step--1); }
.problem-compare__vs{
  display:none;
}
@media (min-width:600px){
  .problem-compare__vs{
    display:flex; position:absolute; top:50%; left:47%; transform:translate(-50%,-50%);
    width:44px; height:44px; border-radius:50%; background:var(--gray-0); border:1px solid var(--gray-300);
    align-items:center; justify-content:center; font-weight:700; font-size:var(--step--1); color:var(--gray-800);
    box-shadow:var(--shadow-sm);
  }
}
.problem-compare__foot{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4);
  border-radius:var(--radius-sm); font-weight:700; font-size:var(--step--1); margin-top:auto;
}
.problem-compare__foot svg{ width:18px; height:18px; flex-shrink:0; }
.problem-compare__foot--bad{ background:var(--red-100); color:var(--gray-1000); }
.problem-compare__foot--bad svg{ color:var(--red-800); }
.problem-compare__foot--good{ background:var(--green-100); color:var(--gray-1000); }
.problem-compare__foot--good svg{ color:var(--green-800); }

/* ===========================
   Profile cards
   =========================== */
#perfiles{ padding-block:var(--space-6) var(--space-7); }
#perfiles .section-head{ margin-bottom:var(--space-6); }
.profiles__grid{ display:grid; gap:var(--space-4); }
@media (min-width:960px){
  .profiles__grid{
    grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr));
    gap:var(--space-5);
  }
}
.profile-card{
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg); background:var(--gray-0);
  border:1px solid var(--gray-300); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow var(--transition), border-color var(--transition);
}
.profile-card.is-clickable{ cursor:pointer; }
.profile-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--green-400); }

/* Media (photo) — badge + title overlay on top; falls back to a brand-color
   gradient until a real photo is dropped in assets/ with the matching name */
.profile-card__media{
  position:relative; flex-shrink:0; background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--space-4);
  min-height:200px;
}
@media (min-width:960px){
  .profile-card__media{ min-height:115px; padding:var(--space-3); }
}
.profile-card__media--a{
  background-image:linear-gradient(180deg, rgba(0,20,10,.15) 0%, rgba(0,20,10,.75) 100%), url("../assets/localfisico.jpg"), linear-gradient(135deg, var(--green-900), var(--green-700));
}
.profile-card__media--b{
  background-image:linear-gradient(180deg, rgba(0,20,10,.15) 0%, rgba(0,20,10,.75) 100%), url("../assets/localytienda.jpg"), linear-gradient(135deg, var(--green-700), var(--green-400));
}
.profile-card__media--c{
  background-image:linear-gradient(180deg, rgba(0,20,10,.15) 0%, rgba(0,20,10,.75) 100%), url("../assets/tiendaonline.jpg"), linear-gradient(135deg, var(--gray-1000), var(--green-800));
}
/* Badge (persona letter) */
.profile-card__badge{
  position:absolute; top:var(--space-4); left:var(--space-4);
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--radius-sm); font-weight:900; font-size:var(--step-0);
  background:var(--gray-0); color:var(--green-800); box-shadow:var(--shadow-sm); flex-shrink:0;
}
.profile-card__title{ position:relative; color:var(--gray-0); font-size:var(--step-1); margin:var(--space-4) 0 var(--space-2) var(--space-2); }
.profile-card__title::after{
  content:""; display:block; width:32px; height:3px; margin-top:var(--space-2);
  background:var(--green-400); border-radius:var(--radius-pill);
}
@media (min-width:960px){ .profile-card__title{ margin-top:var(--space-3); } }

/* Body */
.profile-card__body{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); flex:1; }
@media (min-width:960px){ .profile-card__body{ gap:var(--space-3); padding:var(--space-5); } }

/* Timeline */
.profile-card__timeline{ display:flex; flex-direction:column; }
.profile-card__timeline li{ display:flex; gap:var(--space-3); padding-bottom:var(--space-2); position:relative; }
.profile-card__timeline li:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:28px; bottom:0; width:1px;
  background:repeating-linear-gradient(180deg, var(--green-400) 0 4px, transparent 4px 8px);
}
.profile-card__step-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; z-index:1;
  background:var(--green-100); color:var(--green-800);
  display:flex; align-items:center; justify-content:center;
}
.profile-card__step-icon svg{ width:14px; height:14px; }
.profile-card__timeline p{ color:var(--gray-900); font-size:var(--step--1); padding-top:2px; line-height:1.35; }
.profile-card__timeline strong{ color:var(--green-800); }
@media (min-width:960px){
  .profile-card__timeline li{ gap:var(--space-3); padding-bottom:var(--space-2); }
  .profile-card__step-icon{ width:26px; height:26px; }
  .profile-card__step-icon svg{ width:13px; height:13px; }
  .profile-card__timeline li:not(:last-child)::before{ left:12px; top:26px; }
}

/* CTA */
.profile-card__cta{
  margin-top:auto; align-self:flex-start; width:auto; white-space:normal; height:auto; text-align:left;
  background:var(--gray-0); color:var(--green-700); border:1.5px solid var(--green-700);
}
.profile-card__cta:hover{ background:var(--green-700); color:var(--gray-0); }
.profile-card__cta svg{ width:18px; height:18px; flex-shrink:0; }
@media (min-width:960px){
  .profile-card__cta{ min-height:40px; padding:var(--space-2) var(--space-4); font-size:var(--step--1); }
}

/* Mosaic placement: A tall on the left, B/C stacked side by side on the right */
@media (min-width:960px){
  .profile-card--tall{ grid-column:1; grid-row:1 / 3; }
  .profile-card--tall .profile-card__media{ flex:1; }
  .profile-card--tall .profile-card__body{ flex:0 0 auto; }
  .profile-card--pair{ grid-column:2 / 4; flex-direction:row; }
  .profile-card--pair-top{ grid-row:1; }
  .profile-card--pair-bottom{ grid-row:2; }
  .profile-card--pair .profile-card__media{ flex:0 0 38%; min-height:0; }
  .profile-card--pair .profile-card__body{ min-width:0; padding:var(--space-4); gap:var(--space-2); }
  .profile-card--pair .profile-card__timeline li{ padding-bottom:var(--space-1); }
  .profile-card--pair .profile-card__cta{ min-height:36px; }
}

/* ===========================
   Now vs Facturante comparison
   =========================== */
.compare{
  padding-block:var(--space-7);
  background-color:rgb(206,193,178);
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    url("../assets/localytienda.jpg");
  background-size:cover;
  background-position:center;
}
.compare .section-head{ margin-bottom:var(--space-4); }
.compare .eyebrow{ background:#EEE9F6; color:#3C0091; }
.compare__grid{ position:relative; display:grid; gap:var(--space-4); }
@media (min-width:800px){ .compare__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; } }
.compare-card{ padding:var(--space-5); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:var(--space-2); }
.compare-card--now{ background:var(--gray-0); border:1.5px solid var(--gray-300); }
.compare-card--after{ background:var(--gray-1000); border:1.5px solid var(--gray-1000); }
.compare-card--after h3{ color:var(--gray-0); font-size:var(--step-2); }
.compare-card--after p{ color:rgba(255,255,255,.8); }
.compare-card__tag{
  display:inline-flex; align-items:center; gap:var(--space-2); align-self:flex-start;
  padding:var(--space-1) var(--space-4); border-radius:var(--radius-pill);
  font-size:var(--step--1); font-weight:700;
}
.compare-card__tag--now{ background:var(--gray-200); color:var(--gray-900); }
.compare-card__tag--after{ background:var(--green-700); color:var(--gray-0); }
.compare__arrow{
  display:none; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%;
  background:var(--gray-0); color:var(--gray-1000); box-shadow:var(--shadow-md);
}
.compare__arrow svg{ width:20px; height:20px; }
@media (min-width:800px){
  .compare__arrow{
    display:flex; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  }
}
/* Checklist */
.compare-checklist{ display:flex; flex-direction:column; gap:var(--space-1); }
.compare-checklist li{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-1) var(--space-3);
  border:1px solid var(--gray-300); border-radius:var(--radius-md); background:var(--gray-100);
}
.compare-checklist__icon{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--gray-0); color:var(--gray-900);
  display:flex; align-items:center; justify-content:center;
}
.compare-checklist__icon svg{ width:13px; height:13px; }
.compare-checklist__label{ flex:1; color:var(--gray-900); font-size:var(--step--1); }
.compare-checklist__time{
  flex-shrink:0; font-size:var(--step--1); font-weight:700; color:var(--gray-800);
  background:var(--gray-0); border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  padding:2px var(--space-2);
}
/* Callout */
.compare-callout{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); margin-top:auto;
  background:var(--red-100); border:1.5px solid var(--red-300); border-radius:var(--radius-md);
}
.compare-callout__icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--gray-0); color:var(--red-800);
  display:flex; align-items:center; justify-content:center;
}
.compare-callout__icon svg{ width:14px; height:14px; }
.compare-callout p{ margin:0; font-weight:700; color:var(--red-800); }
/* Laptop mockup */
.compare-laptop{ margin-top:auto; padding-top:var(--space-2); width:100%; max-width:380px; align-self:center; }
.compare-laptop__frame{
  border-radius:var(--radius-md) var(--radius-md) 4px 4px;
  border:2px solid var(--gray-700); background:var(--gray-1000); padding:var(--space-1);
}
.compare-laptop__base{
  height:7px; margin:0 -10px; background:var(--gray-700); border-radius:0 0 6px 6px;
}
/* Config panel (laptop screen content) */
.compare-panel{
  padding:var(--space-2); border-radius:var(--radius-sm);
  background:var(--gray-0);
}
.compare-panel__header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding-bottom:var(--space-1); border-bottom:1px solid var(--gray-300); margin-bottom:var(--space-1);
}
.compare-panel__brand{
  display:inline-flex; align-items:center; gap:var(--space-1);
}
.compare-panel__brand img{ display:block; height:11px; width:auto; }
.compare-panel__toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  font-size:.72rem; color:var(--gray-900); margin-bottom:var(--space-2);
}
.compare-panel__toggle{
  flex-shrink:0; width:28px; height:16px; border-radius:var(--radius-pill); background:var(--green-700);
  display:inline-flex; align-items:center; padding:2px;
}
.compare-panel__toggle-knob{ width:12px; height:12px; border-radius:50%; background:var(--gray-0); margin-left:auto; }
.compare-panel__section{ margin-bottom:var(--space-2); }
.compare-panel__section:last-child{ margin-bottom:0; }
.compare-panel__label{ margin:0 0 4px; font-size:.7rem; font-weight:700; color:var(--gray-800); }
.compare-panel__invoice{
  display:flex; align-items:center; gap:var(--space-2); padding:3px 0;
  border-bottom:1px solid var(--gray-200); font-size:.7rem; color:var(--gray-900);
}
.compare-panel__invoice:last-child{ border-bottom:none; }
.compare-panel__invoice-id{ flex-shrink:0; color:var(--gray-800); }
.compare-panel__invoice-amount{ flex:1; font-weight:700; }
.compare-panel__badge{
  flex-shrink:0; font-size:.62rem; font-weight:700; color:var(--green-800); background:var(--green-100);
  border-radius:var(--radius-pill); padding:1px var(--space-2);
}
.compare-panel__config-row{
  display:flex; align-items:center; gap:var(--space-3); padding:3px 0; color:var(--gray-600);
}
.compare-panel__dot{ flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--gray-400); }
.compare-panel__bar{ flex:1; height:6px; border-radius:var(--radius-pill); background:var(--gray-200); }
.compare-panel__config-row svg{ flex-shrink:0; width:16px; height:16px; }
.compare__cta{ margin-top:var(--space-4); text-align:left; }
@media (max-width:599px){
  .compare__cta, .features__cta, .faq__cta{ text-align:center; }
}

/* ===========================
   Features
   =========================== */
#funciones{ position:relative; overflow:hidden; }
#funciones::before,
#funciones::after{
  content:""; position:absolute; width:160px; height:160px; pointer-events:none;
  background-image:radial-gradient(#9A7EC3 1.5px, transparent 1.5px);
  background-size:16px 16px; opacity:.5;
}
#funciones::before{ top:0; left:0; }
#funciones::after{ bottom:0; right:0; }
@media (max-width:599px){
  #funciones::before,
  #funciones::after{ width:64px; height:64px; background-size:12px 12px; }
}
.features__grid{ position:relative; display:grid; gap:var(--space-5); }
@media (min-width:800px){ .features__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; } }
.feature-card{
  position:relative; display:flex; flex-direction:column;
  padding:var(--space-7) var(--space-5) var(--space-6); margin-top:var(--space-4);
  border-radius:var(--radius-lg); text-align:center;
  border:1px solid var(--gray-300);
}
.feature-card--green{ background:linear-gradient(165deg, rgba(195,242,221,.55), var(--gray-0) 60%); }
.feature-card--violet{ background:linear-gradient(165deg, rgba(238,233,246,.9), var(--gray-0) 60%); }
.feature-card--yellow{ background:linear-gradient(165deg, rgba(254,238,223,.9), var(--gray-0) 60%); }
.feature-card__quote{
  position:relative; display:flex; align-items:flex-start; gap:var(--space-2);
  background:var(--gray-0); border:1px solid var(--gray-300); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:var(--space-4) var(--space-4) var(--space-4) var(--space-4); text-align:left;
}
.feature-card__quote::after{
  content:""; position:absolute; left:50%; bottom:-8px; width:14px; height:14px;
  background:var(--gray-0); border-right:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300);
  transform:translateX(-50%) rotate(45deg);
}
.feature-card__quote-mark{
  flex-shrink:0; margin-top:-4px; font-family:Georgia,serif; font-size:2rem; font-weight:700; line-height:1;
}
.feature-card--green .feature-card__quote-mark{ color:var(--green-700); }
.feature-card--violet .feature-card__quote-mark{ color:var(--violet-500); }
.feature-card--yellow .feature-card__quote-mark{ color:var(--yellow-800); }
.feature-card h3{ font-size:var(--step-0); }
.feature-card h3 q{ font-style:normal; quotes:none; }
.feature-card__halo{
  display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%;
  margin:var(--space-5) auto var(--space-4);
}
.feature-card--green .feature-card__halo{ background:rgba(195,242,221,.6); }
.feature-card--violet .feature-card__halo{ background:rgba(210,200,225,.6); }
.feature-card--yellow .feature-card__halo{ background:rgba(249,221,196,.6); }
.feature-card__icon{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.feature-card--green .feature-card__icon{ background:var(--green-100); color:var(--green-800); }
.feature-card--violet .feature-card__icon{ background:var(--violet-80); color:var(--violet-500); }
.feature-card--yellow .feature-card__icon{ background:var(--yellow-200); color:var(--yellow-1000); }
.feature-card__icon svg{ width:22px; height:22px; }
.feature-card__divider{ display:block; width:56px; height:1px; background:var(--gray-300); margin:0 auto var(--space-4); }
.feature-card p{ margin-top:auto; margin-bottom:auto; color:var(--gray-800); }
.feature-card--green p strong{ color:var(--green-800); }
.feature-card--violet p strong{ color:var(--violet-500); }
.feature-card--yellow p strong{ color:var(--yellow-1000); }
.features__cta{ position:relative; text-align:left; margin-top:var(--space-7); }

/* ===========================
   Comunidad Facturante (stats)
   =========================== */
.community{
  position:relative; padding-block:var(--space-9); color:var(--gray-0); overflow:hidden;
  background-color:var(--gray-1000);
  background-image:linear-gradient(rgba(18,7,31,.88), rgba(18,7,31,.88)), url("../assets/localfisico.jpg");
  background-size:cover; background-position:center;
}
.community .eyebrow{
  background:rgba(255,255,255,.08); color:#87C19B; border:1px solid rgba(255,255,255,.18);
}
.community__grid{ display:grid; gap:var(--space-6); align-items:center; }
@media (min-width:960px){ .community__grid{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:var(--space-7); } }
.community__text h2{ margin-top:var(--space-3); color:var(--gray-0); font-size:35px; }
.community__text p{ margin-top:var(--space-4); color:rgba(255,255,255,.82); font-size:20px; line-height:1.6; }
.community__text p strong{ color:var(--gray-0); }
.community__stats{ display:grid; gap:20px; }
@media (min-width:560px){ .community__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.community__stat{
  padding:24px 28px; border-radius:var(--radius-lg); text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
}
.community__stat-number{
  font-size:38px; font-weight:900; color:#87C19B; line-height:1;
  white-space:nowrap;
}
.community__stat-label{ margin-top:var(--space-2); font-size:14px; color:rgba(255,255,255,.82); }
.community__stat-label strong{ color:var(--gray-0); }
.community__stat-highlight{ margin-top:2px; font-size:17px; font-weight:900; color:#87C19B; }

/* ===========================
   Respaldo y certificaciones
   =========================== */
.certs{ padding-block:var(--space-7); }
.certs__title{
  text-align:center; font-size:16px; font-weight:700; letter-spacing:0.04em; color:var(--gray-800);
  text-transform:uppercase; margin-bottom:var(--space-7);
}
.certs__list{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-8) var(--space-7);
  list-style:none;
}
.certs__group{ display:flex; flex-direction:column; align-items:center; max-width:15rem; text-align:center; }
.certs__logos{ height:80px; display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
.certs__caption{ margin-top:var(--space-4); font-size:.87rem; color:#353537; line-height:1.5; }

/* ===========================
   FAQ (native details/summary)
   =========================== */
.faq__list{ max-width:52rem; margin-inline:auto; display:flex; flex-direction:column; gap:var(--space-3); }
.faq__cta{ max-width:52rem; margin-inline:auto; margin-top:var(--space-6); text-align:left; }
.faq-item{ border:1px solid var(--gray-300); border-radius:var(--radius-md); background:var(--gray-0); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--space-5); display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-4); font-weight:700; font-size:var(--step-0); color:var(--gray-1000);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ width:22px; height:22px; color:var(--green-800); flex-shrink:0; }
.faq-item summary .chev__v{ transition:opacity var(--transition); }
.faq-item[open] summary .chev__v{ opacity:0; }
.faq-item[open]{ border-color:var(--green-400); }
.faq-item[open] summary{ color:var(--green-800); }
.faq-item__body{ padding:0 var(--space-5) var(--space-5); color:#353537; font-size:var(--step-0); }

/* ===========================
   Footer
   =========================== */
.site-footer{ background:var(--green-900); color:var(--gray-0); padding-block:var(--space-6); }
.site-footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5);
}
.footer__logo{ display:inline-flex; align-items:center; }
.footer__logo img{ height:24px; width:auto; }
.footer__copyright{ margin-top:var(--space-3); font-size:var(--step--1); color:rgba(255,255,255,.75); }
.social-links{ display:flex; align-items:center; gap:var(--space-3); list-style:none; }
.social-links a{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); color:var(--gray-0); transition:background var(--transition);
}
.social-links a:hover{ background:rgba(255,255,255,.24); }
.social-links svg{ width:18px; height:18px; }

/* Back to top */
.back-to-top{
  position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:40;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--green-800); color:var(--gray-0); box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--transition), transform var(--transition), background var(--transition);
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ background:var(--green-900); }
.back-to-top svg{ width:20px; height:20px; }