/* ==========================================================================
   TRAFFIC MARKETING PRO — sistema de diseno
   Portado 1:1 desde el boceto de Seonergy (Quicksand + Karla, confeti,
   pildoras, rejillas a sangre). Paleta y activos reales de la marca.
   ========================================================================== */
:root{
  --navy:#0b1f4d;
  --navy-2:#12296f;
  --blue:#046bd2;
  --mint:#5ed6c1;
  --mint-dk:#3cbfa9;
  --lime:#a8d629;
  --ink:#424141;
  --grey:#9d9d9d;
  --grey-2:#777777;
  --line:#e5e4e4;
  --paper:#ffffff;
  --soft:#f7f7f7;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(18px,4vw,70px);
  --maxw:1300px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--grey);
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.9;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
p{margin:0;}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
::selection{background:var(--mint);color:#fff;}

h1,h2,h3,h4,h5,h6{
  margin:0;font-family:'Quicksand',sans-serif;font-weight:700;color:var(--ink);
  line-height:1.35;letter-spacing:.06em;
}
.h1{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.16;letter-spacing:.045em;}
.h2{font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.36;letter-spacing:.055em;}
.h3{font-size:clamp(1.1rem,1.5vw,1.32rem);letter-spacing:.05em;}
.h4{font-size:1.02rem;letter-spacing:.045em;}
.h5{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint-dk);}
.lead{font-size:1.02rem;line-height:1.95;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.pad{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);}
.pad-sm{padding-top:clamp(38px,4.4vw,72px);padding-bottom:clamp(38px,4.4vw,72px);}
.soft{background:var(--soft);}
.center{text-align:center;}
.sec-head{max-width:660px;margin:0 auto clamp(34px,4vw,64px);text-align:center;}
.sec-head .h2{margin-bottom:16px;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--ink);padding:12px 20px;border-radius:0 0 10px 0;}
.skip-link:focus{left:0;}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;}

/* ---------- botones pildora ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 34px;border-radius:100px;border:2px solid transparent;
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.88rem;letter-spacing:.06em;
  white-space:nowrap;cursor:pointer;
  transition:background-color 260ms var(--ease),color 260ms var(--ease),border-color 260ms var(--ease),transform 160ms var(--ease);
}
.btn:active{transform:scale(.97);}
.btn-mint{background:var(--mint);color:#fff;}
.btn-mint:hover{background:var(--mint-dk);color:#fff;}
.btn-white{background:#fff;color:var(--ink);}
.btn-white:hover{background:var(--mint);color:#fff;}
.btn-line{border-color:var(--line);color:var(--ink);}
.btn-line:hover{border-color:var(--mint);color:var(--mint-dk);}
.btn-line-light{border-color:rgba(255,255,255,.4);color:#fff;}
.btn-line-light:hover{background:#fff;color:var(--navy);}
.btn-sm{padding:10px 24px;font-size:.8rem;}
.ico{width:19px;height:19px;flex:none;}
.ico-sm{width:15px;height:15px;flex:none;}

/* ---------- confeti ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.confetti .cf-i{position:absolute;display:block;will-change:transform;}
.confetti .cf-i>span{position:relative;display:block;transform:rotate(var(--tm-rot,0deg));}
.cf-dash{width:34px;height:7px;border-radius:5px;background:#1d1d1d;}
.cf-dot{width:26px;height:26px;border-radius:50%;background:var(--mint);}
.cf-dot::after{content:"";position:absolute;left:9px;top:11px;width:9px;height:2px;background:#fff;border-radius:2px;transform:rotate(-40deg);}
.cf-wave{width:38px;height:16px;background:var(--lime);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 11 8 4l6 7 6-7 6 7 6-7 6 7' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 11 8 4l6 7 6-7 6 7 6-7 6 7' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.cf-light .cf-dash{background:#fff;opacity:.85;}

/* ==========================================================================
   CABECERA
   ========================================================================== */
#hdr{position:absolute;top:0;left:0;right:0;z-index:80;transition:background-color 340ms var(--ease),box-shadow 340ms var(--ease);}
#hdr.fixed{position:fixed;background:#fff;box-shadow:0 2px 24px rgba(11,31,77,.09);}
body.tm-inner #hdr{position:absolute;background:transparent;}
body.tm-inner #hdr.fixed{position:fixed;background:#fff;}
.bar{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);padding-top:22px;padding-bottom:22px;transition:padding 300ms var(--ease);}
#hdr.fixed .bar{padding-top:14px;padding-bottom:14px;}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none;}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--navy);}
.brand b{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.09em;color:#fff;transition:color 300ms var(--ease);}
.brand b span{display:block;font-size:.6rem;font-weight:500;letter-spacing:.28em;color:var(--mint);}
#hdr.fixed .brand b{color:var(--ink);}
.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-left:auto;}
.nav a{
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:.08em;
  color:rgba(255,255,255,.9);transition:color 240ms var(--ease);
}
.nav a:hover,.nav .current-menu-item>a{color:var(--mint);}
#hdr.fixed .nav a{color:var(--ink);}
#hdr.fixed .nav a:hover,#hdr.fixed .nav .current-menu-item>a{color:var(--mint-dk);}
.nav ul{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
.nav li{position:relative;}
.nav .sub-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  display:block;min-width:230px;background:#fff;border-radius:14px;padding:12px 0;
  box-shadow:0 24px 50px -28px rgba(11,31,77,.6);opacity:0;visibility:hidden;
  transition:opacity 240ms var(--ease),transform 300ms var(--ease),visibility 240ms;z-index:5;
}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%);}
.nav .sub-menu li{width:100%;}
.nav .sub-menu a{display:block;padding:9px 22px;color:var(--ink)!important;font-size:.83rem;}
.nav .sub-menu a:hover{color:var(--mint-dk)!important;background:var(--soft);}

