@font-face { font-family: "Bebas Neue"; src: url("fuentes/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("fuentes/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("fuentes/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("fuentes/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap }

:root {
  --negro: #0b0b0c;
  --carbon: #121214;
  --grafito: #1b1c1f;
  --grafito-2: #24252a;
  --linea: #2e2f35;
  --hueso: #f3efe6;
  --papel: #faf8f3;
  --gris: #b3aea4;
  --gris-2: #85817a;
  --ambar: #f2a93b;
  --ambar-2: #ffc36b;
  --tinta: #16161a;
  --titular: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 14px;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px }
body { margin: 0; background: var(--negro); color: var(--hueso); font: 400 17px/1.65 var(--texto); -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100%; height: auto }
svg { display: block }
a { color: var(--ambar-2); text-underline-offset: 3px }
a:hover { color: var(--ambar) }
h1, h2, h3 { font-family: var(--titular); font-weight: 400; letter-spacing: .01em; line-height: 1; margin: 0 }
h2 { font-size: clamp(44px, 6vw, 72px) }
h3 { font-size: 30px }
p { margin: 0 0 1em }
button { font: inherit; color: inherit; cursor: pointer }
.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto }
[hidden] { display: none !important }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--ambar); color: var(--negro); padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 700 }
.saltar:focus { top: 12px }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px }

.antetitulo { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--ambar); margin: 0 0 16px }
.antetitulo::before { content: ""; width: 28px; height: 2px; background: var(--ambar) }
.intro { color: var(--gris); font-size: 18px; max-width: 640px }
.seccion { padding: clamp(72px, 10vw, 120px) 0 }
.seccion.alt { background: var(--carbon) }
.cabeza-seccion { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: 44px }
.cabeza-seccion .intro { margin: 0 }

.boton { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 700 15px/1 var(--texto); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s, color .15s }
.boton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.boton-primario { background: var(--ambar); color: var(--negro) }
.boton-primario:hover { background: var(--ambar-2); color: var(--negro); transform: translateY(-1px) }
.boton-secundario { border-color: rgba(243, 239, 230, .5); color: var(--hueso) }
.boton-secundario:hover { border-color: var(--hueso); color: var(--hueso) }
.botones { display: flex; flex-wrap: wrap; gap: 12px }

.cabecera { position: sticky; top: 0; z-index: 50; background: rgba(11, 11, 12, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06) }
.cabecera-fila { display: flex; align-items: center; gap: 12px; min-height: 72px }
.menu { margin-left: auto }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hueso) }
.marca img { height: 50px; width: auto; background: var(--hueso); border-radius: 12px; padding: 3px }
.marca b { font: 400 26px/1 var(--titular); letter-spacing: .03em }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px }
.menu a { display: block; padding: 10px 14px; font: 400 21px/1 var(--titular); letter-spacing: .06em; color: var(--hueso); text-decoration: none; border-radius: 8px }
.menu a:hover { color: var(--ambar) }
.menu .menu-cta { margin-left: 10px; padding: 12px 20px; font: 700 14px/1 var(--texto); letter-spacing: .05em; text-transform: uppercase }
.acceso { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 999px; color: var(--hueso); text-decoration: none; font: 700 14px/1 var(--texto); letter-spacing: .04em; text-transform: uppercase }
.acceso svg { width: 20px; height: 20px; fill: none; stroke: var(--ambar); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.acceso:hover { border-color: var(--ambar); color: var(--hueso) }
.tiendas { margin-top: 22px }
.tiendas-titulo { margin: 0 0 10px; font: 700 13px/1 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--hueso) }
.tiendas-botones { display: flex; flex-wrap: wrap; gap: 10px }
.pie .tienda, .tienda { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px 8px 12px; background: #000; border: 1px solid #3a3b40; border-radius: 12px; color: #fff; text-decoration: none }
.tienda:hover { border-color: var(--ambar); color: #fff }
.tienda svg { width: 26px; height: 26px; flex: none }
.tienda small { display: block; font: 400 11px/1.1 var(--texto); color: #cfcac1 }
.tienda b { display: block; font: 600 18px/1.15 var(--texto); color: #fff }
.menu-boton { display: none; width: 46px; height: 46px; border: 1px solid var(--linea); background: transparent; border-radius: 10px; position: relative }
.menu-boton span:not(.oculto) { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--hueso); transition: transform .2s, top .2s }
.menu-boton span:nth-child(1) { top: 17px }
.menu-boton span:nth-child(2) { top: 27px }
.menu-boton[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg) }
.menu-boton[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg) }

.portada { position: relative; min-height: min(88vh, 860px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate }
.portada picture, .portada picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 11, 12, .35) 0%, rgba(11, 11, 12, .55) 45%, rgba(11, 11, 12, .96) 100%) }
.portada-texto { padding: 120px 0 72px }
.portada h1 { font-size: clamp(64px, 11vw, 150px); line-height: .88; max-width: 12ch; margin-bottom: 26px }
.portada h1 span { color: var(--ambar) }
.portada p { font-size: clamp(18px, 2vw, 21px); color: #e2ddd3; max-width: 560px; margin-bottom: 30px }
.sellos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; padding: 0; list-style: none }
.sellos li { padding: 8px 16px; border: 1px solid rgba(243, 239, 230, .28); border-radius: 999px; font: 600 14px/1.2 var(--texto); color: #e8e3d9; background: rgba(11, 11, 12, .45) }

.disciplinas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px }
.disciplina { position: relative; padding: 30px 26px 26px; background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden }
.disciplina::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--color, var(--ambar)) }
.disciplina h3 { margin-bottom: 12px }
.disciplina p { color: var(--gris); font-size: 16px; margin-bottom: 18px }
.disciplina .dias { font: 600 13px/1.4 var(--texto); letter-spacing: .06em; text-transform: uppercase; color: var(--hueso) }

