/* La web del club. Los colores y la tipografía los pone el club en Ajustes y llegan como variables en el ; lo que no es suyo (verde/rojo del estado, la escuela) es fijo. El contrato del site (docs/WEBSITE.md): los cuatro tokens que leen las páginas de los demás módulos (reservas, facturas, acceso), más los opcionales que aquí conviene fijar. */ :root { --bg: var(--fondo); --text: var(--texto); --accent: var(--principal); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --surface: var(--escuela-fondo); --line: rgba(232, 223, 205, 0.12); --muted: var(--apagado); --accent-contrast: #12160f; --accent-text: var(--claro); --font-display: var(--serif); --radius: 4px; --radius-sm: 3px; --shadow: none; } * { box-sizing: border-box; } html { --principal: #b8934a; --claro: #d9bd7c; --texto: #f1ece1; --fondo: #0c0f0c; --serif: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Palatino Linotype', Georgia, serif; --apagado: rgba(241, 236, 225, 0.62); --tenue: rgba(241, 236, 225, 0.38); --escuela-fondo: #12160f; --escuela-linea: rgba(232, 223, 205, 0.07); } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; overflow-wrap: break-word; } p { margin: 0; } a { text-decoration: none; color: inherit; } /* Las formas que la web dibuja una y otra vez — la estrella de las reseñas, el check de lo que incluye cada programa — se declaran UNA vez, en la cabecera que todas las páginas incluyen, y cada sitio las usa con . Aquí se les dice que tomen el color de su texto: un SVG con el color escrito dentro es un color que la hoja de estilos ya no puede cambiar, y son veintidós copias del mismo dibujo repartidas por cinco páginas. */ .formas { display: none; } .estrella svg, .profe-nota svg, .punto svg { fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; } /* Cabecera */ .cabecera { position: absolute; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 32px; z-index: 50; } .marca { display: flex; align-items: center; gap: 12px; flex-shrink: 0; /* Es un enlace a la portada: hereda el color en vez del azul del navegador. */ color: inherit; text-decoration: none; } .marca-texto { line-height: 1; } .marca-nombre { font-family: var(--serif); font-size: 18px; color: var(--texto); letter-spacing: 0.02em; } .marca-sub { font-size: 8.8px; letter-spacing: 3.74px; text-transform: uppercase; color: var(--principal); margin-top: 4px; } .emblema { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; } .emblema-inicial { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--principal); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--principal); font-family: var(--serif); font-size: 15px; } .menu { display: flex; align-items: center; gap: 32px; } .acciones { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .nav { color: var(--apagado); font-size: 11.52px; letter-spacing: 2.0736px; text-transform: uppercase; white-space: nowrap; transition: color .2s ease; } .nav--tel { display: inline-flex; align-items: center; gap: 8px; text-transform: none; } .nav--tel svg { flex-shrink: 0; opacity: 0.75; } .nav:hover { color: var(--texto); } /* Botones */ .b { display: inline-block; font-size: 11.52px; letter-spacing: 2.0736px; text-transform: uppercase; border-radius: 999px; font-weight: 500; transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; } .b:hover { transform: scale(1.06); } .b--chico { padding: 10px 24px; } .b--grande { padding: 15.2px 32px; } .b-oro { background: var(--principal); color: #10130d; } .b-oro:hover { background: var(--claro); } .b-linea { border: 0.8px solid rgba(241, 236, 225, 0.28); color: var(--texto); } .b-linea:hover { background: var(--texto); color: var(--fondo); border-color: var(--texto); } /* Portada */ .hero { position: relative; height: var(--alto-portada); background: var(--fondo); overflow: hidden; } .hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-velo { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 11, 8, 0.92) 0%, rgba(8, 11, 8, 0.62) 45%, rgba(8, 11, 8, 0.28) 100%); } .hero-suelo { position: absolute; inset: 0; background: linear-gradient(to top, var(--fondo), transparent 28%); } .hero-cuerpo { position: absolute; bottom: 230px; left: 32px; right: 32px; } /* La tira de cifras cierra la portada: descansa sobre el pie de la foto, separada por una línea fina, y es lo último que se lee antes de la escuela. */ .cifras { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; } .cifras-marco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 28px; border-top: 1px solid rgba(232, 223, 205, 0.14); } .cifra-numero { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--texto); } .estrellas--cifra { gap: 1px; } /* Cuando la cifra es una frase y no un número, no puede ir al tamaño de un número. */ .cifras--texto .cifra-numero { font-size: 22px; line-height: 1.2; } .cifra-pie { font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; color: var(--tenue); margin-top: 10px; } @media (max-width: 900px) { .cifras { position: static; padding: 32px 20px 40px; background: var(--fondo); } .cifras-marco { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } .cifra-numero { font-size: 26px; } } .hero-fila { display: flex; align-items: center; color: var(--principal); font-size: 10.88px; letter-spacing: 3.4816px; text-transform: uppercase; margin-bottom: 46px; } .separador { flex-shrink: 0; width: 1px; height: 12px; background: rgba(255, 255, 255, 0.8); margin: 0 16px; } .estrellas { display: flex; align-items: center; flex-shrink: 0; margin-right: 14px; } /* Una estrella son DOS dibujos, uno encima del otro: el apagado entero y el dorado recortado al tanto por ciento que vale la nota. El recorte es del ancho de la casilla, así que el dibujo mide lo que ella y no al revés — antes el svg traía su tamaño escrito y una estrella de 15 recortada sobre una casilla de 13 pintaba media nota donde había tres cuartos. */ .estrella { --tam: 13px; position: relative; display: block; width: var(--tam); height: var(--tam); margin-right: 3px; color: rgba(241, 236, 225, 0.22); } /* El dibujo mide SIEMPRE la estrella entera, nunca el ancho de su caja: la mitad dorada vive dentro de un recorte más estrecho, y un svg al 100% de ese recorte no se recorta — se encoge, y donde iba media estrella aparece una estrella pequeña. */ .estrella svg { display: block; width: var(--tam); height: var(--tam); } .estrella-llena { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; color: var(--principal); } /* La estrella no mide igual en todas partes: pequeña en las cifras de la portada y en la ficha de un vecino, grande en la nota media de la página de reseñas. */ .estrellas--cifra .estrella, .vecino-nota .estrella { --tam: 11px; } .nota-media .estrella { --tam: 15px; } .nota { flex-shrink: 0; color: var(--apagado); text-transform: none; letter-spacing: normal; font-size: 14px; white-space: nowrap; } .estado { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; letter-spacing: 2.0736px; } .estado-punto { width: 7px; height: 7px; border-radius: 999px; margin-right: 8px; } .estado--abierto { color: #5cbf7c; } .estado--abierto .estado-punto { background: #5cbf7c; } .estado--cerrado { color: #e0574f; } .estado--cerrado .estado-punto { background: #e0574f; } /* Lo que va detrás del Abierto/Cerrado: hasta qué hora, o cuándo se vuelve a abrir. En el gris de la fila de datos y sin el espaciado de las mayúsculas — es una frase, no un rótulo. */ .estado-cola { flex-shrink: 0; white-space: nowrap; margin-left: 8px; color: rgba(241, 236, 225, 0.62); text-transform: none; letter-spacing: normal; font-size: 14px; } .titular { font-family: var(--serif); font-weight: 100; font-style: italic; font-size: 136px; line-height: 133.28px; color: var(--texto); } .titular--dorado { font-weight: 300; color: var(--claro); } .lede { color: var(--apagado); max-width: 512px; margin-top: 26px; font-size: 17px; line-height: 29.75px; } .hero-botones { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; } /* La declaración: entre la portada y la escuela, la frase que dice qué clase de club es este. La foto ocupa media pantalla a sangre, con un filete por dentro. */ .manifiesto { display: grid; grid-template-columns: 0.72fr 1fr; background: var(--fondo); } .manifiesto-foto { position: relative; min-height: 480px; overflow: hidden; } .manifiesto-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .manifiesto-marco { position: absolute; inset: 20px; border: 1px solid rgba(241, 236, 225, 0.28); pointer-events: none; } .manifiesto-cuerpo { display: flex; flex-direction: column; justify-content: center; padding: 96px 80px; } .manifiesto-frase { font-family: var(--serif); font-weight: 300; font-size: 46px; line-height: 1.16; color: var(--texto); } .manifiesto-frase em { color: var(--claro); font-style: italic; } .manifiesto-texto { font-size: 16px; line-height: 29px; color: var(--apagado); margin-top: 32px; max-width: 620px; } .manifiesto-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 48px; margin-top: 48px; max-width: 620px; } .dato-valor--serif { font-family: var(--serif); font-size: 22px; line-height: 1.2; } @media (max-width: 1000px) { .manifiesto { grid-template-columns: 1fr; } .manifiesto-foto { min-height: 380px; } .manifiesto-cuerpo { padding: 56px 24px; } .manifiesto-frase { font-size: 32px; } } /* ── Movimiento ────────────────────────────────────────────────────────────────────── La barra de progreso y la entrada de los bloques. Los estados de partida los pone el script: sin JavaScript la página se ve entera y quieta, que es lo correcto. */ .progreso { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--principal); z-index: 60; } .asoma { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .asomado { opacity: 1; transform: none; } /* La portada respira: un acercamiento lento y continuo, sin que se note el corte. */ .cuadra-portada-foto, .hero-foto { animation: acercar 26s ease-in-out infinite alternate; } @keyframes acercar { from { transform: scale(1); } to { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .cuadra-portada-foto, .hero-foto { animation: none; } .asoma { opacity: 1; transform: none; } } /* ── El pie ──────────────────────────────────────────────────────────────────────── */ .pie { background: var(--escuela-fondo); border-top: 1px solid var(--escuela-linea); padding: 80px 32px 0; } .pie-marco { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; max-width: 1400px; margin: 0 auto; padding-bottom: 64px; } .pie-nota { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; } .pie-nota-numero { font-family: var(--serif); font-size: 26px; color: var(--claro); } .pie-nota-texto { font-size: 12px; color: var(--tenue); } .pie-dato { display: block; font-size: 13px; line-height: 20px; color: var(--apagado); margin-top: 12px; max-width: 320px; } .pie-enlace { color: var(--apagado); text-decoration: none; } .pie-enlace:hover { color: var(--claro); } .pie-titulo { color: var(--principal); font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; margin-bottom: 18px; } .pie-columna a { display: block; font-size: 14px; color: var(--apagado); text-decoration: none; margin-top: 12px; transition: color 0.35s ease; } .pie-columna a:hover { color: var(--texto); } .pie-raya { max-width: 1400px; margin: 0 auto; padding: 24px 0 32px; border-top: 1px solid var(--escuela-linea); font-size: 12px; color: var(--tenue); } @media (max-width: 900px) { .pie { padding: 56px 20px 0; } .pie-marco { grid-template-columns: 1fr 1fr; gap: 36px; } } .tiempo-avisos { margin-top: 32px; max-width: 620px; } /* ── Reseñas ───────────────────────────────────────────────────────────────────────── A la izquierda la ficha del club (nota, reparto, temas, frases) y a la derecha las reseñas de una en una, con la respuesta que el club dio a cada una. */ .opiniones { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; margin-top: 64px; align-items: start; } .nota-resumen { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: start; } .nota-media-numero { font-family: var(--serif); font-weight: 300; font-size: 92px; line-height: 1; color: var(--texto); } .nota-media .estrellas { margin-top: 12px; } .nota-media-pie { font-size: 13px; color: var(--tenue); margin-top: 12px; } .reparto-fila { display: flex; align-items: center; gap: 16px; margin-top: 10px; } .reparto-estrellas { width: 12px; font-size: 13px; color: var(--tenue); } .reparto-barra { flex: 1; height: 6px; border-radius: 3px; background: rgba(241, 236, 225, 0.07); overflow: hidden; } .reparto-relleno { display: block; height: 100%; border-radius: 3px; background: rgba(184, 147, 74, 0.45); } .reparto-relleno--alta { background: var(--principal); } .reparto-cuantas { width: 34px; text-align: right; font-size: 12px; color: var(--tenue); } .temas { margin-top: 32px; } .antetitulo--apagado { color: var(--tenue); } .temas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .tema { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--escuela-linea); border-radius: 999px; font-size: 12px; color: var(--apagado); } .tema-cuenta { color: var(--principal); } .frases { margin-top: 48px; } .frase { display: flex; gap: 16px; margin-top: 24px; } .frase svg { flex-shrink: 0; margin-top: 6px; } .frase p { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--apagado); } /* El formulario de reseñas: cerrado hasta que alguien lo pide, para que la sección no empiece pidiendo algo. */ .formulario { background: var(--escuela-fondo); border: 1px solid var(--escuela-linea); padding: 32px; margin-top: 32px; max-width: 560px; } .formulario[hidden] { display: none; } .formulario-titulo { font-family: var(--serif); font-weight: 300; font-size: 28px; color: var(--texto); } .campo { display: block; margin-top: 24px; } .campo-etiqueta { display: block; font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; color: var(--tenue); margin-bottom: 10px; } .campo-caja { width: 100%; padding: 12px 14px; background: rgba(241, 236, 225, 0.04); border: 1px solid var(--escuela-linea); color: var(--texto); font-family: inherit; font-size: 15px; line-height: 24px; resize: vertical; } .campo-caja:focus { outline: none; border-color: var(--principal); } .notas { display: flex; gap: 6px; } .nota-boton { background: none; border: none; padding: 0 2px; font-size: 26px; line-height: 1; color: rgba(241, 236, 225, 0.22); cursor: pointer; transition: color 0.25s ease; } .nota-boton--puesta { color: var(--principal); } .formulario-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; } .formulario-aviso { font-size: 12px; color: var(--tenue); } .formulario-recado { font-size: 14px; line-height: 21px; margin-top: 16px; } .formulario-recado--bien { color: var(--claro); } .formulario-recado--mal { color: #d98a6a; } /* ── Información ───────────────────────────────────────────────────────────────────── La ficha del club, las horas punta y el formulario, en tres columnas. */ .info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px; align-items: start; } .tarjeta { background: var(--escuela-fondo); border: 1px solid var(--escuela-linea); padding: 40px; height: 100%; } /* La columna del medio lleva dos cosas apiladas: el plano y las horas punta. */ .columna-media { display: flex; flex-direction: column; gap: 32px; height: 100%; } .mapa { position: relative; display: block; border: 1px solid var(--escuela-linea); overflow: hidden; text-decoration: none; transition: border-color 0.4s ease; } .mapa:hover { border-color: rgba(184, 147, 74, 0.45); } .mapa-plano { display: block; width: 100%; height: 260px; } .mapa-pie { position: absolute; left: 20px; bottom: 16px; font-size: 10.24px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--claro); } .tarjeta-texto { font-size: 14px; line-height: 23px; color: var(--apagado); margin-top: 12px; } .ficha-fila { display: flex; gap: 16px; margin-bottom: 24px; } .ficha-fila svg { flex-shrink: 0; margin-top: 3px; } .ficha-etiqueta { font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; color: var(--tenue); margin-bottom: 6px; } .ficha-valor { display: block; font-size: 15px; line-height: 24px; color: var(--texto); text-decoration: none; transition: color 0.35s ease; } a.ficha-valor:hover { color: var(--claro); } .ficha-horario { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--escuela-linea); } .ficha-horario-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .horario { width: 100%; border-collapse: collapse; font-size: 14px; } .horario th { text-align: left; font-weight: 400; padding: 5px 24px 5px 0; color: var(--tenue); } .horario td { padding: 5px 0; color: var(--apagado); } /* El día de hoy se lee antes que los otros seis. */ .horario-hoy th, .horario-hoy td { color: var(--texto); } .b--ancho { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; } /* Las horas punta: una barra por hora, la del pico más alta. */ .punta-cabecera { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .punta-dia { font-family: var(--serif); font-size: 26px; color: var(--texto); } .punta-pico { font-size: 12px; color: var(--tenue); } .punta-dias { display: flex; gap: 6px; margin-top: 28px; } .punta-boton { width: 32px; height: 32px; border-radius: 50%; background: none; border: 1px solid var(--escuela-linea); color: var(--tenue); font-size: 12px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .punta-boton--puesto { background: var(--principal); border-color: var(--principal); color: #12160f; } .punta-barras { margin-top: 28px; } .punta-grupo { display: flex; align-items: flex-end; gap: 4px; height: 120px; } .punta-grupo[hidden] { display: none; } .punta-barra { flex: 1; height: 100%; display: flex; align-items: flex-end; background: rgba(241, 236, 225, 0.05); } .punta-relleno { width: 100%; background: rgba(184, 147, 74, 0.55); } .punta-escala { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--tenue); } .formulario--desnudo { background: none; border: none; padding: 0; margin-top: 8px; max-width: none; } .formulario-titulo--suelto { margin-top: 8px; } /* Otras hípicas de la zona: la rejilla de cinco de la ficha del club. */ .vecinos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--escuela-linea); margin-top: 40px; } .vecino { background: var(--fondo); padding: 24px; } .vecino-nombre { font-size: 14px; line-height: 20px; color: var(--apagado); } .vecino-nota { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .vecino-numero { font-size: 14px; color: var(--claro); } .vecino-cuantas { font-size: 12px; color: var(--tenue); } .vecino-categoria { font-size: 10.24px; letter-spacing: 1.84px; text-transform: uppercase; color: var(--tenue); margin-top: 12px; } @media (max-width: 1100px) { .info { grid-template-columns: 1fr; } .vecinos { grid-template-columns: repeat(2, 1fr); } } /* ── El carrusel de reseñas ────────────────────────────────────────────────────────── Tres a la vista: la del medio en grande y las de los lados encogidas y apagadas, para que la mirada sepa cuál está leyendo. */ .carrusel { position: relative; display: flex; align-items: center; gap: 20px; margin-top: 56px; } .carrusel-ventana { flex: 1; overflow: hidden; padding: 24px 0; } .carrusel-cinta { display: flex; column-gap: 24px; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .carrusel-ficha { flex: 0 0 calc((100% - 48px) / 3); transform: scale(0.88); opacity: 0.45; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, border-color 0.6s ease; } .carrusel-ficha--centro { transform: scale(1); opacity: 1; border-color: rgba(184, 147, 74, 0.45); } .carrusel-flecha { flex-shrink: 0; width: 48px; height: 48px; background: none; border: 1px solid var(--escuela-linea); color: var(--claro); font-size: 18px; cursor: pointer; transition: border-color 0.35s ease, color 0.35s ease, opacity 0.35s ease; } .carrusel-flecha:hover:enabled { border-color: var(--principal); color: var(--texto); } .carrusel-flecha:disabled { opacity: 0.28; cursor: default; } /* Con menos de tres reseñas no hay nada que pasar. */ .carrusel--corto .carrusel-flecha { display: none; } .carrusel--corto .carrusel-ficha { transform: none; opacity: 1; } .carrusel-puntos { display: flex; justify-content: center; gap: 10px; margin-top: 24px; } .carrusel-punto { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(241, 236, 225, 0.22); cursor: pointer; transition: background 0.35s ease, transform 0.35s ease; } .carrusel-punto--puesto { background: var(--principal); transform: scale(1.4); } .nota-resumen--ancha { max-width: 900px; } .formulario--centrado { margin-left: auto; margin-right: auto; text-align: left; } @media (max-width: 900px) { .carrusel-ficha { flex: 0 0 100%; transform: none; opacity: 1; } .carrusel-cinta { column-gap: 16px; } } .opiniones-lista { display: grid; gap: 24px; } .opinion { background: var(--escuela-fondo); border: 1px solid var(--escuela-linea); padding: 36px; } .opinion-cabecera { display: flex; align-items: flex-start; gap: 16px; } /* La inicial en un círculo de color: es lo que Google dibuja cuando no hay foto. */ .opinion-inicial { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; color: #faf6ee; font-size: 14px; } .opinion-autor { color: var(--texto); font-size: 15px; } .opinion-meta { font-size: 12px; color: var(--tenue); margin-top: 2px; } .opinion-nota { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .opinion-cuando { font-size: 12px; color: var(--tenue); } .opinion-texto { font-size: 15px; line-height: 25px; color: var(--apagado); margin-top: 16px; } .opinion-extras { font-size: 12px; color: var(--tenue); margin-top: 20px; } /* La respuesta va sangrada y con el emblema, para que se lea como "esto lo dice el club". */ .opinion-respuesta { margin-top: 24px; padding: 20px 0 0 20px; border-top: 1px solid var(--escuela-linea); border-left: 1px solid var(--escuela-linea); } .opinion-respuesta-cabecera { display: flex; align-items: center; gap: 10px; } .opinion-emblema { width: 20px; height: 20px; object-fit: contain; } .opinion-respuesta-quien { font-size: 12px; color: var(--principal); } .opinion-respuesta-texto { font-size: 14px; line-height: 23px; color: var(--apagado); margin-top: 10px; } @media (max-width: 1100px) { .opiniones { grid-template-columns: 1fr; gap: 56px; } } @media (max-width: 600px) { .nota-resumen { grid-template-columns: 1fr; gap: 32px; } .nota-media-numero { font-size: 68px; } .opinion { padding: 24px; } } /* El parte: la caja de la derecha con lo que hace ahora mismo y la semana que viene. */ .tiempo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } .parte { background: var(--escuela-fondo); border: 1px solid var(--escuela-linea); padding: 40px; } .parte-antetitulo { color: var(--principal); font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; } .parte-antetitulo--dias { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--escuela-linea); } .parte-grados { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1; color: var(--texto); margin-top: 20px; } .parte-cielo { font-size: 15px; color: var(--apagado); margin-top: 8px; } .parte-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .parte-dato-etiqueta { display: flex; align-items: center; gap: 8px; font-size: 10.24px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--tenue); } .parte-dato-valor { font-family: var(--serif); font-size: 22px; color: var(--texto); margin-top: 10px; } .parte-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 20px; } /* Un día se pinta en verde cuando se monta sin más y en ámbar cuando hay que mirar el cielo: el color ES el aviso, y el texto lo repite para quien no lo distingue. */ .parte-dia { padding: 14px 8px; text-align: center; background: rgba(76, 106, 62, 0.16); border: 1px solid rgba(76, 106, 62, 0.34); } .parte-dia--ojo { background: rgba(184, 147, 74, 0.14); border-color: rgba(184, 147, 74, 0.4); } .parte-dia-fecha { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tenue); } .parte-dia-grados { font-family: var(--serif); font-size: 24px; color: var(--texto); margin-top: 8px; } .parte-dia-veredicto { font-size: 10px; line-height: 14px; color: var(--apagado); margin-top: 8px; } .parte-dia--ojo .parte-dia-veredicto { color: var(--claro); } .parte-nota { font-size: 12px; line-height: 18px; color: var(--tenue); margin-top: 24px; } @media (max-width: 1100px) { .tiempo { grid-template-columns: 1fr; gap: 40px; } .parte-dias { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .parte { padding: 28px 20px; } .parte-datos { grid-template-columns: 1fr; gap: 16px; } .rejilla.rejilla--dos { grid-template-columns: 1fr; gap: 20px; } .rejilla--dos .programa { padding: 28px 24px 32px; } .rejilla--dos .programa-foto { margin: -29px -25px 24px; } .rejilla--dos .programa-nombre { font-size: 24px; } .programa-foto--alta { height: 220px; } .pistas-fila-cabecera { flex-wrap: wrap; gap: 4px 16px; } .parte-dias { grid-template-columns: repeat(3, 1fr); } } .donde-pluscode { font-size: 13px; color: var(--tenue); margin-top: 10px; } /* La página de instalaciones: las pistas de dos en dos, con la foto más alta y la chapa de "cubierta" sobre ella. */ /* Se escribe con las dos clases porque .rejilla (tres columnas) se declara más abajo: con una sola clase ganaría ella y las pistas saldrían de tres en tres. */ .rejilla.rejilla--dos { grid-template-columns: repeat(2, 1fr); gap: 32px; background: none; } .rejilla--dos .programa { background: var(--escuela-fondo); border: 1px solid var(--escuela-linea); } /* Media pantalla por ficha da sitio de sobra: la foto es alta y el texto respira. */ .programa-foto--alta { height: 340px; } .rejilla--dos .programa { padding: 40px 48px 48px; } .rejilla--dos .programa-nombre { font-size: 34px; } .rejilla--dos .programa-texto { font-size: 16px; line-height: 27px; } .rejilla--dos .programa-foto img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .rejilla--dos .programa:hover .programa-foto img { transform: scale(1.05); } /* Las medidas son el dato que se busca en una pista: van en dorado, no en gris. */ .rejilla--dos .pistas-fila-medidas { color: var(--claro); font-size: 14px; } /* El marco de las fotos de "además" se enciende al pasar por encima. */ .profe-foto--ancha .pistas-marco-fino { border-color: rgba(241, 236, 225, 0.16); transition: border-color 0.5s ease, inset 0.5s ease; } .profe:hover .profe-foto--ancha .pistas-marco-fino { border-color: var(--principal); } .rejilla--dos .programa-foto { margin: -41px -49px 32px; } .chapa-cubierta { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(10, 13, 10, 0.75); border: 1px solid var(--principal); color: var(--claro); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; } .profe-foto--ancha { aspect-ratio: 4 / 3; } .servicio-nombre { font-family: var(--serif); font-weight: 300; font-size: 26px; color: var(--texto); margin-top: 20px; } .servicio-detalle { font-size: 12px; color: var(--principal); margin-top: 4px; } .escuela-titulo--centrado { text-align: center; } .escuela-intro--centrada { margin-left: auto; margin-right: auto; text-align: center; } /* En la portada el retrato lleva marco, como el resto de las fotos de esa página. */ .profe-foto .pistas-marco-fino { inset: 14px; border-color: rgba(241, 236, 225, 0.2); transition: border-color 0.5s ease; } .profe:hover .profe-foto .pistas-marco-fino { border-color: var(--principal); } /* La galería es un mosaico y no una cuadrícula: la primera manda porque ocupa el doble, y las alturas van bajando por filas para que el ojo no lea una tabla. */ .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; } .galeria-foto { position: relative; height: 288px; overflow: hidden; } .galeria-foto:nth-child(1) { grid-column: span 2; } .galeria-foto:nth-child(1), .galeria-foto:nth-child(2) { height: 352px; } .galeria-foto:nth-child(6), .galeria-foto:nth-child(7), .galeria-foto:nth-child(8) { height: 256px; } .galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .galeria-foto:hover img { transform: scale(1.05); } /* El pie solo aparece al pasar por encima: la foto se lee mejor sin texto encima. */ .galeria-foto figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--texto); font-size: 14px; opacity: 0; transition: opacity 0.5s ease; } .galeria-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 10, 0.85), transparent 60%); opacity: 0; transition: opacity 0.5s ease; } .galeria-foto:hover::after, .galeria-foto:hover figcaption { opacity: 1; } .donde-direccion { font-family: var(--serif); font-weight: 300; font-size: 38px; line-height: 1.15; color: var(--texto); margin-top: 16px; max-width: 620px; } .cierre-botones--izquierda { justify-content: flex-start; margin-top: 32px; } @media (max-width: 900px) { .rejilla--dos { grid-template-columns: 1fr; } .galeria { grid-template-columns: repeat(2, 1fr); } .donde-direccion { font-size: 28px; } } /* Las instalaciones: la pista cubierta con su foto grande a la izquierda y el resto en una lista a la derecha, cada una con sus medidas alineadas al margen. */ .pistas { background: var(--escuela-fondo); padding: 128px 32px; } .pistas-marco { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1400px; margin: 0 auto; } .pistas-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .pistas-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pistas-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 10, 0.9) 6%, rgba(10, 13, 10, 0.05) 55%); } .pistas-marco-fino { position: absolute; inset: 16px; border: 1px solid rgba(241, 236, 225, 0.24); pointer-events: none; } .pistas-pie { position: absolute; left: 40px; right: 40px; bottom: 36px; } .pistas-pie-etiqueta { color: var(--principal); font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; } .pistas-pie-texto { font-family: var(--serif); font-weight: 300; font-size: 26px; color: var(--texto); margin-top: 8px; } .pistas-titulo { font-family: var(--serif); font-weight: 300; font-size: 62px; line-height: 1.04; color: var(--texto); margin-top: 24px; } .pistas-titulo em { display: block; color: var(--claro); font-style: italic; } .pistas-intro { font-size: 16px; line-height: 29px; color: var(--apagado); margin-top: 24px; max-width: 620px; } .pistas-lista { margin-top: 48px; } .pistas-fila { padding: 20px 0; border-bottom: 1px solid var(--escuela-linea); } .pistas-fila:first-child { padding-top: 0; } .pistas-fila-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .pistas-fila-nombre { font-family: var(--serif); font-weight: 300; font-size: 26px; color: var(--texto); } .pistas-fila-medidas { font-size: 13px; color: var(--tenue); flex-shrink: 0; } .pistas-fila-resumen { font-size: 13px; line-height: 20px; color: var(--tenue); margin-top: 6px; } .pistas-cuerpo .programa-reservar { margin-top: 40px; } @media (max-width: 1000px) { .pistas { padding: 80px 20px; } .pistas-marco { grid-template-columns: 1fr; gap: 48px; } .pistas-titulo { font-size: 40px; } .pistas-pie { left: 28px; right: 28px; bottom: 28px; } .pistas-pie-texto { font-size: 20px; } } /* La escuela */ .escuela { background: var(--escuela-fondo); padding: 128px 32px; } .escuela-marco { max-width: 1400px; margin: 0 auto; } .antetitulo { color: var(--principal); font-size: 10.88px; letter-spacing: 3.4816px; text-transform: uppercase; } .escuela-titulo { font-family: var(--serif); font-weight: 300; font-size: 68px; line-height: 66.64px; color: var(--texto); margin-top: 20px; } .escuela-titulo em { color: var(--claro); font-style: italic; } .escuela-intro { font-size: 17px; line-height: 29.75px; color: var(--apagado); max-width: 576px; margin-top: 20px; } .rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--escuela-linea); margin-top: 64px; } .programa { background: var(--escuela-fondo); padding: 40px; } /* El equipo: cuatro retratos en una fila, sin tarjeta que los encierre. La foto es un retrato alto y el texto cuelga debajo, sobre el fondo de la sección. */ .equipo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; } .profe-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--escuela-fondo); } .profe-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .profe:hover .profe-foto img { transform: scale(1.04); } /* La chapa de la nota va sobre la esquina de la foto, no dentro del texto: es un sello. */ .profe-nota { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(12, 15, 12, 0.82); color: var(--texto); font-size: 12px; } /* La chapa es del color del texto, pero su estrella es dorada. */ .profe-nota svg { width: 11px; height: 11px; color: var(--principal); } .profe-puesto { color: var(--principal); font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; margin-top: 22px; } .profe-nombre { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.1; color: var(--texto); margin-top: 10px; } .profe-bio { font-size: 14px; line-height: 22px; color: var(--apagado); margin-top: 14px; } .profe-titulos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .chapa { padding: 6px 10px; border: 1px solid var(--escuela-linea); font-size: 11px; line-height: 1.2; color: var(--tenue); } @media (max-width: 1100px) { .equipo { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } } @media (max-width: 600px) { .equipo { grid-template-columns: 1fr; } } .programa-foto { position: relative; height: 208px; margin: -40px -40px 32px; overflow: hidden; } .programa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .programa-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 10, 0.85), rgba(10, 13, 10, 0.15)); } .programa-edad { position: absolute; top: 20px; left: 20px; padding: 5px 12px; font-size: 9.6px; letter-spacing: 2px; text-transform: uppercase; background: rgba(10, 13, 10, 0.7); color: var(--principal); border: 1px solid rgba(184, 147, 74, 0.33); } .programa-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .programa-nombre, .programa-precio { font-family: var(--serif); font-weight: 300; font-size: 30px; color: var(--texto); } .programa-precio { color: var(--claro); flex-shrink: 0; } .programa-sub { font-size: 14px; color: var(--tenue); margin-top: 4px; } .programa-datos { display: flex; gap: 20px; margin-top: 20px; font-size: 12px; color: var(--tenue); } .programa-texto { font-size: 14px; line-height: 22px; color: var(--apagado); margin-top: 24px; } .programa-incluye { margin-top: 24px; } .punto { display: flex; gap: 12px; margin-top: 10px; } .punto svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; color: var(--principal); fill: none; stroke-width: 2.4; } .punto span { font-size: 14px; line-height: 20px; color: var(--apagado); } /* El bloque de pupilaje: la foto a un lado y la oferta al otro, pegado a la rejilla de programas con la misma línea de un píxel que las separa entre sí. */ .pupilaje { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 1px; background: var(--escuela-linea); } /* Sin foto no hay dos columnas que repartir: la oferta ocupa el ancho entero. */ .pupilaje:not(:has(.pupilaje-foto)) { grid-template-columns: 1fr; } .pupilaje-foto { position: relative; min-height: 280px; overflow: hidden; } .pupilaje-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pupilaje-cuerpo { background: var(--escuela-fondo); padding: 56px; } .pupilaje-titulo { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1.1; color: var(--texto); margin-top: 16px; } .pupilaje-precio { font-family: var(--serif); font-size: 24px; color: var(--claro); margin-left: 16px; } .pupilaje-texto { font-size: 17px; line-height: 29.75px; color: var(--apagado); margin-top: 20px; } .pupilaje-incluye { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; margin-top: 32px; } @media (max-width: 900px) { .pupilaje { grid-template-columns: 1fr; } .pupilaje-cuerpo { padding: 40px; } .pupilaje-incluye { grid-template-columns: 1fr; } } .programa-reservar { position: relative; display: inline-block; margin-top: 32px; padding-bottom: 8px; font-size: 11.52px; letter-spacing: 2.0736px; text-transform: uppercase; color: var(--claro); } .programa-reservar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .programa-reservar:hover::after, .programa-reservar:focus-visible::after { transform: scaleX(1); } /* La cuadra: los caballos del club, con la foto ocupando la ficha entera y el nombre descansando sobre ella. */ .cuadra { background: var(--fondo); padding: 128px 32px; } .antetitulo--raya { display: flex; align-items: center; gap: 20px; } .antetitulo--raya::before { content: ""; width: 64px; height: 1px; background: var(--principal); } /* La cabecera de la cuadra: el título a la izquierda y el enlace a la página entera alineado con la última línea de la entradilla, a la derecha. */ .cuadra-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; } .cuadra-cabecera > div { max-width: 620px; } .cuadra-cabecera .programa-reservar { margin-top: 0; margin-bottom: 6px; flex-shrink: 0; } /* La banda de arriba de /caballos: la foto a sangre con el título encima. */ .cuadra-portada { position: relative; height: 62vh; min-height: 420px; background: var(--fondo); overflow: hidden; } .cuadra-portada-foto { width: 100%; height: 100%; object-fit: cover; } .cuadra-portada-velo { position: absolute; inset: 0; background: linear-gradient(to top, var(--fondo) 4%, rgba(12, 15, 12, 0.55) 45%, rgba(12, 15, 12, 0.35) 100%); } .cuadra-portada-cuerpo { position: absolute; left: 0; right: 0; bottom: 96px; max-width: 1400px; margin: 0 auto; padding: 0 32px; } .cuadra-portada-titulo { font-family: var(--serif); font-weight: 300; font-size: 82px; line-height: 1; color: var(--texto); margin-top: 24px; } .cuadra-portada-titulo em { color: var(--claro); font-style: italic; } .cuadra-intro { background: var(--fondo); padding: 96px 32px 0; } .cuadra-intro-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .cuadra-intro-frase { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.25; color: var(--texto); } .cuadra-intro-texto { font-size: 16px; line-height: 30px; color: var(--apagado); } .caballo-nivel { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tenue); margin-top: 20px; } /* Las fichas de /caballos van en zigzag: cada caballo ocupa una banda entera y la foto cambia de lado en la siguiente, para que la página no se lea como una lista. */ .fichas { display: grid; gap: 1px; background: var(--escuela-linea); margin-top: 64px; } .ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--escuela-linea); } .ficha-foto { position: relative; min-height: 480px; overflow: hidden; background: var(--escuela-fondo); } .ficha-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .ficha:hover .ficha-foto img { transform: scale(1.04); } /* La foto salta al otro lado en las fichas pares. Se mueve con order y no cambiando el orden del HTML: el texto siempre va después de su foto para quien lo lee sin verlo. */ .ficha:nth-child(even) .ficha-foto { order: 2; } .ficha-cuerpo { background: var(--escuela-fondo); padding: 64px; display: flex; flex-direction: column; justify-content: center; } .ficha-nombre { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1.05; color: var(--texto); margin-top: 12px; } .ficha-caracter { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--claro); margin-top: 10px; } .ficha-texto { font-size: 16px; line-height: 29px; color: var(--apagado); margin-top: 24px; max-width: 560px; } .ficha-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--escuela-linea); } .dato-etiqueta { font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; color: var(--tenue); } .dato-valor { font-size: 14px; line-height: 20px; color: var(--texto); margin-top: 8px; } .ficha-cuerpo .programa-reservar { margin-top: 36px; } @media (max-width: 1000px) { .ficha { grid-template-columns: 1fr; } /* En una columna la foto va siempre primero: alternarla dejaría un texto huérfano encima de la foto del caballo siguiente. */ .ficha:nth-child(even) .ficha-foto { order: 0; } .ficha-foto { min-height: 320px; } .ficha-cuerpo { padding: 40px 28px; } .ficha-nombre { font-size: 40px; } .ficha-datos { grid-template-columns: repeat(2, 1fr); } } /* El cierre de /caballos: la invitación al pupilaje, centrada, para quien ha llegado hasta abajo mirando caballos porque tiene uno. */ .cierre { background: var(--escuela-fondo); padding: 128px 32px; text-align: center; } .cierre-cuerpo { max-width: 620px; margin: 0 auto; } .antetitulo--centrada { display: flex; align-items: center; justify-content: center; gap: 20px; } .antetitulo--centrada::before, .antetitulo--centrada::after { content: ""; width: 64px; height: 1px; background: var(--principal); } .cierre-titulo { font-family: var(--serif); font-weight: 300; font-size: 68px; line-height: 1.02; color: var(--texto); margin-top: 24px; } .cierre-titulo em { display: block; color: var(--claro); font-style: italic; } .cierre-texto { font-size: 17px; line-height: 29.75px; color: var(--apagado); margin-top: 24px; } .cierre-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 40px; } @media (max-width: 900px) { .cierre { padding: 80px 20px; } .cierre-titulo { font-size: 44px; } } .cuadra-volver { display: inline-block; margin-top: 64px; } @media (max-width: 900px) { .cuadra-cabecera { flex-direction: column; align-items: flex-start; gap: 24px; } .cuadra-portada { height: 420px; } .cuadra-portada-titulo { font-size: 48px; } .cuadra-portada-cuerpo { bottom: 48px; padding: 0 20px; } .cuadra-intro { padding: 64px 20px 0; } .cuadra-intro-rejilla { grid-template-columns: 1fr; gap: 28px; } .cuadra-intro-frase { font-size: 26px; } } .caballo { position: relative; background: var(--escuela-fondo); overflow: hidden; } .caballo-foto { position: relative; height: 340px; overflow: hidden; } .caballo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .caballo:hover .caballo-foto img { transform: scale(1.05); } .caballo-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 15, 12, 0.95) 12%, rgba(12, 15, 12, 0.1) 70%); } .caballo-pie { padding: 32px 40px 40px; } .caballo-disciplina { color: var(--principal); font-size: 10.24px; letter-spacing: 2.56px; text-transform: uppercase; } .caballo-nombre { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1.1; color: var(--texto); margin-top: 8px; } .caballo-raza { font-size: 12px; color: var(--tenue); margin-top: 6px; } .caballo-texto { font-size: 14px; line-height: 22px; color: var(--apagado); margin-top: 20px; } .caballo-caracter { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--claro); margin-top: 20px; } @media (max-width: 900px) { .cuadra { padding: 80px 20px; } .caballo-pie { padding: 24px 28px 32px; } } /* La cabecera flota sobre la página: las páginas de otros módulos (reservas, acceso), que empiezan en
justo debajo, le dejan su sitio. */ .cabecera + main { padding-top: 80px; } /* ── Móvil ───────────────────────────────────────────────────────────────────────────── Por debajo de 720px la web se lee en una columna: cabecera reducida (marca + reservar), portada con el titular a escala, secciones a 20px de margen y las rejillas en una fila. */ @media (max-width: 720px) { .cabecera { height: 64px; padding: 0 16px; gap: 12px; } .marca-nombre { font-size: 15px; } .marca-sub { display: none; } .emblema, .emblema-inicial { width: 30px; height: 30px; } .menu { display: none; } .acciones { gap: 10px; } .acciones .nav:not(.nav--tel) { display: none; } .nav--tel { font-size: 0; letter-spacing: 0; } .nav--tel svg { width: 18px; height: 18px; } .b--chico { padding: 10px 14px; } .cabecera + main { padding-top: 64px; } .hero { height: auto; min-height: 0; } .hero-cuerpo { position: relative; inset: auto; z-index: 1; padding: 104px 20px 40px; } .hero-fila { flex-wrap: wrap; row-gap: 8px; margin-bottom: 24px; } .hero-fila .separador { display: none; } .hero-fila .nota, .hero-fila .estado-cola { white-space: normal; } .titular { font-size: clamp(44px, 12.5vw, 72px); line-height: 1; } .lede { margin-top: 18px; font-size: 16px; line-height: 1.6; } .hero-botones { margin-top: 24px; } .hero-botones .b { width: 100%; text-align: center; } .cifras { position: relative; z-index: 1; padding: 24px 20px 32px; } .escuela, .cuadra, .cierre, .pistas { padding: 72px 20px; } .cuadra-intro { padding: 64px 20px 0; } .cuadra-portada-cuerpo { padding: 0 20px; } .pie { padding: 56px 20px 0; } .escuela-titulo, .cuadra-portada-titulo, .pupilaje-titulo, .cierre-titulo, .pistas-titulo, .donde-direccion, .manifiesto-frase { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; } .nota-media-numero, .parte-grados { font-size: 44px; } .programa-nombre, .programa-precio { font-size: 22px; } .rejilla, .galeria, .vecinos, .equipo { grid-template-columns: 1fr; } .pie-marca { grid-column: 1 / -1; } .programa { padding: 28px 24px; } .programa-foto { margin: -28px -24px 24px; } .rejilla.rejilla--dos { grid-template-columns: 1fr; gap: 20px; } .rejilla--dos .programa { padding: 28px 24px 32px; } .rejilla--dos .programa-foto { margin: -29px -25px 24px; } .rejilla--dos .programa-nombre { font-size: 24px; } .programa-foto--alta { height: 220px; } .pistas-fila-cabecera { flex-wrap: wrap; gap: 4px 16px; } .parte-dias { grid-template-columns: repeat(3, 1fr); } .pistas-fila-medidas { white-space: normal; } .pupilaje-cuerpo { padding: 28px 24px; } .opinion { padding: 20px; } .cierre .b { width: 100%; text-align: center; } } /* Las marcas de tarjeta que un comercio online debe enseñar, en la línea del ©. */ .pie-raya { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; } .paybrands { display: inline-flex; align-items: center; gap: 12px; } .paybrands img { display: block; height: 14px; width: auto; } .paybrands img[alt="Mastercard"] { height: 18px; }