/* ============================================================================
   UCHEBA.ES · Hoja de estilos premium
   Rebrand del sistema de diseño del kit (Bootstrap 5 + Poppins).
   Colores de marca: azul #2E6FD9 · azul claro #4FA3E3 · navy #14233F
   ============================================================================ */

:root {
    --uch-blue:        #2E6FD9;
    --uch-blue-dark:   #1F52A8;
    --uch-blue-light:  #EAF2FE;
    --uch-blue-accent: #4FA3E3;
    --uch-navy:        #14233F;
    --uch-navy-deep:   #0F1B33;
    --uch-gray:        #5B6B82;
    --uch-gray-soft:   #8A97AB;
    --uch-light:       #F6F9FD;
    --uch-border:      #E4EAF2;
    --uch-success:     #16A34A;
    --uch-warning:     #F59E0B;

    --font-main:   'Inter', system-ui, -apple-system, sans-serif;
    --font-head:   'Montserrat', 'Inter', system-ui, sans-serif;
    --shadow-sm:   0 2px 12px rgba(20,35,63,.07);
    --shadow-md:   0 8px 30px rgba(46,111,217,.13);
    --shadow-lg:   0 18px 50px rgba(20,35,63,.16);
    --radius:      14px;
    --radius-lg:   22px;
    --radius-xl:   30px;
    --maxw:        1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-main);
    color: var(--uch-navy);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--uch-blue); text-decoration: none; transition: color .18s; }
a:hover { color: var(--uch-blue-dark); }
h1,h2,h3,h4,h5 { font-family: var(--font-head); font-weight: 700; color: var(--uch-navy); letter-spacing: -.01em; }
img { max-width: 100%; height: auto; }
section { position: relative; }
.container { max-width: var(--maxw); }

.text-blue    { color: var(--uch-blue) !important; }
.text-muted-2 { color: var(--uch-gray) !important; }
.bg-light-2   { background: var(--uch-light) !important; }

/* ── BOTONES ─────────────────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: 999px; transition: all .2s ease; }
.btn-primary {
    background: var(--uch-blue); border-color: var(--uch-blue);
    padding: .68rem 1.7rem; box-shadow: 0 6px 18px rgba(46,111,217,.28);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--uch-blue-dark); border-color: var(--uch-blue-dark);
    transform: translateY(-2px); box-shadow: 0 10px 24px rgba(46,111,217,.34);
}
.btn-outline-primary {
    color: var(--uch-blue); border: 1.5px solid var(--uch-blue); padding: .62rem 1.6rem;
}
.btn-outline-primary:hover { background: var(--uch-blue); color: #fff; transform: translateY(-2px); }
.btn-light-nav {
    background: var(--uch-blue-light); color: var(--uch-blue); border: none; padding: .55rem 1.3rem;
}
.btn-light-nav:hover { background: var(--uch-blue); color: #fff; }
.btn-lg { padding: .9rem 2.2rem; font-size: 1.03rem; }
.btn-white { background:#fff; color: var(--uch-navy); border:none; padding:.7rem 1.7rem; }
.btn-white:hover { background: var(--uch-blue-light); color: var(--uch-blue); }
.btn:focus-visible { outline: 3px solid rgba(46,111,217,.4); outline-offset: 2px; }

/* ── NAVBAR ──────────────────────────────────────────────────────────── */
.uch-navbar {
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--uch-border);
    box-shadow: 0 2px 16px rgba(15,27,51,.05);
    padding: .55rem 0; position: sticky; top: 0; z-index: 1030;
}
.uch-navbar .navbar-brand img { height: 42px; width:auto; }
.uch-navbar .nav-link {
    color: var(--uch-navy); font-weight: 500; font-size: .93rem;
    padding: .45rem .85rem !important; border-radius: 9px; transition: all .18s;
}
.uch-navbar .nav-link:hover, .uch-navbar .nav-link.active {
    color: var(--uch-blue); background: var(--uch-blue-light);
}
.navbar-toggler { border: none; padding: .3rem; }
.navbar-toggler:focus { box-shadow: none; }

/* ── SELECTOR DE IDIOMA ──────────────────────────────────────────────── */
.lang-switch { display:flex; align-items:center; gap:.15rem;
    background: var(--uch-light); border:1px solid var(--uch-border);
    border-radius: 999px; padding:.2rem; }
