/* hablo · sistema de diseño hablo — compartido por todas las páginas nuevas.
   Editar AQUÍ para cambiar el aspecto de toda la web nueva. */
  body { margin:0; background:#F0F2F4; color:#141414; font-family:'Manrope',system-ui,sans-serif; font-weight:500; -webkit-font-smoothing:antialiased; }
  * { box-sizing:border-box; }
  a { color:#141414; text-decoration:none; } a:hover { color:#141414; }
  @keyframes marquesina { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  h1,h2,h3,h4,h5,h6 { font-family:'Sora',sans-serif; font-weight:400; letter-spacing:-.05em; }
  @media (max-width:1180px) {
    .g4 { grid-template-columns:repeat(2,1fr) !important; }
    .g6 { grid-template-columns:repeat(3,1fr) !important; }
    .g2, .g2h { grid-template-columns:1fr !important; gap:36px !important; }
    .g2h > div:last-child { justify-content:flex-start !important; }
    section > div[style*="padding:100px 106px"], section > div[style*="padding:120px 106px"] { padding:70px 40px !important; }
    section > div > div[style*="padding:110px 120px"] { padding:80px 40px 40px !important; }
  }
  @media (max-width:900px) {
    .g3 { grid-template-columns:1fr !important; }
    .g4, .g4f { grid-template-columns:1fr !important; }
    .g6 { grid-template-columns:repeat(2,1fr) !important; }
    section[style*="padding:120px 54px"], section[style*="padding:0 54px"], footer { padding-left:24px !important; padding-right:24px !important; }
  }
  @keyframes latido { 0%,60%,100% { opacity:.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
  @keyframes pulso { 0%,100% { opacity:.45; transform:scale(1); } 50% { opacity:1; transform:scale(1.35); } }
  @keyframes flota { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  @keyframes velo { from { opacity:0; } to { opacity:1; } }
  @keyframes brota { 0% { opacity:0; transform:translateY(30px) scale(.6); } 65% { opacity:1; transform:translateY(-6px) scale(1.06); } 100% { opacity:1; transform:translateY(0) scale(1); } }
  summary { list-style:none; cursor:pointer; } summary::-webkit-details-marker { display:none; }
  .mas { transition:transform .25s ease; } details[open] .mas { transform:rotate(45deg); }
  details.faq::details-content { block-size:0; overflow:clip; opacity:0; transition:block-size .38s cubic-bezier(.4,0,.2,1), content-visibility .38s allow-discrete, opacity .3s ease; }
  details.faq[open]::details-content { block-size:auto; block-size:calc-size(auto, size); opacity:1; }
  @keyframes faq-abre { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  details.faq[open] .resp { animation:faq-abre .35s ease both; }
  @media (prefers-reduced-motion:reduce) { details.faq::details-content { transition:none; } details.faq[open] .resp { animation:none; } }
  @keyframes entra { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
  @keyframes hb-news { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  .hb-news:hover { animation-play-state:paused; }
  @media (prefers-reduced-motion:reduce) { .hb-news { animation:none; } }

  .cont { display:contents; } .cont[hidden] { display:none; }
  .solo-mov { display:none !important; }
  @media (max-width:1299px) { .solo-desk { display:none !important; } .solo-mov { display:contents !important; } #cajon.solo-mov { display:block !important; } #cajon[hidden] { display:none !important; } }
  .mega { display:none; z-index:5; } .tiene-mega:hover > .mega, .tiene-mega:focus-within > .mega { display:block; }
  .tiene-mega:hover > a, .tiene-mega:focus-within > a { background:#141414 !important; color:#fff !important; }
  header.scrolled { padding:0 14px !important; } header.scrolled > div { border-radius:0 0 26px 26px !important; }
  body.modal-abierto { overflow:hidden; }
  button { font-family:inherit; }
.h1:hover{color:#fff !important}
.h2:hover{background:#141414 !important;color:#fff !important}
.h3:hover{background:rgba(255,255,255,.08) !important}
.h4:hover{transform:rotate(-45deg) !important}
.h5:hover{background:#F1F2F4 !important}
.h6:hover{background:#F14F44 !important;color:#fff !important}
.h7:hover{background:#1F1F1F !important;color:#fff !important;transform:translateY(-4px) !important}
.h8:hover{transform:translateY(-6px) !important}
.f9:focus{border-color:#1F1F1F !important;outline:none !important}
.h10:hover{background:#F14F44 !important}

/* ── Añadidos de integración (alta, barra de demo) ── */
.sin-barra-demo #flotante{display:none!important}
.alta-op{display:block;position:relative;cursor:pointer;border-radius:14px 14px 14px 0;padding:16px 18px;border:1.5px solid transparent;transition:border-color .15s,box-shadow .15s}
.alta-op input{position:absolute;opacity:0;width:0;height:0}
.alta-op.clara{background:#F0F2F4}
.alta-op.oscura{background:#1F1F1F;color:#fff}
.alta-op:has(input:checked){border-color:#F14F44;box-shadow:0 0 0 1px #F14F44}
.alta-op:has(input:focus-visible){outline:2px solid #F14F44;outline-offset:2px}
.alta-estado{display:block;font-size:13px;min-height:17px;color:#6B6B6B}
.alta-estado.ok{color:#2E7D32} .alta-estado.mal{color:#C62828}
.alta-error{margin:0;padding:12px 14px;border-radius:12px;background:#FDECEA;color:#8E1B12;font-size:14px}
/* Barra de demo en móvil: el diseño ocupaba 150px (17% de pantalla) con el texto estrangulado */
@media (max-width:700px){
  #flotante>div{left:8px!important;right:8px!important;bottom:8px!important}
  #flotante>div>div{padding:10px 10px 10px 16px!important;gap:10px!important}
  #flotante>div>div>span:first-child{font-size:13px!important;line-height:1.35!important;gap:8px!important}
  #flotante>div>div>span:first-child>span:first-child{display:none!important}
  #flotante a.h6{padding:10px 16px!important;gap:0!important;font-size:13.5px!important;white-space:nowrap}
  #flotante a.h6>span:last-child{display:none!important}
  #cerrar-flotante{font-size:20px!important;padding:2px 4px!important}
}

/* ═══ Artículo (blog; base para Aprender y legales) — extrapolado del diseño de la home ═══ */
.hb-art{max-width:1320px;margin:22px auto 0;padding:0 14px}
.hb-art-cab{background:#fff;border-radius:25px 25px 25px 0;padding:56px 54px 50px}
.hb-migas{font-size:13px;color:#6B6B6B;margin-bottom:22px}

.hb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.hb-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;background:#F0F2F4;color:#333}
.hb-chip.acento{background:#FDE7E4;color:#B83128}
.hb-art-cab h1{margin:0;font-size:40px;line-height:1.2;color:#111;max-width:20ch;text-wrap:balance}@media(min-width:576px){.hb-art-cab h1{font-size:60px;line-height:1.125}}@media(min-width:992px){.hb-art-cab h1{font-size:80px;line-height:1.125}}
.hb-entradilla{margin:22px 0 0;font-size:18px;line-height:1.7;color:#333;max-width:62ch}
.hb-art-img{margin:14px 0 0}
.hb-art-img img{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:25px 25px 25px 0}
.hb-art-cuerpo{background:#fff;border-radius:25px 25px 25px 0;margin-top:14px;padding:64px 54px}
.hb-prosa{max-width:720px;margin:0 auto;font-size:16px;line-height:1.875;color:#333;font-weight:500}
.hb-prosa>*:first-child{margin-top:0}
.hb-prosa p{margin:0 0 1.15em}
.hb-prosa h2{font-size:32px;line-height:1.25;color:#111;margin:1.9em 0 .6em;text-wrap:balance}@media(min-width:768px){.hb-prosa h2{font-size:35px;line-height:1.16666}}@media(min-width:992px){.hb-prosa h2{font-size:60px;line-height:1.16666}}
.hb-prosa h3{font-size:26px;line-height:1.34615;color:#111;margin:1.6em 0 .5em}@media(min-width:768px){.hb-prosa h3{font-size:30px;line-height:1.25}}@media(min-width:992px){.hb-prosa h3{font-size:40px;line-height:1.25}}.hb-prosa h4{font-size:22px;line-height:1.4737;color:#111;margin:1.4em 0 .5em}@media(min-width:768px){.hb-prosa h4{font-size:25px;line-height:1.3333}}@media(min-width:992px){.hb-prosa h4{font-size:30px;line-height:1.3333}}
.hb-prosa ul,.hb-prosa ol{margin:0 0 1.4em;padding-left:1.3em}
.hb-prosa li{margin-bottom:.55em}
.hb-prosa li::marker{color:#F14F44}
.hb-prosa a,.hb-migas a{color:inherit;text-decoration:none;background-image:linear-gradient(to right,currentColor 0,currentColor 100%);background-position:100% 100%;background-repeat:no-repeat;background-size:100% 1px;transition:background-size .4s,color .3s}.hb-prosa a:hover,.hb-migas a:hover{color:#F14F44;background-size:0 1px}
.hb-prosa strong{color:#111;font-weight:700}
.hb-prosa blockquote{margin:1.6em 0;padding:18px 22px;border-left:3px solid #F14F44;background:#F0F2F4;border-radius:0 14px 14px 0;font-weight:600;color:#111}
.hb-prosa hr{border:0;border-top:1px solid #E0E0E0;margin:2.4em 0}
.hb-prosa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:#F0F2F4;padding:2px 6px;border-radius:6px}
.hb-prosa img,.hb-prosa video{display:block;max-width:100%;height:auto;border-radius:18px 18px 18px 0}
.hb-prosa video{width:100%;background:#141414;border:0}
.hb-prosa figure{margin:1.8em 0}
.hb-prosa figcaption{margin-top:10px;font-size:14px;color:#6B6B6B}
.hb-prosa table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.hb-prosa th,.hb-prosa td{padding:12px 14px;border-bottom:1px solid #E0E0E0;text-align:left;vertical-align:top}
.hb-prosa th{font-family:'Manrope',sans-serif;font-weight:700;color:#141414;background:#F0F2F4}
/* desplegables dentro de los artículos (80, mismo marcado) */
.hb-prosa details{background:#F0F2F4;border:0;border-radius:14px 14px 14px 0;padding:18px 22px;margin:0 0 10px}
.hb-prosa details summary{list-style:none;cursor:pointer;font-weight:600;color:#141414;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hb-prosa details summary::-webkit-details-marker{display:none}
.hb-prosa details summary::after{content:"+";color:#F14F44;font-weight:700;font-size:20px;line-height:1.2;flex:none}
.hb-prosa details[open] summary::after{content:"\2212"}
.hb-prosa details p{margin:12px 0 0}
/* ── Compatibilidad: 58 clases del diseño antiguo presentes en el texto de los artículos (BD intacta),
      extraídas de tailwind-public.css, encerradas en .hb-prosa y pasadas a la paleta nueva ── */
.hb-prosa .mb-10{margin-bottom:2.5rem}
.hb-prosa .mb-12{margin-bottom:3rem}
.hb-prosa .mb-2{margin-bottom:.5rem}
.hb-prosa .mb-3{margin-bottom:.75rem}
.hb-prosa .mb-4{margin-bottom:1rem}
.hb-prosa .mt-10{margin-top:2.5rem}
.hb-prosa .mt-12{margin-top:3rem}
.hb-prosa .mt-14{margin-top:3.5rem}
.hb-prosa .mt-2{margin-top:.5rem}
.hb-prosa .mt-3{margin-top:.75rem}
.hb-prosa .block{display:block}
.hb-prosa .grid{display:grid}
.hb-prosa .w-full{width:100%}
.hb-prosa .cursor-pointer{cursor:pointer}
.hb-prosa .gap-4{gap:1rem}
.hb-prosa .space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}
.hb-prosa .space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}
.hb-prosa .rounded-2xl{border-radius:18px 18px 18px 0}
.hb-prosa .rounded-3xl{border-radius:25px 25px 25px 0}
.hb-prosa .border{border-width:1px}
.hb-prosa .border-t{border-top-width:1px}
.hb-prosa .border-gray-100{--tw-border-opacity:1;border-color:#ECEEF0}
.hb-prosa .border-gray-200{--tw-border-opacity:1;border-color:#E0E0E0}
.hb-prosa .bg-\[\#0D0D1A\]{--tw-bg-opacity:1;background-color:#1F1F1F}
.hb-prosa .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}
.hb-prosa .p-5{padding:1.25rem}
.hb-prosa .p-6{padding:1.5rem}
.hb-prosa .px-5{padding-left:1.25rem;padding-right:1.25rem}
.hb-prosa .py-4{padding-top:1rem;padding-bottom:1rem}
.hb-prosa .text-left{text-align:left}
.hb-prosa .text-center{text-align:center}
.hb-prosa .text-2xl{font-size:1.5rem;line-height:2rem}
.hb-prosa .text-lg{font-size:1.125rem;line-height:1.75rem}
.hb-prosa .text-sm{font-size:.875rem;line-height:1.25rem}
.hb-prosa .text-xl{font-size:1.25rem;line-height:1.75rem}
.hb-prosa .text-xs{font-size:.75rem;line-height:1rem}
.hb-prosa .font-black{font-weight:700}
.hb-prosa .font-bold{font-weight:600}
.hb-prosa .font-semibold{font-weight:600}
.hb-prosa .uppercase{text-transform:uppercase}
.hb-prosa .leading-relaxed{line-height:1.625}
.hb-prosa .leading-tight{line-height:1.25}
.hb-prosa .tracking-\[\.18em\]{letter-spacing:.18em}
.hb-prosa .text-\[\#0D0D1A\]{--tw-text-opacity:1;color:#141414}
.hb-prosa .text-\[\#FF5733\]{--tw-text-opacity:1;color:#F14F44}
.hb-prosa .text-gray-400{--tw-text-opacity:1;color:#8A8A8A}
.hb-prosa .text-gray-500{--tw-text-opacity:1;color:#6B6B6B}
.hb-prosa .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}
.hb-prosa .text-white\/50{color:hsla(0,0%,100%,.5)}
.hb-prosa .text-white\/80{color:hsla(0,0%,100%,.8)}
.hb-prosa .text-white\/85{color:hsla(0,0%,100%,.85)}
.hb-prosa .underline{text-decoration-line:underline}
.hb-prosa .shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}
.hb-prosa .shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.hb-prosa .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
@media(min-width:768px){.hb-prosa .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.hb-prosa .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:768px){.hb-prosa .md\:p-8{padding:2rem}}
/* cajas oscuras: su contenido hereda el blanco (si no, títulos/enlaces quedarían negro sobre negro) */
.hb-prosa .bg-\[\#0D0D1A\] :is(h2,h3,h4,strong,a,li){color:inherit}
/* clases que nunca tuvieron CSS compilado (intención evidente del autor) */
.hb-prosa .hover\:text-\[\#FF5733\]:hover{color:#F14F44}
.hb-prosa .text-\[\#0D0D1A\]\/65{color:rgba(20,20,20,.65)}.hb-prosa .text-\[\#0D0D1A\]\/80{color:rgba(20,20,20,.8)}
.hb-prosa .tracking-\[\.15em\]{letter-spacing:.15em}.hb-prosa .text-right{text-align:right}
.hb-prosa .my-4{margin-top:1rem;margin-bottom:1rem}.hb-prosa .my-8{margin-top:2rem;margin-bottom:2rem}.hb-prosa .mb-0{margin-bottom:0}
/* cajas naranjas y tablas con scroll: nunca tuvieron estilo compilado → se les da el nuevo */
.hb-prosa div[class*="bg-[#FF5733]/5"]{background:#FDF1EF;border:1px solid #F6D2CC;border-radius:18px 18px 18px 0;padding:20px 22px;margin:1.2em 0}
.hb-prosa .overflow-x-auto{overflow-x:auto;border:1px solid #E0E0E0;border-radius:18px 18px 18px 0;margin:1.6em 0;background:#fff}
/* CTA final del artículo */
.hb-cta-art{max-width:1320px;margin:14px auto 0;padding:0 14px}
.hb-cta-art>div{background:#1F1F1F;color:#fff;border-radius:25px 25px 25px 0;padding:76px 54px;text-align:center}
.hb-cta-art h2{margin:0;font-size:clamp(30px,4vw,48px);font-weight:600;line-height:1.08;color:#fff;text-wrap:balance}
.hb-cta-art p{margin:18px auto 30px;max-width:58ch;font-size:17px;line-height:1.7;color:rgba(255,255,255,.75)}
.hb-cta-art a{display:inline-flex;align-items:center;gap:14px;padding:6px 6px 6px 26px;border-radius:999px;background:#fff;color:#141414;font-weight:600;font-size:16px}
.hb-cta-art a:hover{color:#141414;background:#F0F2F4}
.hb-cta-art a span{width:44px;height:44px;border-radius:50%;background:#F14F44;color:#fff;display:grid;place-items:center}
@media(max-width:900px){.hb-art-cab{padding:36px 22px 32px}.hb-art-cuerpo{padding:36px 22px}.hb-cta-art>div{padding:52px 22px}.hb-prosa{font-size:16px}}

/* ═══ Legales: su contenido trae estilos en línea pensados para el fondo oscuro antiguo ═══ */
.hb-legal [style*="color:#e2e8f0"]{color:#333!important}
.hb-legal [style*="border-bottom:1px solid #1e293b"],.hb-legal [style*="border-bottom:1px solid #334155"]{border-bottom-color:#E0E0E0!important}
.hb-legal [style*="border-left:3px solid #7bbf1f"]{border-left-color:#F14F44!important}
.hb-legal h2{font-size:22px;line-height:1.4737;margin:1.8em 0 .5em}
.hb-legal h3{font-size:20px;line-height:1.4737;margin:1.4em 0 .4em}
@media(min-width:768px){.hb-legal h2{font-size:25px;line-height:1.3333}}
@media(min-width:992px){.hb-legal h2{font-size:30px;line-height:1.3333}.hb-legal h3{font-size:25px;line-height:1.4}}
.hb-legal table{font-size:14.5px}
/* Anclas (#plan-profesional, etc.): que el título quede visible bajo la cabecera nueva (84px / 104px) */
.hb-prosa [id]{scroll-margin-top:110px!important}
@media(max-width:900px){.hb-prosa [id]{scroll-margin-top:130px!important}}