/* selector de mercado */
.geo{display:inline-flex;align-items:center;background:rgba(255,255,255,.16);border-radius:100px;padding:3px;gap:2px;}
#hdr.fixed .geo{background:var(--soft);}
.geo a{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.06em;
  color:rgba(255,255,255,.85);transition:background-color 240ms var(--ease),color 240ms var(--ease);
}
#hdr.fixed .geo a{color:var(--grey-2);}
.geo a.on,#hdr.fixed .geo a.on{background:var(--mint);color:#fff;}
.fl{display:inline-block;width:20px;height:14px;border-radius:3px;flex:none;vertical-align:-2px;overflow:hidden;}
.fl svg{width:100%;height:100%;}

.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center;}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background-color 200ms;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform 300ms var(--ease);}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
#hdr.fixed .burger span,#hdr.fixed .burger span::before,#hdr.fixed .burger span::after{background:var(--ink);}
.burger.on span{background:transparent!important;}
.burger.on span::before{transform:translateY(6px) rotate(45deg);}
.burger.on span::after{transform:translateY(-6px) rotate(-45deg);}

#menu{
  position:fixed;inset:0;z-index:90;background:#fff;overflow-y:auto;padding:22px var(--gutter) 60px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 280ms var(--ease),transform 380ms var(--ease),visibility 280ms;
}
#menu.on{opacity:1;visibility:visible;transform:none;}
.m-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.m-head .brand b{color:var(--ink);}
#menu li{border-bottom:1px solid var(--line);}
#menu li a{display:block;padding:16px 2px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:.06em;color:var(--ink);}
#menu .sub-menu{padding-left:16px;}
#menu .sub-menu a{font-size:1rem;font-weight:500;color:var(--grey-2);}
.m-foot{margin-top:28px;display:grid;gap:12px;}
.m-foot .geo{background:var(--soft);align-self:flex-start;}
.m-foot .geo a{color:var(--grey-2);}
.m-foot .geo a.on{color:#fff;}

/* ==========================================================================
   PORTADA
   ========================================================================== */
.hero{position:relative;min-height:min(92vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--navy);}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,31,77,.86) 0%,rgba(11,31,77,.6) 45%,rgba(18,41,111,.8) 100%);}
.hero-in{position:relative;z-index:2;width:100%;text-align:center;padding-top:110px;padding-bottom:70px;}
.hero-in .h5{color:var(--mint);margin-bottom:20px;}
.hero-in .h1{color:#fff;max-width:19ch;margin:0 auto 22px;}
.hero-in .h1 em{font-style:normal;color:var(--mint);}
.hero-in p{color:rgba(255,255,255,.82);max-width:60ch;margin:0 auto 34px;font-size:1.02rem;}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- pilares ---------- */
.pill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,50px);text-align:center;}
.pill-i .ic{display:block;width:56px;height:56px;margin:0 auto 20px;color:var(--mint);}
.pill-i .ic svg{width:100%;height:100%;}
.pill-i h3{margin-bottom:12px;}
.pill-i p{font-size:.92rem;}

/* ---------- el sistema ---------- */
.sys{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);position:relative;}
.sys::before{
  content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 10px,transparent 10px 20px);opacity:.5;
}
.step{position:relative;text-align:center;padding:0 6px;}
.step .n{
  width:92px;height:92px;margin:0 auto 22px;border-radius:50%;background:#fff;
  border:2px solid var(--mint);display:grid;place-items:center;position:relative;z-index:2;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.9rem;color:var(--navy);
  transition:background-color 340ms var(--ease),color 340ms var(--ease),transform 340ms var(--ease);
}
.step:hover .n{background:var(--mint);color:#fff;transform:translateY(-4px);}
.step b{
  display:block;font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;
}
.step span{display:block;font-size:.92rem;color:var(--grey);}
.sys-foot{text-align:center;margin-top:clamp(30px,3.4vw,52px);}
.sys-foot button{
  display:inline-flex;align-items:center;gap:10px;font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:.86rem;letter-spacing:.06em;color:var(--navy);border-bottom:2px solid var(--mint);padding-bottom:6px;
  transition:color 240ms var(--ease);
}
.sys-foot button:hover{color:var(--mint-dk);}
.sys-foot svg{width:16px;height:16px;}

.lb{position:fixed;inset:0;z-index:200;background:rgba(6,17,44,.9);display:grid;place-items:center;
  padding:clamp(20px,4vw,60px);opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 300ms;}
.lb.on{opacity:1;visibility:visible;}
.lb img{max-width:min(560px,100%);max-height:100%;width:auto;border-radius:14px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);}
.lb .cerrar{position:absolute;top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;}
.lb .cerrar:hover{background:rgba(255,255,255,.26);}
.lb .cerrar svg{width:18px;height:18px;}

.claim-card{
  background:var(--navy);color:#fff;border-radius:20px;padding:clamp(28px,3.4vw,46px);
  position:relative;overflow:hidden;
}
.claim-card .h4{color:#fff;margin-bottom:10px;}
.claim-card p{color:rgba(255,255,255,.74);font-size:.92rem;}
.claim-card .big{
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(2.2rem,4.4vw,3.4rem);
  color:var(--mint);line-height:1;letter-spacing:.02em;margin-bottom:12px;
}
.claim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);}

