/* Hero */
.hero {
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#fff;
  overflow:hidden;
}


.hero-cover {
  --hero-cover-min-height:clamp(520px,78vh,720px);
  position:relative;
  min-height:var(--hero-cover-min-height);
  color:#f4f8f6;
  overflow:hidden;
  border-radius:0 0 1.6rem 1.6rem;
}

.hero-cover__carousel {
  position:relative;
  min-height:var(--hero-cover-min-height);
  height:100%;
}

.hero-cover__slide {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:clamp(3rem,8vw,6rem) 0;
  opacity:0;
  transform:scale(1.02);
  transition:opacity .8s ease,transform .8s ease;
  pointer-events:none;
}

.hero-cover__slide::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(120deg,rgba(84, 107, 102, 0.82) 0%,rgba(65, 97, 89, 0.68) 42%,rgba(102, 146, 135, 0.45) 100%),
    var(--hero-slide-image, linear-gradient(140deg,#e5efe9,#cbdcd4));
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  opacity:0;
  transform:scale(1.06);
  transition:opacity .8s ease,transform 1.1s ease;
}

.hero-cover__slide::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:radial-gradient(circle at top right,rgba(255,255,255,.16),rgba(255,255,255,0) 58%);
  opacity:0;
  transition:opacity .8s ease;
}

