/* ============================================================================
   anunciate.css — lo poco que la página «Anúnciate» necesita y no tiene ya el
   sitio (motor/styles.css: .doc, .aviso, .btn-solid, .btn-ghost, .tile…).
   ----------------------------------------------------------------------------
   Va en su propio fichero y se copia SOLO con el interruptor encendido
   (motor/precios-publicidad.json), para que styles.css siga saliendo igual byte
   a byte cuando está apagado.

   REGLAS DE LA CASA QUE SE APLICAN AQUÍ: nada de cápsulas (el radio es el
   --radius-sm de siempre, 11 px), aire entre bloques, tipografía y colores los
   del sitio —no se define ni una fuente ni un color nuevo fuera de los tokens—
   y todo tiene que leerse a 375 px sin que la página se desplace a los lados.
   Por eso la tabla de tramos deja de ser una tabla en el móvil y se lee como
   una lista, con el nombre de cada cifra delante (los data-label los escribe
   scripts/_anunciate.mjs).

   Al final de este fichero, el montador pega motor/anuncios.css: el ejemplo de
   anuncio de la página tiene que verse EXACTAMENTE como el anuncio de verdad,
   y la única forma de que no se separen es que compartan la misma hoja.
   ========================================================================= */

/* ---------- «Todavía no se puede contratar» (modo consulta) ----------
   Va lo primero de la página y tiene que verse antes que el precio. Ámbar,
   como el resto de los avisos del sitio (.graf__nota, .demo-note), no rojo: no
   es un error ni una alarma, es una advertencia honesta. */
