/* ==========================================================================
   Autoescuela Delta 3 — diseño 2026
   Sistema de diseño: nuevodiseño/delta_3_modern_driving_academy/DESIGN.md
   ========================================================================== */

/* Fuentes servidas desde la propia web (sin conexión a Google) */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Solo los iconos que usa la web: al añadir uno nuevo hay que regenerar este fichero */
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fonts/material-symbols-subset.woff2") format("woff2");
}

:root {
    --forest-midnight: #022C22;
    --forest-deep: #064E3B;
    --spruce: #047857;
    --primary: #006c49;
    --emerald: #10B981;
    --emerald-bright: #34D399;
    --primary-fixed: #6ffbbe;
    --secondary: #2b6954;
    --secondary-container: #adedd3;
    --secondary-fixed: #b0f0d6;

    --ink: #131b2e;
    --ink-soft: #3c4a42;
    --muted: #5b6b62;
    --surface: #faf8ff;
    --surface-white: #ffffff;
    --surface-light: #F8FAFC;
    --surface-subtle: #F1F5F9;
    --surface-low: #f2f3ff;
    --surface-container: #eaedff;
    --surface-high: #e2e7ff;
    --border: #E2E8F0;

    --emerald-tint: rgba(16, 185, 129, .12);

    --radius-sm: .5rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: .75rem;

    --shadow-1: 0 1px 3px 0 rgba(15, 23, 42, .05), 0 10px 15px -3px rgba(6, 78, 59, .03);
    --shadow-2: 0 12px 24px -4px rgba(6, 78, 59, .08), 0 4px 8px -2px rgba(16, 185, 129, .06);
    --shadow-3: 0 24px 48px -12px rgba(2, 44, 34, .25);

    --gutter: 3rem;
    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Base
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: var(--primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--spruce); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--emerald);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    margin: 0 0 .75rem;
    color: var(--forest-deep);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

#wrap { overflow-x: clip; }

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Enlace que hace clicable toda la tarjeta */
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.section { padding: 4rem 0; }

.section-head { margin-bottom: 2.5rem; text-align: center; }
.section-head h2 {
    margin: 0;
    color: var(--forest-deep);
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.02em;
}
.section-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.btn {
    display: inline-flex;
    height: 40px;
    align-items: center;
    gap: .35rem;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn .material-symbols-outlined { font-size: 18px; }
.btn-dark { background: var(--forest-deep); color: #fff; }
.btn-dark .material-symbols-outlined { color: var(--emerald-bright); }
.btn-dark:hover { background: var(--forest-midnight); color: #fff; }

/* Mayúsculas originales mostradas como "Título" */
.nav-label, .btn-label { display: inline-block; text-transform: lowercase; }
.nav-label::first-letter, .btn-label::first-letter { text-transform: uppercase; }

/* ---------------------------------------------------------------------- */
/* Header
/* ---------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}

.topbar {
    background: var(--forest-deep);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .04em;
}

.topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.topbar-contact, .topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin: 0; }
.topbar-item { display: inline-flex; align-items: center; gap: .25rem; }
.topbar-item .material-symbols-outlined { font-size: 15px; color: var(--emerald-bright); }
.topbar-hours .material-symbols-outlined { color: #fff; }
.topbar-contact a { margin-left: .2rem; color: var(--emerald-bright); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.topbar-contact a:hover { text-decoration: underline; }

.topbar-social { display: flex; gap: .5rem; }
.topbar-social a { display: inline-flex; color: var(--emerald-bright); }
.topbar-social a:hover { color: #fff; }
.topbar-social svg { width: 16px; height: 16px; fill: currentColor; }

.navbar {
    background: rgba(250, 248, 255, .9);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 64px;
}

/* Logo a todo el ancho, encima del menú (no se queda fijo al hacer scroll).
   Fondo continuo: verde del banner a la izquierda y su borde derecho
   prolongado a la derecha,
   sin márgenes arriba ni abajo */
.brandbar {
    padding: 0;
    background:
        linear-gradient(90deg, rgba(2, 44, 34, .55), transparent 18%, transparent 82%, rgba(2, 44, 34, .55)),
        url("../images/logo2-borde.png") right center / 50% 100% no-repeat,
        #008f26;
}
.navbar { border-top: 1px solid var(--border); }
#logo { display: block; }
#logo img {
    display: block;
    width: 100%;
    height: auto;
}

#nav { margin-right: auto; }

.navbar-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; margin-left: auto; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--emerald);
    color: var(--forest-midnight);
    cursor: pointer;
}
.nav-toggle .material-symbols-outlined { font-size: 26px; }

.nav-list { display: flex; align-items: center; gap: 1.5rem; }
.nav-item { position: relative; }

.nav-item > a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .5rem 0;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 20px;
}
.nav-item > a:hover,
.nav-item.has-sub:hover > a,
.nav-item.has-sub:focus-within > a { color: var(--ink); }
.nav-item.current > a { color: var(--primary); font-weight: 700; }

.nav-caret { font-size: 18px; transition: transform .2s ease; }
.nav-item.has-sub:hover .nav-caret { transform: rotate(180deg); }

.nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: grid;
    gap: .25rem;
    width: 16rem;
    padding: .5rem;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item.has-sub:hover > .nav-sub,
.nav-item.has-sub:focus-within > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.nav-sub .nav-item > a {
    display: flex;
    width: 100%;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .02em;
}
.nav-sub .nav-item > a:hover { background: var(--surface-high); color: var(--ink); }
.nav-sub .nav-item.current > a { background: var(--surface-high); color: var(--primary); }