.horario-tabla { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed }
.horario-tabla th { font: 400 22px/1 var(--titular); letter-spacing: .06em; color: var(--gris); padding: 10px 6px; text-align: left }
.horario-tabla th.hora { width: 86px; color: var(--ambar) }
.horario-tabla td { vertical-align: top; padding: 0 }
.horario-tabla .clase { height: 70px; display: flex; flex-direction: column; justify-content: center; overflow: hidden }
.horario-tabla .clase b { font-size: 13.5px }
.clase.hueco { background: transparent; border-left-color: transparent }
.clase { padding: 10px 12px; border-radius: 10px; background: var(--grafito-2); border-left: 4px solid var(--color, var(--ambar)); margin-bottom: 6px }
.clase b { display: block; font: 700 14px/1.25 var(--texto) }
.clase small { display: block; font-size: 13px; color: var(--gris); margin-top: 3px }
.horario-dias { display: none }
.dias-pestanas { display: none }
.js .dias-pestanas { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; position: sticky; top: 72px; z-index: 5; padding: 10px 0; margin-bottom: 8px; background: var(--carbon) }
.dias-pestanas button { min-height: 48px; padding: 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--grafito); color: var(--gris); font: 400 22px/1 var(--titular); letter-spacing: .04em }
.dias-pestanas button[aria-selected="true"] { background: var(--ambar); border-color: var(--ambar); color: var(--negro) }
.js .horario-dias .dia { display: none }
.js .horario-dias .dia.activo { display: block }
.dia { background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; margin-bottom: 12px }
.dia h3 { font-size: 28px; margin-bottom: 12px; color: var(--ambar) }
.dia .clase { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.dia .clase small { margin: 0; white-space: nowrap }
.nota { color: var(--gris); font-size: 15px; margin-top: 24px }

.tarifas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
.tarifa { display: flex; flex-direction: column; padding: 30px 28px; background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio) }
.tarifa h3 { font-size: 34px; margin-bottom: 8px }
.tarifa p { color: var(--gris); font-size: 15px; margin-bottom: 22px }
.precio { margin-top: auto; display: flex; align-items: baseline; gap: 8px; font: 400 64px/1 var(--titular); color: var(--ambar) }
.precio small { font: 600 15px/1 var(--texto); color: var(--gris) }
.tarifas-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 26px 28px; border: 1px dashed var(--linea); border-radius: var(--radio) }
.tarifas-pie p { margin: 0; color: var(--gris); max-width: 640px }

.galeria { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 14px }
.galeria figure { margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--grafito) }
.galeria img { width: 100%; height: 100%; object-fit: cover }
.galeria figure:first-child { grid-row: span 2 }

