/* 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); /* The top menu links are in-page anchors (#caballos, #escuela...): without this the jump is abrupt and you cannot tell whether the page changed or just moved. */ scroll-behavior: smooth; } /* Anyone who asked their system for less motion does not want the page gliding on its own. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } 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; } /* 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; } .estrella { position: relative; display: block; width: 13px; height: 13px; margin-right: 3px; } .estrella svg { display: block; } .estrella-llena { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; } .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.55fr 1fr; background: var(--fondo); } .manifiesto-foto { position: relative; min-height: 400px; 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; } .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; margin-top: 3px; } .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; } /* ── El paso del ratón que faltaba, y la letra del móvil ───────────────────── Este bloque va al FINAL a propósito: no reescribe ninguna regla de arriba, solo la remata. Borrándolo entero, la hoja queda exactamente como estaba. */ /* Estos dos enlaces cambiaban de color de golpe; el resto de la web ya se atenúa poco a poco, y un enlace que salta canta. */ a.ficha-valor, .pie-enlace { transition: color .25s ease; } /* La letra del móvil no es la del escritorio encogida. En una pantalla que se sostiene con una mano, el texto corrido pide MÁS cuerpo y más interlínea; los rótulos en mayúsculas piden MENOS espaciado — el que luce en una línea ancha es el que parte una palabra en dos cuando solo hay 360 píxeles. */ @media (max-width: 720px) { body { font-size: 15px; line-height: 1.6; } /* Texto corrido: párrafos, fichas, reseñas. */ .escuela-intro, .programa-texto, .caballo-texto, .punto span, .opinion-texto, .opinion-respuesta-texto, .pupilaje-texto, .manifiesto-texto, .tarjeta-texto, .pistas-intro { font-size: 15px; line-height: 1.65; } /* Rótulos en mayúsculas: un punto más grandes para que se lean, y con el espaciado recortado para que quepan en una línea. */ .antetitulo, .caballo-disciplina, .profe-puesto, .cifra-pie, .ficha-etiqueta, .dato-etiqueta, .pistas-pie-etiqueta { font-size: 11px; letter-spacing: 1.8px; } .nav, .b, .programa-reservar { font-size: 11.5px; letter-spacing: 1.6px; } .hero-fila { font-size: 11px; letter-spacing: 1.8px; } .programa-edad { font-size: 10px; letter-spacing: 1.2px; } /* Lo secundario en gris: más cuerpo y algo más de contraste — un 38 % de opacidad a 12 px, al sol y en la calle, no se lee. */ .programa-sub, .programa-datos, .caballo-raza, .opinion-meta, .nota-media-pie { font-size: 13px; color: rgba(241, 236, 225, 0.55); } .nota, .estado-cola { font-size: 13px; } /* Dos reglas de más arriba se pisan entre ellas y la nota media acaba a 68 px en un teléfono, que es media pantalla. Aquí se decide una vez. */ .nota-media-numero { font-size: 46px; } } /* Cuatro bloques seguían repartiéndose en dos y tres columnas en un teléfono: la declaración, las reseñas, las instalaciones y la información de contacto. Dos columnas en 360 píxeles no son dos columnas, son dos rendijas. Aquí bajan a una sola, en el orden en que se leen. */ @media (max-width: 900px) { .manifiesto, .opiniones, .info, .pistas-marco { grid-template-columns: 1fr; } .opiniones { gap: 48px; margin-top: 48px; } .info { gap: 20px; margin-top: 48px; } /* Apilada, la declaración se lee en tres tiempos: la frase, la foto, y luego el detalle. Para que la frase pueda ponerse POR ENCIMA de la foto tiene que dejar de estar encerrada con el resto del texto: `display: contents` disuelve la caja que la envuelve y sus tres hijos pasan a ser piezas de la sección, ordenables una a una. El relleno lateral se muda a la sección, que es quien ahora manda. En el escritorio nada de esto ocurre: allí son dos columnas y ya está. */ .manifiesto { padding: 40px 24px; } .manifiesto-cuerpo { display: contents; } .manifiesto-frase { order: 0; margin-top: 0; } /* La foto, en medio y de lado a lado: se come el relleno de la sección para tocar los dos bordes, que es lo que la hace parecer una banda y no un recorte. */ .manifiesto-foto { order: 1; min-height: 0; height: 240px; margin: 28px -24px 0; } .manifiesto-texto { order: 2; } .manifiesto-datos { order: 3; } /* El pupilaje, con la misma receta: se disuelve la caja del texto para poder colar la foto en medio. Primero de quién es la oferta y cuánto cuesta, luego la foto del box, y al final el detalle y el enlace. Ojo con los dos apaños: la rejilla dibujaba su línea de un píxel dejando ver el fondo por el hueco, y el color de la caja lo ponía el cuerpo. Sin cuerpo, ese color lo tiene que poner la sección o todo queda sobre el gris de la línea. */ .pupilaje { gap: 0; background: var(--escuela-fondo); padding: 40px 24px; } .pupilaje-cuerpo { display: contents; } .pupilaje .antetitulo { order: 0; } .pupilaje-titulo { order: 1; } .pupilaje-texto { order: 2; } .pupilaje-foto { order: 3; min-height: 0; height: 240px; margin: 28px -24px 0; } .pupilaje-incluye { order: 4; } .pupilaje .programa-reservar { order: 5; } .tarjeta { padding: 28px 24px; } .columna-media { height: auto; } /* El teléfono y el horario no caben en una línea en un móvil estrecho, y partidos se leen mejor que desbordando la pantalla. */ .nota, .estado, .estado-cola { white-space: normal; } } /* Las clases, en el móvil, se pasan de lado en vez de apilarse en seis pisos: es el gesto que se hace en un teléfono, y de paso las seis caben en la altura de una. Es scroll de verdad con imán — sin JavaScript, así que va aunque el script no llegue, y quien no pueda arrastrar lo recorre con el teclado. Solo la rejilla de la ESCUELA: la de los caballos se sigue apilando, que ahí la foto grande es media ficha. */ @media (max-width: 720px) { .escuela .rejilla { display: flex; gap: 12px; background: none; overflow-x: auto; scroll-snap-type: x mandatory; /* Se sale de los 20px de margen de la sección y los devuelve como relleno: así la tarjeta siguiente asoma por el borde y se ve que hay más que pasar. */ margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .escuela .rejilla::-webkit-scrollbar { display: none; } /* Sueltas ya no las separa la línea de un píxel de la rejilla, así que cada una lleva la suya: sin ella la tarjeta y el fondo son el mismo color. */ .escuela .rejilla > .programa { flex: 0 0 82%; scroll-snap-align: center; } .escuela .rejilla > .programa .programa-foto { margin: -29px -25px 24px; } /* Los caballos, con la misma receta que las clases: se pasan de lado y la ficha entera espera detrás de la foto. Aquí arriba queda lo que distingue a uno de otro de un vistazo — disciplina, nombre, raza, edad y alzada — y detrás su descripción y su carácter. */ .cuadra .rejilla { display: flex; align-items: flex-start; gap: 12px; background: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cuadra .rejilla::-webkit-scrollbar { display: none; } .cuadra .rejilla > .caballo { flex: 0 0 82%; scroll-snap-align: center; } .cuadra .rejilla .caballo-mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(0.22, 1, 0.36, 1); } .cuadra .rejilla .caballo-mas-cuerpo { overflow: hidden; min-height: 0; } .cuadra .rejilla .caballo--abierta .caballo-mas { grid-template-rows: 1fr; } .cuadra .rejilla .caballo-foto { cursor: pointer; } .cuadra .rejilla .caballo-foto::after { content: "Ver el caballo +"; position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 6px 12px; border: 1px solid rgba(241, 236, 225, 0.3); background: rgba(10, 13, 10, 0.72); color: var(--texto); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; } .cuadra .rejilla .caballo--abierta .caballo-foto::after { content: "Cerrar −"; } /* Las instalaciones, en el mismo orden que la declaración y el pupilaje: primero qué sección es, luego el titular, luego la línea que lo explica, y solo entonces la foto del picadero. Detrás, la lista de pistas y el enlace. Aquí `display: contents` no tiene trampa: el cuerpo no pinta fondo ni relleno propios, así que al disolverlo no se pierde nada. Solo hay que anular la separación de 80px de la rejilla, que entre seis piezas sería un abismo. */ .pistas-marco { gap: 0; align-items: stretch; } .pistas-cuerpo { display: contents; } .pistas .antetitulo { order: 0; } .pistas-titulo { order: 1; } .pistas-intro { order: 2; } /* De lado a lado: se come los 20px de relleno de la sección. */ .pistas-foto { order: 3; aspect-ratio: auto; height: 240px; margin: 28px -20px 0; } .pistas-lista { order: 4; margin-top: 28px; } .pistas .programa-reservar { order: 5; } /* El equipo, también de lado. Y el retrato en redondo: cuatro rectángulos altos apilados son cuatro pantallas de scroll; un círculo dice quién es la persona con un tercio del sitio, que es todo lo que hace falta cuando lo importante es el nombre y lo que hace. */ .equipo { display: flex; align-items: flex-start; gap: 12px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .equipo::-webkit-scrollbar { display: none; } /* Más estrecha que las otras: cabe una y media, y esa media dice que hay más. La del medio se levanta y va a todo color; las de los lados se hunden un poco y pierden color. Así el ojo sabe de quién se está hablando sin que nadie se lo diga, y las de al lado siguen ahí, diciendo que hay más gente. Quién está en el medio lo decide el JavaScript midiendo, porque en una pista que se arrastra con el dedo el centro es una posición, no un elemento. */ .equipo > .profe { flex: 0 0 68%; scroll-snap-align: center; text-align: center; transform: translateY(14px) scale(0.94); filter: saturate(0.3); opacity: 0.5; transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), filter .45s ease, opacity .45s ease; } .equipo > .profe--centro { transform: none; filter: none; opacity: 1; } /* Las reseñas, también de lado. Una reseña no se puede resumir —son palabras de un cliente—, así que apiladas son tres bloques largos seguidos; pasándolas se lee la que se quiera y las demás esperan. Cada una ya trae su borde y su fondo, así que aquí solo hay que convertir la columna en pista. */ .opiniones-lista { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .opiniones-lista::-webkit-scrollbar { display: none; } .opiniones-lista > .opinion { flex: 0 0 86%; scroll-snap-align: center; } /* La cruz del formulario de reseña, arriba a la izquierda. Va antes que el título y alineada a la izquierda: es la salida, y una salida se busca en la esquina por la que se entró a leer. */ .formulario-cerrar { display: flex; align-items: center; justify-content: center; align-self: flex-start; width: 40px; height: 40px; margin: -8px 0 4px -10px; padding: 0; background: none; border: 0; color: var(--apagado); cursor: pointer; transition: color .25s ease; } .formulario-cerrar:hover, .formulario-cerrar:focus-visible { color: var(--texto); } } /* Quien pide menos movimiento ve el mismo destaque, pero sin el viaje. */ @media (max-width: 720px) and (prefers-reduced-motion: reduce) { .equipo > .profe { transition: none; } } @media (max-width: 720px) { /* El círculo. El retrato viene recortado a 3/4 y en redondo se recorta otra vez, así que se sube el encuadre: object-position lleva el corte a la altura de la cara en vez de dejarlo en el centro geométrico, que en un retrato es el pecho. */ .profe-foto { aspect-ratio: 1; width: 160px; max-width: 70%; margin: 0 auto; border-radius: 50%; border: 1px solid var(--escuela-linea); /* El recorte pasa a la FOTO, no a la caja. La caja recortaba también lo que cuelga por fuera, y la chapa de la nota va justo ahí: colgada del borde de abajo. Con overflow oculto, la estrella desaparecía. */ overflow: visible; } .profe-foto img { border-radius: 50%; object-position: 50% 22%; } /* El marco fino que dibuja un rectángulo dentro de la foto no tiene sentido dentro de un círculo. */ .profe-foto .pistas-marco-fino { display: none; } /* La chapa de la nota vuelve al borde del círculo, no a la esquina de una caja que ya no existe. */ /* La chapa cuelga del borde de abajo del círculo, centrada, y por encima de él. */ .profe-nota { top: auto; right: auto; bottom: 0; left: 50%; z-index: 1; transform: translate(-50%, 40%); border: 1px solid var(--escuela-linea); white-space: nowrap; } /* Sitio para la chapa que ahora cuelga del círculo: sin esto se monta encima del puesto del profesor. */ .profe-puesto { margin-top: 34px; } .profe-titulos { justify-content: center; } } /* ── La portada, a cualquier ancho ─────────────────────────────────────────── La portada saltaba del escritorio al móvil en 720px y no tenía NADA en medio: entre 721 y 1100 el titular de 136px partía en tres líneas, y como el bloque está anclado por abajo, crecía hacia ARRIBA contra la cabecera. Eso es lo que se montaba encima de lo otro. */ /* El titular deja de ser un número fijo y pasa a medir lo que mide la pantalla. Tope arriba en los mismos 136px de siempre, así que un monitor ancho se ve exactamente igual que hasta ahora; lo que cambia es todo lo de debajo. La interlínea va sin unidad, que si no se queda clavada en 133px con letra de 60. */ @media (min-width: 721px) { .titular { font-size: clamp(56px, 9.4vw, 136px); line-height: 0.98; } } /* En pantallas medianas la portada deja de colocarse en capas y se apila: la foto sigue de fondo, pero el texto y las cifras ocupan su sitio de verdad. Con las cosas en fila india no hay forma de que una tape a otra. */ @media (min-width: 721px) and (max-width: 1100px) { .hero { height: auto; } .hero-cuerpo { position: relative; inset: auto; z-index: 1; padding: 136px 32px 48px; } /* La línea de datos —descripción, estrellas, nota, abierto/cerrado— no cabe de una tirada a este ancho: se le deja partir en dos en vez de salirse. */ .hero-fila { flex-wrap: wrap; row-gap: 8px; margin-bottom: 32px; } .hero-fila .separador { display: none; } .cifras { position: relative; z-index: 1; padding: 0 32px 40px; } } /* ── El menú del móvil ─────────────────────────────────────────────────────── En el escritorio el menú ya está desplegado, así que ni el botón ni el pie del panel existen: los dos viven solo por debajo de 720px. */ .hamburguesa, .menu-pie, .menu-cerrar, .formulario-cerrar { display: none; } @media (max-width: 720px) { /* La cabecera se queda con dos cosas: quién es el club, y el botón que abre todo lo demás. El teléfono y el Reservar bajan al pie del panel, que es donde se acaba de decidir. */ .acciones { display: none; } /* 44 píxeles de lado: el cuadrado que un dedo acierta sin mirar. Las rayas miden menos, pero lo que se toca es el botón entero. */ .hamburguesa { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; background: none; border: 0; cursor: pointer; } .hamburguesa span { display: block; height: 1.5px; border-radius: 2px; background: var(--texto); transition: transform .28s ease, opacity .28s ease; } /* Abierto, el botón de abrir desaparece: quien cierra es la cruz de la izquierda, y dos mandos para lo mismo en una pantalla de mano es uno de más. */ .cabecera--abierta .hamburguesa { display: none; } /* La cruz, arriba a la izquierda, donde ha pedido estar. A la misma altura que las rayas que abrieron, y del mismo tamaño de dedo. */ .cabecera--abierta .menu-cerrar { display: flex; align-items: center; justify-content: center; align-self: flex-start; width: 44px; height: 44px; margin: 0 0 20px -10px; padding: 0; background: none; border: 0; color: var(--texto); cursor: pointer; transition: color .25s ease; } .menu-cerrar:hover, .menu-cerrar:focus-visible { color: var(--principal); } /* El panel tapa la pantalla ENTERA, cabecera incluida (z-index 60 contra 50): con el menú abierto no hay nada más que mirar, y así la cruz de la izquierda no compite con el emblema del club por el mismo rincón. */ .menu { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 20px 32px; background: var(--fondo); overflow-y: auto; overscroll-behavior: contain; /* Cerrado no se ve, no se toca y no lo lee un lector de pantalla: oculto con opacidad a secas seguiría siendo tabulable. */ visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .cabecera--abierta .menu { visibility: visible; opacity: 1; transform: none; } .menu .nav { padding: 18px 2px; border-bottom: 1px solid var(--escuela-linea); font-size: 13px; letter-spacing: 2px; color: var(--texto); } /* margin-top: auto lo empuja abajo del todo aunque sobren secciones o falten. */ .menu-pie { display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding-top: 32px; } .menu-tel { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; color: var(--texto); } .menu-tel svg { flex-shrink: 0; color: var(--principal); } .menu-pie .b { text-align: center; } } /* ── La ficha de clase plegada, en el móvil ────────────────────────────────── Arriba queda lo que se compara de un vistazo pasando el dedo: la foto, cómo se llama, cuánto vale, qué es en una línea y dónde se reserva. Lo demás —duración, plazas, descripción y qué incluye— se abre tocando la foto. En el escritorio este bloque no existe: allí cabe todo a la vez y esconderlo sería un clic de más. */ @media (max-width: 720px) { .escuela .rejilla .programa-mas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(0.22, 1, 0.36, 1); } /* El hijo recorta: sin esto el contenido se sale de una fila de altura cero. */ .escuela .rejilla .programa-mas-cuerpo { overflow: hidden; min-height: 0; } .escuela .rejilla .programa--abierta .programa-mas { grid-template-rows: 1fr; } /* La foto se toca, y eso hay que decirlo: una imagen sin señal de que hace algo es una imagen que nadie pulsa. */ .escuela .rejilla .programa-foto { cursor: pointer; } .escuela .rejilla .programa-foto::after { content: "Ver la clase +"; position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border: 1px solid rgba(241, 236, 225, 0.3); background: rgba(10, 13, 10, 0.72); color: var(--texto); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; } .escuela .rejilla .programa--abierta .programa-foto::after { content: "Cerrar −"; } /* Sin esto, abrir una tarjeta estira a las seis: en una fila flex todas crecen a la altura de la más alta. Cada una a su aire. */ .escuela .rejilla { align-items: flex-start; } } /* ── La raya entre secciones ───────────────────────────────────────────────── Un píxel entre bloque y bloque —la escuela, los caballos, las instalaciones, el equipo, la galería, las reseñas, el contacto— para que se vea dónde acaba uno y empieza el siguiente. Los fondos ya se turnan, pero se turnan entre dos verdes casi iguales: la frontera se intuye y no se ve. Va en el HERMANO (el +), no en cada sección: así aparece sola en cuanto alguien añade una y se va con la que se quite, incluidas las que solo se pintan si el club las ha rellenado. Y la primera no lleva raya, que una raya sobre la portada sería una raya en el aire. */ :root { --raya-seccion: rgba(232, 223, 205, 0.14); /* Dos pesos de línea, porque son dos trabajos distintos y hasta ahora hacían los dos con el mismo. `--escuela-linea` (7%) separa cosas DENTRO de una tarjeta: la fila de un artículo, una chapa. Ahí un susurro basta y de más sería ruido. `--borde-tarjeta` (18%) dibuja el CONTORNO de la tarjeta, que es lo que dice dónde acaba una clase y empieza el fondo. Eso hay que verlo. Y el contorno solo no basta: una tarjeta del mismo color que su sección es una tarjeta que no está. `--tarjeta` la levanta un punto sobre el fondo, así se distingue por dos vías a la vez y no depende de que la pantalla del visitante tenga buen contraste. */ --borde-tarjeta: rgba(232, 223, 205, 0.18); --tarjeta: #171c14; } /* Todo lo que es una tarjeta: se levanta del fondo y se dibuja su contorno. */ .programa, .caballo, .opinion, .tarjeta, .formulario, .parte, .pupilaje-cuerpo, .ficha-cuerpo, .ficha-foto { background: var(--tarjeta); border: 1px solid var(--borde-tarjeta); } /* La ficha de caballo de /caballos son DOS mitades pegadas —foto y texto— con una línea de un píxel entre ellas. Con borde en cada mitad se dibujaría una raya doble por el medio: el contorno lo lleva la ficha entera y las mitades solo su fondo. */ .ficha, .pupilaje { border: 1px solid var(--borde-tarjeta); } .ficha-cuerpo, .ficha-foto, .pupilaje-cuerpo { border: 0; } body > section + section { border-top: 1px solid var(--raya-seccion); } /* ── El botón del sonido ───────────────────────────────────────────────────── Abajo a la derecha y fijo: se ve siempre, esté donde esté la página. Discreto —un círculo del color del fondo— porque no es el protagonista: es la salida. */ .sonido { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--escuela-linea); border-radius: 999px; background: rgba(12, 15, 12, 0.82); color: var(--principal); cursor: pointer; transition: color .25s ease, border-color .25s ease; } .sonido:hover, .sonido:focus-visible { color: var(--claro); border-color: var(--principal); } /* Un solo botón con los dos dibujos dentro: se enseña el que toca. Así el estado se lee de un vistazo — con onda suena, tachado no. */ .sonido .sonido-off, .sonido--apagado .sonido-on { display: none; } .sonido--apagado .sonido-off { display: block; } .sonido--apagado { color: var(--tenue); } /* ── Aire entre tarjetas, y fotos más bajas ────────────────────────────────── Las clases y los caballos se tocaban: lo único que los separaba era una línea de un píxel, porque la rejilla dejaba ese hueco y se veía el fondo por él. Ahora se separan de verdad. Quitada esa línea, cada clase necesita SU borde: el fondo de la tarjeta y el de la sección son el mismo verde, así que sin borde la tarjeta desaparece. Los caballos no lo necesitan — su fondo ya es más claro que el de su sección. Va por separado para cada tamaño de pantalla porque en el móvil estas rejillas ya no son rejillas, son carruseles, y allí el hueco es otra cosa. */ @media (min-width: 721px) { .rejilla { gap: 24px; background: none; } /* La foto se sale de los 40px de relleno Y del píxel del borde: 41. Con 40 se quedaría una uña de borde asomando por encima de la imagen. */ .escuela .rejilla > .programa .programa-foto { height: 176px; margin: -41px -41px 32px; } .caballo-foto { height: 285px; } .galeria { gap: 24px; } .galeria-foto { height: 240px; } .equipo { gap: 40px; } } /* En el móvil el hueco es el que separa una tarjeta de la siguiente mientras se pasan con el dedo: un poco más, para que se note dónde acaba cada una. */ @media (max-width: 720px) { .escuela .rejilla, .cuadra .rejilla, .equipo, .opiniones-lista { gap: 18px; } } /* ── El pupilaje, despegado de las clases ──────────────────────────────────── Estaba a UN PÍXEL de la rejilla de clases: la oferta de box parecía la séptima clase en vez de otra cosa. Ahora se separa de verdad, y su foto deja de ser la mitad del bloque. La foto no tiene alto propio: en una fila de dos columnas las dos miden lo que la más alta, y aquí la más alta es el texto. Así que para bajarla hay que bajar también el relleno del texto — el alto de la foto es una consecuencia, no un número que se pueda poner a secas. */ @media (min-width: 901px) { .pupilaje { margin-top: 72px; grid-template-columns: 0.5fr 1fr; } .pupilaje-cuerpo { padding: 44px; } .pupilaje-foto { min-height: 220px; } } @media (max-width: 900px) { .pupilaje { margin-top: 48px; } .pupilaje-foto { height: 170px; } } /* ── La tienda ─────────────────────────────────────────────────────────────── Un mostrador, no un catálogo: casi ningún artículo tiene foto, así que lo que ordena es la familia y lo que se lee es el nombre, para qué sirve y cuánto vale. Dos columnas de familias, que catorce líneas seguidas son un inventario. */ /* Una familia por pantalla, y se pasa con la flecha. Igual en el ordenador y en el móvil: las cinco desplegadas son una pared de catorce líneas que nadie lee. El desplazamiento lo lleva el navegador con imán — el JavaScript solo empuja. */ .tienda-carrusel { margin-top: 48px; } .tienda-flechas { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 20px; } .tienda { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tienda::-webkit-scrollbar { display: none; } /* Cada familia ocupa el ancho entero: lo que se ve es una familia, nunca media. */ .familia { flex: 0 0 100%; scroll-snap-align: start; } .familia-nombre { padding-bottom: 14px; border-bottom: 1px solid var(--principal); color: var(--principal); font-size: 10.88px; letter-spacing: 3.4816px; text-transform: uppercase; } .articulos { margin: 0; padding: 0; list-style: none; } /* El nombre a la izquierda y el precio a la derecha, alineados por la línea de base: así la columna de precios se lee sola, de arriba abajo. */ .articulo { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--escuela-linea); } .articulo-nombre { font-size: 15px; color: var(--texto); } /* El nombre entero es el enlace a la búsqueda, la lupa incluida. Subrayado punteado y discreto: dice que se puede pulsar sin gritarlo, que es una tienda, no un índice. */ .articulo-enlace { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(241, 236, 225, 0.22); text-underline-offset: 4px; transition: color .25s ease, text-decoration-color .25s ease; } .articulo-enlace:hover, .articulo-enlace:focus-visible { color: var(--claro); text-decoration-color: var(--principal); } /* La lupa: apagada mientras no hace falta, dorada cuando el ratón pasa por la línea. */ .articulo-lupa { display: inline-flex; align-items: center; margin-left: 8px; color: var(--tenue); vertical-align: -2px; transition: color .25s ease; } .articulo:hover .articulo-lupa { color: var(--principal); } .articulo-enlace:hover .articulo-lupa, .articulo-enlace:focus-visible .articulo-lupa { color: var(--claro); } .articulo-texto { margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--tenue); } .articulo-precio { flex-shrink: 0; font-family: var(--serif); font-weight: 300; font-size: 22px; color: var(--claro); } /* Agotado no se esconde: se enseña apagado. Quien lo buscaba merece saber que existe y que volverá, en vez de pensar que el club no lo tiene. */ .articulo--agotado { opacity: 0.5; } .chapa-agotado { margin-left: 8px; padding: 2px 8px; border: 1px solid rgba(241, 236, 225, 0.24); color: var(--apagado); font-size: 9.6px; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; } /* En el móvil las familias se pasan con el dedo, así que las flechas sobran: un botón para hacer lo que ya hace el gesto es un botón de más. Los puntos se quedan — no son un mando, son el mapa de por dónde vas. */ @media (max-width: 720px) { .tienda-flechas { display: none; } } /* ── El texto del móvil, un punto más pequeño ──────────────────────────────── Rectifica el bloque de más arriba, que se pasó de grande: en una pantalla de mano la letra grande no se lee mejor, se lee MENOS, porque cabe menos y todo parece una pared. Baja el cuerpo y deja la interlínea holgada, que es lo que de verdad hace respirar a un texto. Borrando este bloque se vuelve al anterior. */ @media (max-width: 720px) { body { font-size: 14px; line-height: 1.55; } .escuela-intro, .programa-texto, .caballo-texto, .punto span, .opinion-texto, .opinion-respuesta-texto, .pupilaje-texto, .manifiesto-texto, .tarjeta-texto, .pistas-intro { font-size: 14px; line-height: 1.6; } .lede { font-size: 15px; line-height: 1.55; } /* Los titulares, que son los que de verdad ocupan pantalla. */ .titular { font-size: clamp(38px, 11vw, 60px); } .escuela-titulo, .cuadra-portada-titulo, .pupilaje-titulo, .cierre-titulo, .pistas-titulo, .donde-direccion, .manifiesto-frase { font-size: clamp(24px, 7vw, 34px); } .programa-nombre, .programa-precio { font-size: 20px; } .caballo-nombre { font-size: 26px; } .nota-media-numero { font-size: 40px; } /* Rótulos en mayúsculas: pequeños, pero con el espaciado corto para que sigan cabiendo en una línea. */ .antetitulo, .caballo-disciplina, .profe-puesto, .cifra-pie, .ficha-etiqueta, .dato-etiqueta, .pistas-pie-etiqueta, .familia-nombre { font-size: 10px; letter-spacing: 1.6px; } .nav, .b, .programa-reservar { font-size: 11px; letter-spacing: 1.5px; } .hero-fila { font-size: 10px; letter-spacing: 1.6px; } .programa-sub, .programa-datos, .caballo-raza, .opinion-meta, .nota-media-pie, .nota, .estado-cola { font-size: 12px; } /* La tienda. */ .articulo-nombre { font-size: 14px; } .articulo-texto { font-size: 12px; } .articulo-precio { font-size: 19px; } /* El menú desplegable. */ .menu .nav { font-size: 12px; } .menu-tel { font-size: 16px; } /* El Abierto/Cerrado, despegado de las reseñas. En el móvil la raya que los separaba está escondida, así que sin esto el punto verde queda pegado al "191 reseñas" y se leen como una sola cosa. Se le da aire por los dos lados: a la izquierda si van en la misma línea, y por arriba si baja a la siguiente. */ .hero-fila { row-gap: 12px; } .hero-fila .estado { margin-left: 18px; } } /* En una pantalla ancha, catorce líneas en una sola columna dejan medio ancho vacío: la familia se reparte en dos columnas dentro de su propia pantalla. */ @media (min-width: 901px) { .articulos { columns: 2; column-gap: 64px; } .articulo { break-inside: avoid; } }