/* ==========================================================
   Web pública: cabecera, pie y portada (mismos colores que el panel)
   ========================================================== */

:root {
    --aacv-azul-oscuro: #0f1f3d;
    --aacv-azul: #283d62;
    --aacv-azul-claro: #31599d;
    --aacv-amarillo: #f2d43a;
    --aacv-azul-bandera: #4a5bdc;
    --aacv-rojo: #b5292e;
    --aacv-fondo: #f4f6fb;
    --aacv-texto: #1d2433;
    --aacv-texto-suave: #5b6478;
}

/* Franja con los colores de la bandera */
.franja-bandera {
    display: flex;
    height: 4px;
    width: 90px;
    border-radius: 4px;
    overflow: hidden;
}

.franja-bandera span { flex: 1; }
.franja-bandera span:nth-child(1) { background: var(--aacv-amarillo); }
.franja-bandera span:nth-child(2) { background: var(--aacv-azul-bandera); }
.franja-bandera span:nth-child(3) { background: var(--aacv-rojo); }

/* ---------------- Cabecera ---------------- */

.cabecera-aacv {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(90deg, var(--aacv-azul-oscuro), var(--aacv-azul));
    box-shadow: 0 4px 20px rgba(15, 31, 61, .25);
}

.cabecera-aacv .navbar { padding: .6rem 16px; }

.cabecera-aacv .logo-cabecera {
    height: 46px;
    width: auto;
}

.cabecera-aacv .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem .8rem !important;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}

.cabecera-aacv .nav-link:hover,
.cabecera-aacv .nav-link:focus-visible,
.cabecera-aacv .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.cabecera-aacv .btn-cita {
    font-weight: 700;
    color: var(--aacv-azul-oscuro);
    background: var(--aacv-amarillo);
    border: 0;
    border-radius: 10px;
    padding: .5rem 1rem;
    white-space: nowrap;
}

.cabecera-aacv .btn-cita:hover { background: #ffe066; color: var(--aacv-azul-oscuro); }

.cabecera-aacv .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}

.cabecera-aacv .dropdown-menu {
    border: 0;
    border-radius: 12px;
    padding: .4rem;
    box-shadow: 0 12px 30px rgba(15, 31, 61, .2);
}

.cabecera-aacv .dropdown-item { border-radius: 8px; padding: .5rem .8rem; }

@media (max-width: 991.98px) {
    .cabecera-aacv .navbar-collapse {
        padding: .75rem 0 .5rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
        margin-top: .6rem;
    }
    .cabecera-aacv .btn-cita { margin-top: .5rem; width: 100%; }
}

/* ---------------- Portada ---------------- */

.portada-aacv {
    color: var(--aacv-texto);
    background: #fff;
}

.portada-aacv img { height: auto; }   /* estilos.css pone height: 100% a todas las imágenes */

.portada-aacv section { scroll-margin-top: 80px; }   /* para que los enlaces #seccion no queden bajo la cabecera fija */

.portada-aacv .etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aacv-azul-claro);
    margin-bottom: .6rem;
}

.portada-aacv .titulo-seccion {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    color: var(--aacv-azul-oscuro);
    margin-bottom: .75rem;
    line-height: 1.2;
}

.portada-aacv .intro-seccion {
    font-size: 1.05rem;
    color: var(--aacv-texto-suave);
    max-width: 720px;
}

.portada-aacv .bloque-seccion { padding: 5rem 0; }
.portada-aacv .bloque-seccion.gris { background: var(--aacv-fondo); }

/* Barra de donación */
.portada-aacv .barra-donacion {
    background: #fff8d6;
    border-bottom: 1px solid #f1e4a6;
    font-size: .9rem;
    color: #5b4a00;
}

.portada-aacv .barra-donacion .contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.5rem;
    padding: .55rem 1rem;
}