.tools{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;}
.tools span{
  border:1px solid var(--line);border-radius:100px;padding:8px 17px;font-size:.85rem;
  font-family:'Quicksand',sans-serif;font-weight:600;letter-spacing:.03em;color:var(--ink);background:#fff;
  transition:border-color 220ms var(--ease),color 220ms var(--ease);
}
.tools span:hover{border-color:var(--mint);color:var(--mint-dk);}

/* ---------- bloques partidos ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;}
.split .media{position:relative;overflow:hidden;min-height:340px;background:var(--soft);}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split .media.contain{background:#fff;}
.split .media.contain img{object-fit:contain;padding:clamp(20px,3vw,44px);}
.split .copy{position:relative;padding:clamp(34px,5vw,86px) clamp(24px,4.4vw,80px);}
.split .copy .h2{margin-bottom:18px;}
.split .copy p+p{margin-top:14px;}
.split .copy .btn{margin-top:30px;}
.claim{font-family:'Quicksand',sans-serif;font-weight:700;color:var(--ink);font-size:1.06rem;letter-spacing:.03em;line-height:1.7;}

.checks{display:grid;gap:13px;margin-top:26px;}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;}
.checks .b{width:22px;height:22px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;flex:none;margin-top:5px;}
.checks .b svg{width:11px;height:11px;}
.checks.rows{gap:0;}
.checks.rows li{border-bottom:1px solid var(--line);padding:18px 0;align-items:center;}
.checks.rows li:last-child{border-bottom:0;}
.checks.rows b{font-family:'Quicksand',sans-serif;color:var(--ink);letter-spacing:.03em;}

/* ---------- servicios ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px);}
.serv{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 380ms var(--ease),box-shadow 380ms var(--ease),border-color 380ms var(--ease);
}
.serv:hover{transform:translateY(-5px);box-shadow:0 22px 50px -30px rgba(11,31,77,.55);border-color:transparent;}
.serv .ic{
  display:block;width:52px;height:52px;color:var(--mint);margin-bottom:22px;
  transition:transform 380ms var(--ease);
}
.serv:hover .ic{transform:translateY(-3px) scale(1.05);}
.serv .ic svg{width:100%;height:100%;}
.serv .bd{padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;flex:1;}
.serv h3{margin-bottom:12px;}
.serv p{font-size:.9rem;line-height:1.85;}
.serv .kicker{margin-top:14px;font-family:'Quicksand',sans-serif;font-weight:700;color:var(--mint-dk);font-size:.84rem;letter-spacing:.05em;}
.serv .more{margin-top:18px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.84rem;letter-spacing:.06em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
.serv:hover .more{color:var(--mint-dk);}

/* ---------- muro de marcas ---------- */
.brands{background:var(--soft);position:relative;overflow:hidden;}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,20px);}
.logos img{
  width:100%;height:84px;object-fit:contain;background:#fff;border-radius:14px;padding:14px 16px;
  opacity:.78;transition:opacity 320ms var(--ease),transform 320ms var(--ease),box-shadow 320ms var(--ease);
}
.logos img:hover{opacity:1;transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(11,31,77,.6);}

/* ---------- ferias ---------- */
.ferias{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.ferias>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;}
.ferias::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,31,77,.94),rgba(11,31,77,.6));}
.ferias .in{position:relative;z-index:2;max-width:640px;}
.ferias .h2,.ferias .h3{color:#fff;}
.ferias p{color:rgba(255,255,255,.8);}
.ferias .h5{color:var(--mint);}
.ferias .wrap{position:relative;z-index:2;}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px);}
.post{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px 30px;display:flex;flex-direction:column;
  transition:box-shadow 380ms var(--ease),transform 380ms var(--ease);}
.post:hover{transform:translateY(-4px);box-shadow:0 22px 50px -32px rgba(11,31,77,.5);}
.post .date{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-dk);margin-bottom:14px;}
.post h3{margin-bottom:12px;line-height:1.45;}
.post p{font-size:.9rem;}
.post .more{margin-top:auto;padding-top:18px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.84rem;letter-spacing:.06em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;}
.post:hover .more{color:var(--mint-dk);}
.post .thumb{margin:-26px -28px 22px;border-radius:16px 16px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--soft);}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease);}
.post:hover .thumb img{transform:scale(1.04);}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,72px);align-items:start;}
.office{border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin-bottom:16px;transition:border-color 300ms var(--ease),box-shadow 300ms var(--ease);}
.office.on{border-color:var(--mint);box-shadow:0 18px 44px -32px rgba(94,214,193,.9);}
.office h3{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.office ul{display:grid;gap:9px;}
.office li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;}
.office svg{width:16px;height:16px;color:var(--mint);flex:none;margin-top:6px;}
.office a{color:var(--ink);}
.office a:hover{color:var(--mint-dk);}

.form{display:grid;gap:16px;}
.fld input,.fld textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:.94rem;background:#fff;
  transition:border-color 220ms var(--ease);
}
.fld textarea{resize:vertical;min-height:110px;}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--mint);}
.fld .err{display:none;font-size:.78rem;color:#d05b5b;margin-top:6px;}
.fld.bad input,.fld.bad textarea{border-color:#d05b5b;}
.form-note{font-size:.8rem;}
.form-ok{background:rgba(94,214,193,.14);border:1px solid var(--mint);border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--ink);}
.form-ko{background:rgba(208,91,91,.09);border:1px solid #d05b5b;border-radius:12px;padding:14px 18px;font-size:.9rem;color:#a33;}
.hp-field{position:absolute!important;left:-9999px!important;}

/* ==========================================================================
   PIE
   ========================================================================== */
.site-footer{background:var(--navy);color:rgba(255,255,255,.68);padding-top:clamp(48px,5.4vw,84px);padding-bottom:26px;}
.f-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14);}
.f-brand .brand b{color:#fff;}
.f-brand p{margin-top:18px;font-size:.92rem;max-width:34ch;}
.f-soc{display:flex;gap:9px;margin-top:20px;}
.f-soc a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background-color 220ms,border-color 220ms;}
.f-soc a:hover{background:var(--mint);border-color:var(--mint);}
.f-soc svg{width:15px;height:15px;color:rgba(255,255,255,.85);}
.f-col h5{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);margin:0 0 20px;}
.f-col li{margin-bottom:10px;}
.f-col a{font-size:.9rem;transition:color 200ms;}
.f-col a:hover{color:var(--mint);}
.f-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:.82rem;color:rgba(255,255,255,.46);}

