/* ============================================================
   TRANSICIONES (set 2026) — movimiento suave y coherente en toda la web
   ============================================================ */
:root{
  --tr-ease: cubic-bezier(.16, 1, .3, 1);   /* salida suave */
  --tr-dur: .8s;
}

html{ scroll-behavior: smooth; }

/* --- Salida de página (la página nunca se oculta al cargar) --- */
html.tr-js body{ transition: opacity .25s ease; }
html.tr-js.tr-leaving body{ opacity: 0; }

/* --- Aparición al hacer scroll --- */
html.tr-js .tr-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease);
  transition-delay: var(--tr-delay, 0s);
}
html.tr-js .tr-reveal.tr-in{ opacity: 1; transform: none; }

/* Tarjetas del catálogo: de lado a abajo, más suave */
.card{
  transform: translateY(28px) !important;
  transition: opacity var(--tr-dur) var(--tr-ease), transform var(--tr-dur) var(--tr-ease) !important;
}
.card.show{ transform: none !important; }
header .card{ opacity: 1; transform: none !important; }

/* --- Interacciones (hover) --- */
a, button, .btn, input, textarea, select{
  transition: color .25s ease, background-color .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s var(--tr-ease), opacity .25s ease;
}
.btn:hover, button[type="submit"]:hover{ transform: translateY(-2px); }
.btn:active, button[type="submit"]:active{ transform: translateY(0) scale(.98); }
input:focus, textarea:focus, select:focus{ box-shadow: 0 0 0 3px rgba(17,17,17,.08); }

/* Imágenes de tarjetas: zoom lento */
.card img, .plano img, .gallery-container img{
  transition: transform .9s var(--tr-ease), filter .6s ease;
}
.card:hover img{ transform: scale(1.04); }

/* Tarjetas de información y planos: se elevan */
.sobre-item, .plano, .info-item{
  transition: transform .45s var(--tr-ease), box-shadow .45s var(--tr-ease), border-color .3s ease;
}
.sobre-item:hover, .plano:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,16,16,.08);
}
.plano button{ overflow: hidden; }
.plano:hover img{ transform: scale(1.02); }

/* Zoom de planos: fundido */
.plano-zoom{ display: flex !important; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.plano-zoom.show{ opacity: 1; visibility: visible; }
.plano-zoom img{ transform: scale(.96); transition: transform .45s var(--tr-ease); }
.plano-zoom.show img{ transform: none; }

/* FAQ: apertura suave */
details > *:not(summary){ animation: tr-faq .45s var(--tr-ease); }
@keyframes tr-faq{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }

/* Botón WhatsApp: entrada */
.wa-float{ animation: tr-wa .7s var(--tr-ease) 1s both; }
@keyframes tr-wa{ from{ opacity: 0; transform: translateY(20px) scale(.9); } to{ opacity: 1; transform: none; } }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html.tr-js .tr-reveal{ opacity: 1; transform: none; }
}

/* ============================================================
   RETÍCULA COMÚN (set 2026): mismos márgenes laterales que las
   fotos y la cabecera, para que todo quede alineado
   ============================================================ */
:root{ --edge: calc(5vw + 10px); }
.info, .sobre, .planos{
  max-width: none !important;
  padding-left: var(--edge) !important;
  padding-right: var(--edge) !important;
  box-sizing: border-box;
}

/* ============================================================
   TIPOGRAFÍA COMÚN (set 2026): Poppins en toda la web
   ============================================================ */
body, button, input, select, textarea{ font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important; }
h1, h2, h3{ font-weight: 600; }

/* ============================================================
   PRECIOS (set 2026)
   ============================================================ */
.card .meta{ flex-direction: column; align-items: flex-start; gap: 4px; }
.card .precio{ font-size: 14px; font-weight: 600; color: #111; letter-spacing: .01em; }
.card .precio[data-price-mode="consult"]{ color: #5b5b5b; font-weight: 500; }

.precio-box{
  max-width: 760px; margin: 0 auto 2.5rem; padding: 26px 30px;
  border: 1px solid #e6e6e6; border-radius: 20px; background: #fafafa;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
}
.precio-box .precio-main{ display: flex; flex-direction: column; gap: 4px; }
.precio-box .precio-label{ font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #5b5b5b; }
.precio-box .precio-valor{ font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #111; line-height: 1.15; }
.precio-box .precio-sub{ font-size: 15px; font-weight: 500; color: #111; }
.precio-box .precio-nota{ font-size: 14px; color: #5b5b5b; }
.precio-box .precio-opciones{ list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid #e6e6e6; display: grid; gap: 6px; font-size: 15px; }
.precio-box .precio-opciones li{ display: flex; justify-content: space-between; gap: 16px; }
.precio-box .precio-opciones b{ white-space: nowrap; }
.precio-cta{
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px;
  border-radius: 999px; background: #111; color: #fff !important; text-decoration: none; font-weight: 600; font-size: 15px;
}
.precio-cta:hover{ background: #25D366; }
@media (max-width: 600px){
  .precio-box{ margin: 0 16px 2rem; padding: 22px; }
  .precio-cta{ width: 100%; justify-content: center; }
}

/* Sobre nosotros: texto sin justificar (evita huecos grandes entre palabras, sobre todo en francés) */
.about p{ text-align: left; hyphens: auto; }

/* Anclas: que la cabecera fija no tape el título de la sección */
section[id], div[id]{ scroll-margin-top: 110px; }

/* Vídeos dentro de una sección del catálogo (portada) */
.videos-inline{ grid-column: 1 / -1; margin-top: 36px; text-align: center; }
.videos-inline h3{ font-size: 20px; font-weight: 600; margin: 0 0 18px; }
.videos-inline .videos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
@media (max-width: 700px){ .videos-inline .videos{ grid-template-columns: 1fr; } }

/* Las secciones antiguas ya no se ocultan (las transiciones nuevas se encargan) */
.fade-hidden{ opacity: 1 !important; transform: none !important; }

/* Títulos grandes con la misma letra que el resto */
.descubre-titulo{ font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 600 !important; font-size: clamp(28px, 3.4vw, 44px) !important; letter-spacing: -0.5px !important; }

/* Fotos de las galerías "Aprecia el interior": mismo formato */
.video-gallery .video-card img{ aspect-ratio: 4 / 3; object-fit: cover; }

.videos-inline{ margin-bottom: 40px; }