/* ==========================================================================
   Capa de mejoras (2026-11): conversión, confianza, preguntas frecuentes y páginas internas.
   Se carga después de premium.css. Reutiliza los tokens y componentes existentes.
   ========================================================================== */
[hidden] { display: none !important; }

/* ---------- Portada: línea diferencial y entradas por público ---------- */
.phero__diff { display: block; margin-top: .45em; font-family: var(--font-display); font-style: italic; font-size: 1.08em; line-height: 1.35; color: var(--blue-ink); }
.phero__for { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 0; }
.phero__for span { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #4A5A6E; margin-right: .2rem; }
.phero__for a { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .95rem; border: 1px solid rgba(10, 37, 67, .22); border-radius: 999px; color: var(--navy); background: rgba(255, 255, 255, .7);
  font-size: .92rem; font-weight: 500; text-decoration: none; transition: border-color .25s var(--ease-out), background .25s, transform .25s var(--ease-out); }
.phero__for a::after { content: "→"; font-size: .85em; color: var(--blue); transition: transform .25s var(--ease-out); }
.phero__for a:hover { border-color: var(--blue); background: #fff; }
.phero__for a:hover::after { transform: translateX(3px); }

/* ---------- Sobre Pablo: historia personal ---------- */
.historia { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.historia p { margin: 0; color: var(--ink); }

/* ---------- Testimonios ---------- */
.quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-3); }
.quote { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); }
.quote::before { content: "“"; position: absolute; top: .4rem; left: 1.2rem; font: 4.5rem/1 var(--font-display); color: var(--gold); }
.quote blockquote { margin: var(--s-3) 0 0; }
.quote blockquote p { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink); }
.quote footer { margin-top: auto; display: grid; gap: .1rem; border-top: 1px solid var(--line); padding-top: var(--s-2); }
.quote footer strong { color: var(--ink); }
.quote footer span { color: var(--stone); font-size: .95rem; }

/* ---------- Preguntas frecuentes ---------- */
.faq__list { max-width: 880px; border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 1.15rem 0;
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 1.9rem; height: 1.9rem; border: 1px solid var(--line); border-radius: 50%;
  background: linear-gradient(var(--blue), var(--blue)) center / 11px 1.5px no-repeat, linear-gradient(var(--blue), var(--blue)) center / 1.5px 11px no-repeat; transition: transform .35s var(--ease-out), border-color .25s; }
.faq__item summary:hover::after { border-color: var(--blue); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.3rem; max-width: 46em; color: var(--stone); }
.faq__a p { margin: 0; font-size: 1.04rem; }
.faq + .fineprint, .faq .fineprint { margin-top: var(--s-3); }
@media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__a { animation: fx-rise .5s var(--ease-out); } }

/* ---------- Recurso descargable y agenda ---------- */
.recurso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-lg); padding: var(--s-4); margin-top: var(--s-6); }
.recurso__txt { flex: 1 1 340px; }
.recurso h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.12; margin: .4rem 0 .5rem; color: var(--ink); }
.recurso p { margin: 0; color: var(--stone); }
.recurso .eyebrow { margin: 0; }
.agenda { display: grid; gap: .5rem; margin-top: var(--s-3); }
.agenda span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); font-weight: 600; }
.agenda .btn { justify-self: start; }

