/* Ruta NL — web candidata (Encargo 038). Se carga después de estilos.css, que es la hoja
   de la aplicación: misma identidad en la web y en el espacio personal. */
.heroe { margin-top: -1.6rem; padding: 3rem 0 2.6rem; }
.heroe h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); max-width: 18ch; }
.heroe__texto { font-size: 1.1rem; max-width: 42rem; }
.heroe .botones { margin-top: 1.4rem; }
.heroe--plus { background: linear-gradient(135deg, #10305a, #17754f); }
.heroe--plus .etiqueta { background: var(--blanco); }
.menu a.menu__espacio { border: 1.5px solid var(--linea); margin-left: .3rem; }
.menu .boton { margin-left: .3rem; }
.menu a.boton--primario, .menu a.boton--primario:hover { color: var(--blanco); }
.menu a.boton--primario:hover { background: #0f5c3c; }
/* Menú plegable en pantallas estrechas, sin JavaScript: una casilla invisible lo abre. */
.menu-conmutador { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-boton { display: none; }
.migas { font-size: .86rem; color: var(--tinta-suave); }
.migas a { color: var(--tinta-suave); }
.resumen { font-size: 1.12rem; color: var(--azul-900); }
.tarjeta--enlace { display: block; text-decoration: none; color: var(--tinta); }
.tarjeta--enlace:hover { border-color: var(--verde-700); color: var(--tinta); }
.tarjeta--enlace h3, .tarjeta--enlace h2 { color: var(--azul-900); text-decoration: underline; text-underline-offset: .18em; }
.tarjeta--enlace p { margin: 0; color: var(--tinta-suave); font-size: .93rem; }
.filtros--web { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.filtros--web p { margin: 0 0 .6rem; }
.oferta h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.oferta__meta { color: var(--tinta-suave); font-size: .92rem; margin-bottom: .5rem; }
.oferta .indicadores { margin: .5rem 0; }
.pasos-articulo { padding-left: 1.3em; }
.pasos-articulo li { margin-bottom: .55em; }
details { border-top: 1px solid var(--linea); padding: .6rem 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 650; color: var(--azul-900); }
details p { margin: .5rem 0 0; }
.pie__fila { display: grid; gap: .6rem; }
.pie__fila p { margin: 0; }
section > h2 { margin-top: .4rem; }
.boton[disabled] { opacity: .55; }
/* Demo */
.pestanas { display: flex; flex-wrap: wrap; gap: .3rem; }
.pestanas button { font: inherit; font-weight: 650; cursor: pointer; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--azul-900); background: var(--blanco); color: var(--azul-900); }
.pestanas button[aria-selected="true"] { background: var(--azul-900); color: var(--blanco); }
.chat { max-width: 26rem; border: 1px solid var(--linea); border-radius: var(--radio); background: #efe9df; overflow: hidden; }
.chat__cabecera { background: #1f5c4a; color: var(--blanco); padding: .6rem .8rem; font-weight: 650; }
.chat__hilo { display: grid; gap: .45rem; padding: .8rem; max-height: 24rem; overflow-y: auto; }
.chat__msj { max-width: 85%; padding: .45rem .65rem; border-radius: 10px; font-size: .93rem; background: var(--blanco); white-space: pre-line; }
.chat__msj--yo { justify-self: end; background: #d9f3c6; }
.chat__opciones { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .8rem .6rem; }
.chat__opciones button { font: inherit; font-size: .84rem; cursor: pointer; border: 1px solid #1f5c4a; color: #1f5c4a; background: var(--blanco); border-radius: 999px; padding: .2rem .7rem; }
.chat__pie { display: flex; gap: .4rem; padding: .6rem .8rem; background: var(--blanco); }
.chat__pie input { flex: 1; }
.campo-error { color: var(--rojo); font-size: .86rem; font-weight: 650; display: block; }
tr.fila-activa td, tr.fila-activa th { background: var(--verde-050); }
/* El menú de la web tiene nueve entradas: se pliega antes que el de la aplicación. */
@media (max-width: 900px) {
  .menu-boton { display: inline-flex; align-items: center; padding: .45rem .9rem; border: 1.5px solid var(--azul-900); border-radius: var(--radio-s); font-weight: 650; cursor: pointer; color: var(--azul-900); }
  .menu-conmutador:focus-visible + .menu-boton { outline: 3px solid var(--verde-700); outline-offset: 2px; }
  .menu-conmutador:checked + .menu-boton { background: var(--azul-900); color: var(--blanco); }
  .cabecera .menu { display: none; flex-direction: column; align-items: stretch; padding-bottom: .5rem; }
  .menu-conmutador:checked ~ .menu { display: flex; }
  .cabecera .menu a { padding: .6rem .7rem; }
  .cabecera .menu { width: 100%; }
}
@media (max-width: 760px) {
  .heroe { margin-top: -1rem; padding: 2rem 0; }
  .menu .boton, .menu a.menu__espacio { margin-left: 0; }
}

/* ---------- Encargo 041: selector de idioma (los estilos base están en estilos.css) ---------- */
.cabecera__fila .idiomas { margin-left: auto; }
@media (min-width: 901px) { .cabecera__fila .idiomas { order: 3; margin-left: .4rem; } .cabecera__fila .menu { margin-left: auto; } }
@media (max-width: 900px) { .cabecera__fila .idiomas { order: 0; } .menu-boton { order: 1; } }

/* Encargo 045 (comercial): portada y catálogo */
.heroe__nota { font-size: .95rem; max-width: 42rem; opacity: .9; margin-top: .75rem; }
.ficha-producto__cuerpo { display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .ficha-producto__cuerpo { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; } }
.ficha-producto h3 { margin: 1rem 0 .25rem; font-size: 1rem; }
.captura-producto { margin: 0; } .captura-producto img { width: 100%; max-width: 16rem; height: auto; border: 1px solid var(--borde, #d5dde8); border-radius: .5rem; display: block; }

/* Encargo 046: los dos caminos de la portada («Quiero emigrar» y «Ya vivo en Países Bajos») */
.tarjeta--camino { border-left: .35rem solid var(--verde-700); }
.tarjeta--camino h3 { font-size: 1.25rem; }