.lang-switch a {
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 34px; padding:.25rem .5rem; border-radius: 999px;
    font-size:.8rem; font-weight:600; color: var(--uch-gray); line-height:1;
}
.lang-switch a:hover { color: var(--uch-blue); }
.lang-switch a.active { background: var(--uch-blue); color:#fff; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
    background: radial-gradient(1100px 500px at 85% -5%, #dcecff 0%, transparent 60%),
                linear-gradient(160deg, #eef5ff 0%, #ffffff 55%, #f2f8ff 100%);
    padding: 68px 0 76px; overflow: hidden;
}
.hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.05rem); font-weight: 800; line-height: 1.12;
    color: var(--uch-navy); letter-spacing: -.02em;
}
.hero h1 .hl { color: var(--uch-blue); }
.hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--uch-gray); margin-top: 1rem; }
.hero .micro { color: var(--uch-gray-soft); font-size: .95rem; margin-top:.7rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top: 1.7rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:.55rem; margin-top: 1.9rem; }
.hero-trust .item {
    background:#fff; border:1px solid var(--uch-border); border-radius:999px;
    padding:.4rem .95rem; font-size:.82rem; font-weight:600; color:var(--uch-navy);
    box-shadow:0 2px 8px rgba(15,27,51,.05);
}
.hero-trust .item i { color: var(--uch-blue); margin-right:.35rem; }