/* ---------------------------------------------------------------------- */
/* Hero de páginas interiores (permisos, cursos, contacto, legales)
/* ---------------------------------------------------------------------- */

.page-hero {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    background: var(--forest-midnight);
    color: #fff;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image: radial-gradient(var(--emerald-bright) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.page-hero::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -8rem;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    background: rgba(0, 108, 73, .35);
    filter: blur(64px);
    pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: center;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .75rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--forest-deep);
    color: var(--emerald-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 16px;
}
.hero-pill .material-symbols-outlined { font-size: 16px; }
.hero-pill:hover { color: #fff; }

#page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 .75rem;
    color: #fff;
    font-size: 56px;
    font-weight: 800;
    line-height: 64px;
    letter-spacing: -0.03em;
}

.hero-badge {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--forest-deep);
    border: 1px solid rgba(52, 211, 153, .25);
}
.hero-badge img { width: 40px; filter: brightness(0) invert(1); opacity: .95; }

.hero-kicker {
    margin: 0 0 1rem;
    color: var(--emerald-bright);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 22px;
}

.page-hero .hero-text > p {
    max-width: 42rem;
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    line-height: 28px;
}

.page-hero .checks li {
    background: rgba(6, 78, 59, .8);
    border-color: rgba(52, 211, 153, .15);
    color: rgba(255, 255, 255, .9);
}
.page-hero .checks .material-symbols-outlined { color: var(--emerald-bright); }

.hero-media {
    padding: .5rem;
    border-radius: var(--radius-xl);
    background: rgba(6, 78, 59, .8);
    border: 1px solid rgba(52, 211, 153, .2);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-xl) - .5rem);
}

.page-hero--simple { padding: 4rem 0 3.5rem; }
.page-hero--contact { padding: 4rem 0 9rem; }
.page-hero--contact .hero-kicker { margin: 0; font-size: 18px; letter-spacing: .02em; }

/* Accesos rápidos del hero */
.quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: rgba(6, 78, 59, .4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.quick-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: var(--radius-sm);
    background: rgba(6, 78, 59, .8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s ease, color .2s ease;
}
.quick-link:hover { background: var(--forest-deep); color: var(--emerald-bright); }
.quick-link--primary { background: var(--primary); }
.quick-link--primary:hover { background: var(--forest-deep); color: #fff; }

.quick-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(52, 211, 153, .2);
    color: var(--emerald-bright);
    font-size: 22px;
}
.quick-link--primary .quick-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.quick-label { flex: 1; }
.quick-arrow { color: var(--emerald-bright); transition: transform .2s ease; }
.quick-link--primary .quick-arrow { color: #fff; }
.quick-link:hover .quick-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* Pestañas de sección
/* ---------------------------------------------------------------------- */

.section-tabs { padding: 4rem 0 0; }

.tabs ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: .375rem;
    border-radius: 2rem;
    background: var(--surface-container);
}
.tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .5rem .9rem;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.tabs a:hover { color: var(--forest-deep); background: rgba(255, 255, 255, .6); }
.tabs a.current { background: var(--forest-deep); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

/* ---------------------------------------------------------------------- */
/* Fichas (contenido de permisos y cursos)
/* ---------------------------------------------------------------------- */

.section-fichas { padding: 2.5rem 0 4rem; }

.ficha-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}
.ficha-grid > .ficha:last-child:nth-child(odd) { grid-column: 1 / -1; }

.ficha {
    position: relative;
    overflow: hidden;
    background: var(--surface-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    transition: box-shadow .25s ease;
}
.ficha:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }

.ficha-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 2rem 2.5rem 0;
}
.ficha-head h2 {
    margin: 0;
    color: var(--forest-deep);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.01em;
}
.ficha-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--surface-container);
    color: var(--primary);
    font-size: 26px;
}

.ficha-body { padding: 1.5rem 2.5rem 2.5rem; }
.ficha-body > p { color: var(--ink-soft); }

/* Ficha de curso: cabecera oscura como en el mockup */
.ficha--dark .ficha-head {
    position: relative;
    padding: 2rem 2.5rem 1.75rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(16, 185, 129, .3), transparent 50%),
        linear-gradient(135deg, var(--forest-midnight), var(--forest-deep));
}
.ficha--dark .ficha-head h2 { color: #fff; font-size: 22px; line-height: 30px; }
.ficha--dark .ficha-icon { background: rgba(52, 211, 153, .2); color: var(--emerald-bright); }

/* Lista con marcas */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.checks li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
}
.checks .material-symbols-outlined { flex: 0 0 auto; margin-top: -1px; color: var(--primary); font-size: 20px; font-variation-settings: "FILL" 1; }
.checks b, .checks strong { font-weight: 700; }

/* Listas con textos largos en una sola columna */
.checks:has(> li:only-child),
.checks:has(b),
.page-hero .checks { grid-template-columns: minmax(0, 1fr); }

/* Tabla técnica de cursos */
.specs {
    display: grid;
    gap: .25rem;
    margin: 1rem 0 0;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.ficha-body > .specs:first-child { margin-top: 0; }
.spec {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: .65rem 0;
    border-top: 1px solid var(--border);
}
.spec:first-child { border-top: 0; }
.spec dt {
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 20px;
}
.spec dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 20px; }
.spec dd p { margin-bottom: .5rem; color: var(--ink-soft); }
.spec .checks { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.spec .checks li { padding: 0; background: none; }
.spec .checks .material-symbols-outlined { font-size: 18px; }

.ficha-figure {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-light);
    border: 1px solid var(--border);
}
.ficha-figure img { display: block; margin: 0 auto; }

