/* Stage Arts — estilos. Móvil primero (se ve en el teléfono), tema de teatro: noche, uva, magenta y oro. Sin librerías. */
@font-face { font-family: 'Fraunces'; src: url('tipos/fraunces.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('tipos/fraunces-italica.woff2') format('woff2'); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('tipos/manrope.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --noche: #120B1A;
  --noche-2: #1A1026;
  --uva: #2A1245;
  --uva-2: #3A1B5C;
  --magenta: #D04BA6;
  --oro: #E8BE6E;
  --oro-fuerte: #F3CF86;
  --marfil: #F7F0E6;
  --texto: #EDE4F2;
  --texto-2: #BFB1CC;
  --linea: rgba(247, 240, 230, .14);
  --radio: 18px;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--noche); color: var(--texto); font: 17px/1.65 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oro); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--marfil); line-height: 1.15; margin: 0 0 .6rem; text-wrap: balance; }
h4 { font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 1.8rem 0 .6rem; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding: 0; list-style: none; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--oro); color: #1A1026; padding: .7rem 1rem; z-index: 100; font-weight: 700; }
.saltar:focus { left: 0; }
:focus-visible { outline: 3px solid var(--oro-fuerte); outline-offset: 3px; border-radius: 6px; }

/* ---------- encabezado ---------- */
.cab { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem max(1rem, env(safe-area-inset-left)); background: rgba(18, 11, 26, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea); }
.marca { text-decoration: none; font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--marfil); white-space: nowrap; }
.marca-a { font-weight: 500; letter-spacing: .02em; }
.marca-b { font-style: italic; font-weight: 400; color: var(--oro); }
.menu { display: none; }
.menu a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem .7rem; border-radius: 999px; }
.menu a:hover { background: rgba(247, 240, 230, .08); }

.boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: .8rem 1.5rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--oro-fuerte), var(--oro)); color: #1A1026; font: 700 1rem/1.2 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 10px 28px rgba(232, 190, 110, .22); transition: transform .15s ease, box-shadow .15s ease; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(232, 190, 110, .32); }
.boton-chico { min-height: 40px; padding: .5rem 1rem; font-size: .88rem; box-shadow: none; }
.boton-ancho { width: 100%; }
.enlace-claro { color: var(--marfil); font-weight: 600; text-underline-offset: 4px; display: inline-flex; min-height: 48px; align-items: center; }

/* ---------- portada ---------- */
/* Fondo blanco con trazos de pincel dibujados a mano (SVG en el HTML) y, abajo, una fila de triángulos blancos que apuntan a la siguiente sección. */
.portada { position: relative; min-height: min(86svh, 760px); display: grid; align-items: end; overflow: hidden; isolation: isolate; background: #fff; }
.arte { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; pointer-events: none; }
.arte-ancha { display: none; height: 100%; }
.arte-vertical { display: block; height: auto; }
.flota { transform-box: fill-box; transform-origin: center; animation: flota 9s ease-in-out infinite alternate; }
.flota.b { animation-duration: 12s; animation-delay: -4s; }
.flota.c { animation-duration: 7s; animation-delay: -2s; }
@keyframes flota { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(6px, -9px) rotate(3deg); } }
.portada-texto { width: min(1120px, 100% - 2rem); margin: 0 auto; padding: 14rem 0 3.2rem; }
@media (min-width: 480px) { .portada-texto { padding-top: calc(100vw * .6 + 1rem); } }
.portada .sobre { color: #B02F86; }
.portada h1 { font-size: clamp(2.1rem, 1.2rem + 4.6vw, 4rem); max-width: 18ch; color: var(--uva); }
.portada-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem); color: #4A2A6B; max-width: 30ch; }
.portada .enlace-claro { color: var(--uva); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin-top: 1.4rem; }
.sobre { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); font-weight: 700; }
.picos { display: flex; width: 100%; margin-top: -1px; text-decoration: none; background: transparent; }
.picos span { flex: 1; height: clamp(30px, 5.5vw, 62px); background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; animation: baja 2.4s ease-in-out infinite; }
.picos span:nth-child(2n) { animation-delay: .2s; }
.picos span:nth-child(3n) { animation-delay: .4s; }
@keyframes baja { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.28); } }
@media (min-width: 1100px) {
  .arte-ancha { display: block; }
  .arte-vertical { display: none; }
  .portada-texto { padding: 6rem 0 3.4rem; }
}

