/* =====================================================================
   XPOBIZ  ·  Hoja de estilos principal
   Tema claro por defecto. El modo noche se activa con el boton de la
   cabecera y se guarda en el navegador del visitante.

   1. Tipografias      5. Cabecera        9. Eventos y cupones
   2. Paletas          6. Portada        10. Pasos y planes
   3. Base y utiles    7. Tarjetas       11. Explorar
   4. Botones          8. Categorias     12. Perfil   13. Responsive
   ===================================================================== */

/* ---------- 1. TIPOGRAFIAS (archivos dentro del paquete) ------------- */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB;}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/sora-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/sora-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20AB;}

/* =====================================================================
   2. PALETAS
   Todo color del sitio sale de estas variables. Para cambiar la
   identidad completa solo hay que tocar este bloque.
   ===================================================================== */
:root{
  /* --- DIA (el que ve todo el mundo al entrar) --- */
  --fondo:#FFFFFF;
  --fondo-alt:#F5F7FC;          /* secciones alternas */
  --superficie:#FFFFFF;         /* tarjetas y paneles */
  --superficie-2:#F7F9FD;       /* superficie un paso mas marcada */
  --superficie-3:#EDF1F9;       /* chips y zonas pasivas */
  --campo:#F7F9FD;              /* fondo de los campos de formulario */
  --borde:#E4E9F4;
  --borde-fuerte:#CFD7E9;

  --texto:#0F1528;
  --texto-2:#515B7A;
  --texto-3:#67718B;

  --primario:#4A5AE8;
  --primario-claro:#6E7BFF;
  --primario-suave:#EEF0FF;     /* fondo tenue del color primario */
  --turquesa:#0A7E6B;
  --turquesa-fuerte:#14E0C8;
  --turquesa-suave:#E4FAF6;
  --dorado:#9A5C00;
  --dorado-fuerte:#FFB020;
  --dorado-suave:#FFF6E6;
  --rosa:#C62B75;
  --rosa-suave:#FFEAF4;
  --exito:#0B7E56;
  --alerta:#E04848;

  --aurora-1:rgba(74,90,232,.10);
  --aurora-2:rgba(20,224,200,.10);
  --aurora-3:rgba(219,51,133,.07);

  --sombra-1:0 1px 2px rgba(16,24,64,.05), 0 1px 3px rgba(16,24,64,.04);
  --sombra-2:0 4px 10px rgba(16,24,64,.06), 0 12px 28px rgba(16,24,64,.07);
  --sombra-3:0 10px 24px rgba(16,24,64,.09), 0 28px 60px rgba(16,24,64,.11);
  --brillo:0 0 0 1px rgba(16,24,64,.015);
  --velo-tarjeta:linear-gradient(180deg,transparent 38%,rgba(10,15,35,.68) 100%);

  /* El mapa de referencia */
  --mapa-fondo-1:#EEF2FB;
  --mapa-fondo-2:#E2E8F6;
  --mapa-linea:rgba(16,24,64,.07);

  /* Medidas (iguales en los dos temas) */
  --radio:18px; --radio-sm:12px; --radio-lg:26px;
  --ancho:1280px; --gutter:24px;
  --trans:.42s cubic-bezier(.2,.7,.3,1);
  color-scheme:light;
}

/* --- NOCHE (solo cuando el visitante la elige con el boton) --- */
:root[data-tema="oscuro"]{
  --fondo:#070B18;
  --fondo-alt:#0A0F20;
  --superficie:#0F1527;
  --superficie-2:#141B30;
  --superficie-3:#1A2239;
  --campo:#0A0F1F;
  --borde:rgba(255,255,255,.10);
  --borde-fuerte:rgba(255,255,255,.20);

  --texto:#EEF2FF;
  --texto-2:#A8B2CE;
  --texto-3:#8E98B6;

  --primario:#5B6CFF;
  --primario-claro:#8B97FF;
  --primario-suave:rgba(91,108,255,.16);
  --turquesa:#14E0C8;
  --turquesa-fuerte:#14E0C8;
  --turquesa-suave:rgba(20,224,200,.12);
  --dorado:#FFB020;
  --dorado-fuerte:#FFB020;
  --dorado-suave:rgba(255,176,32,.12);
  --rosa:#FF4FA3;
  --rosa-suave:rgba(255,79,163,.14);
  --exito:#3DDC97;
  --alerta:#FF6B6B;

  --aurora-1:rgba(91,108,255,.20);
  --aurora-2:rgba(20,224,200,.13);
  --aurora-3:rgba(255,79,163,.10);

  --sombra-1:0 2px 8px rgba(3,6,18,.45);
  --sombra-2:0 12px 32px rgba(3,6,18,.55);
  --sombra-3:0 28px 70px rgba(3,6,18,.65);
  --brillo:0 0 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.10) inset;
  --velo-tarjeta:linear-gradient(180deg,transparent 35%,rgba(7,11,24,.78) 100%);

  --mapa-fondo-1:#101838;
  --mapa-fondo-2:#080D1E;
  --mapa-linea:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* =====================================================================
   3. BASE Y UTILIDADES
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:'Jakarta',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.65;letter-spacing:0;word-spacing:.1em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 45% at 12% 0%, var(--aurora-1), transparent 70%),
    radial-gradient(50% 40% at 88% 8%, var(--aurora-2), transparent 70%),
    radial-gradient(45% 40% at 50% 100%, var(--aurora-3), transparent 70%);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:'Sora','Jakarta',sans-serif;font-weight:700;line-height:1.14;letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.9rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.5rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.35rem)}
p{margin:0}
::selection{background:var(--primario);color:#fff}
:focus-visible{outline:2px solid var(--primario);outline-offset:3px;border-radius:6px}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:clamp(46px,5.2vw,82px);position:relative}
.seccion--alterna{background:var(--fondo-alt)}
.seccion__cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.seccion__cabeza p{color:var(--texto-2);margin-top:10px;max-width:56ch}
.etiqueta{
  display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--turquesa);
  padding:7px 14px;border-radius:999px;background:var(--turquesa-suave);
  border:1px solid color-mix(in srgb,var(--turquesa) 26%,transparent);margin-bottom:16px;
}
.etiqueta svg{width:15px;height:15px;flex:none}
.etiqueta--morada{color:var(--primario);background:var(--primario-suave);border-color:color-mix(in srgb,var(--primario) 26%,transparent)}
.etiqueta--dorada{color:var(--dorado);background:var(--dorado-suave);border-color:color-mix(in srgb,var(--dorado) 30%,transparent)}
.apagado{color:var(--texto-2)}
.tenue{color:var(--texto-3);font-size:.9rem}

