/* estilos.css — web corporativa de gesaldia (22-oct-2026).
   Convertido del diseño de Claude Design (web-corporativa-diseno.dc.html):
   los estilos en línea pasan a clases para que la CSP no necesite
   'unsafe-inline'. Mismo aspecto a 1440 px; por debajo de 860 px la cabecera
   pliega el menú. */

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/lexend-500.woff2') format('woff2');
}

:root {
  --turquesa: #1995ad;
  --turquesa-oscuro: #147a8e;
  --turquesa-claro: #a1d6e2;
  --turquesa-niebla: #e8f4f7;
  --tinta: #1a2b35;
  --texto: #2c3b44;
  --texto-suave: #4f6470;
  --gris-fondo: #f0f2f3;
  --gris-borde: #e3e6e7;
  --gris-campo: #d7dbde;
  --noche: #1a2b35;
  --noche-tarjeta: #24394a;
  --noche-texto: #d7e6eb;
  --pie: #142229;
  --pie-texto: #c4d2d8;
  --sombra-tarjeta: 0 1px 3px rgba(20,40,46,.05), 0 8px 24px rgba(20,40,46,.06);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: var(--tinta);
  overflow-wrap: break-word;
}
a { color: var(--turquesa-oscuro); }
a:hover { color: var(--tinta); }
svg { flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.salto {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 10px; background: var(--tinta); color: #fff;
}
.salto:focus { top: 12px; color: #fff; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 88px 24px; }
.contenedor.estrecho { max-width: 860px; }

/* ---------- Logotipo ---------- */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-texto {
  font-family: 'Lexend', Verdana, Geneva, sans-serif;
  font-size: 23px; font-weight: 500; line-height: 1;
  color: #3f4b53; letter-spacing: -0.02em;
}
.logo-ia {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.19em; font-weight: 700; letter-spacing: -0.06em;
  color: var(--turquesa);
}

/* ---------- Cabecera ---------- */
.cabecera { background: #ffffff; border-bottom: 1px solid var(--gris-borde); }
.cabecera-in {
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; font-size: 14px; }
.menu a { color: var(--texto); text-decoration: none; }
.menu a:hover { color: var(--turquesa-oscuro); }
.menu .boton-cabecera,
.menu .boton-cabecera:hover {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 14px; background: var(--turquesa); color: #ffffff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(25,149,173,.25);
}
.menu-boton {
  display: none;
  align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--gris-campo); border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 14px; color: var(--texto); cursor: pointer;
}

/* ---------- Botones y formularios ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px;
  background: var(--turquesa); color: #ffffff;
  font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 3px rgba(25,149,173,.25);
}
.boton:hover { background: var(--turquesa-oscuro); color: #ffffff; }
.boton[disabled] { opacity: .6; cursor: default; }
.boton-secundario {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; border: 1.5px solid var(--turquesa); background: #ffffff;
  color: var(--turquesa-oscuro); font-size: 15px; font-weight: 700; text-decoration: none;
}
.boton-secundario:hover { background: var(--turquesa-niebla); color: var(--turquesa-oscuro); }

.form-email { display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; margin-top: 6px; }
.campo { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--texto-suave); }
.entrada {
  width: 100%; height: 48px; border: 1px solid var(--gris-campo); border-radius: 12px;
  padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--tinta); background: #ffffff;
}
.form-email .boton { align-self: flex-end; }
.consentimiento {
  flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--texto-suave);
}
.consentimiento input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--turquesa); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mensaje-form { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.5; }
.mensaje-form:empty { display: none; }
.nota { margin: 0; font-size: 13px; color: var(--texto-suave); }

/* ---------- Portada ---------- */
.hero { background: linear-gradient(180deg, #ffffff 0%, var(--turquesa-niebla) 100%); }
.hero-in {
  max-width: 1200px; margin: 0 auto; padding: 72px 24px 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
}
.hero-texto { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.antetitulo {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--turquesa-oscuro); text-transform: uppercase;
}
.hero-titulo {
  margin: 0; font-size: clamp(36px, 4.6vw, 50px); line-height: 1.08; font-weight: 400;
  letter-spacing: -1px; color: var(--tinta); text-align: center;
}
.hero-sub { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 700; color: var(--turquesa-oscuro); }
.ventajas { display: flex; flex-wrap: wrap; gap: 14px; max-width: 600px; }
.ventaja {
  flex: 1 1 260px; display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border-radius: 16px; background: #ffffff; box-shadow: var(--sombra-tarjeta);
}
.ventaja-icono {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--turquesa);
  display: flex; align-items: center; justify-content: center;
}
.ventaja-icono.redondo { border-radius: 9999px; }
.ventaja-texto { display: flex; flex-direction: column; gap: 4px; }
.ventaja h2 { margin: 0; font-size: 16px; color: var(--tinta); }
.ventaja p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto); }

/* Maqueta de la pantalla de factura */
.maqueta { flex: 1 1 480px; min-width: 0; position: relative; }
.mq-ventana {
  background: #ffffff; border-radius: 20px; overflow: hidden; font-size: 12px;
  box-shadow: 0 8px 32px rgba(20,40,46,.16), 0 2px 8px rgba(20,40,46,.08);
}
.mq-barra { height: 34px; background: #bcbabe; display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.mq-cuadro { width: 18px; height: 18px; border-radius: 5px; background: var(--turquesa); }
.mq-barra .logo-texto { font-size: 14px; color: #ffffff; }
.mq-cuerpo { background: var(--gris-fondo); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mq-fila { display: flex; justify-content: space-between; gap: 12px; }
.mq-fila.centrada { align-items: center; }
.mq-titulo { font-size: 15px; font-weight: 700; }
.mq-emitir { padding: 6px 12px; border-radius: 10px; background: var(--turquesa); color: #fff; font-weight: 700; }
.mq-tarjeta { background: #ffffff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mq-tarjeta.lineas { padding: 4px 12px; gap: 0; }
.mq-tarjeta.resumen { gap: 6px; }
.mq-etiqueta { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--texto-suave); }
.mq-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mq-verificado {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px;
  background: #e6f7f0; color: #1d6b48; font-size: 10.5px;
}
.mq-linea { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gris-fondo); }
.mq-linea:last-child { border-bottom: 0; }
.mq-linea.cabeza { color: var(--texto-suave); font-size: 10px; letter-spacing: 0.05em; font-weight: 700; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-total { align-items: baseline; padding-top: 6px; border-top: 1px solid var(--gris-fondo); }
.mq-total-importe { font-size: 20px; font-weight: 700; color: var(--turquesa-oscuro); }
.mq-chat {
  margin: -28px 0 0 auto; width: 78%; max-width: 360px; position: relative;
  background: #ffffff; border-radius: 16px; box-shadow: 0 8px 32px rgba(20,40,46,.18);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.5;
}
.mq-pregunta {
  align-self: flex-end; max-width: 88%; background: var(--turquesa-niebla);
  padding: 8px 12px; border-radius: 14px 14px 4px 14px;
}
.mq-respuesta { display: flex; gap: 8px; align-items: flex-start; }
.mq-avatar {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--turquesa);
  display: flex; align-items: center; justify-content: center;
}
.mq-boton-fila { display: flex; justify-content: flex-end; margin-top: -22px; padding-right: 18px; position: relative; }
.mq-boton-chat {
  width: 48px; height: 48px; border-radius: 9999px; background: var(--turquesa);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(20,40,46,.22);
}

/* Secciones */
.banda-clara { background: var(--turquesa-claro); }
.banda-blanca { background: #ffffff; }
.banda-gris { background: var(--gris-fondo); }
.banda-oscura { background: var(--noche); color: #f4f6f7; }
.dos-col { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.columna { display: flex; flex-direction: column; gap: 40px; }
.columna.media { gap: 36px; }
.cabeza-seccion { display: flex; flex-direction: column; gap: 14px; }
.col-texto { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.titulo-seccion { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; font-weight: 700; }
.texto-grande { margin: 0; font-size: 18px; line-height: 1.6; color: var(--texto); }
.texto-medio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto); }
.banda-clara .antetitulo,
.banda-clara .titulo-seccion { color: var(--texto); }
.lista-check {
  margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;
  font-size: 15.5px; color: var(--tinta);
}
.lista-check li { display: flex; gap: 10px; align-items: center; }

/* Calendario de muestra */
.col-calendario { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.calendario {
  width: 100%; max-width: 380px; background: #ffffff; border-radius: 20px; box-shadow: var(--sombra-tarjeta);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.cal-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cal-cabeza strong { font-weight: 700; }
.cal-cabeza span { font-size: 12px; color: var(--texto-suave); }
.cal-dias {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  font-size: 12px; text-align: center; color: var(--texto-suave);
}
.cal-dia { padding: 8px 0; border-radius: 8px; background: var(--gris-fondo); }
.cal-dia.elegido { background: var(--turquesa); color: #ffffff; font-weight: 700; }
.cal-horas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.cal-hora { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--gris-borde); }
.cal-hora.elegida { border: 1.5px solid var(--turquesa); color: var(--turquesa-oscuro); font-weight: 700; }

/* Tarjetas */
.rejilla { display: flex; flex-wrap: wrap; gap: 20px; }
.tarjeta {
  flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; padding: 26px;
  border-radius: 20px; background: var(--gris-fondo);
}
.tarjeta h3 { margin: 0; font-size: 18px; }
.tarjeta p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--texto); }
.destacado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding: 32px;
  border-radius: 20px; background: var(--turquesa-niebla);
}
.destacado-texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.destacado h3 { margin: 0; font-size: 20px; }
.destacado p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto); }

.banda-oscura .antetitulo { color: var(--turquesa-claro); }
.banda-oscura .titulo-seccion { color: #ffffff; }
.banda-oscura .texto-grande { color: var(--noche-texto); }
.tarjeta-oscura {
  flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; padding: 30px;
  border-radius: 20px; background: var(--noche-tarjeta);
}
.tarjeta-oscura h3 { margin: 0; font-size: 20px; color: #ffffff; }
.tarjeta-oscura p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--noche-texto); }

/* Precios */
.sellos { display: flex; flex-wrap: wrap; gap: 16px; }
.sello {
  flex: 1 1 320px; display: flex; align-items: center; gap: 16px; padding: 22px 26px;
  border-radius: 20px; color: #ffffff;
}
.sello.turquesa { background: var(--turquesa); }
.sello.oscuro { background: var(--noche); }
.sello-texto { display: flex; flex-direction: column; gap: 4px; }
.sello-titulo { margin: 0; font-size: 20px; font-weight: 700; }
.sello-sub { margin: 0; font-size: 15px; }
.sello.turquesa .sello-sub { font-weight: 600; }
.sello.oscuro .sello-sub { color: var(--noche-texto); }
.planes { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.plan {
  flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; padding: 32px;
  border-radius: 20px; background: var(--gris-fondo);
}
.plan.principal { background: #ffffff; border: 2px solid var(--turquesa); box-shadow: var(--sombra-tarjeta); }
.plan-nivel { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--texto-suave); }
.plan h3 { margin: 0; font-size: 24px; }
.precio { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--turquesa-oscuro); }
.precio span { font-size: 18px; font-weight: 400; color: var(--texto-suave); }
.insignia { align-self: flex-start; padding: 4px 10px; border-radius: 6px; font-size: 12px; }
.insignia.lanzamiento { background: var(--turquesa-claro); font-weight: 700; color: var(--tinta); }
.insignia.pronto { background: #ffffff; border: 1px solid var(--gris-campo); color: var(--texto); }
.plan ul {
  margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
  font-size: 14.5px; line-height: 1.5; color: var(--texto);
}
.nota-precios { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto); }
.aviso-prueba {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 28px;
  border-radius: 20px; border: 1px solid var(--gris-borde); background: var(--gris-fondo);
}
.aviso-prueba p { margin: 0; flex: 1 1 400px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--texto); }
.aviso-prueba strong { color: var(--tinta); }

/* Quiénes somos */
.foto-hueco {
  flex: 0 0 220px; height: 220px; border-radius: 9999px; background: var(--gris-fondo);
  border: 2px dashed #bcbabe; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--texto-suave); text-align: center;
}
.texto-grande strong { color: var(--tinta); }

/* Preguntas frecuentes */
.faq-col { gap: 28px; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--gris-campo); }
.faq details { border-bottom: 1px solid var(--gris-campo); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-size: 17px; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] .faq-flecha { transform: rotate(180deg); }
.faq p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--texto); }

