/* ============================================
   TOKENS — paleta editorial verde (v7)
   ============================================ */
:root{
  --ink:#16241D;          /* verde casi negro: titulares, bandas, footer */
  --ink-soft:#4B5651;     /* texto corrido */
  --ink-faint:#6E7A74;    /* texto auxiliar */
  --paper:#F2F4F1;        /* fondo de sección clara */
  --card:#FFFFFF;
  --accent:#1E5245;       /* Brunswick Green */
  --accent-dark:#12332B;
  --accent-tint:#E7EDE9;
  --accent-light:#6FA292; /* verde claro sobre fondo oscuro */
  --line:#DDE3DE;
  --line-soft:#E8EDE9;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius:2px;
  --shadow-card:none;
  --max:1180px;
  --section-y:clamp(72px, 8vw, 116px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--card);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}

p{margin:0 0 1em;}
a{color:inherit;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}
.wrap--narrow{max-width:780px;}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{left:0;}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---- Eyebrow: versalitas verdes, alineadas a la izquierda ---- */
.eyebrow{
  font-family:var(--font-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .85rem;
}
.eyebrow--center{text-align:left;}

.section-title{
  font-size:clamp(1.85rem, 1.3rem + 2.1vw, 2.6rem);
  max-width:26ch;
  margin:0 0 1.1rem;
  text-align:left;
}
.section-title--left{margin:0 0 1.1rem; max-width:32ch;}

/* ---- Botones: rectos, sin sombra ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.9rem 1.6rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.97rem;
  line-height:1.2;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary{background:var(--accent); color:#fff;}
.btn--primary:hover{background:var(--accent-dark);}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn--large{padding:1.05rem 1.8rem;}

/* ============================================
   HEADER
   ============================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--ink);
}
.brand__seal{color:var(--accent); display:flex;}
.brand__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.15;
  letter-spacing:-.01em;
}
.brand__name--footer{font-size:1.3rem; margin-bottom:.5rem; color:#fff;}

.site-nav{display:flex; align-items:center; gap:1.7rem;}
.site-nav a{
  text-decoration:none;
  font-size:.93rem;
  font-weight:500;
  color:var(--ink-soft);
}
.site-nav a:hover{color:var(--ink);}
.site-nav__cta{
  background:var(--accent);
  color:#fff !important;
  padding:.6rem 1.15rem;
  border-radius:var(--radius);
  font-weight:600 !important;
}
.site-nav__cta:hover{background:var(--accent-dark); color:#fff !important;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:22px; height:2px; background:var(--ink); display:block;}

@media (max-width:820px){
  .nav-toggle{display:flex;}
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    gap:0; padding:0 24px;
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .site-nav.is-open{max-height:360px; padding:12px 24px 20px;}
  .site-nav a{padding:.65rem 0; width:100%;}
  .site-nav__cta{margin-top:.6rem; text-align:center;}
}

/* ============================================
   HERO — texto a la izquierda, foto sangrando a la derecha
   ============================================ */
.hero{padding:var(--section-y) 0; background:var(--card);}
.hero--v5{padding-top:clamp(56px,6vw,84px); padding-bottom:clamp(56px,6vw,84px);}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.25rem, 1.5rem + 3vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:600;
}
.hero--v5 .hero__copy h1{max-width:15ch;}
.hero__lead{
  color:var(--ink-soft);
  font-size:1.08rem;
  max-width:48ch;
}
.hero--v5 .hero__lead{font-size:1.08rem;}
.hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin:2rem 0 1.75rem;}
.hero__matricula{
  background:var(--paper);
  border-left:4px solid var(--accent);
  padding:16px 20px;
  margin-bottom:.9rem;
}
.hero__matricula-title{font-weight:700; font-size:.9rem; color:var(--ink); margin:0 0 .2rem;}
.hero__matricula-item{font-size:.86rem; color:var(--ink-soft); margin:0;}
.hero__trust{font-size:.84rem; color:var(--ink-faint); margin:0;}

/* Foto que sangra hasta el borde derecho de la pantalla */
.hero__media{
  margin-right:calc(min(0px, (var(--max) / 2 - 50vw)) - 24px);
}
.hero__media img{
  display:block;
  width:100%;
  height:clamp(320px, 38vw, 480px);
  object-fit:cover;
  border-radius:var(--radius);
}