/* =====================================================================
   4. BOTONES
   ===================================================================== */
.btn{
  --bg:var(--primario);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:14px;border:0;cursor:pointer;
  font-weight:650;font-size:.96rem;white-space:nowrap;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 90%,#fff),var(--bg));
  color:#fff;position:relative;isolation:isolate;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,
             0 8px 20px -8px color-mix(in srgb,var(--bg) 55%,transparent), var(--sombra-1);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, filter .28s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 16px 30px -10px color-mix(in srgb,var(--bg) 60%,transparent), var(--sombra-2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--turquesa{--bg:var(--turquesa)}
.btn--dorado{--bg:var(--dorado)}
.btn--fantasma{
  background:var(--superficie);color:var(--texto);border:1px solid var(--borde-fuerte);
  box-shadow:var(--sombra-1);
}
.btn--fantasma:hover{background:var(--superficie-2);border-color:var(--primario);color:var(--primario)}
.btn--bloque{width:100%}
.btn--sm{padding:10px 18px;font-size:.88rem;border-radius:11px}
.btn svg{width:18px;height:18px;flex:none}

/* =====================================================================
   5. CABECERA
   ===================================================================== */
.cabecera{
  position:sticky;top:0;z-index:70;
  background:color-mix(in srgb,var(--fondo) 78%,transparent);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s;
}
.cabecera.fija{background:color-mix(in srgb,var(--fondo) 94%,transparent);border-bottom-color:var(--borde);box-shadow:var(--sombra-1)}
.cabecera__fila{display:flex;align-items:center;gap:16px;height:76px}
.marca{display:flex;align-items:center;gap:11px;font-family:'Sora',sans-serif;font-weight:700;font-size:1.22rem;letter-spacing:-.03em;flex:none}
.marca__cubo{width:38px;height:38px;flex:none;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--primario) 40%,transparent))}
.marca span b{color:var(--turquesa);font-weight:700}
.nav{display:flex;align-items:center;gap:4px;margin-left:18px}
.nav a{padding:9px 15px;border-radius:11px;font-size:.94rem;font-weight:550;color:var(--texto-2);transition:color .2s,background .2s}
.nav a:hover{color:var(--texto);background:var(--superficie-3)}
.nav a.activo{color:var(--primario);background:var(--primario-suave)}
.cabecera__acciones{display:flex;align-items:center;gap:10px;margin-left:auto}
.menu-btn,.tema-btn{
  width:44px;height:44px;border-radius:12px;background:var(--superficie);
  border:1px solid var(--borde);align-items:center;justify-content:center;cursor:pointer;
  color:var(--texto-2);transition:var(--trans);flex:none;
}
.tema-btn{display:grid;place-items:center}
.menu-btn{display:none}
.menu-btn:hover,.tema-btn:hover{color:var(--primario);border-color:var(--primario);background:var(--primario-suave)}
.menu-btn svg,.tema-btn svg{width:21px;height:21px}
/* el icono cambia solo segun el tema activo */
.tema-btn .luna{display:block}
.tema-btn .sol{display:none}
:root[data-tema="oscuro"] .tema-btn .luna{display:none}
:root[data-tema="oscuro"] .tema-btn .sol{display:block}

/* =====================================================================
   6. PORTADA
   ===================================================================== */
.hero{position:relative;padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(50px,6vw,88px);overflow:hidden}
.hero__escena{position:absolute;inset:0;z-index:-1;pointer-events:none;perspective:1200px;transform-style:preserve-3d}
.hero__anillo{position:absolute;border-radius:50%;border:1px solid var(--borde);left:50%;top:44%;translate:-50% -50%}
.hero__anillo:nth-child(1){width:560px;height:560px;animation:girar 34s linear infinite}
.hero__anillo:nth-child(2){width:820px;height:820px;border-color:color-mix(in srgb,var(--primario) 22%,transparent);animation:girar 52s linear infinite reverse}
.hero__anillo:nth-child(3){width:1120px;height:1120px;border-color:color-mix(in srgb,var(--turquesa) 16%,transparent);animation:girar 78s linear infinite}
@keyframes girar{to{rotate:360deg}}
.hero__contenido{text-align:center;max-width:920px;margin-inline:auto}
.hero h1{margin-bottom:20px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--turquesa),var(--primario) 48%,var(--rosa));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__bajada{font-size:clamp(1rem,1.45vw,1.18rem);color:var(--texto-2);max-width:62ch;margin:0 auto 34px}

