/*
 * Portadas (16/10/2026, rediseño del home aprobado por José):
 * 1. La ENTRADA (/): neutra, encabezado blanco, un buscador para todo y dos puertas del mismo tamaño.
 * 2. Detalles de las portadas de cada mundo (/tramites/ y /consultoria/): el nombre del mundo sobre el título.
 * Todo par de colores pasa WCAG AA. Nada por debajo de 15 px. Botones en píldora.
 */

/* ---------- 1. Encabezado de la entrada: blanco, sin color de mundo ---------- */
html body.ac-entrada { background: #F8F9FC; }
html body.ac-entrada .ac-header { background: #FFFFFF !important; color: #1B2433 !important; border-bottom: 1px solid #DFE4EC; box-shadow: none !important; }
@media (min-width: 1024px) {
  html body.ac-entrada .ac-header { position: sticky !important; top: 0 !important; }
  html body.admin-bar.ac-entrada .ac-header { top: 32px !important; }
}
/* En la entrada no hay piso 2 (el menú de un mundo); el menú general va con el botón de las tres rayas. */
html body.ac-entrada .ac-piso2 { display: none !important; }
html body.ac-entrada .ac-hsel-movil { display: none !important; }
@media (min-width: 1024px) {
  html body.ac-entrada .ac-header .ac-mm2-boton { display: inline-flex !important; width: 44px; height: 44px; }
}
html body.ac-entrada .ac-header .ac-mm2-boton { background: #FFFFFF; border: 1.5px solid #DFE4EC; color: #1B2433; }
html body.ac-entrada .ac-header .ac-mm2-boton:hover { border-color: #0F2A4A; }

/* Selector de mundos: ninguno marcado (aquí todavía no se ha escogido). */
html body.ac-entrada .ac-header .ac-hsel { background: #FFFFFF !important; border: 1.5px solid #DFE4EC !important; box-shadow: none !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab,
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="tramites"],
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="consultoria"] { background: transparent !important; color: #1B2433 !important; box-shadow: none !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="tramites"]:hover { background: #EEF3FA !important; color: #0F2A4A !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="consultoria"]:hover { background: #EDF4F7 !important; color: #0B3644 !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="tramites"] .ac-hsel-ico { background: #EEF3FA !important; color: #0F2A4A !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab[data-m="consultoria"] .ac-hsel-ico { background: #EDF4F7 !important; color: #0B3644 !important; }
html body.ac-entrada .ac-header .ac-hsel .ac-hsel-tab:focus-visible { outline: 3px solid #D9A441; outline-offset: 2px; }

/* Idioma, maletín, entrar y únete sobre blanco. Únete va con borde: la única acción dorada de la página es Consulta gratis. */
html body.ac-entrada .ac-header .ac-lang { border-color: #DFE4EC; }
html body.ac-entrada .ac-header .ac-lang a { color: #5B6576; }
html body.ac-entrada .ac-header .ac-lang a.on { background: #0F2A4A; color: #FFFFFF; }
html body.ac-entrada .ac-header .ac-lang a:not(.on):hover { background: #EEF3FA; color: #0F2A4A; }
html body.ac-entrada .ac-header .ac-bolsa { background: #FFFFFF; border: 1.5px solid #DFE4EC; color: #1B2433; }
html body.ac-entrada .ac-header .ac-bolsa:hover { border-color: #0F2A4A; color: #0F2A4A; }
html body.ac-entrada .ac-header .ac-bolsa svg { color: #0F2A4A; }
html body.ac-entrada .ac-header .ac-entrar { color: #1B2433 !important; background: #FFFFFF !important; border: 1.5px solid #DFE4EC !important; }
html body.ac-entrada .ac-header .ac-entrar:hover { color: #0F2A4A !important; border-color: #0F2A4A !important; }
html body.ac-entrada .ac-header .ac-unete,
html body.ac-entrada .ac-header .ac-unete:hover { background: #FFFFFF; color: #0F2A4A; border: 1.5px solid #0F2A4A; }
html body.ac-entrada .ac-header .ac-unete:hover { background: #EEF3FA; }
@media (min-width: 1024px) {
  html body.ac-entrada .ac-header .ac-unete { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; box-sizing: border-box; }
}

/* Barra de abajo en el teléfono: azul de la casa (el del pie) y ningún mundo marcado. */
html body.ac-entrada .ac-app-ind { display: none !important; }
@media (max-width: 1023px) {
  html body.ac-entrada .ac-app.ac-app { --c: #0B2240; }
  html body.ac-entrada .ac-app .ac-app-sel .ac-app-tab[data-app="tramites"],
  html body.ac-entrada .ac-app .ac-app-sel .ac-app-tab[data-app="consultoria"] { background: transparent; color: #FFFFFF; }
  html body.ac-entrada .ac-app .ac-app-sel .ac-app-tab[data-app="consultoria"] { border-left: 1px solid rgba(255,255,255,.25); }
}

/* ---------- 2. La entrada ---------- */
.ae { max-width: 80rem; margin: 0 auto; padding: 40px 32px 72px; color: #1B2433; }
.ae p { margin: 0; }
.ae h1, .ae h2 { margin: 0; text-wrap: balance; }
.ae-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ae [hidden] { display: none !important; }

.ae-hero { display: grid; gap: 14px; max-width: 860px; }
.ae-h1 { font-size: 48px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #1B2433; }
.ae-esl { font-size: 20px; font-weight: 700; color: #7E5A14; }
.ae-lead { font-size: 18px; line-height: 1.55; color: #1B2433; max-width: 62ch; }

/* Seguir ahí (quien vuelve): lo arma el navegador. */
.ae-seguir { display: inline-flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; justify-self: start; margin-top: 4px; padding: 8px 8px 8px 18px; background: #FFFFFF; border: 1px solid #DFE4EC; border-radius: 999px; font-size: 15px; }
.ae-seguir-t strong { color: #1B2433; }
.ae-seguir-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #0F2A4A; color: #FFFFFF !important; font-weight: 800; font-size: 15px; text-decoration: none; }
.ae-seguir-b--c { background: #0B3644; }
.ae-seguir-b:hover { background: #1E4A7A; }
.ae-seguir-b--c:hover { background: #175F70; }

/* Un buscador para todo el portal (mismo motor de siempre). */
.ae-busca { position: relative; margin-top: 22px; }
html body .ae-busca .ai-campo-fila { border: 2px solid #1B2433 !important; padding: 5px 5px 5px 22px !important; box-shadow: 0 12px 26px -12px rgba(27,36,51,.35); }
html body .ae-busca .ai-campo-fila:hover { border-color: #1B2433 !important; }
html body .ae-busca .ai-campo-fila:focus-within { border-color: #0F2A4A !important; box-shadow: 0 0 0 4px rgba(30,74,122,.18), 0 12px 26px -12px rgba(27,36,51,.35); }
.ae-busca .ai-campo { color: #1B2433; }
.ae-busca .ai-campo svg { width: 22px; height: 22px; }
.ae-busca .ai-campo input { font-size: 18px; padding: 14px 0; color: #1B2433; }
.ae-busca .ai-campo input::placeholder { color: #5B6576; }
.ae-busca .ai-buscar { background: #1B2433; font-size: 16px; padding: 14px 28px; }
.ae-busca .ai-buscar:hover { background: #2C3850; }
.ae-ayuda { margin: 10px 4px 0 !important; font-size: 15px; color: #5B6576; }

/* Las dos puertas: Trámites (azul marino) y Consultoría (petróleo), del mismo tamaño. */
.ae-puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.ae-puerta { --p: #0F2A4A; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; background: var(--p); color: #FFFFFF; border-radius: 24px; padding: 30px 30px 28px; }
.ae-puerta--c { --p: #0B3644; }
.ae-puerta > *:not(.ae-anillo) { position: relative; z-index: 1; }
.ae-anillo { position: absolute; right: -30px; top: -30px; width: 180px; height: 180px; border-radius: 50%; border: 1.5px solid rgba(217,164,65,.28); pointer-events: none; }
.ae-anillo::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1.5px solid rgba(217,164,65,.18); }
.ae-k { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.ae-k-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #D9A441; flex: none; }
.ae-pt { font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: #FFFFFF !important; }
.ae-pd { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 46ch; }
.ae-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-chips button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.42); background: transparent; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.ae-chips button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }
.ae-chips button:focus-visible, .ae-entrar:focus-visible { outline: 3px solid #D9A441; outline-offset: 2px; }
.ae-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.ae-pie-t { font-size: 15px; color: rgba(255,255,255,.85); }
.ae-entrar { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: #FFFFFF; color: var(--p) !important; font-size: 16px; font-weight: 800; text-decoration: none; transition: background-color .15s; }
.ae-entrar:hover { background: #E9EEF5; }
.ae-entrar:active { transform: translateY(1px); }

/* "¿No sabes por dónde empezar?": la tarjeta aprobada el 07/10, aquí en blanco y a lo ancho. */
.ae-habla { margin-top: 20px; }
.ae-habla .ac-tj { --c: #0F2A4A; background: #FFFFFF; color: #1B2433; border: 1px solid #DFE4EC; border-radius: 24px; padding: 22px 26px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cab acc" "cab linea"; align-items: center; gap: 8px 28px; }
.ae-habla .ac-tj::after { display: none; }
.ae-habla .ac-tj-cab { grid-area: cab; }
.ae-habla .ac-tj-acc { grid-area: acc; justify-content: flex-end; }
.ae-habla .ac-tj-linea { grid-area: linea; text-align: right; color: #5B6576; }
.ae-habla .ac-tj-top { justify-content: flex-start; align-items: center; }
.ae-habla .ac-tj-t { flex: 0 1 auto; color: #1B2433; font-size: 22px; }
.ae-habla .ac-tj-s { color: #5B6576; }
.ae-habla .ac-tj-senal { margin-top: 0; color: #166534; background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.35); }
.ae-habla .ac-tj-senal.is-off { color: #5B6576; background: #F3F5F9; border-color: #DFE4EC; }
.ae-habla .ac-tj .ac-tj-oro { flex: 0 0 auto; }
.ae-habla .ac-tj-wa { color: #1B2433 !important; text-decoration-color: rgba(27,36,51,.35); }
.ae-habla .ac-tj-wa:hover { text-decoration-color: #1B2433; }
.ae-habla .ac-tj-wa svg { color: #0E7A3F; }

/* Los 4 sellos. */
.ae-sellos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.ae-sello { display: flex; gap: 14px; align-items: flex-start; }
.ae-sello-ico { width: 46px; height: 46px; border-radius: 50%; background: #EEF3FA; color: #0F2A4A; display: grid; place-items: center; flex: none; }
.ae-sello-ico svg { width: 22px; height: 22px; }
.ae-sello strong { display: block; font-size: 16px; color: #1B2433; }
.ae-sello span { display: block; font-size: 15px; line-height: 1.5; color: #5B6576; }

/* Franja de planes. */
.ae-planes { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 30px; padding: 22px 26px; background: #FFFFFF; border: 1px solid #DFE4EC; border-radius: 24px; }
.ae-planes h2 { font-size: 20px; line-height: 1.3; font-weight: 800; color: #0F2A4A; }
.ae-planes-s { margin-top: 4px !important; font-size: 16px; color: #1B2433; }
.ae-planes-seg { margin-top: 4px !important; font-size: 15px; color: #5B6576; }
.ae-sec { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #0F2A4A; background: #FFFFFF; color: #0F2A4A !important; font-size: 16px; font-weight: 700; text-decoration: none; }
.ae-sec:hover { background: #EEF3FA; }
.ae-sec:focus-visible, .ae-seguir-b:focus-visible { outline: 3px solid #D9A441; outline-offset: 2px; }

/* Mejora #30/#32 (17/10/2026): "Hola, {nombre}" y los 4 accesos de quien tiene la sesión abierta. */
.ae-mio { margin: 0 0 28px; padding: 18px 20px 20px; background: #FFFFFF; border: 1px solid #DFE4EC; border-radius: 24px; }
.ae-mio-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ae-mio-t { font-size: 22px; line-height: 1.25; font-weight: 800; color: #1B2433; }
.ae-mio-cuenta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #0F2A4A; background: #FFFFFF; color: #0F2A4A !important; font-size: 15px; font-weight: 700; text-decoration: none; }
.ae-mio-cuenta:hover { background: #EEF3FA; }
.ae-mio-tjs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ae-mio-tj { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 1px solid #DFE4EC; border-radius: 16px; background: #F8F9FC; color: #1B2433 !important; text-decoration: none; transition: border-color .15s, background-color .15s; }
.ae-mio-tj:hover { border-color: #D9A441; background: #FFFFFF; }
.ae-mio-tj:focus-visible, .ae-mio-cuenta:focus-visible { outline: 3px solid #D9A441; outline-offset: 2px; }
.ae-mio-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #EEF3FA; color: #0F2A4A; }
.ae-mio-tx { display: grid; gap: 2px; min-width: 0; }
.ae-mio-k { font-size: 15px; line-height: 1.3; color: #5B6576; }
.ae-mio-v { font-size: 17px; line-height: 1.3; font-weight: 800; color: #0F2A4A; }
.ae-mio-n { font-size: 15px; line-height: 1.3; color: #5B6576; }
.ae-mio-n.is-alerta { color: #7E5A14; font-weight: 700; }
.ae-mio .ae-mio-bolsa.cero { display: inline; }

/* Tableta. */
@media (max-width: 1023px) {
  .ae-mio-tjs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae { padding: 32px 24px 64px; }
  .ae-h1 { font-size: 40px; }
  .ae-pt { font-size: 28px; }
  .ae-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-habla .ac-tj { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "acc" "linea"; }
  .ae-habla .ac-tj-acc { justify-content: flex-start; }
  .ae-habla .ac-tj-linea { text-align: left; }
}
/* Teléfono. */
@media (max-width: 767px) {
  .ae { padding: 24px 16px 48px; }
  .ae-h1 { font-size: 34px; }
  .ae-esl { font-size: 18px; }
  .ae-lead { font-size: 17px; }
  .ae-seguir { border-radius: 18px; padding: 12px 14px; }
  .ae-busca { margin-top: 18px; }
  html body .ae-busca .ai-campo-fila { padding: 4px 4px 4px 16px !important; }
  .ae-busca .ai-campo input { font-size: 17px; padding: 12px 0; }
  .ae-busca .ai-buscar { padding: 12px 14px; }
  .ae-busca .ai-buscar span { display: none; }
  .ae-busca .ai-buscar svg { display: block; width: 20px; height: 20px; }
  .ae-puertas { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .ae-puerta { padding: 22px 20px 20px; gap: 14px; border-radius: 22px; }
  .ae-pt { font-size: 26px; }
  .ae-pd { font-size: 16px; }
  .ae-mio { margin-bottom: 20px; padding: 14px 14px 16px; border-radius: 20px; }
  .ae-mio-t { font-size: 20px; }
  .ae-mio-tjs { gap: 10px; }
  .ae-mio-tj { align-items: flex-start; min-height: 0; padding: 12px 14px; border-radius: 14px; }
  .ae-mio-ico { display: none; } /* En el teléfono, sin ícono: el texto entra entero y la portada se ve antes (Yorman). */
  .ae-mio-v { font-size: 16px; }
  .ae-entrar { width: 100%; justify-content: center; }
  .ae-habla .ac-tj { padding: 20px; }
  .ae-habla .ac-tj .ac-tj-oro { flex: 1 1 100%; }
  .ae-habla .ac-tj-acc { justify-content: center; }
  .ae-sellos { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }
  .ae-planes { margin-top: 24px; padding: 20px; }
  .ae-sec { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ae-chips button, .ae-entrar { transition: none; } }

/* ---------- 3. Portada de cada mundo: el nombre del mundo sobre el título ---------- */
.ac-hero-k { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 800; color: #7E5A14; }
.ac-hero-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #D9A441; }
.ai-busca-t.ai-busca-t--chica, .ai-entrada .ai-busca-t.ai-busca-t--chica { font-size: 18px; }