/* ==========================================================================
   CREATICS · sanagus.css — extraescolar de Programación y Robótica en el Colegio
   San Agustín (/sanagus/). Misma familia que /actividades-para-ninos/: requiere
   horario.css y actividades.css además de los cinco comunes. Prefijo .cs-sa-.
   ========================================================================== */

/* ---------- Reserva: las dos formas de pago ---------- */
.cs-sa-reserva{padding-top:calc(var(--section-y) * .8)}
.cs-sa-matricula{display:flex;flex-direction:column;gap:4px;align-self:start;min-width:230px;max-width:290px;padding:18px 22px;background:var(--cs-yellow);border:var(--border-bold) solid var(--cs-ink);border-radius:14px;box-shadow:var(--shadow-offset);transform:rotate(1.5deg)}
.cs-sa-matricula strong{font-family:var(--font-heading);font-size:var(--text-2xl);line-height:1;letter-spacing:var(--tracking-tight)}
.cs-sa-matricula span{font-size:var(--text-sm);line-height:var(--leading-normal)}
.cs-sa-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cs-sa-opcion{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:var(--radius-card);background:#fff;border:1.5px solid var(--color-border);box-shadow:var(--shadow-sm)}
.cs-sa-opcion--destacada{border:var(--border-bold) solid var(--cs-ink);box-shadow:var(--shadow-offset)}
.cs-sa-opcion .cs-h3{margin:0}
.cs-sa-opcion__desde{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);color:var(--cs-blue)}
.cs-sa-opcion__texto{margin:0;flex:1;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-sa-opcion .cs-btn{margin-top:6px}
.cs-sa-precios{display:flex;flex-direction:column;gap:14px}
.cs-sa-precios .cs-h4{margin:0}
.cs-sa-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-sa-tabla{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--text-sm)}
.cs-sa-tabla th,.cs-sa-tabla td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top}
.cs-sa-tabla td,.cs-sa-tabla thead th{white-space:nowrap}
.cs-sa-tabla thead th{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute);border-bottom:2px solid var(--cs-ink)}
.cs-sa-tabla tbody th{font-family:var(--font-heading);font-weight:700;color:var(--cs-ink)}
.cs-sa-tabla tbody th small{display:block;margin-top:2px;font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-sa-tabla td b{font-family:var(--font-heading);font-size:var(--text-base);color:var(--cs-ink)}
.cs-sa-tabla td s{color:var(--color-ink-mute)}
.cs-sa-tabla__extra{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:var(--radius-pill);background:var(--cs-turquoise);color:var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-2xs);letter-spacing:0;white-space:nowrap;vertical-align:middle}
/* En móvil no hay tabla que deslizar: cada grupo es una ficha con sus tres precios etiquetados */
@media (max-width:720px){
	.cs-sa-tabla-wrap{overflow:visible}
	.cs-sa-tabla,.cs-sa-tabla tbody,.cs-sa-tabla tr{display:block;min-width:0}
	.cs-sa-tabla caption,.cs-sa-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
	.cs-sa-tabla tr{padding:12px 0;border-bottom:1px solid var(--color-border)}
	.cs-sa-tabla tbody th{display:block;border:0;padding:0 0 6px}
	.cs-sa-tabla td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;border:0;white-space:normal}
	.cs-sa-tabla td::before{content:attr(data-label);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
	.cs-sa-tabla td > span{text-align:right}
}
.cs-sa-precios__nota{margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-ink-mute)}
.cs-sa-prueba{margin:0;padding:12px 16px;border-left:4px solid var(--cs-turquoise);background:var(--neutral-50);border-radius:0 10px 10px 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--cs-ink)}
/* La pegatina va dentro de .cs-section__head--row, cuya regla genérica de home.css (div:not(.cs-segment)) la pisaría */
.cs-home .cs-section__head--row > div.cs-sa-matricula{flex-direction:column;gap:4px;max-width:290px}
@media (max-width:860px){
	.cs-sa-matricula{transform:none}
	.cs-home .cs-section__head--row > div.cs-sa-matricula{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px;max-width:none}
	.cs-sa-opciones{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){.cs-sa-opcion{padding:22px 20px}}
@media (max-width:480px){
	.cs-home .cs-section__head--row > div.cs-sa-matricula{flex-direction:column}
	.cs-pagina--colegio #cs-sa-h-academia{font-size:clamp(1.75rem,8.5vw,2.5rem)}
}

/* ---------- Grupos ---------- */
.cs-sa-grupos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cs-sa-grupo{display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;background:#fff;border:1.5px solid var(--color-border);border-radius:12px;font-size:var(--text-sm);line-height:1.35}
.cs-sa-grupo__nombre{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-sa-grupo strong{font-family:var(--font-heading);font-size:var(--text-base);color:var(--cs-ink)}
.cs-sa-grupo small{margin-top:4px;font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-hor__punto--madrugadores{background:#f28c28}
@media (max-width:1100px){.cs-sa-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cs-sa-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.cs-sa-grupos{grid-template-columns:minmax(0,1fr)}}

/* Cada clase del horario: reservar con el grupo ya elegido */
.cs-hor__reservar{margin:6px 0 0;padding-top:8px;border-top:1px dashed var(--color-border);display:flex;flex-direction:column;align-items:flex-start;font-size:var(--text-xs)}
.cs-hor__reservar-t{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-hor__reservar a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.cs-hor__reservar a:hover{color:var(--blue-800)}
.cs-hor__flecha{margin-left:.3em}
@media (max-width:760px){.cs-hor__reservar{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px}.cs-hor__reservar-t{width:100%}}
/* Casilla de consentimiento: objetivo táctil de 44 px (en home.css mide 36) */
.cs-pagina--colegio .cs-check{min-height:44px;align-items:center}

/* ---------- Qué incluye y detalles ---------- */
.cs-sa-incluye__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.cs-sa-incluye__lista{gap:18px}
.cs-sa-check{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-sa-check li{position:relative;padding-left:32px;font-weight:600;line-height:var(--leading-normal);color:var(--cs-ink)}
.cs-sa-check li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--cs-turquoise);border:2px solid var(--cs-ink)}
.cs-sa-check li::after{content:"";position:absolute;left:6px;top:calc(.2em + 4px);width:6px;height:10px;border:solid var(--cs-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cs-sa-detalles{display:flex;flex-direction:column;gap:16px;padding:26px 28px;background:var(--neutral-50);border-radius:var(--radius-card);border:1.5px solid var(--color-border)}
.cs-sa-detalles .cs-h4{margin:0}
.cs-sa-detalles__lista{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.cs-sa-detalles__lista dt{font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);color:var(--cs-ink)}
.cs-sa-detalles__lista dd{margin:4px 0 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
@media (max-width:900px){.cs-sa-incluye__grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (max-width:520px){.cs-sa-detalles__lista{grid-template-columns:minmax(0,1fr)}.cs-sa-detalles{padding:20px}}

/* ---------- Así se aprende: una sola actividad, sin pestañas ---------- */
.cs-pagina--sanagus .cs-rec__tabs{display:none}

/* ---------- Coordinador ---------- */
.cs-sa-coord{display:flex;gap:18px;align-items:flex-start;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16)}
.cs-sa-coord__foto{flex:none;width:96px;height:120px;object-fit:cover;border-radius:12px;border:2px solid #fff}
.cs-sa-coord__datos{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:var(--text-sm);color:rgba(255,255,255,.82)}
.cs-sa-coord__datos strong{font-family:var(--font-heading);font-size:var(--text-lg);color:#fff}
.cs-sa-coord__datos small{font-size:var(--text-xs);color:rgba(255,255,255,.7)}
.cs-sa-coord__tel,.cs-sa-coord__mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--cs-turquoise);text-decoration:none;overflow-wrap:anywhere}
.cs-sa-coord__tel{font-family:var(--font-heading);font-size:var(--text-lg)}
.cs-sa-coord__tel:hover,.cs-sa-coord__mail:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media (max-width:420px){.cs-sa-coord{flex-direction:column}.cs-sa-coord__foto{width:80px;height:100px}}

/* ---------- De qué va: claim y pilares antes de la reserva ---------- */
.cs-sa-claim .cs-h2{max-width:20ch}
.cs-sa-claim__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:4px}
.cs-sa-claim__pie p{margin:0;flex:1 1 380px;max-width:64ch;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-sa-claim__pie .cs-row{flex:none;align-items:center;gap:20px}
.cs-sa-claim__pie .cs-link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:720px){.cs-sa-claim__pie .cs-row{width:100%;flex-direction:column;align-items:stretch;gap:6px}.cs-sa-claim__pie .cs-btn{width:100%}.cs-sa-claim__pie .cs-link{justify-content:center}}

/* ---------- Ahorro por varios días o hermanos ---------- */
.cs-sa-ahorro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 40px;align-items:center;padding:30px 32px;background:var(--cs-yellow);color:var(--cs-ink);border:var(--border-bold) solid var(--cs-ink);border-radius:18px;box-shadow:var(--shadow-offset)}
.cs-sa-ahorro__txt{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cs-sa-ahorro__txt .cs-tag{background:var(--cs-ink);color:#fff;border-color:var(--cs-ink)}
.cs-sa-ahorro .cs-h3{margin:0}
.cs-sa-ahorro__txt p{margin:0;font-size:var(--text-base);line-height:var(--leading-normal)}
.cs-sa-ahorro__ej{display:flex;flex-direction:column;gap:10px;padding:20px 22px;background:#fff;border:2px solid var(--cs-ink);border-radius:14px}
.cs-sa-ahorro__sub{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-sa-ahorro__ej ul{margin:0;padding:0;list-style:none}
.cs-sa-ahorro__ej li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--color-border)}
.cs-sa-ahorro__ej li:last-child{border-bottom:0}
.cs-sa-ahorro__caso{font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg)}
.cs-sa-ahorro__precio{text-align:right;white-space:nowrap;font-size:var(--text-sm)}
.cs-sa-ahorro__precio s{color:var(--color-ink-mute)}
.cs-sa-ahorro__precio b{font-family:var(--font-heading);font-size:var(--text-2xl)}
.cs-sa-ahorro__mes{font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-sa-ahorro__gana{grid-column:2;grid-row:2;justify-self:end;padding:4px 12px;border-radius:var(--radius-pill);background:var(--cs-turquoise);font-family:var(--font-heading);font-weight:700;font-size:var(--text-xs);white-space:nowrap}
.cs-sa-ahorro__nota{margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-ink-mute)}
@media (max-width:900px){.cs-sa-ahorro{grid-template-columns:minmax(0,1fr);padding:24px 20px}}
@media (max-width:480px){.cs-sa-ahorro__ej{padding:16px}.cs-sa-ahorro__ej li{grid-template-columns:minmax(0,1fr)}.cs-sa-ahorro__precio{text-align:left}.cs-sa-ahorro__gana{grid-column:1;grid-row:auto;justify-self:start}}

/* ---------- Colegios con varias actividades (Villanubla) ---------- */
.cs-hor__punto--medialab{background:var(--cs-pink)}
.cs-sa-opcion__elige{margin:4px 0 -4px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-sa-claim__acts .cs-photo-card{min-height:440px}
.cs-sa-claim__tag{align-self:flex-start;margin-bottom:6px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--cs-yellow);color:var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-2xs)}
.cs-sa-claim__acts .cs-photo-card__body{display:flex;flex-direction:column}
.cs-sa-claim__acts .cs-photo-card__body small{margin-top:8px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);opacity:.85}
@media (max-width:720px){.cs-sa-claim__acts{grid-template-columns:minmax(0,1fr)}.cs-sa-claim__acts .cs-photo-card{min-height:400px}}
/* ¿Merece la pena? */
.cs-sa-imagina__in{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:860px}
.cs-sa-imagina .cs-h2{color:#fff;margin:0}
.cs-sa-imagina p{margin:0;font-size:var(--text-lg);line-height:var(--leading-normal);color:rgba(255,255,255,.86)}
.cs-sa-imagina p strong{color:var(--cs-turquoise)}
@media (max-width:720px){.cs-sa-imagina p{font-size:var(--text-base)}.cs-sa-imagina .cs-btn{width:100%}}

/* ---------- Opción 2: la academia con la ventaja del AMPA (CEO Atenea) ---------- */
.cs-sa-ampa-wrap{margin-top:44px}
.cs-sa-ampa{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;padding:28px 30px;background:var(--blue-50);border:1.5px solid var(--blue-100);border-radius:16px}
.cs-sa-ampa .cs-h3{margin:0;max-width:30ch}
.cs-sa-ampa > p{margin:0;max-width:70ch;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-sa-ampa__ventajas{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.cs-sa-ampa__ventajas li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border:1.5px solid var(--color-border);border-radius:10px}
.cs-sa-ampa__ventajas strong{font-family:var(--font-heading);font-size:var(--text-lg);line-height:1.1;color:var(--cs-ink)}
.cs-sa-ampa__ventajas span{font-size:var(--text-xs);line-height:1.35;color:var(--color-ink-mute)}
.cs-sa-ampa__pasos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;width:100%}
.cs-sa-ampa__pasos li{display:flex;align-items:flex-start;gap:12px}
.cs-sa-ampa__pasos strong{font-family:var(--font-heading);font-size:var(--text-base);color:var(--cs-ink)}
.cs-sa-ampa__pasos p{margin:2px 0 0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-sa-ampa__num{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cs-turquoise);border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);color:var(--cs-ink)}
.cs-sa-ampa__nota{margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-ink-mute)}
/* CEO Atenea: tres grupos (la rejilla base es de cinco) */
.cs-pagina--atenea .cs-sa-grupos{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cs-sa-ampa__ventajas{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-sa-ampa__pasos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.cs-sa-ampa{padding:22px 18px}.cs-sa-ampa__ventajas{grid-template-columns:minmax(0,1fr)}.cs-sa-ampa .cs-btn{width:100%}.cs-pagina--atenea .cs-sa-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.cs-pagina--atenea .cs-sa-grupos{grid-template-columns:minmax(0,1fr)}}

/* El kicker es un inline-flex sin wrap: uno largo («Opción 2 · La academia, con el AMPA»)
   ensanchaba el viewport en el móvil. En esta familia de páginas puede plegarse. */
@media (max-width:720px){
	.cs-pagina--colegio .cs-kicker{flex-wrap:wrap}
	.cs-pagina--colegio .cs-kicker > span{min-width:0;white-space:normal}
}
/* García Quintana: dos grupos comparten el tramo «Verde» (Programación el miércoles y Mecanografía el jueves) */
.cs-hor__punto--verde_meca{background:#1f9d55}