/* Zona publica de GenieAutoDesigner: guias y herramientas.
 *
 * Es la UNICA parte de la web que lleva publicidad, y por eso es la unica que
 * tiene su propia hoja. Hereda las variables de licito.css (mismo color, misma
 * tipografia) pero no arrastra nada del lienzo WebGL de la portada: aqui la
 * pagina tiene que pintarse entera en cuanto llega el HTML, porque lo que se
 * mide en esta zona es el LCP y el CLS.
 *
 * Regla de los huecos de anuncio: TODOS reservan su altura por CSS antes de
 * que el anuncio llegue. Un hueco sin altura reservada desplaza el texto
 * cuando carga, y ese desplazamiento es exactamente lo que penaliza el CLS.
 */

/* ---------- maqueta ---------- */
.publico{background:var(--fondo)}
.publico-cuerpo{max-width:1180px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
  align-items:start}
.publico-cuerpo.sin-lado{grid-template-columns:minmax(0,1fr);max-width:760px}
.columna{min-width:0;padding:8px 0 64px}
.lado{position:sticky;top:76px;padding:8px 0 40px}

@media (max-width:980px){
  .publico-cuerpo{grid-template-columns:minmax(0,1fr);gap:0;max-width:760px}
  /* El lateral no desaparece en movil: se cuela DEBAJO del contenido. Un
     `display:none` de un hueco de anuncio deja el `<ins>` en la pagina sin
     poder pintarse, y AdSense lo cuenta como espacio vacio. */
  .lado{position:static;padding:0 0 48px}
}

/* ---------- cabecera propia ---------- */
.cab-publico{position:sticky;top:0;z-index:30;background:rgba(247,246,240,.86);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--linea)}
.cab-publico .envoltorio{display:flex;align-items:center;gap:20px;height:58px;
  max-width:1180px}
.cab-publico .nav{margin-left:4px;gap:2px}
.cab-publico .dcha{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:560px){
  .cab-publico .envoltorio{gap:10px}
  .cab-publico .nav a{padding:8px 7px;font-size:13px}
  .cab-publico .btn{padding:9px 13px;font-size:13px}
}

/* ---------- migas ---------- */
.migas{font-size:13px;color:var(--suave);padding:18px 0 10px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.migas a{color:var(--suave)}
.migas a:hover{color:var(--tinta)}
.migas span[aria-current]{color:var(--tinta)}

/* ---------- articulo ---------- */
.articulo h1{margin:0 0 10px}
.ficha{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--tenue);
  padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--linea)}
.entradilla{font-size:18px;line-height:1.6;color:var(--texto);margin:20px 0 4px}
.articulo h2{margin:38px 0 12px;font-size:23px;scroll-margin-top:72px}
.articulo h3{margin:26px 0 8px;font-size:16px;scroll-margin-top:72px}
.articulo p{margin:0 0 14px;max-width:68ch}
.articulo ul,.articulo ol{margin:0 0 16px;padding-left:22px;max-width:68ch}
.articulo li{margin:0 0 7px}
.articulo strong{color:var(--tinta)}

/* Cita del articulado. Es la pieza que da autoridad a la pagina y la que
   separa una guia util de un relleno: si una afirmacion legal no lleva su
   articulo detras, no se escribe. */
.norma{border-left:3px solid var(--acento);background:var(--acento-f);
  padding:13px 16px;border-radius:0 var(--r) var(--r) 0;margin:0 0 18px;
  font-size:14px;max-width:68ch}
.norma b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acento-2);margin-bottom:5px}

.aviso{border:1px solid var(--linea);background:var(--ambar-f);
  border-radius:var(--r);padding:13px 16px;margin:0 0 18px;font-size:14px;
  max-width:68ch}

/* ---------- indice de la pagina ---------- */
.indice{border:1px solid var(--linea);background:var(--blanco);
  border-radius:var(--r-g);padding:16px 18px;margin:24px 0 8px}
.indice b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);display:block;margin-bottom:9px}
.indice ol{margin:0;padding-left:20px;font-size:14px}
.indice li{margin:0 0 5px}