/* ---------- aparicion ---------- */
html.tm-js .rv{opacity:0;transform:translateY(20px);transition:opacity 760ms var(--ease),transform 760ms var(--ease);}
.rv.in{opacity:1;transform:none;}
html.tm-js .rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.tm-js .rv{opacity:1;transform:none;transition:none;}*{scroll-behavior:auto!important;}}

/* ==========================================================================
   PAGINAS INTERNAS
   ========================================================================== */
.page-hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-top:clamp(132px,13vw,186px);          /* deja respirar bajo la cabecera flotante */
  padding-bottom:clamp(54px,6vw,88px);
}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;}
/* Mismo degradado diagonal que la portada: sin el, el azul plano se funde con la cabecera. */
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(11,31,77,.9) 0%,rgba(11,31,77,.62) 45%,rgba(18,41,111,.88) 100%);
}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero .h5{color:var(--mint);margin-bottom:14px;}
.page-hero h1{color:#fff;max-width:20ch;}
.page-hero .sub{color:rgba(255,255,255,.8);max-width:62ch;margin-top:18px;font-size:1.02rem;}

.crumbs{font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:20px;letter-spacing:.08em;text-transform:uppercase;font-family:'Quicksand',sans-serif;font-weight:600;}
.crumbs a{color:rgba(255,255,255,.8);transition:color 200ms var(--ease);}
.crumbs a:hover{color:var(--mint);}
.crumbs span+span::before{content:"";display:inline-block;width:14px;height:1px;background:rgba(255,255,255,.35);vertical-align:middle;margin:0 10px;}

.prose{max-width:min(820px,100%);}
.prose.wide{max-width:none;}
.prose>*+*{margin-top:20px;}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.95rem);letter-spacing:.05em;line-height:1.36;margin-top:clamp(38px,4vw,58px);}
.prose h3{font-size:clamp(1.12rem,1.5vw,1.34rem);letter-spacing:.05em;margin-top:clamp(28px,3vw,42px);}
.prose h4{font-size:1.04rem;letter-spacing:.045em;margin-top:26px;}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:14px;}
.prose p{font-size:1rem;line-height:1.95;}
.prose a{color:var(--mint-dk);border-bottom:1px solid rgba(60,191,169,.4);transition:border-color 200ms,color 200ms;}
.prose a:hover{color:var(--navy);border-color:var(--navy);}
.prose strong,.prose b{color:var(--ink);font-weight:700;}
.prose ul,.prose ol{padding-left:0;display:grid;gap:11px;}
.prose ul li{position:relative;padding-left:30px;font-size:1rem;line-height:1.85;}
.prose ul li::before{content:"";position:absolute;left:4px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--mint);}
.prose ol{counter-reset:tmol;}
.prose ol li{position:relative;padding-left:38px;font-size:1rem;line-height:1.85;counter-increment:tmol;}
.prose ol li::before{
  content:counter(tmol);position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;
  background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;
  font-family:'Quicksand',sans-serif;font-weight:700;font-size:.78rem;color:var(--navy);
}
.prose blockquote{
  margin:clamp(26px,3vw,40px) 0;padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,38px);
  background:var(--soft);border-left:4px solid var(--mint);border-radius:0 16px 16px 0;
}
.prose blockquote p{font-family:'Quicksand',sans-serif;font-weight:600;color:var(--ink);font-size:1.06rem;line-height:1.7;letter-spacing:.02em;}
.prose blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:.85rem;color:var(--grey);}
.prose img,.prose figure img{border-radius:16px;}
.prose figure{margin:clamp(28px,3vw,44px) 0;}
.prose figcaption{margin-top:12px;font-size:.84rem;color:var(--grey);text-align:center;}
.prose hr{border:0;border-top:1px solid var(--line);margin:clamp(34px,4vw,56px) 0;}
.prose code{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:.88em;color:var(--navy);}
.prose pre{background:var(--navy);color:#fff;border-radius:14px;padding:22px 24px;overflow-x:auto;font-size:.86rem;line-height:1.7;}
.prose pre code{background:none;border:0;color:inherit;padding:0;}
.prose table{width:100%;border-collapse:collapse;font-size:.93rem;}
.prose table th,.prose table td{border:1px solid var(--line);padding:12px 16px;text-align:left;}
.prose table th{background:var(--soft);font-family:'Quicksand',sans-serif;font-weight:700;color:var(--ink);letter-spacing:.04em;}
.prose .wp-block-image,.prose .wp-caption{max-width:100%;}
.prose .alignleft{float:left;margin:6px 26px 20px 0;}
.prose .alignright{float:right;margin:6px 0 20px 26px;}
.prose .aligncenter{margin-left:auto;margin-right:auto;}
.prose iframe,.prose video{max-width:100%;border-radius:16px;}
.prose .wp-block-embed__wrapper{position:relative;}

.entry-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:.82rem;color:var(--grey);margin-bottom:26px;}
.entry-meta .date{font-family:'Quicksand',sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint-dk);}
.entry-cover{margin-bottom:clamp(30px,3.4vw,48px);border-radius:20px;overflow:hidden;aspect-ratio:16/8;background:var(--soft);}
.entry-cover img{width:100%;height:100%;object-fit:cover;}

