/*
Theme Name: Pria
Theme URI: https://pria.cl
Author: Pria Ingeniería y Servicios
Description: Tema a medida para PRIA Ingeniería y Servicios. Liviano y sin constructor visual. Datos de contacto editables desde el Personalizador, marcado schema.org, endurecimiento de seguridad tras el incidente wp2shell de agosto de 2026, botón de WhatsApp con mensaje contextual por página, Google Analytics 4 configurable, aviso de consentimiento de cookies conforme a la Ley 21.719, casos de estudio, testimonios y metaetiquetas SEO propias, y filtro antispam propio del formulario de contacto, del lado del servidor y sin servicios externos.
Version: 1.5.5
Requires at least: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pria
Tags: business, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES DE MARCA
   Cambia estos valores para rebrandear el sitio completo.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Colores de marca */
  --brand-900:#061a31;
  --brand-800:#092F56;   /* azul oficial de marca, tomado del logo */
  --brand-700:#0d4278;
  --brand-600:#15599b;
  --brand-500:#1d70c0;
  --brand-300:#7db2e6;
  --brand-100:#dbeaf8;
  --brand-50:#eff6fc;

  --accent-600:#0a8f8f;
  --accent-500:#0fa9a9;
  --accent-100:#d6f2f2;

  /* Neutros */
  --ink:#111820;
  --ink-soft:#38424f;
  --muted:#5f6b7a;
  --line:#e2e8f0;
  --line-soft:#eef2f7;
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  --bg-deep:var(--brand-900);

  /* Estado */
  --ok:#177a55;
  --warn:#a8690f;
  --err:#b3271d;

  /* Tipografía */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala tipográfica fluida */
  --fs-xs:.8125rem;
  --fs-sm:.9125rem;
  --fs-base:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.28rem + .95vw,2rem);
  --fs-3xl:clamp(1.875rem,1.5rem + 1.6vw,2.75rem);
  --fs-4xl:clamp(2.25rem,1.6rem + 2.6vw,3.75rem);

  /* Espaciado */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;   --sp-10:8rem;

  /* Contenedor */
  --wrap:1180px;
  --wrap-narrow:760px;

  /* Otros */
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(9,47,86,.06),0 1px 3px rgba(9,47,86,.08);
  --shadow:0 4px 6px -1px rgba(9,47,86,.08),0 2px 4px -2px rgba(9,47,86,.06);
  --shadow-lg:0 12px 20px -6px rgba(9,47,86,.12),0 4px 8px -4px rgba(9,47,86,.08);
  --ring:0 0 0 3px var(--brand-100);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   2. RESET Y BASE
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-4);
  color:var(--ink);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  text-wrap:balance;
}
h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-2xl)}
h4{font-size:var(--fs-xl)}
h5{font-size:var(--fs-lg)}
h6{font-size:var(--fs-base);text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 var(--sp-4);text-wrap:pretty}
a{color:var(--brand-600);text-decoration-thickness:1px;text-underline-offset:.18em;
  transition:color .15s var(--ease)}
a:hover{color:var(--brand-800)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-600);outline-offset:2px;border-radius:2px}
img,svg,video{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.4em}
li{margin-bottom:var(--sp-2)}
li>ul,li>ol{margin-top:var(--sp-2)}
strong,b{font-weight:650;color:var(--ink)}
blockquote{
  margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);
  border-left:3px solid var(--brand-500);background:var(--bg-alt);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-lg)}
blockquote p:last-child{margin-bottom:0}
code{font-family:var(--font-mono);font-size:.88em;background:var(--line-soft);
  padding:.15em .4em;border-radius:4px;color:var(--brand-800)}
pre{background:var(--ink);color:#e6edf3;padding:var(--sp-4);border-radius:var(--radius);
  overflow-x:auto;margin:0 0 var(--sp-4)}
pre code{background:none;padding:0;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-7) 0}
table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-5);font-size:var(--fs-sm)}
th{background:var(--bg-alt);text-align:left;padding:var(--sp-3);font-weight:650;
  color:var(--ink);border-bottom:2px solid var(--line)}
td{padding:var(--sp-3);border-bottom:1px solid var(--line);vertical-align:top}
figure{margin:var(--sp-5) 0}
figcaption{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2);text-align:center}

/* ══════════════════════════════════════════════════════════════
   3. UTILIDADES Y ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════ */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-5)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sp-8)}
.section-lg{padding-block:var(--sp-9)}
.section-alt{background:var(--bg-alt)}
.text-center{text-align:center}
.mb-0{margin-bottom:0}

.screen-reader-text{
  position:absolute!important;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:-9999px;top:0;z-index:9999;
  background:var(--brand-900);color:#fff;padding:var(--sp-3) var(--sp-5);
  border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0;color:#fff}

/* ══════════════════════════════════════════════════════════════
   4. BOTONES
   ══════════════════════════════════════════════════════════════ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.8em 1.7em;border-radius:var(--radius-sm);border:2px solid transparent;
  font-size:var(--fs-base);font-weight:650;line-height:1.2;text-decoration:none;
  cursor:pointer;transition:all .18s var(--ease);white-space:nowrap}
.btn-primary{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.btn-primary:hover{background:var(--brand-800);border-color:var(--brand-800);
  color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--brand-700);border-color:var(--brand-300)}
.btn-outline:hover{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-800)}
.btn-light{background:#fff;color:var(--brand-800);border-color:#fff}
.btn-light:hover{background:var(--brand-50);color:var(--brand-900);transform:translateY(-1px)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.btn-lg{padding:.95em 2.1em;font-size:var(--fs-lg)}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* ══════════════════════════════════════════════════════════════
   5. CABECERA Y NAVEGACIÓN
   ══════════════════════════════════════════════════════════════ */

.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s var(--ease)}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);min-height:74px}