.contacto-rejilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start }
.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.contacto-lista li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio) }
.contacto-lista svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--ambar); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px }
.contacto-lista b { display: block; font: 700 13px/1.3 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px }
.contacto-lista a, .contacto-lista span { color: var(--hueso); font-size: 18px; word-break: break-word }
.contacto-lista a { display: inline-block; padding: 6px 0 }
.contacto-lista a:hover { color: var(--ambar) }
.contacto-foto { border-radius: var(--radio); overflow: hidden }

.pie { background: var(--carbon); border-top: 1px solid var(--linea); padding: 56px 0 112px; color: var(--gris); font-size: 15px }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px }
.pie h2 { font-size: 26px; color: var(--hueso); margin-bottom: 14px; letter-spacing: .05em }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.pie ul a { display: inline-block; padding: 9px 0 }
.pie a { color: var(--gris); text-decoration: none }
.pie a:hover { color: var(--ambar) }
.pie-marca img { height: 96px; width: auto; margin-bottom: 16px; background: var(--hueso); border-radius: 18px; padding: 6px }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea); font-size: 14px }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 18px }
.pie-legal p { margin: 0 }

.flotante-wa { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--ambar); color: var(--negro); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6) }
.flotante-wa svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.flotante-wa:hover { background: var(--ambar-2); color: var(--negro) }

.pagina-cabecera { padding: 80px 0 40px; background: var(--carbon); border-bottom: 1px solid var(--linea) }
.pagina-cabecera h1 { font-size: clamp(52px, 8vw, 96px) }
.migas { display: flex; gap: 8px; font-size: 14px; color: var(--gris); margin-bottom: 18px }
.migas a { color: var(--gris) }
.legal-papel { background: var(--papel); color: var(--tinta); padding: 56px 0 90px }
.legal { max-width: 780px }
.legal h2 { font-size: 34px; margin: 38px 0 12px; color: var(--tinta) }
.legal h2:first-child { margin-top: 0 }
.legal p, .legal li { color: #2c2c31 }
.legal a { color: #9a5a00 }
.legal ul { padding-left: 22px }
.tabla-scroll { overflow-x: auto }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 18px }
.tabla-legal th, .tabla-legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #ddd6c8; vertical-align: top }
.tabla-legal th { font-weight: 700; background: #f0ebe0 }
.modelo { background: #f0ebe0; border-radius: 10px; padding: 18px 20px; font-size: 15px }

mark.pendiente { background: #ffe066; color: #16161a; padding: 0 .25em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone }
html.sin-marcas mark.pendiente { background: none; color: inherit; padding: 0 }
.vista-previa { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: #ffe066; color: #16161a; border-radius: 999px; font: 600 13px/1.2 var(--texto); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6) }
.vista-previa button { border: 0; background: #16161a; color: #ffe066; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700 }

.tarifa-comprar { margin-top: 20px; justify-content: center }
.seccion-compra { padding: 48px 0 110px }
.compra-rejilla { display: grid; grid-template-columns: 1.35fr .85fr; gap: 40px; align-items: start }
.compra h2 { font-size: 34px; margin: 34px 0 16px; color: var(--hueso) }
.compra h2:first-child { margin-top: 0 }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px }
.campo { display: block; font: 600 14px/1.4 var(--texto); color: var(--gris); margin-bottom: 14px; border: 0; padding: 0 }
.campo legend { padding: 0; margin-bottom: 8px }
.campo input, .campo select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; font: 400 16px/1.3 var(--texto); color: var(--hueso); background: var(--grafito); border: 1px solid var(--linea); border-radius: 10px }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(242, 169, 59, .25) }
.opcion { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 11px 0; min-height: 44px; font-size: 15px; color: var(--hueso); cursor: pointer }
.opcion input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ambar) }
.ayuda { font-size: 14px; color: var(--gris); margin: 12px 0 }
.boton-pagar { margin-top: 18px; font-size: 16px; padding: 18px 30px }
.aviso-compra { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: rgba(242, 169, 59, .12); border: 1px solid rgba(242, 169, 59, .5); color: var(--hueso) }
.aviso-compra.error { background: rgba(239, 91, 91, .12); border-color: rgba(239, 91, 91, .6) }
.resumen { position: sticky; top: 96px; padding: 30px 28px; background: var(--grafito); border: 1px solid var(--linea); border-radius: var(--radio) }
.resumen h2 { font-size: 40px; margin-bottom: 10px }
.resumen p { color: var(--gris) }
.resumen .precio { margin: 18px 0 20px }
.resumen-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 15px }
.resumen-lista li { padding-left: 22px; position: relative }
.resumen-lista li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--ambar) }

