:root { --ink:#102b3d; --orange:#f05a35; --cream:#f7f3ed; --line:#d9d7d0; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; background:var(--cream); } .site-header { height:84px; padding:0 clamp(24px,6vw,92px); display:flex; align-items:center; justify-content:space-between; background:var(--white); position:relative; z-index:2; } .brand { display:flex; gap:9px; align-items:center; color:var(--ink); text-decoration:none; letter-spacing:.05em; line-height:1; } .brand-mark { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:white; font-size:23px; font-family:serif; } .brand strong,.brand em { display:block; font-size:12px; font-style:normal; } .brand em { color:var(--orange); font-size:10px; letter-spacing:.16em; margin-top:4px; } .main-nav { display:flex; align-items:center; gap:31px; } .main-nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; } .main-nav .nav-cta { color:white; background:var(--ink); padding:12px 18px; } .menu-toggle { display:none; }
.hero { min-height:605px; background:var(--ink); color:white; display:grid; grid-template-columns:minmax(0,1fr) minmax(370px,.78fr); position:relative; overflow:hidden; } .hero-copy { padding:92px 4vw 70px clamp(24px,9vw,150px); position:relative; z-index:1; } .eyebrow { letter-spacing:.17em; font-size:11px; font-weight:700; margin:0 0 19px; } .eyebrow.orange { color:var(--orange); } h1,h2,h3 { font-family:"Barlow Condensed",sans-serif; margin:0; font-weight:800; line-height:.88; text-transform:uppercase; letter-spacing:-.015em; } h1 { font-size:clamp(55px,6.3vw,100px); } h1 i,h2 i { color:var(--orange); font-style:normal; } .hero-text { max-width:490px; margin:30px 0; font-size:16px; line-height:1.65; color:#d5e0e3; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; } .button { text-decoration:none; font-size:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:space-between; gap:26px; padding:15px 19px; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-3px); } .button-primary { color:white; background:var(--orange); } .button-primary span,.text-link span { font-size:20px; line-height:10px; } .button-ghost { color:white; border:1px solid #87a0ad; } .hero-photo { background:linear-gradient(90deg,rgba(16,43,61,.28),rgba(16,43,61,.03)),url('hero-judo-ninos.png') center 58%/cover; min-height:400px; } .vertical-label { position:absolute; right:21px; bottom:23px; writing-mode:vertical-rl; font-size:10px; letter-spacing:.21em; color:#c8d6d8; }
.section { padding:105px clamp(24px,9vw,150px); } h2 { font-size:clamp(44px,5.2vw,75px); } .intro { background:white; display:grid; grid-template-columns:1.1fr .9fr; gap:9vw; align-items:end; } .intro-copy { font-size:16px; line-height:1.7; } .intro-copy p:first-child { margin-top:0; } .text-link { display:inline-flex; gap:13px; margin-top:15px; color:var(--orange); text-decoration:none; font-weight:700; }
.classes { background:#e7e0d5; } .section-heading { margin-bottom:45px; } .class-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .class-card { color:white; min-height:325px; padding:25px; display:flex; flex-direction:column; position:relative; background-size:cover; background-position:center; isolation:isolate; } .class-card:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,26,38,.2),rgba(8,26,38,.86)); } .kids { background-image:url('https://images.unsplash.com/photo-1603985529862-9e121b9c9a9d?auto=format&fit=crop&w=750&q=80'); } .youth { background-image:url('https://images.unsplash.com/photo-1564419434663-c4996738d0c4?auto=format&fit=crop&w=750&q=80'); } .adults { background-image:url('https://images.unsplash.com/photo-1564419434665-7eb38b45563c?auto=format&fit=crop&w=750&q=80'); } .card-number { color:#ffb7a3; font-size:13px; font-weight:700; } .class-card h3 { font-size:48px; margin-top:auto; } .class-card p { margin:10px 0 5px; font-weight:700; } .class-card span { font-size:13px; color:#dae2e5; }
.schedule { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; background:white; align-items:center; } .schedule-title > p:last-child { max-width:270px; line-height:1.6; } .schedule-table { border-top:2px solid var(--ink); } .schedule-row { display:grid; grid-template-columns:1.1fr 1.3fr 1fr; padding:20px 3px; border-bottom:1px solid var(--line); gap:10px; font-size:14px; align-items:center; } .schedule-row span { color:#546a76; } .schedule-head { color:var(--orange); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.13em; padding:14px 3px; }
.quote { background:var(--orange); color:white; padding:84px 10%; text-align:center; } .quote-symbol { font-family:Georgia,serif; font-size:85px; line-height:.55; } blockquote { max-width:850px; margin:14px auto 20px; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:clamp(35px,4.4vw,64px); font-weight:700; line-height:.95; } .quote p { text-transform:uppercase; font-size:10px; letter-spacing:.15em; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; } .contact-copy { max-width:350px; font-size:16px; line-height:1.6; } .contact-card { background:var(--ink); color:white; padding:35px; } .contact-card a:not(.button),.contact-card p { display:block; padding:13px 0 17px; margin:0; border-bottom:1px solid #456070; color:white; text-decoration:none; } .contact-card span,.contact-card strong { display:block; } .contact-card span { color:#b5cbd0; text-transform:uppercase; letter-spacing:.13em; font-size:10px; margin-bottom:6px; } .contact-card strong { font-size:15px; } .contact-card .full { margin-top:30px; width:100%; } footer { background:white; padding:32px clamp(24px,9vw,150px); display:flex; align-items:center; justify-content:space-between; gap:20px; } footer p,footer > a:last-child { font-size:12px; color:#58707a; text-decoration:none; }
@media (max-width:760px) { .site-header { height:70px; } .main-nav { position:absolute; top:70px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; background:white; padding:13px 24px 24px; box-shadow:0 8px 12px #0002; } .main-nav.open { display:flex; } .main-nav a { padding:14px 0; } .main-nav .nav-cta { text-align:center; margin-top:8px; } .menu-toggle { display:flex; align-items:center; gap:8px; font:700 12px "DM Sans",sans-serif; border:0; background:none; color:var(--ink); } .menu-toggle span,.menu-toggle:after { content:""; width:18px; height:2px; background:var(--ink); display:block; } .hero { grid-template-columns:1fr; } .hero-copy { padding:66px 26px 52px; } .hero-photo { min-height:280px; } .vertical-label { display:none; } .section { padding:70px 26px; } .intro,.schedule,.contact { grid-template-columns:1fr; gap:40px; } .class-grid { grid-template-columns:1fr; } .class-card { min-height:260px; } .schedule-row { grid-template-columns:1fr 1.2fr; } .schedule-row span:last-child { grid-column:2; } .schedule-head span:last-child { display:none; } footer { flex-direction:column; align-items:flex-start; } }
.kids { background-image:url('iniciacion-grupo.jpg'); }
a.class-card { text-decoration:none; transition:transform .2s; }
a.class-card:hover { transform:translateY(-5px); }
.class-card b { color:#fff; font-size:19px; margin-left:5px; }
.back-link { color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; }
.child-hero { background:var(--ink); color:#fff; display:grid; grid-template-columns:1fr 1fr; min-height:480px; }
.child-hero > div { padding:105px clamp(24px,9vw,150px); display:flex; flex-direction:column; justify-content:center; }
.child-hero > div > p:last-child { font-size:18px; color:#d5e0e3; }
.child-hero img { width:100%; height:480px; object-fit:cover; object-position:center; }
.article { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; background:#fff; align-items:start; }
.article-title { position:sticky; top:28px; }
.article-content { font-size:16px; line-height:1.75; }
.article-content > p:first-child { margin-top:0; font-size:19px; line-height:1.65; }
.article-content .button { margin-top:18px; }
.article-photo { margin:37px 0; }
.article-photo img { display:block; width:100%; max-height:530px; object-fit:cover; }
.article-photo.portrait img { max-height:540px; object-position:center 38%; }
@media (max-width:760px) { .child-hero,.article { grid-template-columns:1fr; } .child-hero > div { padding:65px 26px; } .child-hero img { height:310px; } .article-title { position:static; } }
.youth { background-image:url('competicion-lanzamiento.jpg'); }
.competition-quote { color:var(--orange); font-family:"Barlow Condensed",sans-serif; font-size:38px; font-weight:800; line-height:.95; text-transform:uppercase; }
.adults { background-image:url('recreativo-grupo.jpg'); }
.brand-mark { width:48px; height:48px; border-radius:0; background:#061522 url('logo-judo-guadarrama.jpg') center/cover no-repeat; color:transparent; font-size:0; }
.calendar-hero { background:var(--ink); color:#fff; padding:90px clamp(24px,9vw,150px); } .calendar-hero > p:last-child { color:#d5e0e3; font-size:18px; } .calendar { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; background:#fff; align-items:start; } .calendar-content { display:grid; gap:22px; } .calendar-empty,.admin-note { padding:34px; border:1px solid var(--line); } .calendar-empty span { display:block; color:var(--orange); font:58px serif; line-height:1; } .calendar-empty h3,.admin-note h3 { font-size:35px; margin:12px 0; } .calendar-empty p,.admin-note p:last-child { line-height:1.65; margin-bottom:0; } .admin-note { background:#e7e0d5; }
.calendar-files { border:1px solid var(--line); padding:27px 34px; } .calendar-files .eyebrow { margin-bottom:10px; } .calendar-files a { align-items:center; border-top:1px solid var(--line); color:var(--ink); display:flex; font-size:14px; font-weight:700; justify-content:space-between; padding:15px 0; text-decoration:none; } .calendar-files a span { color:var(--orange); font-size:19px; }
@media (max-width:760px) { .calendar { grid-template-columns:1fr; } }