/* =============================================================================
   ANUNCIOS INFORMATIVOS DEL PANEL

   El objetivo visual es que se lea como una tarjeta más del panel, no como un
   banner. Por eso: sin degradados llamativos, sin animación de entrada, sin
   colores fuera de la paleta. Lo único que la distingue del resto es una
   franja de acento de 3px a la izquierda.

   Los colores salen todos de tokens `--color-*`. Ojo con la regla del
   proyecto: para texto se usa `--color-*-text`, nunca el acento a secas,
   porque el acento sobre fondo claro no contrasta.
   ============================================================================= */

.anuncio {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;

  background: var(--color-bg-1);
  border: 1px solid var(--color-border-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

/* En móvil la imagen encima del texto: en una columna de 340px, una foto
   flotando a la izquierda deja el texto en un canal de 180px ilegible. */
@media (max-width: 640px) {
  .anuncio { flex-direction: column; }
}

/* La imagen se apila ENCIMA del emoji, que está siempre en el DOM. Si la
   imagen falla, se borra a sí misma y el emoji queda a la vista sin que haya
   que construir nada desde un manejador en línea. */
.anuncio-visual {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
/* Al ocupar los 120px de la imagen, el emoji tiene que crecer con el hueco.
   Con el 1.9rem de la tarjeta pequeña se queda perdido en el centro de un
   cuadro vacío, y la reserva parece un error en vez de una alternativa. */
.anuncio-visual .anuncio-emoji {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: 3.2rem;
}
.anuncio-img {
  position: relative;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-md, 10px);
  flex-shrink: 0;
  background: var(--color-bg-2);
}

.anuncio-emoji {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background: var(--color-bg-2);
  border-radius: var(--radius-md, 10px);
}

.anuncio-texto { flex: 1; min-width: 0; }

.anuncio-titulo {
  font-size: var(--font-lg);
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--color-text-1);
}

.anuncio-bajada {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--font-sm);
  line-height: 1.5;
}

/* El detalle va plegado. `summary` con aspecto de enlace y no de botón:
   es una opción secundaria y no debe competir con la llamada a la acción. */
.anuncio-detalle { margin-top: var(--space-3); }

.anuncio-detalle summary {
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--color-indigo-text);
  list-style: none;
}
.anuncio-detalle summary::-webkit-details-marker { display: none; }
.anuncio-detalle summary::before { content: '▸ '; }
.anuncio-detalle[open] summary::before { content: '▾ '; }

.anuncio-detalle p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-2);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.anuncio-acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* "No me interesa" tiene que existir y verse, pero no invitar. Texto plano,
   sin borde ni fondo: quien lo busca lo encuentra, quien no, no lo pisa. */
.anuncio-no {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text-3, var(--color-text-2));
  text-decoration: underline;
}
.anuncio-no:hover { color: var(--color-text-1); }

.anuncio-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-3, var(--color-text-2));
  font-size: 0.9rem;
  line-height: 1;
}
.anuncio-cerrar:hover {
  background: var(--color-bg-2);
  color: var(--color-text-1);
}

/* ── Formulario de contacto ───────────────────────────────────────────── */

.anuncio-form { flex: 1; min-width: 0; }

.anuncio-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
@media (max-width: 640px) {
  .anuncio-campos { grid-template-columns: 1fr; }
}

.anuncio-form textarea { resize: vertical; width: 100%; }

.anuncio-gracias { border-left-color: var(--color-success, #16a34a); }

/* El enlace al catálogo. Terciario: por detrás del botón principal y del
   "no me interesa", porque es una invitación a explorar, no una acción. */
.anuncio-mas {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--color-indigo-text);
}
.anuncio-mas:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .anuncio-mas { margin-left: 0; }
}

/* =============================================================================
   FORMATO BANNER

   La imagen al ancho completo con el texto encima. El velo oscuro no es
   decorativo: sin él, el título blanco sobre una imagen clara se vuelve
   ilegible, y quien sube la imagen desde el panel no tiene forma de saber
   qué contraste va a quedar.
   ============================================================================= */

