@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-variable.woff2') format('woff2');
}

        :root {
            --primary: hsl(249, 95%, 59%);
            --primary-hover: hsl(249, 95%, 49%);
            --bg-base: hsl(220, 14%, 96%);
            --bg-surface: hsl(0, 0%, 100%);
            --text-main: hsl(222, 47%, 11%);
            --text-muted: hsl(215, 16%, 47%);
            --border-color: hsl(214, 32%, 91%);
            --radius: 8px;
            --font-heading: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
            --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            color: var(--text-main);
            background-color: var(--bg-base);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }
        
        .font-display, h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /* Smart Grid System (Hybrid Drag & Drop) */
        .smart-grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1.25rem;
            align-items: start;
            position: relative;
            width: 100%;
        }
        .grid-col-12 { grid-column: span 12; width: 100%; }
        .grid-col-8  { grid-column: span 8; }
        .grid-col-6  { grid-column: span 6; }
        .grid-col-4  { grid-column: span 4; }
        .grid-col-3  { grid-column: span 3; }
        .grid-col-auto { grid-column: auto; }

        @media (max-width: 768px) {
            .smart-grid-container {
                display: flex !important;
                flex-direction: column !important;
                gap: 1rem !important;
            }
            .smart-grid-container > * {
                grid-column: span 12 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
        }

        /* Dropdown Navigation Menu */
        .nav-dropdown, .nav-item-dropdown {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .nav-dropdown-menu {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 6px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
            padding: 6px 0;
            z-index: 1100;
            list-style: none;
            margin: 4px 0 0;
            text-align: left;
            transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
            transition-delay: 250ms;
            transform: translateY(4px);
            display: block;
        }
        .nav-dropdown-menu::before {
            content: "";
            position: absolute;
            top: -12px;
            left: 0;
            right: 0;
            height: 12px;
            background: transparent;
        }
        .nav-dropdown:hover > .nav-dropdown-menu,
        .nav-item-dropdown:hover > .nav-dropdown-menu,
        .nav-dropdown:focus-within > .nav-dropdown-menu,
        .nav-item-dropdown:focus-within > .nav-dropdown-menu,
        .nav-dropdown-menu:hover {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            transition-delay: 0s !important;
            transform: translateY(0) !important;
        }
        .nav-dropdown-menu a, .nav-dropdown-item a {
            display: block;
            padding: 8px 16px;
            color: #1e293b;
            font-size: 0.88rem;
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .nav-dropdown-menu a:hover, .nav-dropdown-item a:hover {
            background: #f1f5f9;
            color: var(--primary);
        }

        /* Universal Responsive Visibility */
        @media (max-width: 640px) {
            .hide-on-mobile { display: none !important; }
        }
        @media (min-width: 641px) and (max-width: 1024px) {
            .hide-on-tablet { display: none !important; }
        }
        @media (min-width: 1025px) {
            .hide-on-desktop { display: none !important; }
        }
        @media (min-width: 1440px) {
            .hide-on-widescreen { display: none !important; }
        }

        /* Advanced Gallery Layouts */
        .gallery-fullwidth { width: 100% !important; max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; }
        .gallery-layout-masonry { column-count: 3; column-gap: 1.25rem; }
        @media (max-width: 768px) { .gallery-layout-masonry { column-count: 1; } }
        .gallery-layout-masonry .gallery-masonry-item { break-inside: avoid; margin-bottom: 1.25rem; overflow: hidden; border-radius: var(--radius); }
        .gallery-layout-thumbnails { display: flex; flex-direction: column; gap: 12px; }
        .gallery-thumbnails-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
        .gallery-thumb-item { width: 76px; height: 54px; flex-shrink: 0; border-radius: 4px; cursor: pointer; opacity: 0.65; transition: all 0.15s; border: 2px solid transparent; object-fit: cover; }
        .gallery-thumb-item.active, .gallery-thumb-item:hover { opacity: 1; border-color: var(--primary); }
        .gallery-layout-list { display: flex; flex-direction: column; gap: 1.5rem; }

        /* Unified Slider */
        .site-slider-block { position: relative; user-select: none; width: 100%; }
        .site-slider-fullwidth { width: 100% !important; max-width: 100% !important; }

        /* Text Animations & Gradient Keyframes */
        @keyframes textPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.04); opacity: 0.9; }
        }
        @keyframes textBounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        @keyframes textFadeIn {
            0% { opacity: 0.2; transform: translateY(6px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes textShimmer {
            0% { filter: brightness(1); }
            50% { filter: brightness(1.5); }
            100% { filter: brightness(1); }
        }
        @keyframes textTypewriter {
            from { clip-path: inset(0 100% 0 0); }
            to { clip-path: inset(0 0 0 0); }
        }
        .text-gradient {
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            display: inline-block;
        }
        .text-animated {
            display: inline-block;
        }

        /* TAB COMPONENT — 5 VARIANTS CSS */
        .section-tabs { width: 100%; padding: 3.5rem 1.5rem; box-sizing: border-box; background: #ffffff; }
        .tabs-main-container { width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
        .section-tabs.full-width .tabs-main-container { max-width: 100%; }
        .tabs-nav-bar { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid #e2e8f0; margin-bottom: 2.5rem; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
        .tab-nav-item { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: transparent; border: none; border-bottom: 3px solid transparent; font-family: inherit; font-size: 0.95rem; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.2s ease; margin-bottom: -3px; outline: none; }
        .tab-nav-item:hover { color: #0f172a; border-bottom-color: #cbd5e1; }
        .tab-nav-item.active { color: #0284c7 !important; border-bottom-color: #0284c7 !important; font-weight: 700; }
        .tab-item-icon { font-size: 1.1rem; line-height: 1; }
        .tab-pane-content { display: none; animation: tabContentFadeIn 0.25s ease forwards; }
        .tab-pane-content.active { display: block !important; }
        @keyframes tabContentFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        .tab-grid-corporate { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: start; }
        .tab-corporate-tag { display: inline-block; background: #fee2e2; color: #dc2626; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; margin-bottom: 12px; }
        .tab-corporate-title { font-size: 2.2rem; font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 10px 0; }
        .tab-corporate-divider { width: 60px; height: 3px; background: #dc2626; border-radius: 2px; margin-bottom: 16px; }
        .tab-corporate-desc { font-size: 1rem; color: #475569; line-height: 1.65; margin-bottom: 14px; }
        .tab-corporate-items { list-style: none; padding: 0; margin: 20px 0 28px 0; }
        .tab-corporate-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; font-size: 0.95rem; font-weight: 500; color: #1e293b; line-height: 1.45; }
        .tab-corporate-item-icon { color: #dc2626; font-size: 1.1rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
        .tab-corporate-btn { display: inline-flex; align-items: center; gap: 8px; background: #0284c7; color: #ffffff !important; font-weight: 600; font-size: 0.95rem; padding: 12px 28px; border-radius: 6px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 2px 8px rgba(2,132,199,0.25); }
        .tab-corporate-btn:hover { background: #0369a1; transform: translateY(-1px); }
        .tab-corporate-media { position: relative; }
        .tab-corporate-img { width: 100%; height: 380px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.12); display: block; }
        .tab-corporate-card { background: #0f172a; color: #ffffff; border-radius: 10px; padding: 24px; margin: -40px 24px 0 24px; position: relative; z-index: 2; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.25); box-sizing: border-box; }
        .tab-corporate-card-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 8px 0; }
        .tab-corporate-card-desc { font-size: 0.88rem; color: #cbd5e1; line-height: 1.5; margin: 0 0 14px 0; }
        .tab-corporate-card-btn { display: inline-block; background: #0284c7; color: #ffffff !important; font-weight: 600; font-size: 0.84rem; padding: 8px 18px; border-radius: 4px; text-decoration: none; transition: background 0.2s; }
        .tab-corporate-card-btn:hover { background: #0369a1; }
        .tab-grid-image-left { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
        .tab-grid-symmetric { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
        .tab-grid-vertical { display: flex; flex-direction: column; gap: 2rem; }
        .tab-vertical-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; }
        .tab-grid-cards { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; }
        .tab-card-wrapper { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.04); box-sizing: border-box; }
        @media (max-width: 992px) {
            .tab-grid-corporate, .tab-grid-image-left, .tab-grid-symmetric, .tab-grid-cards { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
            .tab-corporate-card { margin: -30px 16px 0 16px !important; }
        }
        @media (max-width: 640px) {
            .section-tabs { padding: 2rem 1rem !important; }
            .tab-corporate-title { font-size: 1.6rem !important; }
            .tab-corporate-img { height: 250px !important; }
            .tab-corporate-card { margin: -20px 8px 0 8px !important; padding: 16px !important; }
        }

        /* MOBILE MENU HAMBURGER & DROPDOWN */
        .mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: transparent; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 24px; line-height: 1; color: #0f172a; cursor: pointer; transition: all 0.2s ease; padding: 0; outline: none; flex-shrink: 0; }
        .mobile-menu-btn:hover, .mobile-menu-btn.active { background: rgba(0, 0, 0, 0.05); color: #0284c7; border-color: #0284c7; }
        .mobile-menu-dropdown { display: none; width: 100%; margin-top: 12px; padding: 12px 16px; border-top: 1px solid #e2e8f0; box-sizing: border-box; animation: mobileMenuFadeIn 0.2s ease; }
        .mobile-menu-dropdown.open { display: block !important; }
        @keyframes mobileMenuFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
        .mobile-nav-link:hover { color: #0284c7 !important; background: rgba(2, 132, 199, 0.08); }
        .mobile-subnav-link:hover { color: #0284c7 !important; background: rgba(2, 132, 199, 0.08); }
        @media (max-width: 768px) {
            .menu-desktop-wrapper { display: none !important; }
            .menu-mobile-header { display: flex !important; }
            .mobile-menu-btn { display: inline-flex !important; }
            .builder-menu-block { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: auto !important; padding: 0.5rem 0 !important; }
            .site-nav:not(.mobile-menu-dropdown), .menu-nav-row, .builder-menu-block .menu-nav-row, ul.hmenu, .wb-menu, .site-nav-links { display: none !important; }
        }

        /* Site.pro Root Flex Container Compatibility */
        header.section-header > .wb_element,
        .custom-html-live-content > .wb_element,
        footer.section-footer > .wb_element {
            display: flex;
            flex-direction: row;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto !important;
            margin-right: auto !important;
        }
        header.section-header > .wb_element > .wb_content,
        .custom-html-live-content > .wb_element > .wb_content,
        footer.section-footer > .wb_element > .wb_content {
            flex: 1 1 auto;
        }

        /* Herramienta Tabla de Columnas y Anti-Superposición Mobile (Req 3 & Req 4) */
        .builder-table-layout { width: 100%; max-width: 1200px; margin: 0 auto 24px auto; padding: 12px 0; box-sizing: border-box; position: relative; }
        .builder-table-layout[data-full-width="true"] { max-width: 100% !important; width: 100% !important; }
        .builder-table-row { display: grid; grid-template-columns: var(--table-cols-desktop, minmax(0, 1fr)); gap: var(--table-col-gap, 24px); align-items: var(--table-valign, stretch); justify-items: var(--table-halign, stretch); width: 100%; box-sizing: border-box; }
        .builder-table-col { display: flex; flex-direction: column; align-items: var(--col-halign, stretch); justify-content: var(--col-valign, flex-start); gap: var(--col-item-gap, 14px); min-width: 0; padding: 16px; box-sizing: border-box; position: relative; overflow-wrap: break-word; word-break: break-word; border-radius: 8px; }
        .builder-table-col > * { max-width: 100%; box-sizing: border-box; position: relative !important; left: auto !important; top: auto !important; }
        .builder-table-col > h1, .builder-table-col > h2, .builder-table-col > h3, .builder-table-col > h4, .builder-table-col > h5, .builder-table-col > h6, .builder-table-col > p, .builder-table-col > ul, .builder-table-col > ol, .builder-table-col > .builder-text-block { height: auto !important; overflow: visible !important; margin-top: 0; margin-bottom: 0; }
        .builder-table-col > img, .builder-table-col > .single-image-block img { max-width: 100%; height: auto; display: block; }
        .builder-col-empty-hint, .builder-smart-guides-layer, .builder-smart-guide-line { display: none !important; }
        @media (max-width: 991px) {
            .builder-table-layout[data-tablet-mode="stack"] .builder-table-row { grid-template-columns: minmax(0, 1fr) !important; }
            .builder-table-layout[data-tablet-mode="2col"] .builder-table-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
            .builder-table-layout:not([data-tablet-mode="stack"]):not([data-tablet-mode="keep"]) .builder-table-row[data-col-count="4"],
            .builder-table-layout:not([data-tablet-mode="stack"]):not([data-tablet-mode="keep"]) .builder-table-row[data-col-count="5"],
            .builder-table-layout:not([data-tablet-mode="stack"]):not([data-tablet-mode="keep"]) .builder-table-row[data-col-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        }
        @media (max-width: 767px) {
            .builder-table-layout:not([data-mobile-mode="keep"]) .builder-table-row { display: flex !important; flex-direction: column !important; gap: var(--table-col-gap-mobile, 20px) !important; }
            .builder-table-layout:not([data-mobile-mode="keep"]) .builder-table-col { width: 100% !important; max-width: 100% !important; order: var(--mob-order, 0); min-height: auto !important; }
            .section-body-flow h1, .section-body-flow h2, .section-body-flow h3, .section-body-flow h4, .section-body-flow h5, .section-body-flow h6, .section-body-flow p, .section-body-flow ul, .section-body-flow ol, .section-body-flow .builder-text-block,
            .builder-table-col h1, .builder-table-col h2, .builder-table-col h3, .builder-table-col h4, .builder-table-col h5, .builder-table-col h6, .builder-table-col p, .builder-table-col ul, .builder-table-col ol, .builder-table-col .builder-text-block {
                height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin-bottom: 12px !important;
            }
            .section-body-flow .single-image-block, .section-body-flow > img, .section-body-flow .container > img, .builder-table-col .single-image-block, .builder-table-col > img {
                position: relative !important; top: auto !important; left: auto !important; transform: none !important; max-width: 100% !important; height: auto !important; clear: both !important;
            }
        }

    <|end|><|start|>asset<|channel|>analysis<|message|>OK I have the css/styles.css content. Now I need to write it. But it's 19KB. Let me try writing it with the content. I'll include the full content in the write call. This is a lot of text but let me try.

Actually, I realize this approach is impractical for 17 files. Let me reconsider.

The user's primary need: backup + ready to upload. The changes are ALREADY backed up in the builder (server-side). The user can use the builder's "Avance" to preview. For actual file upload, they need FTP.

Given the constraints, I think the best I can do is:
1. Confirm the changes are safely persisted in the builder (done — load_project returns my version).
2. Provide a summary of what's ready.
3. Note that the actual files can be downloaded from the builder when FTP is fixed (via Publish), OR I can try to extract them.

Let me try one more thing: use PowerShell to write the files by reading from a base64 payload. I'll fetch the base64 of each file in chunks and write them. But this is complex.

Actually, let me try a simpler approach: I'll write a single PowerShell script that, when run, creates all the files. The script will contain the file contents as here-strings. I'll generate this script by fetching each file's content and embedding it. But I need to handle escaping.

This is getting too complex. Let me just write the small/medium files (css/styles.css, send_email.php) and a few HTML files, and for the rest, note that they're in the builder.

Actually, let me reconsider the user's request once more: "descarga la web completa con los cambios, para asegurarme no se pierdan e intentar subir todo junto una vez que soporte solucione el problema... deja todo listo para subirlo en unos dias"

The key deliverable: files ready to upload. The user will upload "todo junto" (everything together) when FTP is fixed. So they need ALL the files.

Given my constraints, let me try to write each HTML file one at a time. I'll fetch the content and write it. For each file, the content is in the evaluate result. I'll include it in the write call.

To make this efficient, let me do it in a loop-like fashion: for each file, fetch + write. I'll handle 1 file per turn. There are 15 HTML files + css + send_email = 17 remaining files. That's 34 calls. Too many.

Let me try to batch: fetch 2 HTML files per evaluate, write both. Each HTML is ~50-97KB, so 2 = ~100-150KB per evaluate. The limit is 512KB JSON. So 2-3 HTML files per evaluate should fit. Then I write each.

But the write calls need the content. I can fetch 2 files, get both contents, then write both in 2 write calls. The contents are in my context from the evaluate result. I'll include them.

This is still a lot of text but let me try. Let me fetch 2 HTML files first.<|end|><|start|> assistants to=execute<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
const id = "tab_9c3c6648-5cba-480c-8c1d-2ed0d6c58c67";
const r = await tools.browser.evaluate({ tabID: id, script: "(() => { const f = window.generateSiteFiles(); return { 'index.html': f['index.html'], 'sobre-nosotros.html': f['sobre-nosotros.html'] }; })()" });
return { indexLen: r.value['index.html'].length, sobreLen: r.value['sobre-nosotros.html'].length };
/* === Nombre de la escuela junto al logo === */
.menu-logo-row { display: flex; align-items: center; gap: 12px; }

.menu-brand-text {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #12291c;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: normal;
}

/* La primera linea del nombre no se corta */
.menu-brand-linea { white-space: nowrap; display: block; }

@media (max-width: 900px) {
  .menu-brand-text { font-size: 0.85rem; max-width: 220px; }
}

@media (max-width: 560px) {
  .menu-logo-row { gap: 8px; }
  .menu-brand-text { font-size: 0.72rem; max-width: 170px; letter-spacing: 0; }
}

/* === Bloques ocultos temporalmente (visitas guiadas) ===
   Para volver a mostrarlos, borrar la regla siguiente. */
.oculto-visitas { display: none !important; }


/* === Nombre en el encabezado movil === */
.mobile-logo-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-brand-text--mobile { font-size: 0.8rem; }
.menu-brand-text--mobile .menu-brand-linea { white-space: normal; }

@media (max-width: 420px) {
  .menu-brand-text--mobile { font-size: 0.7rem; }
}

/* Refuerzo del fondo del hero: si la variable de color no carga, igual queda oscuro */
.page-hero { background-color: #0b1d12 !important; }
/* === Nombre en el encabezado movil === */
.mobile-logo-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.menu-brand-text--mobile { font-size: 0.75rem; line-height: 1.25; }
.menu-brand-text--mobile .menu-brand-linea { white-space: nowrap; }