.hero-cover__slide.is-active {
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.hero-cover__slide.is-active::before {
  opacity:1;
  transform:scale(1);
}

.hero-cover__slide.is-active::after {
  opacity:1;
}

.hero-cover__slide-content {
  position:relative;
  z-index:1;
  display:grid;
  gap:1.3rem;
  max-width:min(640px,100%);
  color:#f4f8f6;
}
.hero-cover .logo-line {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:rgba(255,255,255,.82);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.2rem;
}

.hero-cover .logo-line .brand {
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
}

.hero-cover h1,
.hero-cover__slide-content h2 {
  margin:0;
  font-weight:900;
  line-height:1.05;
  color:#fff;
}

.hero-cover h1 {
  font-size:clamp(2.6rem,6vw,4.6rem);
}

.hero-cover__slide-content h2 {
  font-size:clamp(2.2rem,5.6vw,3.6rem);
}

.hero-cover__badge {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,.18);
  padding:.5rem .95rem;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(61,82,77,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.hero-cover__lead {
  font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:rgba(240,247,244,.9);
  margin:0;
}

.hero-cover__actions {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  position:relative;
  z-index:3; /* elevar sobre nav del carrusel */
}

.hero-cover__list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:.65rem;
  font-size:1.05rem;
  color:rgba(242,249,246,.92);
}

.hero-cover__list li {
  position:relative;
  padding-left:1.7rem;
}

.hero-cover__list li::before {
  content:"";
  position:absolute;
  left:0;
  top:.4rem;
  width:.75rem;
  height:.75rem;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

.hero-cover__nav {
  --active-index:0;
  --nav-count:1;
  position:absolute;
  left:50%;
  bottom:1.5rem;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.6rem 1.15rem;
  border-radius:999px;
  background:rgba(12,20,18,.6);
  box-shadow:0 14px 32px rgba(13,22,20,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:1; /* por detrás de acciones para no tapar botones */
}

/* Flechas del carrusel hero */
.hero-cover__arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(12,20,18,.55);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(13,22,20,.24);
  z-index:2;
  transition:background .2s ease, transform .2s ease;
}
.hero-cover__arrow:hover { background:rgba(12,20,18,.75); transform:translateY(-50%) scale(1.04); }
.hero-cover__arrow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hero-cover__arrow--prev { left:1rem; }
.hero-cover__arrow--next { right:1rem; }

.hero-cover__nav-progress {
  position:absolute;
  inset:.35rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.hero-cover__nav-progress-bar {
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  height:.35rem;
  width:calc(((var(--active-index) + 1) / var(--nav-count)) * 100%);
  border-radius:999px;
  background:rgba(255,255,255,.75);
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  transition:width .4s ease;
}

.hero-cover__nav-button {
  position:relative;
  width:.65rem;
  height:.65rem;
  border-radius:999px;
  border:none;
  padding:0;
  background:rgba(255,255,255,.42);
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
  cursor:pointer;
  z-index:1;
}

.hero-cover__nav-button::after {
  content:"";
  position:absolute;
  inset:-.3rem;
  border-radius:999px;
}

.hero-cover__nav-button.is-active {
  background:#fff;
  transform:scale(1.3);
  box-shadow:0 0 0 4px rgba(255,255,255,.2);
}

.hero-cover__nav-button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.hero-cover__badge svg {
  width:1.15rem;
  height:1.15rem;
  color:var(--brand);
}

@media (max-width: 900px) {
  .hero-cover__slide-content {
    max-width:100%;
  }
}

@media (max-width: 720px) {
  .hero-cover__slide {
    padding:clamp(2rem,8vw,3.5rem) 0;
  }

  .hero-cover__slide-content {
    text-align:center;
    justify-items:center;
  }

  .hero-cover__actions {
    justify-content:center;
  }

  .hero-cover__list li {
    padding-left:0;
  }

  /* En móvil quitamos los puntos separadores para mejorar legibilidad */
  .hero-cover__list li::before { display:none; }

  .hero-cover__nav {
    display:none; /* ocultar indicadores/dots en móvil */
  }
  .hero-cover__arrow { width:36px; height:36px; font-size:18px; }

  /* Reordenar cabecera de la primera slide: 
     "Escuela Medita" arriba, luego punto, luego "Entrenamiento mental" */
  .logo-line{ display:grid; grid-auto-rows:auto; justify-items:center; row-gap:.15rem; text-align:center; }
  .logo-line span:nth-child(1),
  .logo-line span:nth-child(2){ grid-row:1; white-space:nowrap; }
  .logo-line::after{ content:"•"; grid-row:2; display:block; line-height:1; font-weight:800; }
  .logo-line span:nth-child(3){ grid-row:3; letter-spacing:.06em; text-transform:uppercase; }
}
@media (max-width: 540px) {
  /* Aumenta la claridad del título/subtítulo en móvil */
  .hero-cover h1,
  .hero-cover__slide-content h2,
  .hero-cover__lead { text-shadow: 0 2px 8px rgba(0,0,0,.35); }
}
@media (max-width: 480px) {
  .hero-cover h1 { font-size: clamp(1.9rem, 7.6vw, 2.3rem); }
  .hero-cover__slide-content h2 { font-size: clamp(1.25rem, 6.5vw, 1.6rem); }
  .hero-cover__actions .btn { padding:.6rem .9rem; font-size:.95rem; }
}

.hero h1 {
  font-size:clamp(2rem,4.4vw,3.8rem);
  line-height:1.05;
  margin:0 0 1rem;
  font-weight:800;
  color:#fff;
}

.hero p {
  font-size:clamp(1.05rem,2.2vw,1.25rem);
  opacity:.95;
  margin:0 0 1.25rem;
}

.hero .actions {
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
}

.hero-online {
  background:var(--brand-2);
  color:#fff;
}

.hero-online .section-title {
  color:var(--accent-2);
}

.hero-online-lead {
  font-weight:600;
  color:var(--accent-2);
  font-size:1.2rem;
  line-height:1.4;
  margin:0;
}

.hero-online .actions {
  margin-top:1.2rem;
}

.hero-online-media {
  display:grid;
  gap:1.2rem;
  justify-items:center;
}

.hero-online-phone {
  max-width:220px;
}

.hero-online-mockups {
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
  max-width:520px;
}

/* Mejoras mobile: apilar mockups y ajustar separaci�n */
@media (max-width: 640px) {
  .hero-online-media { gap: .9rem; }
  .hero-online-mockups { grid-template-columns: 1fr; max-width: 360px; }
  .hero-online-phone { max-width: 200px; }
}

/* Split layout */
.split {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(12,1fr);
  align-items:center;
}

.col {
  grid-column:1/-1;
}

@media (min-width:900px) {
  .col.text {
    grid-column:1/7;
  }

  .col.media {
    grid-column:7/-1;
  }
}

/* Colegios gallery (3 images layout) */
.colegios-gallery {
  display:grid;
  gap:1rem;
}

@media (min-width:900px) {
  .colegios-gallery {
    grid-template-columns:2fr 1.4fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "primary secondary1"
      "primary secondary2";
    align-items:stretch;
  }
  .colegios-gallery .gallery-primary { grid-area: primary; }
  .colegios-gallery .gallery-secondary-1 { grid-area: secondary1; }
  .colegios-gallery .gallery-secondary-2 { grid-area: secondary2; }
}

.colegios-gallery figure { margin:0; }
.colegios-gallery img { width:100%; height:auto; display:block; border-radius:1rem; box-shadow:0 10px 28px rgba(31,42,39,.12); }

/* Alternative: use existing .colegios-media with 3 <figure> children */
.colegios-media { gap:1rem !important; }
.colegios-media > figure { margin:0; max-width:100% !important; justify-self:stretch !important; }
.colegios-media img { width:100%; height:auto; display:block; border-radius:1rem; box-shadow:0 10px 28px rgba(31,42,39,.12); }
#colegios .grid.split { align-items:start; }

/* Text panel for colegios */
.colegios-textbox {
  background: linear-gradient(180deg, rgba(240,244,242,.9), rgba(225,235,231,.7));
  padding: clamp(1.25rem,3vw,2rem);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(43,58,54,.10);
}
.colegios-textbox .section-title { margin-top:.25rem; }
/* Apply same style without extra wrapper */
#colegios .col.text {
  background: linear-gradient(180deg, rgba(240,244,242,.9), rgba(225,235,231,.7));
  padding: clamp(1.25rem,3vw,2rem);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(43,58,54,.10);
}
#colegios .col.text .section-title { margin-top:.25rem; }
@media (min-width:900px) {
  .colegios-media { display:grid !important; grid-template-columns:2fr 1.4fr; grid-template-rows:auto auto; align-items:stretch; }
  .colegios-media > figure:nth-child(1) { grid-column:1; grid-row:1 / span 2; }
  .colegios-media > figure:nth-child(2) { grid-column:2; grid-row:1; }
  .colegios-media > figure:nth-child(3) { grid-column:2; grid-row:2; }
}

/* Login */
.login-section {
  background:linear-gradient(135deg,rgba(240,244,242,.9),rgba(214,225,220,.7));
}

.login-section--authenticated {
  text-align:center;
}

.login-section--authenticated .actions {
  margin-top:1.5rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:center;
}

.login-grid {
  display:grid;
  gap:2rem;
  align-items:center;
}

@media (min-width:840px) {
  .login-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.login-copy .section-title {
  margin-top:.75rem;
}

.login-card[data-auth-mode="login"] #register-form,
.login-card[data-auth-mode="register"] #login-form {
  display:none;
}

/* Portal */
.portal-hero {
  background:linear-gradient(135deg,rgba(107,133,126,.9),rgba(37,51,47,.92));
  color:#fff;
  padding:clamp(2.5rem,5vw,4.5rem) 0;
}

.portal-header {
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.portal-header h1 {
  margin:0;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
}

.portal-header p {
  margin:0;
  max-width:60ch;
  color:rgba(255,255,255,.9);
}

.portal-actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.portal-section {
  background:linear-gradient(180deg,#f6f8f7 0%,rgba(246,248,247,0) 60%);
}

.portal-grid {
  display:grid;
  gap:2rem;
}

.portal-grid.admin {
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.portal-card {
  background:#fff;
  border-radius:1.25rem;
  border:1px solid rgba(70,93,87,.15);
  padding:clamp(1.5rem,4vw,2rem);
  box-shadow:0 20px 45px rgba(0,0,0,.06);
  display:grid;
  gap:1rem;
}

.portal-card header h2,
.portal-card h2 {
  margin:0;
  font-size:1.4rem;
  color:var(--muted);
}

.portal-card dl {
  margin:0;
  display:grid;
  gap:.75rem;
}

.portal-card dl div {
  display:flex;
  justify-content:space-between;
  gap:1rem;
}

.portal-card dt {
  font-weight:600;
  color:#2f3835;
}

.portal-card dd {
  margin:0;
  color:#4f5c58;
}

.portal-card textarea {
  min-height:140px;
  resize:vertical;
}

.portal-card .form-feedback {
  font-size:.9rem;
  margin:0;
  color:var(--brand);
}

.portal-card .form-feedback.error {
  color:#b84242;
}

.portal-card .subtle {
  font-size:.9rem;
  color:#677872;
  margin:0;
}

.section-brand {
  background:var(--brand);
  color:#fff;
}

.section-brand .section-title {
  color:var(--accent-2);
}

.about-actions {
  margin-top:.75rem;
}

.section-muted {
  background:#f7f9f8;
}


.video-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1.5rem;
}

.video-card {
  background:#fff;
  border-radius:1rem;
  border:1px solid rgba(70,93,87,.18);
  padding:1.1rem;
  display:grid;
  gap:.75rem;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.video-card h3 {
  margin:0;
  font-size:1.1rem;
  color:#32403c;
}

.video-card p {
  margin:0;
  color:#596864;
}

.video-card a {
  font-weight:600;
  color:var(--brand);
}

.message-list {
  display:grid;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
}

.message-list li {
  border-left:4px solid var(--brand);
  background:#f4f7f6;
  padding:1rem 1.25rem;
  border-radius:1rem;
  display:grid;
  gap:.35rem;
}

.message-list small {
  color:#60716c;
}

.dashboard-table {
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}

.dashboard-table th,
.dashboard-table td {
  padding:.75rem;
  border-bottom:1px solid rgba(70,93,87,.12);
  text-align:left;
}

.dashboard-table th {
  color:#30403c;
  font-weight:700;
}

.dashboard-table tbody tr:hover {
  background:rgba(107,133,126,.08);
}

@media (min-width:900px) {
  .portal-header {
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .portal-grid {
    grid-template-columns:repeat(12,1fr);
  }

  .portal-grid > .portal-card,
  .portal-grid.admin > .portal-card {
    grid-column:span 6;
  }
}

@media (max-width:640px) {
  .portal-card dl div {
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Footer */
footer {
  background:#0f1312;
  color:#cfe0dc;
  padding:2.5rem 0;
  margin-top:2rem;
  overflow:hidden; /* evita desbordes horizontales por sombras/transformaciones */
}

footer a {
  color:#fff;
}

.social {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.social a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#1f2624;
}

.social a img {
  width:20px;
  height:20px;
}

/* Contact page: soften social buttons to match light background */
.contact-page .social a {
  background: rgba(107,133,126,.12);
  border: 1px solid rgba(107,133,126,.28);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contact-page .social a:hover,
.contact-page .social a:focus-visible {
  background: rgba(107,133,126,.22);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Flip Cards for Modalidades */
.flip-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.flip-card { perspective:1000px; position:relative; height:280px; }
.flip-card__inner { position:relative; width:100%; height:100%; transition:transform .7s ease; transform-style:preserve-3d; }
.flip-card.is-flipped .flip-card__inner { transform:rotateY(180deg); }
/* Flip on hover and keyboard focus */
.flip-card:hover .flip-card__inner { transform:rotateY(180deg); }
.flip-card:focus-within .flip-card__inner { transform:rotateY(180deg); }
.flip-card__face { position:absolute; inset:0; backface-visibility:hidden; border-radius:1rem; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,.08); display:grid; place-content:center; padding:1.1rem; text-align:center; }
.flip-card__face--front {
  /* Muestra imagen si está definida en --flip-image, con velo claro para legibilidad */
  background:
    var(--flip-image, linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240,244,242,.95)));
  background-size:cover;
  background-position:center;
  color:#1f2a27;
}
.flip-card__face--back { background:#fff; transform:rotateY(180deg); color:#2b3532; }
.flip-card h3 { margin:.25rem 0 .5rem; font-size:1.25rem; }
.flip-card p { margin:0; }
.flip-card__actions { margin-top:1rem; display:flex; gap:.5rem; justify-content:center; }
.flip-card__toggle { display:none; }
.flip-card:focus-within { outline:3px solid rgba(107,133,126,.35); outline-offset:3px; }

/* Mejor organización en teléfono: evitar flip y mostrar contenido claro */
@media (max-width: 720px) {
  .flip-card { height:auto; }
  .flip-card__inner { transform:none !important; height:auto; }
  .flip-card__face { position:static; backface-visibility:visible; border-radius:1rem; }
  .flip-card__face--front { display:none; }
  .flip-card__face--back { transform:none; box-shadow:0 10px 26px rgba(0,0,0,.08); text-align:left; }
  .flip-card__actions { justify-content:flex-start; flex-wrap:wrap; }
}

/* Desktop type scaling to mimic ~80% zoom */
@media (min-width: 900px) {
  .hero-cover h1 {
    font-size: clamp(2.4rem, calc(6vw * var(--type-vw-scale)), 4.2rem);
  }
  .hero-cover__slide-content h2 {
    font-size: clamp(2rem, calc(5.6vw * var(--type-vw-scale)), 3.3rem);
  }
  .hero h1 {
    font-size: clamp(1.9rem, calc(4.4vw * var(--type-vw-scale)), 3.4rem);
  }
  .hero p {
    font-size: clamp(1rem, calc(2.2vw * var(--type-vw-scale)), 1.15rem);
  }
}
/* Programs grid panels */
.programs-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.program-card { background:#fff; border-radius:1rem; box-shadow:0 15px 40px rgba(0,0,0,.08); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; }
.program-card__media { aspect-ratio: 16/9; overflow:hidden; background:#e8efec; }
.program-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.program-card__body { padding:1rem 1.1rem; display:grid; gap:.5rem; }
.program-card__body h3 { margin:.1rem 0; font-size:1.25rem; color:#2b3532; }
.program-card__body p { margin:0; color:#3b4744; }
.program-card__actions { padding:0 1.1rem 1.1rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* Override: mostrar imagen frontal de flip-cards en móvil */
@media (max-width: 720px) {
  .flip-card__face--front { display:block; min-height:160px; margin-bottom:.75rem; }
  footer .container.grid { grid-template-columns: 1fr !important; }
  footer .social { justify-content:flex-start; }
}

/* Collage de fotos para Colegios */
.photo-collage {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
  align-items:start;
}

.frame { position:relative; margin:0; display:block; }
.frame img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.frame__caption { position:absolute; left:0; right:0; bottom:.5rem; text-align:center; font-size:.85rem; color:#4a5854; opacity:.9; }

/* Polaroid: borde blanco grueso con pie */
.frame--polaroid {
  --polaroid-pad: .7rem;
  /* Mover a la derecha (como el dibujo) */
  grid-column:8 / span 5; grid-row:1;
  background:#fff; border-radius:.6rem; padding:var(--polaroid-pad) var(--polaroid-pad) calc(var(--polaroid-pad) * 3);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  transform:rotate(-2deg);
  align-self:end;
}

/* Cinta adhesiva en esquinas */
.frame--tape {
  /* Grande a la izquierda */
  grid-column:1 / span 7; grid-row:1;
  border-radius:.5rem; background:#fff; padding:.45rem; box-shadow:0 18px 40px rgba(0,0,0,.12);
  transform:rotate(2.2deg);
  align-self:end;
}
.frame--tape::before,
.frame--tape::after {
  content:""; position:absolute; width:64px; height:18px; background:rgba(255, 241, 173, .85);
  top:-10px; transform:rotate(-6deg); left:14%; border-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.frame--tape::after { left:auto; right:12%; transform:rotate(7deg); }

/* Marco tipo madera (con gradiente) */
.frame--wood {
  /* Ancha abajo, bajo ambas */
  grid-column:2 / span 10; grid-row:2; margin-top:.25rem;
  border-radius:.8rem;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#8b6b4a,#caa36d,#a67c52,#8b6b4a) border-box;
  border:12px solid transparent;
  padding:.35rem; box-shadow:0 18px 40px rgba(0,0,0,.13);
  transform:rotate(-1deg);
}

@media (max-width: 900px) {
  .photo-collage { grid-template-columns:1fr; justify-items:center; }
  .frame--polaroid,
  .frame--tape,
  .frame--wood { grid-column:auto; grid-row:auto; transform:none; }
}

/* Recursos: apilar columnas y centrar media en móviles */
@media (max-width: 900px) {
  #recursos .container.grid { grid-template-columns: 1fr !important; }
  /* Texto primero, imágenes después */
  #recursos .col.text { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  #recursos .col.media { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self:center; width:100%; }
  #recursos .photo-collage .frame { max-width: 420px; width: 100%; }
  #recursos .photo-collage { justify-items: center; }
}

/* Ajustes de alineación para la sección Colegios */
@media (min-width: 900px) {
  #colegios .col.text { margin-top: 10.0rem; }
  /* Reduce levemente el conjunto de fotos si hace falta */
  #colegios .photo-collage { transform: scale(.96); transform-origin: top left; }
}

/* Account modal – visual polish (scoped) */
#account-modal { backdrop-filter: blur(4px); }
#account-modal > div {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
  border: 1px solid rgba(0,0,0,.06);
}
#account-modal header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2b3532;
}
#account-modal .stack { gap: .75rem !important; }
#account-modal .grid { gap: .6rem 1rem !important; }

#account-modal input[type="text"],
#account-modal input[type="email"],
#account-modal input[type="password"] {
  width: 100%;
  border: 1px solid #e6ece9;
  background: #fbfcfb;
  border-radius: 10px;
  padding: .6rem .8rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#account-modal input:focus {
  border-color: #c0d6cf;
  box-shadow: 0 0 0 3px rgba(117, 155, 144, .18);
  background: #fff;
}

#account-modal .btn { 
  border-radius: 10px !important; 
  padding: .55rem .9rem !important; 
  box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
}
#account-modal .btn.ghost { 
  background: #fff !important; 
  border: 1px solid #e4eae7 !important; 
}
#account-modal .btn.primary { 
  background: linear-gradient(180deg, #d9b69f, #c79c80) !important; 
  border: 1px solid #c19072 !important; 
  color: #1f2725 !important;
}
#account-modal .btn.link { 
  background: transparent !important; 
  border: none !important; 
  color: #6b857e !important; 
  box-shadow: none !important; 
  padding-left: 0 !important; 
}

#account-modal .actions { gap: .6rem !important; }

#account-modal hr { border: none; border-top: 1px solid #eef2f0; margin: 1rem 0; }

#account-modal .subtle { color: #6c7a76; }

/* Clases online: mockups de dispositivos */
.online-mockups {
  --phone-min: 160px;
  --phone-vw: 22vw;
  --phone-max: 200px;
  display:grid;
  grid-template-columns:clamp(var(--phone-min), var(--phone-vw), var(--phone-max)) 1fr;
  gap:2rem;
  align-items:center;
}

.device { position:relative; margin:0; }
.device__screen {
  position:relative;
  background: var(--mockup-image), linear-gradient(135deg,#efefef,#e8e6e4);
  background-size:cover;
  background-position:center;
  display:block;
  box-shadow:0 22px 60px rgba(13,22,20,.18);
}

.device__video {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* iPhone vertical */
.device--iphone {
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:center;
  width:clamp(var(--phone-min), var(--phone-vw), var(--phone-max));
}
.device--iphone .device__screen {
  aspect-ratio:9/19.5;
  border-radius:2rem;
  /* bisel negro + marco negro para igualar laptops */
  box-shadow:
    0 28px 60px rgba(0,0,0,.18),
    inset 0 0 0 8px #0d0d0d,
    0 0 0 12px #111;
  overflow:hidden;
}
.device--iphone .device__screen::after {
  /* notch superior tipo iPhone */
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:38%;
  height:14px;
  background:#0d0d0d;
  border-bottom-left-radius:.9rem;
  border-bottom-right-radius:.9rem;
}

/* MacBooks a la derecha */
.device--mac .device__screen {
  aspect-ratio:16/10;
  border-radius:1rem;
  box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 0 0 6px #0d0d0d;
  overflow:hidden;
}
.device--mac::after {
  /* base del laptop */
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-.9rem;
  width:78%;
  height:.65rem;
  background:linear-gradient(#d3d6d8,#b8bdc2);
  border-radius:.3rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.device--mac-top { grid-column:2; grid-row:1; align-self:end; }
.device--mac-bottom { grid-column:2; grid-row:2; align-self:start; margin-top:.35rem; }

@media (max-width: 900px) {
  .online-mockups { grid-template-columns:1fr; }
  .device--iphone { grid-column:auto; grid-row:auto; }
  .device--mac-top, .device--mac-bottom { grid-column:auto; grid-row:auto; }
}


/* Text panel blocks */
.text-panel { --panel-bg:#6f8b83; --panel-fg:#fff; background:var(--panel-bg); color:var(--panel-fg); border-radius:16px; padding:1.25rem 1.5rem; box-shadow:0 12px 30px rgba(0,0,0,.06); }
.text-panel h2, .text-panel p, .text-panel .tag { color:inherit; }
.text-panel--turq { --panel-bg:#6f8b83; --panel-fg:#fff; }
.text-panel--light { --panel-bg:#fff; --panel-fg:#6f8b83; border:1px solid #e6ece9; }
.text-panel--turq .btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.8); }

/* Keep panels compact so media mockups stay aligned */
.section .col.text .text-panel { max-width: 640px; width: 100%; box-sizing: border-box; align-self:start; }
#clases-online .col.media { justify-self: end; }
#colegios .col.media { justify-self: start; }

/* Ensure framed images and device screens keep content clipped */
.frame img { width:100%; height:100%; object-fit:cover; display:block; }
.device__screen { overflow:hidden; }

/* Prevent media columns from growing too wide on desktop */
@media (min-width: 900px) {
  #clases-online .online-mockups { max-width: 560px; width: 100%; justify-self: end; }
  #colegios .photo-collage { max-width: 560px; width: 100%; justify-self: start; }
}

/* Mobile override: re-enable flip cards (placed after earlier block) */
@media (max-width: 720px) {
  .flip-card { height:260px; }
  .flip-card__inner { height:100%; transform-style: preserve-3d; }
  .flip-card__face { position:absolute; inset:0; backface-visibility:hidden; border-radius:1rem; }
  .flip-card__face--front { display:grid !important; }
  .flip-card__face--back { transform:rotateY(180deg) !important; text-align:left; }
  .flip-card__actions { justify-content:center; flex-wrap:wrap; }
}
/* Mobile override 2: force transform and tap affordance */
@media (max-width: 720px) {
  .flip-card { cursor: pointer; }
  .flip-card.is-flipped .flip-card__inner { transform: rotateY(180deg) !important; }
}
/* Mobile override 3: ensure taps are received */
@media (max-width: 720px) {
  .flip-card__face { pointer-events: auto; }
  .flip-card { -webkit-tap-highlight-color: transparent; }
}
/* Align hero-online mockups bottoms */
.hero-online-media { align-items: end; }
.hero-online-media > * { align-self: end; }
.hero-online-mockups { align-items: end; }
.hero-online-mockups img { display:block; }
@media (max-width: 640px) {
  /* keep stack tidy on mobile */
  .hero-online-media { align-items: center; }
  .hero-online-media > * { align-self: center; }
}
/* Hero online: centrar y tama�os coherentes */
.hero-online-media { justify-items: center; align-items: center; }
.hero-online-media > * { align-self: center; }
.hero-online-phone { max-width: 260px; }
.hero-online-mockups { align-items: center; }
.hero-online-mockups img { display:block; max-width: 320px; height: auto; }
@media (max-width: 900px) {
  .hero-online-phone { max-width: 220px; }
  .hero-online-mockups img { max-width: 280px; }
}
@media (max-width: 640px) {
  .hero-online-media { justify-items: center; }
  .hero-online-phone { max-width: 200px; }
  .hero-online-mockups { grid-template-columns: 1fr; }
  .hero-online-mockups img { max-width: 240px; margin: 0 auto; }
}
/* Center + scale for hero-online mockups (stronger rules) */
.hero-online .hero-online-media { display:grid; justify-items:center; align-items:center !important; text-align:center; }
.hero-online .hero-online-phone { justify-self:center !important; max-width: clamp(200px, 28vw, 260px); }
.hero-online .hero-online-mockups { display:grid; align-items:center !important; justify-items:center; grid-template-columns: 1fr 1fr; gap:1rem; }
.hero-online .hero-online-mockups img { display:block; width:100%; max-width: clamp(220px, 32vw, 320px); height:auto; margin:0 auto !important; }
@media (max-width: 900px) {
  .hero-online .hero-online-phone { max-width: clamp(180px, 36vw, 220px); }
  .hero-online .hero-online-mockups img { max-width: clamp(200px, 40vw, 280px); }
}
@media (max-width: 640px) {
  .hero-online .hero-online-mockups { grid-template-columns: 1fr; }
  .hero-online .hero-online-phone { max-width: clamp(160px, 60vw, 200px); }
  .hero-online .hero-online-mockups img { max-width: clamp(180px, 70vw, 240px); }
}
/* Clases online: igualar organizaci�n m�vil a "Colegios" */
@media (max-width: 640px) {
  #clases-online .col.media { justify-self: center !important; }
  #clases-online .hero-online-media { width: 100%; justify-items: center; }
  #clases-online .hero-online-phone { width: clamp(180px, 60vw, 220px); max-width: 100%; }
  #clases-online .hero-online-mockups { grid-template-columns: 1fr; gap: .9rem; }
  #clases-online .hero-online-mockups img { width: clamp(200px, 70vw, 240px); height: auto; display: block; margin: 0 auto; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #clases-online .col.media { justify-self: center !important; }
  #clases-online .hero-online-media { justify-items: center; }
  #clases-online .hero-online-phone { width: clamp(200px, 32vw, 240px); }
  #clases-online .hero-online-mockups { grid-template-columns: 1fr 1fr; gap: 1rem; }
  #clases-online .hero-online-mockups img { width: clamp(220px, 34vw, 300px); height: auto; }
}
/* Clases online: hacer mockups a ancho de contenedor como en Colegios */
#clases-online .hero-online-mockups { width: 100%; max-width: none; }
#clases-online .hero-online-mockups > * { width: 100%; }
#clases-online .hero-online-mockups img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  #clases-online .hero-online-mockups { grid-template-columns: 1fr; gap: 1rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
  #clases-online .hero-online-mockups { grid-template-columns: 1fr 1fr; gap: 1rem; }
  #clases-online .hero-online-mockups > * { max-width: 520px; }
}
/* Ensure mockup images fill their grid cell */
.hero-online-mockups img { width: 100% !important; height: auto; display: block; }
@media (max-width: 640px) {
  .hero-online-mockups { grid-template-columns: 1fr !important; }
}
/* Bigger Mac mockups like Colegios */
#clases-online .hero-online-mockups { width: 100% !important; max-width: none !important; }
#clases-online .hero-online-mockups > * { width: 100% !important; }
#clases-online .hero-online-mockups img { width: 100% !important; height: auto; display: block; }
@media (max-width: 640px) {
  #clases-online .hero-online-mockups { grid-template-columns: 1fr !important; }
}
/* Make Mac mockups full-width in online-mockups, like Colegios */
.online-mockups .device--mac { width: 100% !important; }
.online-mockups .device--mac .device__screen { width: 100% !important; }
@media (max-width: 900px) {
  .online-mockups { grid-template-columns: 1fr !important; }
  .online-mockups .device--iphone { justify-self: center; }
  .online-mockups .device--mac-top,
  .online-mockups .device--mac-bottom { justify-self: center; }
}
@media (max-width: 640px) {
  .online-mockups .device--mac { width: 100% !important; }
}
/* Stronger sizing: make Mac mockups wider on mobile/tablet */
@media (max-width: 900px) {
  #clases-online .col.media { justify-self: stretch !important; }
  #clases-online .online-mockups { width: 100% !important; max-width: none !important; }
}
@media (max-width: 640px) {
  #clases-online .online-mockups { grid-template-columns: 1fr !important; width: 100% !important; }
  #clases-online .online-mockups .device--mac { width: 100% !important; }
  #clases-online .online-mockups .device--mac .device__screen { width: 100% !important; }
}


/* Login/Registro responsive tweaks */
@media (max-width: 640px) {
  .login-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .login-copy { order: 1; }
  .login-card { order: 2; }
  .auth-toggle button { padding: .6rem .9rem; }
  .auth-form .field input { padding: .65rem .75rem; }
}
/* Carousel tighter on small phones */
@media (max-width: 480px) {
  .hero-cover h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-cover__slide-content h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-cover__slide { padding: 2rem 0; }
  .hero-cover__badge { font-size: .85rem; padding: .35rem .7rem; }
}