/* Llamada final */
.final { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.final h2 { margin: 0; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; font-weight: 700; color: #ffffff; }
.final > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--noche-texto); }
.form-final { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 560px; }
.form-final .campo { flex: 1 1 260px; }
.form-final .entrada { border: 0; }
.form-final .consentimiento { justify-content: center; color: var(--noche-texto); text-align: left; }
.form-final .consentimiento a { color: var(--turquesa-claro); }
.form-final .mensaje-form { color: #ffffff; }

/* ---------- Pie ---------- */
.pie { background: var(--pie); color: var(--pie-texto); }
.pie-in {
  max-width: 1200px; margin: 0 auto; padding: 36px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 13px;
}
.pie-marca { display: flex; align-items: center; gap: 12px; }
.pie-marca a { color: var(--turquesa-claro); }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-legal a { color: var(--pie-texto); }
.pie-legal a:hover { color: #ffffff; }

/* ---------- Páginas de texto (legales, 404) ---------- */
.texto-legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; line-height: 1.65; color: var(--texto); }
.texto-legal h1 { margin: 0 0 8px; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; color: var(--tinta); }
.texto-legal .actualizado { margin: 0 0 32px; font-size: 13px; color: var(--texto-suave); }
.texto-legal h2 { margin: 40px 0 12px; font-size: 22px; line-height: 1.3; color: var(--tinta); }
.texto-legal h3 { margin: 28px 0 8px; font-size: 17px; color: var(--tinta); }
.texto-legal p, .texto-legal li { font-size: 15.5px; }
.texto-legal ul { padding-left: 22px; }
.texto-legal strong { color: var(--tinta); }
.tabla-desliza { overflow-x: auto; margin: 16px 0; }
.texto-legal table { border-collapse: collapse; width: 100%; font-size: 14px; }
.texto-legal th, .texto-legal td { border: 1px solid var(--gris-borde); padding: 10px 12px; text-align: left; vertical-align: top; }
.texto-legal th { background: var(--gris-fondo); color: var(--tinta); }
.texto-legal hr { border: 0; border-top: 1px solid var(--gris-borde); margin: 40px 0; }

.pagina-simple {
  max-width: 640px; margin: 0 auto; padding: 96px 24px 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.pagina-simple h1 { margin: 0; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
.pagina-simple p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto); }

/* ---------- Demo y páginas de enlace ---------- */
[hidden] { display: none !important; }
.pagina-demo { background: linear-gradient(180deg, #ffffff 0%, var(--turquesa-niebla) 100%); }
.contenedor-demo {
  max-width: 760px; margin: 0 auto; padding: 64px 24px 96px;
  display: flex; flex-direction: column; gap: 20px;
}
.subtitulo { margin: 12px 0 0; font-size: 20px; color: var(--tinta); }
.aviso-sistema {
  margin: 0; padding: 14px 18px; border-radius: 14px; background: #ffffff;
  font-size: 15px; line-height: 1.5; color: var(--texto); box-shadow: var(--sombra-tarjeta);
}
.aviso-sistema.error { color: #8a2a1f; background: #fdf1ef; box-shadow: none; }
.lista-franjas { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.franja {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
  padding: 16px 20px; border: 1px solid var(--gris-borde); border-radius: 16px; background: #ffffff;
  font-family: inherit; text-align: left; color: var(--tinta); cursor: pointer; box-shadow: var(--sombra-tarjeta);
}
.franja:hover { border-color: var(--turquesa); }
.franja-cuando { font-size: 16px; font-weight: 700; }
.franja-detalle { font-size: 14px; color: var(--turquesa-oscuro); }
.form-reserva {
  display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px;
  background: #ffffff; box-shadow: var(--sombra-tarjeta);
}
.form-reserva .subtitulo { margin: 0; }
.form-reserva .campo { flex: 0 0 auto; }
.franja-elegida { margin: 0; font-size: 15px; font-weight: 700; color: var(--turquesa-oscuro); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.boton-texto {
  border: 0; background: none; padding: 8px 0; font-family: inherit; font-size: 14px;
  color: var(--turquesa-oscuro); text-decoration: underline; cursor: pointer;
}
.resultado,
.pagina-simple .resultado {
  margin: 0; padding: 16px 20px; border-radius: 16px; background: #e6f7f0; color: #1d6b48;
  font-size: 16px; line-height: 1.55;
}
.resultado.error,
.pagina-simple .resultado.error { background: #fdf1ef; color: #8a2a1f; }
.mensaje-form.error { color: #8a2a1f; }
.form-final .mensaje-form.error { color: #ffb4a8; }
.texto-token { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto); }

/* ---------- Pantalla de Juan (/admin) ---------- */
.admin { background: var(--gris-fondo); }
.admin-in { max-width: 1100px; margin: 0 auto; padding: 40px 24px 88px; display: flex; flex-direction: column; gap: 24px; }
.admin .titulo-seccion { font-size: clamp(26px, 3vw, 34px); }
.admin-bloque {
  display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px;
  background: #ffffff; box-shadow: var(--sombra-tarjeta);
}
.admin-bloque .subtitulo { margin: 0; }
.admin-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.form-franja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.form-franja .ancho { grid-column: 1 / -1; }
.aviso-demanda {
  padding: 16px 20px; border-radius: 16px; background: #fff4d6; border: 1px solid #f0c75e; color: #5c4300;
  font-size: 15px; line-height: 1.5;
}
.aviso-demanda ul { margin: 6px 0 0; padding-left: 20px; }
.admin-franjas { display: flex; flex-direction: column; gap: 14px; }
.admin-grupo { margin: 4px 0 0; font-size: 15px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-franja { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--gris-borde); border-radius: 14px; }
.admin-franja.apagada { background: var(--gris-fondo); }
.admin-franja .nota, .enlace-meet { margin: 0; }
.enlace-meet a { word-break: break-all; }
.admin-pasadas > summary { cursor: pointer; padding: 8px 0; font-weight: 700; color: var(--texto); }
.admin-pasadas[open] > summary { margin-bottom: 10px; }
.admin-pasadas .admin-franja + .admin-franja { margin-top: 10px; }
.etiqueta-estado { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.etiqueta-estado.cancelada { background: #fdf1ef; color: #8a2a1f; }
.etiqueta-estado.pasada { background: var(--gris-borde); color: var(--texto); }
.etiqueta-estado.llena { background: #fff4d6; color: #5c4300; }
.boton-texto.peligro { color: #8a2a1f; }
.tabla-admin { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabla-admin th, .tabla-admin td { padding: 8px 10px; border-bottom: 1px solid var(--gris-borde); text-align: left; vertical-align: top; }
.tabla-admin th { font-size: 12px; letter-spacing: 0.04em; color: var(--texto-suave); }
.tabla-admin td .boton-texto { padding: 0; }
@media (max-width: 760px) {
  .form-franja { grid-template-columns: 1fr 1fr; }
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .js .menu-boton { display: inline-flex; }
  .js .menu { display: none; }
  .js .menu.abierto {
    display: flex; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding-top: 8px; font-size: 16px;
  }
  .js .menu.abierto a:not(.boton-cabecera) { padding: 12px 4px; border-bottom: 1px solid var(--gris-borde); }
  .js .menu.abierto .boton-cabecera { justify-content: center; margin-top: 12px; }
}
@media (max-width: 600px) {
  .contenedor { padding: 64px 20px; }
  .hero-in { padding: 48px 20px 48px; gap: 40px; }
  .cabecera-in, .pie-in { padding-left: 20px; padding-right: 20px; }
  .maqueta, .hero-texto, .col-texto, .col-calendario, .tarjeta, .tarjeta-oscura,
  .plan, .sello, .ventaja, .destacado-texto, .aviso-prueba p { flex-basis: 100%; }
  .destacado, .aviso-prueba, .sello { padding: 22px; }
  .plan, .tarjeta-oscura { padding: 26px; }
  .foto-hueco { flex-basis: 180px; height: 180px; }
}