/* ============================================================ AquaRagnar · sistema de diseño (tema celeste claro) Paleta tomada de la tela del emblema: celeste, marea, tinta, bronce ============================================================ */ :root{ /* escala de celestes: las secciones alternan entre estos cuatro */ --celeste-1:#e9f5fd; --celeste-2:#d5eaf8; --celeste-3:#bfdef2; --celeste-4:#a6d0ea; --fondo:var(--celeste-2); --fondo-hondo:var(--celeste-3); --panel:rgba(9,26,44,.62); --fiordo:rgba(6,19,33,.72); --marea:#1c5f8f; --hielo:#0f78b4; --hielo-hondo:#0a5f92; --espuma:#f4fbff; --tinta:#06253f; --bronce:#d7a55f; --texto:#bcd6ea; --texto-tenue:#8dafc7; --linea:rgba(255,255,255,.15); /* tema oceánico: texto y superficies sobre el fondo submarino */ --titulo:#eaf6ff; --acento:#6cc6ff; --vidrio:rgba(9,26,44,.62); --vidrio-hondo:rgba(6,19,33,.72); /* barra invisible arriba de todo; al scrollear aparece translúcida en celeste grisáceo oscuro */ --nav-fondo-scroll:rgba(45,71,89,.62); --nav-linea:rgba(255,255,255,.12); --sombra:rgba(0,0,0,.55); /* degradé único para toda la landing (celeste hondo -> casi blanco) */ --grad-a:#7ebae0; --grad-b:#f8fcff; --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --vikinga:"Grenze Gotisch","Metamorphous","Papyrus",serif; --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --ancho:1220px; --radio:14px; --transicion:280ms cubic-bezier(.2,.7,.3,1); } *,*::before,*::after{box-sizing:border-box} /* un solo degradé continuo de punta a punta de la página. Va en para que cubra todo el alto del documento y ninguna sección corte el color. */ html{ scroll-behavior:smooth; min-height:100%; background:#08111c; } body{ margin:0; /* el lecho marino queda anclado al final del documento */ background:url("assets/images/fondo-lecho.webp") center bottom / 115% auto no-repeat; color:var(--texto); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} /* sprite de íconos: sólo define , nunca se dibuja */ .iconos{display:none} a{color:inherit;text-decoration:none} button,input,select{font:inherit;color:inherit} h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase} p{margin:0} address{font-style:normal} :focus-visible{outline:3px solid var(--hielo);outline-offset:3px;border-radius:4px} .contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--bronce); display:flex;align-items:center;gap:.7rem; } .saltar{position:absolute;left:-9999px} .saltar:focus{left:1rem;top:1rem;z-index:100;background:var(--hielo-hondo);color:#fff;padding:.6rem 1rem;border-radius:8px} /* ---------- Barra de navegación ---------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:70; padding:.9rem 0; background:transparent; backdrop-filter:none; transition:background var(--transicion),border-color var(--transicion),backdrop-filter var(--transicion); border-bottom:1px solid transparent; } .nav.is-scrolled{ background:var(--nav-fondo-scroll); backdrop-filter:blur(12px) saturate(130%); border-bottom-color:var(--nav-linea); } .nav__fila{position:relative;display:flex;align-items:center;gap:1rem} .marca{display:inline-flex;align-items:center;flex:none} /* la barra es oscura siempre -> la marca va clara en los dos estados */ .marca__nombre{ font-family:var(--vikinga);font-weight:600;font-size:1.5rem; letter-spacing:.05em;color:#eef6ff; text-shadow:0 2px 14px rgba(0,0,0,.45); } .marca__nombre span{color:#63b4f5} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; border:0;cursor:pointer;border-radius:10px; font-family:var(--display);font-weight:700;text-transform:uppercase; letter-spacing:.05em;line-height:1; transition:transform var(--transicion),box-shadow var(--transicion),background var(--transicion),border-color var(--transicion); } .btn--fantasma{ background:var(--vidrio);backdrop-filter:blur(8px); border:1.5px solid rgba(108,198,255,.45); color:var(--titulo);padding:.72rem 1.1rem;font-size:1rem; } .btn--fantasma:hover{border-color:var(--acento);background:rgba(15,120,180,.35)} .btn--hielo{ background:linear-gradient(180deg,var(--hielo),var(--hielo-hondo)); color:#fff;padding:1.05rem 2rem;font-size:1.28rem; box-shadow:0 14px 30px -14px rgba(10,95,146,.85),inset 0 1px 0 rgba(255,255,255,.28); } .btn--hielo:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(10,95,146,.9)} .btn--hielo:active{transform:translateY(0)} /* ---------- Hero (CAMBIO: tema oscuro sobre la bandera nueva) ---------- */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:min(94vh,880px); display:flex;align-items:center; padding:9.5rem 0 4.5rem; background:#071726; /* carril reservado a la izquierda para el torpedo colgante */ --carril:215px; /* paleta local del hero, tomada de la bandera azul */ --h-blanco:#f3f8fd; --h-azul:#1e86e0; --h-azul-claro:#63b4f5; } /* la bandera entra entera: contain a la derecha, y detrás la misma imagen ampliada y desenfocada para que no queden bordes vacíos */ .hero__emblema{ position:absolute;top:0;right:0;z-index:-2; height:100%;width:auto;max-width:none; /* el borde izquierdo se funde con el fondo desenfocado */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20%); mask-image:linear-gradient(90deg,transparent 0,#000 20%); } .hero::before{ content:"";position:absolute;inset:0;z-index:-3; background:url("assets/images/bandera-fondo.webp") center/cover no-repeat; transform:scale(1.08); } /* velo oscuro a la izquierda (legibilidad) + fundido inferior hacia el menú */ .hero__velo{ position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(90deg, rgba(4,15,26,.92) 0%, rgba(4,15,26,.86) 26%, rgba(4,15,26,.58) 44%, rgba(4,15,26,.16) 60%, transparent 73%), linear-gradient(180deg, rgba(4,15,26,.5) 0%, transparent 20%, transparent 66%, rgba(6,37,63,.85) 100%); } /* El torpedo se arrastra por encima del hero. Como su canvas no recibe clicks, el puntero cae sobre el titular y el navegador empezaba a seleccionar las letras. El hero es puro texto decorativo, así que no se selecciona; los botones y enlaces siguen funcionando igual. */ .hero{-webkit-user-select:none;user-select:none} .hero__emblema{pointer-events:none;-webkit-user-drag:none} /* mientras se arrastra, tampoco se selecciona nada del resto de la página */ body.arrastrando-torpedo{-webkit-user-select:none;user-select:none} /* torpedo 3D colgando de la esquina superior izquierda */ #lanyard{ position:absolute;inset:0;width:100%;height:100%; z-index:60; /* por delante de todo el hero */ pointer-events:none; /* el arrastre se escucha en window, no en el canvas */ } #lanyard[hidden]{display:none} #lanyard canvas{display:block;pointer-events:none;touch-action:none} /* la columna de texto arranca después del carril del torpedo */ .hero__interior{position:relative;width:100%;padding-inline:var(--carril) 1.5rem} .hero__texto{max-width:42rem} /* filete con el yelmo al centro */ .hero__filete{ display:flex;align-items:center;gap:.9rem; max-width:22rem;margin:0 0 1.8rem;color:var(--h-azul-claro); } .hero__filete::before,.hero__filete::after{ content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(99,180,245,.7),transparent); } .hero__filete svg{width:26px;height:26px;flex:none;opacity:.95} /* titular en tres líneas, inclinado, con degradés plata/azul */ .hero__titulo{ font-size:clamp(3rem,8.4vw,6.8rem); line-height:.88;margin:0 0 1.9rem; transform:skewX(-7deg);transform-origin:left bottom; } .hero__titulo .lin{ display:block;width:fit-content; background:linear-gradient(180deg,#ffffff 6%,#d3e2ef 52%,#93a9bd 100%); -webkit-background-clip:text;background-clip:text; color:transparent; filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); } .hero__titulo .lin--azul{ background:linear-gradient(180deg,#54aef4 4%,#1e86e0 52%,#0c5cab 100%); -webkit-background-clip:text;background-clip:text; } /* dos líneas: el nombre grande en mayúsculas y el lema más chico debajo. Van en em, así siguen el clamp del h1 sin tocar márgenes ni anchos. */ .hero__titulo .lin--grande{font-size:1em;text-wrap:balance} .hero__titulo .lin--lema{font-size:.62em;text-transform:none} /* sellos (aguas abiertas · disciplina · equipo) */ .hero__sellos{ display:flex;flex-wrap:wrap;align-items:center; gap:.55rem 1rem;list-style:none;margin:0 0 2.4rem;padding:0; } .hero__sello{display:inline-flex;align-items:center;gap:.55rem;color:var(--h-blanco)} .hero__sello svg{width:25px;height:25px;flex:none;color:var(--h-azul-claro)} .hero__sello b{ font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:.98rem;letter-spacing:.13em; } .hero__sello:not(:last-child)::after{ content:"";width:1px;height:20px;margin-left:1rem; background:rgba(147,190,231,.45); } .hero__bajada{color:var(--texto);font-size:1.06rem;max-width:34rem;text-shadow:0 1px 14px rgba(240,250,255,.85)} .hero__bajada strong{color:var(--tinta);font-weight:700} .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem} /* botón hexagonal rúnico del hero */ .btn--runa{ position:relative;isolation:isolate; background:transparent;border-radius:0; color:var(--h-blanco); padding:1.15rem 2.7rem;font-size:1.16rem;letter-spacing:.15em; clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%); } .btn--runa::before{ content:"";position:absolute;inset:0;z-index:-2; background:linear-gradient(115deg,rgba(122,193,248,.95),rgba(30,134,224,.6)); } .btn--runa::after{ content:"";position:absolute;inset:1.6px;z-index:-1; clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%); background:linear-gradient(180deg,rgba(9,38,66,.9),rgba(5,20,36,.94)); transition:background var(--transicion); } .btn--runa svg{width:18px;height:18px;flex:none;color:var(--h-azul-claro)} .btn--runa:hover{transform:translateY(-2px)} .btn--runa:hover::after{background:linear-gradient(180deg,rgba(19,72,124,.92),rgba(8,34,60,.95))} .btn--runa:active{transform:translateY(0)} /* ---------- Secciones ---------- Cada sección pinta su propia banda del fondo submarino. Los colores de corte coinciden entre secciones vecinas, así el degradé es continuo sin depender del alto de cada una. */ .seccion{position:relative;padding:6.5rem 0} /* cielo tormentoso: la línea del agua cae justo al pie de la sección */ #programas{ /* el cielo cubre la sección entera: arranca arriba y la línea del agua queda al pie, con toda la tormenta de por medio */ padding-bottom:9rem; background: url("assets/images/fondo-cielo.webp") center bottom / cover no-repeat, linear-gradient(180deg,#0b2143,#12305c); } /* al ras de la superficie: rayos de luz y peces bajo el agua */ #nosotros{ background: url("assets/images/fondo-agua.webp") center top / 100% auto no-repeat, linear-gradient(180deg,#102845,#0b1c30); } /* cuerpo de agua: acá el fondo ya es pura profundidad, así que lo habita un cardumen */ #tienda{background:linear-gradient(180deg,#0b1c30,#091524)} /* el cardumen reemplaza al fundido en la zona profunda */ #tienda::before{ height:100%;z-index:0; background:url("assets/icons/cardumen.svg") no-repeat 92% 9%/min(46%,430px) auto; opacity:.9; animation:nadar 64s ease-in-out infinite alternate; } #tienda::before{background-position:88% 12%;background-size:min(46%,420px) auto;opacity:.75} @keyframes nadar{ from{transform:translate3d(-2%,0,0)} to{transform:translate3d(4%,-14px,0)} } @media (prefers-reduced-motion:reduce){ #tienda::before{animation:none} } /* la última sección se apoya sobre el lecho, que pinta el body */ #sumate{background:linear-gradient(180deg,#091524,rgba(8,17,28,0))} /* las secciones ya no pintan color propio; dejan ver el degradé global */ .seccion--claro, .seccion--medio, .seccion--hondo{background:transparent} .seccion__cabecera{max-width:60ch;margin-bottom:3.2rem} .seccion__titulo{font-size:clamp(2.4rem,5vw,3.9rem);color:var(--titulo);margin:1rem 0 1rem} .seccion__texto{color:var(--texto)} /* ADN del equipo: párrafo más grande, más ancho y con un halo oscuro que lo despega de la foto del fondo (que tiene mucho detalle). */ #nosotros .seccion__cabecera{max-width:min(100%,58rem)} #nosotros .seccion__texto{ font-size:clamp(1.08rem,1.45vw,1.32rem); line-height:1.55; font-weight:500; color:#eaf5ff; text-shadow:0 2px 12px rgba(2,10,20,.9),0 0 34px rgba(2,10,20,.7); } /* ---------- Modalidades: grilla de cuatro ---------- Reemplaza al carrusel WebGL. Cada tarjeta lleva a #sumate y deja elegido su grupo en el formulario (interfaz.js). */ .modalidades{ display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem; } .modalidad{ position:relative;overflow:hidden;isolation:isolate; display:flex;align-items:flex-end; /* 16:10 en vez de 4:3: recorta 20% del ancho en vez de 33%, así la foto se muestra más chica y se ve más definida */ aspect-ratio:16 / 10; border-radius:var(--radio); border:1px solid var(--linea); background:var(--vidrio-hondo); box-shadow:0 18px 44px -26px var(--sombra); transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion); } .modalidad:hover, .modalidad:focus-visible{ transform:translateY(-4px); border-color:var(--acento); box-shadow:0 28px 56px -26px rgba(0,0,0,.75); } .modalidad__foto{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;object-position:center 40%; transition:transform 700ms cubic-bezier(.2,.7,.3,1); } .modalidad:hover .modalidad__foto{transform:scale(1.05)} /* velo para que el texto se lea sobre cualquier foto */ .modalidad::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(4,14,26,.15) 0%, rgba(4,14,26,.35) 42%, rgba(4,14,26,.88) 100%); } .modalidad__cuerpo{ display:grid;gap:.5rem;padding:1.6rem 1.5rem 1.5rem;width:100%; } .modalidad__nombre{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:.95;letter-spacing:-.01em; color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.8); } .modalidad__texto{ color:#dbeaf7;font-size:.95rem;line-height:1.45;max-width:44ch; text-shadow:0 1px 10px rgba(0,0,0,.9); } .modalidad__cta{ display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem; font-family:var(--mono);font-size:.7rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--acento); transition:gap var(--transicion); } .modalidad__cta svg{width:14px;height:14px;flex:none} .modalidad:hover .modalidad__cta{gap:.8rem} /* ---------- Galería de eventos (Nosotros) ---------- Una barra de filtros propia de la sección y una grilla de fotos de tres en fondo. Cada tarjeta abre el visor con la foto o el video del evento. */ .galeria{margin-top:3.2rem} /* --- barra de filtros --- */ .galeria__filtros{ display:flex;flex-wrap:wrap;justify-content:center; gap:.55rem;margin-bottom:2.4rem; } .filtro{ border:1px solid var(--linea);border-radius:999px;cursor:pointer; background:var(--vidrio);backdrop-filter:blur(10px); padding:.62rem 1.3rem; font-family:var(--mono);font-size:.74rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--texto); transition:color var(--transicion),border-color var(--transicion), background var(--transicion); } .filtro:hover{color:var(--titulo);border-color:rgba(108,198,255,.5)} .filtro.is-activo{ color:var(--acento);border-color:rgba(108,198,255,.65); background:rgba(108,198,255,.12); } /* el filtro elegido queda entre corchetes */ .filtro.is-activo .filtro__texto::before{content:"[";margin-right:.3em} .filtro.is-activo .filtro__texto::after{content:"]";margin-left:.3em} /* --- grilla de tarjetas --- */ .galeria__grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem} .evento{ position:relative;overflow:hidden;isolation:isolate; padding:0;cursor:pointer;aspect-ratio:16 / 10; border-radius:12px;border:1px solid var(--linea); background:var(--vidrio-hondo); box-shadow:0 18px 44px -30px var(--sombra); transition:transform var(--transicion),border-color var(--transicion), box-shadow var(--transicion); } .evento[hidden]{display:none} .evento__foto{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 620ms cubic-bezier(.2,.7,.3,1); } /* velo de abajo para que el título se lea sobre cualquier foto */ .evento::after{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(3,12,22,0) 40%,rgba(3,12,22,.86)); } .evento__pie{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:.85rem 1rem;text-align:center; } .evento__titulo{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; font-weight:700;font-size:.95rem;line-height:1.25;color:var(--titulo); text-shadow:0 2px 10px rgba(2,10,20,.9); } .evento:hover,.evento:focus-visible{ transform:translateY(-3px);border-color:rgba(108,198,255,.55); box-shadow:0 26px 54px -28px var(--sombra); } .evento:hover .evento__foto{transform:scale(1.06)} /* botón de play de los videos */ .evento__play{ position:absolute;top:50%;left:50%;z-index:2; transform:translate(-50%,-50%); width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(6,19,33,.62);border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(4px);color:#fff; transition:transform var(--transicion),background var(--transicion); } .evento__play svg{width:26px;height:26px;margin-left:2px} .evento:hover .evento__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(15,120,180,.85)} .galeria__vacio{text-align:center;color:var(--texto-tenue);padding:2.5rem 0} /* ---------- Visor (foto o video a pantalla completa) ---------- */ body.sin-scroll{overflow:hidden} .visor{ position:fixed;inset:0;z-index:120; display:flex;align-items:center;justify-content:center; padding:clamp(1rem,4vw,3rem); } .visor[hidden]{display:none} .visor__fondo{ position:absolute;inset:0; background:rgba(3,10,18,.88);backdrop-filter:blur(8px); opacity:0;transition:opacity 260ms ease; } .visor.is-abierto .visor__fondo{opacity:1} .visor__figura{ position:relative;z-index:2;margin:0; display:flex;flex-direction:column;align-items:center;gap:1rem; max-width:min(1100px,100%); } .visor__foto,.visor__video{ max-width:100%;max-height:70vh;border-radius:12px; border:1px solid rgba(255,255,255,.18);background:#050d16; box-shadow:0 30px 70px -30px #000; } .visor__foto[hidden],.visor__video[hidden]{display:none} .visor__pie{text-align:center;max-width:60ch} .visor__cat{ font-family:var(--mono);font-size:.7rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--bronce); } .visor__titulo{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.4rem,3vw,2rem);line-height:1;color:var(--titulo); margin:.35rem 0 .4rem; } .visor__texto{color:var(--texto-tenue);font-size:.95rem} .visor__boton{ position:absolute;z-index:3;width:46px;height:46px;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; border:1px solid var(--linea);background:rgba(6,19,33,.85); color:var(--titulo);font-size:1.7rem;line-height:0; transition:background var(--transicion),transform var(--transicion); } .visor__boton:hover{background:var(--hielo-hondo);transform:scale(1.06)} .visor__cerrar{top:1rem;right:1rem} .visor__ante{left:1rem;top:50%;margin-top:-23px} .visor__sigue{right:1rem;top:50%;margin-top:-23px} /* ---------- Tienda (vitrina de demostración) ---------- */ .tienda__cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem} .tienda__cabecera .seccion__cabecera{margin-bottom:0} /* cuatro destacados reales, uno por categoría */ .vitrina{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .vitrina__item{ display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--linea);border-radius:var(--radio);background:var(--panel); backdrop-filter:blur(10px); box-shadow:0 16px 34px -28px var(--sombra); transition:transform var(--transicion),border-color var(--transicion),box-shadow var(--transicion); } .vitrina__item:hover{transform:translateY(-5px);border-color:var(--hielo);box-shadow:0 26px 44px -26px rgba(10,95,146,.5)} /* la vitrina muestra la foto real de cada producto */ .vitrina__arte{ aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--linea); background:radial-gradient(circle at 50% 40%,rgba(30,70,110,.55),rgba(6,19,33,.8) 72%); } .vitrina__foto{ width:100%;height:100%;object-fit:cover;display:block; transition:transform var(--transicion); } .vitrina__item:hover .vitrina__foto{transform:scale(1.05)} .vitrina__cuerpo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1} .vitrina__cat{font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronce)} .vitrina__nombre{font-size:1.28rem;color:var(--titulo);line-height:1.05} .vitrina__precio{font-family:var(--display);font-size:1.6rem;color:var(--acento);margin-top:auto;padding-top:.6rem} .tienda__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;margin-top:2.5rem} .tienda__nota{font-size:.86rem;color:var(--texto-tenue);max-width:46ch} /* ---------- Formulario ---------- */ .cierre{position:relative;padding:6.5rem 0 7rem;background:transparent;overflow:hidden} .cierre__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start} .cierre__texto{margin-top:1rem} .cierre__contacto{margin-top:2rem} .hero__nota{font-size:.86rem;color:var(--texto-tenue)} .hero__nota b{color:var(--acento);font-weight:700} .formulario{display:grid;gap:1.1rem;padding:2rem;border-radius:var(--radio);background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--linea);box-shadow:0 20px 44px -30px var(--sombra)} .campo{display:grid;gap:.45rem} .campo label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-tenue)} .campo input,.campo select{ width:100%;padding:.85rem 1rem;border-radius:10px; background:var(--fiordo);border:1.5px solid var(--linea);color:var(--titulo); transition:border-color var(--transicion),box-shadow var(--transicion); } .campo input::placeholder{color:#6f8ea6} .campo input:focus,.campo select:focus{outline:none;border-color:var(--hielo);box-shadow:0 0 0 4px rgba(15,120,180,.16)} .campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236cc6ff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.4rem} .campo.tiene-error input,.campo.tiene-error select{border-color:#ff8a7a} .error{font-size:.8rem;color:#ff8a7a;min-height:1.1em} .formulario .btn--hielo{width:100%;margin-top:.4rem} .form-nota{font-size:.8rem;color:var(--texto-tenue);text-align:center} .exito{ display:none;padding:1.1rem 1.2rem;border-radius:10px; border:1px solid var(--acento);background:rgba(15,120,180,.22); color:var(--titulo);font-size:.95rem; } .exito.visible{display:block} /* ---------- Pie ---------- Se apoya sobre los corales: un velo oscuro mantiene legible el texto sin tapar la foto del lecho marino. */ .pie{ background:linear-gradient(180deg,rgba(5,14,24,.18),rgba(5,14,24,.72) 42%,rgba(5,14,24,.88)); padding:4.5rem 0 2rem; } .pie__col a,.pie__lema,.pie__base{text-shadow:0 1px 8px rgba(0,0,0,.75)} .pie__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem} .pie__col h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--bronce);text-transform:uppercase;font-weight:600;margin-bottom:1rem} .pie__col ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .pie__col a{font-size:.92rem;color:var(--texto);transition:color var(--transicion)} .pie__col a:hover{color:var(--acento)} .pie__lema{color:var(--texto-tenue);font-size:.92rem;max-width:34ch;margin-top:1rem} .pie__base{ margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linea); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.82rem;color:var(--texto-tenue); } /* ---------- Revelado al hacer scroll ---------- */ .revelar{opacity:0;transform:translateY(26px);transition:opacity 700ms ease,transform 700ms cubic-bezier(.2,.7,.3,1)} .revelar.visible{opacity:1;transform:none} /* ---------- Responsive ---------- */ @media (max-width:1240px){ .hero{--carril:200px} } @media (max-width:1100px){ .hero{--carril:0px} .hero__interior{padding-inline:clamp(1.25rem,4vw,2.5rem) 1.5rem} #lanyard{display:none} } @media (max-width:1040px){ .vitrina{grid-template-columns:repeat(2,1fr)} .pie__grid{grid-template-columns:1fr 1fr} .seccion{padding:5.5rem 0} #programas{padding-bottom:7rem} } /* ---------- Tablet y móvil apaisado ---------- */ @media (max-width:900px){ /* las modalidades se apilan: la tarjeta crece con su texto en vez de quedar recortada, y el cuerpo empuja hacia abajo para que la foto se siga viendo arriba */ .modalidades{grid-template-columns:1fr;gap:.9rem} .modalidad{aspect-ratio:auto;min-height:clamp(16rem,54vw,21rem)} .modalidad__cuerpo{padding:5rem 1.25rem 1.35rem} .modalidad::before{ background:linear-gradient(180deg, rgba(4,14,26,.12) 0%, rgba(4,14,26,.42) 38%, rgba(4,14,26,.92) 100%); } /* la galería pasa a dos columnas */ .galeria__grilla{grid-template-columns:repeat(2,1fr);gap:.9rem} .galeria{margin-top:2.4rem} /* en pantallas angostas las bandas del fondo se amplían para que el cielo, los rayos y el lecho sigan leyéndose */ #programas{background-size:cover,auto} #nosotros{background-size:250% auto,auto} body{background-size:300% auto} .hero{min-height:auto;padding:7rem 0 3.5rem;align-items:flex-start} /* en móvil el velo pasa a ser vertical */ .hero__velo{ background:linear-gradient(180deg,rgba(4,15,26,.88),rgba(4,15,26,.68) 45%,rgba(6,37,63,.94)); } .hero__texto{max-width:100%} .hero__titulo{font-size:clamp(2.9rem,10vw,4.6rem)} /* en pantallas angostas la bandera entra entera, centrada detrás del texto */ .hero__emblema{ inset:0;width:100%;height:100%; object-fit:contain;object-position:center 35%; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); } .cierre{padding:5rem 0 5.5rem} .cierre__grid{grid-template-columns:1fr;gap:2.5rem} .tienda__cabecera{gap:1.2rem;margin-bottom:2rem} /* enlaces del pie con área de toque cómoda */ .pie__col ul{gap:.15rem} .pie__col a{display:inline-block;padding:.45rem 0} .seccion__cabecera{margin-bottom:2.4rem} #nosotros .seccion__texto{font-size:1.06rem;line-height:1.5} } /* ---------- Móvil ---------- */ @media (max-width:620px){ body{font-size:16px} .seccion{padding:4rem 0} #programas{padding-bottom:5.5rem} .contenedor{width:min(100% - 1.8rem,var(--ancho))} .seccion__cabecera{margin-bottom:1.9rem} .seccion__titulo{font-size:clamp(2.1rem,9vw,3rem)} /* --- hero --- */ .hero{padding:6rem 0 3rem} .hero__titulo{font-size:clamp(2.3rem,11vw,3.4rem)} .hero__filete{margin-bottom:1rem} .hero__sellos{gap:.45rem .75rem} .hero__sello b{font-size:.8rem;letter-spacing:.08em} /* sin separadores cuando los sellos se apilan */ .hero__sello:not(:last-child)::after{display:none} .hero__cta{width:100%} .hero__cta .btn--runa{ width:100%;padding-inline:1.2rem; font-size:.88rem;letter-spacing:.06em;white-space:nowrap; } /* --- modalidades --- */ .modalidad{min-height:clamp(17rem,84vw,23rem)} .modalidad__cuerpo{padding:4.5rem 1.1rem 1.2rem} .modalidad__nombre{font-size:clamp(1.5rem,7.5vw,2.1rem)} .modalidad__texto{font-size:.9rem} /* --- galería: dos columnas chicas y filtros deslizables --- */ .galeria__grilla{grid-template-columns:repeat(2,1fr);gap:.6rem} /* algo más de alto que en escritorio: con la tarjeta angosta, 4:3 deja ver la foto aunque el título ocupe dos líneas */ .evento{aspect-ratio:4 / 3;border-radius:10px} .evento__pie{padding:.5rem .45rem} .evento__titulo{font-size:.76rem;line-height:1.2} /* el play sube un poco para no chocar con los títulos de dos líneas */ .evento__play{width:42px;height:42px;top:42%} .evento__play svg{width:20px;height:20px} .galeria__filtros{ flex-wrap:nowrap;justify-content:flex-start; overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:-.9rem;padding:0 .9rem .5rem; margin-bottom:1.5rem; } .galeria__filtros::-webkit-scrollbar{display:none} .filtro{flex:none;padding:.55rem 1rem;font-size:.68rem;letter-spacing:.12em} /* --- visor --- */ .visor{padding:.8rem} .visor__foto,.visor__video{max-height:58vh} .visor__boton{width:40px;height:40px} .visor__cerrar{top:.5rem;right:.5rem} .visor__ante{left:.4rem;margin-top:-20px} .visor__sigue{right:.4rem;margin-top:-20px} .visor__titulo{font-size:1.3rem} .visor__texto{font-size:.88rem} /* --- tienda: dos productos por fila --- */ .vitrina{grid-template-columns:repeat(2,1fr);gap:.7rem} .vitrina__cuerpo{padding:.8rem .85rem 1rem} .vitrina__nombre{font-size:1rem;line-height:1.2} .vitrina__precio{font-size:1.25rem;padding-top:.4rem} .vitrina__cat{font-size:.6rem;letter-spacing:.14em} .tienda__pie{margin-top:1.8rem;gap:.9rem} .tienda__pie .btn{width:100%;justify-content:center} /* --- formulario --- */ .formulario{padding:1.4rem 1.2rem} .cierre{padding:4rem 0 4.5rem} /* --- pie: los enlaces necesitan área de toque --- */ .pie{padding:3.5rem 0 1.5rem} .pie__grid{grid-template-columns:1fr 1fr;gap:1.6rem} .pie__base{margin-top:2rem;font-size:.78rem} } /* ---------- Móvil angosto ---------- */ @media (max-width:380px){ .evento__titulo{font-size:.71rem} .vitrina__nombre{font-size:.94rem} .hero__cta .btn--runa{font-size:.8rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} html{scroll-behavior:auto} .revelar{opacity:1;transform:none} }