/* ==========================================================================
   Páginas interiores de la web (qué esperar, auditoría, legales).
   Usan los tokens y la tipografía de styles.css; aquí solo va su esqueleto:
   cabecera azul con el logo, una columna de lectura y un pie corto.
   ========================================================================== */
.pg { background: var(--grey-100); color: var(--ink); }

.pg__cab {
  position: relative;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
}
.pg__cab::before {
  content: '';
  position: absolute; inset: 0;
  background: url("/assets/img/map-blue.svg") center / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000 0%, transparent 76%);
          mask-image: radial-gradient(80% 100% at 100% 0%, #000 0%, transparent 76%);
  pointer-events: none;
}
.pg__barra, .pg__hero { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.pg__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: clamp(14px, 1.6vw, 26px); }
.pg__barra .logo__word { color: var(--white); }
.pg__nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: var(--fs-xs); font-weight: 600; }
.pg__nav a { color: rgba(255, 255, 255, .85); white-space: nowrap; }
.pg__nav a:hover { color: var(--white); }
.pg__nav .pg__cta { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 4px; color: var(--white); }
@media (max-width: 640px) { .pg__nav a:not(.pg__cta) { display: none; } }

.pg__hero { padding-block: clamp(28px, 5vw, 76px) clamp(36px, 6vw, 92px); }
.pg__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.pg__eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--white); }
.pg__titulo { margin-top: .35em; max-width: 16ch; }
.pg__lead { margin-top: 1em; max-width: 52ch; font-size: var(--fs-md); line-height: 1.45; color: rgba(255, 255, 255, .9); }

.pg__cuerpo { width: 100%; max-width: 1100px; margin-inline: auto; padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 96px); }
.pg__caja { padding: clamp(20px, 2.6vw, 40px); background: var(--white); border-radius: 6px; }
.pg__caja + .pg__caja { margin-top: clamp(12px, 1.4vw, 20px); }
.pg h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 500; line-height: 1.15; color: var(--blue); }
.pg h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.pg__caja p, .pg__caja li { font-size: var(--fs-sm); line-height: 1.55; color: #2a2a2a; }
.pg__caja > p { margin-top: .8em; max-width: 68ch; }
.pg__caja a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Lista con cuadradito azul, y su versión «esto no» */
.pg__lista { display: grid; gap: 10px; margin-top: var(--space-md); max-width: 70ch; }
.pg__lista li { position: relative; padding-left: 24px; }
.pg__lista li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--blue); }
.pg__lista--no li::before, .pg__lista--no li::after { content: ''; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: #B3261E; }
.pg__lista--no li::before { transform: rotate(45deg); }
.pg__lista--no li::after { transform: rotate(-45deg); }
.pg__lista b { font-weight: 600; }

/* Línea de tiempo: el mes a la izquierda, lo que pasa a la derecha */
.fases { display: grid; margin-top: var(--space-md); }
.fase { display: grid; grid-template-columns: clamp(96px, 14vw, 170px) minmax(0, 1fr); gap: 8px clamp(16px, 3vw, 44px); padding: clamp(18px, 2.2vw, 32px) 0; border-top: 1px solid var(--grey-200); }
.fase:first-child { border-top: 0; padding-top: 0; }
.fase__cuando { font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.7rem); font-weight: 500; line-height: 1.1; color: var(--blue); }
.fase__cuando small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; color: #6a6a6a; }
.fase p { margin-top: 6px; max-width: 62ch; }
.fase__nota { margin-top: 10px !important; padding: 10px 14px; background: var(--grey-100); border-left: 3px solid var(--blue); font-size: var(--fs-xs) !important; }
@media (max-width: 640px) { .fase { grid-template-columns: 1fr; } }

.pg__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(12px, 1.4vw, 20px); }
.pg__dos .pg__caja + .pg__caja { margin-top: 0; }
/* La columna derecha se estira hasta la altura de la izquierda: la última caja ocupa lo que sobra */
.pg__dos > div { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.pg__dos > div > .pg__caja:last-child { flex: 1; }
@media (max-width: 760px) { .pg__dos { grid-template-columns: 1fr; } }

.pg__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; background: var(--blue); color: var(--white); }
.pg__cierre h2 { color: var(--white); }
.pg__cierre p { color: rgba(255, 255, 255, .88); }
.pg__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.pg__btn { padding: 14px 22px; border: 1px solid var(--white); border-radius: 4px; font-size: var(--fs-xs); }
.pg__btn--lleno { background: var(--white); color: var(--blue); }
.pg__btn--hueco { color: var(--white); }
.pg__btn--azul { background: var(--blue); border-color: var(--blue); color: var(--white); }

