/* ==========================================================================
   Proceso Pre Matrícula 2027 — Altares Home School
   Sistema de diseño alineado con altareshs.cl
   (paleta, tipografías, radios y botones tomados del sitio oficial)
   ========================================================================== */

:root{
  /* --- tomadas literalmente de altareshs.cl --- */
  --bg:#F9F8F8;
  --surface:#ffffff;
  --navy:#1A3246;
  --overlay-dark:#011627;
  --accent:#D94948;
  --accent-alt:#F07020;
  --accent-alt-hover:#D45E10;
  --utility-bar:#F99000;
  --text:rgba(1,22,39,.75);
  --text-dark:#1A3246;
  --border:#e5e2e2;
  --max-width:1320px;
  --font-heading:"Lexend",sans-serif;
  --font-body:"DM Sans",sans-serif;

  /* --- derivadas para los estados del formulario --- */
  --text-soft:rgba(1,22,39,.55);
  --ok:#1F7A4C;
  --ok-claro:#E8F4ED;
  --alerta:#B26A05;
  --alerta-claro:#FDF2DF;
  --bloqueo:#D94948;
  --bloqueo-claro:#FBEAEA;
  --accent-claro:#FBEAEA;

  --radio:6px;              /* el mismo de los botones del sitio */
  --radio-tarjeta:12px;
  --sombra:0 1px 2px rgba(1,22,39,.04), 0 12px 32px -18px rgba(1,22,39,.18);
  --sombra-alta:0 2px 4px rgba(1,22,39,.05), 0 20px 48px -20px rgba(1,22,39,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.2;
  color:var(--text-dark);
  margin:0;
}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:transparent}

/* El sitio no usa textura; se mantiene el nodo por compatibilidad. */
.grain{display:none}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.1rem,5vw,2.5rem);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.marca{
  display:inline-flex; align-items:center;
  text-decoration:none; line-height:0;
  transition:opacity .2s ease;
}
.marca:hover{opacity:.78}
.marca__logo{display:block; width:auto; height:clamp(36px,6vw,48px)}

.cabecera__anio{
  margin:0;
  font-family:var(--font-heading); font-weight:600;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft);
  white-space:nowrap;
}
.cabecera__anio strong{color:var(--accent)}

/* ---------- lienzo ---------- */
.lienzo{
  --ancho-lectura:860px;   /* portada, búsqueda, estado y confirmación */
  --ancho-form:1180px;     /* el formulario necesita más aire */
  max-width:var(--ancho-form);
  margin:0 auto;
  padding:clamp(2rem,6vw,4rem) 1.5rem 4rem;
  display:flex; flex-direction:column; gap:1.75rem;
}

/* Todo se mantiene en el ancho de lectura salvo el formulario, que se
   despliega completo para que los campos queden bien proporcionados. */
.lienzo > .portada,
.lienzo > .info,
.lienzo > .tarjeta--busqueda,
.lienzo > .estado,
.lienzo > .tarjeta--exito{
  width:100%;
  max-width:var(--ancho-lectura);
  margin-inline:auto;
}
.tarjeta--form{width:100%}

/* ---------- portada ---------- */
.portada{margin-bottom:.25rem}
.kicker{
  display:block; margin:0 0 .5rem;
  font-family:var(--font-heading); font-weight:600; font-size:1.05rem;
  color:var(--accent);
}
.portada h1{
  margin:0 0 1rem;
  font-size:clamp(1.9rem,5vw,2.9rem);
  letter-spacing:-.015em;
}
.portada h1 em{font-style:normal; color:var(--accent-alt)}
.bajada{margin:0; max-width:56ch; font-size:1.02rem; color:var(--text)}

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra);
  padding:clamp(1.4rem,4vw,2.25rem);
}

.paso{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1.1rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--border);
  font-family:var(--font-heading); font-weight:600;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-soft);
}
.paso span{
  display:grid; place-items:center;
  min-width:26px; height:26px; padding:0 .45rem;
  background:var(--accent); color:#fff;
  border-radius:var(--radio);
  font-size:.75rem; letter-spacing:.02em;
}

.tarjeta h2{font-size:1.5rem; margin:0 0 .4rem}

/* La búsqueda es la puerta de entrada: se destaca sobre el resto. */
.tarjeta--busqueda{box-shadow:var(--sombra-alta)}
.tarjeta--form{
  scroll-margin-top:6rem;
  /* al ser la tarjeta más ancha, necesita más respiro interno */
  padding:clamp(1.4rem,3.5vw,3rem);
}