/* Foto de Anastasiia en el hero (tratamiento pro) */
.hero-photo { position: relative; padding: 10px; }
.hero-photo .frame {
    position: relative; border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-lg); aspect-ratio: 4/5; background: var(--uch-blue-light);
}
.hero-photo .frame img { width:100%; height:100%; object-fit: cover; object-position: center top; display:block; }
.hero-photo::after {
    content:''; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(circle at 70% 30%, rgba(46,111,217,.18), transparent 65%);
    filter: blur(10px); border-radius: 40px;
}
.hero-photo .badge-float {
    position:absolute; left:-10px; bottom: 26px; background:#fff;
    border:1px solid var(--uch-border); border-radius: var(--radius);
    padding:.7rem 1rem; box-shadow: var(--shadow-md); display:flex; gap:.6rem; align-items:center;
    max-width: 230px;
}
.hero-photo .badge-float .dot { width:40px; height:40px; border-radius:50%;
    background: var(--uch-blue); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-photo .badge-float small { color: var(--uch-gray); display:block; font-size:.72rem; }
.hero-photo .badge-float strong { color: var(--uch-navy); font-size:.9rem; line-height:1.15; }

/* ── SECCIONES GENERICAS ─────────────────────────────────────────────── */
.section { padding: 72px 0; }
.section-sm { padding: 52px 0; }
.eyebrow {
    display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color: var(--uch-blue); background: var(--uch-blue-light);
    padding:.35rem .85rem; border-radius:999px; margin-bottom: .9rem;
}
.section-title { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; line-height:1.18; }
.section-title .hl { color: var(--uch-blue); }
.section-subtitle { color: var(--uch-gray); font-size: 1.04rem; max-width: 640px; }
.text-center .section-subtitle { margin-left:auto; margin-right:auto; }

/* ── TARJETAS ────────────────────────────────────────────────────────── */
.card-premium {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    padding: 1.6rem; height:100%; transition: all .28s ease;
}
.card-premium:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: #cfe0f8; }
.card-icon {
    width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background: var(--uch-blue-light); color: var(--uch-blue); font-size:1.4rem; margin-bottom:1rem;
}
.card-premium h3, .card-premium h4 { font-size:1.1rem; margin-bottom:.5rem; }
.card-premium p { color: var(--uch-gray); font-size:.95rem; margin:0; }

/* chips lista de dudas (bloque problema) */
.chip-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.chip {
    background:#fff; border:1px solid var(--uch-border); border-radius:999px;
    padding:.5rem 1rem; font-size:.9rem; font-weight:600; color: var(--uch-navy);
    box-shadow: var(--shadow-sm);
}
.chip i { color: var(--uch-blue-accent); margin-right:.35rem; }

/* servicio destacado: sub-items */
.svc-item { display:flex; gap:.7rem; align-items:flex-start; padding:.55rem 0; }
.svc-item i { color: var(--uch-blue); font-size:1.1rem; margin-top:.15rem; flex-shrink:0; }
.svc-item span { color: var(--uch-navy); font-size:.96rem; font-weight:500; }

/* niveles educativos */
.level-card {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius);
    padding:1.3rem 1rem; text-align:center; transition: all .25s; height:100%;
}
.level-card:hover { border-color: var(--uch-blue); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.level-card .ic { font-size:1.9rem; color: var(--uch-blue-accent); margin-bottom:.5rem; }
.level-card h4 { font-size:1rem; margin:0 0 .2rem; }
.level-card small { color: var(--uch-gray); font-size:.8rem; }
.level-card.is-main { background: linear-gradient(160deg, var(--uch-blue-light), #fff); border-color:#bcd6f7; }
.level-card .tag-main {
    display:inline-block; margin-top:.5rem; font-size:.68rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:#fff; background: var(--uch-blue); border-radius:999px; padding:.15rem .6rem;
}

/* ── PROCESO (pasos) ─────────────────────────────────────────────────── */
.step-card {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    padding: 1.7rem 1.4rem; height:100%; transition: all .28s; position:relative;
}
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color:#cfe0f8; }
.step-num {
    width:46px; height:46px; border-radius:50%; background: var(--uch-blue); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; margin-bottom:.9rem;
}
.step-card h4 { font-size:1.05rem; margin-bottom:.4rem; }
.step-card p { color: var(--uch-gray); font-size:.92rem; margin:0; }

/* ── BANDA NAVY (confianza / cifras) ─────────────────────────────────── */
.band-navy {
    background: linear-gradient(125deg, var(--uch-navy-deep) 0%, #1c3560 100%);
    padding: 60px 0; color:#fff; border-radius: 0;
}
.band-navy h2 { color:#fff; }
.band-navy .muted { color:#a9bcda; }
.band-feature { display:flex; gap:.8rem; align-items:flex-start; }
.band-feature .ic { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center; color:#8fb6f2; font-size:1.2rem; flex-shrink:0; }
.band-feature h5 { color:#fff; font-size:1rem; margin:0 0 .15rem; }
.band-feature p { color:#a9bcda; font-size:.88rem; margin:0; }

/* ── SOBRE ANASTASIIA ────────────────────────────────────────────────── */
.about-photo { border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.about-sign { font-weight:700; color: var(--uch-navy); }
.about-sign small { display:block; color: var(--uch-gray); font-weight:500; font-size:.85rem; }
.quote-mark { color: var(--uch-blue-accent); font-size:2.4rem; line-height:0; opacity:.5; }

/* ── PRECIOS ─────────────────────────────────────────────────────────── */
.price-card {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    padding: 1.9rem 1.6rem; height:100%; display:flex; flex-direction:column; transition: all .28s; position:relative;
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.price-card.featured { border:2px solid var(--uch-blue); box-shadow: var(--shadow-md); }
.price-card.featured::before {
    content: attr(data-badge); position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background: var(--uch-blue); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; padding:.3rem .95rem; border-radius:999px; white-space:nowrap;
}
.price-card h3 { font-size:1.15rem; margin-bottom:.3rem; }
.price-amount { font-size:2.2rem; font-weight:800; color: var(--uch-navy); line-height:1; margin:.3rem 0 .1rem; }
.price-amount .from { font-size:.8rem; font-weight:600; color: var(--uch-gray); vertical-align:middle; margin-right:.25rem; }
.price-list { list-style:none; padding:0; margin:1.1rem 0 1.4rem; flex-grow:1; }
.price-list li { padding:.34rem 0; color: var(--uch-navy); font-size:.9rem; display:flex; gap:.5rem; align-items:flex-start; }
.price-list li i { color: var(--uch-success); margin-top:.2rem; flex-shrink:0; }
.price-note { font-size:.82rem; color: var(--uch-gray); }
.price-disclaimer {
    background: var(--uch-light); border:1px solid var(--uch-border); border-radius: var(--radius);
    padding: 1.1rem 1.3rem; color: var(--uch-gray); font-size:.86rem;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.uch-accordion .accordion-item { border:1px solid var(--uch-border); border-radius: var(--radius) !important;
    margin-bottom:.7rem; overflow:hidden; background:#fff; }
.uch-accordion .accordion-button {
    font-weight:600; color: var(--uch-navy); font-size:1rem; padding:1.1rem 1.3rem; background:#fff;
}
.uch-accordion .accordion-button:not(.collapsed) { color: var(--uch-blue); background: var(--uch-blue-light); box-shadow:none; }
.uch-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(46,111,217,.18); }
.uch-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232E6FD9'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
}
.uch-accordion .accordion-body { color: var(--uch-gray); font-size:.95rem; padding:0 1.3rem 1.2rem; }

/* ── FORMULARIO ──────────────────────────────────────────────────────── */
.form-card {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 2.2rem;
}
.form-label { font-weight:600; color: var(--uch-navy); font-size:.9rem; margin-bottom:.3rem; }
.form-label .req { color: var(--uch-blue); }
.form-control, .form-select {
    border-radius: 11px; border:1.5px solid var(--uch-border); padding:.65rem .9rem; font-size:.95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--uch-blue); box-shadow: 0 0 0 .2rem rgba(46,111,217,.15);
}
.form-control.is-invalid, .form-select.is-invalid { border-color:#dc3545; }
.file-drop {
    border:1.5px dashed var(--uch-border); border-radius: var(--radius); padding:1.2rem;
    text-align:center; color: var(--uch-gray); cursor:pointer; transition: all .2s; background: var(--uch-light);
}
.file-drop:hover, .file-drop.drag { border-color: var(--uch-blue); background: var(--uch-blue-light); color: var(--uch-blue); }
.file-drop i { font-size:1.6rem; color: var(--uch-blue-accent); }
.file-list { margin-top:.6rem; }
.file-list .fi { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:#fff; border:1px solid var(--uch-border); border-radius:9px; padding:.4rem .7rem; font-size:.82rem; margin-top:.35rem; }
.file-list .fi button { border:none; background:none; color:#dc3545; cursor:pointer; }
.contact-side {
    background: linear-gradient(160deg, var(--uch-navy-deep), #1c3560); color:#fff;
    border-radius: var(--radius-lg); padding: 2.1rem;
}
.contact-side h3 { color:#fff; }
.contact-side .ci { display:flex; gap:.8rem; align-items:center; margin-bottom:1rem; color:#cdd9ec; }
.contact-side .ci i { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center; color:#8fb6f2; font-size:1.1rem; flex-shrink:0; }
.contact-side a { color:#fff; }

/* ── ALERTAS ─────────────────────────────────────────────────────────── */
.alert-ok  { background:#e9f9ef; border:1px solid #b7e6c6; color:#166534; border-radius: var(--radius); padding:1rem 1.2rem; }
.alert-err { background:#fdecec; border:1px solid #f5c2c2; color:#991b1b; border-radius: var(--radius); padding:1rem 1.2rem; }

/* ── CTA FINAL ───────────────────────────────────────────────────────── */
.cta-band {
    background: linear-gradient(120deg, var(--uch-blue) 0%, var(--uch-blue-dark) 100%);
    border-radius: var(--radius-xl); padding: 3rem 2rem; color:#fff; text-align:center;
    box-shadow: var(--shadow-md);
}
.cta-band h2 { color:#fff; font-size: clamp(1.5rem,3vw,2.1rem); }
.cta-band p { color: #e3ecfb; max-width:560px; margin:.6rem auto 1.6rem; }

/* ── BLOG ────────────────────────────────────────────────────────────── */
.article-card {
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg); overflow:hidden;
    height:100%; display:flex; flex-direction:column; transition: all .28s;
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.article-card .thumb { aspect-ratio: 16/9; overflow:hidden; background: var(--uch-blue-light); }
.article-card .thumb img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.article-card:hover .thumb img { transform: scale(1.05); }
.article-card .body { padding:1.3rem; display:flex; flex-direction:column; flex-grow:1; }
.article-card .cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--uch-blue); }
.article-card h3 { font-size:1.08rem; margin:.4rem 0 .5rem; line-height:1.3; }
.article-card p { color: var(--uch-gray); font-size:.9rem; flex-grow:1; }
.article-card .meta { color: var(--uch-gray-soft); font-size:.8rem; margin-top:.7rem; }

/* cuerpo del articulo */
.article-hero { background: var(--uch-light); padding: 46px 0 30px; }
.article-body { font-size: 1.06rem; color:#2a3a52; line-height:1.75; max-width: 760px; }
.article-body h2 { font-size:1.5rem; margin:2rem 0 .8rem; color: var(--uch-navy); }
.article-body p { margin:0 0 1.1rem; }
.article-body ul { margin:0 0 1.3rem; padding-left:0; list-style:none; }
.article-body ul li { position:relative; padding:.3rem 0 .3rem 1.7rem; }
.article-body ul li::before { content:'\2713'; position:absolute; left:0; top:.3rem; color: var(--uch-blue);
    font-weight:700; }
.article-body strong { color: var(--uch-navy); }
.article-cover { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio:16/9; }
.article-cover img { width:100%; height:100%; object-fit:cover; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.uch-footer { background: var(--uch-navy-deep); color:#b7c4d8; padding: 56px 0 26px; }
.uch-footer img.flogo { height:40px; margin-bottom:1rem; }
.uch-footer h5 { color:#fff; font-size:.95rem; margin-bottom:1rem; letter-spacing:.02em; }
.uch-footer a { color:#b7c4d8; font-size:.9rem; display:inline-block; padding:.2rem 0; }
.uch-footer a:hover { color:#fff; }
.uch-footer .foot-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08);
    display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem; padding:0; }
.uch-footer .foot-social a:hover { background: var(--uch-blue); color:#fff; }
.uch-footer .foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.3rem;
    font-size:.83rem; color:#8194ad; }
.footer-lang { display:flex; gap:.4rem; }
.footer-lang a { border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:.25rem .8rem; font-size:.8rem; }
.footer-lang a.active { background: var(--uch-blue); border-color: var(--uch-blue); color:#fff; }

/* ── BOTONES FLOTANTES WHATSAPP / TELEGRAM ───────────────────────────── */
.float-contact { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display:flex; flex-direction:column; gap:.6rem; }
.float-contact a {
    width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.55rem; box-shadow: var(--shadow-md); transition: transform .2s;
}
.float-contact a:hover { transform: scale(1.08); color:#fff; }
.fc-wa { background:#25D366; }
.fc-tg { background:#2AABEE; }

/* ── COOKIE BANNER ───────────────────────────────────────────────────── */
.cookie-banner {
    position: fixed; left:16px; right:16px; bottom:16px; z-index:1050; max-width: 560px; margin:0 auto;
    background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 1.3rem 1.4rem; display:none;
}
.cookie-banner.show { display:block; animation: cookieUp .35s ease; }
@keyframes cookieUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.cookie-banner p { font-size:.88rem; color: var(--uch-gray); margin:0 0 .9rem; }
.cookie-banner .btns { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── ANIMACIONES SCROLL ──────────────────────────────────────────────── */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .uch-navbar .nav-link { padding:.6rem .3rem !important; }
    .hero { padding: 46px 0 54px; }
    .hero-photo { max-width: 380px; margin: 2rem auto 0; }
    .section { padding: 52px 0; }
    .lang-switch { margin: .6rem 0; }
}
@media (max-width: 575px) {
    .form-card, .contact-side { padding: 1.4rem; }
    .cta-band { padding: 2.2rem 1.3rem; }
    .price-amount { font-size: 2rem; }
    .float-contact a { width:50px; height:50px; font-size:1.4rem; }
}

/* Accesibilidad: respetar reduce-motion */
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
    .btn:hover, .card-premium:hover, .step-card:hover, .price-card:hover,
    .article-card:hover, .float-contact a:hover { transform:none !important; }
}
:focus-visible { outline: 3px solid rgba(46,111,217,.45); outline-offset: 2px; border-radius: 4px; }
.skip-link { position:absolute; left:-999px; top:0; background: var(--uch-blue); color:#fff; padding:.6rem 1rem;
    border-radius:0 0 8px 0; z-index:2000; }
.skip-link:focus { left:0; color:#fff; }

/* ============================================================================
   BLOG · cajas de articulo (portadas SVG unicas)
   ============================================================================ */
.article-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg);
    overflow:hidden; text-decoration:none; color: var(--uch-navy); transition: transform .25s, box-shadow .25s, border-color .25s; }
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color:#cfe0f8; color: var(--uch-navy); }
.article-card .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background: var(--uch-navy); }
.article-card .thumb .cover-svg, .article-card .thumb .cover-svg svg { display:block; width:100%; height:100%; }
.article-card .thumb svg { transition: transform .5s; }
.article-card:hover .thumb svg { transform: scale(1.04); }
.article-card .chip { position:absolute; left:14px; top:14px; background:rgba(255,255,255,.92); color: var(--uch-blue-dark); font-size:.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; padding:.3rem .65rem; border-radius:999px; backdrop-filter: blur(4px); }
.article-card .chip.new { left:auto; right:14px; background: var(--uch-warning); color:#fff; }
.article-card .body { padding:1.25rem 1.3rem 1.2rem; display:flex; flex-direction:column; flex-grow:1; }
.article-card h3 { font-size:1.08rem; margin:0 0 .5rem; line-height:1.35; }
.article-card p { color: var(--uch-gray); font-size:.9rem; flex-grow:1; margin-bottom:.9rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.article-card .meta { display:flex; align-items:center; gap:.9rem; color: var(--uch-gray-soft); font-size:.78rem; margin-top:auto; padding-top:.7rem; border-top:1px solid var(--uch-border); }
.article-card .meta i { margin-right:.3rem; }
.article-card .meta .more { margin-left:auto; color: var(--uch-blue); font-size:1rem; transition: transform .25s; }
.article-card:hover .meta .more { transform: translateX(4px); }
.article-cover .cover-svg, .article-cover .cover-svg svg { display:block; width:100%; height:100%; }
.article-meta-row { display:flex; gap:1.2rem; color: var(--uch-gray-soft); font-size:.85rem; }

/* ============================================================================
   GUIAS SEO
   ============================================================================ */
.guide-hero { background: linear-gradient(180deg, var(--uch-light), #fff); padding: 40px 0 34px; }
.guide-crumbs { font-size:.8rem; color: var(--uch-gray-soft); margin-bottom:1rem; display:flex; gap:.5rem; }
.guide-crumbs a { color: var(--uch-gray); text-decoration:none; }
.guide-h1 { font-family: var(--font-head); font-weight:800; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height:1.15; margin:.6rem 0 1rem; letter-spacing:-.01em; }
.guide-lead { color: var(--uch-gray); font-size:1.08rem; line-height:1.65; max-width:620px; }
.guide-meta { color: var(--uch-gray-soft); font-size:.85rem; margin-top:1rem; }
.guide-illu { border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); }
.guide-illu img { display:block; width:100%; height:auto; }
.guide-stats { padding: 0 0 1rem; }
.gstat { background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg); padding:1.1rem 1.2rem; height:100%; box-shadow: var(--shadow-sm); }
.gstat .n { font-family: var(--font-head); font-weight:800; font-size:1.7rem; color: var(--uch-blue); line-height:1.1; }
.gstat .l { color: var(--uch-gray); font-size:.85rem; margin-top:.3rem; line-height:1.35; }
.guide-body { padding-top: 2.5rem; }
.guide-toc { position:sticky; top:96px; background: var(--uch-light); border-radius: var(--radius-lg); padding:1.2rem 1.2rem 1.3rem; }
.guide-toc .toc-title { font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--uch-gray); margin-bottom:.7rem; }
.guide-toc ol { padding-left:1.2rem; margin:0; font-size:.86rem; }
.guide-toc li { margin:.35rem 0; }
.guide-toc a { color: var(--uch-navy); text-decoration:none; }
.guide-toc a:hover { color: var(--uch-blue); }
.guide-content { max-width: 820px; }
.guide-sec { margin-bottom: 2.6rem; scroll-margin-top: 90px; }
.guide-sec h2 { font-family: var(--font-head); font-weight:800; font-size:1.5rem; margin-bottom:1rem; line-height:1.3; display:flex; align-items:baseline; gap:.7rem; }
.guide-sec h2 .num { font-size:.8rem; font-weight:800; color: var(--uch-blue); background: var(--uch-blue-light); border-radius:8px; padding:.2rem .5rem; flex-shrink:0; }
.guide-sec h3 { font-size:1.12rem; font-weight:700; margin:1.4rem 0 .6rem; }
.guide-sec p, .guide-sec li { color:#2a3a55; font-size:1.02rem; line-height:1.75; }
.guide-sec ul, .guide-sec ol { padding-left:1.3rem; margin-bottom:1rem; }
.guide-sec li { margin-bottom:.4rem; }
.guide-sec a { color: var(--uch-blue); font-weight:600; text-decoration:none; border-bottom:1px solid #cfe0f8; }
.guide-sec a:hover { border-bottom-color: var(--uch-blue); }
.guide-sec table { width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.93rem; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.guide-sec th { background: var(--uch-navy); color:#fff; text-align:left; padding:.7rem .9rem; font-weight:600; }
.guide-sec td { padding:.65rem .9rem; border-bottom:1px solid var(--uch-border); vertical-align:top; }
.guide-sec tr:nth-child(even) td { background: var(--uch-light); }
.guide-sec blockquote { border-left:4px solid var(--uch-blue-accent); background: var(--uch-light); padding:.9rem 1.1rem; border-radius:0 var(--radius) var(--radius) 0; margin:1rem 0; color: var(--uch-navy); }
.guide-tip { display:flex; gap:.9rem; align-items:flex-start; background: linear-gradient(135deg, #fff8e6, #fffdf5); border:1px solid #f5e3b3; border-radius: var(--radius); padding:1rem 1.1rem; margin-top:1.2rem; font-size:.95rem; color:#5a4a1a; }
.guide-tip i { color: var(--uch-warning); font-size:1.4rem; flex-shrink:0; }
.guide-steps { list-style:none; padding:0; margin:0; position:relative; }
.guide-steps::before { content:''; position:absolute; left:19px; top:10px; bottom:10px; width:2px; background: var(--uch-border); }
.guide-steps li { display:flex; gap:1.1rem; margin-bottom:1.3rem; position:relative; }
.guide-steps .dot { width:40px; height:40px; border-radius:50%; background: var(--uch-blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 6px #fff; }
.guide-steps strong { display:block; font-size:1.05rem; margin-top:.5rem; }
.guide-steps p { margin:.2rem 0 0; font-size:.95rem; }
.guide-check { background: var(--uch-navy); color:#fff; border-radius: var(--radius-lg); padding:1.6rem 1.7rem; }
.guide-check h2 { color:#fff; font-size:1.3rem; }
.guide-check ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.4rem; }
.guide-check li { display:flex; gap:.6rem; align-items:flex-start; color:#dbe6f6; font-size:.95rem; }
.guide-check li i { color: #7CE2A8; margin-top:.25rem; }
@media (max-width: 700px) { .guide-check ul { grid-template-columns:1fr; } }
.guide-faq .accordion-item { border:1px solid var(--uch-border); border-radius: var(--radius) !important; margin-bottom:.6rem; overflow:hidden; }
.guide-faq .accordion-button { font-weight:600; color: var(--uch-navy); background:#fff; box-shadow:none; padding:1rem 1.2rem; font-size:1rem; }
.guide-faq .accordion-button:not(.collapsed) { background: var(--uch-blue-light); color: var(--uch-blue-dark); }
.guide-faq .accordion-body { color:#2a3a55; line-height:1.7; }
.guide-card { display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius-lg); overflow:hidden; color: var(--uch-navy); transition: transform .25s, box-shadow .25s; }
.guide-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.guide-card .ic img { display:block; width:100%; height:auto; }
.guide-card .body { padding:1.2rem 1.3rem; display:flex; flex-direction:column; flex-grow:1; }
.guide-card .cat { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--uch-blue); }
.guide-card h3 { font-size:1.05rem; margin:.4rem 0 .5rem; line-height:1.35; }
.guide-card p { color: var(--uch-gray); font-size:.88rem; flex-grow:1; }
.guide-card .more { color: var(--uch-blue); font-weight:700; font-size:.85rem; }

/* Footer: guias */
.foot-guides { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.4rem; }
.foot-guides .fg-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9fb0c8; margin-bottom:.7rem; }
.foot-guides .fg-links { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:.5rem; }
.foot-guides .fg-links a { display:flex; align-items:center; gap:.6rem; font-size:.84rem; color:#d7e1f0; text-decoration:none; padding:.55rem .8rem; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.03); transition: all .2s; }
.foot-guides .fg-links a > i:first-child { color: var(--uch-blue-accent); font-size:1rem; width:18px; text-align:center; flex-shrink:0; }
.foot-guides .fg-links a span { flex:1; line-height:1.25; }
.foot-guides .fg-links a .ar { font-size:.7rem; color:#6f83a3; transition: transform .2s; }
.foot-guides .fg-links a:hover { background: var(--uch-blue); border-color: var(--uch-blue); color:#fff; }
.foot-guides .fg-links a:hover > i:first-child, .foot-guides .fg-links a:hover .ar { color:#fff; }
.foot-guides .fg-links a:hover .ar { transform: translateX(3px); }

/* ============================================================================
   PORTAL: ticket, formulario del servicio, firma
   ============================================================================ */
.pt-thread { display:flex; flex-direction:column; gap:.8rem; }
.pt-msg { border-radius: var(--radius); padding:1rem 1.15rem; max-width:90%; border:1px solid var(--uch-border); background:#fff; }
.pt-msg.client { align-self:flex-end; background: var(--uch-blue-light); border-color:#cfe0f8; }
.pt-msg.admin { align-self:flex-start; background: var(--uch-light); }
.pt-msg .who { font-size:.75rem; font-weight:700; color: var(--uch-gray); margin-bottom:.35rem; }
.pt-msg .body { font-size:.95rem; line-height:1.6; }
.pt-msg .files { margin-top:.5rem; font-size:.82rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.pt-msg .files a { background:#fff; border:1px solid var(--uch-border); border-radius:8px; padding:.2rem .55rem; text-decoration:none; }
.sform-sec { font-size:1.05rem; font-weight:800; color: var(--uch-blue-dark); margin:.4rem 0 .3rem; padding-bottom:.4rem; border-bottom:2px solid var(--uch-blue-light); }
.sform-multi { display:flex; flex-wrap:wrap; gap:.35rem .9rem; }
.sform-multi .form-check { margin:0; }
.auth-text { background: var(--uch-light); border:1px solid var(--uch-border); border-radius: var(--radius); padding:1.2rem 1.4rem; max-height:360px; overflow:auto; font-size:.9rem; line-height:1.6; }
.auth-text h2 { font-size:1rem; letter-spacing:.04em; }
.auth-text .auth-ru { margin-top:1.4rem !important; padding-top:1rem !important; }
.auth-text [data-live] { font-weight:700; color: var(--uch-blue); }
.sig-wrap { position:relative; border:2px dashed #b9c9e3; border-radius: var(--radius); background:#fff; overflow:hidden; }
.sig-wrap canvas { display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; }
.sig-wrap .sig-clear { position:absolute; right:10px; top:10px; }
.sform .form-control.is-invalid, .sform .form-select.is-invalid { border-color:#dc3545; }
.guide-mini { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--uch-border); border-radius: var(--radius); padding:.8rem 1rem; color: var(--uch-navy); text-decoration:none; font-weight:600; font-size:.9rem; height:100%; transition: all .2s; }
.guide-mini > i:first-child { font-size:1.3rem; color: var(--uch-blue); background: var(--uch-blue-light); border-radius:10px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-mini span { flex:1; line-height:1.3; }
.guide-mini .ar { color: var(--uch-gray-soft); transition: transform .2s; }
.guide-mini:hover { border-color: var(--uch-blue); box-shadow: var(--shadow-sm); color: var(--uch-navy); }
.guide-mini:hover .ar { transform: translateX(3px); color: var(--uch-blue); }

/* Contacto: como quieres que te contactemos */
.pref-switch { display:flex; gap:.6rem; flex-wrap:wrap; }
.pref-opt { flex:1 1 150px; cursor:pointer; margin:0; }
.pref-opt input { position:absolute; opacity:0; pointer-events:none; }
.pref-opt span { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border:2px solid var(--uch-border); border-radius:999px; font-weight:600; font-size:.92rem; color: var(--uch-gray); background:#fff; transition: all .2s; }
.pref-opt span i { font-size:1.15rem; }
.pref-opt:hover span { border-color:#b9c9e3; }
.pref-opt.on span { border-color: var(--uch-blue); background: var(--uch-blue-light); color: var(--uch-blue-dark); }
.pref-opt.wa.on span { border-color:#25D366; background:#e8fbef; color:#128C4A; }
.pref-opt.tg.on span { border-color:#2AABEE; background:#e7f4fd; color:#1A7FB8; }
.pref-hint { font-size:.83rem; color: var(--uch-gray-soft); margin-top:.5rem; }
.input-group .input-group-text { background: var(--uch-light); border:1.5px solid var(--uch-border); border-right:none; border-radius:12px 0 0 12px; font-weight:700; }
.input-group .form-control { border-radius:0 12px 12px 0; }
form.card-premium, .sform .card-premium, .pt-thread + form.card-premium { height:auto; }
form.card-premium:hover, .sform .card-premium:hover { transform:none; box-shadow:none; border-color: var(--uch-border); }

/* CTA dentro de artículos */
.article-cta { background: linear-gradient(135deg, var(--uch-navy), var(--uch-blue-dark)); color:#fff; border-radius: var(--radius-lg); padding:1.8rem 1.8rem 1.6rem; margin:2.2rem 0 1rem; box-shadow: var(--shadow-md); }
.article-cta h3 { color:#fff; font-size:1.3rem; margin:0 0 .5rem; }
.article-cta p { color:#dbe6f6; margin:0 0 1.1rem; font-size:1rem; }
.article-cta .btn { margin:.2rem .4rem .2rem 0; }
.article-cta .btn-primary { background:#fff; color: var(--uch-navy); border-color:#fff; }
.article-cta .btn-primary:hover { background: var(--uch-blue-light); color: var(--uch-navy); }
.article-cta .btn-outline-primary { color:#fff; border-color:rgba(255,255,255,.55); }
.article-cta .btn-outline-primary:hover { background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.article-body a:not(.btn) { color: var(--uch-blue); font-weight:600; border-bottom:1px solid #cfe0f8; text-decoration:none; }
.article-body table { width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.93rem; }
.article-body th { background: var(--uch-navy); color:#fff; text-align:left; padding:.6rem .8rem; }
.article-body td { padding:.55rem .8rem; border-bottom:1px solid var(--uch-border); vertical-align:top; }
.article-body blockquote { border-left:4px solid var(--uch-blue-accent); background: var(--uch-light); padding:.9rem 1.1rem; border-radius:0 var(--radius) var(--radius) 0; margin:1rem 0; }