/* =================================================================
   MÁS QUE ADIESTRAMIENTO — Páginas de servicio v2
   Secciones: hero, problemas, método, herramientas, quién soy,
   galería, programas, para quién, FAQ, CTA final.
   Requiere tokens.css y styles.css cargados antes.
   ================================================================= */

/* ===== HERO ===== */
.hero{background:var(--ink);color:var(--paper);padding:80px 0 88px;position:relative;}
.hero::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;background:var(--orange);}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;}
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  line-height:1;font-size:clamp(2.5rem,5.4vw,4rem);margin:8px 0 20px;}
.hero h1 span{color:var(--orange);}
.hero__lead{font-size:1.2rem;color:#cfc8bb;max-width:34ch;margin-bottom:30px;}
.hero__sub{font-size:.92rem;color:#9a9082;margin-top:14px;}
.hero__photo{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);}
.hero__photo img{width:100%;height:100%;object-fit:cover;}

/* ===== TARJETAS DE PROBLEMA ===== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 24px;transition:var(--transition);}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--orange);}
.card h3{font-size:1.16rem;margin-bottom:9px;}
.card h3::before{content:"";display:block;width:30px;height:4px;background:var(--orange);
  border-radius:2px;margin-bottom:13px;}
.card p{font-size:.98rem;color:var(--text-soft);}
/* Fix: cards sobre fondo verde/ink heredaban color claro y los titulos quedaban borrosos sobre el fondo blanco de la card */
.section--green .card h3,
.section--ink .card h3{color:var(--ink);}
.section--green .card p,
.section--ink .card p{color:var(--text-soft);}

/* ===== MÉTODO ===== */
.metodo-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:46px;
  margin-top:44px;align-items:start;}
.pasos{display:grid;gap:30px;}
.paso{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding-bottom:30px;border-bottom:1px solid #3f4d40;}
.paso:last-child{border-bottom:none;padding-bottom:0;}
.paso__num{font-family:var(--font-display);font-weight:800;font-size:3.2rem;
  line-height:.85;color:var(--orange);}
.paso h3{color:var(--paper);font-size:1.28rem;margin-bottom:8px;}
.paso__cita{color:var(--orange);font-weight:600;font-size:1.06rem;margin-bottom:8px;}
.paso p{color:#cfc8bb;font-size:1.0rem;}
.metodo-photo{aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;
  position:sticky;top:92px;}
.metodo-photo img{width:100%;height:100%;object-fit:cover;}

/* ===== HERRAMIENTAS ===== */
.tool-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;}
.tool-card__img{aspect-ratio:16/11;}
.tool-card__img img{width:100%;height:100%;object-fit:cover;}
.tool-card__body{padding:24px 24px 28px;}
.tool-card__idx{font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--orange);letter-spacing:.05em;}
.tool-card h3{font-size:1.18rem;margin:8px 0 9px;}
.tool-card p{font-size:.97rem;color:var(--text-soft);}
.tool-card__bonus{display:inline-block;margin-top:14px;background:var(--orange-100);
  color:var(--orange-600);font-family:var(--font-display);font-weight:700;font-size:.82rem;
  padding:6px 13px;border-radius:var(--radius-pill);}

/* ===== QUIÉN SOY ===== */
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:50px;align-items:center;}
.about-photo{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about-text p{margin-top:14px;color:var(--text);}
.about-text p:first-of-type{margin-top:0;}

/* ===== GALERÍA ===== */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.gallery figure:hover img{transform:scale(1.05);}

/* ===== PROGRAMAS / TIPOS ===== */
.tipo-card{background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;}
.tipo-card h3{font-size:1.14rem;margin-bottom:9px;}
.tipo-card > p{font-size:.97rem;color:var(--text-soft);}
.tipo-card__res{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--font-display);font-weight:700;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink);}
.tipo-card__res span{display:block;margin-top:6px;font-family:var(--font-body);
  font-weight:400;text-transform:none;letter-spacing:0;font-size:.97rem;color:var(--text-soft);}