@media (max-width:820px){
  .hero__grid{grid-template-columns:1fr; gap:36px;}
  .hero__media{margin-right:-24px; margin-left:-24px; order:-1;}
  .hero__media img{height:260px; border-radius:0;}
  .hero--v5 .hero__copy h1{max-width:none;}
}
@media (max-width:700px){
  .hero--v5{padding-top:40px; padding-bottom:44px;}
  .hero--v5 .hero__actions{flex-direction:column; align-items:stretch;}
  .hero--v5 .hero__actions .btn{text-align:center; justify-content:center;}
}

/* Mock de documento (legacy, sin uso en el index) */
.hero__doc{display:flex; justify-content:center;}
.doc-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); width:100%; max-width:300px; padding:34px 30px;
}
.doc-card--v5{max-width:320px; padding:30px;}
.doc-card__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.doc-card__badge{font-size:.68rem; font-weight:700; letter-spacing:.12em; color:var(--accent);}
.doc-card__dot{width:9px; height:9px; border-radius:50%; background:var(--accent); opacity:.65;}
.doc-card__seal{color:var(--accent); margin-bottom:14px;}
.doc-card__label{font-size:.7rem; letter-spacing:.14em; font-weight:700; color:var(--ink-faint); margin-bottom:1.3rem;}
.doc-card__line{height:8px; background:var(--line-soft); margin-bottom:10px;}
.doc-card__line--w70{width:70%;} .doc-card__line--w95{width:95%;} .doc-card__line--w60{width:60%; margin-bottom:26px;}
.doc-card__stamp{display:flex; gap:.9rem; font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--accent); border-top:1px dashed var(--line); padding-top:14px;}
.hero__mini-trust{display:flex; flex-direction:column; gap:3px; margin-top:14px; color:var(--ink-soft); font-size:.78rem; text-align:center;}
.hero__mini-trust strong{color:var(--ink);}

/* ============================================
   FRANJA DE VENTAJAS — bloques con filete verde
   ============================================ */
.quick-proof{
  background:var(--card);
  border-top:1px solid var(--line);
  padding:clamp(40px,5vw,64px) 0;
}
.quick-proof__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.quick-proof__grid>div,
.quick-proof__grid>div:first-child{
  background:var(--paper);
  border:0;
  border-left:4px solid var(--accent);
  padding:18px 22px;
  display:flex; flex-direction:column; gap:3px;
}
.quick-proof strong{font-family:var(--font-display); font-size:1.02rem; color:var(--ink); font-weight:600;}
.quick-proof span{font-size:.86rem; color:var(--ink-soft);}

@media (max-width:900px){.quick-proof__grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.quick-proof__grid{grid-template-columns:1fr;}}

/* ============================================
   SERVICIOS
   ============================================ */
.services{padding:var(--section-y) 0 0; background:var(--paper);}
.services--v5{padding:var(--section-y) 0 var(--section-y);}
.section-intro{
  max-width:60ch;
  margin:0 0 3rem;
  color:var(--ink-soft);
  font-size:1rem;
}
.services__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
/* 2x2 de tarjetas + columna alta a la derecha (panel o foto) */
.services__grid--v5{
  grid-template-columns:1fr 1fr minmax(290px,.9fr);
  grid-auto-rows:1fr;
  gap:20px;
  align-items:stretch;
}
.services__grid--v5 .service-card{grid-column:auto;}
.services__panel{
  grid-column:3;
  grid-row:1 / span 2;
  background:var(--ink);
  border-radius:var(--radius);
  display:flex;
  overflow:hidden;
}
.services__panel-inner{
  display:flex; flex-direction:column; justify-content:center;
  padding:38px 34px;
  color:rgba(255,255,255,.78);
}
.services__panel h3{color:#fff; font-size:1.45rem; line-height:1.15; margin-bottom:.75rem;}
.services__panel .eyebrow{color:#fff; opacity:.85;}
.services__panel p{color:rgba(255,255,255,.76); font-size:.96rem;}
.services__panel .btn--primary{background:#fff; color:var(--accent); align-self:flex-start; margin-top:1rem; white-space:nowrap;}
.services__panel .btn--primary:hover{background:var(--accent-tint);}
/* Variante con foto: reemplazar el contenido del aside por <img class="services__panel-img"> */
.services__panel-img{width:100%; height:100%; object-fit:cover; display:block;}
.service-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px;
  box-shadow:none;
}
.service-card--v5{padding:30px 28px; min-height:100%;}
.service-card__icon{
  color:var(--accent);
  width:auto; height:auto;
  background:none;
  border-radius:0;
  display:flex; align-items:center;
  margin-bottom:1rem;
}
.service-card__tag{
  display:inline-block;
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .6rem;
}
.service-card h3{font-size:1.28rem; margin-bottom:.6rem;}
.service-card p{color:var(--ink-soft); font-size:.97rem;}
.service-card__link{
  display:inline-block; margin-top:.4rem;
  font-weight:600; font-size:.92rem; color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent;
}
.service-card__link:hover{border-bottom-color:var(--accent);}
.service-card__link--strong{font-weight:700;}
.service-card__actions{display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; margin-top:.9rem;}
.service-card--wide{grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;}
.service-card--wide .service-card__icon{margin-bottom:0;}

@media (max-width:1040px){
  .services__grid--v5{grid-template-columns:1fr 1fr;}
  .services__panel{grid-column:1 / -1; grid-row:auto;}
  .services__panel-inner{padding:32px;}
}
@media (max-width:900px){
  .services__grid, .services__grid--v5{grid-template-columns:1fr; grid-auto-rows:auto;}
  .service-card--wide{grid-column:auto; grid-template-columns:1fr;}
}

/* ============================================
   ORIENTACIÓN
   ============================================ */
.decision{padding:40px 0 var(--section-y); background:var(--paper);}
.decision__box{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  background:var(--accent-tint);
  border:0; border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:34px 38px;
}
.decision__box h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem); margin-bottom:.5rem;}
.decision__box p{color:var(--ink-soft); max-width:60ch; margin:0;}
.decision__box .eyebrow{margin-bottom:.45rem;}

