/*
Theme Name: La Fabrica de Tarjetas PVC
Theme URI: https://lafabricadetarjetaspvc.com/
Author: Meridiano
Description: Tema a medida de La Fábrica de Tarjetas PVC.
Version: 1.43.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: lfp
*/

/* ==========================================================================
   1. Fuentes (self-hosted; el diseno usaba Google Fonts, fuera por RGPD)
   ========================================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/poppins-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/poppins-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/poppins-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/poppins-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/poppins-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/poppins-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   2. Tokens y reset (el <style> compartido de las 43 paginas del diseno)
   ========================================================================== */
:root{
  --ink:#0B1B2B;          /* tinta / fondos oscuros */
  --blue:#12A5E8;         /* azul de marca */
  --blue-dark:#0E8FCB;    /* hover del azul */
  --blue-light:#4FC3F7;   /* acentos sobre oscuro */
  --blue-pale:#8FD8FA;
  --link:#0E86C7;
  --link-hover:#0A6CA1;
  --band:#F4F8FB;         /* banda clara de seccion */
  --line:#E2EAF1;         /* borde de tarjeta */
  --line-nav:#E7EEF4;
  --text:#4A657E;         /* cuerpo */
  --text-soft:#7A93A9;
  --text-dim:#5E7A93;
  --nav-link:#33506B;
  --on-dark:#C4D3E0;
  --on-dark-dim:#9FB4C8;
  --on-dark-faint:#8FA6BA;
  --sep:#3A5670;
  --foot:#081422;
  --foot-line:#16283C;
  --ghost-line:#C9DAE7;
  --wrap:1264px;
  --gutter:32px;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;font-family:'Poppins',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
img{max-width:100%}
details summary::-webkit-details-marker{display:none}

.lfp-skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:9999}
.lfp-skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

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

/* Contenedor comun */
.lfp-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%}
.lfp-wrap--wide{max-width:1328px}   /* la Home del diseno usa 1328px */

/* ==========================================================================
   3. Barra superior
   ========================================================================== */
