/* ============================================================
   SERVICIO — single-servicio.php (ACF Flexible Content).
   Carga condicional (is_singular('servicio')).
   Ajustes tipográficos de Calu integrados 2026-07-06.
   ============================================================ */

.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1000px;margin:0 auto;padding:0 24px}
.seccion{padding:90px 0}

/* HERO tipográfico */
.s-hero{padding:170px 24px 90px;text-align:center}
.s-hero h1{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(38px,5.4vw,58px);line-height:1.12;margin:26px auto 34px;max-width:820px}
.s-hero h1 strong{font-weight:600}
.s-hero p{font-size:16px;max-width:800px;margin:0 auto 18px;color:#1a1a1a}
.s-hero p strong{font-weight:600}

/* Problema */
.problema{text-align:center}
.problema h2{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.4;margin-bottom:18px}
.problema p{font-size:16px;max-width:620px;margin:0 auto}

/* Grilla de items (Lo que analizamos / Esto es para ti si...) */
.items-sec{text-align:center}
.items-sec__titulo{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(24px,3vw,30px)}
.items-sec__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:680px;margin:44px auto 0}
.item{border:1px solid var(--ink);padding:34px 26px;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.item:hover{background:var(--ink);color:#fff;transform:translateY(-4px)}
.item svg{width:22px;height:22px;stroke:currentColor}
.item h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.item p{font-size:15px}
@media(max-width:640px){.items-sec__grid{grid-template-columns:1fr}}

/* Listas en dos columnas (Problemas que resuelve) */
.resuelve h2{font-size:19px;font-weight:700;text-transform:uppercase;text-align:center;margin-bottom:34px}
.resuelve__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 60px;max-width:820px;margin:0 auto}
.resuelve ul{list-style:none}
.resuelve li{font-size:13.5px;margin-bottom:12px;list-style:none;position:relative;padding-left:18px}
.resuelve li::before{content:"•";position:absolute;left:0}
@media(max-width:680px){.resuelve__cols{grid-template-columns:1fr}}

/* Pilares / pasos en columnas */
.pilares{text-align:center}
.pilares h2{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:14px 0 60px}
.pilares h2.pilares--display{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,34px);text-transform:none;letter-spacing:0}
.pilares__grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}
.pilares__grid--4{grid-template-columns:repeat(4,1fr);max-width:1200px}
.pilar{padding:0 30px;position:relative}
.pilar+.pilar{border-left:1px solid rgba(0,0,0,.25)}
.pilar small{font-size:12px;letter-spacing:.14em;display:block;margin-bottom:14px}
.pilar svg{width:22px;height:22px;stroke:currentColor;margin:0 auto 12px}
.pilar h3{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.pilar p{font-size:14px}
@media(max-width:820px){.pilares__grid,.pilares__grid--4{grid-template-columns:1fr;gap:40px}.pilar+.pilar{border-left:none;border-top:1px solid rgba(0,0,0,.25);padding-top:40px}}

/* Proceso en filas */
.proceso{max-width:760px;margin:0 auto;padding:90px 24px}
.proceso .kicker{margin-bottom:50px}
.fila{display:flex;gap:26px;padding:30px 0;border-bottom:1px dashed rgba(0,0,0,.35);align-items:flex-start}
.fila:last-child{border-bottom:none}
.fila__num{font-size:12px;letter-spacing:.1em;padding-top:4px;flex:0 0 26px}
.fila svg{width:22px;height:22px;stroke:currentColor;flex:0 0 22px;margin-top:2px}
.fila h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.fila p{font-size:13.5px;margin-bottom:14px}
.fila strong{font-weight:600}

/* Precios */
.precios{text-align:center}
.precios h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,34px);margin:16px 0 8px}
.precios h2 strong{font-weight:600}
.precios__sub{font-size:13.5px;margin-bottom:54px}
.precios__grid{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:34px;justify-content:center}
.precios__grid--solo{grid-template-columns:minmax(0,460px)}
.plan{border:1px solid var(--ink);border-radius:var(--radius-card);padding:44px 38px;text-align:center;
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.plan .desde{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.plan__precio{font-size:38px;font-weight:700;letter-spacing:-.01em}
.plan__precio small{font-size:12px;font-weight:400;letter-spacing:.06em}
.plan__nombre{font-size:13px;margin:4px 0 28px}
.plan ul{list-style:none;text-align:left;max-width:330px;margin:0 auto}
.plan li{font-size:13px;margin-bottom:12px;position:relative;padding-left:24px;list-style:none}
.plan li::before{content:"✓";position:absolute;left:0;font-weight:600}
.plan li small{display:block;font-size:11.5px;color:#555}
.plan .btn{margin-top:30px}
@media(max-width:760px){.precios__grid,.precios__grid--solo{grid-template-columns:1fr}}

/* Acordeón de condiciones */
.acordeon{margin-top:30px;border-top:1px solid rgba(0,0,0,.25)}
.acordeon__btn{width:100%;background:none;border:none;font-family:var(--font-body);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:inherit;padding:18px 0 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.acordeon__btn::after{content:"⌄";transition:transform var(--speed) var(--ease)}
.acordeon.open .acordeon__btn::after{transform:rotate(180deg)}
.acordeon__panel{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
/* 440px (no 260): las condiciones de Wonder Era son largas y se cortarían */
.acordeon.open .acordeon__panel{max-height:440px}
.acordeon__panel p{font-size:12px;color:#444;padding:12px 6px 6px;text-align:left}

/* Add-on */
.addon{border:1px solid var(--ink);border-radius:var(--radius-card);max-width:460px;margin:34px auto 0;overflow:hidden;text-align:center;
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.addon:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.addon__head{background:var(--ink);color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:12px}
.addon__body{padding:34px 42px 40px}
.addon__body .desde{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.addon__precio{font-size:34px;font-weight:700}
.addon__precio small{font-size:12px;font-weight:400}
.addon__nota{font-size:12px;color:#555;margin-bottom:22px}
.addon h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.addon p{font-size:12.5px}

/* CTA final */
.cta-final{text-align:center;padding:130px 24px 150px}
.cta-final h2{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(32px,4.4vw,46px);line-height:1.2;margin-bottom:14px}
.cta-final h2 strong{font-weight:600}
.cta-final p{font-size:13.5px;margin-bottom:40px}