/* Ultra-premium, sin imágenes. Paleta: #40E0D0 (turquesa) y #FFFFFF */
:root{
  --turquoise:#40E0D0;
  --ink:#0d1b1b;
  --bg:#FFFFFF;
  --muted:#5c6a6a;
  --glass: rgba(255,255,255,.6);
  --border: rgba(64,224,208,.35);
  --shadow: 0 20px 60px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Preloader con brillo */
.preloader{position:fixed; inset:0; display:grid; place-items:center; gap:16px; background:#fff; z-index:9999}
.loader-brand{font-weight:800; letter-spacing:.14em; font-size:1rem}
.loader-bar{width:min(420px, 70vw); height:6px; background:#ecffff; border-radius:999px; overflow:hidden; box-shadow:var(--shadow)}
.loader-bar span{display:block; height:100%; width:38%; background:linear-gradient(90deg, #9ff6ed, var(--turquoise)); animation:load 1.1s ease-in-out infinite}
.sparkle{width:70px; height:70px; border-radius:16px; background:conic-gradient(from 120deg, #b7fff4, var(--turquoise) 40%, #fff 60%); filter:blur(10px); opacity:.9}
@keyframes load{0%{transform:translateX(-60%)} 100%{transform:translateX(160%)}}

/* Fondo artístico con blobs + grid + ruido */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.blob{position:absolute; filter:blur(40px); opacity:.35; transform:translateZ(0)}
.b1{width:55vmax; height:55vmax; left:-10vmax; top:-10vmax; background:radial-gradient(40% 40% at 30% 30%, var(--turquoise), transparent)}
.b2{width:60vmax; height:60vmax; right:-15vmax; bottom:-20vmax; background:radial-gradient(35% 35% at 70% 70%, #9ff6ed, transparent)}
.grid{position:absolute; inset:0; background:radial-gradient(circle at 0 0, rgba(64,224,208,.08), transparent 40%), 
      linear-gradient(transparent 95%, rgba(64,224,208,.15) 95%),
      linear-gradient(90deg, transparent 95%, rgba(64,224,208,.15) 95%);
      background-size:100% 100%, 32px 32px, 32px 32px; mix-blend-mode:multiply; opacity:.35}
.noise{position:absolute; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'140\' height=\'140\'><filter id=\'n\'><feTurbulence baseFrequency=\'0.65\' numOctaves=\'2\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'table\' tableValues=\'0 0 0 .06 .1 0 0 0\'/></feComponentTransfer></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>'); opacity:.25; mix-blend-mode:multiply}

/* Topbar premium */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.75); border-bottom:1px solid rgba(64,224,208,.2)}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:10px 14px}
.brand{display:flex; align-items:center; gap:10px}
.mark{inline-size:22px; block-size:22px; border-radius:8px; background:
  radial-gradient(140% 140% at 20% 20%, var(--turquoise), #b7fff4 60%, #fff 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04), var(--shadow);
}
.brand-name{font-weight:700; font-size:.95rem}
.nav{display:flex; gap:8px; overflow:auto}
.tab{
  position:relative; border:1px solid rgba(64,224,208,.25); background:rgba(255,255,255,.9);
  padding:8px 12px; border-radius:12px; font-weight:700; cursor:pointer; transition:.25s ease;
}
.tab.active{box-shadow:0 10px 28px rgba(64,224,208,.25); transform:translateY(-1px)}
.tab:focus-visible{outline:3px solid var(--turquoise); outline-offset:2px}

/* Vistas (una a la vez) con transición 3D */
.view{display:none; min-height:calc(100dvh - 140px)}
.view.visible{display:block; animation:enter .5s cubic-bezier(.2,.6,.2,1)}
@keyframes enter{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}

/* Layouts */
.wrap{max-width:1100px; margin:0 auto; padding:28px 16px}

/* Hero card (sin imágenes) */
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.9));
  border:1px solid var(--border);
  border-radius:24px; padding:26px 20px; box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.hero-card h1{margin:0 0 8px; font-size:clamp(1.7rem, 2.2vw + 1rem, 3.1rem); line-height:1.1}
.sub{color:var(--muted); margin-bottom:14px}
.info-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:#f2ffff; border:1px solid var(--border); font-weight:600
}
.chip svg{width:18px; height:18px; fill:#0b4d4d}
.chip.link{text-decoration:none; color:inherit}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.btn{appearance:none; border:0; border-radius:12px; padding:12px 16px; font-weight:800; cursor:pointer; transition:.2s ease; box-shadow:var(--shadow)}
.btn.primary{background:var(--turquoise); color:#003b36}
.btn.ghost{background:#fff; border:1px solid var(--border)}
.btn:active{transform:translateY(1px)}
.hero-detail{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.detail-pill{padding:8px 12px; border-radius:999px; background:linear-gradient(180deg,#ecffff,#fff); border:1px solid var(--border); font-weight:700}

/* Glass card */
.glass{
  background:var(--glass); border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:var(--shadow); backdrop-filter:blur(12px)
}
.highlights{display:grid; gap:8px; margin:14px 0 0; padding:0 0 0 18px}

/* Map */
.map{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); margin:10px 0 14px}
.map iframe{border:0; width:100%; height:min(65vh, 440px); display:block}

/* Tiles (Horario) */
.tiles{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:720px){ .tiles{grid-template-columns:repeat(2,1fr)} }
.tile{padding:18px; border-radius:18px; background:linear-gradient(180deg,#f2ffff,#ffffff); border:1px solid var(--border); box-shadow:var(--shadow)}
.tile-head{font-weight:800; margin-bottom:6px; color:#074c4c}
.tile-body{font-weight:700; font-size:1.15rem}

/* Contacto */
.contact{display:grid; gap:12px}
.contact-card{
  display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  padding:16px; border-radius:16px; background:linear-gradient(180deg,#f8ffff,#fff); border:1px solid var(--border); box-shadow:var(--shadow)
}
.cc-ico{font-size:1.4rem}
.cc-title{font-weight:800}
.cc-sub{color:var(--muted); font-weight:700}

/* Footer */
.footer{padding:22px 16px; text-align:center; color:var(--muted); border-top:1px solid rgba(64,224,208,.2); background:rgba(255,255,255,.6); backdrop-filter:blur(6px)}

/* Floating WhatsApp */
.fab{
  position:fixed; right:14px; bottom:14px; width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:var(--turquoise); color:#003b36; box-shadow:0 18px 38px rgba(64,224,208,.45); z-index:60; text-decoration:none
}
.fab svg{width:28px; height:28px; fill:currentColor}