/* ============================================================
   Botones de COTIZAR + franjas + tarjetas de precios alineadas
   (10-oct-2026, Beto: "muchos botones de cotizar, parpadeantes y llamativos"
   y "esas card las siento mal, arréglalas y acomódalas").
   Se carga DESPUÉS de styles.css y le gana por orden, no por !important.

   "Parpadeante" = pulso suave (aro que se expande + latido + destello), un
   ciclo cada ~2.4 s. NO es parpadeo duro: más de 3 destellos por segundo es
   lo que WCAG 2.3.1 prohíbe y cansa la vista; esto queda muy por debajo.
   Con "reducir movimiento" activado en el sistema, todo queda quieto pero
   conserva el color y el contraste.
   ============================================================ */

:root {
  --cot-1: #ffb52e;
  --cot-2: #f08a1c;
  --cot-texto: #1d1204;        /* 7.3:1 sobre --cot-2 y 10:1 sobre --cot-1 */
  --cot-aro: rgba(240, 138, 28, .6);
}

/* ---- El botón: ámbar sólido, letra oscura, destello que lo cruza ---- */
body :is(.cta-pill, .cta-fija-movil__btn--whatsapp, .precio-fila__cta, .cotizar-pulso, #cta-hero, #cta-cierre, a.boton.cta-servicio) {
  position: relative;
  background: linear-gradient(110deg, var(--cot-2) 0%, var(--cot-1) 40%, #ffe3a6 50%, var(--cot-1) 60%, var(--cot-2) 100%);
  background-size: 260% 100%;
  color: var(--cot-texto);
  font-weight: 800;
  border: 1px solid rgba(143, 95, 38, .55);
  box-shadow: 0 10px 24px -10px rgba(143, 95, 38, .85), 0 0 0 0 var(--cot-aro);
  animation: cotizar-latido 2.4s ease-in-out infinite, cotizar-brillo 3.2s linear infinite;
}
body :is(.cta-pill, .cta-fija-movil__btn--whatsapp, .precio-fila__cta, .cotizar-pulso, #cta-hero, #cta-cierre, a.boton.cta-servicio):hover,
body :is(.cta-pill, .cta-fija-movil__btn--whatsapp, .precio-fila__cta, .cotizar-pulso, #cta-hero, #cta-cierre, a.boton.cta-servicio):focus-visible {
  animation-play-state: paused;
  filter: brightness(1.05);
}

@keyframes cotizar-latido {
  0%   { transform: scale(1);     box-shadow: 0 10px 24px -10px rgba(143, 95, 38, .85), 0 0 0 0 var(--cot-aro); }
  55%  { transform: scale(1.035); box-shadow: 0 10px 24px -10px rgba(143, 95, 38, .85), 0 0 0 14px rgba(240, 138, 28, 0); }
  100% { transform: scale(1);     box-shadow: 0 10px 24px -10px rgba(143, 95, 38, .85), 0 0 0 0 rgba(240, 138, 28, 0); }
}
@keyframes cotizar-brillo {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body :is(.cta-pill, .cta-fija-movil__btn--whatsapp, .precio-fila__cta, .cotizar-pulso, #cta-hero, #cta-cierre, a.boton.cta-servicio) {
    animation: none;
    background: var(--cot-1);
  }
}

/* ---- Franja de cotizar entre secciones ---- */
.cotizar-franja {
  background: linear-gradient(135deg, #1b140c, #2b1d0e);
  border-block: 1px solid rgba(240, 138, 28, .35);
  padding: 24px 0;
}
.cotizar-franja__fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; }
.cotizar-franja__texto {
  margin: 0; max-width: 36ch; color: #f5ecdc;
  font-family: var(--f-display); font-weight: 600; line-height: 1.25;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}
@media (max-width: 640px) {
  .cotizar-franja { padding: 22px 0; }
  .cotizar-franja__fila { flex-direction: column; align-items: stretch; text-align: center; }
  .cotizar-franja .boton { width: 100%; }
}

/* ---- Tarjetas de precios: la etiqueta "Más pedido" sobre la foto ---- */
.precio-fila__img { position: relative; }
.precio-fila__img .precio-fila__badge {
  position: absolute; top: 10px; left: 12px; z-index: 2; margin: 0;
  padding: 4px 11px; border-radius: 999px;
  background: var(--cot-1); color: var(--cot-texto);
}
.precio-fila__detalle { line-height: 1.55; }

/* ---- Tarjetas de precios alineadas: cada fila (foto, título, precio,
   etiqueta, texto, botones) arranca a la MISMA altura en todas las
   tarjetas de una fila. Antes solo se igualaba el fondo, y por eso
   "Llamadas automatizadas" (2 renglones) empujaba todo lo demás. ---- */
@media (min-width: 681px) {
  .precios-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; align-items: stretch; }
  .precio-fila:not(.precio-fila--entrada) {
    display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 8px;
    margin-bottom: 20px; flex: none;
  }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__head { display: contents; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__img { grid-row: 1; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__head h3 { grid-row: 2; align-self: end; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__cifra { grid-row: 3; align-self: start; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__arranque { grid-row: 4; align-self: start; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__detalle { grid-row: 5; align-self: start; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__chips { grid-row: 6; align-self: start; }
  .precio-fila:not(.precio-fila--entrada) .precio-fila__acciones { grid-row: 7; align-self: end; min-height: 0; margin-top: 8px; }
  .precio-fila--entrada { grid-column: 1 / -1; margin-bottom: 0; }
}
@media (min-width: 1300px) {
  .precios-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}