/* Solo los pesos que se usan de verdad. Montserrat 300 y Spectral 200/300 se quedaron sin uso al subir el texto fino a 400, y 800 nunca lo tuvo: pedirlos es descargar ficheros de fuente que nadie pinta. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Spectral:wght@400;500;600&display=swap'); /* Cancun es la letra de la escuela: está en los rótulos del local, en el escudo y bordada en los doboks. Precisamente por eso NO se usa como tipografía de página, sino como sello: aparece donde se escribe el nombre de la escuela y en ningún otro sitio. Una letra de marca puesta en todos los títulos deja de leerse como marca y pasa a ser fondo. */ @font-face { font-family: 'Cancun Regular'; src: url('../fonts/cancun-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ========================================================= DESIGN TOKENS ========================================================= */ :root { /* Superficies — TINTA. Es el fondo por defecto de todo el sitio. Las secciones de papel reescriben estos mismos tokens en ámbito con la clase .on-paper, así que los componentes no se enteran. */ --bg: #17150F; --bg-2: #1C1913; --surface: #201D16; --surface-2: #26221A; --surface-hover: #2D291F; --border: rgba(237, 233, 225, 0.13); --border-strong: rgba(237, 233, 225, 0.26); /* El papel, disponible en todo el documento: lo usan .on-paper y también los diálogos, que cuelgan del y no heredan ámbito. */ --paper: #E9E3D8; --paper-2: #E3DCCE; --paper-text: #26221D; --paper-muted: rgba(38, 34, 29, 0.72); --paper-dim: rgba(38, 34, 29, 0.5); --paper-border: rgba(38, 34, 29, 0.16); /* Marca — el rojo del escudo. Solo para el titular del hero. */ --red: #DF1010; /* Sello — el rojo del diseño, del tamaño de una firma. Todo el resto de acentos rojos del sitio salen de aquí. */ --seal: #B23A2E; --seal-bright: #C4483A; --seal-dark: #8E2C22; --seal-soft: rgba(178, 58, 46, 0.13); --on-seal: #FBF7F0; /* Texto */ --text: #EDE9E1; --muted: rgba(237, 233, 225, 0.74); --dim: rgba(237, 233, 225, 0.5); /* Tipos --font-brand la marca. Compone "Ne Do Kwan" en el hero y en ningún otro sitio del sitio: Cancun es un logotipo, no una tipografía de texto, y compuesta como frase se lee como una pegatina. --font-display los titulares de contenido --font-body el texto corrido */ --font-brand: 'Cancun Regular', 'Spectral', Georgia, serif; --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-body: 'Montserrat', system-ui, -apple-system, sans-serif; /* Radii — esquinas contenidas: el único elemento tipo píldora son los botones, lo que da contraste en vez de redondearlo todo */ --r-sm: 6px; --r: 10px; --r-lg: 12px; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.42); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --t: 0.35s var(--ease); /* Layout */ --nav-h: 76px; --section-pad: clamp(3.5rem, 7vw, 6rem); --ancho-max: 1040px; } /* El ancho del contenido lo decide el diseño, no Bootstrap. Bootstrap ensancha .container a 1320px a partir de 1400px de viewport, y ese escalón cae justo donde están los portátiles: un MacBook de 13-14" da 1470 o 1512px de CSS, así que pasa de 1140 con 130px de margen a 1320 con 40 —180px más de contenido por un píxel más de ventana—. En un monitor de 27" eso deja 300px de aire y compone; en un portátil llega casi al borde y se lee como "todo enorme". Con --ancho-max el contenido se acota igual en portátil y en monitor, y es el margen el que crece. Se aplica desde 1200 y no desde 1400 a propósito: si solo tapara el escalón de 1400, un --ancho-max menor que los 1140px que Bootstrap da entre 1200 y 1399 haría que el contenido se ESTRECHE al agrandar la ventana. Cubriendo los dos escalones, el ancho sube una vez a 1200 y ahí se queda. Los de móvil y tablet no se tocan: esos sí están bien. */ @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: var(--ancho-max); } } /* ========================================================= TINTA Y PAPEL --------------------------------------------------------- La página alterna dos fondos. En vez de duplicar reglas por cada componente, una sección .on-paper redefine los mismos tokens semánticos dentro de su ámbito: todo lo que use var(--bg), var(--text), var(--border)… se adapta solo. ========================================================= */ .on-paper { --bg: var(--paper); --bg-2: var(--paper-2); --surface: var(--paper-2); --surface-2: #DCD4C4; --surface-hover: #D5CCBA; --border: var(--paper-border); --border-strong: rgba(38, 34, 29, 0.32); --text: var(--paper-text); --muted: var(--paper-muted); --dim: var(--paper-dim); background: var(--bg); color: var(--text); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg); font-family: var(--font-body); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } /* Accesibilidad: anillo de foco visible al navegar con teclado */ :focus-visible { outline: 2px solid var(--seal-bright); outline-offset: 3px; border-radius: 4px; } /* Enlace "saltar al contenido" (oculto hasta recibir foco) */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 3000; background: var(--seal); color: var(--on-seal); font-weight: 600; font-size: 0.95rem; padding: 12px 24px; border-radius: var(--r-pill); box-shadow: var(--shadow-lift); transition: top 0.2s var(--ease); } .skip-link:focus { top: 14px; color: var(--on-seal); } ::selection { background: var(--seal); color: var(--on-seal); } /* Grano finísimo sobre todo el sitio: quita el plano digital perfecto de los fondos oscuros. Decorativo, nunca intercepta el ratón. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--seal-dark); } /* ========================================================= TYPOGRAPHY HELPERS / SECTIONS ========================================================= */ /* El margen inferior del último bloque de una página (los .container mb-5) se escapaba fuera de
por colapso de márgenes: 48px que quedaban pintados con el fondo del body. En las páginas oscuras no se notaba —negro sobre negro—, pero en Horarios y Quiénes Somos, donde el
entero va en papel, dejaba una franja negra entre el contenido y la línea roja del pie. flow-root crea un contexto de formato: el margen se queda dentro y el papel llega hasta el pie. El hueco sigue midiendo lo mismo, solo cambia de lado. */ main { display: flow-root; } .section { padding: var(--section-pad) 0; position: relative; } .section-title { font-weight: 400; font-family: var(--font-display); color: var(--text); font-size: clamp(2.1rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.005em; margin-bottom: 22px; } .section-title .accent { color: var(--seal); } .section-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.85; max-width: 58ch; margin: 0; font-weight: 400; } /* ========================================================= BUTTONS ========================================================= */ /* Botón sello: el mismo botón rojo en tres sitios (llamadas a la acción, contacto y ubicación). Antes estaba escrito tres veces y los tamaños ya habían divergido (14/30, 13/36, 12/26 de relleno). La base vive aquí una sola vez y cada uno declara, en su sección, solo lo que de verdad cambia. */ .btn-nedo, .contacto-btn, .ubicacion-btn { background: var(--seal); color: var(--on-seal); font-weight: 600; border: none; border-radius: var(--r-pill); box-shadow: var(--shadow-lift); transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); cursor: pointer; } .btn-nedo:hover, .contacto-btn:hover, .ubicacion-btn:hover { background: var(--seal-bright); color: var(--on-seal); transform: translateY(-3px); } .btn-nedo { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; letter-spacing: 0.3px; padding: 14px 30px; } .btn-nedo:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--text); font-weight: 600; font-size: 1rem; padding: 13px 28px; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); transition: all var(--t); cursor: pointer; } .btn-ghost:hover { color: var(--text); border-color: var(--seal); background: var(--seal-soft); transform: translateY(-3px); } .btn-nedo i, .btn-ghost i { font-size: 1.2rem; } /* ========================================================= NAVBAR (glass, sticky) ========================================================= */ .navbar { background: rgba(23, 21, 15, 0.74); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); min-height: var(--nav-h); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1030; transition: background var(--t), border-color var(--t), box-shadow var(--t); } .navbar.scrolled { background: rgba(8, 8, 10, 0.92); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); border-bottom-color: var(--border-strong); } .navbar-col-logo { width: 200px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .navbar-col-logo img, .navbar-col-logo a:hover img { transform: scale(1.06); } .navbar .navbar-nav { align-items: center; } .offcanvas-nedo .navbar-nav { align-items: flex-start; } /* Links */ .nav-link { color: var(--text) !important; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; padding: 8px 14px !important; position: relative; transition: color var(--t); } .nav-link::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--seal); transform: scaleX(0); transform-origin: left; transition: transform var(--t); } .nav-link:hover, .nav-link.active, .nav-link:focus, .nav-link.show { color: var(--seal) !important; } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } /* Dropdown Actividades */ .dropdown > .nav-link::after { display: none; } .dropdown-menu { background: rgba(18, 18, 22, 0.96); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; margin-top: 0; box-shadow: var(--shadow); } /* Despliegue por hover en escritorio, con puente invisible para que el cursor pueda bajar al menú sin que se cierre */ /* El menú horizontal aparece en xl (1200px), no en lg: necesita 1260px de sitio —logo 200 + siete enlaces 814 + botón 246— y por debajo de eso desbordaba a lo ancho en silencio. Entre 1200 y 1399 aún le faltan 71px, así que ahí los enlaces van más apretados; desde 1400 recuperan su espaciado. */ @media (min-width: 1200px) and (max-width: 1399.98px) { .navbar .navbar-nav .nav-link { padding: 8px 10px !important; font-size: 0.9rem; letter-spacing: 0.2px; } } @media (min-width: 1200px) { .navbar .dropdown:hover > .dropdown-menu { display: block; } .navbar .dropdown-menu { margin-top: 14px; } .navbar .dropdown-menu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } } .dropdown-item { color: var(--muted) !important; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; padding: 9px 16px; border-radius: 8px; transition: all var(--t); } .dropdown-item:hover, .dropdown-item:focus { background: var(--seal); color: var(--on-seal) !important; transform: translateX(3px); } .navbar-cta { min-width: 200px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; } .navbar-cta .btn-nedo { padding: 10px 20px; font-size: 0.9rem; white-space: nowrap; } /* Selector de idioma (escritorio) */ .lang-switcher .lang-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-transform: none; } .lang-switcher .lang-toggle::after { display: none; } .lang-switcher .lang-toggle i.ti-world { font-size: 1.2rem; } .lang-switcher .lang-caret { font-size: 0.85rem; transition: transform var(--t); } .lang-switcher .lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); } .lang-switcher .lang-current { font-weight: 700; letter-spacing: 0.5px; } .lang-switcher .dropdown-menu { min-width: 150px; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; bottom: auto !important; transform: none !important; } .lang-switcher .dropdown-item.active { background: var(--seal-soft); color: var(--seal) !important; font-weight: 600; } /* Selector de idioma (móvil, dentro del offcanvas) */ .lang-switcher-mobile { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .lang-switcher-mobile-label i { color: var(--seal); font-size: 1.3rem; } .lang-pill { flex: 1; background: transparent; border: 1.5px solid var(--border-strong); color: var(--muted); border-radius: var(--r-pill); padding: 8px 0; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; transition: all var(--t); cursor: pointer; } .lang-pill:hover { border-color: var(--seal); color: var(--text); } .lang-pill.active { background: var(--seal); border-color: var(--seal); color: var(--on-seal); } /* Navbar toggler */ .navbar-toggler-nedo { border: 1.5px solid var(--border-strong); border-radius: 10px; padding: 5px 9px; color: var(--seal); background: rgba(255, 255, 255, 0.03); } .navbar-toggler-nedo i { font-size: 1.6rem; color: var(--seal); } /* Offcanvas mobile */ .offcanvas-nedo { background: var(--bg); width: 290px; border-right: 1px solid var(--border); } .offcanvas-nedo .offcanvas-header { border-bottom: 1px solid var(--border); padding: 18px 22px; } .offcanvas-nedo .offcanvas-body { padding: 18px 22px; } .offcanvas-nedo .nav-link { color: var(--text) !important; font-size: 1.05rem; padding: 10px 0 !important; text-align: left; text-transform: none; } .offcanvas-nedo .nav-link::after { display: none; } .offcanvas-nedo .nav-link:hover { color: var(--seal) !important; } .offcanvas-nedo .dropdown-item { font-size: 0.95rem; padding: 8px 12px; } .offcanvas-chevron { font-size: 1rem; transition: transform var(--t); } [aria-expanded="true"] .offcanvas-chevron { transform: rotate(180deg); } .btn-close-nedo { background: none; border: none; cursor: pointer; padding: 4px; } .btn-close-nedo i { font-size: 1.5rem; color: var(--seal); } .offcanvas-cta { margin-top: 18px; width: 100%; justify-content: center; } /* ========================================================= HERO ========================================================= */ #img-background { position: relative; width: 100%; height: calc(100dvh - var(--nav-h)); min-height: 540px; overflow: hidden; } #img-background .carousel, #img-background .carousel-inner, #img-background .carousel-item { height: 100%; } #img-background .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; animation: heroZoom 9s ease-out forwards; } @keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } } /* Guarda a propósito: el carrusel del hero es decorativo y hoy no lleva controles en el HTML. Esto asegura que sigan ocultos si alguna vez se añaden por error o los inyecta Bootstrap. */ #img-background .carousel-control-prev, #img-background .carousel-control-next, #img-background .carousel-indicators { display: none; } .hero-overlay { position: absolute; inset: 0; z-index: 10; background: linear-gradient(180deg, rgba(23, 21, 15, 0.72) 0%, rgba(23, 21, 15, 0.58) 45%, rgba(23, 21, 15, 0.96) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; } /* Iba a 2,6rem en peso 300, casi el mismo tamaño que el nombre y pegada a él: dos letras muy distintas al mismo peso, sin escalón de jerarquía. Como rótulo pequeño se aparta y deja que la marca sea lo único que suena. */ .hero-overlay .hero-welcome { font-size: 0.82rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; color: var(--dim); margin-bottom: 26px; animation: fadeUp 0.8s var(--ease) 0.1s both; } .hero-titulo { font-family: var(--font-brand); color: var(--red); font-size: clamp(3rem, 6.5vw, 4.25rem); line-height: 1; letter-spacing: 0.05em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65); margin-bottom: 38px; animation: fadeUp 0.8s var(--ease) 0.2s both; } .hero-descripcion { color: rgba(255, 255, 255, 0.88); font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 400; max-width: 680px; line-height: 1.7; margin-bottom: 36px; animation: fadeUp 0.8s var(--ease) 0.3s both; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.8s var(--ease) 0.4s both; } .hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 11; color: rgba(255, 255, 255, 0.7); font-size: 1.8rem; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PORTADA — bloques del sistema tinta/papel --------------------------------------------------------- Ni tarjetas, ni sombras, ni cajas. Filetes de un píxel y aire: una tarjeta separa, un filete ordena. ========================================================= */ /* Encabezado de bloque, alineado a la izquierda y sin adornos */ .bloque-head { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); } .bloque-head .section-title { margin-bottom: 10px; } .bloque-head .section-lead { margin: 0; max-width: 46ch; } /* ========================================================= CREDO — la respiración de la página ========================================================= */ .credo { padding: clamp(5rem, 10vw, 6.5rem) 0; text-align: center; } .credo-mark { font-size: clamp(1.5rem, 2.6vw, 1.7rem); line-height: 1; letter-spacing: 0.14em; color: var(--seal); margin: 0 0 clamp(2rem, 5vw, 3.2rem); opacity: 0.9; } .credo-frase { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.55; letter-spacing: -0.005em; max-width: 21ch; margin: 0 auto; color: var(--text); } .credo-firma { margin: clamp(2rem, 5vw, 3rem) 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; } /* La firma es el camino a la historia de la escuela: enlace, pero sin que se note más que la frase que tiene encima. */ .credo-firma a { color: var(--dim); border-bottom: 1px solid transparent; padding-bottom: 4px; transition: color var(--t), border-color var(--t); } .credo-firma a:hover { color: var(--seal); border-bottom-color: var(--seal); } /* ========================================================= DISCIPLINAS — lista, no rejilla de tarjetas ========================================================= */ .disc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .disc-row { border-bottom: 1px solid var(--border); } .disc-row > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) 40px; align-items: baseline; gap: clamp(14px, 3vw, 34px); padding: clamp(20px, 2.6vw, 30px) 4px; transition: padding-left var(--t); } .disc-row > a:hover { padding-left: 14px; } .disc-n { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.2; color: var(--text); transition: color var(--t); } .disc-row > a:hover .disc-n { color: var(--seal); } .disc-d { color: var(--muted); font-weight: 400; font-size: 0.94rem; line-height: 1.6; } .disc-h { color: var(--dim); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; } .disc-a { justify-self: end; color: var(--seal); font-size: 1.15rem; opacity: 0; transition: opacity var(--t), transform var(--t); transform: translateX(-6px); } .disc-row > a:hover .disc-a { opacity: 1; transform: translateX(0); } @media (max-width: 900px) { .disc-row > a { grid-template-columns: minmax(0, 1fr) 30px; gap: 6px 14px; } .disc-n { grid-area: 1 / 1 / 2 / 2; } .disc-a { grid-area: 1 / 2 / 2 / 3; opacity: 1; transform: none; } .disc-d { grid-area: 2 / 1 / 3 / 3; } .disc-h { grid-area: 3 / 1 / 4 / 3; margin-top: 4px; } } /* ========================================================= HUECO DE VÍDEO --------------------------------------------------------- El marcado vive comentado en index.html y solo se enciende cuando haya vídeo: un marco vacío resta más de lo que promete. ========================================================= */ .video-marco { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border); /* Oscuro a mano y no con var(--bg) a propósito: es el fondo del propio marco, y tiene que seguir siéndolo también cuando la sección va en papel. Con el token cambiaría a crema y las bandas del vídeo quedarían claras, que es justo lo contrario de lo que hace una pantalla. */ background: #100E0A; overflow: hidden; } .video-marco video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Escuadras de sello en las esquinas, como el encuadre de una foto */ .video-marco::before, .video-marco::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; } .video-marco::before { top: 0; left: 0; border-top: 1px solid var(--seal); border-left: 1px solid var(--seal); } .video-marco::after { right: 0; bottom: 0; border-right: 1px solid var(--seal); border-bottom: 1px solid var(--seal); } .video-meta { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 0; color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; } /* ========================================================= SEMANA — la retícula de horarios de la portada ========================================================= */ .semana-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .semana { display: grid; border-left: 1px solid var(--border); grid-template-columns: 90px repeat(var(--semana-cols, 4), minmax(122px, 1fr)); border-top: 1px solid var(--border); min-width: 560px; } .semana-celda { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 10px 14px; min-height: 46px; } /* Van con --muted y no con --dim a propósito: es texto pequeño (0.72rem) y en mayúsculas con mucho espaciado, lo que ya cuesta de leer. Sobre papel, --dim se queda en 2.97:1 de contraste (el mínimo legible es 4.5:1) y las cabeceras de día y las horas casi desaparecían. */ .semana-dia, .semana-hora, .semana-esquina { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; } .semana-hora { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .semana-clase { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1rem; line-height: 1.25; color: var(--text); } .semana-clase + .semana-clase { margin-top: 8px; } /* La franja de edad, por lo mismo: 0.72rem en peso 300 con --dim no se leía. */ .semana-clase small { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em; color: var(--muted); margin-top: 2px; } .semana-clase[data-cat="hapkido"] { color: var(--seal); } .semana-pie { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; } /* ========================================================= PRECEPTOS ========================================================= */ .preceptos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); text-align: center; } @media (max-width: 760px) { .preceptos { grid-template-columns: repeat(2, 1fr); } } .precepto-han { display: block; font-size: clamp(1.4rem, 2.5vw, 1.6rem); line-height: 1; color: var(--seal); margin-bottom: 18px; } .precepto h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: 0; color: var(--text); margin: 0; } .precepto-rom { display: block; margin-top: 7px; color: var(--dim); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.2em; } /* ========================================================= VISITA — el cierre ========================================================= */ .visita-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.4rem, 6vw, 5rem); align-items: center; } @media (max-width: 900px) { .visita-grid { grid-template-columns: 1fr; } } .visita-datos { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px 22px; margin: 0; font-size: 0.98rem; } .visita-datos dt { color: var(--dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; padding-top: 4px; } .visita-datos dd { margin: 0; color: var(--text); line-height: 1.6; } .visita-datos a { color: var(--text); border-bottom: 1px solid var(--border-strong); transition: color var(--t), border-color var(--t); } .visita-datos a:hover { color: var(--seal); border-color: var(--seal); } /* Enlace con flecha, el único remate de la página */ .enlace-flecha { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.2em; padding-bottom: 7px; border-bottom: 1px solid var(--border-strong); transition: color var(--t), border-color var(--t), gap var(--t); } .enlace-flecha:hover { color: var(--seal); border-color: var(--seal); gap: 20px; } /* ========================================================= PAGE HEAD (secondary pages) ========================================================= */ /* COMPENSACIÓN ÓPTICA El mismo peso se lee más grueso sobre tinta que sobre papel: es irradiación, el fondo claro come trazo. Con Spectral en cuerpos grandes la diferencia es tan visible que parecen dos tipografías distintas. Los titulares grandes suben un escalón cuando van en papel para que la voz sea la misma en todo el sitio. */ .on-paper .page-title, .on-paper .section-title, .on-paper .faq-titulo, .on-paper .ubicacion-titulo { font-weight: 500; } /* El credo no llevaba compensación de verdad: su regla base era 300 pero la sección .credo es SIEMPRE de papel, así que lo que se veía era este valor. Al subir la base de 300 a 400 esta regla se quedó sin trabajo, y dejarla en 500 habría engordado una frase que nunca fue la "línea fina" del problema: es un serif de 34px, y ahí el peso ligero es el diseño, no un descuido. Se queda en 400, exactamente como se veía antes. */ .on-paper .credo-frase { font-weight: 400; } .on-paper .prosa-titulo, .on-paper .horarios-seccion { font-weight: 500; } /* Excepción: una página que es una tabla y poco más se lee mejor centrada, como un cuadro colgado en la pared. Se pide con .centrado en el contenedor. */ .centrado .page-head { max-width: none; text-align: center; } .centrado .page-head .page-title::after, .centrado .page-head .page-sub { margin-left: auto; margin-right: auto; } @media (min-width: 769px) { .centrado .tabla-wrapper { margin-left: auto; margin-right: auto; } } /* Páginas de lectura larga. Van sobre papel porque leer texto seguido sobre tinta cansa, y comparten una sola medida entre titular y cuerpo para que arranquen en la misma vertical. */ .lectura { --medida: 74ch; } /* Iban centrados mientras la portada va alineada a la izquierda: dos sistemas conviviendo. Ahora comparten eje. Las páginas con columna de lectura estrecha le pasan su medida con --medida para que titular y texto arranquen en la misma vertical. */ .page-head { max-width: var(--medida, none); padding: clamp(2.8rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 2.5rem); } .page-title { font-weight: 400; font-family: var(--font-display); color: var(--text); font-size: clamp(2.2rem, 4.4vw, 2.75rem); letter-spacing: -0.005em; line-height: 1.08; position: relative; } /* Un filete de un píxel, como el resto del sitio. El de 3px con esquinas redondeadas era el último resto del sistema anterior. */ .page-head .page-title::after { content: ''; display: block; width: 56px; height: 1px; background: var(--seal); margin: 22px 0 0; } .page-head .page-sub { color: var(--muted); font-size: 1.05rem; font-weight: 400; max-width: 62ch; margin: 22px 0 0; line-height: 1.85; } /* ========================================================= CARDS (activity / generic — used by JS too) ========================================================= */ /* Ni caja, ni sombra, ni esquinas: un filete arriba y aire. Es el mismo criterio que la lista de disciplinas de la portada — una tarjeta separa, un filete ordena. */ .card { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; overflow: hidden; transition: border-color var(--t); } .card:hover { border-top-color: var(--border-strong); } .card .card-body { padding: 22px; } .card .card-title { font-weight: 600; color: var(--text); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0; margin-bottom: 14px; } .card .card-text { color: var(--muted); font-weight: 400; line-height: 1.8; font-size: 1rem; } .card .row.g-0 .col-md-8 { display: flex; align-items: center; } .card-img-left { width: 100%; height: 100%; object-fit: cover; min-height: 240px; } /* Móvil: la tarjeta con imagen a la izquierda se apila. Va junto a su componente, no en un cajón al final. */ @media (max-width: 768px) { .card .row.g-0 .col-md-8 { display: block; } } /* ========================================================= SCHEDULE TABLES ========================================================= */ .tabla-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 0 4px; margin-bottom: 18px; } @media (min-width: 769px) { .tabla-wrapper { width: fit-content; max-width: 100%; margin: 0 0 18px; overflow-x: visible; } /* Días y horas siempre en una sola línea (los
intencionados de horarios dobles se respetan igualmente) */ .horarios-tabla td:nth-child(3) { white-space: nowrap; } } .horarios-seccion { text-align: left; color: var(--seal); font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.6px; margin: 6px 0 12px; } .horarios-tabla { width: 100%; border-collapse: collapse; color: var(--text); } .horarios-tabla tr { border-bottom: 1px solid var(--border); transition: background var(--t); } .horarios-tabla tr:last-child { border-bottom: none; } .horarios-tabla tr:hover { background: rgba(255, 255, 255, 0.02); } .horarios-tabla td { padding: 10px 16px 10px 0; vertical-align: middle; font-size: 1rem; } .horarios-tabla td:first-child { font-weight: 600; white-space: nowrap; } .horarios-tabla td.horarios-tabla-nombre { color: var(--seal); font-family: var(--font-body); font-weight: 600; } .horarios-tabla td:nth-child(2) { white-space: nowrap; color: var(--dim); text-align: center; } .horarios-tabla td:nth-child(3) { color: var(--muted); font-weight: 400; } .separador { border: none; border-top: 1px solid var(--border); margin: 34px 0; } /* Móvil: la tabla se apila en columnas. Va junto a su componente, no en un cajón al final. */ @media (max-width: 768px) { /* Schedule stacked layout on mobile */ .tabla-wrapper { overflow-x: visible; } .horarios-tabla, .horarios-tabla tbody, .horarios-tabla tr, .horarios-tabla td { display: block; width: 100%; } .horarios-tabla tr { padding: 14px 0; } .horarios-tabla td { padding: 1px 0; font-size: 0.95rem; white-space: normal; } .horarios-tabla td:first-child { font-size: 1.05rem; margin-bottom: 3px; } .horarios-tabla td:nth-child(2):empty { display: none; } .horarios-tabla td:nth-child(2):not(:empty) { display: inline; font-size: 0.85rem; text-align: left; } .horarios-tabla td:nth-child(3) { font-size: 0.88rem; } .card-img-left { min-height: 200px; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* ========================================================= FAQ (dark) ========================================================= */ .faq-bloque { background: var(--bg-2); padding: var(--section-pad) 0; border-top: 1px solid var(--border); } .faq-titulo { font-weight: 400; font-family: var(--font-display); color: var(--text); font-size: clamp(2rem, 4vw, 2.4rem); letter-spacing: -0.005em; margin-bottom: 34px !important; } .faq-bloque .accordion { max-width: var(--medida, 820px); margin: 0; } /* Las preguntas también dejan de ser cajas: filas separadas por filete */ .faq-bloque .accordion-item { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0 !important; margin-bottom: 0; overflow: hidden; } .faq-bloque .accordion-item:last-child { border-bottom: 1px solid var(--border); } .faq-bloque .accordion-button { font-weight: 500; font-size: 1.02rem; color: var(--text); background: transparent; padding: 22px 4px; border-radius: 0 !important; } .faq-bloque .accordion-button:not(.collapsed) { color: var(--seal); background: transparent; box-shadow: none; } .faq-bloque .accordion-button:focus { box-shadow: none; } .faq-bloque .accordion-button::after { filter: invert(80%); transition: transform var(--t); } .faq-bloque .accordion-button:not(.collapsed)::after { filter: invert(17%) sepia(98%) saturate(6000%) hue-rotate(356deg); } .faq-bloque .accordion-body { color: var(--muted); font-weight: 400; line-height: 1.85; padding: 0 4px 26px; background: transparent; max-width: 68ch; } /* ========================================================= QUIÉNES SOMOS ========================================================= */ .prosa { max-width: var(--medida, 820px); margin: 0; line-height: 1.95; font-size: 1.06rem; color: var(--muted); font-weight: 400; } .prosa p { margin-bottom: 1.1rem; } .prosa strong { color: var(--text); font-weight: 600; } .prosa-titulo { font-weight: 400; font-family: var(--font-display); color: var(--seal); font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: 0; margin: 48px 0 20px; padding-left: 18px; border-left: 3px solid var(--seal); } .prosa-lista { padding-left: 22px; margin-bottom: 18px; } .prosa-lista li { margin-bottom: 8px; } .prosa-enlace { color: var(--seal); font-weight: 600; } .prosa-enlace:hover { color: var(--seal-bright); text-decoration: underline; } /* ========================================================= NAV PILLS (galería) ========================================================= */ .nav-pills .nav-link { color: var(--muted); border: 1.5px solid var(--border-strong); background: transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 22px; transition: all var(--t); } .nav-pills .nav-link::after { display: none; } .nav-pills .nav-link:hover { background: var(--seal-soft); color: var(--text) !important; border-color: var(--seal); } .nav-pills .nav-link.active { background: var(--seal) !important; color: var(--on-seal) !important; border-color: var(--seal); box-shadow: var(--shadow-lift); } /* ========================================================= EQUIPO ========================================================= */ /* La rejilla se centra bajo su titular, como la tabla de Horarios: la página es una cuadrícula y poco más, y descentrada dejaba un hueco a la derecha. */ #equipo-container { max-width: 1040px; margin-inline: auto; } #equipo-container .card { overflow: hidden; } /* El