.buscador{
  display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:8px;
  padding:9px;border-radius:20px;max-width:1000px;margin:0 auto;
  background:var(--superficie);border:1px solid var(--borde);
  box-shadow:var(--sombra-3);
}
.buscador__campo{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:14px;background:var(--campo);transition:box-shadow .25s,background .25s}
.buscador__campo:focus-within{background:var(--superficie);box-shadow:0 0 0 2px var(--primario)}
.buscador__campo svg{width:19px;height:19px;color:var(--texto-3);flex:none}
.buscador input,.buscador select{
  width:100%;min-width:0;background:none;border:0;outline:none;font-size:.97rem;color:var(--texto);
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.buscador input{cursor:text}
.buscador input::placeholder{color:var(--texto-3)}
.buscador select option{background:var(--superficie);color:var(--texto)}
.buscador .btn{border-radius:14px;padding-inline:30px}
.hero__sugerencias{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.hero__sugerencias span{color:var(--texto-3);font-size:.88rem;align-self:center}
.chip{padding:7px 15px;border-radius:999px;font-size:.86rem;color:var(--texto-2);background:var(--superficie);border:1px solid var(--borde);transition:var(--trans)}
.chip:hover{color:var(--primario);border-color:var(--primario);background:var(--primario-suave);transform:translateY(-2px)}

.indicadores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(38px,4.6vw,60px)}
.indicador{
  padding:22px 20px;border-radius:var(--radio);text-align:center;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  transform-style:preserve-3d;transition:var(--trans);
}
.indicador:hover{transform:translateY(-4px) rotateX(6deg);box-shadow:var(--sombra-2);border-color:var(--borde-fuerte)}
.indicador b{display:block;font-family:'Sora',sans-serif;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;
  background:linear-gradient(180deg,var(--primario),var(--primario-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.indicador span{font-size:.84rem;color:var(--texto-3);letter-spacing:.04em}

/* =====================================================================
   7. TARJETAS DE NEGOCIO
   ===================================================================== */
.rejilla{display:grid;gap:22px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--4{grid-template-columns:repeat(4,1fr)}

.escena-3d{perspective:1100px}
.tarjeta{
  position:relative;border-radius:var(--radio-lg);overflow:hidden;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-2);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s;
}
.tarjeta:hover{border-color:var(--borde-fuerte);box-shadow:var(--sombra-3)}
.tarjeta::after{ /* reflejo que sigue al cursor */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
             color-mix(in srgb,var(--primario) 9%,transparent),transparent 45%);
}
.tarjeta:hover::after{opacity:1}

.tarjeta__foto{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--superficie-3)}
.tarjeta__foto > img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover .tarjeta__foto > img{transform:scale(1.07)}
.tarjeta__velo{position:absolute;inset:0;background:var(--velo-tarjeta)}
.tarjeta__insignias{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap}
/* Las insignias van encima de una foto, asi que se mantienen oscuras en los dos temas */
.insignia{
  display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  font-size:.73rem;font-weight:700;letter-spacing:.03em;color:#fff;
  background:rgba(12,18,38,.72);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.insignia svg{width:13px;height:13px}
.insignia--destacado{background:linear-gradient(135deg,var(--dorado-fuerte),#FF8A3D);color:#33220A;border-color:transparent}
.insignia--verificado{color:var(--turquesa-fuerte);border-color:color-mix(in srgb,var(--turquesa-fuerte) 45%,transparent)}
.insignia--abierto{color:#5BE8AC;border-color:rgba(91,232,172,.45)}
.insignia--cerrado{color:#C9D1E6}
.tarjeta__favorito{
  margin-left:auto;width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer;
  display:grid;place-items:center;background:rgba(12,18,38,.72);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);color:#fff;transition:var(--trans);
}
.tarjeta__favorito:hover{background:var(--rosa);border-color:transparent;transform:scale(1.1)}
.tarjeta__favorito.marcado{background:var(--rosa);border-color:transparent}
.tarjeta__favorito svg{width:17px;height:17px}
.tarjeta__pie-foto{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tarjeta__logo{width:50px;height:50px;border-radius:15px;flex:none;box-shadow:0 8px 20px rgba(10,15,35,.35),0 0 0 2px rgba(255,255,255,.7)}
.tarjeta__puntuacion{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:11px;color:#fff;
  background:rgba(12,18,38,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  font-size:.84rem;font-weight:700;
}
.tarjeta__puntuacion svg{width:14px;height:14px;color:var(--dorado-fuerte);fill:var(--dorado-fuerte)}
.tarjeta__puntuacion i{font-style:normal;color:#C9D1E6;font-weight:500;font-size:.78rem}

.tarjeta__cuerpo{padding:18px 20px 20px}
.tarjeta__categoria{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:9px}
.tarjeta__categoria i{width:7px;height:7px;border-radius:50%;background:currentColor}
.tarjeta h3{margin-bottom:7px;font-size:1.12rem}
.tarjeta h3 a:hover{color:var(--primario)}
.tarjeta__lema{color:var(--texto-2);font-size:.9rem;line-height:1.5;margin-bottom:14px;min-height:2.7em}
.tarjeta__datos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--texto-3);font-size:.83rem;padding-top:14px;border-top:1px solid var(--borde)}
.tarjeta__datos span{display:inline-flex;align-items:center;gap:6px}
.tarjeta__datos svg{width:14px;height:14px}
.tarjeta__precio{margin-left:auto;color:var(--turquesa);font-weight:700}

.estrellas{display:inline-flex;gap:2px;vertical-align:middle}
.estrella{width:15px;height:15px;fill:var(--borde-fuerte)}
.estrella.llena{fill:var(--dorado-fuerte)}
.estrella.media{fill:url(#media)}

/* =====================================================================
   8. CATEGORIAS Y CIUDADES
   ===================================================================== */
.categorias{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.categoria{
  --c:var(--primario);
  position:relative;padding:26px 18px 22px;border-radius:22px;text-align:center;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  transform-style:preserve-3d;transition:var(--trans);overflow:hidden;
}
.categoria::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--c) 14%,transparent),transparent 70%);
}
.categoria:hover{transform:translateY(-7px) rotateX(9deg);border-color:color-mix(in srgb,var(--c) 42%,transparent);
  box-shadow:0 20px 40px -18px color-mix(in srgb,var(--c) 45%,transparent),var(--sombra-2)}
.categoria:hover::before{opacity:1}
.categoria__icono{
  width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;
  color:var(--c);position:relative;
  background:color-mix(in srgb,var(--c) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s;
}
.categoria:hover .categoria__icono{transform:translateZ(30px) scale(1.06);
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--c) 55%,transparent)}
.categoria__icono svg,.categoria__icono img{width:30px;height:30px}
.categoria b{display:block;font-size:.94rem;font-weight:650;line-height:1.35;position:relative}
.categoria span{font-size:.79rem;color:var(--texto-3);position:relative}

.ciudades{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ciudad{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--borde);box-shadow:var(--sombra-2);transition:var(--trans)}
.ciudad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.ciudad:hover{transform:translateY(-5px);border-color:var(--borde-fuerte);box-shadow:var(--sombra-3)}
.ciudad:hover img{transform:scale(1.09)}
.ciudad__velo{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,12,28,.86))}
.ciudad__texto{position:absolute;left:18px;right:18px;bottom:16px;color:#fff}
.ciudad__texto b{display:block;font-family:'Sora',sans-serif;font-size:1.12rem}
.ciudad__texto span{font-size:.82rem;color:#D3DAEC}

/* =====================================================================
   9. EVENTOS Y CUPONES
   ===================================================================== */
.evento{display:flex;flex-direction:column}
.evento__fecha{
  position:absolute;top:14px;left:14px;z-index:2;width:58px;padding:9px 0;border-radius:15px;text-align:center;
  background:rgba(12,18,38,.78);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);
  box-shadow:var(--sombra-2);color:#fff;
}
.evento__fecha b{display:block;font-family:'Sora',sans-serif;font-size:1.3rem;line-height:1}
.evento__fecha span{font-size:.68rem;letter-spacing:.1em;color:var(--turquesa-fuerte);font-weight:700}
.evento__meta{display:flex;align-items:center;gap:8px;color:var(--texto-3);font-size:.83rem;margin-bottom:10px}
.evento__meta svg{width:14px;height:14px;flex:none}
.evento__barra{height:6px;border-radius:99px;background:var(--superficie-3);overflow:hidden;margin-top:14px}
.evento__barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--turquesa),var(--primario))}

.cupones{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.cupon{
  position:relative;padding:22px;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--dorado-suave);border:1px dashed color-mix(in srgb,var(--dorado) 45%,transparent);
  transition:var(--trans);
}
.cupon::before,.cupon::after{content:'';position:absolute;width:26px;height:26px;border-radius:50%;background:var(--fondo);
  left:-13px;top:50%;translate:0 -50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--dorado) 30%,transparent) inset}
