/* ============================================================
   GESG — Páginas de área
   Se apoya en los tokens de nuevo.css, que se carga antes.
   Orden de la página: portada → el servicio y su cierre
   → cómo trabajamos → contacto → agenda con calendario.
   ============================================================ */

body.area { background: var(--ground); }

/* ============================================================
   1 · Portada
   ============================================================ */
.heroe {
  position: relative;
  z-index: 8;
  min-height: min(78vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px calc(var(--frame-inset) + 26px);
  overflow: hidden;
}
.marco-heroe {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 54px 52px 48px;
  text-align: center;
  border-radius: var(--panel-radius);
  background: rgba(230, 234, 239, 0.72);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 24px 70px rgba(31, 58, 80, .18);
}
.marco-heroe .rotulo {
  margin: 0 0 16px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.marco-heroe h1 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}
.marco-heroe .entrada-texto {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.marco-heroe .filete {
  width: 54px;
  height: 1px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--ink-3), transparent);
}

.etiqueta-pronto {
  display: inline-block;
  margin: 22px 0 0;
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--az-800);
  color: var(--az-050);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ============================================================
   Secciones
   ============================================================ */
.seccion {
  position: relative;
  z-index: 8;
  padding: 68px calc(var(--frame-inset) + 26px);
}
.seccion .interior { max-width: 980px; margin: 0 auto; }
.seccion .rotulo {
  margin: 0 0 12px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.seccion h2 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
}
.seccion .cuerpo {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-2);
}
.seccion .cuerpo p { margin: 0 0 16px; }
.seccion .cuerpo strong { color: var(--ink); font-weight: 600; }