.ayuda{margin:0 0 1.35rem; color:var(--text); font-size:.94rem}
.ayuda--prefill{
  background:var(--alerta-claro);
  border-left:3px solid var(--utility-bar);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:.8rem 1rem;
  color:var(--text-dark);
}
.ayuda--prefill strong{color:var(--text-dark)}

/* ---------- búsqueda ---------- */
.fila-busqueda{display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap}
.campo--rut{flex:1 1 240px}

/* ---------- campos ---------- */
.campo{display:flex; flex-direction:column; gap:.4rem; min-width:0}
/* La etiqueta y la nota crecen hacia arriba; el control queda abajo, de modo
   que todos los inputs de una misma fila arrancan a la misma altura. */
.campo > label{margin-bottom:auto}
.campo > .nota{margin-top:.1rem; margin-bottom:0}
.campo > input,
.campo > select,
.campo > textarea{margin-top:.4rem}
/* La sugerencia cuelga del control sin empujar la fila. */
.campo > .sugerencia{margin-top:.35rem; margin-bottom:0}
.campo label{
  font-family:var(--font-heading); font-weight:600;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-soft);
}
.campo label b{color:var(--accent); font-weight:600}

.campo input,
.campo select{
  width:100%;
  padding:.8rem .9rem;
  font-family:var(--font-body); font-size:.97rem;
  color:var(--text-dark);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radio);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231A3246' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  padding-right:2.4rem;
  cursor:pointer;
}
.campo input:focus,
.campo select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(217,73,72,.15);
}
.campo input[readonly]{
  background:var(--bg);
  color:var(--text-soft);
  cursor:not-allowed;
}
.campo input.invalido,
.campo select.invalido{
  border-color:var(--accent);
  background:var(--accent-claro);
}
.campo input::placeholder{color:rgba(1,22,39,.35)}

.nota{
  margin:0 0 .15rem;
  font-size:.83rem; line-height:1.5;
  color:var(--text-soft);
}
.nota strong{color:var(--text-dark)}
.sugerencia{
  margin:.1rem 0 0;
  font-size:.82rem; line-height:1.4;
  color:var(--accent-alt-hover);
}
/* La sugerencia cuelga del select sin descuadrar la fila siguiente. */
.par > .campo{position:relative}
.par > .campo > .sugerencia{
  position:absolute; top:100%; left:0; right:0;
  margin:.35rem 0 0;
}

/* ---------- grilla del formulario ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.25rem;
  align-items:stretch;
}
.campo--ancho,
.campo--total,
.campo--mitad{grid-column:span 2}

/* Par de campos enfrentados (curso+modalidad, iglesia+indique):
   ocupa la fila completa y se reparte internamente en dos mitades. */
.par{
  grid-column:span 2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.25rem;
  align-items:stretch;
  margin-bottom:1.35rem; /* deja aire para la sugerencia flotante */
}

/* Tablet: 720-959px. Los textos largos y las mitades bajan a una columna. */
@media(min-width:720px) and (max-width:959px){
  .campo--ancho{grid-column:span 1}
  .campo--mitad{grid-column:span 1}
}

/* Escritorio ancho: 3 columnas.
   Los selects cortos (hermanos, región, año) dejan de estirarse de lado a
   lado, y los campos de texto largo conservan el espacio que necesitan. */
@media(min-width:960px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* nombres, correo y dirección: texto largo, ocupan dos columnas */
  .campo--ancho{grid-column:span 2}

  /* hermanos, región y año son selects: una columna basta */
  .campo--total{grid-column:span 1}

  /* el par toma la fila completa de tres columnas */
  .par{grid-column:span 3}
}

/* Móvil: todo en una sola columna, el par incluido. */
@media(max-width:719px){
  .grid{grid-template-columns:1fr}
  .campo,.campo--ancho,.campo--total,.campo--mitad{grid-column:span 1}
  .par{grid-template-columns:1fr; margin-bottom:0}
  /* Apilados ya no hay nada que alinear: la sugerencia vuelve al flujo. */
  .par > .campo > .sugerencia{position:static; margin:.35rem 0 0}
  .par > .campo > .nota{margin-bottom:.1rem}
}

/* Dentro del par cada campo ocupa una de sus dos columnas, sin importar
   qué modificador traiga. Va al final para ganar la cascada. */
.par > .campo{grid-column:auto; align-self:stretch}
/* Si el compañero está oculto (Indique Iglesia), el visible no se estira. */
.par > .campo[hidden]{display:none}
/* Las notas de distinto largo (curso vs. modalidad) dejarían los selects a
   distinta altura: la nota absorbe la diferencia y el control baja al fondo. */
.par > .campo > .nota{margin-bottom:auto}

