/* ===== FUENTE ===== */
@font-face{font-family:'LF';src:url('fonts/libre-franklin-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'LF';src:url('fonts/libre-franklin-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'LF';src:url('fonts/libre-franklin-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'LF';src:url('fonts/libre-franklin-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'LF';src:url('fonts/libre-franklin-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ===== TOKENS ===== */
:root{
  --ink:#16191D;--ink-0:#0E1012;--navy:#183253;--navy-2:#122944;
  --blue:#649DD4;--blue-ink:#2C5C8F;
  --paper:#FFFFFF;--paper-2:#F2F5F8;
  --text:#1A1D22;--muted:#5B6470;--muted-d:#8D96A1;
  --line:#E3E8ED;--line-d:rgba(255,255,255,.12);
  --maxw:1180px;--pad:clamp(1.25rem,4vw,2rem);--sect:clamp(3rem,5.2vw,4.75rem);
  --hdr-h:92px;--hdr-h-sm:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:'LF',system-ui,Arial,sans-serif;font-weight:400;
  font-size:clamp(1rem,.98rem + .12vw,1.0625rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;line-height:1.14;letter-spacing:-.012em;color:var(--text)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--blue);color:#0A1219;padding:.6rem 1rem;font-weight:600;border-radius:0 0 6px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.hdr.solid{background:var(--ink-0);border-bottom-color:var(--line-d)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.1rem;height:var(--hdr-h)}
.brand{flex:0 0 auto;display:inline-flex;align-items:center}
.brand img{height:68px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav a{position:relative;color:#D3D9E0;font-size:.875rem;font-weight:500;padding:.5rem .6rem;transition:color .18s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.15rem;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#fff}
.btn-outline{border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.85rem;font-weight:600;padding:.5rem .9rem;border-radius:8px;transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;width:46px;height:42px;padding:0;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:20px;height:2px;background:#fff;position:absolute;transition:.22s}
.burger span{position:relative}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;background:#0E1012;color:#fff;margin-top:calc(var(--hdr-h) * -1 - 1px);padding-top:calc(var(--hdr-h) + 1px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;background:url('hero_console_bw.jpg') center 42%/cover no-repeat;
  animation:heroDrift 44s ease-in-out infinite alternate;transform-origin:58% 50%}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,14,16,.93) 0%,rgba(12,14,16,.74) 34%,rgba(12,14,16,.42) 64%,rgba(12,14,16,.22) 100%)}
.hero .wrap{position:relative;z-index:2;min-height:clamp(430px,64vh,580px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,7vh,4.75rem)}
.hero__inner{max-width:640px}
.hero h1{color:#fff;font-size:clamp(1.75rem,1.35rem + 1.9vw,2.7rem);line-height:1.12}
.hero p{margin:1.05rem 0 0;max-width:540px;color:#C7CDD4;font-size:clamp(1rem,.97rem + .35vw,1.15rem);font-weight:300;line-height:1.55}
.hero .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--blue);color:#0A1219}
.btn--primary:hover{background:#7db0e2}
.btn--ondark{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.btn--ondark:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
.tri{width:0;height:0;border-style:solid;border-width:.32em 0 .32em .52em;border-color:transparent transparent transparent currentColor;transition:transform .18s}
.btn:hover .tri{transform:translateX(2px)}

/* ===== SECCIONES ===== */
section{position:relative}
.sect{padding-block:var(--sect)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;color:var(--blue-ink);text-transform:uppercase;letter-spacing:.02em}
.head{max-width:640px;margin-bottom:clamp(1.75rem,3.5vw,2.6rem)}
.head h2{font-size:clamp(1.35rem,1.1rem + 1.05vw,1.95rem);margin-top:.5rem}
.head p{color:var(--muted);margin:.7rem 0 0;font-size:1.05rem}

/* ===== QUÉ HACEMOS ===== */
.about .lead{max-width:760px;font-size:clamp(1.05rem,1rem + .5vw,1.22rem);font-weight:300;color:#2C333B;line-height:1.6;margin:0}
.about .lead strong{font-weight:600;color:var(--text)}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(2rem,4vw,2.75rem)}
.point{padding-top:1.1rem;border-top:2px solid var(--blue)}
.point h3{font-size:1.02rem;font-weight:600;margin-bottom:.4rem}
.point p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}

/* ===== LEGALIDAD (panel con foto que sobresale) ===== */
.legal{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legal .head{margin-bottom:6.25rem}
.panel{position:relative;background:var(--navy);border-radius:12px;
  display:grid;grid-template-columns:300px 1fr;gap:clamp(1.75rem,3.5vw,3rem);align-items:center;
  padding:clamp(2rem,3.5vw,2.75rem)}
.panel__photo{margin:-6.5rem 0 0;align-self:start}
.panel__photo img{width:100%;border-radius:8px;box-shadow:0 20px 44px -24px rgba(0,0,0,.75)}
.panel__body h3{color:#fff;font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.2}
.panel__body p{color:#C3CCD8;margin:.85rem 0 0;font-size:1rem;line-height:1.6}
.panel__body p.small{font-size:.93rem;color:#A9B4C2}
.panel__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.panel__foot .capif-chip img{height:44px}
.panel__foot .cap-txt{color:#9FAAB8;font-size:.85rem;line-height:1.4;max-width:220px}
.panel__foot .btn{margin-left:auto}

/* ===== FORMATOS ===== */
.plans{background:var(--paper)}
.plan-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.plan{border-radius:10px;padding:1.35rem 1.2rem 1.4rem;display:flex;flex-direction:column;min-height:212px;
  transition:transform .2s ease,box-shadow .2s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px rgba(20,40,70,.55)}
.plan .kicker{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2A3540}
.plan .name{font-weight:700;font-size:1.5rem;letter-spacing:-.01em;margin:.15rem 0 .55rem;line-height:1;color:#14202B}
.plan .desc{font-size:.85rem;line-height:1.32;margin:0;color:#1F2A34;font-weight:500}
.plan.c1{background:#75A1D0}
.plan.c2{background:#6E8FB5}
.plan.c3{background:#647F9A}
.plan.c4{background:#5D6F81}
.plan.c5{background:#555E67}
.plans .note{margin-top:1.5rem;font-size:.92rem;color:var(--muted)}
.plans .note a{color:var(--blue-ink);font-weight:600;border-bottom:1px solid rgba(44,92,143,.35);transition:border-color .18s}
.plans .note a:hover{border-bottom-color:var(--blue-ink)}

/* ===== CLIENTES (discreto) ===== */






/* ===== CONTACTO ===== */
.contact{background:var(--ink-0);color:#fff}
.contact .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;padding-block:clamp(2.75rem,5vw,3.75rem)}
.contact h2{color:#fff;font-size:clamp(1.4rem,1.15rem + 1.1vw,2.1rem);max-width:22ch}
.contact p{color:var(--muted-d);margin:.55rem 0 0;font-size:1.05rem;max-width:44ch}
.contact .actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* ===== FOOTER ===== */
.foot{background:var(--ink-0);color:#fff;border-top:1px solid var(--line-d);padding-block:clamp(2.5rem,4vw,3.25rem) 1.75rem}
.foot .top{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:2rem}
.foot .fb img{height:62px;margin-bottom:1rem}
.foot .fb p{color:var(--muted-d);font-size:.9rem;max-width:290px;margin:0}
.foot h4{font-size:.82rem;font-weight:600;color:#fff;margin:.3rem 0 1rem;text-transform:uppercase;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0}
.foot .fnav li{margin-bottom:.55rem}
.foot .fnav a{color:var(--muted-d);font-size:.92rem;transition:color .18s}
.foot .fnav a:hover{color:#fff}
.foot .fc li{color:var(--muted-d);font-size:.92rem;margin-bottom:.65rem;display:flex;gap:.55rem;align-items:flex-start}
.foot .fc a{color:var(--muted-d);transition:color .18s}
.foot .fc a:hover{color:#fff}
.foot .fc .ic{flex:0 0 auto;color:var(--blue);margin-top:.15rem}
.foot .fc .ic svg{width:15px;height:15px;fill:currentColor;display:block}
.foot .bottom{margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.35rem;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1rem;align-items:center}
.foot .bottom small{color:var(--muted-d);font-size:.8rem}

/* ===== MENÚ MÓVIL ===== */
.mpanel{position:fixed;inset:0;z-index:95;background:var(--ink-0);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease;padding:calc(var(--hdr-h) + 1.25rem) var(--pad) 2rem;overflow-y:auto}
body.menu-open .mpanel{opacity:1;visibility:visible;pointer-events:auto}
.mpanel a.mlink{display:block;color:#fff;font-size:1.35rem;font-weight:600;padding:1rem 0;border-bottom:1px solid var(--line-d)}
.mpanel .btn{margin-top:1.75rem;width:100%}
.mpanel .mwa{margin-top:1.1rem;color:var(--muted-d);display:inline-flex;gap:.5rem;align-items:center;font-weight:500}
.mpanel .mwa svg{width:16px;height:16px;fill:var(--blue)}

/* ===== REVEAL (sutil) — usa 'translate' para no pisar el transform del hover ===== */
.rv{opacity:0;translate:0 14px;transition:opacity .55s ease-out,translate .55s ease-out}
.rv.in{opacity:1;translate:0 0}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}

/* ===== RESPONSIVE ===== */
@media (max-width:1000px){
  .nav,.btn-outline{display:none}
  .burger{display:inline-flex}
  .points{grid-template-columns:1fr 1fr;gap:1.5rem}
  .plan-grid{grid-template-columns:repeat(3,1fr)}
  .panel{grid-template-columns:230px 1fr}
  .legal .head{margin-bottom:4.5rem}
  .panel__photo{margin-top:-3.5rem}
  .foot .top{grid-template-columns:1fr 1fr}
  .foot .fb{grid-column:1/-1}
}
@media (max-width:680px){
  .points{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
  .panel{grid-template-columns:1fr;padding-top:0}
  .legal .head{margin-bottom:5rem}
  .panel__photo{margin:-3rem auto 1.25rem;max-width:230px;width:100%}
  .panel__foot .btn{margin-left:0;width:100%}
  .panel__foot .cap-txt{max-width:none}
  .foot .top{grid-template-columns:1fr}
  .hero .actions .btn,.contact .actions .btn{flex:1 1 auto}
}
@media (max-width:380px){ .plan-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .rv{opacity:1;translate:0 0}
  .hero__bg{animation:none}
}

/* ===================================================================
   PÁGINAS INTERNAS  (hero fotográfico en cabecera + texto de lectura)
   =================================================================== */

/* --- Hero de cabecera (la foto ES la banda de título) --- */
.pagehero{position:relative;background:#0E1012;color:#fff;overflow:hidden;margin-top:calc(var(--hdr-h) * -1 - 1px);padding-top:calc(var(--hdr-h) + 1px)}
.pagehero__bg{position:absolute;inset:0;z-index:0;background-position:center 40%;background-size:cover;background-repeat:no-repeat}
.pagehero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,14,16,.55) 0%,rgba(12,14,16,.5) 45%,rgba(12,14,16,.72) 100%),
  linear-gradient(90deg,rgba(12,14,16,.55) 0%,rgba(12,14,16,.3) 55%,rgba(12,14,16,.45) 100%)}
.pagehero .wrap{position:relative;z-index:2;min-height:clamp(330px,50vh,500px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding-block:clamp(2.5rem,6vh,4rem)}
.pagehero .crumb{font-size:.82rem;color:#AEB7C1;margin-bottom:.9rem}
.pagehero .crumb a{color:#AEB7C1;transition:color .18s}
.pagehero .crumb a:hover{color:#fff}
.pagehero .crumb .sep{margin:0 .5rem;color:#5A646E}
.pagehero__inner{width:100%;max-width:740px}
.pagehero h1{color:#fff;font-size:clamp(1.7rem,1.35rem + 1.6vw,2.6rem);line-height:1.12;max-width:20ch}
.pagehero .sub{color:#C7CDD4;margin:.85rem 0 0;font-weight:300;font-size:clamp(1rem,.97rem + .4vw,1.2rem);max-width:58ch;line-height:1.5}

/* --- Cuerpo: una sola columna de lectura, anclada a la izquierda --- */
.article{background:var(--paper)}
.article__body{max-width:740px;margin-inline:auto}
.article__body > *:first-child{margin-top:0}
.article__body > *:last-child{margin-bottom:0}
.article__body .lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);font-weight:300;line-height:1.55;color:#2A313A;margin:0 0 1.3rem}
.article__body h2{font-size:clamp(1.25rem,1.1rem + .75vw,1.6rem);margin:clamp(2rem,3.6vw,2.75rem) 0 .7rem;color:var(--text);line-height:1.2}
.article__body p{margin:0 0 1.1rem;color:#343A41;line-height:1.7}
.article__body p a{color:var(--blue-ink);font-weight:600;border-bottom:1px solid rgba(44,92,143,.35);transition:border-color .18s}
.article__body p a:hover{border-bottom-color:var(--blue-ink)}

/* Cita inline (más liviana y con más aire) */
.pull{border-left:3px solid var(--blue);padding:.1rem 0 .1rem 1.3rem;margin:clamp(2.25rem,4.2vw,3rem) 0;
  font-size:clamp(1.08rem,1rem + .42vw,1.3rem);font-weight:300;line-height:1.48;color:#48525C}
.pull strong{font-weight:500;color:var(--text)}

/* Recuadro de legalidad (aparición fuerte; en otras páginas irá discreto) */
.callout{background:var(--navy);color:#fff;border-radius:12px;padding:clamp(1.4rem,2.6vw,1.9rem);margin:clamp(2.25rem,4vw,3rem) 0 clamp(1.75rem,3vw,2.25rem)}
.callout h3{color:#fff;font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);margin:0 0 .55rem}
.callout p{color:#C3CCD8;margin:0;line-height:1.6}
.callout p a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.callout .cred{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.35rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);background:transparent}
.callout .cred .txt{color:#9FAAB8;font-size:.85rem;line-height:1.4}

/* Chip blanco del sello CAPIF */
.capif-chip{background:#fff;border-radius:9px;padding:.7rem 1rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.capif-chip img{height:36px;width:auto;display:block}
.panel__foot .capif-chip img{height:40px}
.callout .cred .capif-chip img{height:36px}

/* Enlace "siguiente" */
.article__body .more{margin-top:clamp(2.75rem,5vw,3.75rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.more a{display:inline-flex;align-items:center;gap:.6rem;color:var(--blue-ink);font-weight:600;font-size:1.05rem;transition:gap .18s}
.more a:hover{gap:.95rem}
.more a .tri{border-color:transparent transparent transparent currentColor}

@media (max-width:600px){
  .pagehero .wrap{min-height:auto;padding-block:clamp(2rem,7vh,3rem)}
}

/* --- Sello CAPIF en versión discreta (páginas donde la legalidad va sutil) --- */
.capif-inline{display:flex;align-items:center;gap:.9rem;margin:1.75rem 0 .5rem;padding:.8rem 1.05rem;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;width:max-content;max-width:100%}
.capif-inline .capif-chip{box-shadow:none;background:#fff;border:1px solid var(--line);padding:.4rem .6rem}
.capif-inline .capif-chip img{height:28px}
.capif-inline .txt{font-size:.85rem;color:var(--muted);line-height:1.35}
.capif-inline .txt strong{color:var(--text);font-weight:600}
@media (max-width:480px){ .capif-inline{width:auto} }

/* ===================================================================
   FORMATOS  (planes RB1–RB5: paleta original, nombre en negro, altura pareja)
   =================================================================== */
.plans-list{display:flex;flex-direction:column;gap:14px;margin-top:clamp(1.5rem,3vw,2.25rem)}
.plan-row{display:grid;grid-template-columns:210px 1fr;min-height:228px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .2s ease,transform .2s ease,opacity .55s ease-out,translate .55s ease-out}
.plan-row:hover{box-shadow:0 14px 30px -20px rgba(20,40,70,.4);transform:translateY(-3px)}
.plan-row__tag{padding:1.15rem 1.3rem;display:flex;flex-direction:column;justify-content:center;color:#16202B}
.plan-row__tag .k{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2A3540}
.plan-row__tag .code{font-weight:700;font-size:1.65rem;letter-spacing:-.01em;line-height:1;margin:.12rem 0 .55rem;color:#14202B}
.plan-row__tag .tagline{font-size:.83rem;line-height:1.32;font-weight:500;color:#1F2A34}
.plan-row__desc{padding:1.15rem 1.5rem;display:flex;flex-direction:column;justify-content:center}
.plan-row__desc .ideal{font-size:.73rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:.5rem}
.plan-row__desc p{margin:0;color:#343A41;line-height:1.58;font-size:.94rem}
/* Paleta original (de la referencia), tal cual */
.plan-row.c1 .plan-row__tag{background:#75A1D0}
.plan-row.c2 .plan-row__tag{background:#6E8FB5}
.plan-row.c3 .plan-row__tag{background:#647F9A}
.plan-row.c4 .plan-row__tag{background:#5D6F81}
.plan-row.c5 .plan-row__tag{background:#555E67}
/* margin-top con especificidad suficiente para ganarle a '.article__body p' */
.article__body .plans-note{margin-top:clamp(2.75rem,5vw,3.75rem);margin-bottom:0;color:#343A41;line-height:1.65;font-size:1rem}
.article__body .plans-note strong{color:var(--text);font-weight:600}
@media (max-width:800px){
  .plan-row{grid-template-columns:1fr;min-height:0}
  .plan-row__tag{padding:1.15rem 1.25rem}
  .plan-row__tag .code{font-size:1.5rem;margin-bottom:.3rem}
}
}
}

/* ===================================================================
   CONTACTO  (formulario)
   =================================================================== */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.85rem;font-weight:600;color:var(--text)}
.field label .opt{color:var(--muted);font-weight:400}
.field input,.field textarea{font-family:inherit;font-size:1rem;padding:.72rem .85rem;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);width:100%;transition:border-color .15s ease,box-shadow .15s ease}
.field input::placeholder,.field textarea::placeholder{color:#9AA4AF}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(100,157,212,.18)}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem;margin-top:.4rem}
.form-foot .btn{flex:0 0 auto}
.cf-turnstile{min-height:65px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:1rem;line-height:1.5}
/* mensajes de éxito / error */
.form-msg{border-radius:10px;padding:1rem 1.15rem;margin-bottom:1.5rem;font-size:.95rem;line-height:1.5;display:none}
.form-msg.show{display:block}
.form-msg--ok{background:#E9F6EE;border:1px solid #BCE3C9;color:#1E6B39}
.form-msg--err{background:#FBECEC;border:1px solid #F0C4C4;color:#9B2C2C}
.form-msg strong{font-weight:600}
/* otros medios de contacto */
.contact-methods{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cmethod{display:flex;flex-direction:column;gap:.35rem}
.cmethod .ic{width:34px;height:34px;border-radius:8px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;margin-bottom:.35rem}
.cmethod .ic svg{width:17px;height:17px;fill:var(--blue-ink)}
.cmethod h3{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.cmethod a,.cmethod span{color:var(--text);font-size:.98rem;font-weight:500;line-height:1.4}
.cmethod a{transition:color .15s ease}
.cmethod a:hover{color:var(--blue-ink)}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr;gap:0}
  .contact-methods{grid-template-columns:1fr;gap:1.4rem}
}

/* ===================================================================
   CLIENTES  (lista: logo + nombre + descripción + Reproducir)
   =================================================================== */
.clients-intro{color:#343A41;line-height:1.6;margin:0 0 clamp(1.5rem,3vw,2.25rem)}
.client-list{display:flex;flex-direction:column;gap:12px}
.client-row{display:grid;grid-template-columns:124px 1fr auto;gap:1.5rem;align-items:center;border:1px solid var(--line);border-radius:12px;padding:1rem 1.25rem;background:#fff;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,opacity .55s ease-out,translate .55s ease-out}
.client-row:hover{box-shadow:0 14px 30px -22px rgba(20,40,70,.45);transform:translateY(-2px);border-color:#D4DBE2}
.client-row__logo{width:124px;height:84px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.client-row__logo img{max-width:88%;max-height:78%;width:auto;height:auto;object-fit:contain}
.client-row__logo .ph{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:#3A4752;text-align:center;padding:.4rem;line-height:1.15}
.client-row__info{min-width:0}
.client-row__info h3{font-size:1.06rem;font-weight:600;color:var(--text);margin:0 0 .2rem;line-height:1.25}
.client-row__info p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.45}
.btn-play{display:inline-flex;align-items:center;gap:.55rem;background:var(--blue);color:#0A1219;font-weight:600;font-size:.92rem;padding:.62rem 1.15rem;border-radius:8px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .18s ease,transform .18s ease}
.btn-play:hover{background:#7db0e2;transform:translateY(-1px)}
.btn-play svg{width:13px;height:13px;fill:currentColor}
@media (max-width:640px){
  .client-row{grid-template-columns:64px 1fr;gap:1rem;row-gap:.9rem}
  .client-row__logo{width:64px;height:48px}
  .client-row__action{grid-column:1/-1}
  .btn-play{width:100%;justify-content:center}
}

/* ===================================================================
   REPRODUCTOR  (ventana propia — reproducir_XX). Audio nativo clásico.
   =================================================================== */
body.player-page{min-height:100vh;background:var(--ink-0);color:#fff;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.player{width:100%;max-width:660px;text-align:center}
.player__logo{height:44px;width:auto;margin:0 auto 1.5rem;display:block}
.player__card{background:var(--ink);border:1px solid var(--line-d);border-radius:16px;padding:clamp(1.5rem,4vw,2.25rem)}
.player__badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8FB9E4;margin-bottom:1rem}
.player__badge .dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.player__name{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);line-height:1.2;color:#fff;margin:0 0 .35rem}
.player__desc{color:#AEB7C1;font-size:.95rem;margin:0 0 1.5rem;line-height:1.45}
.player audio{width:100% !important;display:block;margin:0 auto}
.player__capif{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--line-d)}
.player__capif .capif-chip{padding:.45rem .65rem}
.player__capif .capif-chip img{height:26px}
.player__capif span{color:#9FAAB8;font-size:.78rem;line-height:1.35;text-align:left}
.player__close{display:inline-block;margin-top:1.5rem;color:var(--muted-d);font-size:.9rem;font-weight:500;transition:color .18s ease;cursor:pointer}
.player__close:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.player__badge .dot{animation:none}}

/* Login del reproductor (sobre la página oscura) */
.player-login{text-align:left;max-width:320px;margin-inline:auto}
.player-login .field{margin-bottom:1rem}
.player-login .field label{color:#AEB7C1;font-size:.85rem;font-weight:600}
.player-login .field input{width:100%}
.player-login .err{color:#F87171;font-size:.85rem;margin:.4rem 0 0;line-height:1.4}
.player-login .btn{width:100%;justify-content:center;margin-top:.4rem}
.player-login h2{color:#fff;font-size:1.15rem;text-align:center;margin:0 0 1.25rem}

/* ===================================================================
   CANALES POR GÉNERO  (grilla 2x5 responsive de radios genéricas)
   =================================================================== */
.genre-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(1.5rem,3vw,2.25rem)}
.genre-card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;color:#fff;text-decoration:none;isolation:isolate;transition:transform .2s ease,box-shadow .2s ease,opacity .55s ease-out,translate .55s ease-out}
.genre-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.genre-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(0,0,0,.6)}
.genre-card__name{font-size:1.3rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.genre-card__desc{font-size:.8rem;opacity:.9;margin-top:.25rem;line-height:1.35}
.genre-card__play{position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.genre-card:hover .genre-card__play{background:rgba(255,255,255,.32)}
.genre-card__play svg{width:13px;height:13px;fill:#fff;margin-left:2px}
.genre-card__lock{position:absolute;top:1rem;left:1rem;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7;display:flex;align-items:center;gap:.3rem}
.genre-card__lock svg{width:10px;height:10px;fill:currentColor}
/* fondos por género (placeholder; en real puede ir la imagen "Logo empresa" del admin) */
.g-rock{background:linear-gradient(145deg,#3a1418,#7c2230)}
.g-pop{background:linear-gradient(145deg,#3a1230,#a42a74)}
.g-chill{background:linear-gradient(145deg,#0e2a2e,#1c6f76)}
.g-electronica{background:linear-gradient(145deg,#0e2732,#177a8c)}
.g-jazz{background:linear-gradient(145deg,#2e1e10,#8c5c22)}
.g-lounge{background:linear-gradient(145deg,#1a1830,#4c3c8e)}
.g-latino{background:linear-gradient(145deg,#3a1c10,#b4521e)}
.g-indie{background:linear-gradient(145deg,#12241a,#2c7c4c)}
.g-clasica{background:linear-gradient(145deg,#1e2028,#5c5c6e)}
.g-urbano{background:linear-gradient(145deg,#1e1428,#5c2c7c)}
@media (max-width:900px){ .genre-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .genre-grid{grid-template-columns:repeat(2,1fr);gap:10px} .genre-card{padding:.9rem} .genre-card__name{font-size:1.1rem} }

/* Botón al pie de Clientes que lleva a los géneros */
.section-cta{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.5rem);border-top:1px solid var(--line);text-align:center}
.section-cta p{color:var(--muted);margin:0 0 1rem;font-size:1rem}

/* ===================================================================
   CANAL DE MUESTRA  (demo de acceso libre, página completa con navbar)
   =================================================================== */
.demo{background:var(--ink-0);color:#fff;margin-top:calc(var(--hdr-h) * -1 - 1px);padding-top:calc(var(--hdr-h) + 1px + clamp(3rem,9vh,5.5rem));padding-bottom:clamp(3rem,9vh,5.5rem)}
.demo__inner{max-width:700px;margin:0 auto;text-align:center;padding-inline:var(--pad)}
.demo__kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8FB9E4;margin-bottom:1rem}
.demo__kicker svg{width:13px;height:13px;fill:currentColor}
.demo h1{color:#fff;font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);line-height:1.12;margin:0 0 .6rem}
.demo__sub{color:#AEB7C1;font-size:clamp(1rem,.97rem + .4vw,1.18rem);line-height:1.5;margin:0 auto 2rem;max-width:44ch;font-weight:300}
.demo .player__card{text-align:center}
.demo__note{color:var(--muted-d);font-size:.85rem;margin-top:1.5rem;line-height:1.5}
.demo__note a{color:#8FB9E4;font-weight:500}














@media (max-width:600px){  }

/* ===== "Ya suena en": grilla de cajas con logos (label arriba, responsive) ===== */
.trusted{background:var(--paper-2);border-top:1px solid var(--line)}
.trusted .wrap{padding-block:2rem;display:block}
.trusted .lbl{display:block;text-align:center;font-size:.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2rem}
.trusted .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.trusted .logos .box{background:#fff;border:1px solid var(--line);border-radius:12px;height:86px;display:flex;align-items:center;justify-content:center;padding:10px 12px;transition:border-color .2s ease,box-shadow .2s ease}
.trusted .logos .box:hover{border-color:#D0D8E0;box-shadow:0 8px 20px -14px rgba(20,40,70,.4)}
.trusted .logos .box img{max-width:100%;width:auto;height:38px;opacity:.7}
/* Ajuste de tamaño por logo (subí/bajá el height de cada uno) */
.trusted .logos .b-grimoldi img{height:30px}
.trusted .logos .b-northface img{height:44px}
.trusted .logos .b-vans img{height:28px}
.trusted .logos .b-hushpuppies img{height:22px}
.trusted .logos .b-narrow img{height:24px}
.trusted .logos .b-oldbridge img{height:56px}
.trusted .logos .b-wanama img{height:50px}
.trusted .logos .b-urbanrail img{height:48px}
@media (max-width:820px){ .trusted .logos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .trusted .logos{grid-template-columns:repeat(2,1fr);gap:10px} .trusted .logos .box{height:74px;padding:10px 14px} }