.tm-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:clamp(40px,4.4vw,64px);}
.tm-pagination .page-numbers{
  min-width:42px;height:42px;padding:0 14px;border-radius:100px;border:1px solid var(--line);
  display:inline-grid;place-items:center;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);
  transition:border-color 220ms var(--ease),background-color 220ms var(--ease),color 220ms var(--ease);
}
.tm-pagination .page-numbers:hover{border-color:var(--mint);color:var(--mint-dk);}
.tm-pagination .page-numbers.current{background:var(--mint);border-color:var(--mint);color:#fff;}

.tm-search{display:flex;gap:10px;max-width:520px;}
.tm-search input[type=search]{flex:1;border:1px solid var(--line);border-radius:100px;padding:13px 22px;font-size:.94rem;background:#fff;}
.tm-search input[type=search]:focus{outline:0;border-color:var(--mint);}

.tm-404{text-align:center;max-width:600px;margin:0 auto;}
.tm-404 .big{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(4rem,12vw,8rem);line-height:1;color:var(--mint);letter-spacing:.02em;}
.tm-404 .tm-search{margin:30px auto 0;}

.tm-cta{background:var(--navy);color:#fff;position:relative;overflow:hidden;text-align:center;}
.tm-cta .h2{color:#fff;margin-bottom:16px;}
.tm-cta p{color:rgba(255,255,255,.8);max-width:58ch;margin:0 auto 30px;}
.tm-cta .wrap{position:relative;z-index:2;}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,32px);}
.card-grid.two{grid-template-columns:repeat(2,1fr);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1100px){
  .logos{grid-template-columns:repeat(4,1fr);}
  .serv-grid,.card-grid{grid-template-columns:repeat(2,1fr);}
  .posts{grid-template-columns:repeat(2,1fr);}
  .pill-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:900px){
  .nav,.hdr-geo-desk{display:none;}
  .burger{display:flex;}
  .sys{grid-template-columns:1fr 1fr;}
  .sys::before{display:none;}
  .claim-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split .media{width:100%;min-height:0;aspect-ratio:16/10;}
  .contact{grid-template-columns:1fr;}
  .f-grid{grid-template-columns:1fr 1fr;}
  .prose .alignleft,.prose .alignright{float:none;margin:26px auto;}
}
@media(max-width:760px){
  .confetti{display:none;}
}
@media(max-width:620px){
  .logos{grid-template-columns:repeat(2,1fr);}
  .serv-grid,.posts,.card-grid,.card-grid.two{grid-template-columns:1fr;}
  .pill-grid{grid-template-columns:1fr;gap:34px;}
  .sys{grid-template-columns:1fr;gap:34px;}
  .f-grid{grid-template-columns:1fr;}
}

.f-legal ul{display:flex;gap:16px;flex-wrap:wrap;}
.f-legal a{font-size:.82rem;}
.f-legal a:hover{color:var(--mint);}
.post h3 a,.post h2 a{color:inherit;}
.post h3 a:hover,.post h2 a:hover{color:var(--mint-dk);}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:.94rem;background:#fff;
}
.comment-form textarea{min-height:130px;resize:vertical;}
.comment-form p{margin-top:14px;}

/* ==========================================================================
   LOGOTIPO EN DOS VERSIONES
   Las dos van superpuestas y se cruzan por opacidad. Sobre fondo oscuro se ve
   la clara; en cuanto la cabecera se vuelve blanca al hacer scroll, entra la
   de color. Con una sola version el logo blanco se perdia sobre blanco.
   ========================================================================== */
.brand.brand-logo{position:relative;display:inline-flex;align-items:center;flex:none;}
.brand.brand-logo .brand-img{
  width:auto;height:44px;max-width:230px;border-radius:0;object-fit:contain;background:none;
  transition:opacity 240ms var(--ease);
}
.brand.brand-logo .brand-oscuro{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;}

/* Cabecera fija (fondo blanco) y menu movil (panel blanco): version de color. */
#hdr.fixed .brand.brand-logo .brand-claro,
#menu .brand.brand-logo .brand-claro{opacity:0;}
#hdr.fixed .brand.brand-logo .brand-oscuro,
#menu .brand.brand-logo .brand-oscuro{opacity:1;}

/* Pie (fondo azul): version clara. */
.site-footer .brand.brand-logo .brand-claro{opacity:1;}
.site-footer .brand.brand-logo .brand-oscuro{opacity:0;}
.site-footer .brand.brand-logo .brand-img{height:40px;}

@media(max-width:620px){.brand.brand-logo .brand-img{height:36px;max-width:170px;}}

/* ==========================================================================
   ICONOS CON VIDA
   El JS dibuja la entrada y mueve el conjunto con un muelle. Aqui vive el
   gesto que explica cada concepto: una sola vez al aparecer (.tm-vivo) y de
   nuevo al pasar el raton (.tm-atento). Solo transform y opacity.
   ========================================================================== */
.pill-i .ic,
.serv .ic{ will-change:auto; }
.pill-i .ic.tm-atento,
.serv .ic.tm-atento{ will-change:transform; }

/* El JS ya controla el transform del contenedor: que no compita con el hover del boceto. */
.serv:hover .ic.tm-atento{ transform:none; }

.tm-hand,.tm-drop,.tm-bar,.tm-lift,.tm-trace,.tm-sweep,.tm-spin-slow,.tm-pulse-in{
  transform-box:view-box;
}

/* --- reloj: las agujas barren --- */
.tm-hand{ transform-origin:28px 28px; }
.tm-vivo .tm-hand-m,.tm-atento .tm-hand-m{ animation:tm-aguja 900ms cubic-bezier(0.23,1,0.32,1) both; }
.tm-vivo .tm-hand-h,.tm-atento .tm-hand-h{ animation:tm-aguja-corta 900ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes tm-aguja{ from{ transform:rotate(-150deg); } to{ transform:rotate(0deg); } }
@keyframes tm-aguja-corta{ from{ transform:rotate(-42deg); } to{ transform:rotate(0deg); } }

/* --- embudo: una gota cae y atraviesa --- */
.tm-vivo .tm-drop,.tm-atento .tm-drop{ animation:tm-gota 1100ms cubic-bezier(0.55,0,0.35,1) both; }
@keyframes tm-gota{
  0%{ transform:translateY(0); opacity:0; }
  18%{ opacity:1; }
  70%{ transform:translateY(26px); opacity:1; }
  100%{ transform:translateY(38px); opacity:0; }
}

/* --- barras: crecen desde la base, escalonadas --- */
.tm-bar{ transform-origin:center bottom; }
.tm-vivo .tm-bar,.tm-atento .tm-bar{ animation:tm-barra 620ms cubic-bezier(0.23,1,0.32,1) both; }
.tm-bar:nth-of-type(1){ animation-delay:0ms; }
.tm-bar:nth-of-type(2){ animation-delay:70ms; }
.tm-bar:nth-of-type(3){ animation-delay:140ms; }
.tm-bar:nth-of-type(4){ animation-delay:210ms; }
@keyframes tm-barra{ from{ transform:scaleY(0.15); } to{ transform:scaleY(1); } }

/* --- stand y bolsa: la pieza de arriba levanta --- */
.tm-vivo .tm-lift,.tm-atento .tm-lift{ animation:tm-levanta 720ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes tm-levanta{
  0%{ transform:translateY(5px); opacity:.4; }
  60%{ transform:translateY(-1.5px); opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}

/* --- pulso: el trazo recorre la linea --- */
.tm-trace{ stroke-dasharray:60; }
.tm-vivo .tm-trace,.tm-atento .tm-trace{ animation:tm-recorre 1200ms cubic-bezier(0.45,0,0.35,1) both; }
@keyframes tm-recorre{ from{ stroke-dashoffset:60; } to{ stroke-dashoffset:-60; } }

/* --- lupa: recorre un palmo --- */
.tm-vivo .tm-sweep,.tm-atento .tm-sweep{ animation:tm-lupa 900ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes tm-lupa{
  0%{ transform:translate(-4px,3px); }
  55%{ transform:translate(3px,-2px); }
  100%{ transform:translate(0,0); }
}

/* --- engranaje: gira despacio --- */
.tm-spin-slow{ transform-box:fill-box; transform-origin:center; }
.tm-vivo .tm-spin-slow,.tm-atento .tm-spin-slow{ animation:tm-gira 1400ms cubic-bezier(0.33,0,0.2,1) both; }
@keyframes tm-gira{ from{ transform:rotate(0deg); } to{ transform:rotate(180deg); } }

/* --- detalles internos: aparecen despues del trazo --- */
.tm-vivo .tm-pulse-in,.tm-atento .tm-pulse-in{ animation:tm-detalle 520ms cubic-bezier(0.23,1,0.32,1) both; }
@keyframes tm-detalle{
  from{ opacity:.25; transform:scale(0.94); }
  to{ opacity:1; transform:scale(1); }
}
.tm-pulse-in{ transform-box:fill-box; transform-origin:center; }

/* Menos movimiento: se mantiene la opacidad, se quita el desplazamiento. */
@media(prefers-reduced-motion:reduce){
  .tm-vivo .tm-hand,.tm-atento .tm-hand,
  .tm-vivo .tm-drop,.tm-atento .tm-drop,
  .tm-vivo .tm-bar,.tm-atento .tm-bar,
  .tm-vivo .tm-lift,.tm-atento .tm-lift,
  .tm-vivo .tm-trace,.tm-atento .tm-trace,
  .tm-vivo .tm-sweep,.tm-atento .tm-sweep,
  .tm-vivo .tm-spin-slow,.tm-atento .tm-spin-slow,
  .tm-vivo .tm-pulse-in,.tm-atento .tm-pulse-in{ animation:none; }
  .pill-i .ic,.serv .ic{ opacity:1!important; transform:none!important; }
}

/* ==========================================================================
   CONFETI EN MOVIMIENTO
   Dos capas: .cf-i la desplaza el JS con el scroll (parallax por profundidad)
   y la pieza de dentro flota sola aqui. Cada una con su ritmo, porque si todas
   flotan igual se ve el truco. Solo transform, todo en GPU.
   ========================================================================== */
.confetti .cf-i>span{
  animation:tm-flota 7s ease-in-out infinite alternate;
  animation-delay:calc(var(--tm-i,0) * -1.35s);   /* negativo: arrancan ya repartidas, no en fila */
}
.confetti .cf-i:nth-child(3n)>span{ animation-duration:9.5s; }
.confetti .cf-i:nth-child(3n+1)>span{ animation-duration:6.2s; }
.confetti .cf-i:nth-child(4n)>span{ animation-direction:alternate-reverse; }

@keyframes tm-flota{
  from{ transform:translate3d(0,0,0) rotate(var(--tm-rot,0deg)) scale(1); }
  to{   transform:translate3d(6px,-11px,0) rotate(calc(var(--tm-rot,0deg) + 9deg)) scale(1.06); }
}

/* Los puntos laten un poco, ademas de flotar: son los que mas se ven. */
.confetti .cf-i>.cf-dot{ animation-name:tm-flota,tm-late; animation-duration:7s,3.4s; }
@keyframes tm-late{
  0%,100%{ opacity:.85; }
  50%{ opacity:1; }
}

/* La onda se mece sobre su propio eje. */
.confetti .cf-i>.cf-wave{ animation-name:tm-mece; animation-duration:5.6s; }
@keyframes tm-mece{
  from{ transform:translate3d(0,0,0) rotate(calc(var(--tm-rot,0deg) - 7deg)); }
  to{   transform:translate3d(-5px,-8px,0) rotate(calc(var(--tm-rot,0deg) + 7deg)); }
}

@media(prefers-reduced-motion:reduce){
  .confetti .cf-i>span{ animation:none!important; }
  .confetti .cf-i{ transform:none!important; }
}

/* =========================================================
   PAGINA DE SERVICIOS (plantilla-servicios.php)
   ========================================================= */
.claim-grid.one{grid-template-columns:1fr;}

/* La tarjeta lleva el texto en un bloque propio para poder anclar el enlace abajo. */
.serv .tx{display:flex;flex-direction:column;flex:1;}
.serv .tx .more{margin-top:auto;padding-top:18px;}

/* Rejilla de ocho: el primer servicio manda y ocupa dos columnas. */
@media(min-width:1101px){
  .serv-grid.tm-ancho>.serv:first-child{
    grid-column:span 2;
    background:linear-gradient(150deg,#fff 0%,var(--soft) 100%);
  }
  .serv-grid.tm-ancho>.serv:first-child .bd{
    display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,2.4vw,40px);align-items:center;
  }
  .serv-grid.tm-ancho>.serv:first-child .tx{justify-content:center;}
  .serv-grid.tm-ancho>.serv:first-child .tx .more{margin-top:22px;padding-top:0;}
  .serv-grid.tm-ancho>.serv:first-child .ic{width:66px;height:66px;margin-bottom:0;}
  .serv-grid.tm-ancho>.serv:first-child h3{font-size:1.34rem;}
  .serv-grid.tm-ancho>.serv:first-child p{font-size:.95rem;max-width:54ch;}
  .serv-grid.tm-ancho>.serv:first-child .kicker{font-size:.9rem;}
}

/* Los cuatro momentos: fondo claro y separados de la rejilla con el trazo mint. */
.tm-momentos{position:relative;padding-top:clamp(40px,4.4vw,66px);}
.tm-momentos::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;
  width:min(1300px,calc(100% - 48px));height:3px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 14px,transparent 14px 28px);opacity:.55;
}

/* =========================================================
   FICHA DE UN SERVICIO (plantilla-servicio.php)
   ========================================================= */
.srv-ic{display:block;width:64px;height:64px;color:var(--mint);margin-bottom:26px;}
.srv-ic svg{width:100%;height:100%;}

.srv-caja{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,2.8vw,40px);
  box-shadow:0 26px 60px -46px rgba(11,31,77,.5);
}
.srv-caja .h5{margin-bottom:20px;}
.srv-caja .checks.rows{margin:0;}

/* Enlaces al resto de servicios */
.srv-otros{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);}
.srv-mini{
  display:flex;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;text-decoration:none;
  transition:transform 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease);
}
.srv-mini:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 18px 40px -28px rgba(11,31,77,.5);}
.srv-mini .ic{flex:none;width:34px;height:34px;color:var(--mint);}
.srv-mini .ic svg{width:100%;height:100%;}
.srv-mini b{
  flex:1;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.95rem;
  line-height:1.45;color:var(--navy);
}
.srv-mini .fl{flex:none;width:20px;height:20px;color:var(--grey);transition:color 260ms var(--ease),transform 260ms var(--ease);}
.srv-mini .fl svg{width:100%;height:100%;}
.srv-mini:hover .fl{color:var(--mint-dk);transform:translateX(4px);}