@media (max-width: 980px) {
  .compra-rejilla { grid-template-columns: 1fr }
  .resumen { position: static; order: -1 }
  .contacto-rejilla { grid-template-columns: 1fr }
  .pie-rejilla { grid-template-columns: 1fr 1fr }
  .pie-marca { grid-column: 1 / -1 }
}
@media (max-width: 860px) {
  .horario-tabla { display: none }
  .horario-dias { display: block }
  .menu-boton { display: block; order: 3 }
  .acceso { order: 2; margin-left: auto; padding: 0; width: 46px; height: 46px; justify-content: center; border-radius: 10px }
  .acceso span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  .menu { position: fixed; inset: 72px 0 auto 0; background: var(--negro); border-bottom: 1px solid var(--linea); padding: 12px 20px 24px; display: none }
  .menu.abierto { display: block }
  .menu ul { flex-direction: column; align-items: stretch }
  .menu a { font-size: 28px; padding: 14px 6px }
  .menu .menu-cta { margin: 12px 0 0; justify-content: center; font-size: 15px }
  .galeria { grid-template-columns: 1fr; grid-template-rows: none }
  .galeria figure:first-child { grid-row: auto }
}
@media (max-width: 560px) {
  .campos { grid-template-columns: 1fr }
  body { font-size: 16px }
  .seccion { padding: 64px 0 }
  .cabeza-seccion { margin-bottom: 28px }
  .intro { font-size: 17px }
  .portada { min-height: 0 }
  .portada-texto { padding: 96px 0 44px }
  .portada .antetitulo { letter-spacing: .12em }
  .botones .boton { flex: 1 1 100%; justify-content: center }
  .sellos { margin-top: 26px; gap: 8px }
  .sellos li { font-size: 13px; padding: 7px 12px }
  .disciplinas { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-right: -20px; padding-right: 20px; scrollbar-width: none }
  .disciplinas::-webkit-scrollbar { display: none }
  .disciplina { scroll-snap-align: start }
  .tarifa { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; padding: 20px 20px 18px }
  .tarifa h3 { grid-column: 1; grid-row: 1; font-size: 28px; margin: 0 }
  .tarifa .precio { grid-column: 2; grid-row: 1; margin: 0; font-size: 44px }
  .tarifa .precio small { font-size: 13px }
  .tarifa p { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 14px }
  .tarifa .tarifa-comprar { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 13px 20px }
  .tarifas-pie { padding: 20px }
  .galeria { gap: 10px }
  .contacto-lista li { padding: 16px 18px }
  .pie { padding-top: 44px }
  .pie-marca img { height: 80px }
  .pie-legal { flex-direction: column; gap: 4px }
  .pagina-cabecera { padding: 56px 0 30px }
  .legal h2 { font-size: 30px }
  .tabla-legal thead { display: none }
  .tabla-legal, .tabla-legal tbody, .tabla-legal tr, .tabla-legal td { display: block; width: 100% }
  .tabla-legal tr { border-bottom: 2px solid #ddd6c8; padding: 8px 0 }
  .tabla-legal td { border: 0; padding: 6px 0 }
  .tabla-legal td[data-l]::before { content: attr(data-l); display: block; font-weight: 700; font-size: 13px; color: #6b665d; text-transform: uppercase; letter-spacing: .04em }
  .seccion-compra { padding: 28px 0 90px }
  .resumen { padding: 22px 20px }
  .resumen h2 { font-size: 34px }
  .resumen .precio { margin: 12px 0 14px; font-size: 52px }
  .compra h2 { font-size: 30px; margin-top: 28px }
  .boton-pagar { width: 100%; justify-content: center }
  body:has(#compra) .flotante-wa { display: none }
  .vista-previa { left: 10px; bottom: 10px; padding: 8px 8px 8px 12px }
  .marca b { display: none }
  .pie-rejilla { grid-template-columns: 1fr }
  .vista-previa .vp-extra { display: none }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .boton { transition: none }
}
@media print {
  .cabecera, .flotante-wa, .vista-previa { display: none }
  body { background: #fff; color: #000 }
}