/* ---------- secciones ---------- */
.seccion { padding: 4rem 0; position: relative; }
.seccion.oscura { background: linear-gradient(180deg, var(--noche-2), var(--uva) 140%); }
.ancho { width: min(1120px, 100% - 2rem); margin: 0 auto; }
.angosto { width: min(640px, 100% - 2rem); }
.ancho + .ancho { margin-top: 3rem; }
.etiqueta { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); font-weight: 700; margin-bottom: .6rem; }
.grande { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.8rem); }
.centro { text-align: center; }
.suave { color: var(--texto-2); }
.destacado { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--marfil); }

.dos { display: grid; gap: 1.6rem; align-items: center; }
.bloque h3 { font-size: 1.7rem; }
.bloque p { color: var(--texto); }
.foto { margin: 0; }
.foto img { width: 100%; border-radius: var(--radio); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); aspect-ratio: 4 / 3; object-fit: cover; }

.programas-lista { display: grid; gap: .8rem; margin-top: 1.4rem; }
.programas-lista a { display: block; text-decoration: none; padding: 1.1rem 1.2rem; border-radius: var(--radio); background: rgba(247, 240, 230, .05); border: 1px solid var(--linea); color: var(--texto); transition: background .15s, border-color .15s; }
.programas-lista a:hover { background: rgba(247, 240, 230, .09); border-color: var(--oro); }
.programas-lista strong { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--marfil); }
.programas-lista span { color: var(--texto-2); }

.llamado { text-align: center; padding: 2.4rem 1.2rem; border-radius: 28px; background: linear-gradient(135deg, var(--uva-2), var(--uva)); border: 1px solid var(--linea); margin-top: 3rem; }
.llamado h3 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
.llamado .boton { margin-top: .8rem; }