/* --- lo que hacemos: rejilla de servicios --- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.ficha {
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  transition: transform .4s cubic-bezier(.16,.9,.2,1), border-color .4s, box-shadow .4s;
}
.ficha:hover {
  transform: translateY(-3px);
  border-color: var(--glass-line-hi);
  box-shadow: 0 18px 44px rgba(31, 58, 80, .16);
}
.ficha .num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.ficha h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ficha p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--ink-2);
}

/* ============================================================
   Galería de instalaciones
   ============================================================ */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.galeria figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  transition: transform .4s cubic-bezier(.16,.9,.2,1), border-color .4s, box-shadow .4s;
}
.galeria figure:hover {
  transform: translateY(-3px);
  border-color: var(--glass-line-hi);
  box-shadow: 0 18px 44px rgba(31, 58, 80, .18);
}
.galeria img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galeria figcaption {
  padding: 12px 16px 14px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* ============================================================
   Cifras
   ============================================================ */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.numero {
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
}
.numero .cifra {
  display: block;
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ink);
}
.numero h3 {
  margin: 0 0 8px;
  font-family: var(--ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.numero p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ============================================================
   El cierre: la pregunta
   ============================================================ */
.cierre {
  margin-top: 46px;
  padding: 44px 40px 40px;
  text-align: center;
  border-radius: var(--panel-radius);
  background: linear-gradient(160deg, rgba(230,234,239,.88) 0%, rgba(213,220,228,.82) 100%);
  border: 1px solid var(--glass-line-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  box-shadow: 0 22px 60px rgba(31, 58, 80, .16);
}
.cierre .pregunta {
  margin: 0 auto 10px;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
}
.cierre .apoyo {
  margin: 0 auto 26px;
  max-width: 50ch;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.cierre .respuestas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .28s, border-color .28s, color .28s, transform .28s, box-shadow .28s;
}
.boton svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.boton.solido {
  background: var(--az-800);
  border-color: var(--az-800);
  color: var(--az-050);
  box-shadow: 0 10px 26px rgba(31, 58, 80, .28);
}
.boton.solido:hover { background: var(--az-900); border-color: var(--az-900); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(31,58,80,.34); }
.boton.linea {
  background: transparent;
  border-color: var(--glass-line-hi);
  color: var(--ink);
}
.boton.linea:hover { background: var(--glass-hi); border-color: var(--ink); transform: translateY(-2px); }

/* la salida honesta para quien sí tiene una objeción */
.cierre .duda {
  margin: 22px 0 0;
  font-size: .86rem;
  color: var(--ink-3);
}
.cierre .duda a { color: var(--ink-2); text-underline-offset: 3px; }

/* ============================================================
   Cómo trabajamos
   ============================================================ */
.pasos { counter-reset: paso; margin-top: 34px; display: grid; gap: 2px; }
.paso {
  counter-increment: paso;
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px 24px 24px 22px;
  border-radius: 16px;
  transition: background .3s;
}
.paso:hover { background: var(--glass); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-3);
  letter-spacing: -.03em;
}
.paso h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.paso p { margin: 0; font-size: .95rem; line-height: 1.66; color: var(--ink-2); }

.filosofia {
  margin-top: 40px;
  padding: 34px 36px;
  border-left: 2px solid var(--ink-3);
  border-radius: 0 16px 16px 0;
  background: var(--glass);
}
.filosofia p {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.58;
  letter-spacing: -.015em;
  color: var(--ink);
}
.filosofia p:last-child { margin-bottom: 0; }

/* ============================================================
   Contacto
   ============================================================ */
.medios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.medio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px;
  border-radius: 18px;
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  transition: transform .35s cubic-bezier(.16,.9,.2,1), border-color .35s, box-shadow .35s;
}
.medio:hover { transform: translateY(-3px); border-color: var(--glass-line-hi); box-shadow: 0 16px 40px rgba(31,58,80,.16); }
.medio svg { width: 20px; height: 20px; stroke: var(--ink-3); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.medio .que { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.medio .dato { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.medio .nota { font-size: .84rem; color: var(--ink-2); }

/* ============================================================
   Agenda: calendario real
   ============================================================ */
.agenda .interior { max-width: 980px; }

.calendario {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 20px;
  margin-top: 34px;
  align-items: start;
}

.panel {
  padding: 24px 24px 26px;
  border-radius: var(--panel-radius);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
}

/* --- cabecera del mes --- */
.mes-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.mes-barra .mes {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  text-transform: capitalize;
}
.mes-barra button {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--glass-line);
  color: var(--ink);
  transition: background .25s, border-color .25s, opacity .25s;
}
.mes-barra button:hover:not(:disabled) { background: var(--glass-hi); border-color: var(--glass-line-hi); }
.mes-barra button:disabled { opacity: .3; cursor: not-allowed; }
.mes-barra button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- rejilla del mes --- */
.semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.semana span {
  text-align: center;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 0;
}
.dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.dia {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--ui);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.dia.vacio { visibility: hidden; cursor: default; }
.dia:disabled {
  color: var(--ink-3);
  opacity: .38;
  cursor: not-allowed;
}
.dia:not(:disabled):hover { background: var(--glass-hi); border-color: var(--glass-line); }
/* el puntito marca que ese día sí tiene horas libres */
.dia .punto-dia {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ink-3);
}
.dia.hoy { font-weight: 700; color: var(--ink); border-color: var(--glass-line-hi); }
.dia.elegido {
  background: var(--az-800);
  border-color: var(--az-800);
  color: var(--az-050);
  font-weight: 600;
}
.dia.elegido .punto-dia { background: var(--az-050); }

.leyenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: .76rem;
  color: var(--ink-3);
}
.leyenda i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); display: inline-block; }

/* --- horarios --- */
.horas-cab {
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.horas-sub { margin: 0 0 18px; font-size: .86rem; color: var(--ink-3); }
.horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.hora {
  padding: 12px 6px;
  border-radius: 10px;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--glass-line);
  transition: background .22s, border-color .22s, color .22s, transform .22s;
}
.hora:hover:not(:disabled) { background: var(--glass-hi); border-color: var(--glass-line-hi); transform: translateY(-1px); }
.hora:disabled {
  color: var(--ink-3);
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.hora.elegida { background: var(--az-800); border-color: var(--az-800); color: var(--az-050); }

.vacio-horas {
  padding: 34px 10px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* --- formulario --- */
.formulario { margin-top: 22px; display: grid; gap: 12px; }
.formulario .par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: grid; gap: 6px; }
.campo label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.campo input,
.campo select,
.campo textarea {
  font-family: var(--ui);
  font-size: .93rem;
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .5);
  transition: border-color .25s, background .25s;
}
.campo textarea { resize: vertical; min-height: 76px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--ink-3);
  background: rgba(255, 255, 255, .78);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-3); opacity: .72; }