/* ===== PARA QUIÉN ===== */
.pq-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;}
.pq-col{border-radius:var(--radius-lg);padding:32px 30px;}
.pq-col--si{background:var(--green-100);border:1px solid #c9d3c4;}
.pq-col--no{background:var(--white);border:1px solid var(--border);}
.pq-col h3{font-size:1.3rem;margin-bottom:18px;}
.pq-list{list-style:none;display:grid;gap:13px;}
.pq-list li{position:relative;padding-left:32px;font-size:1rem;color:var(--text);}
.pq-list li::before{position:absolute;left:0;top:-1px;width:21px;height:21px;
  border-radius:50%;font-family:var(--font-display);font-weight:800;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;}
.pq-col--si .pq-list li::before{content:"+";background:var(--green);color:var(--paper);}
.pq-col--no .pq-list li::before{content:"-";background:#d9cdb9;color:var(--ink);}
.pq-list em{font-style:normal;color:var(--orange-600);font-weight:700;}

/* ===== FAQ ===== */
.faq{max-width:760px;margin-top:32px;}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  color:var(--ink);padding:22px 44px 22px 0;cursor:pointer;list-style:none;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;
  transform:translateY(-50%);font-size:1.6rem;font-weight:400;color:var(--orange);
  transition:var(--transition);}
.faq details[open] summary::after{content:"-";}
.faq details p{padding:0 0 24px;color:var(--text-soft);font-size:1.02rem;}

/* ===== CTA FINAL ===== */
.cta-final{text-align:center;}
.cta-final h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.9rem,4vw,2.7rem);color:var(--paper);max-width:20ch;margin:0 auto 14px;}
.cta-final p{color:#cfc8bb;max-width:48ch;margin:0 auto 26px;}
.cta-final__sub{font-size:.92rem;color:#9a9082;margin-top:16px;}

/* ===== RESPONSIVE ===== */
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:36px;}
  .hero__photo{aspect-ratio:16/11;}
  .metodo-grid,.about-grid{grid-template-columns:1fr;gap:32px;}
  .metodo-photo{position:static;aspect-ratio:16/11;}
  .about-photo{aspect-ratio:16/11;max-width:440px;}
  .gallery{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .paso{grid-template-columns:1fr;gap:8px;}
  .paso__num{font-size:2.6rem;}
}

/* =================================================================
   COMPONENTES DE PÁGINA DE SERVICIO (mix-and-match por servicio)
   Cada página de servicio usa solo los que necesita. No todas
   las páginas comparten estructura: cada servicio tiene la suya.
   ================================================================= */

/* ===== BANDA DE IMAGEN ANCHA ===== */
.img-band{margin-top:42px;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:16/6;box-shadow:var(--shadow-sm);}
.img-band img{width:100%;height:100%;object-fit:cover;}

/* ===== BLOQUE DUO (2 cartas de énfasis: ventana, etc.) ===== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.duo-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px 28px;}
.section--green .duo-card{background:var(--ink-soft);border-color:#3f4d40;}
.duo-card .k{font-family:var(--font-display);font-weight:800;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--orange);margin-bottom:12px;}
.duo-card h3{font-size:1.28rem;margin-bottom:10px;}
.section--green .duo-card h3{color:var(--paper);}
.duo-card p{color:var(--text-soft);font-size:1rem;}
.section--green .duo-card p{color:#cfc8bb;}
.cierre-linea{margin-top:30px;font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;color:var(--paper);max-width:46ch;}

/* ===== PILARES ===== */
.pilares{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.pilar{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 26px;display:flex;gap:20px;align-items:flex-start;transition:var(--transition);}
.pilar:hover{border-color:var(--orange);box-shadow:var(--shadow-md);}
.pilar__n{font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--orange);background:var(--ink);border-radius:var(--radius-sm);
  width:60px;min-width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
.pilar h3{font-size:1.16rem;margin-bottom:7px;}
.pilar p{font-size:.97rem;color:var(--text-soft);}

/* ===== CLAVES (puntos numerados destacados) ===== */
.claves{margin-top:38px;display:grid;gap:16px;}
.clave{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 26px;}
.section--ink .clave{background:var(--ink-soft);border-color:#3f3830;}
.clave__n{font-family:var(--font-display);font-weight:800;font-size:1.6rem;color:var(--orange);line-height:1;}
.clave h3{font-size:1.12rem;margin-bottom:5px;}
.section--ink .clave h3{color:var(--paper);}
.clave p{font-size:.98rem;color:var(--text-soft);}
.section--ink .clave p{color:#cfc8bb;}

/* ===== QUÉ INCLUYE + PRECIO ===== */
.incluye{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;margin-top:40px;align-items:start;}
.incluye-list{list-style:none;display:grid;gap:15px;}
.incluye-list li{position:relative;padding-left:34px;font-size:1.05rem;color:var(--text);}
.incluye-list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;
  border-radius:50%;background:var(--green);}
.incluye-list li::after{content:"";position:absolute;left:8px;top:7px;width:5px;height:9px;
  border-right:2.5px solid var(--paper);border-bottom:2.5px solid var(--paper);transform:rotate(45deg);}
.precio-box{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);
  padding:32px 28px;text-align:center;}
.precio-box .precio{font-family:var(--font-display);font-weight:800;font-size:3rem;
  color:var(--orange);line-height:1;}
.precio-box .precio-sub{color:#cfc8bb;font-size:.92rem;margin:8px 0 22px;}

/* ===== PROCESO 1-2-3 ===== */
.proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px;}
.proceso-paso{text-align:center;}
.proceso-paso .n{font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  width:46px;height:46px;border-radius:50%;background:var(--orange);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.proceso-paso h3{font-size:1.08rem;margin-bottom:6px;color:var(--paper);}
.proceso-paso p{font-size:.95rem;color:#cfc8bb;}

@media(max-width:760px){
  .duo,.pilares,.incluye,.proceso{grid-template-columns:1fr;}
  .img-band{aspect-ratio:16/9;}
}

/* ===== HUECO DE IMAGEN (placeholder, sin foto real todavía) ===== */
.foto-ph{background:var(--sand);border:1.5px dashed #c9bda6;box-shadow:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;color:var(--text-soft);font-family:var(--font-display);
  font-weight:600;font-size:.92rem;line-height:1.45;letter-spacing:.02em;}
.hero .foto-ph,.section--ink .foto-ph,.section--green .foto-ph{
  background:var(--ink-soft);border-color:#4a4136;color:#9a8f7e;}