.portada-aacv .barra-donacion .iban { font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #3d3200; }

.portada-aacv .barra-donacion .btn-copiar,
.portada-aacv .barra-donacion .btn-donar {
    font-size: .8rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #d9c35a;
    color: #5b4a00;
    background: #fff;
}

.portada-aacv .barra-donacion .btn-donar { color: #fff; border-color: var(--aacv-rojo); background: var(--aacv-rojo); }

/* Inicio (hero) con el Teide y el Salto Ángel */
.portada-aacv .hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 6rem 0 7rem;
    background:
        linear-gradient(100deg, rgba(15, 31, 61, .96) 0%, rgba(40, 61, 98, .88) 45%, rgba(49, 89, 157, .45) 100%),
        url("../assets/img/Fondo.jpg") center / cover no-repeat;
}

.portada-aacv .hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    bottom: -200px;
    border-radius: 50%;
    background: var(--aacv-amarillo);
    filter: blur(110px);
    opacity: .25;
    pointer-events: none;
}

.portada-aacv .hero .container { position: relative; z-index: 1; }

.portada-aacv .hero .antetitulo {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    margin-bottom: 1.25rem;
}

.portada-aacv .hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.portada-aacv .hero h1 span { color: var(--aacv-amarillo); }

.portada-aacv .hero .lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .85);
    max-width: 600px;
    margin-bottom: 2rem;
}

.portada-aacv .hero .acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.portada-aacv .btn-principal,
.portada-aacv .btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    padding: .85rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.portada-aacv .btn-principal { color: var(--aacv-azul-oscuro); background: var(--aacv-amarillo); }
.portada-aacv .btn-principal:hover { color: var(--aacv-azul-oscuro); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242, 212, 58, .35); }

.portada-aacv .btn-secundario { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); }
.portada-aacv .btn-secundario:hover { color: var(--aacv-azul-oscuro); background: #fff; transform: translateY(-2px); }

.portada-aacv .hero .enlaces-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

.portada-aacv .hero .enlaces-hero a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}

.portada-aacv .hero .enlaces-hero a:hover { color: #fff; text-decoration: underline; }

.portada-aacv .hero .logo-hero {
    max-width: 380px;
    width: 100%;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .35));
    animation: flotar-logo 6s ease-in-out infinite;
}

@keyframes flotar-logo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Lo que hacemos: tarjetas que suben sobre el final del hero */
.portada-aacv .que-hacemos {
    position: relative;
    z-index: 2;
    margin-top: -3.5rem;
}

.portada-aacv .tarjeta-ayuda {
    height: 100%;
    padding: 1.4rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 31, 61, .1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.portada-aacv .tarjeta-ayuda:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 31, 61, .14); }

.portada-aacv .tarjeta-ayuda .icono,
.portada-aacv .tarjeta-servicio .icono {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.2rem;
    margin-bottom: .9rem;
}

.portada-aacv .tarjeta-ayuda h3 { font-size: 1.05rem; font-weight: 700; color: var(--aacv-azul-oscuro); margin-bottom: .35rem; }
.portada-aacv .tarjeta-ayuda p { font-size: .9rem; color: var(--aacv-texto-suave); margin: 0; }

.portada-aacv .icono.azul { color: var(--aacv-azul-claro); background: rgba(49, 89, 157, .12); }
.portada-aacv .icono.amarillo { color: #a68a00; background: rgba(242, 212, 58, .25); }
.portada-aacv .icono.rojo { color: var(--aacv-rojo); background: rgba(181, 41, 46, .1); }
.portada-aacv .icono.verde { color: #1f8a5b; background: rgba(31, 138, 91, .12); }

/* Cifras */
.portada-aacv .cifra {
    height: 100%;
    padding: 2rem 1.5rem;
    border-radius: 18px;
    text-align: center;
    background: #fff;
    border: 1px solid #e6e9f1;
}

.portada-aacv .cifra .numero {
    display: block;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: .75rem;
    font-variant-numeric: tabular-nums;
}

.portada-aacv .cifra .numero.amarillo { color: #c79d00; }
.portada-aacv .cifra .numero.azul { color: var(--aacv-azul-claro); }
.portada-aacv .cifra .numero.rojo { color: var(--aacv-rojo); }
.portada-aacv .cifra p { color: var(--aacv-texto-suave); margin: 0; }

/* Eventos */
.portada-aacv .tarjeta-evento {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6e9f1;
    transition: transform .2s ease, box-shadow .2s ease;
}

.portada-aacv .tarjeta-evento:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 31, 61, .12); }

.portada-aacv .tarjeta-evento .imagen {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    background: #e6e9f1 top / cover no-repeat;
    cursor: zoom-in;
}

.portada-aacv .tarjeta-evento .imagen.sin-imagen {
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    color: var(--aacv-azul-claro);
    background: linear-gradient(135deg, rgba(49, 89, 157, .12), rgba(242, 212, 58, .18));
    cursor: default;
}

.portada-aacv .tarjeta-evento .cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.1rem 1.2rem 1.3rem;
}