/* ---------- Barra fija de contacto en celular ---------- */
.mbar { display: none; }
@media (max-width: 900px) {
  .mbar { position: fixed; z-index: 95; inset: auto 0 0 0; display: flex; gap: .5rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .4s var(--ease-out); box-shadow: 0 -14px 30px -22px rgba(6, 23, 42, .5); }
  .mbar.is-on { transform: none; }
  .mbar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .98rem; }
  .mbar__cta { background: var(--navy); color: #fff; }
  .mbar__cta--ghost { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
  .has-mbar { padding-bottom: 4.6rem; }
  .has-mbar .wa-float { display: none !important; }
}

/* ---------- Aviso de medición (sólo si se usa Google Analytics) ---------- */
.measure-notice { position: fixed; z-index: 150; left: 1rem; right: 1rem; bottom: 1rem; max-width: 520px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px;
  padding: 1rem 1.15rem; box-shadow: 0 24px 60px -24px rgba(6, 23, 42, .45); font-size: .95rem; }
.measure-notice p { margin: 0 0 .75rem; color: var(--ink); }
.measure-notice div { display: flex; gap: .5rem; justify-content: flex-end; }
.measure-notice button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .5rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--ink); }
.measure-notice button.is-primary { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ==========================================================================
   Páginas internas (servicios, productores, gracias)
   ========================================================================== */
.spage { padding-top: calc(var(--header-h) + var(--s-6)); }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: 0 0 var(--s-4); padding: 0; list-style: none; font-size: .9rem; color: var(--stone); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--gold); }
.crumbs a { color: var(--stone); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--blue-ink); border-color: currentColor; }
.spage h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -.025em; }
.spage .svc { align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.link-wa { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--blue-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-wa:hover { color: var(--navy); }
.is-dark .link-wa { color: var(--sky); }

.mini-steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); counter-reset: ms; }
.mini-steps li { counter-increment: ms; padding: var(--s-3) var(--s-3) 0 0; display: grid; gap: .5rem; align-content: start; margin: 0; }
.mini-steps li + li { padding-left: var(--s-3); border-left: 1px solid var(--line); }
.mini-steps li::before { content: counter(ms, decimal-leading-zero); font-size: .8rem; letter-spacing: .18em; font-weight: 600; color: var(--blue-ink); }
.mini-steps h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); margin: 0; }
.mini-steps p { margin: 0; color: var(--stone); }
@media (max-width: 760px) { .mini-steps { grid-template-columns: 1fr; } .mini-steps li, .mini-steps li + li { padding: var(--s-3) 0; border-left: 0; border-bottom: 1px solid var(--line); } }

.cta-band { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(70% 120% at 0% 0%, #14416F 0, rgba(20, 65, 111, 0) 60%), var(--navy); color: #fff; padding-block: var(--s-7); }
.cta-band h2 { font-size: var(--step-4); max-width: 18ch; line-height: 1.04; letter-spacing: -.02em; }
.cta-band h2 em { color: var(--sky); }
.cta-band p { color: var(--stone-on-dark); max-width: 36em; font-size: var(--step-1); margin: var(--s-2) 0 var(--s-4); }

.cards4 { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.cards4 li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s-4); display: grid; gap: .5rem; align-content: start; margin: 0; }
.cards4 strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--ink); line-height: 1.2; }
.cards4 span { color: var(--stone); }
@media (max-width: 760px) { .cards4 { grid-template-columns: 1fr; } }

.thanks { min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-7); }
.thanks h1 { font-size: var(--step-5); line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; }
.thanks .lead { margin: var(--s-3) 0 var(--s-4); }
.thanks__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; max-width: 640px; border-top: 2px solid var(--ink); }
.thanks__list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); margin: 0; }
.thanks__list li::before { content: attr(data-n); font: italic 400 1.6rem/1 var(--font-display); color: var(--blue); }

/* ---------- Pie de página: ajuste de enlaces ---------- */
.site-footer a { text-underline-offset: 3px; }

/* ---------- Titular de portada (frase más larga) ---------- */
.phero__title { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.5rem); line-height: 1.05; }
@media (min-width: 901px) { .phero__title { max-width: min(16ch, calc(50vw - max(var(--gutter), (100vw - 1240px) / 2) - 1.75rem)); } }

/* ---------- Pantallas de escritorio bajas (notebooks de 720–820 px de alto): la portada entra completa ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .phero__title { font-size: clamp(2rem, .9rem + 2.9vw, 3.4rem); }
  .phero__inner { gap: var(--s-2); padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-3); }
  .phero__sub { font-size: 1.05rem; }
  .phero .eyebrow { font-size: .72rem; }
}
@media (min-width: 901px) and (max-height: 820px) { .phero__seal { bottom: -1.2rem; } }

/* ---------- Pulido (H10) ---------- */
.cred--main .cred__big { font-size: var(--step-3); }
.band h2 { max-width: 20ch; font-size: var(--step-4); }
@media (min-width: 901px) { .band__bg img { object-position: 36% 28%; } }