.site-brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0}
.site-brand img{max-height:44px;width:auto}
.site-brand-text{font-size:1.4rem;font-weight:800;color:var(--brand-900);
  letter-spacing:-.03em;line-height:1}
.site-brand-tag{display:block;font-size:.68rem;font-weight:600;color:var(--muted);
  letter-spacing:.04em;margin-top:2px}

.nav-toggle{display:none;background:none;border:0;padding:var(--sp-2);cursor:pointer;
  color:var(--ink);border-radius:var(--radius-sm)}
.nav-toggle svg{width:26px;height:26px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

.main-nav ul{display:flex;align-items:center;gap:var(--sp-1);list-style:none;margin:0;padding:0}
.main-nav li{margin:0;position:relative}
.main-nav a{
  display:block;padding:.6em .85em;color:var(--ink-soft);text-decoration:none;
  font-size:var(--fs-sm);font-weight:600;border-radius:var(--radius-sm);
  transition:all .15s var(--ease)}
.main-nav a:hover{color:var(--brand-700);background:var(--brand-50)}
.main-nav .current-menu-item>a,
.main-nav .current-menu-ancestor>a,
.main-nav .current_page_item>a{color:var(--brand-700);background:var(--brand-50)}

/* Submenú */
.main-nav .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--sp-2);
  flex-direction:column;align-items:stretch;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .18s var(--ease)}
.main-nav li:hover>.sub-menu,
.main-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav .sub-menu a{padding:.6em .8em;font-weight:550}
.menu-item-has-children>a::after{
  content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6}

.header-cta{flex-shrink:0}

@media (max-width:980px){
  .nav-toggle{display:block}
  .header-cta{display:none}
  .main-nav{
    position:fixed;inset:74px 0 0;background:#fff;padding:var(--sp-5);
    overflow-y:auto;transform:translateX(100%);transition:transform .25s var(--ease);
    border-top:1px solid var(--line)}
  .main-nav.is-open{transform:translateX(0)}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a{padding:.9em .6em;font-size:var(--fs-lg);border-bottom:1px solid var(--line-soft);
    border-radius:0}
  .main-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--brand-100);border-radius:0;
    margin:0 0 0 var(--sp-4);padding:0;min-width:0}
  .main-nav .sub-menu a{font-size:var(--fs-base);color:var(--muted)}
  .menu-item-has-children>a::after{float:right;margin-top:.5em}
}

/* ══════════════════════════════════════════════════════════════
   6. HERO
   ══════════════════════════════════════════════════════════════ */

.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(145deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand-600) 100%);
  padding-block:var(--sp-9)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%,rgba(15,169,169,.22),transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%,rgba(36,112,191,.28),transparent 60%)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 75%)}
.hero .wrap{position:relative;z-index:1}
.hero-inner{max-width:800px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent-100);background:rgba(15,169,169,.18);
  border:1px solid rgba(15,169,169,.35);
  padding:.45em 1em;border-radius:100px;margin-bottom:var(--sp-5)}
.hero h1{color:#fff;margin-bottom:var(--sp-5)}
.hero-lead{font-size:var(--fs-xl);color:rgba(255,255,255,.88);
  margin-bottom:var(--sp-6);max-width:62ch;line-height:1.55}
.hero .btn-group{margin-bottom:var(--sp-7)}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-7);
  padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.15)}
.hero-trust-item{display:flex;flex-direction:column;gap:2px}
.hero-trust-n{font-size:var(--fs-2xl);font-weight:800;color:#fff;line-height:1;
  letter-spacing:-.03em}
.hero-trust-l{font-size:var(--fs-sm);color:rgba(255,255,255,.72)}

/* ══════════════════════════════════════════════════════════════
   7. ENCABEZADO DE SECCIÓN
   ══════════════════════════════════════════════════════════════ */

.sec-head{max-width:720px;margin-bottom:var(--sp-7)}
.sec-head.is-center{margin-inline:auto;text-align:center}
.sec-eyebrow{
  display:block;font-size:var(--fs-sm);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-600);margin-bottom:var(--sp-3)}
.sec-head h2{margin-bottom:var(--sp-4)}
.sec-head p{font-size:var(--fs-lg);color:var(--muted);margin-bottom:0}

/* ══════════════════════════════════════════════════════════════
   8. GRILLAS Y TARJETAS
   ══════════════════════════════════════════════════════════════ */

.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6);transition:all .22s var(--ease);position:relative;
  display:flex;flex-direction:column}
