/* ============================
base.css — reset + layout global
============================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; scroll-behavior:smooth; background: #101010; }
body{
  min-height:100%;
  margin:0;
  font-family:var(--font-sans);
  line-height:var(--lh);
  color:var(--blanco);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before {
    --line: hsl(0 0% 95% / 0.25);
    content: "";
    height: 100%;
    width: 100%;
    position: fixed;
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
    mask: linear-gradient(-15deg, transparent 30%, white);
    top: 0;
    z-index: -1;
    opacity: 0.3;
}

[hidden]{ display:none !important; }

input, textarea, select {
  font-size: 16px;  /* evita auto-zoom de iOS */
}
label {
  font-size: 16px;
}

/* ===== Focus / tap highlight / selección — DESACTIVADO GLOBAL ===== */

/* 1) Quita el flash gris/azul de iOS/Android al tocar */
* {
  -webkit-tap-highlight-color: transparent !important;
}

/* 2) Nada de outline/box-shadow en focus (incluye accesibles) */
:focus,
:focus-visible,
:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 3) Controles sin resaltar ni cambiar borde al enfocar */
a, button, [role="button"],
input, select, textarea {
  outline: none !important;
  box-shadow: none !important;

  /* evita “selección de texto” accidental en botones/tiles */
  -webkit-user-select: none !important;
  user-select: none !important;

  /* desactiva menú contextual largo-tap en iOS */
  -webkit-touch-callout: none !important;
}

/* 4) Si tus inputs tenían estilos de :focus, los anulamos aquí */
.campo__input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: inherit !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 5) Firefox clásico: quita padding/borde interno en botones al enfocar */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* 6) Quita cualquier estado :active pegajoso en móviles */
a:active, button:active, [role="button"]:active,
input:active, select:active, textarea:active {
  outline: none !important;
  box-shadow: none !important;
}

img,svg,video{ max-width:100%; height:auto; }
a{ color:var(--blanco); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--rojo-3); }

.nowrap{ white-space:nowrap; }

html{ font-size: 16px; }
h1{ font-size: clamp(28px, 5.5vw, 54px); margin:.3em 0; line-height:1.15; text-transform: uppercase;}
h2 {
    font-size: clamp(30px, 3.5vw, 49px);
    margin: .7em 0 0 0em;
    color: #dd3432;
}
h3{ font-size: clamp(18px, 2.5vw, 22px); margin:.6em 0 .2em; }
p,li,small{ font-size: clamp(16px, 1.4vw, 17px); }
small{ opacity:.85; }

input,select,textarea,button{ font:inherit; font-size:16px; } /* evita zoom iOS */
button{ cursor:pointer; }

.cta {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
@media (max-width: 480px){
  .cta {
    flex-direction: column;
    gap: .75rem;
  }
  .cta .btn {
    width: 100%;
  }
}

/* Contenedores y secciones */
.seccion{ padding: clamp(60px, 8vw, 120px) 0; }
@media (max-width: 767px){
  .seccion{ padding: clamp(40px, 6vh, 60px) 0; }
}
.seccion--oscura {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: linear-gradient(180deg, rgb(16 16 16), rgba(0, 0, 0, .15), transparent);
}
.seccion__contenedor{ 
  width: min(100% - 2*var(--pad), var(--container)); 
  margin-inline:auto; 
  padding-inline: var(--pad);
}
@media (max-width: 480px){
  .seccion__contenedor {
    padding-inline: clamp(12px, 4vw, 20px);
  }
}
.seccion__texto{ opacity:.92; }

/* Cabecera + navegación */
.cabecera{
  position:sticky; top:0; z-index:var(--z-header);
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.15), transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cabecera__contenedor{
  width:min(100% - 2*var(--pad), var(--container)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; 
  padding: clamp(8px, 2vh, 12px) 0;
}
@media (max-width: 480px){
  .cabecera__contenedor {
    padding: 8px 0;
    gap: 8px;
  }
}
.logo{ display:inline-block; }

.nav{ display:flex; align-items:center; gap: clamp(10px, 2vw, 20px); }

/* link/botón de la barra (incluye <a> y <button>) */
.nav__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.52em .9em; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--blanco); opacity:1;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.nav__link:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); box-shadow:var(--shadow-1); }
.nav__cta{ padding:.65em 1.1em; background:var(--rojo); border-radius:5px; box-shadow:var(--shadow-1); }
.nav__cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* ====== FIX HAMBURGUESA & MENÚ MÓVIL 2025 (PRIORITARIO) ====== */