.preparacion{margin:0 0 26px;padding:20px 22px;background:var(--amber-tint);border:1px solid #f0dcae;border-left:3px solid var(--amber);border-radius:var(--radius-sm)}
.preparacion h2{margin:0 0 10px!important;font-size:19px;color:#7a5314}
.preparacion p{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:#5f4110}
.preparacion ul{margin:0;padding-left:20px;font-size:15px;line-height:1.65;color:#5f4110}
.preparacion li{margin-bottom:8px}
.preparacion li:last-child{margin-bottom:0}
.preparacion b{color:#5a3d0d}
@media(max-width:560px){.preparacion{padding:17px 16px}.preparacion h2{font-size:18px}}

/* ---------- Tabla de tramos ---------- */
.tramos{width:100%;border-collapse:collapse;margin:0 0 6px;font-size:15px}
.tramos caption{caption-side:top;text-align:left;margin:0 0 12px;font-size:13.5px;color:var(--faint);line-height:1.6}
.tramos th,.tramos td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.tramos thead th{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-bottom:2px solid var(--line);white-space:nowrap}
.tramos tbody th{font-weight:600;color:var(--ink)}
.tramos tbody tr:last-child th,.tramos tbody tr:last-child td{border-bottom:0}
.tramos__consultar td{color:var(--muted);font-size:14.5px;line-height:1.6}
.tramos__consultar b{color:#7a5314}

@media(max-width:700px){
  .tramos,.tramos thead,.tramos tbody,.tramos tr,.tramos th,.tramos td{display:block}
  /* El pie de tabla tiene que dejar de ser `table-caption`: dentro de un bloque
     se queda en una columna de una palabra de ancho. */
  .tramos caption{display:block;width:100%}
  .tramos thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tramos tbody tr{margin:0 0 14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .tramos tbody tr:last-child{margin-bottom:0}
  .tramos th,.tramos td{padding:0;border-bottom:0}
  .tramos tbody th{font-size:16px;margin:0 0 10px}
  .tramos td{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
  .tramos td::before{content:attr(data-label);color:var(--faint);font-size:13.5px;font-weight:500}
  .tramos__consultar td{display:block}
  .tramos__consultar td::before{display:block;margin-bottom:4px}
}

/* ---------- Calculadora ---------- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);margin:6px 0 10px}
.calc__fila{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.calc__campo{flex:1 1 220px;min-width:0}
.calc__campo label{display:block;font-weight:600;font-size:14px;margin-bottom:7px}
.calc select,.calc input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;outline:none}
.calc select:focus,.calc input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint);background:var(--surface)}
.calc select:disabled{color:var(--faint);background:var(--line-2);cursor:not-allowed}
.calc__anadir{flex:0 0 auto}
.calc__ayuda{margin:14px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6}

/* Lo elegido. Rectángulos, no cápsulas: son fichas pequeñas, no etiquetas de
   filtro de una tienda. */
.calc__lista{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.calc__item{border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-sm);background:var(--surface-2);padding:14px 15px}
.calc__item--consultar{border-left-color:var(--amber);background:var(--amber-tint)}
.calc__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.calc__quien{font-weight:600;font-size:16px;line-height:1.35}
.calc__donde{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:2px}
.calc__quitar{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:6px 11px;border-radius:var(--radius-sm);cursor:pointer}
.calc__quitar:hover{border-color:var(--primary);color:var(--primary-d)}
.calc__cifras{list-style:none;margin:12px 0 0;padding:0;font-size:14.5px}
.calc__cifras li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-top:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.calc__cifras li:first-child{border-top:0}
.calc__cifras span{color:var(--muted)}
.calc__cifras b{color:var(--ink);font-weight:600}
.calc__cifras .calc__total{font-size:15.5px;border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.calc__aviso{margin:11px 0 0;font-size:14px;line-height:1.6;color:#7a5314}
.calc__lleno{margin:11px 0 0;padding:10px 12px;font-size:14px;line-height:1.6;background:var(--amber-tint);border:1px solid #f0dcae;border-radius:var(--radius-sm);color:#7a5314}
.calc__suma{margin:18px 0 0;padding:16px 17px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--primary-tint)}
.calc__suma p{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.calc__suma b{font-variant-numeric:tabular-nums}
.calc__fuente{margin:16px 0 0;font-size:12.5px;color:var(--faint);line-height:1.6}
.calc__fuente a{color:var(--faint)}
.calc__vacio{margin:20px 0 0;font-size:14.5px;color:var(--muted);line-height:1.65}

/* Sin JavaScript no hay calculadora: se dice, en vez de dejar un hueco mudo. */
.calc__sinjs{margin:0;padding:12px 14px;background:var(--amber-tint);border:1px solid #f0dcae;border-radius:var(--radius-sm);font-size:14px;color:#7a5314;line-height:1.6}

/* ---------- El ejemplo de anuncio ---------- */
.ejemplo{margin:0 0 6px;padding:22px 20px 24px;background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius-lg)}
.ejemplo__et{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ejemplo .pub{margin:0}
.ejemplo__falso{width:56px;height:56px;flex:none;background:#fff;border:1px solid #efe1c6;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:#8a5a12;letter-spacing:.02em}
.ejemplo__pie{margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- Formulario ---------- */
.aviso__elegido{margin:0 0 15px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-sm);background:var(--surface-2);font-size:14.5px;line-height:1.6;color:var(--ink)}
.aviso__elegido.es-pendiente{border-left-color:var(--amber);background:var(--amber-tint);color:#7a5314}
.aviso__campo textarea.aviso__largo{min-height:140px}
.aviso__legal{margin:16px 0 0;font-size:13px;color:var(--faint);line-height:1.65}
.aviso__legal a{color:var(--faint)}
.aviso__gracias{margin:0;padding:16px 18px;border:1px solid var(--primary-tint);border-left:3px solid var(--primary);border-radius:var(--radius-sm);background:#fbfdfd;font-size:15px;line-height:1.65}
.aviso__miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Pasos del proceso ---------- */
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso;display:grid;gap:14px}
.pasos li{counter-increment:paso;position:relative;padding:15px 17px 15px 54px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:15px;line-height:1.65;margin:0}
.pasos li::before{content:counter(paso);position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:7px;background:var(--primary-tint);color:var(--primary-d);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.pasos b{display:block;margin-bottom:3px}

/* ---------- «Qué no es» ---------- */
.nunca{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.nunca li{margin:0;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-sm);font-size:15px;line-height:1.65}

/* ---------- Preguntas frecuentes ---------- */
.faq{margin:0;padding:0}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:0 0 10px}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:15.5px;line-height:1.5;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;margin-left:14px;color:var(--primary-d);font-weight:700}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line-2)}
.faq__c{padding:14px 16px 4px}
.faq__c p{font-size:15px}

@media(max-width:560px){
  .calc,.aviso{padding:18px 16px}
  .calc__fila{gap:12px}
  .calc__anadir,.calc__anadir .btn-solid{width:100%;justify-content:center}
  .calc__cab{flex-direction:column;align-items:stretch}
  .calc__quitar{align-self:flex-start}
  .ejemplo{padding:18px 14px}
  .pasos li{padding:14px 15px 14px 50px}
}

@media print{.calc,.aviso{box-shadow:none}}

/* ---------- Publicidad local (los espacios del programa «Una publicidad
   accesible y para todos»; motor/anuncios.json, scripts/_anuncios.mjs) ----------

   REGLA DE ESTE BLOQUE: un anuncio no puede parecerse a una ficha. La ficha es
   blanca, con su categoría de color, su fuente, su fecha de comprobación y su
   botón; es lo que da valor al directorio y lo que alguien puede creerse. Un
   anuncio va sobre fondo arena, con la palabra «Publicidad» encima y a tamaño
   legible (13 px, no un asterisco), sin sombra, sin icono de categoría, sin
   fuente y sin fecha. Nada se mueve, nada tapa nada y nada sigue al hacer
   scroll: el logo lleva su tamaño escrito en la etiqueta, así que ocupa su sitio
   antes de llegar y la página no da un salto.

   SON TRES BANNERS FIJOS —arriba, en medio y en el pie— y ninguno va entre los
   resultados, así que ninguno comparte rejilla con las tarjetas: la regla que
   hacía falta para el anuncio intercalado (.pub--entre, que ocupaba la fila
   entera para no quedar del ancho de una ficha) ya no existe, porque ya no
   existe ese anuncio. Los tres se ven exactamente igual: no hay un hueco
   «destacado» ni una clase que valga más que otra. */
.pub{margin:26px 0;max-width:760px}
/* El del pie va dentro del pie de página, encima de los créditos. El pie no
   tiene fondo ni separación propia, así que el aire lo pone el anuncio: por
   arriba, el mismo que hay entre dos secciones (26 px), para que no se pegue a
   lo último que se ha leído; por abajo, un poco más, para despegarlo de los
   créditos y de los enlaces legales. */
.pub--pie{margin:26px 0 30px}
.pub__et{margin:0 0 7px;font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:#8a5a12}
.pub__caja{background:#fdf7ec;border:1px solid #e6d3ae;border-radius:var(--radius-sm);padding:16px}
.pub__enlace{display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:var(--ink)}
.pub__logo{width:56px;height:56px;flex:none;object-fit:contain;background:#fff;border:1px solid #efe1c6;border-radius:8px;padding:4px}
.pub__dice{display:flex;flex-direction:column;gap:4px;min-width:0}
.pub__quien{font-size:16.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.pub__texto{font-size:14.5px;line-height:1.55;color:var(--muted)}
.pub__ir{margin-top:3px;font-size:13.5px;font-weight:600;color:#8a5a12;text-decoration:underline}
.pub__enlace:hover .pub__quien{text-decoration:underline}
.pub__nota{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.pub__nota a{color:var(--faint);text-decoration:underline}
.pub__nota a:hover{color:var(--ink)}
@media(max-width:560px){
  .pub__caja{padding:14px}
  .pub__enlace{gap:11px}
  .pub__logo{width:44px;height:44px}
  .pub__quien{font-size:16px}
}
@media print{.pub{display:none}}