.portada-aacv .tarjeta-evento h3 { font-size: 1.05rem; font-weight: 700; color: var(--aacv-azul-oscuro); margin-bottom: 1rem; }

.portada-aacv .btn-inscripcion {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    background: #1f8a5b;
}

.portada-aacv .btn-inscripcion:hover { color: #fff; background: #187049; }

/* Sobre nosotros */
.portada-aacv .sobre-nosotros {
    padding: 2.5rem;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(145deg, var(--aacv-azul-oscuro), var(--aacv-azul-claro));
    height: 100%;
}

.portada-aacv .sobre-nosotros h2 { font-weight: 800; margin: 1rem 0; }
.portada-aacv .sobre-nosotros p { font-size: 1.1rem; color: rgba(255, 255, 255, .88); }
.portada-aacv .sobre-nosotros strong { color: var(--aacv-amarillo); }

.portada-aacv .lista-finalidad { list-style: none; padding: 0; margin: 0; counter-reset: finalidad; }

.portada-aacv .lista-finalidad li {
    position: relative;
    padding: .85rem 0 .85rem 3rem;
    border-bottom: 1px solid #edf0f6;
    color: #3a4357;
    counter-increment: finalidad;
}

.portada-aacv .lista-finalidad li:last-child { border-bottom: 0; }

.portada-aacv .lista-finalidad li::before {
    content: counter(finalidad);
    position: absolute;
    left: 0;
    top: .8rem;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: .85rem;
    color: var(--aacv-azul-claro);
    background: rgba(49, 89, 157, .1);
}

/* Servicios por áreas */
.portada-aacv .tarjeta-servicio {
    height: 100%;
    padding: 1.6rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6e9f1;
}

.portada-aacv .tarjeta-servicio h3 { font-size: 1.2rem; font-weight: 700; color: var(--aacv-azul-oscuro); margin: .9rem 0 .4rem; }
.portada-aacv .tarjeta-servicio > p { color: var(--aacv-texto-suave); font-size: .95rem; }

.portada-aacv .tarjeta-servicio details {
    margin-top: .75rem;
    border-top: 1px solid #edf0f6;
    padding-top: .75rem;
}

.portada-aacv .tarjeta-servicio summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--aacv-azul-claro);
    list-style: none;
}

.portada-aacv .tarjeta-servicio summary::-webkit-details-marker { display: none; }
.portada-aacv .tarjeta-servicio summary::after { content: " +"; }
.portada-aacv .tarjeta-servicio details[open] summary::after { content: " −"; }

.portada-aacv .tarjeta-servicio ol { margin: .75rem 0 0; padding-left: 1.2rem; font-size: .92rem; color: #3a4357; }
.portada-aacv .tarjeta-servicio li { margin-bottom: .4rem; }

/* Noticias */
.portada-aacv .tarjeta-noticia {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6e9f1;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.portada-aacv .tarjeta-noticia:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 31, 61, .12); color: inherit; }

.portada-aacv .tarjeta-noticia .imagen {
    aspect-ratio: 16 / 10;
    background: #e6e9f1 center / cover no-repeat;
}

.portada-aacv .tarjeta-noticia .cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.portada-aacv .tarjeta-noticia .fecha { font-size: .8rem; color: var(--aacv-texto-suave); margin-bottom: .4rem; }

.portada-aacv .tarjeta-noticia h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--aacv-azul-oscuro);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portada-aacv .tarjeta-noticia p { font-size: .88rem; color: var(--aacv-texto-suave); margin-bottom: .9rem; }
.portada-aacv .tarjeta-noticia .leer { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--aacv-azul-claro); }

.portada-aacv .btn-contorno {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    padding: .7rem 1.3rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--aacv-azul-claro);
    border: 2px solid rgba(49, 89, 157, .3);
}

