/* Auditor SEO Local · identidad del canal (Iván Agar Mendoza): marino, azul #3fa9ff, Poppins + Caveat */
:root {
  --marino: #0c2342;
  --marino-2: #0f2c52;
  --azul: #3fa9ff;
  --azul-osc: #1d6fc2;
  --celeste: #8fc4f5;
  --fondo: #f3f7fc;
  --tarjeta: #ffffff;
  --tinta: #13243b;
  --gris: #5b6b80;
  --borde: #dfe7f1;
  --ok: #178a5b;
  --ok-f: #e3f5ec;
  --mejorable: #a8650b;
  --mejorable-f: #fdf1dc;
  --mal: #c8392f;
  --mal-f: #fce8e6;
  --pendiente: #4f5f75;
  --pendiente-f: #eaeff6;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(12, 35, 66, .06), 0 8px 24px rgba(12, 35, 66, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
  /* La página ocupa siempre la pantalla entera: el pie queda abajo y nada salta al abrir un desplegable */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > section:not([hidden]) { flex: 1 0 auto; }
a { color: var(--azul-osc); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
[hidden] { display: none !important; }
/* Los hijos de las rejillas pueden encogerse: la tabla de competencia hace scroll dentro de su caja */
.portada-in > *, .analisis > *, .informe > *, .resumen > *, .plan > * { min-width: 0; }
.contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Barra */
.barra { background: var(--marino); color: #fff; }
.barra-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.logo { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.logo span { color: var(--azul); }
.pildora-barra { font-size: 12px; font-weight: 500; color: var(--celeste); border: 1.5px solid rgba(63, 169, 255, .45); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }

/* Portada */
.portada {
  color: #fff;
  background:
    radial-gradient(ellipse 700px 500px at 15% 10%, #17406e 0%, rgba(23, 64, 110, 0) 70%),
    linear-gradient(180deg, var(--marino) 0%, var(--marino-2) 100%);
  padding: 32px 0 48px;
  display: flex;
  align-items: center;
}
.portada-in { display: grid; gap: 24px; grid-template-areas: "texto" "form" "incluye"; }
.portada-texto { grid-area: texto; }
.formulario { grid-area: form; }
.incluye { grid-area: incluye; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin: 0 0 10px; }
.portada h1 { font-size: clamp(30px, 6.4vw, 46px); font-weight: 700; letter-spacing: -0.035em; }
.sub { font-size: 17px; color: #d5e6f8; margin: 14px 0 6px; max-width: 34em; }
.mano { font-family: 'Caveat', cursive; font-size: 26px; color: var(--azul); margin: 0; display: inline-block; border-bottom: 2.5px solid var(--azul); line-height: 1.1; padding-bottom: 2px; }
.incluye { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.incluye li { display: flex; gap: 12px; align-items: flex-start; }
.incluye svg { flex: 0 0 28px; width: 28px; height: 28px; stroke: var(--azul); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.incluye b { display: block; font-weight: 600; }
.incluye span { color: #c4dbf3; font-size: 15px; }
.incluye span b { color: #fff; }

/* Tarjetas y formulario */
.tarjeta { background: var(--tarjeta); color: var(--tinta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; }
.formulario { display: grid; gap: 16px; align-self: start; }
.campo { display: grid; gap: 6px; }
.campo > label { font-weight: 600; font-size: 15px; }
.campo small { color: var(--gris); font-size: 13px; }
input[type="text"], input:not([type]), input[type="email"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta);
  padding: 12px 14px; border: 1.5px solid var(--borde); border-radius: 10px; background: #fbfdff;
}
input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(63, 169, 255, .25); }
input:disabled { opacity: .5; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tinta); cursor: pointer; }
.check input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--azul-osc); }
.check.pequeno { font-size: 14px; color: var(--gris); }
.ayuda-campo { font-size: 14px; color: var(--gris); }
.ayuda-campo summary { cursor: pointer; color: var(--azul-osc); font-weight: 500; width: fit-content; }
.ayuda-campo { position: relative; }
/* Tarjeta flotante: abrirla no mueve el resto de la página */
.ayuda-campo ol {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 12px 14px 12px 32px; background: #fff; color: var(--tinta);
  border: 1.5px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra);
}
.cf-turnstile { min-height: 65px; }
.boton:disabled { opacity: .7; cursor: wait; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { margin: 0; color: var(--mal); background: var(--mal-f); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.legal { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--gris); }
.boton {
  font: inherit; font-weight: 600; font-size: 17px; color: #fff; background: var(--azul-osc);
  border: 0; border-radius: 12px; padding: 15px 20px; cursor: pointer; width: 100%;
  display: inline-block; text-align: center; text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.boton:hover { background: #175fa8; }
.boton:active { transform: translateY(1px); }
.boton:focus-visible, .opcion:focus-visible, .enlace-boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.boton.secundario { background: #fff; color: var(--marino); border: 1.5px solid var(--borde); }
.boton.secundario:hover { background: var(--fondo); }
.boton.whatsapp { background: #1f9d55; }
.boton.whatsapp:hover { background: #198347; }
.enlace-boton { font: inherit; font-size: 14px; color: var(--gris); background: none; border: 0; padding: 6px 0; text-decoration: underline; cursor: pointer; }

/* Análisis */
.analisis { display: grid; gap: 16px; padding-top: 24px; padding-bottom: 48px; align-content: start; }
.progreso h2 { font-size: 24px; margin-bottom: 14px; overflow-wrap: anywhere; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pasos li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.pasos .icono { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--borde); }
.pasos li[data-estado="curso"] .icono { background: transparent; border: 2.5px solid var(--borde); border-top-color: var(--azul); animation: girar .9s linear infinite; }
.pasos li[data-estado="hecho"] .icono { background: var(--ok); }
.pasos li[data-estado="fallo"] .icono { background: var(--pendiente); }
.pasos li[data-estado="espera"] { color: var(--gris); }
.pasos small { display: block; color: var(--gris); font-size: 13px; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pasos li[data-estado="curso"] .icono { animation: none; border-top-color: var(--borde); background: var(--azul); } }
.listo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde); display: grid; gap: 10px; }
.listo p { margin: 0; }
.cuestionario h3 { font-size: 21px; margin: 4px 0 6px; }
.q-ayuda { color: var(--gris); font-size: 14px; margin: 0 0 16px; }
.opciones { display: grid; gap: 10px; }
.opcion {
  font: inherit; font-size: 16px; font-weight: 500; text-align: left; color: var(--tinta);
  background: #fbfdff; border: 1.5px solid var(--borde); border-radius: 12px; padding: 13px 16px; cursor: pointer;
}
.opcion:hover { border-color: var(--azul); background: #f2f8ff; }
.ficha-encontrada { background: var(--ok-f); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.ficha-encontrada .enlace-boton { padding: 0; font-size: 13px; }

/* Informe */
.informe { display: grid; gap: 20px; padding-top: 24px; padding-bottom: 56px; align-content: start; }
.cabecera-informe h2 { font-size: clamp(26px, 5vw, 36px); overflow-wrap: anywhere; }
.cabecera-informe p { margin: 6px 0 0; color: var(--gris); }
.resumen { display: grid; gap: 22px; }
.nota { display: flex; gap: 18px; align-items: center; }
.donut { flex: 0 0 132px; width: 132px; height: 132px; }
.donut .cifra { font: 700 34px 'Poppins', sans-serif; fill: var(--marino); letter-spacing: -1px; }
.donut .de { font: 500 12px 'Poppins', sans-serif; fill: var(--gris); }
.nota h3 { font-size: 22px; }
.nota p { margin: 6px 0 0; font-size: 13px; color: var(--gris); }
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.areas li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.areas .barra-area { grid-column: 1 / -1; height: 9px; background: #e6edf5; border-radius: 6px; overflow: hidden; }
.areas .barra-area span { display: block; height: 100%; border-radius: 6px; }
.areas b { font-weight: 600; }
.captura { display: none; }
.titulo-seccion { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.titulo-seccion h3 { font-size: 22px; }
.flecha { font-family: 'Caveat', cursive; font-size: 24px; color: var(--azul-osc); line-height: 1; }
.prioridades { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.prioridades li { display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; padding: 14px; border: 1.5px solid var(--borde); border-radius: 12px; counter-increment: p; }
.prioridades li::before { content: counter(p); grid-row: span 3; width: 32px; height: 32px; border-radius: 50%; background: var(--marino); color: #fff; font-weight: 700; display: grid; place-items: center; }
.prioridades b { font-weight: 600; }
.prioridades p { margin: 0; font-size: 14px; color: var(--gris); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--pendiente-f); color: var(--pendiente); white-space: nowrap; }
.chip.ok { background: var(--ok-f); color: var(--ok); }
.chip.mejorable { background: var(--mejorable-f); color: var(--mejorable); }
.chip.mal { background: var(--mal-f); color: var(--mal); }
.chip.hoy { background: #e4f1ff; color: var(--azul-osc); }
.chip.semana { background: #ece9ff; color: #5440b8; }
.chip.pro { background: var(--marino); color: #fff; }

.tabla-wrap { overflow-x: auto; margin: 0 -4px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th { text-align: left; font-weight: 600; font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; padding: 8px 4px; border-bottom: 1.5px solid var(--borde); }
.tabla td { padding: 10px 4px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla td:nth-child(2) { overflow-wrap: anywhere; }
.tabla tr.tuyo td { background: #eaf4ff; font-weight: 600; }
.tabla .num { text-align: right; white-space: nowrap; }
.aviso { background: var(--fondo); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 14px 0 0; }
.aviso.fuerte { background: var(--mejorable-f); }
.fuente { margin: 8px 0 0; font-size: 12px; color: var(--gris); }

.area-bloque + .area-bloque { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.area-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.area-cab h4 { margin: 0; font-size: 18px; }
.area-cab span { font-weight: 700; font-size: 18px; }
.hallazgos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hallazgo { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; }
.hallazgo .chip { margin-top: 3px; min-width: 84px; text-align: center; }
.hallazgo b { font-weight: 600; font-size: 15px; }
.hallazgo p { grid-column: 2; margin: 0; font-size: 14px; color: var(--gris); overflow-wrap: anywhere; }
.bien summary { cursor: pointer; font-size: 14px; color: var(--ok); font-weight: 600; margin-top: 12px; }
.bien .hallazgos { margin-top: 10px; }

.plan { display: grid; gap: 18px; }
.nivel { border: 1.5px solid var(--borde); border-radius: 14px; padding: 16px; }
.nivel.pro { border-color: var(--marino); }
.nivel h4 { margin: 0 0 2px; font-size: 18px; }
.nivel > p { margin: 0 0 12px; font-size: 14px; color: var(--gris); }
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tarea { border-top: 1px solid var(--borde); padding-top: 10px; }
.tarea:first-child { border-top: 0; padding-top: 0; }
.tarea-cab { display: flex; gap: 10px; align-items: flex-start; }
.tarea-cab input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--ok); }
.tarea-cab label { font-weight: 600; font-size: 15px; cursor: pointer; }
.tarea.hecha .tarea-cab label { text-decoration: line-through; color: var(--gris); }
.tarea details { margin: 6px 0 0 30px; font-size: 14px; }
.tarea summary { cursor: pointer; color: var(--azul-osc); font-weight: 500; }
.tarea ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.tarea .porque { color: var(--gris); margin: 8px 0 0; }
.tarea-pro b { display: block; font-size: 15px; }
.tarea-pro p { margin: 4px 0 0; font-size: 14px; }
.tarea-pro .cuesta { color: var(--gris); }
.minutos { font-weight: 400; color: var(--gris); font-size: 13px; white-space: nowrap; }
.ayuda-pro { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--borde); font-size: 14px; }
.ayuda-pro a { font-weight: 600; }

.prompt textarea { width: 100%; min-height: 180px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tinta); background: var(--fondo); border: 1.5px solid var(--borde); border-radius: 10px; padding: 12px; resize: vertical; }
.fila-botones { display: grid; gap: 10px; margin-top: 12px; }

.cta { background: var(--marino); color: #fff; }
.cta h3 { font-size: 24px; }
.cta p { color: #c4dbf3; }
.cta .mano { font-size: 24px; margin: 0 0 8px; }

.acciones { display: grid; gap: 10px; }

/* Pie */
.pie { background: var(--marino); color: #c4dbf3; font-size: 14px; padding: 26px 0; }
.pie a { color: #fff; }
.pie p { margin: 0 0 6px; }
.pie b { color: #fff; }
.mano-pie { font-family: 'Caveat', cursive; font-size: 20px; color: var(--azul); }
.pie .nota { font-size: 12px; color: #8fa9c6; display: block; margin-top: 10px; }

@media (min-width: 720px) {
  .tabla { font-size: 14px; }
  .tabla th, .tabla td { padding-left: 6px; padding-right: 6px; }
  .portada { padding: 56px 0 72px; }
  .tarjeta { padding: 28px; }
  .resumen { grid-template-columns: 1fr 1fr; align-items: center; }
  .fila-botones, .acciones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .opciones { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .captura { display: block; justify-self: center; width: 180px; border-radius: 18px; border: 6px solid var(--marino); box-shadow: var(--sombra); }
  .resumen.con-captura { grid-template-columns: 1fr 1fr auto; }
}
@media (min-width: 960px) {
  .portada-in { grid-template-columns: 1.05fr .95fr; grid-template-areas: "texto form" "incluye form"; grid-template-rows: auto 1fr; gap: 28px 48px; align-items: start; }
  .portada-texto { padding-top: 12px; }
  .analisis { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .plan { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}

@media print {
  body { background: #fff; font-size: 12px; }
  .barra, .pie, #inicio, #analisis, .acciones, .cta .fila-botones, .prompt, .no-imprimir { display: none !important; }
  .tarjeta { box-shadow: none; border: 1px solid var(--borde); break-inside: avoid-page; }
  .informe { padding: 0; }
  .cta { background: #fff; color: var(--tinta); }
  .cta p { color: var(--tinta); }
  .plan { grid-template-columns: 1fr; }
}