/* ---------------------------------------------------------------------- */
/* Textos legales
/* ---------------------------------------------------------------------- */

.section-legal { padding: 3rem 0 5rem; }
.legal-card {
    max-width: 960px;
    margin: 0 auto;
    padding: 3rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-1);
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.7;
}
.legal-card h3 { margin: 2.5rem 0 1rem; font-size: 20px; color: var(--forest-deep); }
.legal-card h3:first-child { margin-top: 0; }
.legal-card h4 { margin: 1.5rem 0 .5rem; font-size: 16px; color: var(--forest-deep); }

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

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 4rem;
    background: linear-gradient(180deg, var(--surface-light) 0%, var(--surface) 50%, var(--surface-low) 100%);
}
.home-hero::before {
    content: "";
    position: absolute;
    top: -8rem;
    right: -8rem;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .1);
    filter: blur(64px);
}
.home-hero::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6rem;
    width: 20rem;
    height: 20rem;
    border-radius: 999px;
    background: rgba(6, 78, 59, .05);
    filter: blur(40px);
}
.home-hero .container { position: relative; z-index: 1; }

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem;
    align-items: stretch;
}

.home-hero .quick-links { background: var(--forest-midnight); }

#slider-home { min-width: 0; }

.flexslider {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--forest-deep);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.flexslider .slides {
    position: relative;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 940 / 340;
}
.flexslider .slides > li {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}
.flexslider .slides > li:first-child,
.flexslider .slides > li.is-active { opacity: 1; visibility: visible; }
.flexslider .slides a { display: block; height: 100%; }
.flexslider .slides img { width: 100%; height: 100%; object-fit: cover; }

.slider-dots {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: .45rem .7rem;
    list-style: none;
    border-radius: 999px;
    background: rgba(2, 44, 34, .6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.slider-dots button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}
.slider-dots li.is-active button { width: 24px; background: var(--emerald-bright); }

.promo-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--forest-deep);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.promo-card::after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .2);
    filter: blur(24px);
}
.promo-card h2 {
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 32px;
}
.promo-list { display: grid; gap: .75rem; }
.promo-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .92);
    font-size: 16px;
    font-weight: 500;
}
.promo-list .material-symbols-outlined {
    display: inline-flex;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, .2);
    color: var(--emerald-bright);
    font-size: 22px;
}

.promo-logos {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1.5rem;
}
.promo-logos a {
    display: flex;
    flex: 1;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    border-radius: var(--radius-md);
    background: #fff;
    transition: transform .2s ease;
}
.promo-logos a:hover { transform: translateY(-2px); }
.promo-logos img { max-height: 40px; width: auto; }

/* Catálogo de permisos y cursos */
.section-catalogo--permisos { background: var(--surface-white); }
.section-catalogo--cursos { background: var(--surface-light); }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.catalog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.catalog-card:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, .5);
    box-shadow: var(--shadow-2);
}
.catalog-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-container);
    color: var(--primary);
    font-size: 26px;
}
.catalog-icon img {
    width: 32px;
    /* iconos grises originales teñidos al verde corporativo */
    filter: brightness(0) saturate(100%) invert(24%) sepia(94%) saturate(1352%) hue-rotate(141deg) brightness(92%) contrast(101%);
}
.catalog-card h3 { margin-bottom: .35rem; font-size: 20px; line-height: 28px; font-weight: 600; }
.catalog-card h3 a { color: var(--forest-deep); }
.catalog-card p { margin: 0 0 1rem; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 18px; }
.catalog-go {
    margin-top: auto;
    align-self: flex-end;
    color: var(--primary);
    transition: transform .2s ease;
}
.catalog-card:hover .catalog-go { transform: translateX(4px); }

.section-catalogo--cursos .catalog-card:last-child:nth-child(3n + 2) { grid-column: span 2; }
.section-catalogo--cursos .catalog-card:last-child {
    background:
        radial-gradient(circle at 100% 100%, rgba(16, 185, 129, .25), transparent 50%),
        var(--forest-deep);
    border-color: transparent;
}
.section-catalogo--cursos .catalog-card:last-child h3 a { color: #fff; }
.section-catalogo--cursos .catalog-card:last-child p { color: rgba(255, 255, 255, .75); }
.section-catalogo--cursos .catalog-card:last-child .catalog-icon { background: rgba(52, 211, 153, .2); color: var(--emerald-bright); }
.section-catalogo--cursos .catalog-card:last-child .catalog-go { color: var(--emerald-bright); }

/* ---------------------------------------------------------------------- */
/* Bloques comunes
/* ---------------------------------------------------------------------- */

/* Cifras: experiencia, aprobados, eficacia, horarios */
.section-cifras { background: var(--surface-low); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.metric-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    transition: box-shadow .25s ease;
}
.metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    border-bottom-left-radius: 999px;
    background: rgba(0, 108, 73, .05);
    pointer-events: none;
}
.metric-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }

.metric-image {
    display: block;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 10;
}
.metric-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.metric-card:hover .metric-image img { transform: scale(1.05); }

.metric-title { margin-bottom: .5rem; font-size: 20px; font-weight: 700; line-height: 28px; }
.metric-card p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.metric-card b { color: var(--primary); }