/* ---------- programas ---------- */
.programa { display: grid; gap: 1.6rem; padding: 2.4rem 0; border-top: 1px solid var(--linea); margin-top: 2.4rem; }
.programa:first-of-type { margin-top: 2rem; }
.programa-texto p { max-width: 62ch; }
.programa-foto { position: relative; }
.tarjeta-color { padding: 2rem 1.3rem; border-radius: 28px; border: 1px solid var(--linea); }
.tarjeta-color.kids { background: linear-gradient(145deg, #3A1B5C, #5A2670 55%, #7A2F7E); }
.tarjeta-color.teens { background: linear-gradient(145deg, #1D1B4D, #2C2A78 55%, #3F2D8F); }
.lista li, .lista-emoji li { padding: .35rem 0 .35rem 1.4rem; position: relative; color: var(--texto); }
.lista li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--oro); }
.lista-emoji li { padding-left: 2.1rem; }
.lista-emoji li span { position: absolute; left: 0; top: .3rem; width: 1.6rem; text-align: center; }
.par { display: grid; gap: 0 2rem; }

/* ---------- disciplinas ---------- */
.disciplinas { display: grid; gap: 1rem; margin-top: 2rem; }
.disc { padding: 1.5rem 1.3rem; border-radius: var(--radio); background: rgba(247, 240, 230, .05); border: 1px solid var(--linea); }
.disc h3 { font-size: 1.6rem; color: var(--oro-fuerte); margin-bottom: .8rem; }
.disc p { color: var(--texto); font-size: 1rem; }
.disc p:last-child { margin-bottom: 0; color: var(--texto-2); }

/* ---------- quiénes somos ---------- */
.pilares .bloque { padding: 1.6rem 1.3rem; border-radius: var(--radio); background: rgba(18, 11, 26, .55); border: 1px solid var(--linea); }
.valores { display: grid; gap: .8rem; margin: 1.6rem 0 0; }
.valores div { padding: 1.1rem 1.2rem; border-left: 3px solid var(--magenta); background: rgba(247, 240, 230, .04); border-radius: 0 var(--radio) var(--radio) 0; }
.valores dt { font-family: var(--serif); font-size: 1.2rem; color: var(--marfil); margin-bottom: .2rem; }
.valores dd { margin: 0; color: var(--texto-2); font-size: 1rem; }

/* ---------- formulario ---------- */
.formulario { background: radial-gradient(120% 90% at 50% 0%, var(--uva) 0%, var(--noche) 70%); }
.forma { margin-top: 1.8rem; display: grid; gap: 1.1rem; }
.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .4rem; color: var(--marfil); padding: 0; }
.opcional { font-weight: 400; color: var(--texto-2); }
.campo input[type=text], .campo input[type=tel], .campo input[type=email], .campo input[type=number], .campo select {
  width: 100%; min-height: 52px; padding: .8rem 1rem; font: 1rem var(--sans); color: var(--marfil); background: rgba(247, 240, 230, .08);
  border: 1.5px solid rgba(247, 240, 230, .28); border-radius: 14px; appearance: none; -webkit-appearance: none; }
.campo select { background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.campo select option { color: #1A1026; background: #F7F0E6; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--oro-fuerte); box-shadow: 0 0 0 3px rgba(243, 207, 134, .28); }
.campo.malo input, .campo.malo select { border-color: #FF9AA8; }
.opciones { display: grid; gap: .6rem; }
.campo .opcion, .opcion { display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .6rem 1rem; border: 1.5px solid rgba(247, 240, 230, .28); border-radius: 14px; background: rgba(247, 240, 230, .06); cursor: pointer; font-weight: 600; margin: 0; }
.campo .opcion { margin: 0; font-size: 1rem; }
.opcion input { width: 20px; height: 20px; accent-color: var(--oro); margin: 0; }
.opcion:has(input:checked) { border-color: var(--oro-fuerte); background: rgba(232, 190, 110, .14); }
.error { color: #FFB3BD; font-size: .9rem; margin: .35rem 0 0; min-height: 0; }
.error:empty { display: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.estado { min-height: 1.4rem; margin: 0; font-weight: 600; }
.estado.malo { color: #FFB3BD; }
.aviso-corto { font-size: .88rem; color: var(--texto-2); margin: 0; }
.gracias { margin-top: 1.8rem; padding: 1.6rem 1.3rem; border-radius: var(--radio); background: rgba(232, 190, 110, .12); border: 1px solid var(--oro); }
.gracias[hidden] { display: none; }
.gracias h3 { color: var(--oro-fuerte); font-size: 1.8rem; }

/* ---------- pie ---------- */
.pie { padding: 2.4rem 0 3rem; border-top: 1px solid var(--linea); color: var(--texto-2); font-size: .95rem; }
.pie-fila { display: grid; gap: .4rem; }
.pie p { margin: 0; }
.marca-pie { font-family: var(--serif); font-size: 1.4rem; color: var(--marfil); }

/* ---------- aparición suave (solo con JS) ---------- */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .revela.visto { opacity: 1; transform: none; }

/* ---------- pantallas más grandes ---------- */
@media (min-width: 821px) {
  body { font-size: 18px; }
  .cab { padding: .8rem 2rem; }
  .menu { display: flex; gap: .2rem; }
  .boton-chico { min-height: 44px; padding: .55rem 1.2rem; font-size: .95rem; }
  .portada-texto { padding-bottom: 4rem; }
  .seccion { padding: 6rem 0; }
  .dos { grid-template-columns: 1fr 1fr; gap: 3.4rem; }
  .dos.inversa .foto { order: -1; }
  .programas-lista { grid-template-columns: repeat(2, 1fr); }
  .programa { grid-template-columns: 1.15fr .85fr; gap: 3.4rem; align-items: start; }
  .programa-foto { position: sticky; top: 100px; }
  .programa.tarjeta-color { grid-template-columns: 1fr; padding: 3rem 3rem; }
  .programa.tarjeta-color .programa-texto { columns: 2; column-gap: 3.4rem; }
  .programa.tarjeta-color .programa-texto > * { break-inside: avoid; }
  .programa.tarjeta-color .programa-texto > h4 { break-after: avoid; }
  .programa.tarjeta-color .programa-texto > p, .programa.tarjeta-color .programa-texto > ul { max-width: none; }
  .par { grid-template-columns: 1fr 1fr; }
  .disciplinas { grid-template-columns: repeat(3, 1fr); }
  .valores { grid-template-columns: repeat(2, 1fr); }
  .opciones { grid-template-columns: 1fr 1fr; }
  .pie-fila { grid-template-columns: auto 1fr auto; align-items: baseline; gap: 2rem; }
}
.forma[hidden] { display: none; }