/* Sistema de breakpoints consistente (2026) */
/* mobile-first: base es móvil, luego tablet y desktop */
/* mobile: < 768px | tablet: 768px - 1023px | desktop: >= 1024px */

/* Mostrar/ocultar según tamaño (hamburguesa SOLO en móvil/tablet) */
@media (min-width: 1024px){
  .btn-hamburguesa{ display: none !important; }
  .nav{ display: flex !important; } /* fuerza barra en escritorio */
}
@media (max-width: 1023px){
  .nav{ display: none !important; } /* oculta botones de header en móvil/tablet */
  .btn-hamburguesa{ display: inline-flex !important; }
}

/* Botón hamburguesa base */
.btn-hamburguesa{
  position: relative; z-index: 10001; /* por encima del overlay */
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.btn-hamburguesa .hb-line{
  position: absolute; left: 50%; width: 22px; height: 2px;
  background: #fff; border-radius: 2px; transform: translateX(-50%);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.btn-hamburguesa .hb-line:nth-child(1){ top: 14px; }
.btn-hamburguesa .hb-line:nth-child(2){ top: 21px; }
.btn-hamburguesa .hb-line:nth-child(3){ top: 28px; }
/* A "X" cuando abierto */
.btn-hamburguesa[aria-expanded="true"] .hb-line:nth-child(1){ top: 21px; transform: translateX(-50%) rotate(45deg); }
.btn-hamburguesa[aria-expanded="true"] .hb-line:nth-child(2){ opacity: 0; }
.btn-hamburguesa[aria-expanded="true"] .hb-line:nth-child(3){ top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* Overlay FULLSCREEN opaco (no se ve web detrás) */
#menu-movil[hidden]{ display: none !important; }
#menu-movil{
  position: fixed !important; inset: 0 !important; z-index: 10000 !important;
  background: #000 !important; /* opaco total */
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
#menu-movil.is-open{ opacity: 1; pointer-events: auto; min-height: 100vh; overflow: scroll; }

/* hoja interior + animación */
#menu-movil .mm-sheet{
  min-height: 100vh; display: flex; flex-direction: column; gap: 35px;
  width: min(100% - clamp(20px, 5vw, 40px), 860px); margin: 0 auto; 
  padding: clamp(60px, 12vh, 100px) clamp(10px, 3vw, 40px) clamp(30px, 6vh, 50px);
  color: #fff; transform: translateY(8px); opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
}
#menu-movil.is-open .mm-sheet{ transform: translateY(0); opacity: 1; }

/* header */
.mm-header{ text-align: center; margin: 6px 0 4px; }
.mm-eyebrow{ 
  font-size: clamp(.75rem, 2vw, .85rem); 
  letter-spacing: .18em; 
  text-transform: uppercase; 
  color: #ddd; 
  margin-top: clamp(.5rem, 2vh, 1rem);
}
.mm-brand{ margin: 6px 0 10px; font-size: clamp(28px, 6vw, 36px); }

/* grid de botones (altura razonable, responsive) */
.menu-grid{
  display: grid; gap: clamp(8px, 2vw, 12px);
  grid-template-columns: repeat( auto-fit, minmax(min(140px, 100%), 1fr) );
  padding: 6px 0 12px;
}
@media (max-width: 480px){
  .menu-grid{
    grid-template-columns: 1fr; /* una columna en móviles muy pequeños */
  }
}
#menu-movil .menu-movil__link,
#menu-movil .menu-movil__cta{
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 10px 12px; /* NO gigantes */
  border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
  transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#menu-movil .menu-movil__link:hover,
#menu-movil .menu-movil__cta:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
/* CTA rojo */
#menu-movil .menu-movil__cta{
  background: var(--rojo, #E53935) !important;
  border-color: var(--rojo, #E53935) !important;
  color: #fff !important;
}

/* footer */
.mm-footer{ margin-top: auto; text-align: center; color: #ddd; opacity: .9; font-size: .92rem;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.mm-footer p{ margin: .2rem 0; }

/* Cuando abierto, bloquea scroll de la página */
body.menu-abierto{ overflow: hidden !important; }

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  #menu-movil, #menu-movil .mm-sheet, .btn-hamburguesa, .btn-hamburguesa .hb-line{ transition: none !important; }
}

/* FIN Menu hamburguesa */

/* Hero */
.hero{ position:relative; min-height: clamp(480px, 86vh, 945px); display:grid; place-items:center; overflow:hidden; background: radial-gradient(1200px 600px at 75% -10%, rgb(229 57 53 / 37%), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(255, 212, 0, .08), transparent 55%), linear-gradient(285deg, #0b0b0b82, #121212bd); }
.hero__inner{ 
  width:min(100% - 2*var(--pad), var(--container)); 
  text-align:center; 
  padding-inline: var(--pad);
}
@media (max-width: 480px){
  .hero__inner {
    padding-inline: clamp(12px, 4vw, 20px);
  }
}
/* === Hero: animación de la palabra "ki" creciendo (solo crecimiento) === */

/* Registramos propiedad para animación suave con variables */
@property --ki-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.hero__titulo .ki{
  /* límites exigidos */
  --ki-min: 16px;
  --ki-max: 90px;

  /* tamaño animado: va de 16px -> 90px */
  font-size: clamp(var(--ki-min),
                   calc(var(--ki-min) + (var(--ki-max) - var(--ki-min)) * var(--ki-t)),
                   var(--ki-max));

  color: var(--ki);
  text-shadow: 0 0 80px rgb(255 212 0 / 82%);
  animation: ki-grow 12s ease-out infinite; /* más lento */
}

/* Sube desde 16px hasta 90px y se queda arriba;
   al reiniciar el bucle vuelve a 16px de golpe (sin “encoger” animado). */
@keyframes ki-grow{
  0%   { --ki-t: 0; }
  85%  { --ki-t: 1; }  /* llega al máximo y se mantiene un rato */
  100% { --ki-t: 1; }
}

/* Respeto a reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero__titulo .ki{ animation: none !important; }
}
/* FIN animacion del Ki */

.hero__sub {
    max-width: 820px;
    margin: 30px auto 30px;
    padding: 20px;
    opacity: .9;
    font-family: "Dosis",sans-serif;
    font-size: clamp(17px, 1.4vw, 20px);
}
.hero__acciones{ 
  display:flex; 
  gap: clamp(10px, 2vw, 12px); 
  justify-content:center; 
  margin-top: clamp(16px, 3vh, 24px); 
  flex-wrap:wrap; 
}
@media (max-width: 480px){
  .hero__acciones {
    flex-direction: column;
    width: 100%;
  }
  .hero__acciones .btn {
    width: 100%;
    max-width: 280px;
  }
}
.hero__rayos{ position:absolute; inset:-20% -10% auto -10%; height:120%; background:
  radial-gradient(400px 120px at 50% 10%, rgba(229,57,53,.18), transparent 60%),
  radial-gradient(280px 120px at 20% 0%, rgba(255,212,0,.08), transparent 60%);
  filter: blur(30px); pointer-events:none; animation: rayoPulse 6s ease-in-out infinite;
}

/* =========================
   DIÁLOGOS / MODAL — FULL VIEWPORT, BLOQUEO TOTAL DEL FONDO
   ========================= */


html:has(dialog.modal[open]),
body:has(dialog.modal[open]) {
  overflow: hidden !important;
  touch-action: none !important;
}


dialog.modal[open],
dialog.modal:not([hidden]) {
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain !important;
  touch-action: none !important;
  pointer-events: auto !important;
  color: inherit;
  overscroll-behavior: contain !important; 
  touch-action: none !important;
  pointer-events: auto !important;
  padding: 40px;
}
@media (max-width: 767px){
  dialog.modal[open],
  dialog.modal:not([hidden]) {
    max-width: min(95%, 100vw - 20px);
    padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 30px);
  }
}

/* Backdrop: sólo estilo, NO dependemos de su tamaño */
dialog.modal::backdrop {
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  min-height: 100dvh;
  height: 100dvh;
}

/* Panel interior: ocupa toda el área, scroll interno si hace falta */
.modal-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  overflow: auto !important;
  -webkit-overflow-scrolling: touch;

  background: #141414 !important;   /* opaco, no se ve nada detrás */
  border: 0 !important;
  border-radius: 0 !important;

  display: grid;
  gap: 12px;
  padding: clamp(16px, 3.5vw, 28px);
}

/* Cabecera dentro del modal */
.modal-header{ display:flex; gap:12px; align-items:center; }
.modal-title{ margin:0; }
.modal__acciones{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }

/* Botón cerrar */
.modal-close{
  appearance:none; border:0; background:rgba(255,255,255,.06); color:var(--blanco);
  border-radius:10px; width:36px; height:36px; line-height:36px; text-align:center;
  position:absolute; right:12px; top:12px;
}

/* =========================
   FIN BLOQUE MODAL
   ========================= */

/* Foot */
.pie {
    padding: 24px 10px;
    background: radial-gradient(1200px 600px at 75% -10%, rgba(229, 57, 53, .35), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(255, 212, 0, .08), transparent 55%), linear-gradient(180deg, #0b0b0b82, #121212bd);
    border-top: 1px solid rgba(255,255,255,.06);
    font-family: Dosis, sans-serif;
    text-align: center;
}
.pie__contenedor{ 
  width:min(100% - 2*var(--pad), var(--container)); 
  margin-inline:auto; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  gap:12px; 
  flex-wrap:wrap; 
  padding-inline: var(--pad);
}
@media (max-width: 480px){
  .pie__contenedor {
    padding-inline: clamp(12px, 4vw, 20px);
    justify-content: center;
    text-align: center;
  }
}

/* ================== OVERRIDES ESPECÍFICOS (2025) ================== */
/* Botón Volver (sin flecha, compacto) */
.btn-volver,
.btn--volver,
a.btn-volver,
a.btn--volver,
button.btn-volver,
button.btn--volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-volver:hover,
.btn--volver:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.32);
}
/* Quitar cualQUIER icono/flecha previa de CSS antiguos */
.btn-volver::before,
.btn--volver::before,
.btn-volver .icon,
.btn--volver .icon,
.btn-volver [data-icon],
.btn--volver [data-icon] {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Slot a la izquierda del header para el botón Volver (cuando toque) */
.cabecera__contenedor .back-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ====== Calendario ====== */
body.page-calendario .logo { display: none !important; }

/* ====== Cancelar cita ====== */
body.page-cancelar {
  /* marca para estilos específicos */
}
.cancelar-wrap {
  width: min(100% - 2*var(--pad), 720px);
  margin: clamp(28px, 6vw, 60px) auto;
  text-align: center;
}
.cancelar-title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(26px, 5vw, 36px);
  letter-spacing: .02em;
}
.cancelar-logo {
  display: inline-block;
  width: clamp(82px, 12vw, 120px);
  height: auto;
  margin: 10px 0 24px;
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}
.cancelar-modal-host { display: grid; }
.cancelar-modal-host > * { width: 100%; max-width: 720px; }

body.page-cancelar dialog.modal::backdrop {
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}

/* ================== FIN OVERRIDES ESPECÍFICOS ================== */

/* === Botón “subir arriba” (desktop) === */
.btn-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--negro, #000);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  z-index: 60;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}
.btn-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.btn-top:hover{
  background: #e10600;
  color: #fff;
  border-color: #e10600;
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    0 8px 18px rgba(225, 6, 0, .35);
}
.btn-top:active{
  transform: translateY(0) scale(.98);
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
.btn-top:focus-visible{
  outline: 2px solid var(--ki, #ffd400);
  outline-offset: 2px;
}
.btn-top i{ font-size: 18px; line-height: 1; }

/* Botón subir arriba: oculto en móviles/tablets pequeños */
@media (max-width: 767px){ 
  .btn-top{ display: none; } 
}
@media (prefers-reduced-motion: reduce){ .btn-top{ transition: none; } }

/* animaciones.css — microinteracciones y fondos */
@keyframes rayoPulse{
  0%{ opacity:.65; transform: translateY(0) scale(1); }
  50%{ opacity:.9; transform: translateY(-8px) scale(1.02); }
  100%{ opacity:.65; transform: translateY(0) scale(1); }
}
@keyframes popIn{
  0%{ transform: scale(.7); opacity:0; }
  60%{ transform: scale(1.08); opacity:1; }
  100%{ transform: scale(1); }
}
.fade-in-up{ animation: fadeInUp .35s ease both; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
.menu-item-animate { animation: fadeSlideIn .24s ease both; }

/* === Animaciones del check === */
@keyframes check-in {
  0%   { transform: scale(.85); opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes check-tick {
  0%   { transform: scale(.8);  opacity: 0; }
  60%  { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes check-ring {
  0%   { opacity: 0; transform: scale(.65); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}