/* ---------- botones (idénticos al sitio) ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.75rem;
  border-radius:var(--radio);
  font-family:var(--font-body); font-size:.95rem; font-weight:500;
  transition:background-color .18s ease, color .18s ease,
             transform .12s ease, box-shadow .18s ease;
}
.btn--primario{
  background:var(--accent); color:#fff;
  box-shadow:0 6px 18px -10px rgba(217,73,72,.9);
}
.btn--primario:hover{background:#C43F3E}
.btn--primario:active{transform:translateY(1px)}

.btn--fantasma{
  background:transparent; color:var(--text-dark);
  border:1px solid var(--border);
}
.btn--fantasma:hover{background:var(--bg); border-color:var(--text-soft)}

.btn:disabled{cursor:not-allowed; opacity:.75}
.btn__spinner{display:none}
.btn.cargando .btn__label{visibility:hidden}
.btn.cargando .btn__spinner{
  display:block; position:absolute;
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:girar .6s linear infinite;
}
.btn--fantasma.cargando .btn__spinner{
  border-color:rgba(1,22,39,.2); border-top-color:var(--text-dark);
}
@keyframes girar{to{transform:rotate(360deg)}}

.acciones{
  display:flex; justify-content:flex-end; gap:.75rem;
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
@media(max-width:520px){
  .acciones{flex-direction:column-reverse}
  .acciones .btn{width:100%}
}

/* ---------- alertas ---------- */
.alerta{
  margin:1rem 0 0;
  padding:.8rem 1rem;
  border-radius:var(--radio);
  font-size:.9rem;
}
.alerta--error{
  background:var(--bloqueo-claro);
  border-left:3px solid var(--bloqueo);
  color:#8E2C2B;
}