/* Si la ultima tarjeta se queda sola en su fila, ocupa el ancho entero. */
@media(min-width:1101px){
  .srv-otros>.srv-mini:last-child:nth-child(3n+1){grid-column:span 3;}
}
@media(max-width:1100px) and (min-width:621px){
  .srv-otros>.srv-mini:last-child:nth-child(2n+1){grid-column:span 2;}
}
@media(max-width:1100px){.srv-otros{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.srv-otros{grid-template-columns:1fr;}.srv-ic{width:54px;height:54px;margin-bottom:20px;}}

/* =========================================================
   PAGINA DE FERIAS B2B (plantilla-ferias.php)
   ========================================================= */

/* Relato del problema: se lee como una cita, con el trazo mint al lado. */
.relato{margin-top:20px;padding-left:22px;border-left:3px solid var(--mint);}
.relato p{margin-bottom:14px;}
.relato p:last-child{margin-bottom:0;font-weight:600;color:var(--navy);}

/* Marco de foto */
.marco{margin:0;border-radius:18px;overflow:hidden;position:relative;background:var(--soft);}
.marco img{display:block;width:100%;height:auto;}

/* Lo que pasa siempre: lista de fallos, con cruz en vez de check */
.fallos{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px);}
.fallos .h5{margin-bottom:14px;}
.fallos ul{list-style:none;margin:0;padding:0;}
.fallos li{position:relative;padding-left:30px;margin-bottom:11px;font-size:.92rem;line-height:1.7;color:var(--ink);}
.fallos li:last-child{margin-bottom:0;}
.fallos li::before,.fallos li::after{
  content:"";position:absolute;left:5px;top:11px;width:13px;height:2px;border-radius:2px;background:#d9536f;opacity:.85;
}
.fallos li::before{transform:rotate(45deg);}
.fallos li::after{transform:rotate(-45deg);}