.cupon::after{left:auto;right:-13px}
.cupon:hover{transform:translateY(-5px);border-color:var(--dorado);box-shadow:0 18px 38px -18px color-mix(in srgb,var(--dorado) 50%,transparent)}
.cupon__valor{font-family:'Sora',sans-serif;font-size:2rem;font-weight:700;color:var(--dorado);line-height:1}
.cupon b{display:block;margin:10px 0 5px;font-size:.98rem}
.cupon p{font-size:.85rem;color:var(--texto-2);margin-bottom:14px}
.cupon .cupon__codigo{margin-top:auto}
.cupon__codigo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-radius:11px;
  background:var(--superficie);border:1px solid color-mix(in srgb,var(--dorado) 32%,transparent);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88rem;font-weight:700;letter-spacing:.09em;color:var(--dorado);
  cursor:pointer;transition:var(--trans);
}
.cupon__codigo:hover{background:var(--dorado-suave)}
.cupon__codigo svg{width:15px;height:15px}

/* =====================================================================
   10. PASOS Y PLANES
   ===================================================================== */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.paso{
  position:relative;padding:30px 26px;border-radius:var(--radio-lg);
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  transform-style:preserve-3d;transition:var(--trans);
}
.paso:hover{transform:translateY(-6px) rotateX(5deg);box-shadow:var(--sombra-2)}
.paso__num{
  font-family:'Sora',sans-serif;font-size:2.6rem;font-weight:800;line-height:1;margin-bottom:16px;
  background:linear-gradient(180deg,var(--primario),color-mix(in srgb,var(--primario) 25%,transparent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.paso h3{margin-bottom:9px}
.paso p{color:var(--texto-2);font-size:.93rem}

.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.plan{
  --c:var(--primario);
  position:relative;padding:30px 24px;border-radius:var(--radio-lg);
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);transition:var(--trans);
}
.plan:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 40%,transparent);box-shadow:var(--sombra-2)}
.plan--destacado{
  background:linear-gradient(180deg,var(--primario-suave),var(--superficie) 62%);
  border-color:color-mix(in srgb,var(--primario) 42%,transparent);
  box-shadow:0 18px 44px -20px color-mix(in srgb,var(--primario) 45%,transparent),var(--sombra-2);
}
.plan__cinta{position:absolute;top:-11px;left:50%;translate:-50% 0;padding:5px 15px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--primario),var(--rosa));color:#fff;white-space:nowrap}
.plan h3{color:var(--c);margin-bottom:6px}
.plan__precio{font-family:'Sora',sans-serif;font-size:2.4rem;font-weight:700;line-height:1.1;margin:14px 0 4px}
.plan__precio small{font-size:.9rem;font-weight:500;color:var(--texto-3)}
.plan__resumen{color:var(--texto-2);font-size:.9rem;min-height:3em}
.plan ul{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.plan li{display:flex;gap:10px;font-size:.89rem;color:var(--texto-2);line-height:1.45}
.plan li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--turquesa)}
.plan li.no{color:var(--texto-3)}
.plan li.no svg{color:var(--texto-3);opacity:.6}

/* =====================================================================
   11. PIE
   ===================================================================== */
.pie{margin-top:clamp(50px,7vw,90px);border-top:1px solid var(--borde);background:var(--fondo-alt);padding-top:clamp(46px,6vw,72px)}
.pie__rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.pie__marca p{color:var(--texto-2);font-size:.92rem;margin:16px 0 20px;max-width:38ch}
.pie h4{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--texto-3);margin-bottom:16px;font-family:'Jakarta',sans-serif;font-weight:700}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.pie ul a{color:var(--texto-2);font-size:.92rem;transition:color .2s}
.pie ul a:hover{color:var(--primario)}
.redes{display:flex;gap:10px}
.redes a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--superficie);
  border:1px solid var(--borde);color:var(--texto-2);transition:var(--trans)}
.redes a:hover{color:#fff;background:var(--primario);border-color:transparent;transform:translateY(-3px)}
.redes svg{width:18px;height:18px}
.pie__legal{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:44px;padding:22px 0;border-top:1px solid var(--borde);color:var(--texto-3);font-size:.86rem}

.aviso-demo{
  display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:14px;
  background:var(--dorado-suave);border:1px solid color-mix(in srgb,var(--dorado) 35%,transparent);
  color:var(--dorado);font-size:.87rem;
}
.aviso-demo svg{width:18px;height:18px;flex:none}
.aviso-demo code{padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--dorado) 16%,transparent);font-size:.85em}