/* Acceso alumnos */
.section-alumnos {
    position: relative;
    overflow: hidden;
    background: var(--forest-midnight);
    color: #fff;
}
.section-alumnos::before,
.section-alumnos::after {
    content: "";
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    filter: blur(64px);
    pointer-events: none;
}
.section-alumnos::before { right: -10rem; top: 0; background: rgba(0, 108, 73, .2); }
.section-alumnos::after { left: -10rem; bottom: 0; background: rgba(52, 211, 153, .1); }
.section-alumnos .container { position: relative; z-index: 1; }
.section-alumnos .section-head h2 { color: #fff; }

.partner-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-3);
}
.partner-pill img { border-radius: 999px; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--forest-deep);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    transition: background .2s ease, transform .2s ease;
}
.tool-card:hover { background: rgba(6, 78, 59, .9); transform: translateY(-3px); }

.tool-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, .2);
    color: var(--emerald-bright);
    font-size: 32px;
}
.tool-card h3 { margin-bottom: .5rem; font-size: 24px; font-weight: 700; line-height: 32px; }
.tool-card h3 a { color: #fff; }
.tool-card:hover h3 a { color: var(--emerald-bright); }
.tool-card p { margin: 0 0 1.5rem; color: var(--surface-high); font-size: 14px; line-height: 1.6; }

.tool-go {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    border-radius: var(--radius-sm);
    background: var(--emerald);
    color: var(--forest-midnight);
    font-size: 20px;
    transition: background .2s ease;
}
.tool-card:hover .tool-go { background: var(--emerald-bright); }

/* Noticias y redes */
.section-redes { background: var(--surface); padding-top: 3rem; padding-bottom: 4rem; }

.redes-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 0% 100%, rgba(16, 185, 129, .25), transparent 45%),
        var(--forest-deep);
    color: #fff;
    box-shadow: var(--shadow-3);
}

.redes-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: rgba(52, 211, 153, .2);
    color: var(--emerald-bright);
    font-size: 26px;
}
.redes-text h3 { color: #fff; font-size: 30px; line-height: 38px; }
.redes-text p { color: rgba(255, 255, 255, .82); }
.redes-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.redes-chips a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--forest-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s ease;
}
.redes-chips a:hover { background: var(--secondary-fixed); }

.redes-links { display: grid; gap: .75rem; }
.redes-link {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: rgba(2, 44, 34, .55);
    border: 1px solid rgba(52, 211, 153, .15);
    transition: border-color .2s ease, background .2s ease;
}
.redes-link:hover { border-color: rgba(52, 211, 153, .5); background: rgba(2, 44, 34, .8); }
.redes-link-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--emerald);
    color: var(--forest-midnight);
    font-size: 24px;
}
.redes-link-icon svg { width: 22px; height: 22px; fill: currentColor; }
.redes-link h4 { margin-bottom: .25rem; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.redes-link h4 a { color: #fff; }
.redes-link:hover h4 a { color: var(--emerald-bright); }
.redes-link p { margin: 0; color: rgba(255, 255, 255, .75); font-size: 14px; }


/* ---------------------------------------------------------------------- */
/* Contacto
/* ---------------------------------------------------------------------- */

.section-sedes { position: relative; z-index: 1; margin-top: -6rem; }

.sede-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.sede-card {
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sede-photo { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--forest-midnight); }
.sede-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2, 44, 34, .6), transparent 60%);
}
.sede-photo img { width: 100%; height: 100%; object-fit: cover; }

.sede-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--surface-light);
}
.sede-row, .info-tile { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: 14px; color: var(--ink-soft); }
.sede-row .material-symbols-outlined,
.info-tile .material-symbols-outlined { flex: 0 0 auto; color: var(--primary); font-size: 22px; }
.sede-row strong, .info-tile strong { display: block; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sede-row a, .info-tile a { font-weight: 700; }
.info-tile strong + br { display: none; }

.info-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.info-tile {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-1);
}

.section-contacto { padding: 4rem 0; }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem;
    align-items: start;
}

