/* =====================================================================
   Teramelcor — estilos compartidos (chrome del sitio)
   Tokens + base + header (FSM scroll, 3 zonas centrado) + breadcrumbs
   + footer + chat (burbuja/panel/typing) + fondo de red animado.
   Las páginas enlazan este archivo y añaden solo su CSS específico.
   ===================================================================== */
/* Inter auto-alojada (self-host) — sin Google Fonts (RGPD: la IP del visitante no viaja a Google).
   Fichero variable (pesos 100–900), subconjunto latino, servido desde el propio dominio. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/wp-content/uploads/teramelcor/fonts/inter-var-latin.woff2') format('woff2');
}
:root{
  --tm-primary:#b7352c; --tm-primary-dark:#8f241e; --tm-primary-light:#f8e9e7;
  --tm-accent:#d9a441; --tm-text:#171717; --tm-muted:#4b5563;
  --tm-bg:#f7f7f7; --tm-card:#fff; --tm-border:rgba(23,23,23,.1);
  --tm-error:#b42318; --tm-success:#067647;
  --tm-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 28px rgba(16,24,40,.08);
  --tm-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --tm-head-h:74px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--tm-font);color:var(--tm-text);background:var(--tm-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.tm-container{max-width:1180px;margin:0 auto;padding:0 24px}
.tm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== Accesibilidad ===== */
.tm-skip{position:fixed;top:8px;left:8px;z-index:2000;background:var(--tm-primary);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;transform:translateY(-160%);transition:transform .2s}
.tm-skip:focus{transform:translateY(0)}
/* Foco visible y consistente para teclado (oro corporativo, visible sobre claro y rojo) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tm-accent);outline-offset:2px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
[id]{scroll-margin-top:calc(var(--tm-head-h) + 12px)}   /* anclas no quedan bajo el header fijo */

/* ============ HEADER (3 zonas: logo · nav centrada · CTA) ============ */
.tm-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--tm-head-h);
  display:flex;align-items:center;
  transition:background-color .35s ease,backdrop-filter .35s ease,transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent}