.aparece{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =====================================================================
   12. EXPLORAR
   ===================================================================== */
.explorar{padding-top:34px}
.migas{display:flex;align-items:center;gap:9px;color:var(--texto-3);font-size:.86rem;margin-bottom:18px;flex-wrap:wrap}
.migas a:hover{color:var(--primario)}
.migas svg{width:14px;height:14px;opacity:.6}

.explorar__barra{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:18px;margin-bottom:24px;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);
}
.explorar__barra .resultado-total{font-size:.92rem;color:var(--texto-2)}
.explorar__barra .resultado-total b{color:var(--texto);font-family:'Sora',sans-serif}
.explorar__herramientas{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.selector{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--campo);border:1px solid var(--borde);font-size:.89rem}
.selector svg{width:16px;height:16px;color:var(--texto-3)}
.selector select{background:none;border:0;outline:none;cursor:pointer;font-size:.89rem}
.selector select option{background:var(--superficie)}
.vista-btns{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--campo);border:1px solid var(--borde)}
.vista-btns button{width:36px;height:34px;border-radius:9px;border:0;background:none;cursor:pointer;color:var(--texto-3);display:grid;place-items:center;transition:var(--trans)}
.vista-btns button.activo{background:var(--superficie);color:var(--primario);box-shadow:var(--sombra-1)}
.vista-btns svg{width:17px;height:17px}

.explorar__cuerpo{display:grid;grid-template-columns:288px 1fr;gap:26px;align-items:start}
.filtros{
  position:sticky;top:96px;padding:24px 22px;border-radius:var(--radio-lg);
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1);
  max-height:calc(100vh - 120px);overflow-y:auto;
}
.filtros__grupo{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--borde)}
.filtros__grupo:last-of-type{border-bottom:0;margin-bottom:0}
.filtros h4{font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);margin-bottom:14px;font-family:'Jakarta',sans-serif;font-weight:700}
.opcion{display:flex;align-items:center;gap:11px;padding:8px 10px;margin:0 -10px;border-radius:11px;cursor:pointer;transition:background .2s}
.opcion:hover{background:var(--superficie-2)}
.opcion input{appearance:none;-webkit-appearance:none;width:19px;height:19px;border-radius:6px;flex:none;cursor:pointer;
  border:1.6px solid var(--borde-fuerte);background:var(--superficie);position:relative;transition:var(--trans)}
.opcion input[type=radio]{border-radius:50%}
.opcion input:checked{background:var(--primario);border-color:var(--primario)}
.opcion input:checked::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
.opcion input[type=radio]:checked::after{left:5px;top:5px;width:7px;height:7px;border:0;border-radius:50%;background:#fff;rotate:0deg}
.opcion span{font-size:.91rem;color:var(--texto-2)}
.opcion:hover span{color:var(--texto)}
.opcion small{margin-left:auto;color:var(--texto-3);font-size:.8rem}
.filtros .btn{margin-top:6px}
.filtros__limpiar{display:block;text-align:center;margin-top:10px;font-size:.87rem;color:var(--texto-3)}
.filtros__limpiar:hover{color:var(--rosa)}

.mapa{position:relative;border-radius:var(--radio-lg);overflow:hidden;height:300px;margin-bottom:24px;
  border:1px solid var(--borde);box-shadow:var(--sombra-1);background:var(--mapa-fondo-2)}
.mapa__lienzo{position:absolute;inset:0;width:100%;height:100%}
.mapa__lienzo .mapa-base{fill:var(--mapa-fondo-1)}
.mapa__lienzo .mapa-base-2{fill:var(--mapa-fondo-2)}
.mapa__lienzo .mapa-calle{stroke:var(--mapa-linea);fill:none}
.mapa__lienzo .mapa-avenida{stroke:color-mix(in srgb,var(--primario) 30%,transparent);fill:none}
.mapa__lienzo .mapa-rio{stroke:color-mix(in srgb,var(--turquesa) 32%,transparent);fill:none}
.mapa__pin{position:absolute;translate:-50% -100%;cursor:pointer;transition:var(--trans)}
.mapa__pin b{
  display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;font-size:.82rem;white-space:nowrap;
  background:var(--superficie);border:1px solid var(--borde-fuerte);box-shadow:var(--sombra-2);
}
.mapa__pin:hover{transform:translateY(-4px) scale(1.06);z-index:5}
.mapa__pin:hover b{border-color:var(--primario);color:var(--primario)}
.mapa__pin i{width:7px;height:7px;border-radius:50%;background:var(--turquesa);flex:none}
.mapa__nota{position:absolute;left:16px;bottom:14px;font-size:.78rem;color:var(--texto-3);
  background:var(--superficie);padding:6px 12px;border-radius:10px;border:1px solid var(--borde)}

.vacio{padding:70px 26px;text-align:center;border-radius:var(--radio-lg);border:1px dashed var(--borde-fuerte);background:var(--superficie-2)}
.vacio svg{width:46px;height:46px;color:var(--texto-3);margin:0 auto 16px}
.vacio h3{margin-bottom:8px}
.vacio p{color:var(--texto-2);margin-bottom:20px}

.paginacion{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:38px;flex-wrap:wrap}
.paginacion a,.paginacion span{
  min-width:42px;height:42px;padding:0 12px;border-radius:12px;display:grid;place-items:center;
  background:var(--superficie);border:1px solid var(--borde);font-size:.92rem;font-weight:600;transition:var(--trans)}
.paginacion a:hover{border-color:var(--primario);color:var(--primario);transform:translateY(-2px)}
.paginacion .actual{background:var(--primario);border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px var(--primario)}

.lista .tarjeta{display:grid;grid-template-columns:300px 1fr}
.lista .tarjeta__foto{aspect-ratio:auto;height:100%;min-height:210px}
.lista .tarjeta__cuerpo{padding:22px 24px;display:flex;flex-direction:column}
.lista .tarjeta__lema{min-height:0}
.lista .tarjeta__datos{margin-top:auto}

/* =====================================================================
   13. PERFIL DE NEGOCIO
   ===================================================================== */
.perfil__portada{position:relative;height:clamp(300px,42vw,440px);overflow:hidden;border-radius:0 0 34px 34px;background:var(--superficie-3)}
.perfil__portada > img{width:100%;height:100%;object-fit:cover}
.perfil__portada .tarjeta__velo{background:linear-gradient(180deg,rgba(8,12,28,.30) 0%,transparent 34%,rgba(8,12,28,.55) 100%)}
.perfil__galeria-btn{
  position:absolute;right:24px;bottom:112px;display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:13px;font-size:.88rem;font-weight:600;cursor:pointer;color:#fff;
  background:rgba(12,18,38,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);transition:var(--trans);
}
.perfil__galeria-btn:hover{background:rgba(12,18,38,.9);transform:translateY(-2px)}
.perfil__galeria-btn svg{width:17px;height:17px}

.perfil__encabezado{
  position:relative;margin-top:-92px;z-index:2;
  display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:26px 28px;border-radius:var(--radio-lg);
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-3);
}
.perfil__logo{width:92px;height:92px;border-radius:24px;flex:none;box-shadow:var(--sombra-2),0 0 0 3px var(--superficie)}
.perfil__titulo{flex:1;min-width:240px}
.perfil__titulo h1{font-size:clamp(1.6rem,3vw,2.35rem);margin-bottom:8px}
.perfil__chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
/* aqui las insignias ya no van sobre foto: se adaptan al tema */
.perfil__chips .insignia{background:var(--superficie-2);border-color:var(--borde);color:var(--texto-2)}
.perfil__chips .insignia--destacado{background:linear-gradient(135deg,var(--dorado-fuerte),#FF8A3D);color:#33220A;border-color:transparent}
.perfil__chips .insignia--verificado{background:var(--turquesa-suave);color:var(--turquesa);border-color:color-mix(in srgb,var(--turquesa) 32%,transparent)}
.perfil__chips .insignia--abierto{background:color-mix(in srgb,var(--exito) 12%,transparent);color:var(--exito);border-color:color-mix(in srgb,var(--exito) 32%,transparent)}
.perfil__meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--texto-2);font-size:.9rem}
.perfil__meta span{display:inline-flex;align-items:center;gap:7px}
.perfil__meta svg{width:15px;height:15px;color:var(--texto-3)}
.perfil__acciones{display:flex;gap:10px;flex-wrap:wrap}
.accion-icono{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;cursor:pointer;
  background:var(--superficie);border:1px solid var(--borde);color:var(--texto-2);transition:var(--trans)}