.card:hover{border-color:var(--brand-300);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card-icon{
  width:52px;height:52px;border-radius:var(--radius);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  color:#fff;margin-bottom:var(--sp-4);flex-shrink:0}
.card-icon svg{width:26px;height:26px;stroke-width:1.8}
.card h3{font-size:var(--fs-xl);margin-bottom:var(--sp-3)}
.card p{color:var(--muted);margin-bottom:var(--sp-4)}
.card-link{
  margin-top:auto;font-weight:650;font-size:var(--fs-sm);text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--brand-600)}
.card-link::after{content:"→";transition:transform .18s var(--ease)}
.card:hover .card-link::after{transform:translateX(4px)}
.card-plain{border:0;background:var(--bg-alt);box-shadow:none}
.card-plain:hover{transform:none;box-shadow:none;border-color:transparent;background:var(--brand-50)}

/* Lista de features con check */
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{
  position:relative;padding-left:2rem;margin-bottom:var(--sp-3);color:var(--ink-soft)}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.45em;width:1.15rem;height:1.15rem;
  border-radius:50%;background:var(--accent-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230a8f8f'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.8 3.8 6.8-6.8a1 1 0 011.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size:80%;background-position:center;background-repeat:no-repeat}

/* ══════════════════════════════════════════════════════════════
   9. BANDA DE LOGOS / ERP
   ══════════════════════════════════════════════════════════════ */

.logo-band{padding-block:var(--sp-7);border-block:1px solid var(--line);background:var(--bg-alt)}
.logo-band-label{
  text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  letter-spacing:.04em;margin-bottom:var(--sp-5)}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--sp-4) var(--sp-6)}
.logo-row img{max-height:46px;width:auto;opacity:.62;filter:grayscale(1);
  transition:all .2s var(--ease)}
.logo-row img:hover{opacity:1;filter:grayscale(0)}
.erp-chip{
  padding:.5em 1.15em;border:1px solid var(--line);border-radius:100px;
  background:#fff;font-weight:650;font-size:var(--fs-sm);color:var(--ink-soft);
  transition:all .2s var(--ease)}
.erp-chip:hover{border-color:var(--brand-300);color:var(--brand-700);
  box-shadow:var(--shadow-sm);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════════
   10. PROCESO / PASOS
   ══════════════════════════════════════════════════════════════ */

.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:grid;
  gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{counter-increment:step;position:relative;padding-top:var(--sp-6)}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-size:var(--fs-2xl);font-weight:800;color:var(--brand-100);
  line-height:1;letter-spacing:-.04em}
.steps h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.steps p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:0}

/* ══════════════════════════════════════════════════════════════
   11. FAQ (details/summary nativo, accesible)
   ══════════════════════════════════════════════════════════════ */

.faq{max-width:var(--wrap-narrow);margin-inline:auto}
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--sp-3);
  background:#fff;overflow:hidden;transition:border-color .18s var(--ease)}
.faq details[open]{border-color:var(--brand-300);box-shadow:var(--shadow-sm)}
.faq summary{
  padding:var(--sp-4) var(--sp-5);cursor:pointer;font-weight:650;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);transition:background .15s var(--ease)}
.faq summary:hover{background:var(--bg-alt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex-shrink:0;width:.7em;height:.7em;
  border-right:2px solid var(--brand-600);border-bottom:2px solid var(--brand-600);
  transform:rotate(45deg) translateY(-25%);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.faq-body{padding:0 var(--sp-5) var(--sp-5);color:var(--muted)}
.faq-body p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════════════════════════
   12. CTA FINAL
   ══════════════════════════════════════════════════════════════ */

.cta-band{
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));
  color:#fff;border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-6);
  text-align:center;position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 80% 20%,rgba(15,169,169,.28),transparent 62%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.86);font-size:var(--fs-lg);
  max-width:52ch;margin:0 auto var(--sp-6)}
.cta-band .btn-group{justify-content:center}

/* ══════════════════════════════════════════════════════════════
   13. CONTENIDO DE PÁGINA / ENTRADA
   ══════════════════════════════════════════════════════════════ */

.page-hero{
  background:var(--bg-alt);border-bottom:1px solid var(--line);
  padding-block:var(--sp-8) var(--sp-7)}
.page-hero h1{margin-bottom:var(--sp-4)}
.page-hero .lead{font-size:var(--fs-xl);color:var(--muted);max-width:62ch;margin-bottom:0}

.breadcrumb{margin-bottom:var(--sp-5);font-size:var(--fs-sm);color:var(--muted)}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--sp-2)}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:var(--sp-2)}
.breadcrumb li+li::before{content:"/";color:var(--line);font-weight:600}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand-600);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink-soft);font-weight:600}

.entry-content{max-width:var(--wrap-narrow)}
.entry-content.is-wide{max-width:none}
.entry-content>h2{margin-top:var(--sp-7)}
.entry-content>h3{margin-top:var(--sp-6)}
.entry-content>h2:first-child,
.entry-content>h3:first-child{margin-top:0}
.entry-content img{border-radius:var(--radius);margin-block:var(--sp-5)}
.entry-content .alignwide{max-width:var(--wrap);margin-inline:auto}
.entry-content .alignfull{max-width:none}
.entry-content .aligncenter{margin-inline:auto}

.entry-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-5)}
.entry-meta time{display:inline-flex;align-items:center;gap:var(--sp-2)}

/* ══════════════════════════════════════════════════════════════
   14. LISTADO DE BLOG
   ══════════════════════════════════════════════════════════════ */

.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:all .22s var(--ease);height:100%}
.post-card:hover{border-color:var(--brand-300);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.post-card-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt)}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.post-card:hover .post-card-thumb img{transform:scale(1.04)}
.post-card-body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.post-card h2,.post-card h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3);line-height:1.35}
.post-card h2 a,.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--brand-600)}
.post-card p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-4)}
.post-card .entry-meta{margin-bottom:var(--sp-3);font-size:var(--fs-xs)}
.post-card .card-link{margin-top:auto}

.pagination{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-7);
  flex-wrap:wrap}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:44px;height:44px;padding-inline:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;
  color:var(--ink-soft);font-weight:600;transition:all .15s var(--ease)}