/* ==========================================================================
   Auditoría de implementación: WhatsApp y redes visibles, cita destacada, íconos del método
   ========================================================================== */

/* acceso directo a WhatsApp en el encabezado */

/* pie: rótulo, botón y redes */
.footer__lbl { margin: 0 0 .8rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone-on-dark); font-weight: 600; }
.footer__social { display: grid; gap: var(--s-2); justify-items: start; }
.footer__social .social { margin: 0; padding: 0; list-style: none; }
#legal-extra { line-height: 1.6; max-width: 70em; }
#legal-extra a { color: #fff; text-underline-offset: 3px; }
.contact__wa { margin: var(--s-3) 0 0; }

/* cita destacada (frase ya existente en "Sobre Pablo") */
.about__copy p.big { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.35; color: var(--navy);
  border-left: 3px solid var(--gold); padding: .2rem 0 .2rem var(--s-3); margin-block: var(--s-3); }

/* íconos del método (trazo simple, color oro) */
.method li { --ico: none; }
.method li::after { content: ""; position: absolute; top: var(--s-4); right: var(--s-3); width: 30px; height: 30px; background: var(--gold); opacity: .9;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.method li:nth-child(1) { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v10H9l-5 4z'/></svg>"); }
.method li:nth-child(2) { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5'/></svg>"); }
.method li:nth-child(3) { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4'/><path d='M5 5h12l-2 4 2 4H5'/></svg>"); }
.method li:nth-child(4) { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h9l4 4v14H6z'/><path d='M14 3v5h5M9 13h7M9 17h7'/></svg>"); }
.method li:nth-child(5) { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.4A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/></svg>"); }
@media (max-width: 1000px) { .method li::after { display: none; } }


/* ==========================================================================
   Sistema WhatsApp (auditoría de color)
   Regla: el verde oficial rellena UN solo elemento (el botón flotante). Todo botón de texto «Escribime por WhatsApp» es secundario
   (contorno) y lleva el glifo en verde de marca. Verdes oficiales: #25D366 (sobre fondos oscuros) y #128C7E (sobre claros, ≈4:1).
   ========================================================================== */
:root { --wa: #25D366; --wa-ink: #128C7E; }

/* botón de texto: secundario sobre fondos claros */
.btn--wa { --bg: #fff; --fg: var(--navy); --bd: rgba(10, 37, 67, .3); gap: .6rem; }
.btn--wa svg { flex: none; color: var(--wa-ink); }
.btn--wa:hover { --bd: var(--navy); box-shadow: 0 14px 28px -18px rgba(10, 37, 67, .55); }
/* …y sobre fondos oscuros */
.is-dark .btn--wa, .cta-band .btn--wa, .site-footer .btn--wa { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .42); color: #fff; }
.is-dark .btn--wa svg, .cta-band .btn--wa svg, .site-footer .btn--wa svg { color: var(--wa); }
.is-dark .btn--wa:hover, .cta-band .btn--wa:hover, .site-footer .btn--wa:hover { --bd: #fff; background: rgba(255, 255, 255, .07); box-shadow: none; color: #fff; }

/* encabezado: círculo de contorno con el glifo en verde de marca (el verde relleno queda sólo en el botón flotante) */
.nav__wa { display: none; align-items: center; justify-content: center; gap: .6rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none; transition: transform .25s var(--ease-out), background .25s, border-color .25s; }
.nav__wa svg { color: var(--wa); }
.nav__wa span { display: none; }
.nav__wa:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); }
.nav a.nav__wa::after { display: none; }
@media (max-width: 1239px) {
  .nav a.nav__wa { display: inline-flex; width: auto; height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; margin-top: var(--s-2); font-family: var(--font-body); font-size: .95rem; font-weight: 500; line-height: 1; }
  .nav__wa span { display: inline; }
}

/* barra fija del celular: WhatsApp secundario, «Consultar» principal */
@media (max-width: 900px) {
  .mbar__wa { background: #fff; color: var(--navy); border: 1px solid rgba(10, 37, 67, .3); }
  .mbar__wa svg { color: var(--wa-ink); }
}

/* íconos de redes: sobrios, con el color de cada marca al pasar el mouse */
.icon-btn, .icon-btn--in, .icon-btn--in.icon-btn--sm { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 50%; }
.icon-btn:hover { color: #fff; border-color: transparent; }
.icon-btn--in:hover { background: #0A66C2; }
.icon-btn--ig:hover { background: linear-gradient(45deg, #F9A24A, #E1306C 55%, #833AB4); }
.icon-btn--fb:hover { background: #1877F2; }
.icon-btn--wa { color: var(--wa-ink); }
.icon-btn--wa:hover { background: var(--wa); }
.site-footer .social a.icon-btn { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .32); }
.site-footer .social a.icon-btn:hover { color: #fff; border-color: transparent; }
.site-footer .social a.icon-btn--in:hover { background: #0A66C2; }
.site-footer .social a.icon-btn--ig:hover { background: linear-gradient(45deg, #F9A24A, #E1306C 55%, #833AB4); }
.site-footer .social a.icon-btn--fb:hover { background: #1877F2; }

/* ---------- Íconos de redes: borde visible y glifo (sin cuadrado interno) bien proporcionado dentro del círculo ---------- */
.icon-btn, .icon-btn--in, .icon-btn--in.icon-btn--sm { border-color: rgba(10, 37, 67, .3); }
.icon-btn svg { width: 56%; height: 56%; }

/* ---------- Credenciales: tres columnas iguales, mismo tamaño de título y filas alineadas entre columnas ---------- */
.creds { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); }
.cred { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s-2); }
.cred .cred__big, .cred .cred__big--sm, .cred--main .cred__big { font-size: var(--step-2); }
.cred .cred__num, .cred .cred__num--sm { font-size: var(--step-1); grid-row: 3; }
.cred > p:not([class]) { grid-row: 4; }
.cred--sec { opacity: 1; }
@media (max-width: 960px) {
  .creds { grid-template-columns: 1fr; grid-template-rows: none; }
  .cred { grid-row: auto; grid-template-rows: none; padding-block: var(--s-4); }
  .cred .cred__num, .cred .cred__num--sm, .cred > p:not([class]) { grid-row: auto; }
}

/* ---------- Hover de LinkedIn y Facebook: fondo blanco + glifo y borde en el color real de la marca (antes todo quedaba azul) ---------- */
.icon-btn--in:hover, .site-footer .social a.icon-btn--in:hover { background: #fff; color: #0A66C2; border-color: #0A66C2; }
.icon-btn--fb:hover, .site-footer .social a.icon-btn--fb:hover { background: #fff; color: #1877F2; border-color: #1877F2; }

/* ---------- Redes: mismo tamaño en contacto y pie (44 px); sin enlace cargado, ícono atenuado y sin interacción ---------- */
.icon-btn, .icon-btn--sm { width: 2.75rem; height: 2.75rem; }
.icon-btn.is-soon, .icon-btn.is-soon:hover, .site-footer .social .icon-btn.is-soon:hover { opacity: .45; cursor: default; transform: none; box-shadow: none; background: #fff; color: var(--navy); border-color: rgba(10, 37, 67, .3); }
.site-footer .social .icon-btn.is-soon, .site-footer .social .icon-btn.is-soon:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.social, .icon-row { align-items: center; }
.social li { display: flex; }
.icon-btn { vertical-align: middle; }
.site-footer .social { align-items: flex-start; }
.site-footer .social li { line-height: 0; }
.site-footer .social .icon-btn { box-sizing: border-box; padding: 0; margin: 0; }
.site-footer .social li + li { margin-top: 0; }

/* ---------- Redes en celular: botón centrado también en el pie (la regla móvil de enlaces del pie lo pasaba a block) y misma separación ---------- */
.site-footer .social a.icon-btn, .site-footer .social .icon-btn { display: inline-grid; place-items: center; padding: 0; min-height: 0; }
.footer__social .social, .icon-row { gap: .5rem .75rem; }
/* El pie ya reserva su propio espacio para la barra fija: sin franja crema debajo */
.has-mbar { padding-bottom: 0; }