.accion-icono:hover{color:var(--primario);border-color:var(--primario);background:var(--primario-suave);transform:translateY(-2px)}
.accion-icono svg{width:19px;height:19px}

.perfil__cuerpo{display:grid;grid-template-columns:1fr 372px;gap:28px;align-items:start;margin-top:30px}
.panel{padding:28px;border-radius:var(--radio-lg);margin-bottom:22px;
  background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-1)}
.panel h2{font-size:1.32rem;margin-bottom:16px}
.panel h3{margin-bottom:14px}
.panel p{color:var(--texto-2);line-height:1.75}

.pestanas{display:flex;gap:6px;padding:6px;border-radius:16px;margin-bottom:22px;overflow-x:auto;
  background:var(--superficie-2);border:1px solid var(--borde);scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{padding:11px 20px;border-radius:11px;border:0;background:none;cursor:pointer;white-space:nowrap;
  font-size:.92rem;font-weight:600;color:var(--texto-3);transition:var(--trans)}
.pestanas button:hover{color:var(--texto)}
.pestanas button.activo{background:var(--superficie);color:var(--primario);box-shadow:var(--sombra-1)}

.destacados-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.destacado-item{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:14px;
  background:var(--superficie-2);border:1px solid var(--borde);font-size:.89rem;line-height:1.4}
.destacado-item svg{width:19px;height:19px;color:var(--turquesa);flex:none}

.amenidades{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.amenidad{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--texto-2)}
.amenidad i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--turquesa-suave);border:1px solid color-mix(in srgb,var(--turquesa) 24%,transparent);color:var(--turquesa)}
.amenidad svg{width:15px;height:15px}

.servicio{display:flex;align-items:center;gap:16px;padding:17px 0;border-bottom:1px solid var(--borde)}
.servicio:last-child{border-bottom:0;padding-bottom:0}
.servicio__info{flex:1;min-width:0}
.servicio__info b{display:block;font-size:.98rem;margin-bottom:3px}
.servicio__info span{font-size:.86rem;color:var(--texto-3)}
.servicio__duracion{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--texto-3);white-space:nowrap}
.servicio__duracion svg{width:14px;height:14px}
.servicio__precio{font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:var(--turquesa);white-space:nowrap;text-align:right}
.servicio__precio small{display:block;font-size:.72rem;color:var(--texto-3);font-weight:400;font-family:'Jakarta',sans-serif}

.resumen-resenas{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;
  padding-bottom:24px;margin-bottom:8px;border-bottom:1px solid var(--borde)}
.resumen-resenas__nota{text-align:center}
.resumen-resenas__nota b{display:block;font-family:'Sora',sans-serif;font-size:3.4rem;line-height:1;color:var(--texto)}
.resumen-resenas__nota span:not(.estrellas){display:block;color:var(--texto-3);font-size:.85rem;margin-top:8px}
.resumen-resenas__nota .estrellas{margin-top:10px}
.barra-nota{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:.84rem;color:var(--texto-3)}
.barra-nota > span{display:inline-flex;align-items:center;gap:4px;width:32px;flex:none}
.barra-nota > span svg{width:13px;height:13px}
.barra-nota i{flex:1;height:7px;border-radius:99px;background:var(--superficie-3);overflow:hidden}
.barra-nota i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--dorado-fuerte),#FF8A3D)}
.barra-nota u{text-decoration:none;width:30px;text-align:right}

.resena{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--borde)}
.resena:last-child{border-bottom:0;padding-bottom:0}
.resena__avatar{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;
  background:linear-gradient(140deg,var(--primario),var(--rosa));box-shadow:var(--sombra-1)}