.tm-header .tm-container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;gap:12px}
.tm-logo{position:relative;height:40px;width:200px;flex:none;justify-self:start}
.tm-logo img{position:absolute;left:0;top:0;height:40px;width:auto;transition:opacity .35s ease}
.tm-logo .lg-red{opacity:1}.tm-logo .lg-white{opacity:0}
.tm-nav{display:flex;align-items:center;gap:28px;justify-self:center}     /* nav centrada en la página */
.tm-nav a{font-weight:600;font-size:15px;color:var(--tm-primary);transition:color .35s ease,opacity .2s;position:relative}
.tm-nav a:hover{opacity:.7}
.tm-cta-zone{justify-self:end}
.tm-cta{padding:10px 20px;border-radius:10px;font-weight:700;font-size:14.5px;transition:all .3s ease;
  display:inline-block;background:var(--tm-primary);color:#fff;border:2px solid var(--tm-primary)}
.tm-cta:hover{background:var(--tm-primary-dark);border-color:var(--tm-primary-dark);opacity:1}
/* En desktop el CTA vive solo en .tm-cta-zone (derecha); el de dentro del nav es solo para el menú móvil */
.tm-nav .tm-cta{display:none}
.tm-burger{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;justify-self:end}
.tm-burger span{position:absolute;left:0;width:100%;height:3px;border-radius:3px;background:var(--tm-primary);transition:.3s}
.tm-burger span:nth-child(1){top:0}.tm-burger span:nth-child(2){top:9px}.tm-burger span:nth-child(3){top:18px}

/* Estado A — TOP (glass) */
.tm-header.is-top{background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.5)}
/* Estado B — SOLID (rojo) */
.tm-header.is-solid,.tm-header.is-hidden{background:var(--tm-primary);box-shadow:var(--tm-shadow)}
.tm-header.is-solid .tm-nav a,.tm-header.is-hidden .tm-nav a{color:#fff}
.tm-header.is-solid .tm-burger span,.tm-header.is-hidden .tm-burger span{background:#fff}
.tm-header.is-solid .lg-red,.tm-header.is-hidden .lg-red{opacity:0}
.tm-header.is-solid .lg-white,.tm-header.is-hidden .lg-white{opacity:1}
.tm-header.is-solid .tm-cta,.tm-header.is-hidden .tm-cta{background:#fff;color:var(--tm-primary);border-color:#fff}
.tm-header.is-solid .tm-cta:hover,.tm-header.is-hidden .tm-cta:hover{background:var(--tm-primary-light)}
/* Estado C — HIDDEN */
.tm-header.is-hidden{transform:translateY(-100%)}

/* ============ BOTONES ============ */
.tm-btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:12px;font-weight:700;font-size:16px;
  cursor:pointer;border:2px solid transparent;transition:all .25s cubic-bezier(.2,.7,.3,1)}
.tm-btn-primary{background:var(--tm-primary);color:#fff;border-color:var(--tm-primary)}
.tm-btn-primary:hover{background:var(--tm-primary-dark);transform:translateY(-3px);box-shadow:0 12px 26px rgba(143,36,30,.35)}
.tm-btn-ghost{background:#fff;color:var(--tm-primary);border-color:#e4d4d2}
.tm-btn-ghost:hover{border-color:var(--tm-primary);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.22)}

/* ============ SECCIONES (utilidades compartidas) ============ */
.tm-section{padding:88px 0}
.tm-section h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin-bottom:14px;text-align:center}
.tm-section .lead{text-align:center;color:var(--tm-muted);font-size:17px;max-width:780px;margin:0 auto 52px}
.tm-alt{background:#fff;border-top:1px solid var(--tm-border);border-bottom:1px solid var(--tm-border)}
.tm-band{background:linear-gradient(120deg,var(--tm-primary),var(--tm-primary-dark));color:#fff;text-align:center}
.tm-band h2{color:#fff}.tm-band p{color:rgba(255,255,255,.9);text-align:center;font-size:17px;max-width:640px;margin:0 auto 28px}
.tm-band .tm-btn-ghost{background:#fff;color:var(--tm-primary);border-color:#fff}

/* ============ BREADCRUMBS (solo páginas interiores) ============ */
.tm-crumbs{padding:calc(var(--tm-head-h) + 26px) 0 0}
.tm-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--tm-muted)}
.tm-crumbs a{color:var(--tm-muted)}
.tm-crumbs a:hover{color:var(--tm-primary)}
.tm-crumbs li+li::before{content:"›";margin-right:8px;color:var(--tm-border);color:#c8c8cf}
.tm-crumbs [aria-current="page"]{color:var(--tm-text);font-weight:600}

/* ============ PROSA / CONTENIDO (páginas interiores y legales) ============ */
.tm-prose{max-width:820px;margin:0 auto}
/* Medida de lectura (≈75 cpl) SOLO en el texto de prosa (hijos directos), sin estrechar el
   contenedor: así las tarjetas, tablas y grids dentro de .tm-prose conservan su ancho. */
.tm-prose>p,.tm-prose>ul,.tm-prose>ol{max-width:680px}
.tm-section .lead{max-width:680px}
.tm-prose h2{font-size:clamp(23px,2.8vw,30px);letter-spacing:-.01em;margin:0 0 14px;text-align:left}
.tm-prose h3{font-size:18px;margin:22px 0 6px;color:var(--tm-primary-dark)}
.tm-prose p{color:#3f3f3f;margin-bottom:14px}
.tm-prose ul,.tm-prose ol{margin:0 0 16px 0;padding-left:20px;color:#3f3f3f}
.tm-prose li{margin-bottom:7px}
/* :not(.tm-btn) para no pisar el color de los botones (si no, texto rojo sobre botón rojo = invisible) */
.tm-prose a:not(.tm-btn){color:var(--tm-primary);font-weight:600}
.tm-prose a:not(.tm-btn):hover{text-decoration:underline}
.tm-block{padding:54px 0;border-bottom:1px solid var(--tm-border)}
.tm-block:nth-child(even){background:#fff}
.tm-callout{background:var(--tm-primary-light);border:1px solid #eccfca;border-radius:14px;padding:18px 20px;margin:18px 0;color:var(--tm-primary-dark);font-size:14px}
/* Cabecera de página interior con breadcrumb propio (legales) */
.tm-page-head{padding:calc(var(--tm-head-h) + 26px) 0 8px}
.tm-page-head .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--tm-muted);margin-bottom:16px}
.tm-page-head .crumbs a{color:var(--tm-muted)}.tm-page-head .crumbs a:hover{color:var(--tm-primary)}
.tm-page-head .crumbs li+li::before{content:"›";margin-right:8px;color:#c8c8cf}
.tm-page-head .crumbs [aria-current="page"]{color:var(--tm-text);font-weight:600}
.tm-page-head h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:6px 0 10px}
.tm-page-head .updated{color:var(--tm-muted);font-size:13.5px}
/* Aviso de borrador legal */
.tm-legal-banner{background:#fff8e6;border:1px solid #e7cf8a;color:#7a5a06;border-radius:12px;padding:12px 16px;margin:16px auto 0;max-width:820px;font-size:13.5px}
/* FAQ / acordeón accesible */
details.tm-faq{background:#fff;border:1px solid var(--tm-border);border-radius:12px;margin-bottom:10px;overflow:hidden}
details.tm-faq summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
details.tm-faq summary::-webkit-details-marker{display:none}
details.tm-faq summary::after{content:"+";color:var(--tm-primary);font-size:22px;font-weight:700;line-height:1}
details.tm-faq[open] summary::after{content:"–"}
details.tm-faq .faq-body{padding:0 18px 16px;color:#3f3f3f;font-size:15px}

/* ============ FOOTER ============ */
.tm-footer{background:#1c1c1f;color:#cfcfd4;padding:56px 0 28px;font-size:14.5px}
.tm-footer-grid{display:grid;grid-template-columns:2fr 1fr 1.45fr;gap:36px;margin-bottom:36px}
.tm-footer h5{color:#fff;font-size:15px;margin-bottom:14px}
.tm-footer a{display:block;color:#cfcfd4;margin-bottom:8px}.tm-footer a:hover{color:#fff}
.tm-footer .legal{border-top:1px solid #34343a;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8a8a92;font-size:13px}
.tm-foot-logo{height:34px;margin-bottom:14px}


/* ============ FONDO DE RED ANIMADO ============ */
.tm-network-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.72;overflow:hidden}
.tm-network-bg canvas{display:block;width:100%;height:100%;filter:blur(.8px)}
.tm-network-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.30),transparent 42%),
    linear-gradient(90deg,rgba(255,255,255,.35),transparent 28%,transparent 72%,rgba(255,255,255,.38)),
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  pointer-events:none}

/* ============ RESPONSIVE ============ */
@media(max-width:880px){
  .tm-header .tm-container{grid-template-columns:auto 1fr;gap:0}
  /* Menú desplegable: ancho COMPLETO, justo debajo del header, texto centrado.
     Se despliega hacia abajo con max-height (clip) → nunca pasa por encima del header. */
  .tm-nav{position:fixed;top:var(--tm-head-h);left:0;right:0;width:100%;
    background:var(--tm-primary);flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .35s ease,opacity .25s ease;box-shadow:0 12px 28px rgba(16,24,40,.22)}
  .tm-nav.open{max-height:80vh;opacity:1;padding-bottom:18px}
  .tm-nav a{color:#fff!important;padding:15px 24px;width:100%;text-align:center;font-size:16px}
  .tm-cta-zone{display:none}                 /* en móvil el CTA va dentro del nav desplegable */
  /* color !important para ganar a `.tm-nav a{color:#fff!important}` (si no, texto blanco sobre botón blanco) */
  .tm-nav .tm-cta{display:inline-block;width:auto;margin:12px auto 2px;text-align:center;
    background:#fff;color:var(--tm-primary)!important;border-color:#fff;padding:12px 26px}
  .tm-nav .tm-cta:hover{background:var(--tm-primary-light)}
  .tm-burger{display:block}
  .tm-footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .tm-network-bg canvas{display:none}        /* sin animación: queda el degradado de la sección */
  .tm-c::after{display:none}                 /* sin resplandor de cursor */
}

/* ===== Resplandor sutil que sigue al cursor en las tarjetas (.tm-c) =====
   Solo en escritorio con ratón; es decorativo (pointer-events:none, no captura clics)
   y se anula con prefers-reduced-motion. La posición la fija site.js con --mx/--my. */
@media (hover:hover) and (pointer:fine){
  .tm-c{position:relative}
  .tm-c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(183,53,44,.10),rgba(183,53,44,0) 60%);
    opacity:0;transition:opacity .3s ease}
  .tm-c:hover::after{opacity:1}
  .tm-c>*{position:relative;z-index:1}
}

/* ====== Overrides para WordPress/Elementor (chrome dentro de widget HTML) ======
   Los PNG de logo son grandes (~2285px) y Elementor aplica reglas a las <img> de
   sus widgets; forzamos el tamaño correcto del logo del header y del pie. */
.tm-header .tm-logo{height:40px;width:200px}
.tm-header .tm-logo img{height:40px!important;width:auto!important;max-width:none!important}
.tm-footer .tm-foot-logo{height:34px!important;width:auto!important;max-width:none!important}
/* Fila legal alineada con las columnas del grid: «Aviso legal…» queda bajo la columna Contacto.
   Solo en desktop (≥881px); en móvil mantiene el flex-wrap natural de .legal (no rejilla rígida). */
@media(min-width:881px){
  .tm-footer .legal{display:grid;grid-template-columns:2fr 1fr 1.45fr;gap:36px;align-items:baseline}
  .tm-footer .legal>span:first-child{grid-column:1 / 3}
  .tm-footer .legal>span:last-child{grid-column:3;justify-self:start}
}
/* Hello Elementor fija los <h*> en 500; el diseño usa el bold por defecto (700) */
.tm-hero h1,.tm-pvpc-hero h1,.tm-section h2,.tm-band h2,.tm-c h3,.tm-step h4,.tm-prose h1,.tm-prose h2,.tm-prose h3,.tm-page-head h1,.tm-footer h5{font-weight:700}
/* Párrafos del hero un punto más pequeños (gana sobre el <style> de la página por especificidad) */
.tm-hero .tm-hero-inner p{font-size:18px;color:#2b2b2b}
/* Hello Elementor/Elementor aplican un color de enlace (azul) en a:hover que, por especificidad,
   pisa el texto de los botones (su color va en la regla base, sin :hover) → en WP el texto se volvía
   azul al pasar el ratón. Fijamos el color del texto de cada botón en hover/focus, por estado. */
.tm-btn-primary:hover,.tm-btn-primary:focus{color:#fff!important}
.tm-btn-ghost:hover,.tm-btn-ghost:focus,
.tm-band .tm-btn-ghost:hover,.tm-band .tm-btn-ghost:focus{color:var(--tm-primary)!important}
.tm-cta:hover,.tm-cta:focus{color:#fff!important}
.tm-header.is-solid .tm-cta:hover,.tm-header.is-solid .tm-cta:focus,
.tm-header.is-hidden .tm-cta:hover,.tm-header.is-hidden .tm-cta:focus{color:var(--tm-primary)!important}