*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#fff;font-family:"Myriad Pro","MyriadPro-Regular","Helvetica Neue",Arial,sans-serif}.home{position:relative;min-height:100vh;height:min(56.25vw,100vh);min-height:720px;background-image:url("assets/foto-portada.png");background-size:cover;background-position:center top;overflow:hidden}.menu{position:absolute;z-index:3;top:5.8%;left:12.8%;right:6.5%;display:flex;justify-content:space-between;align-items:center}.menu a{font-family:"Myriad Pro","Helvetica Neue",Arial,sans-serif;font-size:16px;font-weight:400;line-height:1;text-decoration:none;color:#fff;padding:10px 13px;border:2px solid transparent;border-radius:14px;white-space:nowrap}.menu a.active,.menu a:hover,.menu a:focus-visible{border-color:#fff;outline:none}.home-copy{position:absolute;z-index:2;left:4.7%;top:24.2%;width:39%;max-width:600px}.logo{display:block;width:100%;height:auto;margin:0 0 5.2%}.home-copy p{margin:0;font-family:"Myriad Pro","Helvetica Neue",Arial,sans-serif;font-size:clamp(22px,2.15vw,33px);font-weight:400;line-height:1.25;letter-spacing:.005em}.placeholder{min-height:60vh;color:#222;display:grid;place-items:center;font:24px Arial;background:#f4f4f4;border-top:1px solid #ddd}
@media(min-width:1500px){.menu a{font-size:18px}}
@media(max-width:900px){.home{height:auto;min-height:100svh;background-position:58% top;background-size:auto 100%;background-color:#df3f68}.menu{position:fixed;top:0;left:0;right:0;height:58px;padding:0 18px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;overflow-x:auto;gap:18px;justify-content:flex-start}.menu a{font-size:13px;padding:8px 10px}.home-copy{left:7%;right:7%;top:auto;bottom:7%;width:86%;max-width:560px;padding:18px;background:linear-gradient(90deg,rgba(185,44,84,.74),rgba(185,44,84,.25));border-radius:18px}.logo{width:min(100%,520px);margin-bottom:18px}.home-copy p{font-size:clamp(18px,4.8vw,26px);line-height:1.2}.desktop{display:none}}
@media(max-width:520px){.home{background-position:62% center}.home-copy{bottom:4%;padding:14px}.home-copy p{font-size:18px}.menu{gap:7px}.menu a{font-size:11px}}
/* v2.1 — ajuste solicitado: únicamente tipografía del texto del Home */
.hero-description,
.hero-copy .hero-description,
#inicio .hero-description {
font-family: "Myriad Pro", "Myriad Pro Regular", Arial, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
font-size: 20px !important;
line-height: 1.18 !important;
letter-spacing: 0 !important;
text-align: left !important;
color: #fff !important;
max-width: 590px !important;
margin-top: 38px !important;
}
@media (max-width: 1200px) {
.hero-description,
.hero-copy .hero-description,
#inicio .hero-description {
font-size: clamp(21px, 2.15vw, 33px) !important;
line-height: 1.20 !important;
}
}
@media (max-width: 800px) {
.hero-description,
.hero-copy .hero-description,
#inicio .hero-description {
max-width: 100% !important;
margin-top: 26px !important;
font-size: clamp(20px, 5.4vw, 27px) !important;
line-height: 1.22 !important;
}
}
/* v2.2 — Segunda sección: El momento de la revisión */
.revision{
position:relative;
min-height:820px;
background:#f7f7f7;
color:#737373;
overflow:hidden;
border-radius:28px 28px 0 0;
margin-top:-18px;
z-index:4;
}
.revision-inner{
position:relative;
z-index:2;
width:min(94%,1580px);
min-height:820px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(520px,790px) minmax(470px,620px);
gap:50px;
align-items:center;
}
.revision-video{
position:relative;
display:block;
width:100%;
padding:0;
border:0;
background:transparent;
cursor:pointer;
}
.revision-video img{display:block;width:100%;height:auto;aspect-ratio:791/513;object-fit:cover}
.revision-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:184px;height:184px;border:14px solid rgba(255,255,255,.56);border-radius:50%;
background:rgba(255,255,255,.24);display:grid;place-items:center;
transition:transform .25s ease,background .25s ease;
}
.revision-play span{width:0;height:0;border-top:42px solid transparent;border-bottom:42px solid transparent;border-left:66px solid rgba(255,255,255,.62);margin-left:14px}
.revision-video:hover .revision-play{transform:translate(-50%,-50%) scale(1.05);background:rgba(255,255,255,.32)}
.revision-copy{align-self:center;position:relative;z-index:2}
.revision-copy h2{
margin:0 0 18px;
font-family:"Ezra Black","Arial Black",Arial,sans-serif;
font-size:clamp(48px,4.35vw,68px);
line-height:.98;
font-weight:900;
letter-spacing:-.025em;
color:#e53485;
}
.revision-copy p{
margin:0;
max-width:620px;
font-family:"Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif;
font-size:20px;
line-height:1.36;
font-weight:400;
color:#737373;
}
.medio-lazo{position:absolute;z-index:1;right:-2px;top:0;height:100%;width:auto;pointer-events:none;user-select:none}
@media(max-width:1200px){
.revision-inner{grid-template-columns:1.08fr .92fr;gap:36px;padding:0 30px}
.revision-copy p{font-size:clamp(20px,1.7vw,26.666px)}
.medio-lazo{right:-70px;opacity:.75}
}
@media(max-width:850px){
.revision{min-height:0;border-radius:22px 22px 0 0}
.revision-inner{width:100%;min-height:0;grid-template-columns:1fr;padding:72px 22px 82px;gap:36px}
.revision-video{max-width:680px;margin:0 auto}
.revision-copy{max-width:680px;margin:0 auto}
.revision-copy h2{font-size:clamp(42px,11vw,62px)}
.revision-copy p{font-size:20px;line-height:1.4}
.revision-play{width:116px;height:116px;border-width:9px}
.revision-play span{border-top-width:27px;border-bottom-width:27px;border-left-width:43px;margin-left:9px}
.medio-lazo{height:72%;right:-105px;top:28%;opacity:.3}
}
/* v2.3 — Sección 3 / Autoexploración */
.section3-autoexploracion{
min-height:760px;
background:#e53485;
color:#fff;
display:grid;
grid-template-columns:minmax(420px,.82fr) minmax(600px,1.18fr);
gap:46px;
align-items:center;
padding:72px clamp(52px,5.2vw,90px);
border-radius:28px 28px 0 0;
overflow:hidden;
}
.section3-copy{text-align:right;max-width:650px;justify-self:right;}
.section3-copy h2{
margin:0 0 22px;
font-family:"Ezra Black","Arial Black",Arial,sans-serif;
font-weight:900;
font-size:clamp(40px,3.25vw,58px);
line-height:.92;
letter-spacing:-.02em;
color:#fff;
}
.section3-copy p{
margin:0 auto;
font-family:"Myriad Pro","Myriad Pro Regular",Arial,sans-serif;
font-weight:400;
font-size:20px;
line-height:1.42;
color:#fff;
max-width:650px;
}
.section3-media{width:100%}
.section3-media img{
display:block;width:100%;height:auto;object-fit:contain;
}
@media(max-width:900px){
.section3-autoexploracion{grid-template-columns:1fr;min-height:0;padding:54px 22px;gap:34px}
.section3-copy{max-width:680px}
.section3-copy h2{font-size:clamp(34px,8vw,48px)}
.section3-copy p{font-size:20px}
.section3-media{max-width:760px;margin:auto}
}
@media(max-width:520px){
.section3-autoexploracion{padding:46px 18px;border-radius:20px 20px 0 0}
.section3-copy h2{font-size:34px}
.section3-copy p{font-size:18px;line-height:1.4}
}
/* v4 — Testimonios */
.section4-testimonios{position:relative;overflow:hidden;background:#f9f9f9;min-height:760px;padding:70px clamp(30px,7vw,120px) 92px;border-radius:28px 28px 0 0}
.section4-ribbon{position:absolute;left:0;top:0;height:100%;width:auto;z-index:0;pointer-events:none}
.section4-inner{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding-left:70px}
.section4-inner h2{margin:0 0 34px;text-align:center;font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:clamp(42px,4.1vw,64px);font-weight:900;line-height:.95;letter-spacing:-.02em;color:#e53485}
.section4-videos{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.section4-video{position:relative;display:block;padding:0;border:0;background:none;overflow:hidden;cursor:pointer}
.section4-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease}
.section4-video:hover img{transform:scale(1.015)}
.section4-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border:6px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;padding-left:7px;background:rgba(255,255,255,.24);color:rgba(255,255,255,.8);font-size:36px;backdrop-filter:blur(2px)}
.section4-copy{max-width:1180px;margin:34px auto 0;font-family:"Myriad Pro","Myriad Pro Regular",Arial,sans-serif;font-size:20px;font-weight:400;line-height:1.42;color:#737373;text-align:left}
@media(max-width:900px){.section4-testimonios{min-height:0;padding:56px 22px 70px}.section4-ribbon{height:75%;opacity:.6}.section4-inner{padding-left:30px}.section4-videos{grid-template-columns:1fr;gap:22px}.section4-inner h2{font-size:clamp(36px,8vw,52px)}}
@media(max-width:560px){.section4-testimonios{padding:48px 18px 58px;border-radius:20px 20px 0 0}.section4-ribbon{height:55%;opacity:.35}.section4-inner{padding-left:0}.section4-inner h2{text-align:left;font-size:35px}.section4-copy{font-size:18px;line-height:1.4}.section4-play{width:68px;height:68px;border-width:4px;font-size:25px}}
/* FINAL MOCKUP + FUNCTIONAL LOCAL BOOKING */
:root{--regpink:#d55193;--softpink:#fcc0c8;--hotpink:#f00083;--gray:#737373}
.booking-flow{font-family:"Myriad Pro","Myriad Pro Regular",Arial,sans-serif}
.registration-panel{background:var(--softpink);padding:54px clamp(28px,6vw,70px);border-radius:26px 26px 0 0}
.registration-inner{max-width:1450px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.registration-card{background:#fff;border-radius:18px;padding:26px 34px 22px;display:grid;gap:14px}
.registration-card h2{margin:0 0 8px;color:var(--regpink);font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:clamp(25px,2.2vw,38px);line-height:1}
.registration-card>input{height:66px;border:2px solid #999;border-radius:9px;padding:0 16px;font:20px "Myriad Pro",Arial,sans-serif;outline:none}
.registration-card>input:focus{border-color:var(--regpink);box-shadow:0 0 0 3px #d5519320}.registration-card>input::placeholder{color:#c8c8c8}
.consent{display:flex;align-items:center;gap:10px;color:#cf3f58;font-size:17px}.consent input{width:22px;height:22px}
.send-registration{justify-self:center;width:62%;min-width:260px;height:66px;border:0;border-radius:9px;background:#ef4892;color:#fff;font-family:"Ezra Black","Arial Black",sans-serif;font-size:34px;cursor:pointer;transition:.2s}.send-registration:hover{transform:translateY(-2px)}
.registration-steps{color:var(--regpink);padding:10px 0}.reg-step{display:flex;align-items:center;gap:16px;margin:0 0 30px}.reg-step b{width:74px;height:74px;flex:0 0 74px;border-radius:50%;background:#ef4892;color:#fff;display:grid;place-items:center;font:42px "Ezra Black","Arial Black",sans-serif}.reg-step strong{font:clamp(27px,2.4vw,43px)/1 "Ezra Black","Arial Black",sans-serif}.reg-step p{margin:10px 0 0;font-size:20px;line-height:1.25;color:#f0006f}.partners{text-align:center;margin-top:65px}.partners p{font-size:17px;font-weight:700;line-height:1.2}.partner-logos{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:18px}.partner-logos img{max-width:92px;max-height:42px;width:auto;height:auto}
.appointment-panel{position:relative;overflow:hidden;background:#f9f9f9;padding:52px 30px 42px;border-radius:26px 26px 0 0;min-height:820px}
.appointment-inner{position:relative;z-index:2;width:min(100%,1030px);margin:auto}.booking-ribbon{position:absolute;bottom:0;z-index:0;pointer-events:none}.booking-ribbon.left{left:0;width:165px}.booking-ribbon.right{right:0;width:405px}
.booking-heading{display:flex;gap:22px;align-items:flex-start;margin-bottom:28px}.booking-heading>span{width:72px;height:72px;flex:0 0 72px;border-radius:50%;display:grid;place-items:center;background:#e36b9f;color:#fff;font:48px/1 "Ezra Black","Arial Black",sans-serif}.booking-heading h3{margin:7px 0 0;font-size:25px;line-height:1;font-weight:700}.booking-heading p{margin:5px 0 0;font-size:20px;line-height:1.15;color:#8a8a8a}
.stadium-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stadium-choice{min-height:76px;padding:10px;border:2px solid #999;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}.stadium-choice img{width:78px;height:42px;object-fit:contain}.stadium-choice strong{font-size:16px;line-height:1.05;text-align:left}.stadium-choice.active{border-color:var(--hotpink);background:#fff2f7}
.booking-rule{height:1px;background:#f4a7c8;margin:38px 0}.date-grid{display:flex;gap:30px;flex-wrap:wrap}.date-choice{width:143px;min-height:140px;padding:10px 8px;border:2px solid #999;border-radius:15px;background:#fff;display:flex;flex-direction:column;align-items:center;cursor:pointer}.date-choice .dow{font-weight:700;font-size:12px}.date-choice b{font-size:29px;color:#ee4c91}.date-choice .month{font-size:12px}.date-choice small{font-size:13px;line-height:1.05;margin-top:10px;text-align:center;font-weight:700}.date-choice em{font-size:12px;color:#0084d6;font-style:normal;font-weight:700;margin-top:8px}.date-choice em.femenil{color:#ee4c91}.date-choice.active{border-color:var(--hotpink);background:#fff2f7}
.slot-grid{display:grid;grid-template-columns:repeat(5,135px);gap:9px}.slot-choice{min-height:43px;border:2px solid #999;border-radius:9px;background:#fff;font-weight:700;font-size:16px;cursor:pointer}.slot-choice.active{border-color:var(--hotpink);background:#fff2f7}.slot-choice.sold{opacity:.45;cursor:not-allowed;text-decoration:line-through}.empty{color:#999;font-size:17px}.booking-summary{margin:22px 0 0;color:#737373;font-size:15px;min-height:22px}
.booking-actions{position:relative;display:flex;justify-content:center;align-items:center;margin-top:38px}.confirm-booking{min-width:260px;height:55px;border:0;border-radius:30px;background:var(--hotpink);color:#fff;font-weight:700;cursor:pointer}.confirm-booking span{font-size:24px;margin-left:20px}.back-booking{position:absolute;right:12%;border:0;background:none;color:#ed007c;text-decoration:underline;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);z-index:1000;background:#222;color:#fff;padding:13px 20px;border-radius:999px;opacity:0;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
.confirmation-modal{position:fixed;inset:0;background:#0008;z-index:1100;display:none;place-items:center;padding:20px}.confirmation-modal.open{display:grid}.confirmation-box{position:relative;width:min(92vw,520px);background:#fff;border-radius:20px;padding:36px;text-align:center}.confirmation-box h2{color:var(--regpink);font-family:"Ezra Black","Arial Black",sans-serif}.close-modal:first-child{position:absolute;right:16px;top:10px;border:0;background:none;font-size:30px}.close-modal.secondary{margin-top:25px;border:0;border-radius:22px;padding:12px 28px;background:var(--hotpink);color:#fff}
@media(max-width:900px){.registration-inner{grid-template-columns:1fr}.registration-steps{padding:15px}.partners{margin-top:35px}.stadium-grid{grid-template-columns:1fr 1fr}.slot-grid{grid-template-columns:repeat(3,1fr)}.booking-ribbon.left{width:110px}.booking-ribbon.right{width:280px;opacity:.75}}
@media(max-width:560px){.registration-panel{padding:32px 16px}.registration-card{padding:24px 18px}.registration-card h2{font-size:28px}.registration-card>input{height:56px;font-size:17px}.send-registration{width:100%;min-width:0;font-size:27px}.reg-step b{width:52px;height:52px;flex-basis:52px;font-size:31px}.reg-step strong{font-size:24px}.reg-step p{font-size:17px}.partner-logos{gap:15px;flex-wrap:wrap}.partner-logos img{max-width:72px}.appointment-panel{padding:38px 16px 85px}.booking-heading{gap:14px}.booking-heading>span{width:52px;height:52px;flex-basis:52px;font-size:34px}.booking-heading h3{font-size:20px}.booking-heading p{font-size:16px}.stadium-grid{grid-template-columns:1fr}.stadium-choice{justify-content:flex-start;padding-left:20px}.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.date-choice{width:100%}.slot-grid{grid-template-columns:1fr 1fr}.booking-actions{display:grid;gap:22px}.back-booking{position:static}.booking-ribbon{opacity:.5}}
/* ==========================================================
MASTER VISUAL PASS — ReferenciaDisenoFinal.pdf
Scoped to sections 5.1 / 5.2 so sections 1–4 remain intact.
========================================================== */
@media (min-width: 901px){
.registration-panel{padding:42px clamp(34px,4.4vw,66px) 38px;border-radius:24px 24px 0 0}
.registration-inner{max-width:1370px;grid-template-columns:1.02fr .98fr;gap:54px}
.registration-card{border-radius:18px;padding:22px 30px 18px;gap:10px}
.registration-card h2{font-size:31px;margin-bottom:4px;white-space:nowrap}
.registration-card>input{height:47px;font-size:15px;border-radius:6px;padding:0 13px}
.consent{font-size:13px;gap:8px}.consent input{width:17px;height:17px}
.send-registration{height:48px;width:58%;min-width:230px;font-size:28px;border-radius:7px}
.registration-steps{padding:0 0 0 6px}
.reg-step{gap:14px;margin-bottom:21px}
.reg-step b{width:58px;height:58px;flex-basis:58px;font-size:33px}
.reg-step strong{font-size:31px}
.reg-step p{font-size:15px;line-height:1.18;margin-top:7px}
.partners{margin-top:39px}.partners p{font-size:13px}
.partner-logos{gap:24px;margin-top:13px}.partner-logos img{max-width:76px;max-height:34px}
.appointment-panel{padding:34px 30px 28px;min-height:650px;border-radius:24px 24px 0 0}
.appointment-inner{width:min(100%,920px)}
.booking-heading{gap:15px;margin-bottom:18px}
.booking-heading>span{width:55px;height:55px;flex-basis:55px;font-size:36px}
.booking-heading h3{font-size:20px;margin-top:5px}
.booking-heading p{font-size:16px;margin-top:3px}
.stadium-grid{gap:10px}.stadium-choice{min-height:59px;border-radius:11px;padding:7px}
.stadium-choice img{width:64px;height:32px}.stadium-choice strong{font-size:13px}
.booking-rule{margin:26px 0}
.date-grid{gap:20px}.date-choice{width:114px;min-height:112px;border-radius:11px;padding:7px 6px}
.date-choice .dow{font-size:9px}.date-choice b{font-size:24px}.date-choice .month{font-size:9px}
.date-choice small{font-size:10px;margin-top:7px}.date-choice em{font-size:10px;margin-top:5px}
.slot-grid{grid-template-columns:repeat(5,108px);gap:7px}.slot-choice{min-height:31px;font-size:12px;border-radius:6px}
.booking-summary{font-size:12px;margin-top:13px}
.booking-actions{margin-top:27px}.confirm-booking{min-width:210px;height:42px;font-size:11px}
.confirm-booking span{font-size:19px;margin-left:15px}.back-booking{font-size:11px}
.booking-ribbon.left{width:132px}.booking-ribbon.right{width:325px}
}
/* REQUISITOS 5.2 */
.requirements-wrap{display:flex;justify-content:center;margin:14px 0 4px}
.requirements-btn{width:290px;height:32px;border:0;border-radius:18px;background:#f486a7;color:#fff;font:24px/1 "Myriad Pro",Arial,sans-serif;cursor:pointer;transition:transform .2s,filter .2s}
.requirements-btn:hover{transform:translateY(-1px);filter:brightness(.97)}
.s52-supporters{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:56px;margin:76px auto 0}
.s52-supporters img{width:auto;height:auto;max-width:105px;max-height:48px}
.requirements-modal{position:fixed;inset:0;z-index:1500;display:none;place-items:center;background:rgba(0,0,0,.64);padding:20px;overflow:auto}
.requirements-modal.open{display:grid}
.requirements-card{position:relative;width:min(94vw,805px);max-height:94vh;overflow:auto;background:#fa438d;color:#fff;padding:50px 70px 30px;border-radius:4px;font-family:"Myriad Pro",Arial,sans-serif;box-shadow:0 22px 70px rgba(0,0,0,.28)}
.requirements-close{position:absolute;right:18px;top:12px;border:0;background:transparent;color:#fff;font-size:36px;line-height:1;cursor:pointer}
.requirements-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:42px}
.requirements-top h2{margin:0;color:#fff;font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:44px;line-height:1.08}
.requirements-top img{width:170px;max-height:96px;object-fit:contain;filter:brightness(0) invert(1)}
.requirements-card ol{margin:0;padding-left:30px;font-size:20px;line-height:1.22;font-weight:600}
.requirements-card li{padding-left:4px;margin-bottom:22px}
.requirements-logos{display:flex;align-items:center;justify-content:center;gap:44px;margin-top:38px}
.requirements-logos img{max-width:100px;max-height:44px;width:auto;height:auto;filter:brightness(0) invert(1)}
@media(max-width:900px){
.s52-supporters{gap:28px;margin-top:58px;flex-wrap:wrap}
.s52-supporters img{max-width:85px}
.requirements-card{padding:45px 45px 28px}
.requirements-top h2{font-size:36px}
.requirements-card ol{font-size:18px}
}
@media(max-width:560px){
.requirements-btn{width:100%;max-width:290px;font-size:21px}
.s52-supporters{gap:22px;margin-top:52px}
.s52-supporters img{max-width:68px;max-height:34px}
.requirements-modal{padding:10px}
.requirements-card{width:100%;padding:42px 24px 25px}
.requirements-top{display:block;margin-bottom:28px}
.requirements-top h2{font-size:31px}
.requirements-top img{width:135px;margin-top:22px}
.requirements-card ol{font-size:16px;padding-left:22px}
.requirements-card li{margin-bottom:17px}
.requirements-logos{gap:18px;flex-wrap:wrap;margin-top:28px}
.requirements-logos img{max-width:65px;max-height:30px}
}
/* CONFIRMATION MODAL COLOR FIX — 2026-09-28 */
/* Scope deliberately limited to the existing confirmation modal. */
.confirmation-box #confirmation,
.confirmation-box #confirmation p,
.confirmation-box #confirmation div,
.confirmation-box #confirmation span,
.confirmation-box #confirmation strong,
.confirmation-box #confirmation b {
color: #737373 !important;
}
.confirmation-box #confirmation h1,
.confirmation-box #confirmation h2,
.confirmation-box #confirmation h3,
.confirmation-box #confirmation .confirmation-title {
color: #d55193 !important;
}
.confirmation-box #confirmation strong,
.confirmation-box #confirmation b {
color: #d55193 !important;
}
/* ==========================================================
V1502 — ajustes solicitados. Alcance: hero, 5.1, 5.2 y video triggers.
========================================================== */
.hero-partner-logos{display:flex;align-items:center;gap:28px;margin-top:72px;width:min(100%,520px)}
.hero-partner-logos img{display:block;width:auto;height:auto;max-width:82px;max-height:42px;object-fit:contain}
.registration-inner{position:relative}
.consult-doctor{grid-column:1;margin:12px 0 0;text-align:center;color:#e8488d;font-weight:700;font-size:17px}
.age-gate{margin-top:1px}
/* Los títulos de 5.2 deben permanecer negros aunque existan reglas heredadas. */
#citas .booking-heading h3{color:#111 !important}
/* Orden/look de sedes según referencia. */
#citas .stadium-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#citas .stadium-choice{background:#fff;border:2px solid #969696;border-radius:15px;min-height:76px;padding:10px 14px;justify-content:flex-start;gap:14px}
#citas .stadium-choice.active{border-color:#ed007c;background:#fff0f6}
#citas .stadium-choice img{flex:0 0 auto;width:82px;height:42px}
#citas .stadium-choice strong{color:#050505;font-weight:800;font-size:16px;line-height:1.05}
/* Proporción de Ver requisitos como master de diseño. */
#citas .requirements-wrap{margin:16px 0 8px}
#citas .requirements-btn{width:350px;max-width:100%;height:40px;border-radius:22px;background:#df6b9e;font-size:18px;font-weight:600}
/* Sección 3 preparada como trigger de video sin alterar su composición. */
.section3-media{position:relative;border:0;padding:0;background:transparent;cursor:pointer;text-align:inherit;font:inherit;color:inherit}
.section3-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border:5px solid rgba(255,255,255,.78);border-radius:50%;display:grid;place-items:center;padding-left:5px;background:rgba(255,255,255,.20);color:#fff;font-size:30px}
.video-modal{position:fixed;inset:0;z-index:1700;display:none;place-items:center;background:rgba(0,0,0,.82);padding:24px}
.video-modal.open{display:grid}
.video-dialog{position:relative;width:min(92vw,1000px);background:#000;border-radius:16px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.4)}
.video-dialog video{display:block;width:100%;max-height:82vh;background:#000}
.video-close{position:absolute;z-index:2;right:12px;top:8px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:30px;line-height:1;cursor:pointer}
@media (min-width:901px){
#citas .stadium-choice{min-height:69px;padding:8px 11px;gap:10px}
#citas .stadium-choice img{width:72px;height:36px}
#citas .stadium-choice strong{font-size:14px}
#citas .requirements-btn{width:350px;height:40px;font-size:18px}
}
@media(max-width:900px){.hero-partner-logos{margin-top:38px;flex-wrap:wrap}.consult-doctor{grid-column:auto}#citas .stadium-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hero-partner-logos{gap:16px}.hero-partner-logos img{max-width:65px;max-height:32px}#citas .stadium-grid{grid-template-columns:1fr}.section3-play{width:58px;height:58px;font-size:23px}}
/* ==========================================================
V1503 — Ajustes visuales puntuales solicitados
Solo Sección 1, 5.1 y botones 5.2. No altera lógica.
========================================================== */
@media (min-width:901px){
/* Sección 1: aliados en la posición/proporción del master. */
#inicio .hero-partner-logos{
width:520px;
max-width:100%;
margin-top:46px;
gap:30px;
justify-content:flex-start;
flex-wrap:nowrap;
}
#inicio .hero-partner-logos img{
width:auto;
height:auto;
max-width:86px;
max-height:42px;
flex:0 1 auto;
}
/* 5.1: formulario y pasos comparten la primera fila;
la leyenda queda inmediatamente debajo del formulario. */
#registro .registration-inner{
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
grid-template-rows:auto auto;
align-items:start;
column-gap:54px;
row-gap:12px;
}
#registro .registration-card{grid-column:1;grid-row:1}
#registro .registration-steps{grid-column:2;grid-row:1 / span 2;align-self:start}
#registro .consult-doctor{
grid-column:1;
grid-row:2;
margin:4px 0 0;
align-self:start;
}
/* 5.2: botones según proporciones del diseño de referencia. */
#citas .requirements-wrap{margin:20px 0 8px}
#citas .requirements-btn{
width:420px;
max-width:100%;
height:48px;
border-radius:25px;
font-size:22px;
font-weight:600;
}
#citas .booking-actions{margin-top:8px}
#citas .confirm-booking{
width:420px;
min-width:420px;
max-width:100%;
height:86px;
border-radius:44px;
font-size:22px;
font-weight:600;
}
#citas .confirm-booking span{font-size:34px;margin-left:28px;font-weight:400}
}
/* ==========================================================
V1350 — Corrección final Sección 5.1 desktop
Ajuste aislado: proporción/alineación del formulario según referencia.
========================================================== */
@media (min-width:901px){
#registro.registration-panel{
padding:62px clamp(54px,4.4vw,86px) 34px;
}
#registro .registration-inner{
display:grid;
width:100%;
max-width:1785px;
margin:0 auto;
grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
grid-template-rows:auto auto;
column-gap:70px;
row-gap:18px;
align-items:start;
}
#registro .registration-card{
grid-column:1;
grid-row:1;
width:100%;
box-sizing:border-box;
border-radius:22px;
padding:28px 40px 26px;
gap:14px;
}
#registro .registration-card h2{
font-size:clamp(34px,2.15vw,42px);
margin:0 0 8px;
white-space:nowrap;
}
#registro .registration-card>input{
height:64px;
font-size:19px;
border-radius:9px;
padding:0 17px;
}
#registro .consent{
font-size:17px;
gap:10px;
}
#registro .consent input{
width:25px;
height:25px;
}
#registro .send-registration{
width:62%;
min-width:0;
height:64px;
margin-top:8px;
border-radius:9px;
font-size:38px;
}
#registro .consult-doctor{
grid-column:1;
grid-row:2;
margin:0;
text-align:center;
font-size:20px;
line-height:1.2;
}
#registro .registration-steps{
grid-column:2;
grid-row:1 / span 2;
align-self:start;
padding:38px 0 0 0;
}
#registro .reg-step{
gap:18px;
margin-bottom:34px;
}
#registro .reg-step b{
width:78px;
height:78px;
flex-basis:78px;
font-size:45px;
}
#registro .reg-step strong{
font-size:clamp(35px,2.35vw,46px);
}
#registro .reg-step p{
font-size:21px;
line-height:1.25;
margin-top:8px;
}
#registro .partners{
margin-top:70px;
}
#registro .partners p{
font-size:17px;
line-height:1.2;
}
#registro .partner-logos{
gap:32px;
margin-top:18px;
}
#registro .partner-logos img{
max-width:92px;
max-height:42px;
}
}
/* ==========================================================
V1351 — Corrección de proporciones Sección 5.1 desktop
Ajuste aislado: recupera tamaños aprobados y contiene inputs.
========================================================== */
@media (min-width:901px){
#registro.registration-panel{padding:42px clamp(34px,4.4vw,66px) 38px;}
#registro .registration-inner{
max-width:1370px;
grid-template-columns:1.02fr .98fr;
column-gap:54px;
row-gap:18px;
}
#registro .registration-card{
border-radius:18px;
padding:22px 30px 18px;
gap:10px;
min-width:0;
}
#registro .registration-card h2{
font-size:31px;
margin:0 0 4px;
white-space:nowrap;
}
#registro .registration-card>input{
width:100%;
max-width:100%;
box-sizing:border-box;
height:47px;
font-size:15px;
border-radius:6px;
padding:0 13px;
}
#registro .consent{font-size:13px;gap:8px;}
#registro .consent input{width:17px;height:17px;}
#registro .send-registration{
height:48px;
width:58%;
min-width:230px;
font-size:28px;
border-radius:7px;
margin-top:0;
}
#registro .consult-doctor{font-size:16px;}
#registro .registration-steps{padding:0 0 0 6px;}
#registro .reg-step{gap:14px;margin-bottom:21px;}
#registro .reg-step b{width:58px;height:58px;flex-basis:58px;font-size:33px;}
#registro .reg-step strong{font-size:31px;}
#registro .reg-step p{font-size:15px;line-height:1.18;margin-top:7px;}
#registro .partners{margin-top:39px;}
#registro .partners p{font-size:13px;}
#registro .partner-logos{gap:24px;margin-top:13px;}
#registro .partner-logos img{max-width:76px;max-height:34px;}
}
/* ==========================================================
V1352 — Ajuste quirúrgico ancho de celdas Sección 5.1
No altera grid, tipografía, pasos, botones ni otras secciones.
========================================================== */
@media (min-width:901px){
#registro .registration-card>input{
width:82.5% !important;
max-width:82.5% !important;
justify-self:start;
box-sizing:border-box !important;
}
}
/* ==========================================================
V1353 — Corrección definitiva formulario 5.1 desktop
Revierte el encogimiento V1352. Mantiene el layout V1351.
========================================================== */
@media (min-width:901px){
#registro .registration-card{
overflow:visible;
}
/* Las celdas vuelven a ocupar el ancho útil correcto de la tarjeta. */
#registro .registration-card>input{
width:100% !important;
max-width:100% !important;
justify-self:stretch !important;
box-sizing:border-box !important;
}
/* Evita que el título invada la columna de pasos. */
#registro .registration-card h2{
font-size:29px !important;
line-height:1.02 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
max-width:100% !important;
}
}
/* ==========================================================
V1621 — MOBILE / SECCIÓN 1
Desktop V1620 permanece intacto.
========================================================== */
@media (max-width: 767px) {
#inicio.hero,
#inicio,
.hero {
background-image: url("assets/bannerHomeMobile.jpeg") !important;
background-size: cover !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
min-height: 100svh !important;
height: auto !important;
position: relative !important;
}
#inicio .hero-inner,
.hero .hero-inner,
#inicio .container {
min-height: 100svh !important;
padding: 14px 18px 24px !important;
box-sizing: border-box !important;
}
#inicio nav,
#inicio .nav,
#inicio .hero-nav,
.hero nav {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 4px !important;
flex-wrap: nowrap !important;
}
#inicio nav a,
#inicio .nav a,
#inicio .hero-nav a,
.hero nav a {
font-size: clamp(7px, 2.15vw, 10px) !important;
line-height: 1 !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 5px 4px !important;
}
#inicio .hero-logo,
#inicio .campaign-logo,
#inicio img[src*="logotipoURPCLJ"],
.hero img[src*="logotipoURPCLJ"] {
width: 86% !important;
max-width: 560px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
#inicio .hero-copy,
#inicio .hero-text,
#inicio .copy,
.hero .hero-copy,
.hero .hero-text {
width: 88% !important;
max-width: none !important;
font-size: clamp(12px, 3.05vw, 16px) !important;
line-height: 1.32 !important;
margin-left: auto !important;
margin-right: auto !important;
}
#inicio .hero-partners,
#inicio .partner-logos,
#inicio .supporter-logos,
.hero .hero-partners,
.hero .partner-logos {
position: absolute !important;
left: 50% !important;
bottom: 22px !important;
transform: translateX(-50%) !important;
width: 72% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
z-index: 4 !important;
}
#inicio .hero-partners img,
#inicio .partner-logos img,
#inicio .supporter-logos img,
.hero .hero-partners img,
.hero .partner-logos img {
max-width: 17% !important;
max-height: 28px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
}
/* ==========================================================
V1622 — MOBILE S1 / CORRECCIÓN CONTRA REFERENCIA 666x1200
Usa el markup real del master. Desktop queda intacto.
========================================================== */
@media (max-width: 767px) {
#inicio.home {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 666 / 1200 !important;
background-image: url("assets/bannerHomeMobile.jpeg") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
}
#inicio .menu {
position: absolute !important;
z-index: 10 !important;
top: 5.45% !important;
left: 6.25% !important;
right: 6.25% !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: visible !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
}
#inicio .menu a {
flex: 0 0 auto !important;
margin: 0 !important;
padding: .72vw 1.05vw !important;
border-width: 1.2px !important;
border-radius: 1.55vw !important;
font-size: 1.95vw !important;
line-height: 1 !important;
font-weight: 400 !important;
white-space: nowrap !important;
}
#inicio .home-copy {
position: absolute !important;
z-index: 3 !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border-radius: 0 !important;
}
#inicio .home-copy .logo {
position: absolute !important;
display: block !important;
top: 17.05% !important;
left: 6.65% !important;
width: 86.7% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
}
#inicio .home-copy .hero-description {
position: absolute !important;
top: 42.25% !important;
left: 6.25% !important;
width: 87.4% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
font-family: "Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif !important;
font-size: 2.62vw !important;
line-height: 1.23 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: left !important;
color: #fff !important;
}
#inicio .hero-partner-logos {
position: absolute !important;
z-index: 6 !important;
left: 21.2% !important;
right: auto !important;
bottom: 2.45% !important;
width: 58.2% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
transform: none !important;
}
#inicio .hero-partner-logos img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 17.5% !important;
max-height: 3.25vw !important;
margin: 0 !important;
object-fit: contain !important;
flex: 0 1 auto !important;
}
}
/* ==========================================================
V1623 — MOBILE S1 / RESPONSIVE MULTIDISPOSITIVO
iPhone 14+ / Pro / Pro Max + Android actuales.
Sólo afecta <= 767px. Desktop permanece intacto.
========================================================== */
/* Base mobile: mantiene composición 666:1200 y escala fluida */
@media (max-width: 767px) {
#inicio.home {
min-height: min(100svh, calc(100vw * 1.8018)) !important;
}
/* Evita que el menú choque en teléfonos angostos */
#inicio .menu a {
font-size: clamp(7.5px, 1.95vw, 12px) !important;
padding: clamp(3px, .72vw, 5px) clamp(4px, 1.05vw, 7px) !important;
}
#inicio .home-copy .hero-description {
font-size: clamp(12px, 2.62vw, 18px) !important;
}
#inicio .hero-partner-logos img {
max-height: clamp(13px, 3.25vw, 23px) !important;
}
}
/* iPhone normales / Android compactos ~360–399px */
@media (min-width: 350px) and (max-width: 399px) {
#inicio .menu {
left: 5.5% !important;
right: 5.5% !important;
}
#inicio .menu a {
font-size: 7.7px !important;
}
#inicio .home-copy .hero-description {
font-size: 12.2px !important;
line-height: 1.22 !important;
}
}
/* iPhone 14/15/16 Pro y Android estándar ~400–429px */
@media (min-width: 400px) and (max-width: 429px) {
#inicio .menu a {
font-size: 8.2px !important;
}
#inicio .home-copy .hero-description {
font-size: 12.8px !important;
}
}
/* Pro Max / Android grandes ~430–479px */
@media (min-width: 430px) and (max-width: 479px) {
#inicio .menu a {
font-size: 8.7px !important;
}
#inicio .home-copy .hero-description {
font-size: 13.5px !important;
}
}
/* Android grandes / plegables en viewport phone */
@media (min-width: 480px) and (max-width: 767px) {
#inicio .menu {
left: 6.5% !important;
right: 6.5% !important;
}
#inicio .menu a {
font-size: clamp(9px, 1.8vw, 12px) !important;
}
#inicio .home-copy .hero-description {
font-size: clamp(14px, 2.45vw, 18px) !important;
}
}
/* Safe areas para iPhone con notch/Dynamic Island al instalarse como web app */
@supports (padding: max(0px)) {
@media (max-width: 767px) {
#inicio.home {
padding-left: env(safe-area-inset-left) !important;
padding-right: env(safe-area-inset-right) !important;
}
}
}
/* Landscape phone: no obliga el hero vertical a ocupar 100svh */
@media (max-width: 767px) and (orientation: landscape) {
#inicio.home {
min-height: 0 !important;
}
}
/* V1624: únicamente logos blancos de aliados en S1 mobile */
@media (max-width: 767px) {
#inicio .hero-partner-logos {
left: 14.5% !important;
right: auto !important;
width: 71% !important;
}
#inicio .hero-partner-logos img {
max-width: 18.5% !important;
max-height: clamp(17px, 4.15vw, 29px) !important;
}
}
/* V1625: incremento final de presencia de aliados en S1 mobile */
@media (max-width: 767px) {
#inicio .hero-partner-logos {
left: 11.5% !important;
right: auto !important;
width: 77% !important;
}
#inicio .hero-partner-logos img {
max-width: 19% !important;
max-height: clamp(20px, 4.9vw, 34px) !important;
}
}
/* ==========================================================
V1626 — MOBILE
S1: aliados un poco más grandes y compactos
S2: composición alineada a referencia mobile
========================================================== */
@media (max-width: 767px) {
/* S1: sólo aliados */
#inicio .hero-partner-logos {
left: 15% !important;
width: 70% !important;
justify-content: center !important;
gap: clamp(12px, 3.2vw, 20px) !important;
}
#inicio .hero-partner-logos img {
flex: 0 0 auto !important;
max-width: 19% !important;
max-height: clamp(22px, 5.35vw, 37px) !important;
}
/* S2 */
#revision.section-two {
position: relative !important;
padding: 11.5vw 0 13vw !important;
background: #f9f9f9 !important;
overflow: hidden !important;
}
#revision .section-two-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 8.5vw !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
#revision .section-two-copy {
display: contents !important;
}
#revision .section-two-copy h2 {
order: 1 !important;
margin: 0 0 7vw !important;
text-align: center !important;
color: #f50078 !important;
font-size: clamp(32px, 8.3vw, 54px) !important;
line-height: .92 !important;
letter-spacing: -.02em !important;
}
#revision .section-two-media {
order: 2 !important;
width: 100% !important;
margin: 0 0 6.2vw !important;
}
#revision .section-two-media img,
#revision img[src*="fotoArbitroSeccion2"] {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
object-fit: cover !important;
}
#revision .section-two-copy p {
order: 3 !important;
width: 100% !important;
margin: 0 !important;
color: #737373 !important;
font-family: "Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif !important;
font-size: clamp(12px, 2.62vw, 18px) !important;
line-height: 1.23 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-align: justify !important;
}
#revision .medio-lazo,
#revision img[src*="medioLazo"] {
position: absolute !important;
right: -8vw !important;
bottom: 2.5vw !important;
width: 20vw !important;
height: auto !important;
z-index: 1 !important;
pointer-events: none !important;
}
}
/* ==========================================================
V1627 — S2 MOBILE: listón correcto suministrado por diseño
Desktop permanece intacto.
========================================================== */
.medio-lazo-wrap{
position:absolute;
z-index:1;
right:-2px;
top:0;
height:100%;
width:auto;
pointer-events:none;
user-select:none;
}
.medio-lazo-wrap .medio-lazo{
position:static;
display:block;
height:100%;
width:auto;
}
@media (max-width: 767px){
/* Neutraliza el viejo listón móvil que generaba el "pico" rosa */
#revision .medio-lazo-wrap{
position:absolute !important;
top:auto !important;
right:-1px !important;
bottom:0 !important;
width:clamp(92px, 24vw, 132px) !important;
height:auto !important;
opacity:1 !important;
overflow:hidden !important;
z-index:1 !important;
pointer-events:none !important;
}
#revision .medio-lazo-wrap .medio-lazo{
position:static !important;
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
opacity:1 !important;
transform:none !important;
}
/* El contenido queda por encima del ornamento */
#revision .revision-inner{
position:relative !important;
z-index:2 !important;
}
}
/* ==========================================================
V1628 — SECCIÓN 3
Desktop conserva composición aprobada.
Mobile: título > video > párrafo según arte final.
========================================================== */
@media (min-width: 768px){
.section3-autoexploracion{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:
"s3title s3media"
"s3body s3media";
}
.section3-copy{grid-area:s3title;}
.section3-body{grid-area:s3body;}
.section3-media{grid-area:s3media;}
}
@media (max-width: 767px){
#aprende.section3-autoexploracion{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
padding:52px 32px 48px !important;
gap:0 !important;
}
#aprende .section3-copy{
order:1 !important;
width:100% !important;
margin:0 0 28px !important;
padding:0 !important;
text-align:center !important;
}
#aprende .section3-copy h2{
margin:0 !important;
font-size:clamp(31px, 8.15vw, 38px) !important;
line-height:.98 !important;
letter-spacing:-.02em !important;
text-align:center !important;
}
#aprende .section3-media{
order:2 !important;
width:100% !important;
margin:0 0 28px !important;
padding:0 !important;
aspect-ratio:auto !important;
}
#aprende .section3-media img{
display:block !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
}
#aprende .section3-body{
order:3 !important;
width:100% !important;
margin:0 !important;
padding:0 10px !important;
}
#aprende .section3-body p{
margin:0 !important;
font-size:var(--mobile-body-size, 16px) !important;
line-height:1.42 !important;
font-weight:400 !important;
text-align:justify !important;
}
}
/* V1629 — mobile S3 title + S4 carousel */
@media (max-width:767px){
#aprende .section3-copy h2{
font-size:clamp(27px,7.25vw,34px)!important;
line-height:1.00!important;
}
#testimonios.section4-testimonios{
position:relative!important;
overflow:hidden!important;
padding:58px 0 50px!important;
}
#testimonios .section4-inner{
position:relative!important; z-index:2!important;
width:100%!important; max-width:none!important; padding:0 32px!important;
}
#testimonios .section4-inner>h2{
margin:0 0 34px!important;
font-size:clamp(32px,8.7vw,41px)!important;
line-height:.98!important; letter-spacing:-.025em!important;
text-align:left!important;
}
#testimonios .section4-carousel{
position:relative!important; width:100%!important; margin:0 0 34px!important;
}
#testimonios .section4-videos{
display:flex!important; overflow:hidden!important; width:100%!important;
gap:0!important; scroll-behavior:smooth!important;
}
#testimonios .section4-video{
flex:0 0 100%!important; width:100%!important; margin:0!important;
display:block!important;
}
#testimonios .section4-video img{
width:100%!important; height:auto!important; display:block!important; object-fit:cover!important;
}
#testimonios .section4-arrow{
display:flex!important; position:absolute!important; z-index:5!important;
top:50%!important; transform:translateY(-50%)!important;
width:30px!important; height:46px!important; align-items:center!important; justify-content:center!important;
border:0!important; background:transparent!important; color:#f5007f!important;
font-size:44px!important; line-height:1!important; padding:0!important; cursor:pointer!important;
}
#testimonios .section4-prev{left:-30px!important}
#testimonios .section4-next{right:-30px!important}
#testimonios .section4-copy{
margin:0!important; padding:0 10px!important;
font-size:var(--mobile-body-size,16px)!important; line-height:1.42!important;
font-weight:400!important; text-align:justify!important;
}
#testimonios .section4-ribbon-picture{
display:block!important; position:absolute!important; inset:0!important; z-index:1!important;
pointer-events:none!important;
}
#testimonios .section4-ribbon-picture .section4-ribbon{
position:absolute!important; left:0!important; bottom:0!important;
width:auto!important; height:62%!important; max-width:none!important; object-fit:contain!important;
object-position:left bottom!important;
}
}
@media (min-width:768px){
.section4-carousel{display:contents}
.section4-arrow{display:none!important}
.section4-ribbon-picture{display:contents}
}
/* V1630 — Afinación S4 mobile según referencia */
@media (max-width:767px){
#testimonios.section4-testimonios{
padding:58px 0 48px!important;
}
#testimonios .section4-inner{
padding:0 32px!important;
}
/* Título: centrado y forzado visualmente a dos líneas en 393–440px */
#testimonios .section4-inner>h2{
width:100%!important;
max-width:none!important;
margin:0 auto 34px!important;
font-size:clamp(27px,7.05vw,31px)!important;
line-height:1.03!important;
letter-spacing:-.025em!important;
text-align:center!important;
white-space:normal!important;
}
/* Párrafo: escala común mobile y centrado como arte de referencia */
#testimonios .section4-copy{
position:relative!important;
z-index:3!important;
margin:0!important;
padding:0 10px 22px!important;
font-size:var(--mobile-body-size,16px)!important;
line-height:1.42!important;
font-weight:400!important;
text-align:center!important;
}
/* El listón vive abajo; ya no invade título/carrusel */
#testimonios .section4-ribbon-picture{
position:absolute!important;
inset:auto 0 0 0!important;
height:47%!important;
z-index:1!important;
overflow:hidden!important;
pointer-events:none!important;
}
#testimonios .section4-ribbon-picture .section4-ribbon{
position:absolute!important;
left:0!important;
bottom:0!important;
top:auto!important;
width:auto!important;
height:100%!important;
max-width:none!important;
object-fit:contain!important;
object-position:left bottom!important;
}
#testimonios .section4-carousel{
z-index:3!important;
}
}
@media (max-width:410px){
#testimonios .section4-inner>h2{
font-size:27px!important;
letter-spacing:-.035em!important;
}
}
/* V1631 — cierre S4 + ajuste mobile S5.1 */
@media (max-width:767px){
/* S4: el párrafo vuelve a alineación izquierda */
#testimonios .section4-copy{
text-align:left!important;
}
/* S5.1 */
#registro .registration-panel{
padding:48px 0 38px!important;
}
#registro .registration-inner{
width:100%!important;
max-width:none!important;
padding:0 40px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
}
#registro .registration-card{
width:100%!important;
margin:0!important;
padding:18px 24px 16px!important;
border-radius:12px!important;
}
#registro .registration-card h2{
margin:0 0 14px!important;
font-size:clamp(16px,4.55vw,20px)!important;
line-height:1!important;
letter-spacing:-.02em!important;
text-align:center!important;
white-space:nowrap!important;
}
#registro .registration-card input:not([type="checkbox"]){
width:100%!important;
height:38px!important;
margin:0 0 8px!important;
padding:0 10px!important;
font-size:11px!important;
}
#registro .registration-card .consent{
margin:7px 0!important;
gap:7px!important;
font-size:10px!important;
line-height:1.2!important;
}
#registro .registration-card .consent input{
width:14px!important;height:14px!important;flex:0 0 14px!important;
}
#registro .send-registration{
width:62%!important;
min-width:0!important;
height:40px!important;
margin:14px auto 0!important;
font-size:22px!important;
line-height:1!important;
}
#registro .consult-doctor{
margin:12px 0 30px!important;
font-size:10px!important;
text-align:center!important;
}
#registro .registration-steps{
width:100%!important;
margin:0!important;
padding:0!important;
}
#registro .reg-step{
display:flex!important;
align-items:center!important;
gap:10px!important;
margin:0 0 18px!important;
}
#registro .reg-step b{
width:34px!important;height:34px!important;flex:0 0 34px!important;
font-size:20px!important;
}
#registro .reg-step strong{
font-size:clamp(18px,5.2vw,23px)!important;
line-height:1.02!important;
}
#registro .reg-step.step3{
align-items:flex-start!important;
}
#registro .reg-step.step3 p{
margin:5px 0 0!important;
font-size:var(--mobile-body-size,16px)!important;
line-height:1.42!important;
font-weight:400!important;
text-align:left!important;
}
#registro .partners{
margin:54px 0 0!important;
text-align:center!important;
}
#registro .partners>p{
margin:0 auto 20px!important;
max-width:330px!important;
font-size:var(--mobile-body-size,16px)!important;
line-height:1.42!important;
font-weight:400!important;
}
#registro .partner-logos{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:18px!important;
width:100%!important;
}
#registro .partner-logos img{
width:auto!important;
max-width:58px!important;
max-height:30px!important;
object-fit:contain!important;
}
}
@media (max-width:410px){
#registro .registration-inner{padding:0 40px!important}
#registro .registration-card h2{font-size:16px!important}
#registro .reg-step strong{font-size:19px!important}
#registro .reg-step.step3 p,
#registro .partners>p{font-size:var(--mobile-body-size,16px)!important}
#registro .partner-logos{gap:14px!important}
#registro .partner-logos img{max-width:52px!important;max-height:27px!important}
}
/* V1632 — ajuste fino S5.1 mobile según referencia */
@media (max-width:767px){
#registro .registration-panel{
padding:46px 0 0!important;
border-radius:18px 18px 0 0!important;
overflow:hidden!important;
}
#registro .registration-inner{
padding:0 38px!important;
}
#registro .registration-card{
box-sizing:border-box!important;
width:100%!important;
padding:16px 22px 15px!important;
border-radius:11px!important;
}
#registro .registration-card h2{
box-sizing:border-box!important;
width:100%!important;
margin:0 0 12px!important;
padding:0!important;
font-size:clamp(15px,4.05vw,18px)!important;
line-height:1.05!important;
letter-spacing:-.035em!important;
white-space:nowrap!important;
text-align:center!important;
}
#registro .registration-card input:not([type="checkbox"]){
box-sizing:border-box!important;
width:100%!important;
height:34px!important;
margin:0 0 7px!important;
padding:0 9px!important;
border-width:1.5px!important;
border-radius:6px!important;
font-size:10px!important;
}
#registro .registration-card .consent{
margin:5px 0!important;
gap:6px!important;
font-size:10px!important;
line-height:1.15!important;
}
#registro .registration-card .consent input{
width:13px!important;height:13px!important;flex:0 0 13px!important;
}
#registro .send-registration{
display:block!important;
box-sizing:border-box!important;
width:58%!important;
height:38px!important;
margin:12px auto 0!important;
padding:0!important;
font-size:21px!important;
text-align:center!important;
}
#registro .consult-doctor{
margin:9px 0 24px!important;
font-size:12px!important;
line-height:1.2!important;
}
#registro .registration-steps{
padding:0!important;
}
#registro .reg-step{
gap:9px!important;
margin-bottom:15px!important;
}
#registro .reg-step b{
width:34px!important;height:34px!important;flex-basis:34px!important;
}
#registro .reg-step strong{
font-size:clamp(17px,4.8vw,21px)!important;
line-height:1!important;
white-space:nowrap!important;
}
#registro .reg-step.step3 p{
margin:5px 0 0!important;
font-size:var(--mobile-body-size,16px)!important;
line-height:1.35!important;
}
#registro .reg-step.step3 p br{
display:none!important;
}
#registro .partners{
margin:42px 0 0!important;
padding-bottom:38px!important;
}
#registro .partners>p{
max-width:none!important;
margin:0 auto 18px!important;
font-size:12px!important;
line-height:1.25!important;
}
#registro .partners>p br{
display:none!important;
}
#registro .partner-logos{
gap:15px!important;
}
#registro .partner-logos img{
max-width:56px!important;
max-height:29px!important;
}
/* borde inferior redondeado de S5.1 antes de S5.2 */
#registro .registration-panel{
position:relative!important;
}
#registro .registration-panel:after{
content:""!important;
display:block!important;
position:absolute!important;
left:0!important; right:0!important; bottom:-1px!important;
height:22px!important;
background:#f9f9f9!important;
border-radius:18px 18px 0 0!important;
transform:translateY(21px)!important;
z-index:2!important;
}
#registro .appointment-panel{
position:relative!important;
z-index:1!important;
border-radius:18px 18px 0 0!important;
}
}
@media (max-width:410px){
#registro .registration-inner{padding:0 38px!important}
#registro .registration-card h2{font-size:15px!important}
#registro .reg-step strong{font-size:17px!important}
#registro .partners>p{font-size:11px!important}
}
/* V1633 — S5.1 mobile: centrado y compactación definitiva */
@media (max-width:767px){
#registro .registration-panel{
padding-top:38px!important;
padding-bottom:0!important;
}
#registro .registration-inner{
display:flex!important;
flex-direction:column!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0 34px!important;
box-sizing:border-box!important;
gap:0!important;
}
#registro .registration-card{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
width:100%!important;
margin:0 auto!important;
padding:15px 20px 14px!important;
gap:0!important;
box-sizing:border-box!important;
}
#registro .registration-card h2{
width:100%!important;
max-width:100%!important;
margin:0 auto 13px!important;
padding:0!important;
text-align:center!important;
white-space:nowrap!important;
font-size:clamp(14px,3.8vw,17px)!important;
line-height:1!important;
letter-spacing:-.04em!important;
}
#registro .registration-card input:not([type="checkbox"]){
display:block!important;
width:94%!important;
height:34px!important;
margin:0 auto 7px!important;
padding:0 9px!important;
box-sizing:border-box!important;
}
#registro .registration-card .consent{
display:flex!important;
align-items:center!important;
align-self:center!important;
width:94%!important;
margin:3px auto!important;
padding:0!important;
gap:6px!important;
box-sizing:border-box!important;
}
#registro .send-registration{
align-self:center!important;
width:58%!important;
height:38px!important;
margin:12px auto 0!important;
}
#registro .consult-doctor{
order:2!important;
width:100%!important;
margin:10px auto 17px!important;
padding:0!important;
text-align:center!important;
font-size:13px!important;
line-height:1.1!important;
}
#registro .registration-steps{
order:3!important;
width:100%!important;
margin:0!important;
padding:0 0 31px!important;
box-sizing:border-box!important;
}
#registro .reg-step{
margin:0 0 12px!important;
}
#registro .reg-step.step3{
margin-bottom:0!important;
}
#registro .reg-step.step3 p{
margin:5px 0 0!important;
}
#registro .partners{
margin:34px 0 0!important;
padding-bottom:26px!important;
}
#registro .partners>p{
margin-bottom:15px!important;
}
}
@media (max-width:410px){
#registro .registration-inner{
padding-left:34px!important;
padding-right:34px!important;
}
#registro .registration-card{
padding-left:18px!important;
padding-right:18px!important;
}
#registro .registration-card h2{
font-size:14px!important;
}
}
/* ==========================================================
V1640 — SECCIÓN 5.2 MOBILE según master aprobado
Desktop y S1–S5.1 permanecen intactos.
========================================================== */
.date-carousel-shell{position:relative}
.date-carousel-arrow{display:none}
@media (max-width:767px){
#citas.appointment-panel{
padding:34px 24px 54px!important;
border-radius:18px 18px 0 0!important;
min-height:0!important;
}
#citas .appointment-inner{width:100%!important}
#citas .booking-heading{
gap:9px!important;
margin-bottom:16px!important;
align-items:flex-start!important;
}
#citas .booking-heading>span{
width:36px!important;height:36px!important;flex:0 0 36px!important;
font-size:24px!important;
}
#citas .booking-heading h3{
margin:2px 0 0!important;
font-size:15px!important;
line-height:1!important;
}
#citas .booking-heading p{
margin:2px 0 0!important;
font-size:12px!important;
line-height:1.08!important;
}
/* 1. Estadios: 2 por fila */
#citas .stadium-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
#citas .stadium-choice{
min-height:52px!important;
padding:6px 7px!important;
border-width:1.5px!important;
border-radius:9px!important;
gap:6px!important;
justify-content:flex-start!important;
}
#citas .stadium-choice img{
width:48px!important;height:27px!important;
}
#citas .stadium-choice strong{
font-size:10px!important;
line-height:1.02!important;
}
#citas .booking-rule{margin:24px 0!important}
/* 2. Fechas: carrusel horizontal, tres tarjetas visibles */
#citas .date-carousel-shell{
margin:0 -7px!important;
padding:0 16px!important;
}
#citas .date-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:10px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
padding:0!important;
}
#citas .date-grid::-webkit-scrollbar{display:none!important}
#citas .date-choice{
flex:0 0 calc((100% - 20px)/3)!important;
width:auto!important;
min-width:0!important;
min-height:106px!important;
padding:7px 4px!important;
border-width:1.5px!important;
border-radius:9px!important;
scroll-snap-align:start!important;
}
#citas .date-choice .dow{font-size:8px!important}
#citas .date-choice b{font-size:23px!important;line-height:1!important}
#citas .date-choice .month{font-size:8px!important}
#citas .date-choice small{font-size:8px!important;line-height:1.05!important;margin-top:6px!important}
#citas .date-choice em{font-size:8px!important;margin-top:5px!important}
#citas .date-carousel-arrow{
display:block!important;
position:absolute!important;
top:50%!important;
transform:translateY(-50%)!important;
z-index:5!important;
border:0!important;
background:transparent!important;
color:#ed007c!important;
font-size:29px!important;
line-height:1!important;
padding:0!important;
width:18px!important;height:34px!important;
cursor:pointer!important;
}
#citas .date-carousel-arrow.prev{left:-5px!important}
#citas .date-carousel-arrow.next{right:-5px!important}
/* 3. Horarios: 3 por fila */
#citas .slot-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
}
#citas .slot-choice{
min-height:31px!important;
border-width:1.5px!important;
border-radius:7px!important;
font-size:11px!important;
padding:2px!important;
}
#citas .booking-summary{
margin:14px 0 0!important;
min-height:18px!important;
font-size:11px!important;
}
/* CTAs iguales; Volver a la derecha del bloque de confirmar */
#citas .requirements-wrap{
width:66%!important;
margin:17px auto 5px!important;
}
#citas .requirements-btn{
width:100%!important;
max-width:none!important;
height:29px!important;
border-radius:16px!important;
font-size:12px!important;
}
#citas .booking-actions{
position:relative!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
width:100%!important;
margin:0!important;
gap:0!important;
}
#citas .confirm-booking{
width:66%!important;
min-width:0!important;
max-width:none!important;
height:42px!important;
border-radius:22px!important;
font-size:11px!important;
}
#citas .confirm-booking span{
font-size:19px!important;
margin-left:13px!important;
}
#citas .back-booking{
position:absolute!important;
right:1%!important;
top:50%!important;
transform:translateY(-50%)!important;
font-size:8px!important;
padding:0!important;
}
/* Aliados en una sola línea */
#citas .s52-supporters{
display:flex!important;
flex-wrap:nowrap!important;
justify-content:center!important;
align-items:center!important;
gap:17px!important;
margin:34px auto 0!important;
padding:0 4px!important;
width:100%!important;
}
#citas .s52-supporters img{
width:auto!important;
height:auto!important;
max-width:48px!important;
max-height:24px!important;
flex:0 1 auto!important;
}
#citas .booking-ribbon.left{
width:82px!important;
opacity:1!important;
}
#citas .booking-ribbon.right{
width:205px!important;
opacity:1!important;
}
}
@media (max-width:410px){
#citas.appointment-panel{padding-left:22px!important;padding-right:22px!important}
#citas .stadium-choice img{width:44px!important}
#citas .stadium-choice strong{font-size:9.5px!important}
#citas .s52-supporters{gap:13px!important}
#citas .s52-supporters img{max-width:44px!important;max-height:22px!important}
}
/* ==========================================================
FINAL QA S3 — Hostinger desktop/mobile
Desktop: compacta título + párrafo sin alterar imagen.
Mobile: título en exactamente 2 líneas.
========================================================== */
@media (min-width: 901px){
#aprende.section3-autoexploracion{
grid-template-rows:auto auto !important;
align-content:center !important;
align-items:center !important;
row-gap:34px !important;
}
#aprende .section3-copy{
align-self:end !important;
margin:0 !important;
}
#aprende .section3-copy h2{
margin:0 !important;
}
#aprende .section3-body{
align-self:start !important;
margin:0 !important;
}
#aprende .section3-body p{
margin:0 !important;
}
#aprende .section3-media{
align-self:center !important;
}
}
@media (max-width: 767px){
#aprende .section3-copy h2{
font-size:clamp(20px,5.65vw,25px) !important;
line-height:1.02 !important;
letter-spacing:-.025em !important;
}
#aprende .section3-copy h2 br:first-of-type{
display:none !important;
}
}
/* ==========================================================
D4 — Hero desktop: dos filas de logos según referencia.
Alcance exclusivo desktop; mobile permanece intacto.
========================================================== */
.hero-sponsors-desktop{display:none;}
@media (min-width:901px){
#inicio .home-copy .hero-partner-logos{display:none!important;}
#inicio .hero-sponsors-desktop{
position:absolute;
z-index:7;
left:4.7%;
bottom:3.6%;
width:39%;
max-width:600px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:23px;
margin:0;
padding:0;
pointer-events:none;
}
#inicio .hero-sponsors-row{
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:space-between;
width:100%;
margin:0;
padding:0;
}
#inicio .hero-sponsors-brands{width:88%;}
#inicio .hero-sponsors-brands img{
display:block;
width:auto;
height:auto;
max-width:17%;
max-height:31px;
object-fit:contain;
flex:0 1 auto;
}
#inicio .hero-sponsors-leagues{
width:76%;
margin-left:2.2%;
}
#inicio .hero-sponsors-leagues img{
display:block;
width:auto;
height:auto;
max-height:25px;
object-fit:contain;
flex:0 1 auto;
}
#inicio .hero-sponsors-leagues img:nth-child(1){max-width:21%;}
#inicio .hero-sponsors-leagues img:nth-child(2){max-width:24%;}
#inicio .hero-sponsors-leagues img:nth-child(3){max-width:24%;}
#inicio .hero-sponsors-leagues img:nth-child(4){max-width:17%;}
}
/* D5 — FUCAM en aliados comerciales de la sección 5.1 */
#registro .partner-logos .fucam-logo{
max-width:72px;
max-height:58px;
}
@media (max-width:767px){
#registro .partner-logos{
gap:10px!important;
flex-wrap:nowrap!important;
}
#registro .partner-logos img{
max-width:44px!important;
max-height:25px!important;
}
#registro .partner-logos .fucam-logo{
max-width:43px!important;
max-height:32px!important;
}
}
/* ==========================================================
D6 — Sección 5.2: footer de ligas + aliados en rosa.
Orden según referencia aprobada.
========================================================== */
#citas .s52-supporters{
position:relative;
z-index:3;
width:100%;
max-width:1160px;
margin:72px auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:58px;
}
#citas .s52-league-logos,
#citas .s52-brand-logos{
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
}
#citas .s52-league-logos{gap:42px; flex:0 1 47%;}
#citas .s52-brand-logos{gap:46px; flex:0 1 53%;}
#citas .s52-supporters .s52-league-logos img,
#citas .s52-supporters .s52-brand-logos img{
display:block;
width:auto;
height:auto;
object-fit:contain;
max-width:none;
}
#citas .s52-league-logos img:nth-child(1){height:31px;}
#citas .s52-league-logos img:nth-child(2){height:31px;}
#citas .s52-league-logos img:nth-child(3){height:34px;}
#citas .s52-league-logos img:nth-child(4){height:35px;}
#citas .s52-brand-logos img{max-height:37px; max-width:92px;}
@media (max-width:767px){
#citas .s52-supporters{
width:100%!important;
margin:32px auto 0!important;
padding:0 2px!important;
display:flex!important;
flex-direction:column!important;
gap:12px!important;
}
#citas .s52-league-logos,
#citas .s52-brand-logos{
width:100%!important;
display:flex!important;
flex-wrap:nowrap!important;
justify-content:center!important;
align-items:center!important;
}
#citas .s52-league-logos{gap:12px!important;}
#citas .s52-brand-logos{gap:14px!important;}
#citas .s52-league-logos img:nth-child(1),
#citas .s52-league-logos img:nth-child(2),
#citas .s52-league-logos img:nth-child(3),
#citas .s52-league-logos img:nth-child(4){height:auto!important; max-height:20px!important; max-width:22%!important;}
#citas .s52-brand-logos img{height:auto!important; max-height:21px!important; max-width:17%!important;}
}
/* ==========================================================
D7 — MOBILE S1 / orden final según referencia 2026-09-30
Menú > aliados > ligas > logo campaña > párrafo > fotografía.
Desktop permanece intacto.
========================================================== */
@media (max-width:767px){
#inicio.home{
aspect-ratio:666/1200!important;
min-height:0!important;
height:auto!important;
background-image:url("assets/bannerHomeMobile.jpeg")!important;
background-size:cover!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
}
/* En mobile usamos el bloque completo de marcas + ligas. */
#inicio .home-copy .hero-partner-logos{display:none!important;}
#inicio .hero-sponsors-desktop{
position:absolute!important;
z-index:8!important;
top:12.1%!important;
left:17.5%!important;
bottom:auto!important;
width:65%!important;
max-width:none!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:2.4vw!important;
margin:0!important;
padding:0!important;
pointer-events:none!important;
}
#inicio .hero-sponsors-row{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
#inicio .hero-sponsors-brands{width:100%!important;}
#inicio .hero-sponsors-leagues{width:87%!important;margin:0 auto!important;}
#inicio .hero-sponsors-brands img{
display:block!important;
width:auto!important;
height:auto!important;
max-width:17.5%!important;
max-height:4.2vw!important;
object-fit:contain!important;
flex:0 1 auto!important;
}
#inicio .hero-sponsors-leagues img{
display:block!important;
width:auto!important;
height:auto!important;
max-height:3.8vw!important;
object-fit:contain!important;
flex:0 1 auto!important;
}
#inicio .hero-sponsors-leagues img:nth-child(1){max-width:22%!important;}
#inicio .hero-sponsors-leagues img:nth-child(2){max-width:24%!important;}
#inicio .hero-sponsors-leagues img:nth-child(3){max-width:25%!important;}
#inicio .hero-sponsors-leagues img:nth-child(4){max-width:18%!important;}
#inicio .home-copy .logo{
top:23.0%!important;
left:6.65%!important;
width:86.7%!important;
}
#inicio .home-copy .hero-description{
top:43.8%!important;
left:6.25%!important;
width:87.4%!important;
font-size:clamp(12px,2.62vw,18px)!important;
line-height:1.23!important;
}
}
@media (min-width:350px) and (max-width:399px){
#inicio .hero-sponsors-desktop{top:12.2%!important;left:15.5%!important;width:69%!important;}
#inicio .home-copy .logo{top:23.2%!important;}
#inicio .home-copy .hero-description{top:44.0%!important;font-size:12.2px!important;}
}
@media (min-width:400px) and (max-width:429px){
#inicio .hero-sponsors-desktop{left:16.5%!important;width:67%!important;}
#inicio .home-copy .hero-description{font-size:12.8px!important;}
}
@media (min-width:430px) and (max-width:479px){
#inicio .home-copy .hero-description{font-size:13.5px!important;}
}
/* ==========================================================
D8 — MOBILE S1 / ajuste fino de escala y respiración
Referencia 2026-09-30. Desktop intacto.
========================================================== */
@media (max-width:767px){
#inicio.home{
aspect-ratio:666/1370!important;
min-height:0!important;
height:auto!important;
background-size:100% auto!important;
background-position:center bottom!important;
background-color:#d04467!important;
}
#inicio .hero-sponsors-desktop{
top:12.7%!important;
left:19.5%!important;
width:61%!important;
gap:1.55vw!important;
}
#inicio .hero-sponsors-brands img{
max-width:17%!important;
max-height:3.55vw!important;
}
#inicio .hero-sponsors-leagues{
width:84%!important;
}
#inicio .hero-sponsors-leagues img{
max-height:3.25vw!important;
}
#inicio .home-copy .logo{
top:22.0%!important;
left:7.0%!important;
width:86%!important;
}
#inicio .home-copy .hero-description{
top:46.0%!important;
left:6.6%!important;
width:86.8%!important;
font-size:clamp(11.5px,2.42vw,16px)!important;
line-height:1.28!important;
font-weight:400!important;
}
}
@media (min-width:350px) and (max-width:399px){
#inicio .hero-sponsors-desktop{top:12.7%!important;left:18%!important;width:64%!important;}
#inicio .home-copy .hero-description{font-size:11.7px!important;}
}
@media (min-width:400px) and (max-width:429px){
#inicio .home-copy .hero-description{font-size:12.1px!important;}
}
@media (min-width:430px) and (max-width:479px){
#inicio .home-copy .hero-description{font-size:12.7px!important;}
}
/* ==========================================================
D9 — MOBILE S1 / logos superiores más legibles + menú limpio
Ajuste solicitado 2026-09-30. Desktop intacto.
========================================================== */
@media (max-width:767px){
/* Menú sin pleca, blur, sombra ni fondo añadido. */
#inicio .menu{
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
box-shadow:none!important;
border:0!important;
}
/* Crece ambas filas de logos conservando el orden y el aire del hero. */
#inicio .hero-sponsors-desktop{
top:12.35%!important;
left:14.5%!important;
width:71%!important;
gap:1.85vw!important;
}
#inicio .hero-sponsors-brands img{
max-width:18%!important;
max-height:4.35vw!important;
}
#inicio .hero-sponsors-leagues{
width:88%!important;
}
#inicio .hero-sponsors-leagues img{
max-height:4.05vw!important;
}
#inicio .hero-sponsors-leagues img:nth-child(1){max-width:23%!important;}
#inicio .hero-sponsors-leagues img:nth-child(2){max-width:25%!important;}
#inicio .hero-sponsors-leagues img:nth-child(3){max-width:26%!important;}
#inicio .hero-sponsors-leagues img:nth-child(4){max-width:19%!important;}
}
@media (min-width:350px) and (max-width:399px){
#inicio .hero-sponsors-desktop{left:13%!important;width:74%!important;}
}
/* ==========================================================
D10 — MOBILE S1 / elimina exclusivamente la pleca del menú
No modifica posiciones, escalas, logos, copy ni fotografía.
========================================================== */
@media (max-width:767px){
html body #inicio.home > nav.menu{
background:none!important;
background-color:transparent!important;
background-image:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
box-shadow:none!important;
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
border-left:0!important;
}
html body #inicio.home > nav.menu::before,
html body #inicio.home > nav.menu::after{
content:none!important;
display:none!important;
background:none!important;
}
}
/* ==========================================================
D11 — MOBILE S1 / continuidad real del fondo detrás del menú
ÚNICO CAMBIO: elimina la banda visual superior haciendo que
el área extra del hero continúe el gradiente de la imagen.
No modifica menú, logos, copy, fotografía ni desktop.
========================================================== */
@media (max-width:767px){
#inicio.home{
background-color:#bf4560!important;
background-image:
url("assets/bannerHomeMobile.jpeg"),
linear-gradient(90deg,#b13f58 0%,#bf4560 22%,#c74865 50%,#bf4560 78%,#b4425a 100%)!important;
background-size:100% auto,100% 100%!important;
background-position:center bottom,center top!important;
background-repeat:no-repeat,no-repeat!important;
}
}
/* D15 — ajuste aislado S5.1: fecha de nacimiento + validación 40+ */
.birthdate-field{display:flex;flex-direction:column;gap:5px;color:#777;font:15px "Myriad Pro",Arial,sans-serif}
.birthdate-field>span{padding-left:3px}
.birthdate-field>input{box-sizing:border-box;width:100%;height:66px;border:2px solid #999;border-radius:9px;padding:0 16px;font:20px "Myriad Pro",Arial,sans-serif;outline:none;background:#fff;color:#333}
.birthdate-field>input:focus{border-color:var(--regpink);box-shadow:0 0 0 3px #d5519320}
.age-eligibility-message{min-height:0;margin:-2px 0 0;color:#cf3f58;font:15px/1.25 "Myriad Pro",Arial,sans-serif}
.age-eligibility-message:empty{display:none}
@media(max-width:767px){.birthdate-field{font-size:12px;gap:3px}.birthdate-field>input{height:47px;font-size:15px;border-radius:6px;padding:0 13px}.age-eligibility-message{font-size:12px;margin-top:-1px}}
/* D18 — S4 desktop: tres testimoniales en una sola línea. Mobile intacto. */
@media (min-width:768px){
#testimonios .section4-videos{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:24px!important;
width:100%!important;
}
#testimonios .section4-video{
width:100%!important;
min-width:0!important;
margin:0!important;
}
#testimonios .section4-video img{
width:100%!important;
aspect-ratio:16/9!important;
object-fit:cover!important;
}
#testimonios .section4-arrow{display:none!important;}
}
/* FOOTER + AVISO DE PRIVACIDAD — diseño aprobado + referencia editorial FMF */
.privacy-footer{background:#e53485;color:#fff;min-height:82px;display:flex;align-items:center;justify-content:center;padding:22px 24px;font-family:"Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif}
.privacy-footer-link{appearance:none;border:0;background:transparent;color:#fff;font:600 16px/1.2 "Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px 12px}
.privacy-footer-link:hover,.privacy-footer-link:focus-visible{opacity:.78;outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.privacy-modal{position:fixed;inset:0;z-index:1400;display:none;place-items:center;padding:28px;background:rgba(25,25,25,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.privacy-modal.open{display:grid}
.privacy-dialog{width:min(94vw,1040px);max-height:92vh;display:flex;flex-direction:column;background:#fff;color:#5f5f5f;border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.28);font-family:"Myriad Pro","Myriad Pro Regular","Helvetica Neue",Arial,sans-serif}
.privacy-dialog-head{position:relative;flex:0 0 auto;padding:32px 72px 26px 54px;background:#e53485;color:#fff}
.privacy-kicker{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em}
.privacy-dialog-head h2{margin:0;max-width:820px;font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:clamp(28px,3vw,44px);line-height:1.02;letter-spacing:-.015em;color:#fff}
.privacy-close{position:absolute;right:22px;top:18px;width:42px;height:42px;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;background:transparent;color:#fff;font:300 31px/36px Arial,sans-serif;cursor:pointer}
.privacy-close:hover,.privacy-close:focus-visible{background:#fff;color:#e53485;outline:none}
.privacy-content{overflow-y:auto;padding:42px 54px 52px;font-size:16px;line-height:1.58;scrollbar-gutter:stable}
.privacy-content h3{margin:0 0 28px;color:#e53485;font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:22px;line-height:1.18}
.privacy-content h4{margin:38px 0 12px;color:#e53485;font-family:"Ezra Black","Arial Black",Arial,sans-serif;font-size:20px;line-height:1.15}
.privacy-content p{margin:0 0 17px}
.privacy-content ul,.privacy-content ol{margin:8px 0 20px;padding-left:25px}
.privacy-content li{margin:0 0 10px;padding-left:4px}
.privacy-content a{color:#e53485;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.privacy-alpha{list-style-type:lower-alpha}
.privacy-updated{margin-top:34px!important;color:#e53485}
body.privacy-open{overflow:hidden}
@media(max-width:767px){.privacy-footer{min-height:70px;padding:18px 16px}.privacy-footer-link{font-size:15px}.privacy-modal{padding:12px}.privacy-dialog{width:100%;max-height:94vh;border-radius:14px}.privacy-dialog-head{padding:24px 58px 20px 22px}.privacy-kicker{font-size:10px}.privacy-dialog-head h2{font-size:25px;line-height:1.04}.privacy-close{right:12px;top:12px;width:36px;height:36px;font-size:27px;line-height:31px}.privacy-content{padding:26px 22px 34px;font-size:15px;line-height:1.5}.privacy-content h3{font-size:18px;margin-bottom:22px}.privacy-content h4{font-size:17px;margin-top:30px}.privacy-content ul,.privacy-content ol{padding-left:21px}}
/* ==========================================================
MOBILE HERO — ajuste de escala de aliados según referencia
2026-10-01. Solo mobile; desktop y resto del sitio intactos.
========================================================== */
@media (max-width:767px){
#inicio .hero-sponsors-desktop{
top:12.15%!important;
left:9.5%!important;
width:81%!important;
gap:2.35vw!important;
}
#inicio .hero-sponsors-brands{
width:100%!important;
gap:6.2vw!important;
}
#inicio .hero-sponsors-brands img{
max-width:18.5%!important;
max-height:6.25vw!important;
}
#inicio .hero-sponsors-leagues{
width:91%!important;
gap:4.7vw!important;
}
#inicio .hero-sponsors-leagues img{
max-height:5.45vw!important;
}
#inicio .hero-sponsors-leagues img:nth-child(1){max-width:24%!important;}
#inicio .hero-sponsors-leagues img:nth-child(2){max-width:25%!important;}
#inicio .hero-sponsors-leagues img:nth-child(3){max-width:25%!important;}
#inicio .hero-sponsors-leagues img:nth-child(4){max-width:19%!important;}
}
@media (min-width:350px) and (max-width:399px){
#inicio .hero-sponsors-desktop{left:8%!important;width:84%!important;}
}