/* ---------- tabla ---------- */
.tabla-caja{overflow-x:auto;margin:0 0 20px;-webkit-overflow-scrolling:touch}
table.datos{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
table.datos th,table.datos td{border-bottom:1px solid var(--linea);
  padding:9px 12px;text-align:left;vertical-align:top}
table.datos th{background:var(--blanco);color:var(--tinta);font-weight:600;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase}
table.datos td.num{text-align:right;font-variant-numeric:tabular-nums}
table.datos tr.marcada td{background:var(--rojo-f)}

/* ---------- herramienta ---------- */
.herramienta{border:1px solid var(--linea);background:var(--blanco);
  border-radius:var(--r-g);padding:22px;margin:22px 0 26px;box-shadow:var(--sombra)}
.herramienta h2{margin:0 0 4px;font-size:20px}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin:18px 0}
.campo-h{display:flex;flex-direction:column;gap:5px}
.campo-h label{font-size:13px;color:var(--suave);font-weight:600}
.campo-h input,.campo-h select,.campo-h textarea{
  font:15px/1.4 var(--fuente);color:var(--tinta);background:var(--fondo);
  border:1px solid var(--linea);border-radius:10px;padding:10px 12px;width:100%}
.campo-h input:focus,.campo-h select:focus,.campo-h textarea:focus{
  outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}
.campo-h .pista{font-size:12px;color:var(--tenue)}
.campo-h.ancho{grid-column:1/-1}
.campo-h textarea{min-height:104px;resize:vertical;font-variant-numeric:tabular-nums}
.acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* El resultado reserva sitio desde el principio. Si apareciera de la nada,
   empujaria hacia abajo todo lo que tiene debajo —incluido un anuncio— y eso
   cuenta como desplazamiento de diseno aunque lo provoque el propio usuario. */
.resultado{margin-top:18px;border-top:1px solid var(--linea);padding-top:16px;
  min-height:96px}
.resultado[data-vacio="si"]{color:var(--tenue);font-size:14px}
.cifra{font-size:30px;font-weight:600;color:var(--tinta);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.cifra small{display:block;font-size:12px;font-weight:500;color:var(--tenue);
  letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;margin-bottom:18px}
.bandera{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;
  border-radius:999px;letter-spacing:.02em}
.bandera.ok{background:var(--verde-f);color:var(--verde)}
.bandera.mal{background:var(--rojo-f);color:var(--rojo)}
.bandera.duda{background:var(--ambar-f);color:var(--ambar)}
.nota-calculo{font-size:13px;color:var(--suave);margin-top:14px;max-width:68ch}

/* ---------- huecos de anuncio ---------- */
/* La altura minima NO es decorativa: es lo que impide que el texto salte
   cuando el anuncio llega. Se declara por tamano de pantalla porque el
   formato que sirve AdSense cambia con el ancho. */
.anuncio{display:block;margin:30px 0;text-align:center;overflow:hidden}
.anuncio:before{content:"Publicidad";display:block;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);
  margin-bottom:6px}
.anuncio ins{display:block;width:100%}
.anuncio.en-texto{min-height:280px}
.anuncio.al-final{min-height:280px}
.anuncio.lateral{min-height:600px;margin:0}
@media (max-width:980px){
  .anuncio.lateral{min-height:280px;margin:30px 0}
}
@media (max-width:560px){
  .anuncio.en-texto,.anuncio.al-final{min-height:250px}
}
/* Sin consentimiento o sin AdSense configurado el hueco no ocupa nada: no se
   ensena un rectangulo vacio con la palabra «Publicidad» encima. */
.anuncio[hidden],.anuncio.apagado{display:none!important}

/* ---------- llamada al producto ---------- */
/* Es lo que convierte una visita de guia en un cliente de 40 EUR, asi que va
   SIEMPRE por encima del anuncio del final, nunca por debajo. */
.llamada-producto{border:1px solid var(--linea);background:var(--blanco);
  border-radius:var(--r-g);padding:24px;margin:36px 0 10px;box-shadow:var(--sombra)}