.pagination .page-numbers:hover{border-color:var(--brand-300);background:var(--brand-50);
  color:var(--brand-700)}
.pagination .current{background:var(--brand-600);border-color:var(--brand-600);color:#fff}

/* ══════════════════════════════════════════════════════════════
   15. FORMULARIO DE CONTACTO
   ══════════════════════════════════════════════════════════════ */

.contact-grid{display:grid;gap:var(--sp-7);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr}}

.form-field{margin-bottom:var(--sp-4)}
.form-field label{display:block;font-weight:650;font-size:var(--fs-sm);
  color:var(--ink);margin-bottom:var(--sp-2)}
.form-field .req{color:var(--err)}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:.75em .9em;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--fs-base);color:var(--ink);background:#fff;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}
.form-field textarea{min-height:150px;resize:vertical}
.form-hint{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
.form-note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-4)}

.contact-aside{background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:var(--sp-6)}
.contact-item{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5);align-items:flex-start}
.contact-item:last-child{margin-bottom:0}
.contact-item-icon{
  width:42px;height:42px;border-radius:var(--radius-sm);flex-shrink:0;
  display:grid;place-items:center;background:var(--brand-100);color:var(--brand-700)}
.contact-item-icon svg{width:20px;height:20px}
.contact-item-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.contact-item a{font-weight:650;text-decoration:none;font-size:var(--fs-lg)}

/* ══════════════════════════════════════════════════════════════
   16. PIE DE PÁGINA
   ══════════════════════════════════════════════════════════════ */

.site-footer{background:var(--brand-900);color:rgba(255,255,255,.72);
  padding-block:var(--sp-8) var(--sp-5);margin-top:var(--sp-9)}