/* ============================================
   CÓMO TRABAJAMOS — banda oscura
   ============================================ */
.steps{
  padding:var(--section-y) 0;
  background:var(--ink);
  border-top:0; border-bottom:0;
  color:rgba(255,255,255,.78);
}
.steps h2,.steps h3{color:#fff;}
.steps .eyebrow{color:#fff; opacity:.9;}
.steps .section-intro{color:rgba(255,255,255,.72);}
.steps__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.steps__list--v5{grid-template-columns:repeat(3,1fr);}
.steps__list li{
  display:flex; flex-direction:column; gap:0;
  border:1px solid rgba(255,255,255,.14);
  padding:26px 26px 28px;
}
.steps__num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:2.6rem;
  line-height:1;
  color:var(--accent-light);
  opacity:.55;
  margin-bottom:1.6rem;
  flex-shrink:0;
}
.steps__list h3{font-size:1.1rem; margin-bottom:.4rem;}
.steps__list p{color:rgba(255,255,255,.72); font-size:.93rem; margin:0;}

@media (max-width:900px){
  .steps__list,.steps__list--v5{grid-template-columns:1fr;}
  .steps__num{margin-bottom:1rem;}
}

/* ============================================
   CONFIANZA
   ============================================ */
.trust{padding:var(--section-y) 0; background:var(--card);}
.trust--v5{background:var(--card);}
.trust__grid{display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:start;}
.trust__seal{color:var(--accent); opacity:.85;}
.trust__intro{color:var(--ink-soft); max-width:62ch;}
.trust__list{list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:0;}
.trust__list li{
  padding:14px 0 14px 0;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  position:relative;
  font-size:.98rem;
}
.trust__list li:last-child{border-bottom:1px solid var(--line);}
.trust__list li::before{content:none;}

@media (max-width:700px){
  .trust__grid{grid-template-columns:1fr; gap:28px;}
  .trust__seal{display:none;}
}

/* ============================================
   FAQ
   ============================================ */
.faq{padding:var(--section-y) 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line); padding:1.25rem 0;}
.faq__item:first-of-type{border-top:1px solid var(--line);}
.faq__item summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  color:var(--ink);
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+"; font-size:1.4rem; color:var(--accent); margin-left:1rem; font-family:var(--font-body); line-height:1;}
.faq__item[open] summary::after{content:"–";}
.faq__item p{color:var(--ink-soft); margin:.9rem 0 0; font-size:.97rem; max-width:70ch;}

/* ============================================
   FORMULARIO
   ============================================ */
