@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Color principal: se sobrescribe desde Ajustes (ver css_vars()) */
:root {
  --brand-50: 230 239 238; --brand-100: 214 229 227; --brand-200: 179 207 203; --brand-300: 128 173 168; --brand-400: 64 131 124;
  --brand-500: 0 90 80; --brand-600: 0 77 68; --brand-700: 0 63 56; --brand-800: 0 50 44; --brand-900: 0 36 32; --brand-950: 0 25 22;
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { overflow-x: clip; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
[x-cloak], [hidden] { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Patrón del hero */
.hero-grid {
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgb(var(--brand-400) / .35), transparent 60%),
    radial-gradient(40rem 25rem at 0% 110%, rgb(var(--brand-500) / .45), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}

/* Selects con flecha propia */
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D8CA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem; padding-right: 2.2rem !important;
}

/* Swiper */
.swiper-button-disabled { opacity: .35; pointer-events: none; }
.thumbs .swiper-slide { opacity: .5; transition: opacity .2s; cursor: pointer; }
.thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid rgb(var(--brand-500)); outline-offset: -2px; }
.swiper-zoom-container > img { max-height: 100vh; object-fit: contain; }

/* Tarjeta cargando */
.skeleton { background: linear-gradient(90deg, #E9EDF3 25%, #F5F7FA 37%, #E9EDF3 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.fade-in { animation: fi .35s ease both; }
@keyframes fi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Drawer de filtros (móvil) */
@media (max-width: 1023px) {
  #panel-filtros { position: fixed; inset: 0 auto 0 0; width: min(92vw, 380px); z-index: 60; transform: translateX(-105%); transition: transform .28s ease; }
  #panel-filtros.abierto { transform: none; }
}

/* Admin: fotos ordenables */
.sortable-ghost { opacity: .35; }
.sortable-chosen { box-shadow: 0 10px 30px -10px rgba(11,18,32,.35); }

/* Hero con imagen de fondo */
.hero-img { background-size: cover; background-position: center; }
.hero-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--brand-950) / .92) 0%, rgb(var(--brand-950) / .7) 55%, rgb(var(--brand-950) / .35) 100%); }

/* Puntos del carrusel de marcas */
.marca-punto { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: rgb(255 255 255 / .25); cursor: pointer; transition: all .25s; }
.marca-punto.activo { width: 22px; background: #fff; }

/* Hero: movimiento de la imagen (Ken Burns) + parallax + entrada */
.hero-parallax { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; inset: -6% -4% !important; }
.hero-kenburns { transform-origin: 65% 60%; animation: kenburns 24s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); }
  50%  { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
  100% { transform: scale(1.16) translate3d(-3%, 1%, 0); }
}
.hero-brillo { animation: brillo 14s ease-in-out infinite alternate; }
@keyframes brillo { from { transform: translate3d(0, 0, 0) scale(1); opacity: .7; } to { transform: translate3d(8rem, -3rem, 0) scale(1.2); opacity: 1; } }
.hero-entrada { animation: entrada .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-entrada-2 { animation-delay: .25s; }
@keyframes entrada { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns, .hero-brillo, .hero-entrada { animation: none !important; }
}

/* Menú móvil */
.hamburguesa span { position: absolute; left: 50%; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transform: translateX(-50%); transition: transform .35s cubic-bezier(.7,0,.3,1), opacity .2s, width .3s; }
.hamburguesa span:nth-child(1) { top: 13px; }
.hamburguesa span:nth-child(2) { top: 19px; width: 14px; margin-left: 3px; }
.hamburguesa span:nth-child(3) { top: 25px; }
.hamburguesa.abierto span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.hamburguesa.abierto span:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0); }
.hamburguesa.abierto span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.menu-movil { position: fixed; left: 0; right: 0; top: 4rem; height: calc(100dvh - 4rem); z-index: 45; background: #fff;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s cubic-bezier(.7,0,.2,1), visibility 0s .5s; overflow-y: auto; }
.menu-movil::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40rem 20rem at 110% 110%, rgb(var(--brand-500) / .10), transparent 60%); }
.menu-movil.abierto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s cubic-bezier(.7,0,.2,1), visibility 0s; }
.menu-movil .menu-item { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .25s, transform .25s; }
.menu-movil.abierto .menu-item { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.18s + var(--i) * .06s); }
@media (prefers-reduced-motion: reduce) { .menu-movil, .menu-movil .menu-item { transition: none !important; } }
.wa-flotante { transition: opacity .25s, transform .25s; }
.menu-abierto .wa-flotante { opacity: 0; transform: scale(.8); pointer-events: none; }

/* Hoja de mapas */
.hoja-mapa { visibility: hidden; transition: visibility 0s .35s; }
.hoja-mapa .hoja-velo { opacity: 0; transition: opacity .3s; }
.hoja-mapa .hoja-panel { transform: translate3d(0, 100%, 0); transition: transform .35s cubic-bezier(.7,0,.3,1); }
.hoja-mapa .hoja-opcion { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .2s, transform .2s; }
.hoja-mapa.abierta { visibility: visible; transition: visibility 0s; }
.hoja-mapa.abierta .hoja-velo { opacity: 1; }
.hoja-mapa.abierta .hoja-panel { transform: none; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.hoja-mapa.abierta .hoja-opcion { opacity: 1; transform: none; transition: opacity .4s .15s, transform .4s .15s; }
.hoja-mapa.abierta .hoja-opcion + .hoja-opcion { transition-delay: .22s; }
@media (min-width: 640px) {
  .hoja-mapa .hoja-panel { transform: translate3d(0, -40%, 0) scale(.96); opacity: 0; transition: transform .3s, opacity .2s; }
  .hoja-mapa.abierta .hoja-panel { transform: translate3d(0, -50%, 0); opacity: 1; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
}

/* Título de portada con efecto máquina de escribir */
.maquina-texto { display: none; }
.escribiendo .maquina-fantasma { visibility: hidden; }
.escribiendo .maquina-texto { display: block; }
.maquina-cursor { display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -0.08em; border-radius: 2px;
  background: rgb(var(--brand-300)); animation: parpadeo 1s steps(1) infinite; transition: opacity .6s; }
.maquina-cursor.fin { opacity: 0; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Submenú del panel */
.grupo-hijos { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.grupo-hijos > div { overflow: hidden; }
.grupo-menu.abierto .grupo-hijos { grid-template-rows: 1fr; }
.grupo-menu.abierto .grupo-flecha { transform: rotate(180deg); }