/* ============================================================
 * psico.css — Identidad visual PsicoSmart (extraído 2026-07-29)
 * ÚNICA fuente del diseño. Cambiar un color = cambiar aquí.
 * Marca: #ec8435 (el "Smart" del logo) — un solo color de acción.
 * ============================================================ */
:root{--brand:#ec8435;--brand-d:#d4700f;--ink:#0f172a;--slate:#64748b;--line:#e6eaf0;--soft:#f7f9fc}
*{-webkit-font-smoothing:antialiased}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em}
a{text-decoration:none}
.btn{border-radius:10px;font-weight:600;padding:.7rem 1.5rem}
.btn-brand{background:var(--brand);border:1px solid var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
/* topbar + nav */
.ps-topbar{background:var(--ink);color:#cbd5e1;padding:.5rem 0;font-size:.86rem}
.ps-topbar a{color:#fff}
.ps-nav{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.7rem 0}
.ps-nav .nav-link{color:var(--ink);font-weight:500;font-size:.95rem;padding:.5rem .8rem}
.ps-nav .nav-link:hover{color:var(--brand)}
/* hero */
.ps-hero{padding:5rem 0 4rem;background:linear-gradient(180deg,var(--soft),#fff)}
.ps-badge{display:inline-block;background:#fff4ea;color:#b45f12;border:1px solid #f6d9bd;border-radius:999px;padding:.42rem 1rem;font-size:.83rem;font-weight:600}
.ps-h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.08;margin:0}
.ps-h1 span{color:var(--brand)}
.ps-lead{font-size:1.16rem;color:var(--slate);line-height:1.65;margin-top:1.1rem;max-width:33rem}
.ps-micro{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;padding:0;margin:0;color:var(--slate);font-size:.88rem}
.ps-micro li::before{content:"✓";color:#16a34a;font-weight:800;margin-right:.35rem}
.ps-quote{border-left:3px solid var(--brand);padding:.2rem 0 .2rem 1rem;margin:0;max-width:32rem}
.ps-quote blockquote{margin:0;font-size:.98rem;color:var(--ink)}
.ps-quote figcaption{color:var(--slate);font-size:.85rem;margin-top:.35rem}
.ps-visual{position:relative}
.ps-visual img{border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.16);width:100%;height:auto;object-fit:cover}
.ps-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.12);padding:.85rem 1.05rem;display:flex;flex-direction:column}
.ps-float .n{font-weight:800;font-size:1.35rem;color:var(--brand);line-height:1}
.ps-float .l{font-size:.76rem;color:var(--slate);margin-top:.2rem;line-height:1.25}
.ps-float-a{left:-14px;top:16%}
.ps-float-b{right:-10px;bottom:12%}
@media(max-width:991px){.ps-float{display:none}}
.ps-trust{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;color:var(--slate);font-size:.88rem;border-top:1px solid var(--line);padding-top:1.4rem}
.ps-trust strong{color:#334155;font-size:1.02rem;letter-spacing:.01em}
/* stats */
.ps-stats{background:var(--ink);color:#fff;padding:2.6rem 0}
.ps-stats .n{font-size:1.9rem;font-weight:800;color:#fff}
.ps-stats .l{color:#94a3b8;font-size:.86rem;margin-top:.15rem}
/* sections */
.ps-section{padding:4.5rem 0}
.ps-alt{background:var(--soft)}
.ps-head{text-align:center;max-width:42rem;margin:0 auto 2.6rem}
.ps-head h2{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.ps-head p{color:var(--slate);margin:.6rem 0 0}
.ps-card,.ps-benefit,.ps-step,.ps-testi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.7rem;height:100%;transition:.2s}
.ps-card:hover,.ps-benefit:hover{border-color:#cfd8e3;box-shadow:0 10px 30px rgba(15,23,42,.07);transform:translateY(-2px)}
.ps-kpi{font-size:2rem;font-weight:800;color:var(--brand);line-height:1}
.ps-card h3,.ps-benefit h3,.ps-step h3{font-size:1.06rem;margin:.7rem 0 .45rem}
.ps-card p,.ps-benefit p,.ps-step p{color:var(--slate);font-size:.93rem;margin:0;line-height:1.6}
.ps-step span{display:inline-flex;width:2.2rem;height:2.2rem;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:#fff;font-weight:800}
.ps-testi{margin:0}
.ps-testi blockquote{margin:0;font-size:1rem;line-height:1.6}
.ps-testi figcaption{margin-top:1rem;color:var(--slate);font-size:.86rem}
.ps-testi figcaption strong{color:var(--ink)}
/* cta */
.ps-cta{background:var(--ink);color:#fff;padding:4rem 0}
.ps-cta h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.ps-cta p{color:#94a3b8;margin:.6rem 0 0}
/* suite */
.ps-suite{padding:3.5rem 0;background:var(--soft);border-top:1px solid var(--line)}
.ps-suite .ps-head h2{font-size:1.35rem}
.ps-suite .ps-head p{font-size:.93rem}
.ps-mod{display:block;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem .5rem;color:var(--slate);font-size:.88rem;font-weight:500}
.ps-mod:hover{border-color:var(--brand);color:var(--brand)}
/* footer */
.ps-footer{background:var(--ink);color:#94a3b8;padding:3.2rem 0 1.8rem}
.ps-footer h4{color:#fff;font-size:.95rem;margin-bottom:.9rem}
.ps-footer ul{list-style:none;padding:0;margin:0}
.ps-footer li{margin-bottom:.45rem}
.ps-footer a{color:#94a3b8;font-size:.9rem}
.ps-footer a:hover{color:#fff}
.ps-footer hr{border-color:#1e293b;margin:2rem 0 1.2rem}

.ps-modcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;height:100%}
.ps-modcard h3{font-size:1.02rem;margin-bottom:.2rem}
.ps-sub{color:var(--brand);font-size:.83rem;font-weight:600;margin:0 0 .85rem}
.ps-modcard ul{list-style:none;padding:0;margin:0 0 .9rem}
.ps-modcard li{color:var(--slate);font-size:.88rem;line-height:1.55;margin-bottom:.5rem}
.ps-modcard li strong{color:var(--ink);font-weight:600}
.ps-modcard p{color:var(--slate);font-size:.9rem;line-height:1.6}
.ps-modcard .ps-checks li{position:relative;padding-left:1.2rem}
.ps-modcard .ps-checks li::before{content:"✓";position:absolute;left:0;color:#16a34a;font-weight:800}
.ps-modcard blockquote{font-size:.85rem;color:var(--slate);border-left:2px solid var(--brand);padding-left:.75rem;margin:0 0 .9rem}
.ps-modcard a{color:var(--brand);font-weight:600;font-size:.9rem}
.ps-tag{text-align:center;color:var(--slate);font-size:.85rem;font-weight:600;margin-bottom:1rem}
.ps-expert{text-align:center;border-top:1px solid var(--line);padding-top:2rem;color:var(--slate)}

.ps-news{padding:3.5rem 0;background:#fff}
.ps-newsbox{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:18px;padding:2.6rem;text-align:center;color:#fff}
.ps-newsbox h2{font-size:1.55rem;margin-bottom:.5rem}
.ps-newsbox p{color:#94a3b8;margin-bottom:1.5rem}
.ps-newsform{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:32rem;margin:0 auto}
.ps-newsform input{flex:1 1 16rem;border-radius:10px;border:1px solid #334155;background:#0b1220;color:#fff;padding:.7rem 1rem}
.ps-newsform input::placeholder{color:#64748b}

/* ============================================================
 * CORRECCIONES 2026-07-29 (reporte del usuario)
 * 1) Imágenes responsivas: al retirar el CSS del tema se perdió
 *    esta regla y una foto de 1200px desbordaba en móvil.
 * 2) Botones heredados del tema (.btn_contact) sin estilo.
 * 3) Color de texto de botones dentro del footer.
 * ============================================================ */
img, video { max-width: 100%; height: auto; }

/* Botón de envío del formulario de contacto (clase del tema antiguo) */
.btn_contact, button.btn_contact, a.btn_contact{
  background: var(--brand); border: 1px solid var(--brand); color: #fff;
  border-radius: 10px; font-weight: 600; padding: .7rem 1.6rem;
}
.btn_contact:hover{ background: var(--brand-d); border-color: var(--brand-d); color:#fff; }

/* El color de enlace del footer no debe pisar el texto de los botones */
.ps-footer .btn-brand, .ps-footer .btn-brand:hover{ color:#fff; }
.ps-footer .btn{ text-decoration:none; }

/* Contraste garantizado en cualquier botón de marca */
.btn-brand, .btn-brand:link, .btn-brand:visited, .btn-brand:hover, .btn-brand:focus{ color:#fff; }

/* Tablas anchas: scroll propio en móvil, nunca desbordar la página */
.table-responsive, .hub-tabla-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width: 767px){
  table.hub-tabla{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================================
 * BARRA SOCIAL FLOTANTE (WhatsApp · correo · YouTube)
 * Incorporada 2026-07-29: estaba en iconos-barraLateral/{main,font}.css,
 * que solo cargaban algunas páginas -> la home la perdió al migrar.
 * Al vivir aquí queda consistente en TODA página que use la plantilla.
 * ============================================================ */
@font-face{font-family:icomoon;src:url('/iconos-barraLateral/fonts/icomoon.eot?sp5kcz');src:url('/iconos-barraLateral/fonts/icomoon.eot?sp5kcz#iefix') format('embedded-opentype'),url('/iconos-barraLateral/fonts/icomoon.ttf?sp5kcz') format('truetype'),url('/iconos-barraLateral/fonts/icomoon.woff?sp5kcz') format('woff'),url('/iconos-barraLateral/fonts/icomoon.svg?sp5kcz#icomoon') format('svg');font-weight:400;font-style:normal;font-display:block}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:"\e912"}.icon-gift:before{content:"\e99f"}.icon-envelop:before{content:"\e945"}.icon-whatsapp:before{content:"\ea93"}.icon-shopping-cart:before{content:"\1F6D2"}
.social-bar{position:fixed;right:0;top:35%;font-size:1.5rem;display:flex;flex-direction:column;align-items:flex-end;z-index:100}.icon{color:#fff;text-decoration:none;padding:.7rem;display:flex;transition:.5s;font-size:30px}.icon-envelop,.icon-gift,.icon-play,.icon-shopping-cart{background:#f47820}.icon-whatsapp{background:#1db24b}.icon:first-child{border-radius:1rem 0 0}.icon:last-child{border-radius:0 0 0 1rem}.icon:hover{padding-right:1rem;border-radius:1rem 0 0 1rem;box-shadow:0 0 .5rem rgba(0,0,0,.42);color:#fff}.texto{padding-right:2rem;margin-top:.5rem}

/* LOGO 2026-07-30 — el logo del navbar se renderizaba a 0×0 en TODAS las páginas
   migradas. Causa: la regla `img{height:auto}` de más arriba vence al atributo
   HTML `height="38"` (el CSS gana a los atributos de presentación) y el SVG,
   sin altura resoluble, colapsa. Hay que dimensionarlo explícitamente. */
.navbar-brand img{ height:38px; width:auto; max-width:none; }

/* ICONOS 2026-07-30 — SVG en línea en lugar de emoji.
   Los emoji dependen de la fuente del SISTEMA del visitante: en Windows, Linux
   y navegadores sin fuente de emoji salían como recuadro vacío, y en un contexto
   B2B se ven poco profesionales. Estos SVG heredan el color del texto y escalan
   con la tipografía. */
.ps-ico{
  display:inline-block; vertical-align:-.125em;
  width:1em; height:1em; flex:0 0 auto;
}

/* CLIENTES 2026-07-30 — franja de prueba social (_inc/clientes.php).
   Logos en escala de grises que recuperan color al pasar el ratón: no compiten
   con los CTA de marca pero siguen siendo legibles. */
.ps-clientes{ padding:2.5rem 0; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ps-clientes__titulo{
  text-align:center; margin:0 0 1.5rem; font-size:.82rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#64748b);
}
.ps-clientes__tira{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.75rem 2.5rem;
}
.ps-clientes__tira img{
  height:44px; width:auto; max-width:152px; object-fit:contain;
  filter:grayscale(1); opacity:.62; transition:filter .2s, opacity .2s;
}
.ps-clientes__tira img:hover{ filter:grayscale(0); opacity:1; }
@media (max-width:575.98px){
  .ps-clientes{ padding:1.75rem 0; }
  .ps-clientes__tira{ gap:1.25rem 1.5rem; }
  .ps-clientes__tira img{ height:32px; max-width:110px; }
}
/* Redes sociales del pie (2026-07-31). Centralizadas en _inc/footer.php para que
   ninguna página las pierda al adoptar el pie compartido. */
.ps-social{display:flex;gap:.55rem;flex-wrap:wrap}
.ps-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#cbd5e1;transition:background .15s,color .15s,border-color .15s}
.ps-social a:hover{background:var(--brand);border-color:var(--brand);color:#fff}