.evaluation{padding:var(--section-y) 0; background:var(--card);}
.evaluation--v5{padding:var(--section-y) 0;}
.evaluation__lead{color:var(--ink-soft); margin:0 0 2.5rem; text-align:left;}
.eval-form{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  box-shadow:none;
}
.eval-form--v5{padding:38px;}
.lead-form__grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 20px; text-align:left;}
.lead-form__grid label{font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink);}
.lead-form__grid input,.lead-form__grid select{
  display:block; width:100%; margin-top:8px; padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; color:var(--ink); font:inherit; font-size:.97rem; box-sizing:border-box;
}
.lead-form__grid input:focus,.lead-form__grid select:focus{outline:2px solid rgba(30,82,69,.2); border-color:var(--accent);}
.eval-form__submit{width:100%; border:0; cursor:pointer; justify-content:center; margin-top:.25rem;}
.eval-form__note{font-size:.79rem !important; color:var(--ink-faint) !important; margin:14px 0 0 !important; max-width:62ch; line-height:1.55;}
.eval-form__alt{font-size:.9rem; color:var(--ink-faint); margin:1.1rem 0 0;}
.eval-form__alt a{color:var(--accent); font-weight:600; text-decoration:none;}
.eval-form__alt a:hover{text-decoration:underline;}

@media (max-width:700px){
  .lead-form__grid{grid-template-columns:1fr;}
  .eval-form--v5{padding:24px 20px;}
}

/* ============================================
   CTA FINAL
   ============================================ */
.final-cta{padding:0 0 var(--section-y); background:var(--card);}
.final-cta__box{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:40px 42px;
  border-radius:var(--radius);
  background:var(--accent);
  color:rgba(255,255,255,.85);
}
.final-cta__box h2{color:#fff; margin-bottom:.35rem; font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);}
.final-cta__box p{color:rgba(255,255,255,.82); margin:0;}
.final-cta__box .eyebrow{color:#fff; opacity:.85; margin-bottom:.45rem;}
.final-cta__box .btn--primary{background:#fff; color:var(--accent);}
.final-cta__box .btn--primary:hover{background:#E7EDE9;}

@media (max-width:900px){
  .decision__box,.final-cta__box{flex-direction:column; align-items:flex-start;}
  .decision__box,.final-cta__box{padding:30px 26px;}
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{padding:64px 0 32px; background:var(--ink); color:rgba(255,255,255,.72);}
.site-footer a{text-decoration:none; color:rgba(255,255,255,.88);}
.site-footer a:hover{color:#fff;}
.site-footer__grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.75rem;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.14);
}
.site-footer__matricula{font-size:.88rem; color:rgba(255,255,255,.62); margin:0; max-width:52ch;}
.site-footer__contact{display:flex; flex-direction:column; gap:.45rem; font-size:.93rem;}
.site-footer__legal{
  max-width:var(--max); margin:22px auto 0; padding:0 24px;
  font-size:.79rem; color:rgba(255,255,255,.45);
}

/* ============================================
   ARTÍCULOS / GUÍAS
   ============================================ */
.article-header{padding:64px 0 8px; background:var(--card);}
.article-header .eyebrow{margin-bottom:1rem;}
.article-header h1{font-size:clamp(1.9rem, 1.35rem + 2.3vw, 2.9rem); line-height:1.08; max-width:24ch;}
.breadcrumb{font-size:.85rem; color:var(--ink-faint); margin:0 0 1.5rem;}
.breadcrumb a{color:var(--ink-soft); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}
.article{padding:24px 0 72px; background:var(--card);}
.article h2{font-size:clamp(1.35rem, 1.1rem + .9vw, 1.7rem); margin-top:2.2em;}
.article h3{font-size:clamp(1.08rem, .98rem + .45vw, 1.25rem); margin-top:1.7em; color:var(--accent-dark);}
.article p{color:var(--ink-soft); font-size:1.03rem; max-width:72ch;}
.article ul,.article ol{color:var(--ink-soft); font-size:1.03rem; padding-left:1.3em; max-width:72ch;}
.article li{margin-bottom:.45em;}
.article li strong{color:var(--ink);}
.article-cta{
  margin-top:3rem; padding:32px 34px;
  background:var(--paper);
  border:0; border-left:4px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:none;
}
.article-cta p{color:var(--ink-soft); margin-bottom:1.25rem;}
.article-cta .btn{margin:0;}

/* ============================================
   WHATSAPP FLOTANTE
   ============================================ */
.floating-wa{
  position:fixed; right:22px; bottom:22px; z-index:20;
  background:var(--accent); color:#fff !important;
  text-decoration:none; font-weight:700; font-size:.92rem;
  padding:14px 20px; border-radius:999px;
  box-shadow:0 8px 22px rgba(22,36,29,.22);
}
.floating-wa:hover{background:var(--accent-dark);}
@media (max-width:700px){
  .floating-wa{right:14px; bottom:14px; padding:12px 17px;}
}