.anuncio-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  margin-bottom: var(--space-6);
  min-height: 210px;
  display: flex;
  align-items: center;

  background-color: var(--color-bg-2);
  background-size: cover;
  background-position: center;
}

.anuncio-banner-velo {
  position: absolute;
  inset: 0;
  /* Más opaco a la izquierda, que es donde va el texto, y casi limpio a la
     derecha para que la imagen se siga viendo. */
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.15) 100%);
}
@media (max-width: 640px) {
  /* En móvil el texto ocupa todo el ancho, así que el velo también. */
  .anuncio-banner-velo { background: rgba(0,0,0,.68); }
}

.anuncio-banner-texto {
  position: relative;
  padding: var(--space-6);
  max-width: 620px;
}

.anuncio-banner-etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.anuncio-banner-titulo {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.anuncio-banner-bajada {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: var(--font-sm);
  line-height: 1.55;
  max-width: 52ch;
}

/* Sobre el velo oscuro los tokens de texto del tema no sirven: en modo claro
   son grises oscuros y desaparecerían. Aquí el fondo lo ponemos nosotros y
   siempre es oscuro, así que el texto va en blanco fijo. */
.anuncio-no-claro     { color: rgba(255,255,255,.8); }
.anuncio-no-claro:hover { color: #fff; }
.anuncio-mas-claro    { color: #fff; }
.anuncio-cerrar-claro { color: rgba(255,255,255,.85); }
.anuncio-cerrar-claro:hover { background: rgba(255,255,255,.18); color: #fff; }

/* =============================================================================
   CATÁLOGO DE SERVICIOS

   Rejilla de tarjetas uniformes: misma altura de pie, misma jerarquía, el
   botón siempre abajo del todo. Es lo que hace que un listado se lea como un
   catálogo y no como una sucesión de avisos de distinto tamaño.
   ============================================================================= */

.cat-cabecera {
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-2);
}

.cat-h2 {
  font-size: var(--font-xl);
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--color-text-1);
}

.cat-sub {
  margin: 0;
  color: var(--color-text-2);
  font-size: var(--font-sm);
  line-height: 1.6;
  max-width: 62ch;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-1);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.cat-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* Mismo apilado que en la tarjeta: emoji debajo, imagen encima. */
.cat-visual { position: relative; height: 140px; }
.cat-visual .cat-emoji { position: absolute; inset: 0; }

.cat-img {
  position: relative;
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-2);
}

/* Más grande que en la tarjeta suelta: aquí convive en rejilla con tarjetas
   que sí llevan foto a sangre, y un emoji pequeño en un cuadro pálido rompe
   la uniformidad que hace que un listado se lea como catálogo. */
.cat-emoji {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--color-bg-2);
}

.cat-body { padding: var(--space-5); flex: 1; }

.cat-titulo {
  font-size: var(--font-lg);
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--color-text-1);
  line-height: 1.3;
}

.cat-bajada {
  margin: 0 0 var(--space-3);
  color: var(--color-text-2);
  font-size: var(--font-sm);
  line-height: 1.5;
}

/* El cuerpo completo, recortado a cuatro líneas. En un catálogo la altura
   despareja entre tarjetas es lo que lo hace parecer improvisado. */
.cat-cuerpo {
  margin: 0;
  color: var(--color-text-3, var(--color-text-2));
  font-size: var(--font-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-pie {
  padding: 0 var(--space-5) var(--space-5);
}
.cat-pie .btn { width: 100%; }

.cat-pedido {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-md, 10px);
  background: var(--color-bg-2);
  color: var(--color-text-2);
  font-size: var(--font-sm);
  font-weight: 700;
}

/* El formulario dentro de una tarjeta del catálogo: sin el margen ni el
   borde que lleva cuando vive en la ranura suelta del panel. */
.cat-card .anuncio-form { padding: var(--space-5); }
.cat-card .anuncio-campos { grid-template-columns: 1fr; }