/* Consentimiento para finalidades secundarias.
   Nunca marcada por defecto: un consentimiento premarcado no es
   consentimiento, y la LFPDPPP pide que la persona pueda negarse. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.casilla:hover { border-color: var(--glass-line-hi); background: rgba(255, 255, 255, .6); }
.casilla input {
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--az-800);
  cursor: pointer;
}
.casilla span {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.aviso-agenda {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.5;
}
.aviso-agenda[hidden] { display: none; }
.aviso-agenda.error { background: rgba(154, 60, 60, .12); border: 1px solid rgba(154, 60, 60, .3); color: #6E2B2B; }
.aviso-agenda.ok { background: rgba(52, 110, 78, .12); border: 1px solid rgba(52, 110, 78, .3); color: #23503A; }

.exito {
  padding: 34px 30px;
  text-align: center;
}
.exito h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
}
.exito p { margin: 0 0 8px; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.exito .cuando {
  margin: 16px auto 20px;
  display: inline-block;
  padding: 12px 22px;
  border-radius: 100px;
  background: var(--glass-hi);
  border: 1px solid var(--glass-line-hi);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

/* ============================================================
   Aparición al desplazar
   El estado de reposo vive aquí, pero solo se aplica cuando el JS
   marca el documento: si el script no corre, nada queda invisible.
   ============================================================ */
html.con-revelado [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
html.con-revelado [data-revelar].visible {
  opacity: 1;
  transform: none;
}

/* ---- Desplazamiento suave hacia las anclas ---- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.con-revelado [data-revelar] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 900px) {
  .calendario { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .heroe { min-height: auto; padding: 40px 20px; }
  .marco-heroe { padding: 34px 24px 30px; }
  .seccion { padding: 48px 20px; }
  .paso { grid-template-columns: 46px 1fr; gap: 14px; padding: 18px 14px; }
  .paso::before { font-size: 1.3rem; }
  .filosofia { padding: 24px 22px; }
  .cierre { padding: 32px 22px 30px; }
  .formulario .par { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr 1fr; gap: 10px; }
  .galeria figcaption { padding: 9px 12px 11px; font-size: .72rem; }
  .panel { padding: 20px 18px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha, .medio, .hora, .boton, .paso { transition: none; }
  .ficha:hover, .medio:hover, .boton:hover, .hora:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   Blog — la lista de artículos
   ============================================================
   A17. El panel guardaba en la base y no había dónde verlo. La tarjeta
   reusa .ficha, pero es un enlace entero: el área de clic es la tarjeta,
   no un «leer más» de dos palabras.
   ============================================================ */
.rejilla-blog {
  margin-top: 34px;
  /* auto-FILL, no auto-fit: con un solo articulo, auto-fit estira la tarjeta
     a los 980px del contenedor y queda una barra rarisima. auto-fill deja las
     columnas puestas y la tarjeta conserva su ancho. */
  grid-template-columns: repeat(auto-fill, minmax(282px, 1fr));
}

.ficha-post {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  padding-top: 0;
}
.ficha-post .num,
.ficha-post h3,
.ficha-post p,
.ficha-post .meta-post { margin-left: 0; }

.ficha-post .portada-post {
  display: block;
  width: calc(100% + 48px);
  margin: 0 -24px 20px;
  height: 156px;
  object-fit: cover;
  border-bottom: 1px solid var(--glass-line);
}
.ficha-post:not(:has(.portada-post)) { padding-top: 26px; }
.ficha-post .num { margin-top: 26px; }
.ficha-post .portada-post + .num { margin-top: 0; }

.ficha-post .meta-post {
  display: block;
  margin-top: 14px;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.ficha-post:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.ficha-post:focus-visible {
  outline: 2px solid var(--az-600);
  outline-offset: 3px;
}

/* ============================================================
   Campo trampa y aviso de las notas
   ============================================================ */

/* Fuera de la vista sin usar display:none — algunos bots saltan lo que está
   oculto con display, pero rellenan lo que solo está desplazado. Con
   aria-hidden y tabindex="-1" en el HTML, ni el lector de pantalla ni el
   tabulador llegan aquí. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Lo que NO hay que escribir en «Cuéntenos brevemente». Va discreto: es una
   advertencia, no un regaño. */
.pista-notas {
  margin: 8px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.pista-notas code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--glass-line);
}