.form-card {
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.form-card h2 { font-size: 30px; line-height: 38px; }
.form-card > p { color: var(--ink-soft); }

.content-form { margin-top: 1.5rem; }
.content-form p { margin-bottom: 1.25rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.content-form label {
    display: block;
    margin-bottom: .4rem;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}
.content-form input[type=text],
.content-form input[type=email],
.content-form input[type=tel],
.content-form textarea {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.content-form textarea { height: auto; min-height: 150px; padding: .8rem 1rem; resize: vertical; }
.content-form input:focus,
.content-form textarea:focus {
    outline: none;
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
}
.content-form input.error, .content-form textarea.error { border-color: #EF4444; }
.content-form label.error { margin: .35rem 0 0; color: #ba1a1a; font-size: 12px; }

.note { margin-left: .15rem; color: var(--emerald); font-weight: 700; }
.form-note { margin: 0; color: var(--muted); font-size: 13px; }

.button,
.content-form input[type=submit] {
    display: inline-flex;
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--forest-deep);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
    -webkit-appearance: none;
}
.button:hover, .content-form input[type=submit]:hover { background: var(--forest-midnight); }
.content-form input[type=submit][disabled] { opacity: .6; cursor: wait; }

.notification-box {
    position: relative;
    margin: 1rem 0;
    padding: 1rem 3rem 1rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
}
.notification-box p { margin: 0; }
.notification-box-success { background: var(--emerald-tint); color: var(--spruce); }
.notification-box-error { background: #ffdad6; color: #93000a; }
.notification-close { position: absolute; top: 50%; right: 1rem; color: inherit; font-weight: 800; transform: translateY(-50%); }

.contact-side { display: grid; gap: 1.5rem; }
.map-card {
    overflow: hidden;
    padding: .5rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-1);
}
.map-card img { display: block; width: 100%; border-radius: calc(var(--radius-xl) - .5rem); }

.circuit-card {
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--forest-deep);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1);
}
.circuit-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    background: rgba(52, 211, 153, .2);
    color: var(--emerald-bright);
    font-size: 26px;
}
.circuit-card h3 { color: #fff; font-size: 20px; line-height: 28px; }
.circuit-card p { margin: 0; }
.circuit-card strong { color: #fff; }
.circuit-card a { color: var(--emerald-bright); font-weight: 700; }
.circuit-card a:hover { color: #fff; }

/* ---------------------------------------------------------------------- */
/* Footer
/* ---------------------------------------------------------------------- */

.site-footer {
    background: var(--surface-white);
    border-top: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: 14px;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2.5rem;
    padding: 4rem 0 3rem;
}

.footer-brand > a img {
    display: block;
    width: 100%;
    max-width: 360px;
    border-radius: var(--radius-sm);
}

.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.footer-logos a {
    display: flex;
    height: 52px;
    align-items: center;
    padding: .35rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color .2s ease;
}
.footer-logos a:hover { border-color: var(--emerald); }
.footer-logos img { width: auto; max-height: 38px; }

.footer-col h3 { margin-bottom: 1rem; color: var(--forest-deep); font-size: 20px; font-weight: 600; line-height: 28px; }
.footer-col p { margin-bottom: .5rem; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--primary); }

.footer-contact p { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact .material-symbols-outlined { flex: 0 0 auto; margin-top: 1px; color: var(--primary); font-size: 18px; }
.footer-contact strong { color: var(--ink); }
.footer-sep { height: 1px; margin: 1rem 0; background: var(--border); }

.footer-bottom { padding: 1rem 0; background: var(--forest-midnight); color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }
.footer-bottom p { margin: 0; }
/* Copyright a la izquierda y crédito a la derecha */
.footer-bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.footer-bottom .credito-cesko { flex-shrink: 0; text-align: right; }
@media (max-width: 479px) {
    .footer-bottom { font-size: 11px; }
}
.footer-bottom a { color: #fff; }
.footer-bottom a:hover { color: var(--emerald-bright); }

.credito-cesko { white-space: nowrap; }
.credito-cesko img { display: inline-block; width: 1.3em; height: 1.3em; margin-right: .15em; vertical-align: -0.3em; }

/* ---------------------------------------------------------------------- */
/* Accesibilidad y utilidades
/* ---------------------------------------------------------------------- */

[hidden] { display: none !important; }

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 300;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--forest-deep);
    font-weight: 700;
    box-shadow: var(--shadow-3);
}
.skip-link:focus { top: 1rem; }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font: inherit;
    cursor: pointer;
}
.link-button:hover { color: var(--primary); text-decoration: underline; }

/* Objetivos táctiles de al menos 24×24 px (WCAG 2.5.8) */
.topbar-social a { min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
.slider-dots button { position: relative; }
.slider-dots button::after { content: ""; position: absolute; inset: -8px; }

/* ---------------------------------------------------------------------- */
/* Portada: título y control de pausa
/* ---------------------------------------------------------------------- */

.home-title {
    max-width: 56rem;
    margin: 0 0 2rem;
    color: var(--forest-midnight);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}
.home-title span { color: var(--primary); }

.motion-toggle {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(2, 44, 34, .65);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .2s ease;
}
.motion-toggle:hover { background: var(--forest-midnight); }
.flexslider .motion-toggle { right: 1.25rem; bottom: 1.25rem; }

/* ---------------------------------------------------------------------- */
/* Fotos de alumnos
/* ---------------------------------------------------------------------- */

.block-alumnos { position: relative; padding: 2rem 0; background: var(--forest-deep); }
.photo-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.photo-track::-webkit-scrollbar { display: none; }
.photo { flex: 0 0 calc((100% - 5rem) / 6); scroll-snap-align: start; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); }
.block-alumnos .motion-toggle { right: 1.5rem; bottom: 2.75rem; }

/* ---------------------------------------------------------------------- */
/* Visor de imágenes
/* ---------------------------------------------------------------------- */

.lightbox {
    max-width: min(92vw, 900px);
    padding: .5rem;
    border: 0;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-3);
}
.lightbox::backdrop { background: rgba(2, 44, 34, .75); }
.lightbox img { display: block; max-height: 80vh; border-radius: calc(var(--radius-xl) - .5rem); }
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(2, 44, 34, .7);
    color: #fff;
    cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Formulario: errores, privacidad y campo trampa
/* ---------------------------------------------------------------------- */

.field-error { display: block; margin-top: .35rem; color: #ba1a1a; font-size: 12px; font-weight: 600; }
.field-error:empty { display: none; }
.content-form [aria-invalid="true"] { border-color: #EF4444; }

.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-legal {
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.6;
}
.form-legal strong { color: var(--ink); }

.form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .6rem;
    align-items: start;
}
.form-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.content-form .form-check label { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.form-check .field-error { grid-column: 2; margin: 0; }

.notification-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Aviso de cookies
/* ---------------------------------------------------------------------- */

.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 500;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-3);
}
.cookie-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.cookie-text h2 { margin-bottom: .4rem; font-size: 18px; outline: none; }
.cookie-text p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.cookie-options { display: grid; gap: .5rem; margin-top: 1rem; }
.cookie-option { display: flex; gap: .6rem; align-items: flex-start; font-size: 14px; color: var(--ink-soft); }
.cookie-option input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.cookie-actions { display: grid; gap: .5rem; min-width: 190px; }
.cookie-btn {
    height: 44px;
    padding: 0 1.25rem;
    border: 1.5px solid var(--forest-deep);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--forest-deep);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
/* Aceptar y rechazar con el mismo peso visual (guía de cookies de la AEPD) */
.cookie-btn--primary { background: var(--forest-deep); color: #fff; }
.cookie-btn:hover { background: var(--forest-midnight); border-color: var(--forest-midnight); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Página 404
/* ---------------------------------------------------------------------- */

.notfound { padding: 4rem 0 5rem; text-align: center; }
.notfound img { max-width: 500px; margin: 0 auto 2rem; border-radius: var(--radius-xl); }
.notfound p { color: var(--ink-soft); font-size: 18px; }

/* ---------------------------------------------------------------------- */
/* Responsive
/* ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .nav-list { gap: 1.1rem; }
}

@media (max-width: 1099px) {
    :root { --gutter: 1.5rem; }

    .nav-toggle { display: inline-flex; }

    #nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        margin: 0;
        padding: .75rem var(--gutter) 1.5rem;
        background: #fff;
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-3);
    }
    .site-header.nav-open #nav { display: block; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-item > a { display: flex; width: 100%; padding: .8rem .75rem; border-radius: var(--radius-sm); }
    .nav-item.current > a { background: var(--emerald-tint); }
    .nav-caret { display: none; }
    .nav-sub {
        position: static;
        width: auto;
        margin: 0 0 .5rem .75rem;
        padding: 0 0 0 .75rem;
        border-left: 2px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .hero-grid, .home-hero-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .quick-links { grid-template-columns: minmax(0, 1fr); }

    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tool-grid { grid-template-columns: minmax(0, 1fr); }
    .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-catalogo--cursos .catalog-card:last-child:nth-child(3n + 2) { grid-column: auto; }
    .section-catalogo--cursos .catalog-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .redes-banner { grid-template-columns: minmax(0, 1fr); }
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    #page-title { font-size: 44px; line-height: 52px; }
    .section-head h2 { font-size: 32px; line-height: 40px; }
}

@media (max-width: 767px) {
    :root { --gutter: 1.25rem; }

    .topbar-right { display: none; }
    .topbar-contact { gap: .15rem 1rem; }

    .navbar-inner { min-height: 60px; gap: .75rem; }
    .navbar-actions .btn { display: none; }

    .page-hero { padding: 3rem 0; }
    .page-hero--contact { padding-bottom: 8rem; }
    #page-title { font-size: 36px; line-height: 44px; letter-spacing: -0.02em; }
    .hero-badge { width: 52px; height: 52px; }
    .hero-badge img { width: 32px; }
    .page-hero .hero-text > p { font-size: 16px; line-height: 26px; }
    .quick-links { margin-top: 2rem; padding: .75rem; }

    .section { padding: 3rem 0; }
    .section-head h2 { font-size: 28px; line-height: 36px; }
    .section-head--split { flex-direction: row; align-items: center; }

    .section-tabs { padding-top: 2.5rem; }
    .tabs ul { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; }
    .tabs ul::-webkit-scrollbar { display: none; }

    .ficha-grid { grid-template-columns: minmax(0, 1fr); }
    .ficha-head { padding: 1.5rem 1.5rem 0; }
    .ficha--dark .ficha-head { padding: 1.5rem; }
    .ficha-head h2 { font-size: 20px; line-height: 28px; }
    .ficha-body { padding: 1.25rem 1.5rem 1.5rem; }
    .checks { grid-template-columns: minmax(0, 1fr); }
    .spec { grid-template-columns: minmax(0, 1fr); gap: .35rem; }

    .legal-card { padding: 1.5rem; }

    .home-hero { padding: 1.5rem 0 3rem; }
    .promo-card { padding: 1.5rem; }
    .promo-card h2 { font-size: 21px; line-height: 28px; }
    .slider-dots { left: 1rem; bottom: 1rem; }

    .metric-grid, .catalog-grid { grid-template-columns: minmax(0, 1fr); }
    .redes-banner { padding: 1.5rem; }
    .redes-text h3 { font-size: 24px; line-height: 32px; }

    .sede-grid, .info-strip, .form-row, .sede-body { grid-template-columns: minmax(0, 1fr); }
    .form-card { padding: 1.5rem; }
    .form-card h2 { font-size: 24px; line-height: 32px; }

    .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 3rem 0 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 1099px) {
    .photo { flex-basis: calc((100% - 3rem) / 4); }
    .home-title { font-size: 34px; }
}

@media (max-width: 767px) {
    .photo { flex-basis: calc((100% - 1rem) / 2.3); }
    .home-title { font-size: 28px; margin-bottom: 1.25rem; }
    .cookie-banner { left: .5rem; right: .5rem; bottom: .5rem; padding: 1.25rem; max-height: 85vh; overflow-y: auto; }
    .cookie-inner { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .cookie-actions { grid-template-columns: 1fr 1fr; min-width: 0; }
    .cookie-actions [data-cookie-configure], .cookie-actions [data-cookie-save] { grid-column: 1 / -1; }
}

/* Tabla de la política de cookies */
.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cookie-table th, .cookie-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cookie-table th { background: var(--surface-subtle); color: var(--forest-deep); font-size: 13px; }


/* ======================================================================
   Ajustes de fidelidad con la maqueta (nuevodiseño)
   ====================================================================== */

/* Tarjetas: sin borde, sombra suave (shadow-sm) y sombra media al pasar */
.catalog-card, .ficha, .metric-card, .form-card, .legal-card, .info-tile, .map-card {
    border: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.catalog-card:hover, .ficha:hover, .metric-card:hover {
    border-color: transparent;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
.catalog-card:hover { transform: none; }

/* ---------------------------------------------------------------------- */
/* Portada: hero
/* ---------------------------------------------------------------------- */

.home-hero { padding: 2.5rem 0 1rem; }
.home-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 2.5rem; }
.home-hero-text { display: flex; flex-direction: column; gap: 1rem; }

.home-title {
    margin: 0;
    max-width: none;
    color: var(--forest-midnight);
    font-size: 56px;
    font-weight: 800;
    line-height: 64px;
    letter-spacing: -0.03em;
}
.home-title span {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: var(--emerald-bright);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.promo-box {
    position: relative;
    overflow: hidden;
    display: block;
    margin: .25rem 0;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--forest-deep);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.promo-box::after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, .2);
    filter: blur(24px);
}
.promo-box:hover { color: #fff; }
.promo-kicker {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-bottom: .25rem;
    color: var(--emerald-bright);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.promo-kicker .material-symbols-outlined { font-size: 18px; }
.promo-headline { display: block; font-size: 30px; font-weight: 800; line-height: 1.25; }
.promo-accent { color: var(--emerald-bright); }
.promo-badge { padding: 0 .25rem; border-radius: .25rem; background: var(--emerald-bright); color: var(--forest-midnight); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: .25rem; }
.btn-cta {
    display: inline-flex;
    height: 48px;
    align-items: center;
    gap: .5rem;
    padding: 0 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .2s ease, transform .2s ease;
}
.btn-cta .material-symbols-outlined { font-size: 20px; }
.btn-cta--primary { padding: 0 2.5rem; background: var(--emerald); color: var(--forest-midnight); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
.btn-cta--primary:hover { background: var(--emerald-bright); color: var(--forest-midnight); transform: translateY(-2px); }
.btn-cta--light { background: #fff; color: var(--forest-deep); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.btn-cta--light:hover { background: var(--surface-subtle); color: var(--forest-deep); }

.home-hero-media { display: flex; flex-direction: column; gap: 1rem; }
.photo-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.photo-card img { display: block; width: 100%; height: 320px; object-fit: cover; transition: transform .5s ease; }
.photo-card:hover img { transform: scale(1.05); }
.photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2, 44, 34, .85), transparent 60%);
}
.photo-card figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1; color: #fff; }
.photo-card-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(2, 44, 34, .6);
    color: var(--emerald-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--emerald-bright); }
.photo-card-title { display: block; font-size: 20px; font-weight: 700; line-height: 28px; }

.badge-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: .75rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
.badge-strip a { display: flex; align-items: center; height: 44px; }
.badge-strip img { width: auto; max-height: 44px; }
/* El logo de AVAE es blanco: se muestra sobre verde oscuro */
.badge-strip a[href*="avae"] { padding: 0 .35rem; border-radius: var(--radius-sm); background: var(--forest-deep); }

/* Cifras como tarjetas de métrica (en la portada continúan el fondo del hero) */
.section-cifras { padding-top: 2.5rem; background: var(--surface-low); }
.home-hero + .section-cifras { padding-top: 1rem; }
.metric-grid { gap: 1rem; }
.metric-card { padding: 1.5rem; border-radius: var(--radius-xl); }
.metric-figure {
    display: block;
    margin-bottom: .5rem;
    color: var(--primary);
    font-size: 40px;
    font-weight: 900;
    line-height: 48px;
    letter-spacing: -0.02em;
}
.metric-card:nth-child(2) .metric-figure { color: var(--forest-deep); }
.metric-card:nth-child(3) .metric-figure { color: var(--secondary); }
.metric-figure--icon { font-size: 44px; font-weight: 400; color: var(--spruce); font-variation-settings: "FILL" 1; }
.metric-card p { color: var(--ink-soft); }

/* Catálogo: icono en cuadro menta como en la maqueta */
.catalog-icon { background: var(--secondary-container); color: var(--forest-deep); }
.catalog-card h3 { font-size: 22px; line-height: 30px; font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* Portada: instalaciones
/* ---------------------------------------------------------------------- */

.section-instalaciones { background: var(--surface); }
.instalaciones-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
/* Las dos sedes una al lado de la otra y los coches debajo, fotos enteras */
.instalaciones-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.inst-photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.inst-photo--wide { grid-column: 1 / -1; }
.inst-photo img { display: block; width: 100%; height: auto; }
.inst-photo figcaption {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem .85rem;
    color: var(--forest-deep);
    font-size: 14px;
    font-weight: 700;
}
.inst-photo figcaption .material-symbols-outlined { color: var(--primary); font-size: 18px; }
/* En una columna, el titular va antes que las fotos */
@media (max-width: 1099px) {
    .instalaciones-text { order: -1; }
    .instalaciones-text h2 { margin-bottom: 1rem; }
}
.instalaciones-text h2 { margin-bottom: 1.5rem; color: var(--forest-deep); font-size: 36px; line-height: 44px; letter-spacing: -0.02em; }
.inst-list { display: grid; gap: 1rem; }
.inst-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    color: var(--forest-deep);
    font-size: 17px;
    font-weight: 600;
}
.inst-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--secondary-container);
    color: var(--forest-deep);
    font-size: 26px;
}

@media (max-width: 1099px) {
    .home-hero-grid, .instalaciones-grid { grid-template-columns: minmax(0, 1fr); }
    .home-title { font-size: 40px; line-height: 48px; }
}

@media (max-width: 767px) {
    .home-hero { padding-top: 1.5rem; }
    .home-title { font-size: 32px; line-height: 40px; }
    .home-title span { text-underline-offset: 6px; text-decoration-thickness: 3px; }
    .promo-headline { font-size: 22px; }
    .btn-cta { flex: 1 1 auto; justify-content: center; }
    .photo-card img { height: 240px; }
    .instalaciones-text h2 { font-size: 26px; line-height: 34px; }
}

/* ---------------------------------------------------------------------- */
/* Fotos de permisos y cursos enteras (banners muy apaisados, sin recortar)
/* ---------------------------------------------------------------------- */

.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.page-hero .hero-text { max-width: 860px; }

.catalog-card--photo { overflow: hidden; padding-top: 0; }
.catalog-photo {
    display: block;
    width: calc(100% + 3rem);
    max-width: none;
    height: auto;
    margin: 0 -1.5rem 1.25rem;
    transition: transform .5s ease;
}
.catalog-card--photo:hover .catalog-photo { transform: scale(1.03); }


/* ---------------------------------------------------------------------- */
/* Móvil (vertical y horizontal): sin barra superior; junto al botón del menú
/* (a la izquierda) van las sedes centradas y las redes pegadas a la derecha
/* ---------------------------------------------------------------------- */

.navbar-quick { display: none; }

@media (max-width: 767px), (max-width: 1099px) and (max-height: 540px) {
    .topbar { display: none; }
    .navbar-actions { order: -1; margin-left: 0; }
    .navbar-actions .btn { display: none; }
    .navbar-quick { display: flex; flex: 1 1 auto; align-items: center; gap: .5rem; min-width: 0; }
    .navbar-quick-sedes { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; min-width: 0; }
    .nq-row { display: flex; align-items: center; column-gap: .55rem; margin: 0; font-size: 12px; font-weight: 600; line-height: 24px; white-space: nowrap; }
    .nq-row a { display: inline-flex; align-items: center; gap: .2rem; min-height: 24px; color: var(--forest-deep); }
    .nq-row a:hover { color: var(--primary); text-decoration: underline; }
    .nq-row .nq-tel { color: var(--primary); font-weight: 700; }
    .nq-row .material-symbols-outlined { font-size: 15px; color: var(--emerald); }
    .navbar-quick-social { display: flex; flex-shrink: 0; gap: .4rem; }
    .navbar-quick-social a {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-sm);
        background: var(--secondary-container);
        color: var(--forest-deep);
    }
    .navbar-quick-social a:hover { background: var(--emerald-bright); }
    .navbar-quick-social svg { width: 22px; height: 22px; fill: currentColor; }
}

