@charset "UTF-8";
/* CSS Document */

/* ── PAGE-SPECIFIC STYLES ── */

    /* ── Accordion / Grade cards ── */
    .grades-section { padding: 72px 20px; background: #F4F7FB; }
    .grades-section .section-wrap { max-width: 1100px; margin: 0 auto; }

    .section-intro { text-align: center; margin-bottom: 52px; }
    .section-intro .section-label {
      display: inline-flex; align-items: center; gap: 6px;
      background: #DCFCE7; color: #2E7D32;
      padding: 6px 14px; border-radius: 50px;
      font-size: .78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    }
    .section-intro .section-label .material-icons-round { font-size: 14px; }
    .section-intro h2 { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 700; color: #1565C0; margin-bottom: 10px; }
    .section-intro p  { font-size: 1rem; color: #5B6B7D; max-width: 600px; margin: 0 auto; }

    /* Grade accordion */
    .grade-accordion { display: flex; flex-direction: column; gap: 14px; }

    .grade-item {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 14px rgba(21,101,192,.07);
      border: 1.5px solid #D0DFF0;
      overflow: hidden;
      transition: box-shadow .25s;
    }
    .grade-item:hover { box-shadow: 0 6px 28px rgba(21,101,192,.13); }

    .grade-header {
      display: flex; align-items: center; gap: 16px;
      padding: 20px 24px; cursor: pointer;
      user-select: none; -webkit-user-select: none;
      transition: background .2s;
    }
    .grade-header:hover { background: #F4F7FB; }

    .grade-color-dot {
      width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    }
    .grade-icon {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .grade-icon .material-icons-round { font-size: 22px; color: #fff; }
    .grade-header-text { flex: 1; }
    .grade-header-text h3 { font-size: 1rem; font-weight: 700; color: #1A1A2E; margin-bottom: 2px; }
    .grade-header-text span { font-size: .8rem; color: #5B6B7D; }
    .grade-chevron {
      color: #5B6B7D; transition: transform .3s;
      display: flex; align-items: center;
    }
    .grade-chevron .material-icons-round { font-size: 22px; }
    .grade-item.open .grade-chevron { transform: rotate(180deg); }

    .grade-body {
      display: none;
      padding: 0 24px 24px;
      border-top: 1px solid #D0DFF0;
    }
    .grade-item.open .grade-body { display: block; }

    /* Subject tags */
    .subject-group { margin-top: 20px; }
    .subject-group-title {
      font-size: .72rem; font-weight: 900; text-transform: uppercase;
      letter-spacing: .1em; margin-bottom: 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .subject-group-title .material-icons-round { font-size: 14px; }

    .subject-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .subject-tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 14px; border-radius: 50px;
      font-size: .82rem; font-weight: 600;
      transition: transform .15s;
    }
    .subject-tag:hover { transform: translateY(-1px); }
    .subject-tag .material-icons-round { font-size: 13px; }

    /* Spanish subjects */
    .tag-es { background: #EFF6FF; color: #1d4ed8; }
    /* English subjects */
    .tag-en { background: #F0FDF4; color: #15803d; }
    /* Special / elective */
    .tag-sp { background: #FFF7ED; color: #c2410c; }

    /* Pre-escolar area blocks */
    .area-block {
      margin-top: 20px; background: #F8FAFF;
      border-radius: 12px; padding: 18px 20px;
      border-left: 4px solid #1565C0;
    }
    .area-block.psico  { border-left-color: #2E7D32; }
    .area-block.socio  { border-left-color: #F9A825; }
    .area-block h4 {
      font-size: .88rem; font-weight: 700; color: #1A1A2E;
      margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
    }
    .area-block h4 .material-icons-round { font-size: 16px; color: #1565C0; }
    .area-block.psico h4 .material-icons-round { color: #2E7D32; }
    .area-block.socio h4 .material-icons-round { color: #d97706; }
    .area-block > p { font-size: .83rem; color: #5B6B7D; margin-bottom: 10px; line-height: 1.6; }
    .area-item {
      font-size: .83rem; color: #374151; line-height: 1.65;
      padding: 3px 0; padding-left: 14px; position: relative;
    }
    .area-item::before {
      content: '›'; position: absolute; left: 0;
      color: #1565C0; font-weight: 700;
    }
    .area-block.psico .area-item::before  { color: #2E7D32; }
    .area-block.socio .area-item::before  { color: #d97706; }
    .area-item strong { color: #1A1A2E; font-weight: 600; }

    /* ── Extracurricular section ── */
    .extra-section { padding: 72px 20px; background: #fff; }
    .extra-section .section-wrap { max-width: 1100px; margin: 0 auto; }

    .activities-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 40px;
    }
    .activity-card {
      display: flex; align-items: center; gap: 10px;
      background: #F4F7FB; border-radius: 10px;
      padding: 13px 16px;
      border: 1px solid #D0DFF0;
      font-size: .85rem; font-weight: 600; color: #1A1A2E;
      transition: background .2s, transform .15s;
    }
    .activity-card:hover { background: #DBEAFE; transform: translateY(-2px); }
    .activity-card .material-icons-round { font-size: 18px; color: #1565C0; flex-shrink: 0; }

    /* ── Útiles section ── */
    .utiles-section { padding: 72px 20px; background: #F4F7FB; }
    .utiles-section .section-wrap { max-width: 1100px; margin: 0 auto; }

    .utiles-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 40px;
    }
    .utiles-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 22px 16px;
      background: #fff; border-radius: 16px;
      border: 2px solid #D0DFF0;
      box-shadow: 0 2px 10px rgba(21,101,192,.07);
      cursor: pointer; text-decoration: none;
      transition: all .2s; color: #1A1A2E;
      text-align: center;
    }
    .utiles-btn:hover {
      background: #1565C0; color: #fff;
      border-color: #1565C0;
      box-shadow: 0 6px 22px rgba(21,101,192,.28);
      transform: translateY(-3px);
    }
    .utiles-btn:hover .utiles-icon { background: rgba(255,255,255,.2); }
    .utiles-btn:hover .utiles-icon .material-icons-round { color: #fff; }
    .utiles-btn:hover .utiles-grade { color: rgba(255,255,255,.8); }
    .utiles-icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: #EFF6FF; display: flex; align-items: center; justify-content: center;
      transition: background .2s;
    }
    .utiles-icon .material-icons-round { font-size: 26px; color: #1565C0; transition: color .2s; }
    .utiles-name { font-size: .9rem; font-weight: 700; line-height: 1.3; }
    .utiles-grade { font-size: .72rem; color: #5B6B7D; font-weight: 500; transition: color .2s; }
    .utiles-dl-hint {
      display: flex; align-items: center; gap: 3px;
      font-size: .7rem; font-weight: 700; opacity: .7;
    }
    .utiles-dl-hint .material-icons-round { font-size: 12px; }

    /* CTA at bottom */
    .cta-band {
      background: linear-gradient(135deg, #2E7D32, #1B5E20);
      padding: 72px 20px; text-align: center;
    }
    .cta-band h2 { font-size: clamp(1.4rem,3vw,2.1rem); font-weight: 900; color: #fff; margin-bottom: 12px; }
    .cta-band p  { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
    .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* Reveal animation */
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity: 1; transform: none; }