/* Cifras de autoridad */
.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(34px,4vw,54px);
}
.cifras>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,2.4vw,30px);text-align:center;}
.cifras b{
  display:block;font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;margin-bottom:8px;
}
.cifras span{display:block;font-size:.88rem;line-height:1.6;color:var(--grey);}

/* El sistema, en oscuro */
.sistema-oscuro{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%);}
.sistema-oscuro .wrap{position:relative;z-index:2;}
.sistema-oscuro .h5{color:var(--mint);}
.sistema-oscuro .h2{color:#fff;}
.sistema-oscuro .sec-head p{color:rgba(255,255,255,.78);}

.etapas{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px);position:relative;}
.etapas::before{
  content:"";position:absolute;left:10%;right:10%;top:34px;height:2px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 10px,transparent 10px 20px);opacity:.45;
}
.etapa{position:relative;text-align:center;padding:0 6px;}
.etapa .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:68px;height:68px;border-radius:50%;
  background:rgba(255,255,255,.06);border:2px solid var(--mint);color:var(--mint);
  margin-bottom:16px;position:relative;z-index:2;
}
.etapa .ic svg{width:34px;height:34px;}
.etapa b{
  display:block;font-family:'Quicksand',sans-serif;font-weight:700;color:#fff;
  letter-spacing:.02em;margin-bottom:7px;
}
.etapa .tx{display:block;font-size:.84rem;line-height:1.65;color:rgba(255,255,255,.7);}

