/* Goto CONTA 12 · Guía de color: naranja #ff7c0f · turquesa #41888f · claro #f0f8fb */
:root {
    --naranja: #ff7c0f;
    --naranja-osc: #e86a00;
    --turquesa: #41888f;
    --turquesa-osc: #2f6f75;
    --claro: #f0f8fb;
    --texto: #1b1f23;
    --bs-body-font-family: 'Open Sans', system-ui, sans-serif;
    --bs-body-color: var(--texto);
    --bs-link-color-rgb: 65, 136, 143;
}
html { scroll-padding-top: 84px; }
body { background: #fff; overflow-x: clip; }
.captcha-img { background: var(--claro); }
.text-naranja { color: var(--naranja) !important; }
.text-white-75 { color: rgba(255, 255, 255, .85); }

/* Botones */
.btn-naranja {
    --bs-btn-bg: var(--naranja); --bs-btn-border-color: var(--naranja); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--naranja-osc); --bs-btn-hover-border-color: var(--naranja-osc); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--naranja-osc); --bs-btn-active-color: #fff;
    font-weight: 700; border-radius: 10px; box-shadow: 0 6px 16px rgba(255, 124, 15, .28);
}
.btn-borde-turquesa {
    --bs-btn-color: var(--turquesa); --bs-btn-border-color: var(--turquesa);
    --bs-btn-hover-bg: var(--turquesa); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--turquesa);
    --bs-btn-active-bg: var(--turquesa-osc); --bs-btn-active-color: #fff;
    font-weight: 700; border-width: 2px; border-radius: 10px;
}
.btn-borde-blanco {
    --bs-btn-color: var(--turquesa); --bs-btn-bg: #fff; --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: var(--claro); --bs-btn-hover-color: var(--turquesa-osc);
    font-weight: 700; border-radius: 10px; padding-inline: 2rem;
}

/* Cabecera */
#cabecera { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); transition: box-shadow .2s; }
#cabecera.con-sombra { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
#cabecera .navbar-brand img { height: 40px; width: auto; }
#cabecera .nav-link { font-weight: 600; color: var(--texto); font-size: .95rem; }
#cabecera .nav-link:hover, #cabecera .nav-link.active { color: var(--naranja); }

/* Hero */
.hero { padding: 120px 0 40px; background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--claro) 100%); }
.hero-titulo { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; }
.hero .lead { font-size: 1.15rem; max-width: 34rem; }
.lista-checks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-weight: 600; font-size: .92rem; }
.lista-checks i { color: var(--turquesa); }

/* Beneficios */
.caja-beneficios { background: var(--claro); border-radius: 18px; padding: 1.75rem 1.5rem; }
.beneficio { display: flex; gap: 1rem; align-items: flex-start; }
.beneficio img { flex-shrink: 0; }
.beneficio h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.beneficio p { margin: 0; font-size: .92rem; color: #444; }
@media (min-width: 992px) {
    .beneficio + .beneficio { border-left: 1px solid rgba(65, 136, 143, .25); }
}

/* Secciones */
.seccion { padding: 70px 0; }
.fondo-claro { background: var(--claro); }
.antetitulo { display: block; color: var(--turquesa); font-weight: 800; text-transform: uppercase; font-size: .9rem; letter-spacing: .02em; margin-bottom: .4rem; }
h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.01em; }
.bloque-texto { border-left: 5px solid var(--naranja); padding-left: 1.25rem; }
.bloque-texto p { font-size: 1.08rem; color: #333; }
.caja-clara { background: var(--claro); border-radius: 22px; padding: 2.5rem; }
@media (max-width: 575px) { .caja-clara { padding: 1.5rem; } }

/* Funcionalidades */
.tarjeta-funcion {
    display: flex; gap: .9rem; background: #fff; border: 1px solid #e3edf0; border-radius: 14px;
    padding: 1.1rem; box-shadow: 0 4px 14px rgba(20, 60, 70, .06); transition: transform .2s, box-shadow .2s;
}
.tarjeta-funcion:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 60, 70, .12); }
.tarjeta-funcion img { flex-shrink: 0; }
.tarjeta-funcion h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.tarjeta-funcion p { font-size: .9rem; margin: 0; color: #444; }

/* Vídeo */
.seccion-video { background: linear-gradient(120deg, var(--turquesa-osc), var(--turquesa) 55%, #1f7f86); padding: 70px 0; }
.portada-video { border: 0; padding: 0; background: none; border-radius: 18px; overflow: hidden; display: block; width: 100%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transition: transform .2s; }
.portada-video:hover { transform: scale(1.015); }

/* Cuadro de mando */
.indicador { background: #fff; border: 1px solid #e3edf0; border-radius: 12px; padding: .7rem .4rem; text-align: center; height: 100%;
    box-shadow: 0 3px 10px rgba(20, 60, 70, .06); }
.indicador span { display: block; font-size: .78rem; font-weight: 700; margin-top: .35rem; line-height: 1.2; }

/* FAQ */
.accordion-button { font-weight: 700; }
.accordion-button:not(.collapsed) { background: #fff; color: var(--turquesa-osc); box-shadow: inset 0 -1px 0 #e3edf0; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(65, 136, 143, .25); }
.accordion-item { border-color: #e3edf0; }

/* CTA */
.caja-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; background: var(--claro); border-radius: 22px; padding: 2rem 2.5rem; }
.caja-cta > .flex-grow-1 { flex: 1 1 320px; }
.caja-cta h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: .3rem; }

/* Pie */
.pie { background: #14262a; color: #c8d6d9; padding: 2.5rem 0 1.5rem; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: var(--naranja); }
.pie hr { border-color: rgba(255, 255, 255, .15); }
.logo-pie { background: #fff; padding: 6px 10px; border-radius: 8px; height: auto; max-height: 52px; max-width: 100%; }

/* Formularios */
.form-control:focus, .form-check-input:focus { border-color: var(--turquesa); box-shadow: 0 0 0 .2rem rgba(65, 136, 143, .2); }
.form-check-input:checked { background-color: var(--turquesa); border-color: var(--turquesa); }

/* Animación de entrada */
.animar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.animar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .animar { opacity: 1; transform: none; transition: none; }
    .tarjeta-funcion, .portada-video { transition: none; }
}