.resena__cuerpo{flex:1;min-width:0}
.resena__cabeza{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.resena__cabeza b{font-size:.96rem}
.resena__cabeza time{color:var(--texto-3);font-size:.82rem}
.resena__cabeza .insignia{background:var(--turquesa-suave);color:var(--turquesa);border-color:color-mix(in srgb,var(--turquesa) 30%,transparent)}
.resena h4{font-size:1rem;margin:6px 0;font-family:'Jakarta',sans-serif;font-weight:650}
.resena p{color:var(--texto-2);font-size:.93rem;line-height:1.7}
.resena__respuesta{margin-top:14px;padding:15px 17px;border-radius:14px;border-left:3px solid var(--turquesa);
  background:var(--turquesa-suave);font-size:.9rem;color:var(--texto-2)}
.resena__respuesta b{color:var(--turquesa);display:block;margin-bottom:5px;font-size:.85rem}
.resena__util{display:flex;gap:9px;margin-top:13px}
.resena__util button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:10px;cursor:pointer;
  background:var(--superficie-2);border:1px solid var(--borde);font-size:.83rem;color:var(--texto-3);transition:var(--trans)}
.resena__util button:hover{color:var(--primario);border-color:var(--primario)}
.resena__util svg{width:14px;height:14px}

.lateral{position:sticky;top:96px;display:grid;gap:20px}
.reserva{
  padding:26px;border-radius:var(--radio-lg);
  background:linear-gradient(180deg,var(--primario-suave),var(--superficie) 70%);
  border:1px solid color-mix(in srgb,var(--primario) 32%,transparent);
  box-shadow:0 18px 44px -22px color-mix(in srgb,var(--primario) 42%,transparent),var(--sombra-2);
}
.reserva__precio{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}
.reserva__precio b{font-family:'Sora',sans-serif;font-size:1.9rem;line-height:1}
.reserva__precio span{color:var(--texto-3);font-size:.9rem}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:.8rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);margin-bottom:7px}
.campo__caja{display:flex;align-items:center;gap:9px;padding:13px 12px;border-radius:13px;
  background:var(--superficie);border:1px solid var(--borde);transition:var(--trans)}
.campo__caja:focus-within{border-color:var(--primario);box-shadow:0 0 0 3px color-mix(in srgb,var(--primario) 18%,transparent)}
.campo__caja svg{width:17px;height:17px;color:var(--texto-3);flex:none}
.campo__caja input,.campo__caja select{width:100%;min-width:0;background:none;border:0;outline:none;font-size:.94rem}
.campo__caja select option{background:var(--superficie)}
.campo__fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reserva__nota{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:.82rem;color:var(--texto-3);line-height:1.5}
.reserva__nota svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--turquesa)}

.horario-lista{display:grid;gap:3px}
.horario-fila{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;font-size:.89rem}
.horario-fila span{color:var(--texto-3)}
.horario-fila b{font-weight:600;color:var(--texto-2)}
.horario-fila.hoy{background:var(--turquesa-suave);border:1px solid color-mix(in srgb,var(--turquesa) 22%,transparent)}
.horario-fila.hoy span,.horario-fila.hoy b{color:var(--turquesa)}
.horario-fila.cerrado b{color:var(--texto-3)}

.contacto-lista{display:grid;gap:10px}
.contacto-fila{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:14px;
  background:var(--superficie-2);border:1px solid var(--borde);transition:var(--trans);font-size:.91rem}
.contacto-fila:hover{border-color:var(--primario);transform:translateX(3px)}
.contacto-fila i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--primario-suave);border:1px solid color-mix(in srgb,var(--primario) 24%,transparent);color:var(--primario)}
.contacto-fila svg{width:16px;height:16px}
.contacto-fila small{display:block;color:var(--texto-3);font-size:.76rem}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.galeria a{border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--borde);transition:var(--trans)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.galeria a:hover{transform:translateY(-4px);border-color:var(--borde-fuerte);box-shadow:var(--sombra-2)}
.galeria a:hover img{transform:scale(1.08)}

.visor{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:28px;
  background:rgba(6,10,22,.92);backdrop-filter:blur(10px)}