.footer-grid{display:grid;gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:var(--sp-7)}
.footer-brand .site-brand-text{color:#fff}
.footer-brand p{margin-top:var(--sp-4);font-size:var(--fs-sm);max-width:34ch}
.site-footer h2,.site-footer h3{color:#fff;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--sp-3)}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--fs-sm);
  transition:color .15s var(--ease)}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-social{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.footer-social a{
  width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:all .18s var(--ease)}
.footer-social a:hover{background:var(--brand-500);transform:translateY(-2px)}
.footer-social svg{width:19px;height:19px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:var(--sp-5);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  align-items:center;font-size:var(--fs-xs)}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.footer-bottom li{margin:0}
/* Marca de versión: discreta, sin competir con el aviso legal. */
.footer-version{margin:0;font-size:.75rem;letter-spacing:.04em;
  color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums;
  flex-basis:100%;text-align:center}
@media(min-width:900px){.footer-version{flex-basis:auto;text-align:right}}
@media print{.footer-version{display:none}}

/* ══════════════════════════════════════════════════════════════
   17. 404 Y BÚSQUEDA
   ══════════════════════════════════════════════════════════════ */

.error-404{text-align:center;padding-block:var(--sp-9)}
.error-404 .code{font-size:clamp(5rem,15vw,9rem);font-weight:800;line-height:.9;
  color:var(--brand-100);letter-spacing:-.05em;margin-bottom:var(--sp-5)}
.search-form{display:flex;gap:var(--sp-2);max-width:440px;margin:var(--sp-5) auto 0}
.search-form input[type="search"]{
  flex:1;padding:.75em .9em;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:var(--fs-base)}
.search-form input[type="search"]:focus{outline:none;border-color:var(--brand-500);
  box-shadow:var(--ring)}

/* ══════════════════════════════════════════════════════════════
   18. IMPRESIÓN
   ══════════════════════════════════════════════════════════════ */

@media print{
  .site-header,.site-footer,.cta-band,.nav-toggle,.btn{display:none!important}
  body{color:#000;font-size:11pt}
  a{text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .hero{background:none;color:#000;padding-block:1rem}
  .hero h1{color:#000}
}

/* ══════════════════════════════════════════════════════════════
   19. PRODUCTO: ERP-PRIA
   ══════════════════════════════════════════════════════════════ */

/* Hero de producto */
.product-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--brand-900) 0%,var(--brand-800) 45%,#0d4f52 100%);
  padding-block:var(--sp-9) var(--sp-8)}
.product-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 88% 12%,rgba(15,169,169,.30),transparent 62%),
    radial-gradient(ellipse 45% 40% at 5% 95%,rgba(36,112,191,.30),transparent 62%)}
.product-hero .wrap{position:relative;z-index:1}
.product-badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(15,169,169,.25);border:1px solid rgba(15,169,169,.5);
  padding:.4em 1em;border-radius:100px;margin-bottom:var(--sp-5)}
.product-hero h1{color:#fff;margin-bottom:var(--sp-4)}
.product-hero .lead{font-size:var(--fs-xl);color:rgba(255,255,255,.9);
  max-width:60ch;margin-bottom:var(--sp-6);line-height:1.55}

/* Posicionamiento: tres columnas comparativas */
.position-grid{
  display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-block:var(--sp-6)}
.position-col{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-5);
  background:#fff}
.position-col.is-us{
  border:2px solid var(--brand-500);background:var(--brand-50);
  box-shadow:var(--shadow-lg);position:relative}
.position-col.is-us::after{
  content:"ERP-PRIA";position:absolute;top:-11px;left:var(--sp-5);
  background:var(--brand-600);color:#fff;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.08em;padding:.25em .8em;border-radius:100px}
.position-col h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.position-col p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.position-col p:last-child{margin-bottom:0}
.position-col .verdict{
  font-size:var(--fs-sm);font-weight:650;padding-top:var(--sp-3);
  border-top:1px solid var(--line);color:var(--ink)}
.position-col.is-us .verdict{border-top-color:var(--brand-300);color:var(--brand-800)}

/* Grilla de módulos */
.modules{
  display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.module{
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5);
  background:#fff;transition:all .2s var(--ease);display:flex;flex-direction:column;gap:var(--sp-3)}
.module:hover{border-color:var(--brand-300);box-shadow:var(--shadow);transform:translateY(-2px)}
.module-top{display:flex;align-items:center;gap:var(--sp-3)}
.module-ico{
  width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0;
  display:grid;place-items:center;background:var(--brand-100);color:var(--brand-700)}
.module-ico svg{width:20px;height:20px;stroke-width:1.9}
.module h3{font-size:var(--fs-base);margin:0;letter-spacing:-.01em}
.module p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.module.is-star{border-color:var(--accent-500);background:linear-gradient(180deg,var(--accent-100),#fff 55%)}
.module.is-star .module-ico{background:var(--accent-500);color:#fff}
.module-tag{
  align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-600);background:#fff;
  border:1px solid var(--accent-500);padding:.2em .6em;border-radius:100px}

/* Bloque destacado a dos columnas */
.split{
  display:grid;gap:var(--sp-7);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split-panel{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6)}
.split-panel h3{font-size:var(--fs-lg)}
.split-panel ul{margin-bottom:0}

/* Banda de producto en la portada */
.product-band{
  background:linear-gradient(135deg,var(--brand-900),#0d4f52);
  border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-6);color:#fff;
  position:relative;overflow:hidden}
.product-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 65% at 85% 25%,rgba(15,169,169,.3),transparent 60%)}
.product-band>*{position:relative;z-index:1}
.product-band h2{color:#fff}
.product-band p{color:rgba(255,255,255,.87)}
.product-band .module-pills{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-block:var(--sp-5)}
.product-band .module-pills span{
  font-size:var(--fs-sm);font-weight:600;padding:.4em 1em;border-radius:100px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}

/* Tabla comparativa de modalidades */
.modes{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-block:var(--sp-5)}
.mode{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--sp-6);
  background:#fff;display:flex;flex-direction:column}
.mode h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.mode .mode-sub{font-size:var(--fs-sm);color:var(--brand-600);font-weight:650;
  margin-bottom:var(--sp-4)}
.mode ul{margin-bottom:0}
.mode li{font-size:var(--fs-sm)}

/* ══════════════════════════════════════════════════════════════
   20. SISTEMA VISUAL: MARCOS, DIAGRAMAS Y TEXTURAS
   ══════════════════════════════════════════════════════════════ */

/* ── Marco de navegador para capturas de producto ────────────── */
.browser{
  border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid rgba(9,47,86,.14);
  box-shadow:0 24px 50px -18px rgba(9,47,86,.35),0 8px 18px -8px rgba(9,47,86,.2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.browser:hover{transform:translateY(-4px);
  box-shadow:0 32px 60px -20px rgba(9,47,86,.42),0 10px 22px -8px rgba(9,47,86,.24)}
.browser-bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:.6rem .85rem;background:#f1f4f8;border-bottom:1px solid var(--line)}
.browser-dots{display:flex;gap:6px;flex-shrink:0}
.browser-dots i{width:11px;height:11px;border-radius:50%;display:block}
.browser-dots i:nth-child(1){background:#ff5f57}
.browser-dots i:nth-child(2){background:#febc2e}
.browser-dots i:nth-child(3){background:#28c840}
.browser-url{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:.25rem .8rem;font-size:.74rem;color:var(--muted);
  font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-url::before{content:"🔒 ";font-size:.7em}
.browser img{width:100%;display:block}
.browser-caption{
  background:var(--bg-alt);border-top:1px solid var(--line);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--muted);margin:0}

/* Marco sobre fondo oscuro */
.hero .browser,.product-hero .browser{border-color:rgba(255,255,255,.18)}

/* ── Hero con producto a dos columnas ────────────────────────── */
.hero-split{display:grid;gap:var(--sp-7);align-items:center;
  grid-template-columns:1fr}
@media (min-width:1000px){
  .hero-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-8)}
}
.hero-visual{position:relative}
.hero-visual .browser{transform:perspective(1400px) rotateY(-7deg) rotateX(2deg)}
.hero-visual .browser:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}
@media (max-width:999px){
  .hero-visual .browser,.hero-visual .browser:hover{transform:none}
}
.hero-visual::after{
  content:"";position:absolute;inset:-8% -6% -12% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(15,169,169,.28),transparent 68%);
  filter:blur(30px)}

/* ── Galería de capturas ─────────────────────────────────────── */
.shots{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  margin-block:var(--sp-6)}
.shot-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;transition:all .25s var(--ease);display:flex;flex-direction:column}
.shot-card:hover{border-color:var(--brand-300);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.shot-card img{width:100%;display:block;border-bottom:1px solid var(--line)}
.shot-card-body{padding:var(--sp-4) var(--sp-5);flex:1}
.shot-card h3{font-size:var(--fs-base);margin-bottom:var(--sp-2)}
.shot-card p{font-size:var(--fs-sm);color:var(--muted);margin:0}

/* Figura de captura a ancho completo dentro del contenido */
.shot{margin:var(--sp-7) 0}
.shot img{width:100%;display:block}

/* ── Diagrama SVG de integración ─────────────────────────────── */
.diagram{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6);margin-block:var(--sp-6)}
.diagram svg{width:100%;height:auto;max-width:820px;margin-inline:auto;display:block}
.diagram-note{text-align:center;font-size:var(--fs-sm);color:var(--muted);
  margin:var(--sp-4) 0 0}

/* ── Banda de logos de clientes ──────────────────────────────── */
.clients{padding-block:var(--sp-7);background:#fff;border-block:1px solid var(--line)}
.clients-label{text-align:center;font-size:var(--fs-sm);font-weight:650;color:var(--muted);
  letter-spacing:.05em;margin-bottom:var(--sp-5)}
.clients-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--sp-5) var(--sp-8)}
.clients-row img{max-height:52px;width:auto;opacity:.55;filter:grayscale(1);
  transition:all .25s var(--ease)}
.clients-row img:hover{opacity:1;filter:grayscale(0);transform:scale(1.05)}
.client-slot{
  min-width:150px;height:56px;border:1px dashed var(--line);border-radius:var(--radius-sm);
  display:grid;place-items:center;color:#b6c0cd;font-size:var(--fs-xs);
  font-weight:650;letter-spacing:.06em;text-transform:uppercase}

/* ── Métricas destacadas ─────────────────────────────────────── */
.metrics{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-block:var(--sp-6)}
.metric{
  padding:var(--sp-5);border-radius:var(--radius-lg);background:var(--bg-alt);
  border:1px solid var(--line);text-align:center}
.metric-n{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--brand-700);margin-bottom:var(--sp-2)}
.metric-l{font-size:var(--fs-sm);color:var(--muted);margin:0}

/* ── Texturas decorativas ────────────────────────────────────── */
.section-dots{position:relative;overflow:hidden}
.section-dots::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,var(--brand-100) 1.2px,transparent 1.2px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000,transparent 65%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 65%)}
.section-dots>*{position:relative;z-index:1}

/* Cinta diagonal de acento */
.accent-rule{
  height:5px;border:0;margin:0;
  background:linear-gradient(90deg,var(--brand-600),var(--accent-500),var(--brand-600))}

/* ══════════════════════════════════════════════════════════════
   21. LOGOTIPO TIPOGRÁFICO
   Mientras no exista isotipo, la marca es la palabra PRIA.
   Al subir un logo en Personalizar ▸ Identidad del sitio,
   el tema lo usa automáticamente en lugar de este texto.
   ══════════════════════════════════════════════════════════════ */

.pria-wordmark{
  display:inline-block;
  font-size:2.3rem;
  font-weight:900;
  letter-spacing:-.05em;
  line-height:1;
  color:var(--brand-800);
  transition:color .15s var(--ease)}
.site-brand:hover .pria-wordmark{color:var(--brand-600)}
.pria-wordmark--light{color:#fff;font-size:2rem}
.pria-logo-img{max-height:46px;width:auto}
@media (max-width:600px){
  .pria-wordmark{font-size:1.95rem}
}

.footer-legal{
  font-size:var(--fs-xs)!important;
  color:rgba(255,255,255,.45)!important;
  margin-top:var(--sp-3)!important;
  letter-spacing:.03em}

/* El pie usa el logotipo en blanco; el resto del bloque no cambia */
.footer-brand .pria-wordmark{margin-bottom:var(--sp-2)}


/* ══════════════════════════════════════════════════════════════
   22. CARRUSEL DE CLIENTES
   Marquesina infinita en CSS puro: sin JavaScript ni librerías.
   El truco es duplicar la lista y desplazar exactamente la mitad,
   así el punto de reinicio coincide con el inicio y no se nota.
   ══════════════════════════════════════════════════════════════ */

.clients-marquee{
  overflow:hidden;
  position:relative;
  /* Difumina los bordes para que las entradas y salidas sean suaves */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

.clients-track{
  display:flex;
  align-items:center;
  gap:var(--sp-9);
  width:max-content;
  animation:pria-marquee 34s linear infinite}

/* Se detiene al pasar el cursor, por si alguien quiere mirar un logo */
.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track{animation-play-state:paused}

.clients-track img{
  max-height:52px;
  width:auto;
  flex-shrink:0;
  opacity:.55;
  filter:grayscale(1);
  transition:opacity .25s var(--ease),filter .25s var(--ease)}
.clients-track img:hover{opacity:1;filter:grayscale(0)}

@keyframes pria-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Sin movimiento para quien lo prefiera: vuelve a fila estática centrada */
@media (prefers-reduced-motion:reduce){
  .clients-marquee{-webkit-mask-image:none;mask-image:none}
  .clients-track{
    animation:none;
    width:auto;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--sp-5) var(--sp-7)}
}

/* En pantallas chicas el ciclo va algo más rápido */
@media (max-width:700px){
  .clients-track{gap:var(--sp-7);animation-duration:24s}
  .clients-track img{max-height:42px}
}

/* ══════════════════════════════════════════════════════════════
   23. LOGOS DE CLIENTES A TODO COLOR
   Sustituye el tratamiento en escala de grises de la sección 22.
   ══════════════════════════════════════════════════════════════ */

.clients-track img{
  filter:none;
  opacity:.9;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.clients-track img:hover{opacity:1;transform:scale(1.04)}

/* ══════════════════════════════════════════════════════════════
   24. TESTIMONIOS
   ══════════════════════════════════════════════════════════════ */

.testimonios{display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.testimonio{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);
  position:relative;transition:all .22s var(--ease)}
.testimonio:hover{border-color:var(--brand-300);box-shadow:var(--shadow-lg)}
.testimonio::before{
  content:"";position:absolute;top:var(--sp-5);right:var(--sp-5);
  width:34px;height:26px;opacity:.13;
  background:var(--brand-600);
  /* Comillas tipográficas dibujadas con máscara, sin cargar imagen */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V13C0 5.8 5.8 0 13 0v5.2A7.8 7.8 0 005.2 13H13v13zm21 0V13C21 5.8 26.8 0 34 0v5.2A7.8 7.8 0 0026.2 13H34v13z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 26V13C0 5.8 5.8 0 13 0v5.2A7.8 7.8 0 005.2 13H13v13zm21 0V13C21 5.8 26.8 0 34 0v5.2A7.8 7.8 0 0026.2 13H34v13z'/%3E%3C/svg%3E") no-repeat center/contain}
.testimonio-cita{font-size:var(--fs-lg);line-height:1.6;color:var(--ink);margin:0;
  padding-right:var(--sp-6)}
.testimonio-pie{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.testimonio-nombre{font-weight:700;color:var(--ink);display:block}
.testimonio-cargo{font-size:var(--fs-sm);color:var(--muted);display:block;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
   25. CASOS DE ESTUDIO
   ══════════════════════════════════════════════════════════════ */

.caso-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.caso-tag{
  display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.35em .9em;border-radius:100px;
  background:var(--brand-100);color:var(--brand-800);margin-bottom:var(--sp-3)}
.caso-tag--alt{background:var(--accent-100);color:var(--accent-600)}
.caso-cliente{font-size:var(--fs-base);color:var(--muted);margin-top:var(--sp-4);margin-bottom:0}
.caso-metricas{list-style:none;padding:0;margin:0 0 var(--sp-4)}
.caso-metricas li{
  position:relative;padding-left:1.5rem;font-size:var(--fs-sm);
  color:var(--ink);font-weight:600;margin-bottom:var(--sp-2)}
.caso-metricas li::before{
  content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  border-radius:2px;background:var(--accent-500)}
.caso-card .post-card-body{gap:0}

/* ══════════════════════════════════════════════════════════════
   26. BOTÓN FLOTANTE DE WHATSAPP
   ══════════════════════════════════════════════════════════════ */

.wa-flotante{
  position:fixed;right:20px;bottom:20px;z-index:200;
  display:inline-flex;align-items:center;gap:0;
  height:56px;padding:0 16px;border-radius:100px;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 18px -4px rgba(37,211,102,.5),0 2px 8px rgba(9,47,86,.18);
  transition:all .25s var(--ease);overflow:hidden;white-space:nowrap}
.wa-flotante:hover,.wa-flotante:focus-visible{
  color:#fff;background:#1EBE5A;transform:translateY(-2px);
  box-shadow:0 10px 24px -4px rgba(37,211,102,.55),0 3px 10px rgba(9,47,86,.2)}
.wa-flotante svg{width:28px;height:28px;flex-shrink:0}
.wa-flotante span{
  max-width:0;opacity:0;font-weight:650;font-size:var(--fs-sm);
  transition:max-width .3s var(--ease),opacity .2s var(--ease),margin .3s var(--ease)}
.wa-flotante:hover span,.wa-flotante:focus-visible span{
  max-width:180px;opacity:1;margin-left:10px}

@media (max-width:600px){
  .wa-flotante{right:14px;bottom:14px;height:52px;padding:0 12px}
  .wa-flotante svg{width:26px;height:26px}
  /* En móvil no se despliega: el hover no existe y ocuparía media pantalla */
  .wa-flotante span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wa-flotante,.wa-flotante span{transition:none}
}

/* Que no tape el pie en pantallas muy bajas */
@media (max-height:520px){
  .wa-flotante{position:absolute;bottom:auto;top:0}
}

/* ══════════════════════════════════════════════════════════════
   27. RITMO VISUAL, ACENTO Y PREGUNTAS
   Tres cambios de criterio, no de decoración:

   a) --bg-alt era #f7f9fc: tan claro que en pantalla no se
      distinguía del blanco, así que el sitio se leía como una
      sola superficie continua. Ahora contrasta de verdad.
   b) .section-deep permite intercalar una banda oscura completa
      en mitad del recorrido y cortar los tramos largos de claro.
   c) El teal pasa a ser el color de "esto es accionable":
      eyebrows, flechas de tarjeta y CTA intermedios. Se usa
      --accent-700 y no --accent-500 porque el 500 sobre blanco
      queda en 3.9:1 y no cumple AA para texto pequeño.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg-alt:#eaf0f7;      /* antes #f7f9fc */
  --bg-tint:#f4f8fc;     /* escalón intermedio entre blanco y bg-alt */
  --accent-700:#076f6f;  /* teal accesible sobre blanco: 5.9:1 */
}

.section-tint{background:var(--bg-tint)}

/* — Banda oscura de sección completa — */
.section-deep{
  background:linear-gradient(160deg,var(--brand-900) 0%,var(--brand-800) 58%,#0a3d4a 100%);
  color:rgba(255,255,255,.86);position:relative;overflow:hidden}
.section-deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 88% 10%,rgba(15,169,169,.26),transparent 62%)}
.section-deep>*{position:relative;z-index:1}
.section-deep h1,.section-deep h2,.section-deep h3,.section-deep h4{color:#fff}
.section-deep p,.section-deep .sec-head p{color:rgba(255,255,255,.8)}
.section-deep .sec-eyebrow{color:var(--accent-500)}
.section-deep .feature-list li{color:rgba(255,255,255,.86)}
.section-deep .feature-list li::before{background-color:rgba(15,169,169,.3)}
.section-deep .card,
.section-deep .card-plain{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  box-shadow:none}
.section-deep .card:hover,
.section-deep .card-plain:hover{
  background:rgba(255,255,255,.1);border-color:rgba(15,169,169,.5);
  transform:none;box-shadow:none}
.section-deep .card p{color:rgba(255,255,255,.78)}
.section-deep .card-link{color:var(--accent-500)}

/* — El teal como señal de acción — */
.sec-eyebrow{color:var(--accent-700)}
.card-link{color:var(--accent-700)}
.card-link:hover{color:var(--accent-600)}
.btn-accent{background:var(--accent-700);color:#fff;border-color:var(--accent-700)}
.btn-accent:hover,.btn-accent:focus-visible{
  background:var(--accent-600);border-color:var(--accent-600);color:#fff;
  transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(10,143,143,.5)}

/* — Punto de contacto intermedio —
   Va después de una sección donde el visitante se reconoció en el
   problema, no al final de la página. La pregunta arriba, la
   respuesta corta abajo, el botón al lado. */
.cta-inline{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-4) var(--sp-6);
  background:linear-gradient(100deg,var(--brand-50),#fff 72%);
  border:1px solid var(--brand-100);border-left:4px solid var(--accent-700);
  border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6);
  margin-top:var(--sp-7)}
.cta-inline-txt{flex:1 1 360px}
.cta-inline p{margin:0}
.cta-inline-q{
  font-size:var(--fs-xl);font-weight:700;color:var(--ink);line-height:1.32;
  letter-spacing:-.01em;margin-bottom:var(--sp-2)!important}
.cta-inline-a{color:var(--muted)}
.cta-inline .btn{flex-shrink:0}

.section-deep .cta-inline{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  border-left-color:var(--accent-500)}
.section-deep .cta-inline-q{color:#fff}
.section-deep .cta-inline-a{color:rgba(255,255,255,.78)}

/* — La franja de clientes deja de ser blanca sobre blanco — */
.clients{background:var(--bg-tint)}

/* — Testimonios sobre fondo tintado — */
.section-tint .testimonio,
.section-tint .card{background:#fff}

@media (max-width:700px){
  .cta-inline{flex-direction:column;align-items:flex-start;text-align:left}
  .cta-inline .btn{width:100%}
}

/* — Titular del hero —
   Los titulares en formato pregunta son más largos que una frase
   declarativa. A 60px la pregunta ocupaba cinco líneas y perdía
   fuerza, así que el hero baja un escalón de tamaño. El resto de
   los H1 del sitio conserva --fs-4xl. */
.hero h1{
  font-size:clamp(2rem,1.45rem + 2.1vw,3.15rem);
  max-width:16ch}
@media (max-width:900px){
  .hero h1{max-width:none}
}

/* La pregunta de sección tampoco necesita el tamaño máximo */
.sec-head h2{max-width:24ch}
.sec-head.is-center h2{margin-inline:auto}

/* Con el titular en pregunta, la columna de texto necesita algo más
   de ancho para que los dos botones quepan en una línea. */
@media (min-width:900px){
  .hero-split{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   28. AVISO DE CONSENTIMIENTO DE COOKIES
   Cuadro discreto abajo a la izquierda, no una cortina que tape
   el sitio. Los dos botones tienen el mismo peso visual: hacer
   que rechazar cueste más que aceptar es un patrón oscuro, y bajo
   la Ley 21.719 el consentimiento tiene que ser libre.
   ══════════════════════════════════════════════════════════════ */

.pria-cookies{
  position:fixed;left:20px;bottom:20px;z-index:210;
  width:min(420px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 40px -12px rgba(9,47,86,.28),0 4px 12px rgba(9,47,86,.1);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  opacity:0;transform:translateY(12px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.pria-cookies.is-visible{opacity:1;transform:translateY(0)}
.pria-cookies[hidden]{display:none}

.pria-cookies-t{
  font-size:var(--fs-lg);font-weight:700;color:var(--ink);
  line-height:1.3;margin:0 0 var(--sp-2);letter-spacing:-.01em}
.pria-cookies-d{
  font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--sp-4);line-height:1.55}
.pria-cookies-d a{color:var(--accent-700);font-weight:600}

.pria-cookies-btns{display:flex;gap:var(--sp-3)}
.pria-cookies-btns .btn{
  flex:1 1 0;padding:.7em 1em;font-size:var(--fs-sm);white-space:nowrap}

/* El botón flotante de WhatsApp está abajo a la derecha, así que
   en escritorio no se estorban. En móvil sí: el aviso pasa a ocupar
   el ancho y se levanta por encima del botón mientras está visible. */
@media (max-width:600px){
  .pria-cookies{
    left:12px;right:12px;bottom:12px;width:auto;
    padding:var(--sp-4)}
  .pria-cookies-btns{flex-direction:column-reverse}
  .pria-cookies.is-visible ~ .wa-flotante{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .pria-cookies{transition:none}
}

/* Enlace del pie para volver a abrirlo */
.pria-abrir-cookies{cursor:pointer}