.pg__pie { padding: 22px clamp(20px, 4vw, 48px) 34px; font-size: var(--fs-xs); text-align: center; color: #6a6a6a; }
.pg__pie a { color: #4a4a4a; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Auditoría gratuita
   ========================================================================== */
.au__buscador { position: relative; z-index: 2; margin-top: clamp(22px, 3vw, 40px); max-width: 640px; }
.au__campo {
  width: 100%;
  padding: 18px 20px;
  background: var(--white);
  border: 0; border-radius: 6px;
  font-family: var(--font-body); font-size: max(16px, var(--fs-md));
  color: var(--ink);
}
.au__campo:focus-visible { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 3px; }
.au__sug { margin-top: 6px; background: var(--white); border-radius: 6px; overflow: hidden; }
.au__sug:empty { display: none; }
.au__sug button {
  display: block; width: 100%;
  padding: 13px 20px;
  background: none; border-top: 1px solid var(--grey-200);
  font-family: var(--font-body); text-align: left; color: var(--ink);
}
.au__sug button:first-child { border-top: 0; }
.au__sug button:hover, .au__sug button:focus-visible { background: var(--grey-100); outline: none; }
.au__sug b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.au__sug span { font-size: var(--fs-xs); color: #5a5a5a; }
.au__aviso { margin-top: 12px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .8); }
.au__estado { margin-top: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--white); }

.au__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-items: center; }
/* El círculo es un <p>: «.pg__caja p» lo pintaba de gris oscuro. Mismos colores que los puntos de la lista */
.pg__caja .au__nota { display: grid; place-items: center; width: clamp(110px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: var(--white); text-align: center; }
.au__nota b { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; line-height: .9; color: inherit; }
.au__nota span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: inherit; opacity: .9; }
.pg__caja .au__nota.es-alta { background: #1C7A3E; }
.pg__caja .au__nota.es-media { background: #9A6200; }   /* el ámbar claro no aguantaba el blanco */
.pg__caja .au__nota.es-baja { background: #B3261E; }
.au__negocio { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5a5a5a; }
.au__frase { margin-top: 6px !important; font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 2rem) !important; font-weight: 500; line-height: 1.15 !important; color: var(--ink) !important; }
@media (max-width: 560px) { .au__cab { grid-template-columns: 1fr; } }

.au__puntos { display: grid; margin-top: var(--space-md); }
.au__punto { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid var(--grey-200); }
.au__punto:first-child { border-top: 0; }
.au__punto::before { content: ''; position: absolute; left: 0; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: #1C7A3E; }
.au__punto.es-mal::before { background: #B3261E; }
.au__punto.es-duda::before { background: var(--grey-300); }
.au__punto b { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.au__punto span { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.45; color: #5a5a5a; }

.au__rivales { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.au__rivales th { padding: 0 10px 8px 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left; color: #6a6a6a; }
.au__rivales td { padding: 10px 10px 10px 0; border-top: 1px solid var(--grey-200); }
.au__rivales th:nth-child(n+2), .au__rivales td:nth-child(n+2) { text-align: right; white-space: nowrap; }

.au__plan .pg__lista { margin-top: var(--space-md); }
.au__plan-ir { margin-top: var(--space-md) !important; font-weight: 600; }
.au__plan-ir a::after { content: ' →'; }

/* --- Auditoría: pedir el informe por correo -------------------------------- */
.au__correo { margin-top: clamp(12px, 1.4vw, 20px); }
.au__correo form { margin-top: var(--space-md); max-width: 620px; }
.au__correo-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.au__email {
  flex: 1 1 240px; min-height: 52px; padding: 0 16px;
  background: var(--grey-100); border: 1px solid transparent; border-radius: 6px;
  font: inherit; font-size: max(16px, var(--fs-sm)); color: var(--ink);
}
.au__email:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.au__correo .pg__btn { background: var(--blue); color: var(--white); border: 0; cursor: pointer; }
.au__correo .pg__btn[disabled] { opacity: .6; cursor: default; }
.au__acepto { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 14px; font-size: var(--fs-xs); line-height: 1.5; color: #5a5a5a; cursor: pointer; }
.au__acepto input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.au__acepto a { color: var(--blue); }
.au__correo-error { margin-top: 12px; font-size: var(--fs-xs); font-weight: 600; color: #B3261E; }