.visor.abierto{display:grid}
.visor img{max-width:min(1100px,92vw);max-height:84vh;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.visor__cerrar,.visor__nav{position:absolute;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.visor__cerrar{top:22px;right:22px;width:46px;height:46px;border-radius:14px}
.visor__nav{top:50%;translate:0 -50%;width:50px;height:50px;border-radius:50%}
.visor__nav.ant{left:22px}
.visor__nav.sig{right:22px}
.visor__cerrar svg,.visor__nav svg{width:20px;height:20px}

/* =====================================================================
   14. RESPONSIVE
   En telefono las tarjetas NO se apilan: se deslizan de lado.
   ===================================================================== */
.carrusel-movil{display:grid}

@media (max-width:1180px){
  .categorias{grid-template-columns:repeat(4,1fr)}
  .planes{grid-template-columns:repeat(2,1fr)}
  .rejilla--4{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1024px){
  :root{--gutter:20px}
  .nav{display:none}
  .menu-btn{display:grid}
  .cabecera__acciones .btn--fantasma{display:none}
  .explorar__cuerpo{grid-template-columns:1fr}
  .filtros{position:static;max-height:none;display:none}
  .filtros.abierto{display:block;margin-bottom:22px}
  .perfil__cuerpo{grid-template-columns:1fr}
  .lateral{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .lateral .reserva{grid-column:1 / -1}
  .rejilla--3,.rejilla--4{grid-template-columns:repeat(2,1fr)}
  .ciudades{grid-template-columns:repeat(3,1fr)}
  .cupones{grid-template-columns:repeat(2,1fr)}
  .buscador{grid-template-columns:1fr 1fr;gap:8px}
  .buscador__campo:first-child{grid-column:1 / -1}
  .buscador .btn{grid-column:1 / -1}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .destacados-lista{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  :root{--gutter:18px;--radio-lg:22px}
  .cabecera__fila{height:66px}
  .marca{font-size:1.08rem}
  .marca__cubo{width:33px;height:33px}
  .hero{padding-top:32px}
  .hero__bajada{margin-bottom:26px}

  .carrusel-movil{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
    padding-inline:var(--gutter);padding-bottom:6px;margin-inline:calc(var(--gutter) * -1);
  }
  .carrusel-movil::-webkit-scrollbar{display:none}
  .carrusel-movil > *{flex:0 0 82%;scroll-snap-align:center;min-width:0}
  .carrusel-movil.estrecho > *{flex:0 0 68%}
  .carrusel-movil.ancho > *{flex:0 0 90%}

  .categorias{grid-template-columns:repeat(2,1fr);gap:12px}
  .categoria{padding:20px 12px 18px}
  .categoria__icono{width:50px;height:50px;border-radius:15px;margin-bottom:11px}
  .categoria__icono svg,.categoria__icono img{width:25px;height:25px}
  .categoria b{font-size:.86rem}
  .categoria span{font-size:.74rem}
  .ciudades{grid-template-columns:repeat(2,1fr);gap:12px}
  .indicadores{grid-template-columns:repeat(2,1fr);gap:10px}
  .indicador{padding:16px 12px}
  .amenidades{grid-template-columns:repeat(2,1fr)}
  .destacados-lista{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
  .pie__rejilla{grid-template-columns:1fr 1fr;gap:26px}
  .pie__marca{grid-column:1 / -1}
  .lateral{grid-template-columns:1fr}

  #resultados{display:grid !important;grid-template-columns:1fr !important;gap:13px}
  #resultados .tarjeta{display:grid;grid-template-columns:124px 1fr}
  #resultados .tarjeta__foto{aspect-ratio:auto;height:100%;min-height:128px}
  #resultados .tarjeta__cuerpo{padding:14px 15px;display:flex;flex-direction:column}
  #resultados .tarjeta__lema{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:0;font-size:.83rem;line-height:1.45;margin-bottom:10px}
  #resultados .tarjeta__logo{display:none}
  #resultados .tarjeta__insignias{top:8px;left:8px;right:8px;gap:4px}
  #resultados .insignia{padding:3px 7px;font-size:.6rem;border-radius:8px}
  #resultados .insignia + .insignia{display:none}
  #resultados .tarjeta__favorito{width:26px;height:26px}
  #resultados .tarjeta__favorito svg{width:13px;height:13px}
  #resultados .tarjeta__pie-foto{left:9px;right:9px;bottom:9px}
  #resultados .tarjeta__puntuacion{padding:4px 8px;font-size:.76rem}
  #resultados .tarjeta__categoria{font-size:.66rem;margin-bottom:5px}
  #resultados .tarjeta h3{font-size:.98rem}
  #resultados .tarjeta__datos{margin-top:auto;padding-top:11px;font-size:.78rem;gap:10px}
  .vista-btns{display:none}

  .lista .tarjeta{grid-template-columns:132px 1fr}
  .lista .tarjeta__foto{min-height:100%}
  .lista .tarjeta__cuerpo{padding:15px 16px}
  .lista .tarjeta__lema{display:none}
  .lista .tarjeta__logo{display:none}

  .buscador{grid-template-columns:1fr;padding:8px;border-radius:18px}
  .buscador__campo{padding:12px 14px}
  .explorar__barra{padding:12px 14px;gap:10px}
  .explorar__herramientas{width:100%;margin-left:0}
  .selector{flex:1}
  .perfil__portada{height:250px;border-radius:0 0 24px 24px}
  .perfil__encabezado{margin-top:-58px;padding:20px;gap:16px}
  .perfil__logo{width:68px;height:68px;border-radius:19px}
  .perfil__galeria-btn{right:16px;bottom:74px;padding:9px 14px;font-size:.82rem}
  .panel{padding:22px 20px}
  .resumen-resenas{grid-template-columns:1fr;gap:20px;text-align:center}
  .resumen-resenas__nota b{font-size:2.8rem}
  .servicio{flex-wrap:wrap;gap:10px}
  .servicio__duracion{order:3}
  .servicio__precio{margin-left:auto}
  .seccion{padding-block:44px}
  .seccion__cabeza{margin-bottom:24px;gap:14px}
  .seccion__cabeza .btn{width:100%}
  .perfil__acciones{width:100%}
  .perfil__acciones .btn{flex:1}
  .visor__nav{width:42px;height:42px}
  .visor__nav.ant{left:10px}
  .visor__nav.sig{right:10px}
}

@media (max-width:520px){ .solo-grande{display:none} }
@media (max-width:420px){
  .categorias{gap:10px}
  .carrusel-movil > *{flex:0 0 88%}
  .indicador b{font-size:1.35rem}
}

/* Menu lateral en telefono */
.menu-movil{
  position:fixed;inset:0 0 0 auto;width:min(340px,86vw);z-index:120;transform:translateX(100%);
  background:var(--superficie);border-left:1px solid var(--borde);box-shadow:-30px 0 70px rgba(16,24,64,.18);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  padding:22px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
}
.menu-movil.abierto{transform:none}
.menu-movil__cabeza{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.menu-movil a{padding:14px 16px;border-radius:14px;font-size:1rem;font-weight:600;color:var(--texto-2);
  background:var(--superficie-2);border:1px solid var(--borde);transition:var(--trans)}
.menu-movil a:hover,.menu-movil a.activo{color:var(--primario);background:var(--primario-suave);border-color:color-mix(in srgb,var(--primario) 26%,transparent)}
.menu-movil .btn{margin-top:10px;color:#fff}
.velo-menu{position:fixed;inset:0;z-index:110;background:rgba(10,15,35,.55);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.velo-menu.abierto{opacity:1;visibility:visible}

/* Cambio de tema desde el menu del telefono */
.menu-movil__tema{
  padding:14px 16px;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;text-align:left;
  color:var(--texto-2);background:var(--superficie-2);border:1px solid var(--borde);transition:var(--trans);
}
.menu-movil__tema:hover{color:var(--primario);border-color:var(--primario);background:var(--primario-suave)}
.menu-movil__tema .sol{display:none}
:root[data-tema="oscuro"] .menu-movil__tema .luna{display:none}
:root[data-tema="oscuro"] .menu-movil__tema .sol{display:inline}

/* Ilustraciones del sistema: una version para el dia y otra para la noche.
   Las fotos reales de los negocios llevan .img-unica y no cambian. */
.solo-noche{display:none}
:root[data-tema="oscuro"] .solo-dia{display:none}
:root[data-tema="oscuro"] .solo-noche{display:block}