/* Los 6 pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.paso{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,2.6vw,34px);
  transition:transform 360ms var(--ease),box-shadow 360ms var(--ease);
}
.paso:hover{transform:translateY(-4px);box-shadow:0 22px 50px -34px rgba(11,31,77,.55);}
.paso .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;border:2px solid var(--mint);
  font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);
  margin-bottom:18px;
}
.paso h3{margin-bottom:10px;}
.paso p{font-size:.9rem;line-height:1.8;}

/* Banda destacada */
.banda-cifra{
  position:relative;overflow:hidden;
  background:var(--navy);
  padding:clamp(44px,5vw,74px) 0;
}
.banda-cifra .wrap{position:relative;z-index:2;}
.banda-cifra p{
  max-width:900px;margin:0 auto;text-align:center;color:#fff;
  font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.6;
}

/* Preguntas frecuentes */
.faq{max-width:880px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:22px 46px 22px 0;
  font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);
  font-size:1.02rem;line-height:1.5;
  transition:color 220ms var(--ease);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--mint-dk);}
.faq summary .mas{position:absolute;right:6px;top:50%;width:16px;height:16px;transform:translateY(-50%);}
.faq summary .mas::before,.faq summary .mas::after{
  content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:2px;background:var(--mint-dk);
  transition:transform 280ms var(--ease);
}
.faq summary .mas::after{transform:rotate(90deg);}
.faq details[open] summary .mas::after{transform:rotate(0deg);}
.faq .rp{padding:0 46px 24px 0;}
.faq .rp p{font-size:.94rem;line-height:1.9;margin:0;}

@media(max-width:1100px){
  .etapas{grid-template-columns:repeat(3,1fr);row-gap:34px;}
  .etapas::before{display:none;}
  .pasos{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .cifras{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .etapas{grid-template-columns:repeat(2,1fr);}
  .pasos{grid-template-columns:1fr;}
  .relato{padding-left:16px;}
}

/* =========================================================
   PAGINAS DE CONTENIDO (plantilla-contenido.php)
   ========================================================= */
.prose-ancho{max-width:min(940px,100%);}

/* Tarjetas de valores dentro del contenido */
.prose .prose-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);margin-top:clamp(28px,3vw,40px);}
.prose .prose-cards>div{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.4vw,30px);
}
.prose .prose-cards h3{margin:0 0 10px;font-size:1.06rem;}
.prose .prose-cards p{margin:0;font-size:.93rem;line-height:1.8;}

/* Rejilla de imagenes */
.prose .prose-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,24px);margin:clamp(28px,3vw,44px) 0;}
.prose .prose-figs figure{margin:0;}

/* Hitos: linea de tiempo vertical */
.prose .hitos{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:block;}
.prose .hitos li{
  position:relative;padding:0 0 clamp(26px,3vw,38px) clamp(34px,4vw,52px);
  border-left:2px solid var(--line);margin:0;
}
.prose .hitos li:last-child{border-left-color:transparent;padding-bottom:0;}
.prose .hitos li::before{
  content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--mint);
}
.prose .hitos b{
  display:block;font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);
  font-size:1.06rem;letter-spacing:.03em;margin-bottom:9px;
}
.prose .hitos span{display:block;font-size:.96rem;line-height:1.9;color:var(--grey);}

@media(max-width:760px){
  .prose .prose-cards,.prose .prose-figs{grid-template-columns:1fr;}
}

/* Las imagenes de los hitos no deben comerse la pagina. */
.prose .hitos figure{margin:16px 0 0;}
.prose .hitos figure img{width:100%;max-height:300px;object-fit:cover;object-position:center;}