.llamada-producto h2{margin:0 0 8px;font-size:21px}
.llamada-producto p{margin:0 0 16px;color:var(--texto);max-width:56ch}

/* ---------- relacionados y siguiente ---------- */
.relacionados{margin:34px 0 0}
.relacionados h2{font-size:17px;margin:0 0 14px;color:var(--suave);
  letter-spacing:.02em;text-transform:uppercase;font-size:12px;font-weight:700}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px}
.tarjeta{display:block;border:1px solid var(--linea);background:var(--blanco);
  border-radius:var(--r-g);padding:16px 18px;color:var(--texto);
  transition:border-color .15s,transform .15s}
.tarjeta:hover{border-color:var(--acento);text-decoration:none;transform:translateY(-2px)}
.tarjeta b{display:block;color:var(--tinta);font-size:15px;margin-bottom:5px;
  letter-spacing:-.01em}
.tarjeta span{font-size:13px;color:var(--suave);display:block}
.tarjeta em{font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acento);display:block;margin-bottom:7px}

.siguiente{display:flex;justify-content:space-between;gap:14px;margin:30px 0 0;
  padding-top:20px;border-top:1px solid var(--linea);font-size:14px;flex-wrap:wrap}
.siguiente a{max-width:46%}
.siguiente span{display:block;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue)}
@media (max-width:560px){.siguiente a{max-width:100%}}

/* ---------- preguntas ---------- */
.preguntas{margin:34px 0 0}
.preguntas details{border-bottom:1px solid var(--linea);padding:14px 0}
.preguntas summary{cursor:pointer;font-weight:600;color:var(--tinta);
  list-style:none;display:flex;justify-content:space-between;gap:12px;
  align-items:flex-start}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary:after{content:"+";color:var(--acento);font-weight:400;
  font-size:19px;line-height:1;flex:0 0 auto}
.preguntas details[open] summary:after{content:"\2013"}
.preguntas details > :not(summary){margin-top:10px;font-size:14.5px;
  max-width:68ch;color:var(--texto)}

/* ---------- indices de seccion ---------- */
.portada-seccion{padding:30px 0 20px}
.portada-seccion h1{margin-bottom:12px}
.portada-seccion .entradilla{max-width:62ch}
.grupo{margin:34px 0 0}
.grupo h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 14px;font-weight:700}

/* ---------- pie ---------- */
.pie-publico{border-top:1px solid var(--linea);background:var(--blanco);
  padding:34px 0;font-size:13.5px;color:var(--suave)}
.pie-publico .envoltorio{max-width:1180px;display:flex;flex-wrap:wrap;gap:26px;
  justify-content:space-between}
.pie-publico b{display:block;color:var(--tinta);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px}
.pie-publico ul{list-style:none;margin:0;padding:0}
.pie-publico li{margin-bottom:6px}
.pie-publico a{color:var(--suave)}
.pie-publico a:hover{color:var(--tinta)}
.pie-legal{max-width:1180px;margin:22px auto 0;padding:16px 20px 0;
  border-top:1px solid var(--linea);font-size:12.5px;color:var(--tenue)}

/* ---------- accesibilidad ---------- */
.saltar{position:absolute;left:-9999px;top:0;background:var(--acento);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r) 0;z-index:100}
.saltar:focus{left:0}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- aviso de traduccion ----------
 * Solo se ve cuando la pagina NO se lee en castellano (lo enseña i18n.js por
 * el evento `licito:idioma`). Va con `hidden` puesto en el HTML: asi no
 * parpadea en la visita normal, que es la mayoria. */
.aviso-idioma{
  margin:0 0 14px;padding:8px 12px;border-left:3px solid var(--marca,#fe3d06);
  background:rgba(254,61,6,.06);font-size:.9rem;line-height:1.45;
  color:var(--texto-suave,#5a4a41)}
.aviso-idioma[hidden]{display:none}
/* El selector del pie va debajo de la columna legal, no pegado al texto. */
.pie-publico .idioma-caja{display:inline-flex;margin-top:12px}