.lfp-topbar{position:fixed;top:0;left:0;right:0;z-index:51;background:var(--ink);color:var(--on-dark);font-size:12.5px;font-weight:600;padding:8px var(--gutter);white-space:nowrap}
.lfp-topbar__inner{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px}
.lfp-topbar__hi{color:#fff;font-weight:700;white-space:nowrap}
.lfp-topbar__sep{color:var(--sep)}
.lfp-topbar__accent{color:var(--blue-light);font-weight:700}
.lfp-topbar__accent:hover{color:#fff}

/* ==========================================================================
   4. Navegacion
   ========================================================================== */
.lfp-nav{padding:12px var(--gutter);border-bottom:1px solid var(--line-nav);background:#fff;position:fixed;top:34px;left:0;right:0;z-index:50;transition:background .25s,box-shadow .25s}
.lfp-nav__inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center}
.lfp-nav--glass{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 8px 30px rgba(11,27,43,.08)}
.lfp-nav__brand{display:flex;align-items:center;gap:10px}
.lfp-nav__logo{width:84px;height:84px;object-fit:contain;display:block}
.lfp-nav__logotext{line-height:1.05}
.lfp-nav__logotext b{display:block;font-weight:800;font-size:16px;color:var(--ink)}
.lfp-nav__logotext span{display:block;font-size:9.5px;letter-spacing:2px;color:var(--text-dim);font-weight:600}
.lfp-nav__links{display:flex;gap:22px;font-size:14.5px;font-weight:600;white-space:nowrap;margin-left:auto;margin-right:26px}
.lfp-nav__link{color:var(--nav-link)}
.lfp-nav__link:hover{color:var(--blue)}
.lfp-nav__link.is-active{color:var(--blue)}
.lfp-nav__actions{display:flex;gap:14px;align-items:center;margin-left:auto}
.lfp-nav__links+.lfp-nav__actions{margin-left:0}
.lfp-nav-spacer{height:143px}

/* Hamburguesa: no existe en el prototipo (era solo escritorio) */
.lfp-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0;border:1px solid var(--ghost-line);border-radius:9px;background:#fff;cursor:pointer}
.lfp-burger span{display:block;height:2px;width:20px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.lfp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lfp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lfp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.lfp-mobile{display:none;position:fixed;left:0;right:0;z-index:49;background:#fff;border-bottom:1px solid var(--line-nav);box-shadow:0 18px 40px rgba(11,27,43,.14);padding:12px var(--gutter) 20px}
.lfp-mobile.is-open{display:block}
.lfp-mobile a{display:block;padding:13px 4px;font-size:15.5px;font-weight:600;color:var(--nav-link);border-bottom:1px solid #F0F5F9}
.lfp-mobile a.is-active{color:var(--blue)}
/* El color va repetido a proposito: `.lfp-mobile a` (clase + elemento) gana por
   especificidad a `.lfp-btn--primary` (una clase), y dejaba el texto del boton
   en azul oscuro sobre el fondo azul. */
.lfp-mobile .lfp-btn{display:block;text-align:center;margin-top:16px;color:#fff}
.lfp-mobile .lfp-btn--primary{color:#fff}

/* ==========================================================================
   5. Botones (el prototipo usaba style-hover, atributo propietario del runtime)
   ========================================================================== */
.lfp-btn{display:inline-block;font-family:inherit;font-weight:700;border-radius:10px;cursor:pointer;text-align:center;transition:background .2s,border-color .2s,color .2s;border:none}
.lfp-btn--primary{background:var(--blue);color:#fff;font-weight:800;font-size:14.5px;padding:14px 26px;box-shadow:0 6px 18px rgba(18,165,232,.35)}
.lfp-btn--primary:hover{background:var(--blue-dark);color:#fff}
.lfp-btn--ghost{border:1.5px solid var(--ghost-line);color:var(--ink);font-weight:700;font-size:14.5px;padding:14px 22px;background:transparent}
.lfp-btn--ghost:hover{border-color:var(--blue);color:var(--ink)}
.lfp-btn--onDark{border:1.5px solid var(--sep);color:#fff;font-weight:700;font-size:15px;padding:15px 28px;background:transparent}
.lfp-btn--onDark:hover{border-color:var(--blue-light);color:var(--blue-light)}
.lfp-btn--navCta{background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:11px 22px;border-radius:9px;white-space:nowrap;flex-shrink:0;box-shadow:0 4px 14px rgba(18,165,232,.35)}
.lfp-btn--navCta:hover{background:var(--blue-dark);color:#fff}
.lfp-btn--lg{font-size:15px;padding:15px 28px;font-weight:800}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.lfp-hero{background:linear-gradient(140deg,#0F2438 0%,#0B1B2B 55%,#12314C 100%);color:#fff;position:relative;overflow:hidden}
.lfp-hero__mesh{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 26px);pointer-events:none}
.lfp-hero__halo{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:760px;height:300px;background:radial-gradient(closest-side,rgba(18,165,232,.28),transparent);pointer-events:none}
.lfp-hero__inner{position:relative;padding-top:26px;padding-bottom:60px}
.lfp-crumbs{font-size:13px;color:var(--on-dark-faint);font-weight:600;margin-bottom:22px}
.lfp-crumbs a{color:var(--on-dark-faint)}
.lfp-crumbs a:hover{color:#fff}
.lfp-crumbs span{color:#fff}
/* El diseno ponia la pildora en azul claro; a peticion de cliente va en blanco,
   que sobre el degradado del hero se lee bastante mejor. */
.lfp-pill{display:inline-flex;background:rgba(18,165,232,.16);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:1.4px;padding:6px 14px;border-radius:99px;margin-bottom:16px}
.lfp-hero__title{font-size:40px;line-height:1.12;margin:0 0 14px;font-weight:800;letter-spacing:-1.4px}
.lfp-hero__sub{font-size:16.5px;line-height:1.7;color:var(--on-dark);margin:0;text-wrap:pretty}

/* ==========================================================================
   7. Secciones, tipografia y tarjetas
   ========================================================================== */
.lfp-section{padding-top:64px;padding-bottom:64px}
.lfp-section--tight{padding-bottom:20px}
.lfp-band{background:var(--band);padding:64px 0;margin-top:56px}
.lfp-h2{font-size:27px;margin:0 0 12px;font-weight:800;letter-spacing:-.6px}
/* El diseno alterna el margen inferior del h2 segun la seccion. */
.lfp-h2--gap16{margin-bottom:16px}
.lfp-h2--gap18{margin-bottom:18px}
.lfp-h2--gap24{margin-bottom:24px}
.lfp-h3{font-size:17px;margin:0 0 20px;font-weight:800}
.lfp-lead{font-size:15.5px;color:var(--text);line-height:1.8;margin:0 0 14px;text-wrap:pretty}
.lfp-lead:last-child{margin-bottom:0}
.lfp-lead b{color:var(--ink)}
.lfp-center{text-align:center}
.lfp-section__head{text-align:center;margin-bottom:34px}
.lfp-section__head .lfp-h2{margin-bottom:10px}
.lfp-section__head p{font-size:15.5px;color:var(--text);margin:0 auto;max-width:620px;line-height:1.65}

.lfp-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:box-shadow .25s,transform .25s,border-color .25s}
.lfp-card b{font-size:14.5px}
.lfp-card__desc{font-size:13px;color:var(--text-soft);margin-top:4px;line-height:1.5}
.lfp-panel{background:var(--band);border:1px solid var(--line);border-radius:18px;padding:34px 36px}
.lfp-list{display:flex;flex-direction:column;gap:18px;font-size:14.5px;color:var(--text);line-height:1.65}
.lfp-list b{color:var(--ink);display:block;margin-bottom:3px}

/* Rejillas: en el prototipo iban inline y NO colapsaban nunca */
.lfp-grid{display:grid}
.lfp-grid--2{grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.lfp-grid--3{grid-template-columns:repeat(3,1fr);gap:16px}
.lfp-grid--4{grid-template-columns:repeat(4,1fr);gap:16px}
.lfp-mt20{margin-top:20px}
.lfp-mt24{margin-top:24px}
.lfp-actions{display:flex;gap:12px;flex-wrap:wrap}

.lfp-figure img{max-width:100%;height:auto;display:block;margin:0 auto}

/* Banda CTA final */
.lfp-ctaband{background:linear-gradient(130deg,#16324E,#0B1B2B);border-radius:20px;padding:44px 52px;display:flex;justify-content:space-between;align-items:center;gap:40px;color:#fff;flex-wrap:wrap}
.lfp-ctaband h2{font-size:25px;margin:0 0 8px;font-weight:800;letter-spacing:-.5px}
.lfp-ctaband p{color:var(--on-dark-dim);font-size:15px;margin:0}
.lfp-ctaband__actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.lfp-footer{background:var(--foot);color:var(--on-dark-dim);padding:52px var(--gutter) 28px}
.lfp-footer__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:36px;font-size:13.5px}
.lfp-footer__brand{display:flex;align-items:center;gap:9px;margin-bottom:14px}
/* El logo lleva tinta oscura y el pie es casi negro: sin un fondo detras se
   pierde la mitad del dibujo. Se le pone una placa blanca ajustada. */
.lfp-footer__brand img{width:84px;height:84px;object-fit:contain;display:block;
  background:#fff;border-radius:12px;padding:6px;box-sizing:border-box}
.lfp-footer__brandtext{color:#fff;font-weight:800;font-size:14px;line-height:1.1}
.lfp-footer__brandtext span{font-weight:400;font-size:8.5px;letter-spacing:1.6px;color:var(--on-dark-dim)}
.lfp-footer p{line-height:1.6;margin:0;max-width:260px}
.lfp-footer__social{display:flex;gap:10px;margin-top:16px}
.lfp-footer__social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--on-dark-dim);transition:background .15s,color .15s}
.lfp-footer__social a:hover{background:rgba(255,255,255,.16);color:#fff}
.lfp-footer__col{display:flex;flex-direction:column;gap:9px}
.lfp-footer__head{color:#fff;font-weight:800;font-size:12px;letter-spacing:1.4px;margin-bottom:4px}
.lfp-footer__col a{color:var(--on-dark-dim)}
.lfp-footer__col a:hover{color:#fff}
.lfp-footer__contact{font-size:13px;line-height:1.55}
.lfp-footer__hours{color:var(--text-dim)}
.lfp-footer__bottom{max-width:var(--wrap);margin:36px auto 0;border-top:1px solid var(--foot-line);padding-top:20px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-dim);flex-wrap:wrap;gap:10px}
.lfp-footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.lfp-footer__legal a{color:var(--text-dim)}
.lfp-footer__legal a:hover{color:var(--on-dark-dim)}

/* ==========================================================================
   8b. Home
   ========================================================================== */
.lfp-wrap--flush{max-width:var(--wrap);margin:0 auto;padding:0;width:100%}

.lfp-home-hero{background:linear-gradient(180deg,#EAF4FB 0%,#EFF6FB 55%,#E4EFF7 100%);min-height:calc(100vh - var(--lfp-chrome,143px));display:flex;flex-direction:column;justify-content:center}
/* El overflow oculto es lo que recorta la cinta del carrusel, que es mucho mas
   ancha que la pantalla; sin esto aparece scroll horizontal. */
.lfp-home-hero__stage{position:relative;overflow:hidden;color:var(--ink)}
.lfp-home-hero__head{padding:56px var(--gutter) 26px;text-align:center;position:relative;z-index:3}
.lfp-pill--light{background:#E3F4FD;color:var(--link-hover);font-size:12px;padding:7px 16px;letter-spacing:1.4px;margin-bottom:20px}
.lfp-home-title{font-size:clamp(30px,4.6vw,44px);line-height:1.1;margin:0 0 14px;font-weight:800;letter-spacing:-1.6px}
.lfp-home-title span{color:var(--blue)}
.lfp-home-hero__sub{font-size:16.5px;color:var(--text);margin:0 auto 26px;line-height:1.6;text-wrap:pretty}
.lfp-actions--center{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lfp-btn--hero{padding:15px 30px;font-size:15px;font-weight:800;box-shadow:0 10px 26px rgba(18,165,232,.4)}
.lfp-btn--heroGhost{padding:15px 28px;font-size:15px}
.lfp-checks{display:flex;gap:26px;justify-content:center;margin-top:20px;font-size:13px;font-weight:700;color:var(--nav-link);flex-wrap:wrap}
.lfp-checks>span{white-space:nowrap}

/* Carrusel: 11 tarjetas, paso de 312px (280 de ancho + 32 de hueco).
   La activa escala y sube; el resto se atenua. El salto a la banda central
   (indices 3-7) se hace sin animacion para simular un bucle infinito. */
.lfp-carousel{position:relative;height:320px;margin-top:6px}
.lfp-carousel__halo{position:absolute;left:50%;top:100px;transform:translateX(-50%);width:520px;height:120px;filter:blur(28px);opacity:.85;transition:background .5s ease;z-index:0;pointer-events:none}
.lfp-carousel__track{position:absolute;left:50%;top:40px;display:flex;gap:32px;width:max-content;z-index:2}
.lfp-carousel__card{flex:none;width:280px;height:175px;cursor:pointer;border-radius:14px;overflow:visible;padding:0;border:0;background:none;font:inherit;transform:scale(.9);opacity:.45;z-index:1;filter:drop-shadow(0 14px 22px rgba(11,27,43,.20)) drop-shadow(0 30px 45px rgba(11,27,43,.14))}
.lfp-carousel__card img{width:100%;height:100%;object-fit:contain;display:block}
.lfp-carousel__card.is-active{transform:scale(1.16) translateY(-20px);opacity:1;z-index:5}
.lfp-carousel.is-anim .lfp-carousel__track{transition:transform .65s cubic-bezier(.22,1,.36,1)}
.lfp-carousel.is-anim .lfp-carousel__card{transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .5s,box-shadow .5s}

.lfp-marquee-wrap{position:relative;z-index:3;padding:44px 0}
.lfp-marquee-label{text-align:center;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#A8BDD0;margin-bottom:14px}
.lfp-marquee-mask{overflow:hidden;position:relative;max-width:var(--wrap);margin:0 auto}
.lfp-marquee{display:flex;gap:64px;width:max-content;animation:lfp-marquee 28s linear infinite;align-items:center;padding-right:64px}
.lfp-marquee span{font-weight:700;font-size:15px;color:#9CB2C6}
.lfp-marquee .is-wide{letter-spacing:2px}
.lfp-marquee .is-italic{font-style:italic}
.lfp-marquee .is-tight{letter-spacing:1px}

.lfp-eyebrow{color:var(--blue);font-weight:800;font-size:12.5px;letter-spacing:1.8px;margin-bottom:10px}
.lfp-h2--xl{font-size:34px;letter-spacing:-.5px;margin-bottom:10px}
.lfp-h2--lg{font-size:32px;letter-spacing:-.5px}
.lfp-h2--m0{margin:0}
.lfp-head--xl{text-align:center;margin-bottom:44px}
.lfp-head--xl p{color:var(--text);font-size:16px;margin:0}

.lfp-prod{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:box-shadow .2s}
.lfp-prod:hover{box-shadow:0 14px 34px rgba(11,27,43,.1)}
.lfp-prod__img{border-radius:10px;margin-bottom:16px;overflow:hidden;background:#F2F7FB}
.lfp-prod__img img{width:100%;height:auto;display:block}
.lfp-prod h3{font-size:18px;margin:0 0 6px;font-weight:700}
.lfp-prod p{font-size:14px;color:var(--text);line-height:1.55;margin:0 0 14px}
.lfp-prod__foot{display:flex;justify-content:space-between;align-items:center}
.lfp-price{font-weight:800;font-size:17px}
.lfp-price small{font-size:12px;color:var(--text-soft);font-weight:600}
.lfp-more{font-weight:700;font-size:14px}
.lfp-grid--prod{grid-template-columns:repeat(3,1fr);gap:22px}

.lfp-banner{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:#F4F9FC}
.lfp-banner__left{display:flex;gap:20px;align-items:center}
.lfp-banner__icon{width:54px;height:54px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.lfp-banner h3{font-size:17px;margin:0 0 4px;font-weight:700}
.lfp-banner p{font-size:14px;color:var(--text);margin:0}
.lfp-btn--sm{border:1.5px solid var(--ghost-line);padding:11px 20px;border-radius:9px;font-weight:700;font-size:14px;flex-shrink:0;color:var(--ink);background:transparent}
.lfp-btn--sm:hover{border-color:var(--blue);color:var(--ink)}

.lfp-split{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start}
.lfp-grid--sect{grid-template-columns:repeat(3,1fr);gap:14px}
.lfp-sector-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--ink);display:block;transition:box-shadow .2s}
.lfp-sector-card:hover{box-shadow:0 10px 24px rgba(11,27,43,.08);color:var(--ink)}
.lfp-sector-card b{display:block;font-weight:700;font-size:15px;margin-bottom:4px}
/* En bloque, como los div del diseno: en linea, la caja de linea la marca la
   fuente del padre y cada fila crecia unos pixeles. */
.lfp-sector-card span{display:block;font-size:13px;color:var(--text-soft)}

.lfp-proceso{background:linear-gradient(180deg,#EAF4FB,#F7FBFD);padding:76px 0}
.lfp-grid--steps{grid-template-columns:repeat(4,1fr);gap:20px}
.lfp-step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.lfp-step__n{font-weight:800;font-size:14px;color:var(--blue);margin-bottom:10px}
.lfp-step h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.lfp-step p{font-size:14px;color:var(--text);line-height:1.55;margin:0}

.lfp-stats{background:var(--ink);color:#fff;padding:64px 0}
.lfp-stats__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lfp-stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.lfp-stat b{display:block;font-weight:800;font-size:38px;color:var(--blue-light)}
.lfp-stat span{display:block;color:var(--on-dark-dim);font-size:14px}
.lfp-quote{border-left:3px solid var(--blue);padding-left:28px;margin:0}
.lfp-quote p{font-size:19px;line-height:1.6;margin:0 0 16px;font-weight:500}
.lfp-quote b{display:block;font-weight:800;font-size:14.5px}
.lfp-quote span{color:var(--on-dark-dim);font-size:13.5px;display:block}

.lfp-faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.lfp-faq details{border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.lfp-faq summary{font-weight:800;font-size:15.5px;cursor:pointer}
.lfp-faq p{font-size:14.5px;color:var(--text);line-height:1.6;margin:12px 0 0}

.lfp-ctaband--home{padding:48px 52px;flex-wrap:nowrap}
.lfp-ctaband--home h2{font-size:30px;margin:0 0 10px}
.lfp-ctaband--home p{font-size:15.5px}

.lfp-seoblock{background:#F4F9FC;border-top:1px solid var(--line-nav);padding:56px 0}
.lfp-seoblock h2{font-size:22px;margin:0 0 14px;font-weight:800;letter-spacing:-.3px}
.lfp-seoblock__cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:14px;color:var(--text);line-height:1.75}
.lfp-seoblock__cols p{margin:0;text-wrap:pretty}
.lfp-chips-label{font-size:11.5px;font-weight:800;letter-spacing:1.6px;color:var(--text-soft);margin:26px 0 12px}
.lfp-chips{display:flex;flex-wrap:wrap;gap:8px}
.lfp-chip{background:#fff;border:1px solid #DCE8F1;border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--nav-link)}
.lfp-chip--more{background:none;border:1px dashed var(--ghost-line);color:var(--text-soft)}

/* ==========================================================================
   8c. Paginas interiores: sectores y fichas de producto
   ========================================================================== */
.lfp-hero--int{background:linear-gradient(130deg,#16324E 0%,#0B1B2B 55%,#123B5C 100%)}
/* La rejilla de las interiores es azul (la de Quienes Somos, blanca). */
.lfp-hero__mesh--28{background-image:repeating-linear-gradient(0deg,rgba(79,195,247,.06) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(79,195,247,.06) 0 1px,transparent 1px 28px)}
.lfp-hero__glow{position:absolute;top:-140px;right:-80px;width:560px;height:400px;background:radial-gradient(closest-side,rgba(18,165,232,.35),transparent);pointer-events:none}
.lfp-hero__glow--top{top:-130px;left:50%;right:auto;transform:translateX(-50%);width:720px;height:300px;background:radial-gradient(closest-side,rgba(18,165,232,.2),transparent)}
.lfp-hero__inner--int{padding-top:36px;padding-bottom:52px}
.lfp-hero__inner--int .lfp-crumbs{margin-bottom:14px}
.lfp-hero__title--int{font-size:38px;line-height:1.12;letter-spacing:-1.2px}
.lfp-hero__title--int span{color:var(--blue-light)}
.lfp-hero__sub--int{font-size:16px;line-height:1.65;margin-bottom:24px}
.lfp-pill--dark{border:1px solid #2A4560;background:transparent;color:#fff;font-size:11.5px;letter-spacing:1.4px;padding:6px 14px}
.lfp-hero__checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:13px;font-weight:700;color:var(--on-dark)}
/* Icono y texto no se separan nunca: el distintivo salta de linea entero. */
.lfp-hero__checks>span{white-space:nowrap}
/* Los botones no separan: quien deja el aire es el margen inferior del subtitulo. */
.lfp-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
/* En el hero el secundario es un punto mas pequeno que en la banda CTA final. */
.lfp-hero__actions .lfp-btn--onDark{font-size:14.5px;padding:14px 22px}

/* Hero centrado de los indices (Sectores y Tarjetas) */
.lfp-hero--centro{text-align:center}
.lfp-hero--centro .lfp-hero__inner{padding:64px 230px 58px;max-width:none}
/* En los indices el h1 no fija interlineado (los interiores si: 1.12). */
.lfp-hero--centro .lfp-hero__title--int{margin-bottom:12px;line-height:normal}
.lfp-hero--centro .lfp-hero__sub--int{margin:0 auto;line-height:1.6}
.lfp-hero--centro .lfp-crumbs{position:absolute;top:22px;left:0;right:0;text-align:left;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Bloque de 3 tarjetas + tecnologias (comun a los 8 sectores) */
.lfp-band--soft{background:#F4F9FC;padding:56px 0}
.lfp-tarjeta{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;transition:box-shadow .2s}
.lfp-tarjeta h2,.lfp-tarjeta h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.lfp-tarjeta p{font-size:14px;color:var(--text);line-height:1.6;margin:0}
.lfp-tarjeta--gim p{line-height:1.55}   /* gimnasios es el unico sector que aprieta la linea */
.lfp-tarjeta__emoji{font-size:22px;display:block;margin-bottom:10px}
/* El icono acompana al titulo en la misma linea, no encima. La descripcion baja
   entera debajo de los dos, ocupando el ancho completo de la tarjeta. */
.lfp-tarjeta--gim{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
.lfp-tarjeta--gim .lfp-tarjeta__emoji{margin:0;line-height:1}
.lfp-tarjeta--gim h3{margin:0}
.lfp-tarjeta--gim p{grid-column:1 / -1;margin-top:8px}
.lfp-tecno{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:24px auto 0;justify-content:center}
.lfp-tecno__label{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:var(--text-soft);margin-right:6px}
.lfp-tecno span:not(.lfp-tecno__label){background:#fff;border:1px solid #DCE8F1;border-radius:99px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--ink)}
.lfp-sep48{height:48px}
.lfp-seo-min{font-size:13.5px;color:var(--text);line-height:1.75;padding-bottom:56px}
.lfp-seo-min--64{padding-bottom:64px}
.lfp-seo-min h2{font-size:17px;margin:0 0 10px;font-weight:800;color:var(--ink)}
.lfp-seo-min p{margin:0;text-wrap:pretty}

/* Caso real de gimnasios */
.lfp-caso{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.lfp-caso__t{font-size:12px;font-weight:800;letter-spacing:1.2px;color:var(--blue);margin-bottom:12px}
.lfp-caso p{font-size:15px;line-height:1.65;color:var(--text);margin:0 0 12px}
.lfp-caso__firma{font-size:13.5px;font-weight:700;color:var(--ink)}
.lfp-caso__metricas{display:flex;gap:22px;border-top:1px solid #EDF3F8;margin-top:16px;padding-top:14px;flex-wrap:wrap}
.lfp-caso__metricas div{font-size:13px;color:var(--text-soft)}
.lfp-caso__metricas b{display:block;font-size:19px;color:var(--ink)}
.lfp-reco{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:block;color:var(--ink)}
.lfp-reco:hover{box-shadow:0 10px 24px rgba(11,27,43,.08);color:var(--ink)}
.lfp-reco--destacada{border:2px solid var(--blue)}
.lfp-reco b{display:block;font-size:15.5px;margin-bottom:4px}
.lfp-reco span{font-size:13px;color:var(--text-soft)}
/* La insignia es un <span> dentro de .lfp-reco, asi que la regla de arriba
   (clase + etiqueta) le ganaba a su propia clase y la dejaba en gris sobre el
   azul. Se repite el color con mas especificidad. */
.lfp-reco .lfp-reco__badge{color:#fff}
.lfp-reco__badge{position:absolute;top:-10px;right:14px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:99px}

/* Ficha de producto: hero a dos columnas sobre el degradado */
.lfp-hero--prod .lfp-hero__glow{background:radial-gradient(closest-side,rgba(18,165,232,.3),transparent)}
.lfp-prod-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:36px;padding-bottom:56px}
.lfp-prod-hero .lfp-crumbs{margin-bottom:14px}
.lfp-prod-hero .lfp-pill--dark{padding:6px 12px;margin-bottom:14px}
/* El diseno no fija interlineado en el h1 de ficha: deja el normal de la fuente. */
.lfp-hero__title--prod{font-size:34px;line-height:normal;letter-spacing:-1px;margin-bottom:12px}
.lfp-hero__sub--prod{font-size:15.5px;line-height:1.65;margin-bottom:20px}
/* La placa clara solo se ve con imagenes recortadas (impresoras); las fotos
   opacas del resto de fichas la tapan por completo. */
.lfp-prod-hero__img{border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.4);overflow:hidden;background:#F2F7FB}
.lfp-prod-hero__img img{width:100%;height:auto;display:block}
.lfp-bullets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 24px;font-size:14px;font-weight:600;color:var(--on-dark)}
.lfp-badges{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:13px;font-weight:700;color:var(--on-dark)}
.lfp-badges>span{white-space:nowrap}
/* Impresoras no tiene foto: marcador con la silueta de una impresora. */
.lfp-ph{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;height:380px;display:grid;place-items:center;position:relative;overflow:hidden}
.lfp-ph__glow{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 45%,rgba(18,165,232,.28),transparent)}
.lfp-ph__card{width:400px;max-width:80%;height:250px;transform:rotate(-4deg);background:linear-gradient(130deg,#16324E,#0B1B2B);box-shadow:0 30px 60px rgba(11,27,43,.35);border-radius:18px;display:grid;place-items:center}

.lfp-especs{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;padding-top:56px;padding-bottom:56px}
.lfp-tabla{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0}
.lfp-tabla__t{background:#F4F9FC;padding:14px 20px;font-weight:700;font-size:14px}
.lfp-tabla__fila{display:grid;grid-template-columns:1fr 1.5fr;border-top:1px solid #EDF3F8}
.lfp-tabla__fila>*{padding:12px 20px;font-size:13.5px}
.lfp-tabla__fila dt{color:var(--text-soft);font-weight:600;margin:0}
.lfp-tabla__fila dd{margin:0;font-weight:700}
.lfp-faq-col{display:flex;flex-direction:column;gap:12px}
.lfp-faq-col details{border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.lfp-faq-col summary{font-weight:800;font-size:14.5px;cursor:pointer}
.lfp-faq-col p{font-size:14px;color:var(--text);line-height:1.6;margin:10px 0 0}
.lfp-aviso{background:#F4F9FC;border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:13.5px;color:var(--text);line-height:1.6}
.lfp-aviso b{color:var(--ink)}
.lfp-aviso__t{display:block;margin-bottom:4px}
.lfp-relacionados-sec{padding-bottom:56px}
.lfp-relacionados-sec h2{font-size:20px;margin:0 0 16px;font-weight:800}
.lfp-relacionados{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lfp-relacionados a{border:1px solid var(--line);border-radius:12px;padding:18px 20px;font-weight:700;font-size:14.5px;color:var(--ink);transition:box-shadow .2s}
.lfp-relacionados a:hover{box-shadow:0 10px 26px rgba(11,27,43,.08);color:var(--ink)}

/* Banner de descarga del catalogo (solo accesorios) */
.lfp-catalogo-sec{padding-top:56px}
.lfp-catalogo{background:linear-gradient(130deg,#16324E,#0B1B2B);border-radius:18px;padding:28px 32px;display:flex;gap:24px;align-items:center;color:#fff;position:relative;overflow:hidden}
.lfp-catalogo:hover{color:#fff}
.lfp-catalogo__glow{position:absolute;top:-90px;right:-40px;width:320px;height:260px;background:radial-gradient(closest-side,rgba(18,165,232,.3),transparent)}
.lfp-catalogo__txt{flex:1;position:relative}
.lfp-catalogo__k{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:var(--blue-light);margin-bottom:6px}
.lfp-catalogo__t{font-weight:800;font-size:20px;margin-bottom:6px}
.lfp-catalogo p{color:var(--on-dark-dim);font-size:14.5px;margin:0;line-height:1.6}
.lfp-catalogo__btn{background:var(--blue);color:#fff;font-weight:800;font-size:14.5px;padding:14px 26px;border-radius:10px;flex-shrink:0;position:relative;white-space:nowrap}

/* Rejilla del indice /tarjetas/ */
.lfp-catalogo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:24px;padding-bottom:56px}
.lfp-cat-card{border:1px solid var(--line);border-radius:16px;padding:22px;display:block;color:var(--ink);transition:box-shadow .2s}
.lfp-cat-card:hover{box-shadow:0 14px 34px rgba(11,27,43,.1);color:var(--ink)}
.lfp-cat-card__img{border-radius:10px;margin-bottom:16px;overflow:hidden;background:#F2F7FB}
.lfp-cat-card__img img{width:100%;height:auto;display:block}
.lfp-cat-card h3{font-size:17px;margin:0 0 6px;font-weight:700}
.lfp-cat-card p{font-size:13.5px;color:var(--text);line-height:1.55;margin:0 0 10px}
.lfp-cat-card__ver{font-weight:700;font-size:13.5px;color:var(--link)}
.lfp-cat-card__ph{height:110px;border-radius:10px;background:linear-gradient(130deg,#16324E,#0B1B2B);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;letter-spacing:1.5px;margin-bottom:16px;text-align:center;padding:0 12px}

@media (max-width:1080px){
  .lfp-hero--centro .lfp-hero__inner{padding-left:120px;padding-right:120px}
}
@media (max-width:900px){
  .lfp-prod-hero,.lfp-especs{grid-template-columns:1fr;gap:32px}
  .lfp-hero__title--int{font-size:30px}
  .lfp-hero__title--prod{font-size:28px}
  .lfp-relacionados,.lfp-catalogo-grid{grid-template-columns:1fr}
  /* En el hero centrado, las migas quedaban descolgadas a la izquierda y pegadas
     a la pildora. Acompanan al resto del bloque y se les da aire. */
  .lfp-hero--centro .lfp-crumbs{position:static;text-align:center;padding:0;margin-bottom:20px}
  .lfp-hero--centro .lfp-hero__inner{padding:36px var(--gutter) 48px}
  .lfp-catalogo{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .lfp-bullets{grid-template-columns:1fr}
  .lfp-tabla__fila{grid-template-columns:1fr}
  .lfp-tabla__fila dt{padding-bottom:0}
  .lfp-catalogo__btn{width:100%;text-align:center;box-sizing:border-box}
}

/* Paginas de ciudad: el hero se separa 12px del nav y respira 8px mas arriba */
.lfp-hero--ciudad{margin-top:12px}
.lfp-hero--ciudad .lfp-hero__inner--int{padding-top:44px}

/* Paginas de ciudad: bloque de respuesta directa (GEO) y rejilla de catalogo */
.lfp-geo{background:var(--band);border:1px solid #DCE8F1;border-left:4px solid var(--blue);border-radius:14px;padding:26px 30px}
.lfp-geo h2{font-size:19px;margin:0 0 10px;font-weight:800}
.lfp-geo p{font-size:15.5px;color:var(--nav-link);line-height:1.7;margin:0 0 18px}
.lfp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#DCE8F1;border-radius:10px;overflow:hidden}
.lfp-kpis>div{background:#fff;padding:14px 16px}
.lfp-kpis span{display:block;font-size:11.5px;font-weight:800;letter-spacing:1px;color:var(--text-soft);margin-bottom:4px}
.lfp-kpis b{font-size:15px;font-weight:700}
.lfp-catalogo-links{grid-template-columns:repeat(4,1fr);gap:14px}
.lfp-catalogo-links a{border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14px;font-weight:700;color:var(--ink);transition:box-shadow .2s}
.lfp-catalogo-links a:hover{box-shadow:0 10px 26px rgba(11,27,43,.08);color:var(--ink)}
@media (max-width:900px){
  .lfp-kpis{grid-template-columns:repeat(2,1fr)}
  .lfp-catalogo-links{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .lfp-kpis,.lfp-catalogo-links{grid-template-columns:1fr}
  .lfp-geo{padding:20px 18px}
}

/* ==========================================================================
   9. Prosa (paginas legales y posts sembrados en BD)
   ========================================================================== */
.lfp-prose{font-size:15.5px;color:var(--text);line-height:1.8}
.lfp-prose h2{font-size:22px;color:var(--ink);font-weight:800;letter-spacing:-.4px;margin:34px 0 12px}
.lfp-prose h3{font-size:17px;color:var(--ink);font-weight:800;margin:26px 0 10px}
.lfp-prose p{margin:0 0 14px;text-wrap:pretty}
.lfp-prose ul,.lfp-prose ol{margin:0 0 16px;padding-left:22px}
.lfp-prose li{margin-bottom:7px}
.lfp-prose b,.lfp-prose strong{color:var(--ink)}
.lfp-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px}
.lfp-prose th,.lfp-prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.lfp-prose th{background:var(--band);color:var(--ink)}

/* --------------------------------------------------------------------------
   9c. Blog: indice de articulos y articulo
   La cabecera del articulo es la unica clara de todo el sitio.
   -------------------------------------------------------------------------- */
.lfp-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:24px;padding-bottom:64px}
.lfp-post-card{border:1px solid var(--line);border-radius:16px;padding:26px;display:block;color:var(--ink);transition:box-shadow .2s}
.lfp-post-card:hover{box-shadow:0 14px 34px rgba(11,27,43,.1);color:var(--ink)}
.lfp-post-card__k{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:var(--blue);margin-bottom:10px}
.lfp-post-card h2{font-size:18px;margin:0 0 10px;font-weight:700;line-height:1.35}
.lfp-post-card p{font-size:13.5px;color:var(--text);line-height:1.6;margin:0 0 12px}

.lfp-pagination{max-width:1328px;margin:0 auto 64px;padding:0 var(--gutter);width:100%}
.lfp-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.lfp-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:700;color:var(--nav-link);transition:box-shadow .2s,border-color .2s}
.lfp-pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 8px 20px rgba(11,27,43,.07)}
.lfp-pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.lfp-pagination .page-numbers.dots{border:none;min-width:24px;padding:0}
.lfp-pagination .screen-reader-text{position:absolute;left:-9999px}

.lfp-post-head{background:linear-gradient(180deg,#EAF4FB,#fff);position:relative;overflow:hidden}
.lfp-post-head__mesh{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(18,165,232,.05) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(18,165,232,.05) 0 1px,transparent 1px 26px)}
.lfp-post-head__inner{position:relative;padding:48px 40px 36px}
.lfp-post-head__k{font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--blue);margin-bottom:14px}
.lfp-post-head__k a{color:var(--blue)}
.lfp-post-head h1{font-size:34px;line-height:1.15;margin:0 0 18px;font-weight:800;letter-spacing:-1px;text-wrap:pretty}
.lfp-post-head p{font-size:17px;color:var(--text);line-height:1.7;margin:0 0 32px;font-weight:500;text-wrap:pretty}

.lfp-articulo{padding:20px 40px 56px}
.lfp-articulo h2{font-size:25px;margin:52px 0 18px;font-weight:800;letter-spacing:-.4px;
  border-left:4px solid var(--blue);padding-left:16px}
.lfp-articulo > h2:first-child{margin-top:0}
.lfp-articulo p{font-size:15.5px;color:var(--nav-link);line-height:1.8;margin:0;text-wrap:pretty}
.lfp-articulo ul,.lfp-articulo ol{font-size:15.5px;color:var(--nav-link);line-height:1.8;margin:0 0 16px;padding-left:22px}
/* Los 116 articulos migrados traen mucho mas marcado que los 3 del diseno:
   533 h3, 230 h4, 58 tablas, listas, citas y separadores. Sin esto se veian con
   el estilo por defecto del navegador. */
.lfp-articulo h3{font-size:18px;margin:30px 0 10px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.lfp-articulo h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--blue);margin-right:10px;transform:translateY(-2px)}
.lfp-blogpaso__c h3::before{display:none}
.lfp-articulo h4{font-size:16px;margin:24px 0 8px;font-weight:700;color:var(--ink)}
.lfp-articulo h5,.lfp-articulo h6{font-size:15px;margin:20px 0 8px;font-weight:700;color:var(--ink)}
.lfp-articulo li{margin-bottom:8px}
.lfp-articulo li::marker{color:var(--blue)}

/* Listas numeradas del CUERPO (no el indice, que tiene su propio estilo): insignia
   circular en vez del numero plano del navegador. ">" = solo hijo directo del articulo. */
.lfp-articulo > ol{list-style:none;counter-reset:lfp-n;padding-left:0;display:grid;gap:14px;margin:20px 0}
.lfp-articulo > ol > li{counter-increment:lfp-n;position:relative;padding-left:40px;margin-bottom:0}
.lfp-articulo > ol > li::before{content:counter(lfp-n);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* Pasos numerados agrupados (blog): insignia + titulo + texto en una tarjeta.
   Nombre distinto de .lfp-paso (ya usado en Como trabajamos) para no chocar. */
.lfp-blogpaso{display:flex;gap:16px;align-items:flex-start;background:var(--band);
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:20px 0}
.lfp-blogpaso__n{flex-shrink:0;width:34px;height:34px;border-radius:999px;background:var(--blue);
  color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lfp-blogpaso__c h3{margin:0 0 8px;font-size:17px}
.lfp-blogpaso__c p{margin:0}
.lfp-articulo strong,.lfp-articulo b{color:var(--ink);font-weight:700}
.lfp-articulo a{font-weight:600}
.lfp-articulo hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.lfp-articulo blockquote{margin:24px 0;padding:18px 24px;background:var(--band);
  border-left:4px solid var(--blue);border-radius:0 12px 12px 0;font-size:15.5px;color:var(--nav-link)}
.lfp-articulo blockquote p:last-child{margin-bottom:0}
.lfp-articulo figure{margin:24px 0}
.lfp-articulo figcaption{font-size:13.5px;color:var(--text-soft);margin-top:8px;text-align:center}
.lfp-articulo img{height:auto;max-height:520px;width:auto;max-width:100%;border-radius:12px;display:block;margin:24px auto}
.lfp-articulo code{background:var(--band);border:1px solid var(--line);border-radius:6px;
  padding:2px 6px;font-size:14px}
.lfp-articulo pre{background:var(--band);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;overflow-x:auto;font-size:14px}
.lfp-articulo details{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0}
.lfp-articulo summary{font-weight:700;cursor:pointer}
/* Las tablas del contenido viejo son anchas: se hacen desplazables en vez de
   reventar el ancho de la pagina en el movil. */
.lfp-articulo table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;
  margin:24px 0;font-size:14.5px;-webkit-overflow-scrolling:touch}
.lfp-articulo th,.lfp-articulo td{border:1px solid var(--line);padding:11px 14px;
  text-align:left;vertical-align:top;line-height:1.6}
.lfp-articulo th{background:var(--band);color:var(--ink);font-weight:700;white-space:nowrap}
.lfp-articulo tbody tr:nth-child(even) td{background:#FAFCFE}

/* Indice automatico ("En este articulo"), solo aparece con 3+ H2 reales */
.lfp-articulo__indice{background:var(--band);border:1px solid var(--line);border-radius:14px;
  padding:20px 24px;margin-bottom:32px}
.lfp-articulo__indice b{display:block;color:var(--ink);font-size:13px;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px}
.lfp-articulo__indice ol{list-style:decimal;margin:0;padding-left:20px;display:grid;gap:6px}
.lfp-articulo__indice a{font-size:14.5px;font-weight:600;color:var(--link)}
.lfp-articulo__indice a:hover{color:var(--link-hover);text-decoration:underline}

/* El primer parrafo con texto real hace de entradilla: mas grande y mas suave */
.lfp-articulo p.lfp-lede{font-size:18px;line-height:1.7;color:var(--ink);font-weight:500}

/* Tarjetas de "Sigue leyendo": categoria + titulo, sin depender de fotos que no existen */
.lfp-articulo__relacionados{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.lfp-articulo__relacionados > b{display:block;color:var(--ink);font-size:14px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px}
.lfp-articulo__relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.lfp-articulo__relacionados li{margin:0}
.lfp-articulo__relacionados a{display:block;height:100%;padding:16px 18px;border:1px solid var(--line);
  border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.lfp-articulo__relacionados a:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(18,165,232,.14)}
.lfp-articulo__relacionados-k{display:block;font-size:11.5px;font-weight:800;color:var(--blue);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.lfp-articulo__relacionados-t{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4}
@media (max-width:900px){
  .lfp-articulo__relacionados ul{grid-template-columns:1fr}
}

.lfp-articulo__cta{margin-top:40px;background:#F4F9FC;border:1px solid #DCE8F1;border-radius:14px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--nav-link);line-height:1.5}
.lfp-articulo__cta b{color:var(--ink)}
.lfp-articulo__cta .lfp-btn{font-size:14px;padding:13px 24px;flex-shrink:0}

@media (max-width:900px){
  .lfp-blog-grid{grid-template-columns:1fr}
  .lfp-post-head h1{font-size:26px;letter-spacing:-.6px}
  .lfp-post-head p{font-size:15.5px}
  .lfp-post-head__inner,.lfp-articulo{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* --------------------------------------------------------------------------
   9a. Corporativas: proceso, mapa de ciudades, contacto y presupuesto
   -------------------------------------------------------------------------- */
/* Indice de ancho completo (Donde servimos y Presupuesto no usan el de 230px) */
.lfp-hero--centroWide .lfp-hero__inner{padding:64px var(--gutter) 54px;max-width:1328px}
.lfp-hero--presu .lfp-hero__inner{padding:56px var(--gutter) 54px;max-width:1328px}
.lfp-hero--presu .lfp-pill--dark{padding:7px 16px}
.lfp-hero__title--presu{font-size:42px;letter-spacing:-1.6px;line-height:normal;margin-bottom:12px}

/* Como trabajamos */
.lfp-pasos{display:flex;flex-direction:column;gap:18px;padding-top:24px;padding-bottom:56px}
.lfp-paso{display:grid;grid-template-columns:80px 1fr;gap:24px;border:1px solid var(--line);border-radius:16px;padding:28px 30px;align-items:start}
.lfp-paso__n{font-weight:800;font-size:30px;color:var(--blue)}
.lfp-paso h2{font-size:19px;margin:0 0 8px;font-weight:700}
.lfp-paso p{font-size:14.5px;color:var(--text);line-height:1.7;margin:0;text-wrap:pretty}
.lfp-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.lfp-cifras b{display:block;font-weight:800;font-size:30px;color:var(--ink)}
.lfp-cifras span{display:block;font-size:13.5px;color:var(--text);font-weight:600}

/* Donde servimos */
.lfp-ciudades{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lfp-ciudad-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:block;color:var(--ink);transition:box-shadow .2s}
.lfp-ciudad-card:hover{box-shadow:0 14px 34px rgba(11,27,43,.1);color:var(--ink)}
.lfp-ciudad-card h2{font-size:16.5px;margin:0 0 4px;font-weight:700}
.lfp-ciudad-card p{font-size:12.5px;color:var(--text-soft);margin:0 0 8px}
.lfp-ciudad-card span{font-weight:700;font-size:13px;color:var(--link)}
.lfp-ciudades-nota{max-width:var(--wrap);margin:24px auto 0;font-size:13.5px;color:var(--text)}

/* Contacto */
.lfp-contacto{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:stretch;padding-top:56px;padding-bottom:64px}
.lfp-contacto__col{display:flex;flex-direction:column;gap:16px}
.lfp-card{border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.lfp-card__t{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:800;font-size:15px}
.lfp-dato{display:flex;gap:14px;align-items:center;padding:13px 0;border-top:1px solid #EDF3F8;color:var(--ink)}
.lfp-dato--alto{align-items:flex-start;padding-bottom:2px}
a.lfp-dato:hover{color:var(--link-hover)}
.lfp-dato__ic{width:38px;height:38px;border-radius:99px;background:#E3F4FD;display:grid;place-items:center;flex-shrink:0}
.lfp-dato__k{display:block;font-size:11.5px;color:var(--text-soft);font-weight:700;letter-spacing:.6px}
.lfp-dato__v{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.lfp-horario{display:flex;flex-direction:column;gap:2px;font-size:14px}
.lfp-horario>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #EDF3F8}
.lfp-horario b{color:var(--ink)}
.lfp-horario span{color:var(--text);text-align:right}
.lfp-horario .lfp-cerrado{color:#A7BACB}
.lfp-aviso-rapido{margin-top:16px;background:#F0F9FE;border-radius:10px;padding:12px 16px;font-size:13px;color:var(--link-hover);font-weight:600}
.lfp-mapa{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:64px}
.lfp-mapa__marco{height:420px;overflow:hidden}
.lfp-mapa iframe{width:100%;height:466px;border:0;display:block;margin-top:-2px}
.lfp-mapa__pie{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--text-soft);flex-wrap:wrap}
.lfp-mapa__pie b{color:var(--ink)}
.lfp-mapa__pie>span:last-child{display:flex;gap:16px;align-items:center;white-space:nowrap}

/* Formularios */
.lfp-form{border:1px solid var(--line);border-radius:18px;padding:28px 30px;display:flex;flex-direction:column}
.lfp-form h2{font-weight:800;font-size:17px;margin:0 0 6px}
.lfp-form__sub{font-size:13.5px;color:var(--text-soft);margin:0 0 18px}
.lfp-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lfp-input,.lfp-select,.lfp-textarea{border:1.5px solid var(--ghost-line);border-radius:9px;padding:12px;font-size:14px;font-weight:600;font-family:inherit;color:var(--ink);box-sizing:border-box;width:100%;background:#fff}
.lfp-input:focus,.lfp-select:focus,.lfp-textarea:focus{border-color:var(--blue);outline:none}
.lfp-textarea{margin-top:14px;resize:vertical}
.lfp-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:12.5px;color:var(--text-soft);font-weight:600}
.lfp-check input{margin-top:2px;flex-shrink:0}
.lfp-btn--form{width:100%;padding:15px;font-size:15px;font-weight:800;margin-top:auto;box-shadow:0 6px 18px rgba(18,165,232,.4)}
.lfp-hp{position:absolute;left:-9999px}
.lfp-form__aviso{border-radius:10px;padding:13px 16px;font-size:13.5px;font-weight:600;margin-bottom:18px;line-height:1.55}
.lfp-form__aviso--ok{background:#EAF8F0;border:1px solid #BFE5CE;color:#1E7A45}
.lfp-form__aviso--error{background:#FDF0F0;border:1px solid #F0CFCF;color:#A33A3A}

/* Presupuesto */
.lfp-presu{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;padding-top:44px;padding-bottom:72px}
.lfp-presu__col{display:flex;flex-direction:column;gap:20px}
.lfp-bloque{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.lfp-bloque__t{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.lfp-bloque__t h2{font-size:17px;margin:0;font-weight:800}
.lfp-bloque .lfp-check{margin-bottom:0}
.lfp-bloque__n{width:26px;height:26px;border-radius:99px;background:var(--blue);color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.lfp-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lfp-campo{display:flex;flex-direction:column;gap:6px}
.lfp-campo label{font-size:12.5px;font-weight:800;color:var(--nav-link)}
.lfp-campos .lfp-input,.lfp-campos .lfp-select,.lfp-presu .lfp-textarea{padding:11px}
.lfp-opts{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.lfp-opt{border:2px solid var(--line);background:#fff;border-radius:10px;padding:11px 16px;font-weight:700;font-size:13.5px;cursor:pointer}
.lfp-opt input{position:absolute;opacity:0;pointer-events:none}
.lfp-opt:has(input:checked){border-color:var(--blue)}
.lfp-opt:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
.lfp-drop{border:2px dashed var(--ghost-line);border-radius:12px;padding:26px;text-align:center;color:var(--text-soft);font-size:13.5px;font-weight:600}
.lfp-drop.is-over{border-color:var(--blue);background:#F6FCFF}
.lfp-drop label{color:var(--link);font-weight:700;cursor:pointer;text-decoration:underline}
.lfp-drop input[type=file]{display:none}
.lfp-drop__lista{margin-top:10px;font-size:12.5px;color:var(--nav-link)}
.lfp-drop__lista:empty{display:none;margin:0}
.lfp-presu__lateral{position:sticky;top:160px;display:flex;flex-direction:column;gap:16px}
.lfp-resumen{background:var(--ink);color:#fff;border-radius:16px;padding:26px}
.lfp-resumen__t{font-weight:800;font-size:17px;margin-bottom:16px}
.lfp-resumen__filas{display:flex;flex-direction:column;gap:10px;font-size:14px}
.lfp-resumen__filas>div{display:flex;justify-content:space-between;gap:12px}
.lfp-resumen__filas span{color:var(--on-dark-dim)}
.lfp-resumen__nota{border-top:1px solid #24405C;margin:18px 0;padding-top:16px;font-size:13px;color:var(--on-dark-dim);line-height:1.6}
.lfp-resumen__nota b{color:#fff}
.lfp-resumen__pie{text-align:center;font-size:12px;color:var(--on-dark-faint);margin-top:10px}
/* Icono y texto van juntos y centrados en la caja: alineados a la izquierda
   dejaban un hueco grande a la derecha. Igual en escritorio y en movil. */
.lfp-ayuda{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;gap:14px;align-items:center;justify-content:center}
.lfp-ayuda__ic{width:42px;height:42px;border-radius:99px;background:#E3F4FD;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.lfp-ayuda__tx{font-size:13px;line-height:1.5;color:var(--text);text-align:center}
.lfp-ayuda__tx b{color:var(--ink)}

@media (max-width:1080px){
  .lfp-ciudades{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .lfp-contacto,.lfp-presu{grid-template-columns:minmax(0,1fr)}
  .lfp-presu__lateral{position:static}
  .lfp-ciudades{grid-template-columns:repeat(2,1fr)}
  .lfp-cifras{grid-template-columns:1fr;gap:26px}
  .lfp-hero__title--presu{font-size:30px;letter-spacing:-1px}
  .lfp-hero--centroWide .lfp-hero__inner,.lfp-hero--presu .lfp-hero__inner{padding-top:36px;padding-bottom:48px}
}
@media (max-width:560px){
  .lfp-form__grid,.lfp-campos{grid-template-columns:1fr}
  .lfp-ciudades{grid-template-columns:1fr}
  .lfp-paso{grid-template-columns:1fr;gap:10px;padding:24px 22px}
  .lfp-opts{flex-direction:column}
  .lfp-opt{width:100%;text-align:center}
}

/* --------------------------------------------------------------------------
   9b. Paginas legales: hero propio, indice lateral fijo y secciones numeradas
   -------------------------------------------------------------------------- */
.lfp-hero--legal .lfp-hero__inner{padding-top:56px;padding-bottom:58px}
.lfp-hero--legal .lfp-crumbs{margin-bottom:18px}
.lfp-hero--legal .lfp-pill--dark{padding:7px 16px}
.lfp-hero__title--legal{font-size:46px;line-height:1.05;letter-spacing:-1.8px;margin-bottom:12px}
.lfp-hero__sub--legal{font-size:16.5px;line-height:1.6;margin:0}

.lfp-legal{display:grid;grid-template-columns:290px 1fr;gap:48px;align-items:start;padding-top:44px;padding-bottom:72px}
.lfp-legal__aside{position:sticky;top:160px}
.lfp-legal__indice{border:1px solid var(--line);border-radius:16px;padding:18px 14px}
.lfp-legal__indice-t{font-size:11.5px;font-weight:800;letter-spacing:1.2px;color:var(--text-soft);padding:0 12px 12px}
.lfp-legal__indice nav{display:flex;flex-direction:column;gap:2px}
.lfp-legal__indice a{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--nav-link)}
.lfp-legal__indice a:hover{background:#F0F9FE;color:var(--link-hover)}
.lfp-legal__indice a span:first-child{font-weight:800;font-size:11.5px;color:var(--blue);min-width:18px}

.lfp-legal__sec{border-top:1px solid var(--line-nav);padding:34px 0}
.lfp-legal__cab{display:flex;gap:16px;align-items:baseline;margin-bottom:14px}
.lfp-legal__num{font-weight:800;font-size:13px;color:var(--blue);background:#E3F4FD;border-radius:99px;padding:4px 11px}
.lfp-legal__sec h2{font-size:21px;margin:0;font-weight:800;letter-spacing:-.4px}
.lfp-legal__cuerpo{color:var(--nav-link)}
.lfp-legal__cuerpo p{font-size:15px;line-height:1.85;margin:0 0 16px;text-wrap:pretty}
.lfp-legal__cuerpo p.lfp-legal-p14{margin-bottom:14px}
.lfp-legal__cuerpo p.lfp-legal-p0{margin-bottom:0}
.lfp-legal__cuerpo b{color:var(--ink)}

.lfp-legal-intro{background:var(--band);border:1px solid #DCE8F1;border-radius:14px;padding:22px 26px;font-size:14.5px;line-height:1.75;color:var(--nav-link);font-style:italic;margin-bottom:8px}
.lfp-legal-nota{background:#F0F9FE;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;padding:18px 22px;font-size:14.5px;line-height:1.75;color:var(--nav-link)}
.lfp-legal-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#DCE8F1;border:1px solid #DCE8F1;border-radius:12px;overflow:hidden;margin-bottom:16px}
.lfp-legal-datos--2{grid-template-columns:repeat(2,1fr)}
.lfp-legal-datos>div{background:#fff;padding:16px 18px}
.lfp-legal-datos__k{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--text-soft);margin-bottom:5px}
.lfp-legal-datos__v{font-weight:700;font-size:14.5px;color:var(--ink)}
.lfp-legal-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.lfp-legal-cols--3{grid-template-columns:repeat(3,1fr)}
.lfp-legal-item{border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--nav-link);display:flex;gap:10px}
.lfp-legal-sub{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--text-soft);margin-bottom:12px}

.lfp-cookies-tabla{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}
.lfp-cookies-tabla__cab{display:grid;grid-template-columns:1.1fr 2fr 1fr;background:var(--band);font-size:11.5px;font-weight:800;letter-spacing:1px;color:var(--text-soft)}
.lfp-cookies-tabla__cab>div{padding:12px 18px}
.lfp-cookies-tabla__fila{display:grid;grid-template-columns:1.1fr 2fr 1fr;border-top:1px solid #EDF3F8;font-size:14px}
.lfp-cookies-tabla__fila>div{padding:14px 18px;font-weight:700}
.lfp-cookies-tabla__fila>div:nth-child(2){font-weight:400;color:var(--text);line-height:1.6}
.lfp-cookies-si{color:#1E9E58}
.lfp-cookies-dur{color:var(--link-hover)}

@media (max-width:900px){
  .lfp-legal{grid-template-columns:1fr;gap:28px}
  .lfp-legal__aside{position:static}
  .lfp-hero__title--legal{font-size:32px;letter-spacing:-1px}
  .lfp-legal-datos,.lfp-legal-datos--2,.lfp-legal-cols,.lfp-legal-cols--3{grid-template-columns:1fr}
  .lfp-cookies-tabla__cab{display:none}
  .lfp-cookies-tabla__fila{grid-template-columns:1fr;gap:0}
  .lfp-cookies-tabla__fila>div{padding-bottom:0}
  .lfp-cookies-tabla__fila>div:last-child{padding-bottom:14px}
}

/* --------------------------------------------------------------------------
   9d. Boton flotante de WhatsApp
   No esta en el diseno: se recupera del plugin de la web actual para que el
   cliente no pierda ese canal. Verde de WhatsApp e izquierda, como lo tenia.
   -------------------------------------------------------------------------- */
.lfp-wa{position:fixed;left:24px;bottom:24px;z-index:8900;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .35s,transform .35s,visibility .35s,bottom .3s}
.lfp-wa.is-visible{opacity:1;visibility:visible;transform:none}
.lfp-wa:hover{background:#1fb855;color:#fff;box-shadow:0 14px 34px rgba(37,211,102,.5)}
/* Mientras el aviso de cookies ocupa el pie, el boton se aparta. */
.lfp-wa.is-alto{bottom:150px}
/* --- Titular de portada en movil --------------------------------------------
   La palabra que rota va en su propia linea. En escritorio se le reserva el
   ancho de la alternativa mas larga para que el titular no baile (CLS), pero en
   movil ese ancho fijo dejaba un hueco enorme a su derecha, porque el texto
   envuelve y la palabra se queda corta dentro de su caja.
   En bloque se resuelven las dos cosas a la vez: no hay hueco y el numero de
   lineas del titular no cambia al rotar, que era el origen del salto. */
@media (max-width:820px){
  .lfp-home-title [data-fx-words]{display:block;white-space:nowrap}
}

/* --- Puente blog <-> catalogo (inc/puente-blog.php) --------------------------
   El blog traia el trafico y no llevaba a ninguna parte. Estos dos bloques son
   el paso de un lado a otro, y por eso se ven como algo aparte del texto. */
.lfp-puente{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:34px 0;padding:20px 24px;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:12px;background:var(--band)}
.lfp-puente__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.lfp-puente__t b{font-size:16px;color:var(--ink)}
.lfp-puente__t span{font-size:14.5px;color:var(--text)}
.lfp-puente__link{flex:none;font-weight:700;font-size:14.5px;color:var(--link);white-space:nowrap}
.lfp-puente__link:hover{color:var(--link-hover)}

.lfp-puente-blog{padding-bottom:56px}
.lfp-puente-blog .lfp-h2{margin-bottom:18px}
.lfp-puente-blog__lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lfp-puente-blog__lista a{display:flex;flex-direction:column;gap:6px;height:100%;
  padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .18s,transform .18s}
.lfp-puente-blog__lista a:hover{border-color:var(--blue);transform:translateY(-2px)}
.lfp-puente-blog__k{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft)}
.lfp-puente-blog__t{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35}

@media (max-width:820px){
  .lfp-puente-blog__lista{grid-template-columns:1fr}
  .lfp-puente{flex-direction:column;align-items:flex-start}
}

/* --- Preguntas frecuentes: el enunciado es un h3 -----------------------------
   Las preguntas iban sueltas dentro del <summary>. Como encabezado real las
   entienden mejor tanto Google como los modelos de lenguaje, que buscan el par
   pregunta-respuesta. El h3 no debe cambiar ni un pixel: hereda del summary. */
details summary h3{font:inherit;color:inherit;margin:0;padding:0;display:inline;letter-spacing:inherit}

/* --- Otras categorias del blog (category.php) -------------------------------
   Puente de vuelta al resto del blog para que una categoria no sea un callejon.
   Misma pildora que el resto del sitio; el numero va en un tono mas apagado. */
.lfp-cat-otras{padding-bottom:64px}
.lfp-cat-otras .lfp-h2{margin-bottom:16px}
.lfp-cat-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lfp-cat-lista a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:14px;
  color:var(--ink);background:#fff;transition:border-color .18s,color .18s}
.lfp-cat-lista a:hover{border-color:var(--blue);color:var(--blue)}
.lfp-cat-lista a span{font-size:12.5px;font-weight:700;color:var(--text-soft)}

/* --- Ajustes de ancho en pantallas estrechas --------------------------------
   El diseno era solo de escritorio y varias secciones usan `lfp-wrap--flush`,
   que no lleva margen lateral porque a 1264px de contenedor no hacia falta. En
   una pantalla estrecha eso deja el texto pegado al borde, que es lo que se veia
   en la portada, en los sectores y en el bloque de texto de abajo.
   Se le devuelve el margen solo aqui: el escritorio queda intacto. */
@media (max-width:1080px){
  .lfp-wrap--flush{padding-left:var(--gutter);padding-right:var(--gutter)}
}

/* Las cifras de la portada: dos columnas se quedan justas en un movil estrecho. */
@media (max-width:480px){
  .lfp-stats__grid{grid-template-columns:1fr;gap:22px}
}

@media (prefers-reduced-motion:reduce){.lfp-wa{transition:none}}
@media (max-width:560px){.lfp-wa{left:16px;bottom:16px;width:52px;height:52px}.lfp-wa.is-alto{bottom:180px}}
@media print{.lfp-wa{display:none}}

/* ==========================================================================
   10. Responsive
   Los tres primeros cortes son los del prototipo (actuaban sobre data-*).
   Del de 820px hacia abajo es nuevo: el diseno original no colapsaba nada.
   ========================================================================== */
/* Cada elemento de la barra superior se oculta junto a SU separador, para que
   no queden dos "|" seguidos. */
@media (max-width:1180px){
  .lfp-topbar__email,.lfp-topbar__sep--email{display:none}
}
@media (max-width:1080px){
  .lfp-nav__logo{width:60px;height:60px}
  .lfp-nav__links{gap:16px;font-size:13.5px;margin-right:16px}
  .lfp-btn--navCta{padding:10px 16px;font-size:13px}
  .lfp-grid--2{gap:36px}
}
@media (max-width:900px){
  .lfp-topbar__iso,.lfp-topbar__sep--iso{display:none}
  /* De los tres mensajes de la barra, el telefono es el que hay que conservar:
     es un negocio que vive de que le llamen. A partir de aqui no caben los tres
     (medido: a 600px el telefono se salia 24px de la pantalla), asi que cae el
     de presupuesto, que ademas se repite en el boton del menu. */
  .lfp-topbar__presu,.lfp-topbar__sep--presu{display:none}
  .lfp-nav__links{gap:12px;font-size:12.5px}
  .lfp-nav__logotext{display:none}
  .lfp-grid--2{grid-template-columns:1fr;gap:32px}
  .lfp-grid--4{grid-template-columns:repeat(2,1fr)}
  .lfp-hero__title{font-size:34px;letter-spacing:-1px}
  .lfp-ctaband{padding:34px 30px;gap:26px}
  .lfp-footer__grid{grid-template-columns:1fr 1fr;gap:30px}
  .lfp-split{grid-template-columns:1fr;gap:32px}
  .lfp-stats__inner{grid-template-columns:1fr;gap:36px}
  .lfp-seoblock__cols{grid-template-columns:1fr;gap:18px}
  .lfp-faq{grid-template-columns:1fr}
  .lfp-grid--prod,.lfp-grid--steps{grid-template-columns:repeat(2,1fr)}
  .lfp-ctaband--home{flex-wrap:wrap;padding:34px 30px}
  .lfp-ctaband--home h2{font-size:24px}
  .lfp-banner{flex-direction:column;align-items:flex-start;gap:20px}
  .lfp-h2--xl{font-size:28px}
  .lfp-h2--lg{font-size:27px}
}
@media (max-width:820px){
  /* La barra superior se queda con lo unico que se pulsa desde un movil:
     telefono y correo. Los tres mensajes informativos no caben —a 600px el
     telefono ya se salia de la pantalla— y el de presupuesto se repite en el
     boton del menu. El email vuelve a aparecer aqui: se oculta a partir de
     1180px por espacio, no porque estorbe. */
  /* Nav fijo opaco en movil: el efecto translucido del diseno deja ver el texto
     de debajo al hacer scroll y en una pantalla pequena se lee fatal. */
  .lfp-nav,.lfp-nav--glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lfp-topbar__hi,
  .lfp-topbar__presu,.lfp-topbar__sep--presu,
  .lfp-topbar__iso,.lfp-topbar__sep--iso,
  .lfp-topbar__sep--tel{display:none}
  .lfp-topbar__email,.lfp-topbar__sep--email{display:inline}
  .lfp-topbar__inner{justify-content:center;gap:10px}
  .lfp-nav__links{display:none}
  .lfp-burger{display:flex}
  .lfp-nav__actions .lfp-btn--navCta{display:none}
  /* El boton de menu va a la derecha del todo.
     Ojo con la especificidad: la regla base `.lfp-nav__links+.lfp-nav__actions`
     pone `margin-left:0`, y sigue aplicando aqui porque el menu se oculta con
     display:none pero NO desaparece del HTML, asi que el selector adyacente
     sigue casando. Un `.lfp-nav__actions` a secas (una clase) pierde contra dos
     clases, y estar dentro de una media query no suma especificidad: hay que
     repetir el mismo selector. */
  .lfp-nav__actions,
  .lfp-nav__links+.lfp-nav__actions{margin-left:auto}
  .lfp-nav__logotext{display:block}
  .lfp-nav__logo{width:56px;height:56px}
  /* Separa la marca del boton de menu: sin esto se tocan en pantallas estrechas.
     El gap solo aqui, para no alterar el espaciado exacto del diseno en escritorio. */
  .lfp-nav__inner{gap:14px}
}
@media (max-width:400px){
  .lfp-nav__logotext b{font-size:14px}
  .lfp-nav__logotext span{font-size:8.5px;letter-spacing:1.4px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .lfp-grid--3{grid-template-columns:repeat(2,1fr)}
  .lfp-section{padding-top:48px;padding-bottom:48px}
  .lfp-band{padding:48px 0;margin-top:40px}
  .lfp-hero__title{font-size:29px}
  .lfp-hero__sub{font-size:15.5px}
  .lfp-h2{font-size:23px}
  .lfp-panel{padding:26px 24px}
  .lfp-ctaband{padding:30px 24px}
  .lfp-ctaband h2{font-size:22px}
  .lfp-footer__bottom{flex-direction:column;align-items:flex-start}
  /* Hueco para el boton flotante de WhatsApp: al final de la pagina se sienta
     justo encima del aviso de copyright y lo tapa. */
  .lfp-footer{padding-bottom:84px}
  .lfp-grid--sect{grid-template-columns:repeat(2,1fr)}
  .lfp-stats__grid{gap:24px}
  .lfp-stat b{font-size:32px}
  .lfp-quote{padding-left:20px}
  .lfp-quote p{font-size:17px}
  .lfp-proceso{padding:48px 0}
  .lfp-seoblock{padding:44px 0}
  .lfp-marquee{gap:40px}
  .lfp-home-hero__head{padding-top:40px}
}
@media (max-width:560px){
  .lfp-grid--3,.lfp-grid--4{grid-template-columns:1fr}
  /* Dos columnas en vez de una: en una sola, los cuatro bloques hacen una tira
     larguisima con mucho hueco a la derecha. La marca y el contacto van a lo
     ancho porque su texto no entra en media columna. */
  .lfp-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .lfp-footer__grid>*:first-child,
  .lfp-footer__contact{grid-column:1 / -1}
  .lfp-footer p{max-width:none}
  .lfp-footer p{max-width:none}
  .lfp-topbar{font-size:11.5px;padding:7px var(--gutter)}
  /* En columna: con los botones a ancho completo en fila, sus anchos se suman
     y desbordan el contenedor (aparecia scroll horizontal a 390px). */
  .lfp-actions,.lfp-ctaband__actions,.lfp-hero__actions{flex-direction:column;width:100%}
  .lfp-actions .lfp-btn,.lfp-ctaband__actions .lfp-btn,.lfp-hero__actions .lfp-btn{width:100%}
  .lfp-grid--prod,.lfp-grid--steps,.lfp-grid--sect{grid-template-columns:1fr}
  .lfp-checks{gap:14px}
  .lfp-banner{padding:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------------------------------------------------- Modal de confirmacion */
.lfp-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.lfp-modal__backdrop{position:absolute;inset:0;background:rgba(11,27,43,.5);-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px);animation:lfpModalFade .2s ease}
.lfp-modal__card{position:relative;background:#fff;border-radius:18px;padding:34px 30px 30px;max-width:410px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(11,27,43,.28);animation:lfpModalPop .24s cubic-bezier(.2,.8,.3,1)}
.lfp-modal__icon{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;line-height:1;margin:0 auto 16px;color:#fff}
.lfp-modal__card--ok .lfp-modal__icon{background:#1E9E54}
.lfp-modal__card--error .lfp-modal__icon{background:#C0453F}
.lfp-modal__title{font-weight:800;font-size:20px;margin:0 0 8px;color:var(--ink)}
.lfp-modal__text{font-size:14.5px;line-height:1.6;color:var(--text-soft);margin:0 0 22px}
.lfp-modal__btn{display:inline-block;background:#0b5ed7;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 32px;border-radius:10px;transition:background .15s,transform .15s}
.lfp-modal__btn:hover,.lfp-modal__btn:focus,.lfp-modal__btn:visited{background:#0a52bd;color:#fff;transform:translateY(-1px)}
@keyframes lfpModalFade{from{opacity:0}to{opacity:1}}
@keyframes lfpModalPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lfp-modal__backdrop,.lfp-modal__card{animation:none}}

/* --------------------------- Barra de administracion de WordPress (logueado) */
/* Evita el hueco bajo la cabecera cuando WP muestra su barra de admin.        */
/* Solo aplica al admin logueado; el visitante no tiene esta barra.            */
.admin-bar .lfp-topbar{top:32px}
@media screen and (max-width:782px){.admin-bar .lfp-topbar{top:46px}}

/* Contacto: el form no se estira a la altura de la columna de info, para que el */
/* boton no quede empujado abajo (margin-top:auto) dejando un hueco vacio.        */
.lfp-contacto .lfp-form{align-self:start}