html { scroll-behavior: smooth; }

:root {
  --purple: #2E038C;
  --green: #8DBF41;
  --orange: #A64D2D;
  --neon-green: #52FD00;

  /* ===== Paleta por paquete (inspirada en tailwind) ===== */
  --feature-50:   #f3f4f6;  /* gray-100 */
  --feature-700:  #374151;  /* gray-700 */

  --cuates-50:    #dcfce7;  /* green-100 */
  --cuates-700:   #15803d;  /* green-700 */

  --jirafita-50:  #cffafe;  /* cyan-100 */
  --jirafita-700: #0e7490;  /* cyan-700 */

  --changoton-50: #ffedd5;  /* orange-100 */
  --changoton-700:#c2410c;  /* orange-700 */

  --elefanton-50: #fce7f3;  /* pink-100 */
  --elefanton-500:#ec4899;  /* pink-500 (tono principal) */

  --leoncito-50:  #dbeafe;  /* blue-100 */
  --leoncito-700: #1d4ed8;  /* blue-700 */

  --col-border:   #e5e7eb;  /* gray-200 para divisiones sutiles */
}

/* ===== Botón CTA ===== */
.btn-primary {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  background-color: var(--neon-green);
  color: #000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform .2s ease;
  animation: pulse 4s ease-in-out infinite;
}
.btn-primary:hover,
.btn-primary:focus { transform: scale(1.05); outline: none; }

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* ===== Tarjetas ===== */
.card {
  background-color: transparent;
  padding: 0rem;
  border-style: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform .2s ease;
}
.card img {
  width: 100%;
  height: clamp(180px, 30vw, 220px);
  object-fit: cover;
  border-radius: .5rem .5rem 0 0;
}
.card:hover, .card:focus-within { transform: translateY(-5px); }

/* ===== Animación globos (si aplica) ===== */
@keyframes float {
  0% { transform: translateY(0) translateX(0); opacity: 1; }
  50%{ transform: translateY(-30px) translateX(10px); opacity: .8; }
  100%{ transform: translateY(0) translateX(0); opacity: 1; }
}
.balloon { animation: float 6s ease-in-out infinite; }

/* ===== Mapa (si aplica) ===== */
.map-container, figure.map-container { position: relative; padding-top: 56.25%; }
.map-container iframe, figure.map-container iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ===== Blockquote ===== */
blockquote {
  border-left: 4px solid var(--purple);
  padding-left: 1rem; font-style: italic; color: #555;
  position: relative; margin: 1.5rem 0;
}
blockquote::before, blockquote::after {
  font-size: 2rem; color: var(--purple); position: absolute;
}
blockquote::before { content: "“"; left: -0.5rem; top: -0.5rem; }
blockquote::after  { content: "”"; right: -0.5rem; bottom: -0.5rem; }

/* ===== WhatsApp FAB ===== */
.whatsapp-button {
  position: fixed; bottom: 1.25rem; right: 1.25rem;
  width: 3.75rem; height: 3.75rem; background-color: #25D366;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: transform .2s ease; z-index: 1000;
}
.whatsapp-button:hover, .whatsapp-button:focus { transform: scale(1.1); outline: none; }
.whatsapp-icon { width: 1.5rem; height: 1.5rem; }

@media (max-width: 640px){
  .btn-primary { width: 100%; text-align: center; }
}

form { margin: 0; padding: 0; }

.servicio-swiper .swiper-slide img {
  width: 100%;
  min-height: clamp(200px, 40vh, 288px);
  object-fit: cover;
  border-radius: .5rem .5rem 0 0;
  display: block;
}

/* ===== Carruseles de paquetes ===== */
.pkg-frame { position: relative; width: 100%; overflow: hidden; border-radius: .75rem; background: #fff; }
.pkg-frame .carousel-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =================================================================
   COMPARADOR DE PACHANGUITAS — Colores por columna + filas de precio
   ================================================================= */
.table-pkgs { border-collapse: separate; border-spacing: 0; }
.table-pkgs thead th,
.table-pkgs tbody td { border-right: 1px solid var(--col-border); }
.table-pkgs thead th:last-child,
.table-pkgs tbody td:last-child { border-right: none; }

/* 1ª columna (Características) */
.table-pkgs thead th.col-feature { background: var(--feature-50); color: var(--feature-700); }
.table-pkgs tbody td:first-child { background: var(--feature-50); color: #111827; text-align: left; }

/* Columnas por paquete: fondo suave en todo el cuerpo + encabezado en suave con texto fuerte */
.table-pkgs thead th.col-cuates    { background: var(--cuates-700);    color: var(--cuates-700); }
.table-pkgs thead th.col-jirafita  { background: var(--jirafita-700);  color: var(--jirafita-700); }
.table-pkgs thead th.col-changoton { background: var(--changoton-700); color: var(--changoton-700); }
.table-pkgs thead th.col-elefanton { background: var(--elefanton-700); color: var(--elefanton-500); }
.table-pkgs thead th.col-leoncito  { background: var(--leoncito-700);  color: var(--leoncito-700); }

.table-pkgs td.col-cuates    { background: var(--cuates-50); }
.table-pkgs td.col-jirafita  { background: var(--jirafita-50); }
.table-pkgs td.col-changoton { background: var(--changoton-50); }
.table-pkgs td.col-elefanton { background: var(--elefanton-50); }
.table-pkgs td.col-leoncito  { background: var(--leoncito-50); }

/* Filas de precio: bloques con color fuerte */
.table-pkgs tr.price-pp td.col-cuates,
.table-pkgs tr.price-total td.col-cuates    { background: var(--cuates-700); color: #fff; }
.table-pkgs tr.price-pp td.col-jirafita,
.table-pkgs tr.price-total td.col-jirafita  { background: var(--jirafita-700); color: #fff; }
.table-pkgs tr.price-pp td.col-changoton,
.table-pkgs tr.price-total td.col-changoton { background: var(--changoton-700); color: #fff; }
.table-pkgs tr.price-pp td.col-elefanton,
.table-pkgs tr.price-total td.col-elefanton { background: var(--elefanton-500); color: #fff; }
.table-pkgs tr.price-pp td.col-leoncito,
.table-pkgs tr.price-total td.col-leoncito  { background: var(--leoncito-700); color: #fff; }

/* Tipografía y alineación en filas de precio */
.table-pkgs tr.price-pp td    { font-weight: 800; font-size: 1rem;   text-align: center; }
.table-pkgs tr.price-total td { font-weight: 900; font-size: 1.15rem; text-align: center; }

/* Sticky header cuando hay scroll horizontal en móviles */
.table-pkgs thead th { position: sticky; top: 0; z-index: 1; }

/* En móviles: más respiro vertical */
@media (max-width: 640px){
  .table-pkgs td, .table-pkgs th { padding-top: .9rem; padding-bottom: .9rem; }
}