@media (max-width: 479px) {
    .navbar .container { padding-left: 1rem; padding-right: 1rem; }
    .navbar-inner { gap: .5rem; }
    .nq-row { column-gap: .4rem; font-size: 11.5px; }
    .navbar-quick-social { gap: .3rem; }
    .navbar-quick-social a { width: 36px; height: 36px; }
    .navbar-quick-social svg { width: 20px; height: 20px; }
}

@media (max-width: 374px) {
    .nq-row { font-size: 11px; }
    .nq-row .material-symbols-outlined { display: none; }
    .navbar-quick-social a { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------------- */
/* Menú desplegado (móvil y tableta): panel verde oscuro y el resto de la
/* página oscurecida, para que se note que está abierto
/* ---------------------------------------------------------------------- */

@media (max-width: 1099px) {
    .site-header.nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(2, 44, 34, .55);
    }
    #nav {
        background: var(--forest-deep);
        border-top: 3px solid var(--emerald);
        box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .45);
    }
    #nav .nav-item > a { color: #fff; font-size: 14px; }
    #nav .nav-item > a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    #nav .nav-item.current > a { background: rgba(52, 211, 153, .16); color: var(--emerald-bright); }
    #nav .nav-sub { border-left-color: rgba(52, 211, 153, .35); background: transparent; }
    #nav .nav-sub .nav-item > a { color: rgba(255, 255, 255, .8); font-size: 12px; }
    #nav .nav-sub .nav-item > a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
    #nav .nav-sub .nav-item.current > a { background: rgba(52, 211, 153, .16); color: var(--emerald-bright); }
    .site-header.nav-open .nav-toggle { background: var(--forest-deep); color: var(--emerald-bright); }
}

/* ---------------------------------------------------------------------- */
/* Logo dentro de la cabecera fija: al bajar se reduce (salvo en móvil
/* vertical, donde ya es pequeño) para no ocupar media pantalla
/* ---------------------------------------------------------------------- */

#logo img { margin: 0 auto; transition: max-width .25s ease; }
@media (min-width: 768px) {
    .site-header.is-compact #logo img { max-width: 600px; }
}
@media (max-width: 1099px) and (max-height: 540px) {
    .site-header.is-compact #logo img { max-width: 380px; }
    #nav { max-height: calc(100vh - 170px); }
}