/* ---------- estado financiero ---------- */
.estado{
  border-radius:var(--radio-tarjeta);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--sombra);
  overflow:hidden;
}
.estado__cinta{
  display:flex; align-items:center; gap:.9rem;
  padding:1.1rem 1.3rem;
  border-left:4px solid var(--border);
}
.estado__icono{font-size:1.35rem; line-height:1}
.estado__texto{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.estado__texto strong{
  font-family:var(--font-heading); font-weight:600;
  font-size:1.02rem; color:var(--text-dark);
}
.estado__texto span{font-size:.88rem; color:var(--text-soft)}

.estado--ok .estado__cinta{border-left-color:var(--ok); background:var(--ok-claro)}
.estado--ok .estado__texto strong{color:var(--ok)}

.estado--alerta .estado__cinta{border-left-color:var(--utility-bar); background:var(--alerta-claro)}
.estado--alerta .estado__texto strong{color:var(--alerta)}

.estado--bloqueado .estado__cinta{border-left-color:var(--bloqueo); background:var(--bloqueo-claro)}
.estado--bloqueado .estado__texto strong{color:var(--bloqueo)}

.estado__nota{
  margin:0;
  padding:.9rem 1.3rem;
  border-top:1px solid var(--border);
  font-size:.9rem; color:var(--text);
  background:var(--surface);
}

/* Aviso de "ya enviada": el alumno está al día pero no debe volver a enviar,
   así que se destaca sobre la nota corriente sin parecer un error. */
.estado__nota--registrada{
  background:var(--ok-claro);
  border-top-color:rgba(0,0,0,.06);
}
.estado__nota--registrada strong{
  display:block; margin-bottom:.2rem;
  color:var(--ok); font-size:.95rem;
}

/* ---------- confirmación ---------- */
.tarjeta--exito{text-align:center}
.tic{
  width:58px; height:58px; margin:0 auto 1.2rem;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ok-claro); color:var(--ok);
  font-size:1.6rem; font-weight:700;
  animation:aparecer .45s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes aparecer{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.tarjeta--exito h2{margin-bottom:.7rem}
.tarjeta--exito p{margin:0 auto .6rem; max-width:48ch}
.tarjeta--exito strong{color:var(--text-dark)}
.tarjeta--exito .btn{margin-top:1.4rem}

/* ---------- pie ---------- */
.pie{
  border-top:1px solid var(--border);
  background:var(--surface);
  padding:1.6rem clamp(1.1rem,5vw,2.5rem);
  font-size:.85rem; color:var(--text-soft);
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.pie p{margin:0}
.pie__marca{display:flex; align-items:center; gap:.7rem}
.pie__logo{display:block; width:auto; height:26px; opacity:.6}
/* La regla global quita el subrayado a los enlaces: aquí hay que devolverles
   el color de marca para que se note que son clicables. */
/* Dos líneas de contacto: alineadas a la derecha para no chocar con el logo,
   y a la izquierda cuando el pie se apila en móvil. */
.pie__contacto{text-align:right; line-height:1.9}
@media(max-width:719px){ .pie__contacto{text-align:left} }
.pie__contacto a{
  color:var(--accent);
  font-weight:500;
  border-bottom:1px solid rgba(217,73,72,.35);
  transition:border-color .15s ease;
}
.pie__contacto a:hover{border-bottom-color:var(--accent)}
.pie__contacto a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- animaciones ---------- */
[hidden]{display:none !important}
.aparece{animation:subir .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- aviso de plazo (portada) ---------- */
.plazo{
  margin-top:1.25rem; padding:.9rem 1.15rem;
  background:#FFF6E8; border:1px solid #F5D9A8;
  border-left:4px solid var(--utility-bar);
  border-radius:var(--radio);
  font-size:.93rem; line-height:1.6; color:var(--text-dark);
}
/* Rótulo en versalitas, en vez de un emoji. */
.plazo__rotulo{
  display:inline-block; margin-right:.5rem;
  font-family:var(--font-heading); font-weight:700;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-alt-hover);
}

/* ---------- panel informativo plegable ---------- */
.info{
  border:1px solid var(--border);
  border-radius:var(--radio-tarjeta);
  background:#FCFBFB;
  overflow:hidden;
}
.info__titulo{
  cursor:pointer; list-style:none;
  padding:1rem 1.25rem;
  font-family:var(--font-heading); font-weight:600;
  color:var(--text-dark);
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  border-bottom:1px solid transparent;
  transition:background .15s ease;
}
.info[open] .info__titulo{border-bottom-color:var(--border)}
.info__titulo::-webkit-details-marker{display:none}
.info__titulo::before{
  content:"›"; display:inline-block;
  font-size:1.35rem; line-height:1; color:var(--accent-alt);
  transition:transform .2s ease;
}
.info[open] .info__titulo::before{transform:rotate(90deg)}
.info__titulo:hover{background:#F6F4F4}
.info__titulo:focus-visible{outline:2px solid var(--accent-alt); outline-offset:-2px}
.info__pista{
  font-family:var(--font-body); font-weight:400;
  font-size:.85rem; color:var(--text);
}

.info__cuerpo{
  padding:0 1.25rem 1.35rem;
  font-size:.93rem; line-height:1.6;
}
.info__cuerpo h4{
  font-family:var(--font-heading); font-size:.8rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-alt-hover);
  margin:1.4rem 0 .55rem; padding-left:.65rem;
  border-left:3px solid var(--utility-bar);
}
.info__cuerpo > h4:first-of-type{margin-top:1.1rem}
.info__cuerpo p{margin:0 0 .6rem}
.info__cuerpo ul{margin:0; padding-left:1.15rem}
.info__cuerpo li{margin-bottom:.3rem}

.info__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}
.info__bloque h4{margin-top:.4rem}
@media(min-width:720px){
  .info__grid{gap:1.75rem}
  .info__bloque + .info__bloque{
    padding-left:1.75rem; border-left:1px solid var(--border);
  }
}
@media(max-width:719px){ .info__grid{grid-template-columns:1fr} }

.info__nota{
  margin:1rem 0 0; padding:.7rem .9rem;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radio); font-size:.89rem;
}
.info__valores{list-style:none; padding:0; margin:0}
.info__valores li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  padding:.5rem 0; border-bottom:1px dashed var(--border);
}
.info__valores li:last-child{border-bottom:0}
.info__valores span{min-width:9rem; color:var(--text)}
.info__valores strong{color:var(--text-dark); font-size:1.02rem}
.info__valores em{font-style:normal; font-size:.85rem; color:var(--text)}

/* ---------- recordatorio en la confirmación ---------- */
.recordatorio{
  margin:1.5rem auto 0; max-width:52ch;
  padding:1rem 1.15rem; text-align:left;
  background:#FFF6E8; border:1px solid #F5D9A8;
  border-radius:var(--radio);
  font-size:.9rem; line-height:1.55;
}
.recordatorio p{margin:0 0 .5rem}
.recordatorio p:last-child{margin-bottom:0}
.recordatorio__valores{
  padding-top:.5rem; border-top:1px dashed #E6C68C;
  color:var(--text-dark);
}

/* ---------- ejemplo de formato (RUT) ---------- */
.ejemplo{
  display:inline-block;
  padding:.1rem .45rem;
  background:#F3F1F1; border:1px solid var(--border);
  border-radius:4px;
  font-family:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size:.92em; letter-spacing:.02em;
  color:var(--text-dark); white-space:nowrap;
}