.portada-aacv .btn-contorno:hover { color: #fff; background: var(--aacv-azul-claro); border-color: var(--aacv-azul-claro); }

/* Contacto */
.portada-aacv .contacto {
    background: linear-gradient(145deg, var(--aacv-azul-oscuro), var(--aacv-azul));
    color: #fff;
}

.portada-aacv .contacto .titulo-seccion { color: #fff; }
.portada-aacv .contacto .intro-seccion { color: rgba(255, 255, 255, .8); }
.portada-aacv .contacto .etiqueta-seccion { color: var(--aacv-amarillo); }

.portada-aacv .dato-contacto {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.portada-aacv .dato-contacto i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--aacv-amarillo);
    background: rgba(255, 255, 255, .1);
}

.portada-aacv .dato-contacto small { display: block; color: rgba(255, 255, 255, .65); }
.portada-aacv .dato-contacto a { color: #fff; text-decoration: none; font-weight: 600; }
.portada-aacv .dato-contacto a:hover { text-decoration: underline; }

.portada-aacv .form-contacto {
    padding: 2rem;
    border-radius: 20px;
    color: var(--aacv-texto);
    background: #fff;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .25);
}

.portada-aacv .form-contacto .form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }

.portada-aacv .form-contacto .form-control {
    border-radius: 10px;
    border-color: #dde2ec;
    padding: .65rem .85rem;
}

.portada-aacv .form-contacto .form-control:focus {
    border-color: var(--aacv-azul-claro);
    box-shadow: 0 0 0 .2rem rgba(49, 89, 157, .15);
}

/* Mensajes de error y éxito del formulario (los muestra scripts.js) */
.portada-aacv .form-contacto .errorParrafo { color: var(--aacv-rojo); font-size: .82rem; margin: .3rem 0 0; }

.portada-aacv .form-contacto .formularioEnvioOculto {
    display: none;
    margin: 1rem 0 0;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    color: #17784e;
    background: rgba(31, 138, 91, .1);
}

.portada-aacv .form-contacto .btn-enviar {
    width: 100%;
    font-weight: 700;
    padding: .85rem;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--aacv-azul-claro), var(--aacv-azul));
}

.portada-aacv .form-contacto .btn-enviar:hover { box-shadow: 0 10px 22px rgba(40, 61, 98, .3); }

/* Aparición suave al hacer scroll (la activa el JS de la portada) */
.portada-aacv .aparecer { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.portada-aacv .aparecer.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .portada-aacv *, .portada-aacv .aparecer { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 991.98px) {
    .portada-aacv .hero { padding: 3.5rem 0 6rem; text-align: center; }
    .portada-aacv .hero .lead { margin-left: auto; margin-right: auto; }
    .portada-aacv .hero .acciones,
    .portada-aacv .hero .enlaces-hero { justify-content: center; }
    .portada-aacv .hero .logo-hero { max-width: 260px; margin-bottom: 1.5rem; }
    .portada-aacv .bloque-seccion { padding: 3.5rem 0; }
    .portada-aacv .sobre-nosotros { padding: 1.75rem; }
    .portada-aacv .form-contacto { padding: 1.5rem; }
}

@media (max-width: 575.98px) {
    .portada-aacv .btn-principal,
    .portada-aacv .btn-secundario { width: 100%; justify-content: center; }
}

/* ---------------- Pie ---------------- */

.pie-aacv {
    color: rgba(255, 255, 255, .78);
    background: var(--aacv-azul-oscuro);
    padding: 3.5rem 0 0;
    font-size: .92rem;
}

.pie-aacv img { height: auto; }

.pie-aacv h4 {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}

.pie-aacv a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pie-aacv a:hover { color: #fff; text-decoration: underline; }

.pie-aacv .enlaces-pie { list-style: none; padding: 0; margin: 0; }
.pie-aacv .enlaces-pie li { margin-bottom: .5rem; }

.pie-aacv .redes { display: flex; gap: .6rem; margin-top: 1rem; }

.pie-aacv .redes a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.1rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: background .15s ease, transform .15s ease;
}

.pie-aacv .redes a:hover { background: var(--aacv-azul-claro); transform: translateY(-2px); text-decoration: none; }

.pie-aacv .pie-final {
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
}