/* ============================================================================ DISEÑO DEL SITIO: colores, tamaños, espacios, animaciones. ============================================================================ Acá NO hay textos. Los textos están en la carpeta 0-contenido/. Los colores y medidas base están en :root, justo abajo. ========================================================================== */ :root{ --paper:#f4efe5;--paper-2:#ece4d5;--card:#fffefb; --navy:#171640;--navy-2:#23224f;--navy-deep:#0f0b28; --red:#c8372b;--red-deep:#a62b21;--rose:#c0585a; --ink:#1a1940;--ink-soft:#6b6885;--line:rgba(23,22,64,.12);--line-lt:rgba(246,242,234,.15); --staff:rgba(23,22,64,.14); /* Escala de radios: 4 pasos, no 13 sueltos */ --r-xs:4px; --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:100px; /* Tres elevaciones: superficie apoyada, levantada y flotante */ --sh-1:0 1px 2px rgba(23,22,64,.05),0 6px 16px -8px rgba(23,22,64,.20); --sh-2:0 2px 4px rgba(23,22,64,.05),0 16px 30px -16px rgba(23,22,64,.30); --sh-3:0 4px 8px rgba(23,22,64,.06),0 30px 56px -28px rgba(15,11,40,.40); /* Una sola curva y pocos tiempos para todo el sitio (los mismos del buscador de canciones): arranca rápido y llega suave. Todo lo que se mueve dura menos de medio segundo, salvo los fundidos de fotos. */ --ease:cubic-bezier(.22,.9,.3,1); --t-press:110ms; --t-base:180ms; --t-view:260ms; --t-slow:340ms; --display:'Headliner No. 45','Anton','Arial Narrow',sans-serif; /* real: Headliner No.45 */ --sans:'Futura','Jost',system-ui,-apple-system,sans-serif; /* real: Futura */ /* Fondo de la barra superior. Se redefine en modo oscuro (mas abajo) para que la nav Y la franja de estado del telefono se adapten al tema. */ --nav-bg:#f4efe5; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.62;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} .container{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,44px)} /* ================= BARRA DE ARRIBA ================= Va FIJA arriba. Todo lo que se mueve se anima SOLO con transform y opacity: el contenido de la página nunca se corre. · SOBRE EL VIDEO de la portada es transparente. Su fondo se llena de a poco CON EL SCROLL, cuando el texto del video llega a la barra. Lo lleva --f (0 transparente, 1 con fondo), que 9-codigo/navegacion.js pone SOLO en la barra y la burbuja (no en toda la página: cambiarla en toda la página obligaba a recalcular todo en cada cuadro). · En el TELÉFONO el fondo de la barra ES la burbuja: una sola pieza que al bajar se encoge hasta volverse la burbuja con la lupa y el menú, y al subir se estira de vuelta. Como es una sola pieza, no hay relevo ni salto entre dos fondos. · SIN desenfoque (backdrop-filter): recalcular un desenfoque sobre algo que cambia de tamaño es lo que más traba en un iPhone. El fondo es un color liso y OPACO: nada de la página se trasluce por detrás. · EL FONDO VA EN LA BARRA MISMA (background-color de .nav), no en una capa aparte. Safari (iPhone y iPad) pinta la franja de la hora y su propia barra con el color del elemento fijo que toca el borde de arriba; si ese elemento no tiene color, deja ver la página borrosa por encima del menú. Además la barra pinta 200 px hacia arriba (::before), por si el navegador muestra página más allá del borde. */ :root{--f:1;--t-nav:420ms;--ease-nav:cubic-bezier(.32,.72,0,1); --nav-vidrio:#f4efe5;--nav-tinta:var(--navy);--nav-suave:var(--ink-soft)} html{scroll-padding-top:calc(var(--nav-h,70px) + 8px)} main{padding-top:var(--nav-h,70px)} /* en la portada el video pasa POR DEBAJO de la barra */ body.en-inicio main{padding-top:0} .nav{position:fixed;top:0;left:0;right:0;z-index:60; /* la barra pinta su fondo hacia el infinito superior: cubre el area de la hora/bateria de forma uniforme en iPhone con notch / isla dinamica */ padding-top:env(safe-area-inset-top,0px); /* el fondo y la línea de abajo: cuánto se ven lo lleva el scroll (--f) */ background-color:color-mix(in srgb,var(--nav-vidrio) calc(var(--f) * 100%),transparent); box-shadow:0 1px 0 color-mix(in srgb,var(--line) calc(var(--f) * 100%),transparent)} /* el mismo fondo, hacia arriba del borde de la ventana */ .nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:200px;pointer-events:none; background-color:inherit} .nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:5px clamp(18px,4vw,36px); padding-left:max(clamp(18px,4vw,36px),env(safe-area-inset-left)); padding-right:max(clamp(18px,4vw,36px),env(safe-area-inset-right)); /* de burbuja a barra: el logo y los íconos llegan JUNTO con el fondo */ transition:opacity .26s cubic-bezier(.2,.6,.3,1),transform .36s var(--ease-nav)} .brand{position:relative;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);cursor:pointer} /* el alto del logo: 72 px en el teléfono, hasta 92 px en pantallas anchas */ .brand .logo{height:clamp(72px,9vw,92px);width:auto;display:block;margin:6px 0} /* los dos logos van uno encima del otro y se funden con el scroll */ .brand .logo-claro{opacity:var(--f)} .brand .logo-dark{position:absolute;left:0;top:0;opacity:calc(1 - var(--f))} .nav-links{margin-left:auto;display:flex;align-items:center;gap:3px} .nav-links a{font-family:var(--sans);font-size:.84375rem;font-weight:500;text-decoration:none;padding:8px 13px;border-radius:var(--r-sm);cursor:pointer;transition:color .15s;position:relative; color:color-mix(in srgb,var(--nav-suave) calc(var(--f) * 100%),rgba(255,255,255,.88))} .nav-links a:hover,.nav-links a.active{color:color-mix(in srgb,var(--nav-tinta) calc(var(--f) * 100%),#fff)} .nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:1px;height:2px;background:var(--red);border-radius:var(--r-xs)} .nav-links a.nav-cta{background:var(--red);color:#fff;padding:9px 18px;margin-left:8px;border-radius:var(--r-sm)} .nav-links a.nav-cta:hover{background:var(--red-deep);color:#fff} .nav-links a.nav-cta.active::after{display:none} /* botones-ícono (lupa y menú), en la barra y en la burbuja */ .nav-ic{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;padding:0; border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;text-decoration:none; color:color-mix(in srgb,var(--nav-tinta) calc(var(--f) * 100%),#fff); transition:background-color var(--t-base) var(--ease),transform var(--t-press) var(--ease)} .nav-ic svg{width:25px;height:25px} .nav-ic span{display:grid} .nav-ic:hover{background:color-mix(in srgb,var(--nav-tinta) 7%,transparent)} .nav-ic:active{transform:scale(.9)} .nav-lupa{margin-left:4px} .nav-toggle{display:none} /* ☰ y ✕ van uno encima del otro y se funden con un leve giro */ .nav-toggle>span{grid-area:1/1;transition:opacity .2s ease,transform .32s var(--ease-nav)} .nav-toggle .ic-cerrar{opacity:0;transform:rotate(-60deg) scale(.7)} .nav-toggle.open .ic-abrir{opacity:0;transform:rotate(60deg) scale(.7)} .nav-toggle.open .ic-cerrar{opacity:1;transform:none} .nav-toggle.open{background:var(--navy);color:var(--paper)} /* CAMBIOS QUE NO VIENEN DEL SCROLL (abrir o cerrar el menú, cambiar de pestaña): el fondo, el logo y los íconos se FUNDEN en vez de saltar. Con el scroll no hace falta: ahí van pegados al dedo. navegacion.js pone .barra-suave un momento. */ .barra-suave .nav{transition:background-color .3s ease,box-shadow .3s ease} .barra-suave .brand .logo{transition:opacity .3s ease} .barra-suave .nav-ic{transition:color .3s ease,background-color var(--t-base) var(--ease),transform var(--t-press) var(--ease)} .barra-suave .nav-links a{transition:color .3s ease} /* --- la burbuja (solo teléfono) --- */ .pildora{display:none} @media(max-width:880px){ /* Mientras es burbuja, y mientras se estira de vuelta (.nav-volviendo, la pone navegacion.js), el fondo lo pone la burbuja estirada al tamaño de la barra. Ya de barra, el de .nav queda encima, idéntico: el relevo no se ve. Sin transición: va y vuelve de golpe, tapado por la burbuja. */ .nav{box-shadow:none} .nav-pildora .nav,.nav-volviendo .nav{background-color:transparent;transition:none} .pildora{display:flex;position:fixed;z-index:59;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%; transform:translateX(-50%);align-items:center;gap:6px;padding:4px 8px;pointer-events:none;cursor:pointer} /* el fondo: en barra mide exacto la barra (--b-sx, --b-sy, --b-dy, los mide navegacion.js) y su opacidad la lleva el scroll; en burbuja, su forma */ .pildora::before,.pildora::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:0; transform:translateY(var(--b-dy,0px)) scale(var(--b-sx,4),var(--b-sy,1.3)); /* hacia barra: las esquinas se enderezan RÁPIDO (si no, el fondo llega a su lugar con las puntas todavía redondas) */ transition:transform var(--t-nav) var(--ease-nav),border-radius .14s ease-out,opacity .2s ease} /* su opacidad la maneja el scroll directo: sin transición, va con el dedo */ .pildora::before{z-index:-1;background:var(--nav-vidrio);opacity:var(--f);will-change:transform; transition:transform var(--t-nav) var(--ease-nav),border-radius .14s ease-out} .barra-suave .pildora::before{transition:transform var(--t-nav) var(--ease-nav),border-radius .14s ease-out,opacity .3s ease} /* la sombra y el borde van en otra capa, que solo se ve en burbuja */ .pildora::after{z-index:-2;opacity:0;will-change:transform,opacity; box-shadow:0 0 0 1px var(--line),0 12px 30px -14px rgba(15,11,40,.45)} .nav-pildora .pildora{pointer-events:auto} /* hacia burbuja: se redondea en la primera parte del encogimiento */ .nav-pildora .pildora::before,.nav-pildora .pildora::after{transform:none;border-radius:28px} .nav-pildora .pildora::before{opacity:1; transition:transform var(--t-nav) var(--ease-nav),border-radius .2s ease-out} .nav-pildora .pildora::after{opacity:1; transition:transform var(--t-nav) var(--ease-nav),border-radius .2s ease-out,opacity .24s ease .1s} /* íconos de la burbuja: entran MIENTRAS se encoge, no después */ .pildora .nav-ic{opacity:0;transform:scale(.85);will-change:opacity,transform; transition:opacity .12s ease,transform .24s var(--ease-nav)} .nav-pildora .pildora .nav-ic{opacity:1;transform:none;transition:opacity .2s ease .1s,transform .36s var(--ease-nav) .06s} /* el contenido de la barra se va rápido hacia arriba */ .nav-pildora .nav{pointer-events:none} .nav-inner{will-change:opacity,transform} .nav-pildora .nav-inner{opacity:0;transform:translateY(-8px);transition:opacity .14s ease,transform .36s var(--ease-nav)} /* los saltos internos ("Conócenos ↓") quedan bajo la burbuja, no bajo una barra que al bajar ya no está */ html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)} } @media(max-width:880px){ .nav-lupa{margin-left:auto} .nav-toggle{display:inline-grid} /* El menú se abre SOLO con opacidad y desplazamiento, que los hace la tarjeta de video sin recalcular la página. */ .nav-links{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:2px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);padding:10px 18px 18px; max-height:min(78vh,620px);overflow-y:auto;overscroll-behavior:contain; opacity:0;transform:translateY(-8px);visibility:hidden;pointer-events:none; transition:opacity .18s ease,transform var(--t-view) var(--ease),visibility 0s linear var(--t-view)} .nav-links.open{opacity:1;transform:none;visibility:visible;pointer-events:auto; transition:opacity .2s ease,transform var(--t-view) var(--ease),visibility 0s} .nav-links a{padding:12px}.nav-links a.active::after{display:none}.nav-links a.active{background:rgba(23,22,64,.05)} .nav-links a.nav-cta{margin-left:0;text-align:center;margin-top:6px} } /* views + sections */ .view{display:none} .view.active{display:block} /* CAMBIO DE PESTAÑA: la pestaña entera sube 10px y aparece, en 260ms. Antes cada bloque entraba por separado con retrasos (hasta 0,65 s en total) y se sentía lento. Ahora es un solo movimiento, igual que en el buscador de canciones. La clase 'entrando' la pone navegacion.js solo al CAMBIAR de pestaña: al abrir el sitio la portada tiene su propia entrada. */ .view.entrando{animation:vistaIn var(--t-view) var(--ease) both} /* En "Material" el buscador ocupa toda la pantalla bajo el menu: se oculta el pie para que no quede nada debajo peleando con el scroll interno del iframe. */ body.view-cancionero footer{display:none} @keyframes vistaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .sec{padding:clamp(72px,10vw,132px) 0} .sec--tint{background:var(--paper-2)} /* Sección que abre con una foto a sangre detrás del texto. Mismo lenguaje que la portada: foto + velo oscuro + texto claro, para que se lea como parte del sitio y no como un parche. */ .sec--photo{position:relative;overflow:hidden;background:var(--navy-deep); min-height:clamp(330px,46vh,540px);display:flex;align-items:center} /* LA BANDA QUE ABRE CADA PÁGINA (Novedades, Nosotros, Escúchanos, Únete) mide lo mismo en todas, en computador. Antes la de Nosotros quedaba más alta que las demás, solo porque trae más texto y un botón. */ @media(min-width:701px){ .view>.sec--photo:first-child:not(.sec--dona):not(.sec--contacto){ min-height:clamp(590px,72vh,700px);padding-block:clamp(56px,7vw,88px)} } /* EL BORDE DE ABAJO DE ESA BANDA ES UNA ONDA, no una línea recta: el crema de la página "sube" sobre la foto en dos curvas suaves (una más tenue detrás). Sin rojo ni dibujos: suaviza el paso de la foto al contenido sin sumar otro adorno. El color va escrito dentro del dibujo, así que hay una versión para el modo claro y otra para el oscuro. */ .view>.sec--photo:first-child:not(.sec--dona):not(.sec--contacto)::after{content:"";position:absolute;z-index:1; left:0;right:0;bottom:-1px;height:clamp(30px,4.6vw,64px);pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C200 4 420 2 640 22S1040 46 1200 14V60Z' fill='%23f4efe5' fill-opacity='.38'/%3E%3Cpath d='M0 60V42C220 16 430 18 650 36S1030 54 1200 30V60Z' fill='%23f4efe5'/%3E%3C/svg%3E") center / 100% 100% no-repeat} /* en el teléfono la banda deja más aire abajo, para que la onda no tape el texto ni el botón */ @media(max-width:700px){ .view>.sec--photo.sec--photo:first-child:not(.sec--dona):not(.sec--contacto){padding-bottom:clamp(72px,19vw,104px)} } @media (prefers-color-scheme:dark){ .view>.sec--photo:first-child:not(.sec--dona):not(.sec--contacto)::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C200 4 420 2 640 22S1040 46 1200 14V60Z' fill='%230e1024' fill-opacity='.38'/%3E%3Cpath d='M0 60V42C220 16 430 18 650 36S1030 54 1200 30V60Z' fill='%230e1024'/%3E%3C/svg%3E")} } .sec--photo>.secphoto{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 57%} /* Velo en diagonal: carga el peso donde va el texto y deja limpias y cálidas las caras de la derecha. Un velo parejo apagaba toda la foto. */ .sec--photo>.secphoto-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,rgba(15,11,40,.86) 0%,rgba(15,11,40,.66) 36%, rgba(15,11,40,.26) 72%,rgba(15,11,40,.16) 100%)} .sec--photo>.container{position:relative;z-index:1;width:100%} .sec--photo .eyebrow{color:rgba(246,242,234,.92)} .sec--photo .eyebrow::before{background:var(--rose)} .sec--photo .h2{color:#fff;text-shadow:0 2px 34px rgba(15,11,40,.45)} .sec--photo .h2{max-width:16ch} .sec--photo .lede{color:rgba(246,242,234,.9);max-width:46ch} /* La polera es un plano cerrado y el logo es lo único con interés: se encuadra sobre él y la banda se mantiene baja para no recortarlo. */ .sec--voluntario{min-height:clamp(280px,34vh,400px)} .sec--voluntario>.secphoto{object-position:56% 46%} /* QUIÉNES SOMOS (página Nosotros). Lleva texto en LAS DOS columnas, así que el velo no puede ir en diagonal como las otras bandas: va parejo, un poco más cargado al centro, que es la franja donde cae el texto. */ .sec--quienes>.secphoto{object-position:center center} .sec--quienes>.secphoto-veil{ background:linear-gradient(to bottom,rgba(15,11,40,.7) 0%,rgba(15,11,40,.8) 42%, rgba(15,11,40,.8) 62%,rgba(15,11,40,.72) 100%)} .sec--quienes .h2{max-width:18ch} /* el resto del contenido de la sección también pasa a claro */ .sec--photo .obj li{color:rgba(246,242,234,.92)} .sec--photo .btn.outline{color:#fff;border-color:rgba(246,242,234,.5)} .sec--photo .btn.outline:hover{background:rgba(246,242,234,.14);border-color:#fff} /* DONA: la foto va de fondo de toda la página. Lleva texto a la izquierda y la ficha de transferencia a la derecha, así que el velo es parejo y bastante cargado: la foto se adivina, pero lo que manda es poder leer los datos. La ficha sigue siendo una tarjeta clara encima. */ .sec--dona{align-items:flex-start;min-height:0} .sec--dona>.secphoto{object-position:center 55%} .sec--dona>.secphoto-veil{ background:linear-gradient(100deg,rgba(15,11,40,.86) 0%,rgba(15,11,40,.76) 45%,rgba(15,11,40,.62) 100%)} .sec--dona .h2{max-width:18ch} .sec--dona .give{box-shadow:var(--sh-3)} /* ESCÚCHANOS: la foto ya es de noche y oscura, así que el velo es más liviano que en las otras, y se encuadra arriba para no cortar las caras. */ .sec--escuchanos>.secphoto{object-position:center 30%} .sec--escuchanos>.secphoto-veil{ background:linear-gradient(100deg,rgba(15,11,40,.78) 0%,rgba(15,11,40,.5) 40%, rgba(15,11,40,.12) 75%,rgba(15,11,40,0) 100%)} /* NOSOTROS: foto de día y clara, con las caras arriba al centro. El velo va como en las otras bandas (cargado donde está el texto) y se encuadra alto para no cortar cabezas. */ .sec--nosotros>.secphoto{object-position:center 12%} .sec--nosotros>.secphoto-veil{ background:linear-gradient(100deg,rgba(15,11,40,.9) 0%,rgba(15,11,40,.8) 42%, rgba(15,11,40,.4) 72%,rgba(15,11,40,.22) 100%)} /* NOVEDADES: el coro frente a la Catedral, de día. Las caras quedan al centro y a la derecha; el texto, a la izquierda sobre el velo. */ .sec--novedades>.secphoto{object-position:center 38%} .sec--novedades>.secphoto-veil{ background:linear-gradient(100deg,rgba(15,11,40,.9) 0%,rgba(15,11,40,.74) 40%, rgba(15,11,40,.3) 74%,rgba(15,11,40,.18) 100%)} /* CONTACTO: foto aérea de día, muy luminosa. Igual que Dona: texto a la izquierda y una tarjeta clara (el formulario) a la derecha, así que el velo es fuerte a la izquierda y se aclara detrás de la tarjeta. */ .sec--contacto{align-items:flex-start;min-height:0} .sec--contacto>.secphoto{object-position:center 50%} .sec--contacto>.secphoto-veil{ background:linear-gradient(100deg,rgba(15,11,40,.88) 0%,rgba(15,11,40,.74) 42%,rgba(15,11,40,.42) 70%,rgba(15,11,40,.34) 100%)} .sec--contacto .cform{box-shadow:var(--sh-3)} /* sobre la foto, el correo y los íconos pasan a claro */ .sec--contacto .correo-contacto{color:#fff!important;text-decoration:underline!important;text-decoration-color:var(--rose)!important;text-underline-offset:4px} .sec--contacto .soc2 a{color:#fff;border-color:rgba(246,242,234,.45)} .sec--contacto .soc2 a:hover{color:#fff;border-color:#fff;background:rgba(246,242,234,.14)} /* sección que sigue a una banda de foto: no necesita tanto aire arriba */ .sec--pegada{padding-top:clamp(40px,5vw,64px)} .sec--pegada .plat-group:first-child .group-h{margin-top:0} /* la ficha es clara: su antetítulo vuelve al rojo normal, no al claro de las fotos */ .sec--dona .give .eyebrow{color:var(--red)} .sec--dona .give .eyebrow::before{background:var(--red)} /* En teléfono la banda es casi cuadrada: el texto se va arriba, sobre la pared blanca, y el velo se carga arriba en vez de al costado. */ @media(max-width:700px){ .sec--photo{align-items:flex-start;padding-block:clamp(34px,8vw,52px)} .sec--photo>.secphoto{object-position:center 62%} .sec--voluntario{min-height:clamp(260px,40vh,320px)} .sec--voluntario>.secphoto{object-position:56% 46%} .sec--photo>.secphoto-veil{ background:linear-gradient(180deg,rgba(15,11,40,.86) 0%,rgba(15,11,40,.66) 42%,rgba(15,11,40,.34) 100%)} .sec--photo .h2,.sec--photo .lede{max-width:none} /* apiladas ocupan el doble de alto, así que el velo se refuerza parejo */ .sec--quienes{min-height:0} .sec--quienes>.secphoto-veil{ background:linear-gradient(to bottom,rgba(15,11,40,.76),rgba(15,11,40,.84) 50%,rgba(15,11,40,.8))} .sec--quienes .split>div:last-child .eyebrow{margin-top:8px} /* apilada es muy alta: velo parejo para que todo se lea */ .sec--escuchanos>.secphoto{object-position:62% center} .sec--nosotros>.secphoto{object-position:center 35%} .sec--nosotros>.secphoto-veil{ background:linear-gradient(180deg,rgba(15,11,40,.88) 0%,rgba(15,11,40,.8) 65%,rgba(15,11,40,.6) 100%)} .sec--escuchanos>.secphoto-veil{ background:linear-gradient(180deg,rgba(15,11,40,.8) 0%,rgba(15,11,40,.45) 45%,rgba(15,11,40,.08) 100%)} .sec--contacto>.secphoto-veil{ background:linear-gradient(180deg,rgba(15,11,40,.84),rgba(15,11,40,.74) 55%,rgba(15,11,40,.8))} .sec--dona>.secphoto-veil{ background:linear-gradient(180deg,rgba(15,11,40,.84),rgba(15,11,40,.74) 55%,rgba(15,11,40,.8))} } .eyebrow{font-family:var(--sans);font-size:.71875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:8px} .eyebrow::before{content:"";width:18px;height:2px;background:var(--red);border-radius:var(--r-xs);flex:0 0 auto} h2.h2{font-family:var(--display);font-weight:400;font-size:clamp(33px,5.2vw,60px);line-height:1.0;letter-spacing:.018em;margin:0 0 20px;color:var(--navy)} .lede{font-size:clamp(16.5px,2.05vw,21px);line-height:1.55;color:var(--ink-soft);max-width:52ch;margin:0} .btn{font-family:var(--sans);font-weight:600;font-size:.90625rem;color:var(--paper);background:var(--red);padding:13px 24px;border-radius:var(--r-sm);text-decoration:none;display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;transition:transform .16s,background .16s,color .16s} .btn:hover{background:var(--red-deep);transform:translateY(-1px)} .btn.outline{background:transparent;color:var(--navy);border:1.5px solid var(--line);padding:11.5px 22px} .btn.outline:hover{border-color:var(--navy);background:transparent;transform:translateY(-1px)} .btn.light{background:var(--paper);color:var(--navy)}.btn.light:hover{background:#fff} .btn.ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line-lt)}.btn.ghost:hover{background:var(--paper);color:var(--navy)} .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} /* split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start} @media(max-width:760px){.split{grid-template-columns:1fr;gap:34px}} .obj{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:16px} .obj li{position:relative;padding-left:32px;font-size:.9375rem;color:var(--ink)} .obj li::before{content:"\266A";position:absolute;left:0;top:-1px;color:var(--red);font-size:1.125rem} .thanks{color:var(--red);font-weight:600;margin-top:14px;font-size:.875rem;display:none} /* botón de Instagram: el ícono ayuda a reconocerlo de un vistazo */ .btn-ig{display:inline-flex;align-items:center;gap:9px} .btn-ig svg{width:18px;height:18px;flex:none} /* botoncito discreto: es una salida, no una acción principal */ .thanks .limpiar{display:block;margin-top:8px;padding:0;background:none;border:0; font-family:var(--sans);font-size:.8125rem;font-weight:600; color:var(--ink-soft);cursor:pointer;text-decoration:underline; text-underline-offset:.22em;transition:color .16s var(--ease)} .thanks .limpiar:hover{color:var(--ink)} .thanks .limpiar:active{transform:scale(.97)} /* nosotros */ /* consejo: una ficha con foto por área (de a dos; la que queda sola va al centro) */ .members{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:10px} .member{flex:0 1 calc(50% - 8px);background:var(--card);box-shadow:var(--sh-1);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .member-foto{display:block;aspect-ratio:3/2;background:var(--paper-2)} .member-foto img{display:block;width:100%;height:100%;object-fit:cover} .member-txt{padding:18px 22px 20px} .member .av{width:46px;height:46px;flex:0 0 auto;border-radius:50%;background:var(--navy);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-size:1rem} .member .role{font-size:.65625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600} .member .who{font-size:.84375rem;color:var(--ink);margin-top:3px} /* escúchanos */ .plat-group{margin:2px 0 24px} .group-h{font-family:var(--sans);font-size:.71875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:8px} .group-h::before{content:"";width:16px;height:2px;background:currentColor;opacity:.5;border-radius:var(--r-xs)} .plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin:0} .plat{background:var(--card);box-shadow:var(--sh-1);border-radius:var(--r);padding:18px 19px;text-decoration:none;color:var(--navy);display:flex;align-items:center;gap:13px;transition:transform .16s,border-color .16s,box-shadow .16s} .plat:hover{transform:translateY(-3px)} .plat .pic{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center} .plat .pic svg{width:100%;height:100%;display:block} .plat .pt{display:flex;flex-direction:column;gap:1px;min-width:0} .plat .pn{font-weight:700;font-size:.9375rem} .plat .pl{font-size:.75rem;color:var(--ink-soft)} .plat.sp .pic{color:#1DB954}.plat.sp:hover{box-shadow:0 0 0 1.5px #1DB954,0 12px 24px -15px #1DB954} .plat.am .pic{color:#FA243C}.plat.am:hover{box-shadow:0 0 0 1.5px #FA243C,0 12px 24px -15px #FA243C} .plat.yt .pic{color:#FF0000}.plat.yt:hover{box-shadow:0 0 0 1.5px #FF0000,0 12px 24px -15px #FF0000} .plat.ig .pic{color:#E4405F}.plat.ig:hover{box-shadow:0 0 0 1.5px #E4405F,0 12px 24px -15px #E4405F} .plat.fb .pic{color:#1877F2}.plat.fb:hover{box-shadow:0 0 0 1.5px #1877F2,0 12px 24px -15px #1877F2} .embed{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);min-height:480px; background:linear-gradient(160deg,var(--navy-2),var(--navy-deep))} .embed-fb{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--paper)} .embed-fb svg{width:38px;height:38px;color:var(--rose)} .embed-fb .k{font-size:.71875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);font-weight:600} .embed-fb p{margin:0;font-size:.875rem;color:rgba(246,242,234,.8);max-width:36ch} .embed-if{position:relative;z-index:2;width:100%;height:480px;border:0;display:block} /* únete */ /* PASOS PARA ENTRAR AL CORO Antes eran tres tarjetas iguales una al lado de la otra: se leían como tres cosas sueltas, no como un camino. Ahora van en columna, unidas por una línea, y al lado va una foto del coro para que la sección no quede tan vacía. */ /* La franja es AZUL NOCHE (.sec--azul en index.html) y lleva un separador rojo arriba y otro abajo. --pb es su azul: lo usan los degradados de la foto, así calzan solos también en modo oscuro. */ .pasos-banda{position:relative;overflow:hidden;--pb:var(--navy)} .pasos-banda .step h3{color:#fff} .pasos-banda .step p{color:rgba(246,242,234,.84)} /* COMPUTADOR: la foto ocupa la mitad izquierda de la PANTALLA (no de la caja de texto) y se apaga hacia la derecha hasta quedar en el azul del fondo, para que los pasos se lean sobre color plano. Arriba y abajo también se apaga un poco: ahí van montados los separadores rojos. */ .pasos-foto{position:absolute;left:0;top:0;bottom:0;width:55%;margin:0} .pasos-foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block} .pasos-degradado{position:absolute;inset:0;pointer-events:none; background: /* (la foto va casi limpia: el azul solo entra en una franja angosta arriba y abajo, y en el último tercio hacia el texto) */ linear-gradient(180deg,var(--pb) 0,color-mix(in srgb,var(--pb) 40%,transparent) 30px,transparent 84px, transparent calc(100% - 84px),color-mix(in srgb,var(--pb) 40%,transparent) calc(100% - 30px),var(--pb) 100%), linear-gradient(90deg,transparent 0%,transparent 56%,color-mix(in srgb,var(--pb) 55%,transparent) 80%, var(--pb) 97%,var(--pb) 100%)} /* sin max-width: si se le pone, el .container se angosta Y se centra, y el texto queda más adentro que el del resto del sitio */ /* el texto va en la columna derecha, que parte DESPUÉS de donde termina la foto (la primera columna es más ancha a propósito): así no queda montado sobre la foto ni corrido hacia el centro */ .pasos{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr; gap:clamp(26px,4vw,56px);align-items:center} .pasos-lista{grid-column:2;padding-left:clamp(0px,2.5vw,40px)} .pasos .eyebrow{margin-bottom:18px} .pasos .cta-row{margin-top:26px} .steps{display:flex;flex-direction:column} .step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px; padding-bottom:22px;align-items:start} .step:last-child{padding-bottom:0} /* la línea que une un paso con el siguiente */ .step:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:6px; width:2px;background:linear-gradient(to bottom,var(--red),rgba(200,55,43,.18))} .step .num{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff; font-family:var(--display);font-size:1.25rem;line-height:1;display:grid;place-items:center; box-shadow:var(--sh-1)} .step h3{font-family:var(--sans);font-weight:600;font-size:1.0625rem;margin:7px 0 4px;color:var(--navy)} .step p{margin:0;font-size:.875rem;color:var(--ink-soft);max-width:46ch} /* apilado: primero la foto, después los pasos */ /* TELÉFONO: los pasos arriba y la foto abajo, a todo el ancho. Sube un poco para que el degradado pase por detrás del botón, y la sección no lleva espacio abajo: si no, queda una barra crema entre la foto y la sección siguiente (lleva .sec delante para ganarle al relleno normal). */ @media(max-width:820px){ .sec.pasos-banda{padding-bottom:0} .pasos{grid-template-columns:1fr} .pasos-lista{grid-column:1;padding-left:0} .pasos-foto{position:relative;width:auto;z-index:0; margin-top:clamp(-70px,-9vw,-40px);height:clamp(230px,52vw,340px)} .pasos-degradado{background: linear-gradient(180deg,transparent calc(100% - 70px),color-mix(in srgb,var(--pb) 40%,transparent) calc(100% - 26px),var(--pb) 100%), linear-gradient(180deg,var(--pb) 0%,color-mix(in srgb,var(--pb) 80%,transparent) 16%, color-mix(in srgb,var(--pb) 22%,transparent) 42%,transparent 66%)} } /* FRANJA AZUL NOCHE (Apostolados en Únete, Discografía en Escúchanos): el mismo azul de "Nuestra música" de la portada, con el texto en claro. */ .sec--azul{background:var(--navy);color:#fff} .sec--azul .eyebrow{color:rgba(246,242,234,.92)} .sec--azul .eyebrow::before{background:var(--rose)} .sec--azul h2.h2{color:#fff} .sec--azul .lede{color:rgba(246,242,234,.84)} .sec--azul .btn.outline{color:#fff;border-color:rgba(246,242,234,.5)} .sec--azul .btn.outline:hover{background:rgba(246,242,234,.12);border-color:#fff} .sec--azul .objetivos li{color:rgba(246,242,234,.84);border-top-color:var(--line-lt)} .sec--azul .objetivos b{color:#fff;font-weight:600} /* NOSOTROS > LO QUE BUSCAMOS: el título a un lado y la lista al otro */ .obj-2{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:center} .obj-2 .h2{margin-bottom:0} .obj-2 .objetivos li:first-child{padding-top:0} @media(max-width:760px){ .obj-2{grid-template-columns:1fr;gap:20px} } /* CÓMO VIVIMOS LA MISIÓN (portada y Nosotros), en computador: las mismas tarjetas, pero en zigzag. En cada fila una va ANCHA (la foto al costado y el texto al lado) y la otra normal, alternando de lado: ancha-normal, normal-ancha, ancha-normal. Con menos ancho (bajo 1080 px) vuelven a la grilla pareja: ahí el texto de la tarjeta ancha quedaba muy apretado. */ @media(min-width:1080px){ .bento{grid-template-columns:repeat(3,minmax(0,1fr))} .bento .act2:nth-child(4n+1),.bento .act2:nth-child(4n){grid-column:span 2;flex-direction:row} .bento .act2:nth-child(4n+1) .ph,.bento .act2:nth-child(4n) .ph{flex:0 0 58%;aspect-ratio:auto;min-height:260px} .bento .act2:nth-child(4n+1) .ph img,.bento .act2:nth-child(4n) .ph img{position:absolute;inset:0} .bento .act2:nth-child(4n+1) .b2,.bento .act2:nth-child(4n) .b2{justify-content:center;padding:32px; border-left:3px solid var(--red)} .bento .act2:nth-child(4n) {flex-direction:row-reverse} .bento .act2:nth-child(4n) .b2{border-left:0;border-right:3px solid var(--red)} } /* una franja más baja que las demás: lleva poco contenido */ .sec--baja{padding:clamp(56px,7vw,92px) 0} /* NOSOTROS > PILARES: el tríptico. Tres fotos altas pegadas una a otra, de borde a borde, cada una con un velo abajo, una rayita roja, el nombre del pilar en la letra de los títulos y su frase. La sección no lleva espacio abajo: el tríptico cierra el bloque. */ .sec.sec--trip{padding-bottom:0} .triptico{position:relative;z-index:1;display:flex;gap:4px;margin-top:clamp(28px,4vw,48px)} .trip{position:relative;flex:1 1 0;min-width:0;min-height:clamp(420px,42vw,600px);overflow:hidden; display:flex;align-items:flex-end;padding:clamp(24px,3.4vw,52px);background:var(--navy-deep);color:#fff} .trip .pu-foto{object-position:center 30%} .trip-txt{position:relative} .trip-txt::before{content:"";display:block;width:40px;height:3px;margin-bottom:16px;border-radius:var(--r-xs);background:#e0584a} .trip h2.h2{color:#fff;margin:0 0 10px;text-shadow:0 2px 24px rgba(15,11,40,.55)} .trip p{margin:0;max-width:36ch;font-size:.9375rem;line-height:1.5;color:rgba(246,242,234,.92)} .trip .pu-velo{background:linear-gradient(to top,rgba(15,11,40,.96) 0%,rgba(15,11,40,.84) 42%,rgba(15,11,40,.2) 74%,rgba(15,11,40,.05) 100%)} @media (hover:hover){ .trip:hover .pu-foto{transform:scale(1.04)} } @media(max-width:760px){ .triptico{flex-direction:column} .trip{min-height:clamp(300px,82vw,380px)} } @media (prefers-reduced-motion:reduce){ .trip:hover .pu-foto{transform:none} } /* NOSOTROS > QUIÉNES SOMOS: texto a un lado y la foto enmarcada al otro, un poco ladeada (como las dos fotos de la portada) */ .nq{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,72px);align-items:center} .nq .lede{max-width:48ch} .nq-foto{margin:0;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2); border:6px solid var(--card);transform:rotate(2deg); box-shadow:0 2px 6px rgba(15,11,40,.1),0 30px 56px -26px rgba(15,11,40,.5)} .nq-foto img{width:100%;height:100%;object-fit:cover} @media(max-width:820px){ .nq{grid-template-columns:1fr} .nq-foto{max-width:460px} } /* NOSOTROS > NUESTRA HISTORIA: fotos antiguas como fotos de papel (marco claro, un poco ladeadas). Arriba, tres montadas una sobre otra junto al texto; abajo, una fila de cuatro (dos por fila en el teléfono). */ .papel{margin:0;overflow:hidden;background:var(--paper-2);border:6px solid var(--card);border-radius:var(--r); box-shadow:0 2px 6px rgba(15,11,40,.12),0 24px 44px -24px rgba(15,11,40,.55)} .papel img{width:100%;height:100%;object-fit:cover;display:block} .hist-fotos{position:relative;width:100%;max-width:470px;aspect-ratio:1/1;margin-left:auto} .hist-fotos .papel{position:absolute;aspect-ratio:1/1} /* la grande a la izquierda (el lienzo de Misión País queda a la vista) y las dos chicas montadas sobre su costado derecho y su esquina de abajo */ .hist-a{width:74%;left:0;top:0;transform:rotate(-2deg)} .hist-b{width:38%;right:0;top:6%;transform:rotate(5deg)} .hist-c{width:44%;right:4%;bottom:0;transform:rotate(-3deg)} /* DETALLES: detrás de las tres fotos, un marco rojo de línea, ladeado, y un destello (como en "Quiénes somos" de la portada). Las cuatro de abajo CUELGAN DE UN CORDEL rojo que hace panza, cada una sujeta con un trozo de cinta; las del medio cuelgan un poco más abajo. */ .hist-fotos{isolation:isolate} /* el marco: del mismo porte que la foto grande, corrido hacia arriba y a la izquierda y un poco más girado, para que asome parejo por esos dos lados (se lee como un segundo contorno de la foto). La estrella va en su esquina. */ .hist-fotos::before{content:"";position:absolute;z-index:-1;left:-4.5%;top:-4.5%;width:74%;height:74%; border:2px solid var(--red);border-radius:var(--r);transform:rotate(-5.5deg);opacity:.8} .hist-fotos::after{content:"";position:absolute;z-index:-1;left:-11%;top:-12%;width:40px;height:44px; background:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/estrella-roja.svg) center / contain no-repeat} .hist-rotulo{margin-top:clamp(48px,7vw,84px)} .hist-tira{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2.2vw,26px);padding-top:30px} .hist-tira::before{content:"";position:absolute;left:-4%;right:-4%;top:-18px;height:52px;pointer-events:none; border-bottom:2px solid rgba(200,55,43,.7);border-radius:0 0 50% 50% / 0 0 100% 100%} .hist-tira .papel{position:relative;overflow:visible;aspect-ratio:4/3;transform:rotate(-2deg)} .hist-tira .papel img{border-radius:8px} .hist-tira .papel::before{content:"";position:absolute;z-index:1;left:50%;top:-16px;width:54px;height:20px;margin-left:-27px; background:rgba(200,55,43,.86);border-radius:2px;transform:rotate(-5deg);box-shadow:0 2px 5px rgba(15,11,40,.18)} .hist-tira .papel:nth-child(even){transform:rotate(1.5deg)} .hist-tira .papel:nth-child(even)::before{background:rgba(23,22,64,.82);transform:rotate(4deg)} .hist-tira .papel:nth-child(2),.hist-tira .papel:nth-child(3){margin-top:16px} .sec--historia.deco{--ac-op:.09} @media(max-width:820px){ .hist-fotos{margin:8px auto 0;max-width:380px} } /* TELÉFONO: las cuatro fotos de a dos, sin cordel (no cabe una panza en dos filas): quedan pegadas con su cinta, alternando la inclinación */ @media(max-width:620px){ .hist-tira{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding-top:14px} .hist-tira::before{display:none} .hist-tira .papel:nth-child(2),.hist-tira .papel:nth-child(3){margin-top:0} .hist-tira .papel:nth-child(3){transform:rotate(1.5deg)} .hist-tira .papel:nth-child(4){transform:rotate(-2deg)} .hist-fotos{margin-top:28px} .hist-fotos::after{left:-3%;top:-13%} .cifras.cifras--3{margin-top:22px} .cifras--3 .cifra{padding:16px 6px} /* CONSEJO: fichas más compactas */ /* en el teléfono van de a dos por fila (la que queda sola, al centro) */ .members{gap:10px} .member{flex-basis:calc(50% - 5px)} .member-txt{padding:10px 12px 12px} } /* ÚNETE > HAZTE VOLUNTARIO: la foto es un plano cerrado de la polera; se encuadra sobre el logo y va ladeada hacia el otro lado. El bloque lleva menos espacio abajo: los pasos que siguen son su continuación. */ .nq-foto--polera{transform:rotate(-2deg);aspect-ratio:3/2} .nq-foto--polera img{object-position:center} /* teléfono: el recuadro va al centro, un poco más cuadrado, y la foto se corre para que el dibujo y el lema de la polera queden al medio */ @media(max-width:820px){ .nq-foto{margin-inline:auto;width:100%} .nq-foto--polera{aspect-ratio:5/4} .nq-foto--polera img{object-position:91% 50%} } /* en computador, la foto más grande que el texto */ @media(min-width:821px){ .nq--foto-grande{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)} } .nq .lede b{color:var(--ink);font-weight:600} /* (algo más que antes: abajo va montado el separador rojo de los pasos, y la foto de la polera no debe tocarlo) */ .sec.sec--corta{padding-bottom:clamp(72px,8vw,96px)} /* APOSTOLADOS: dónde y cuándo. A un lado la foto; al otro, los dos fines de semana que se alternan, cada uno en su recuadro con sus parroquias. El día va en un círculo rojo, para verlo de un vistazo. */ /* COMPUTADOR: el texto va a la IZQUIERDA y la foto, GRANDE, a la derecha (en index.html la foto está primero; acá se pasa al segundo lugar con "order"). Las dos columnas son casi parejas y, en pantallas anchas, la foto además se sale hacia la derecha del margen de la página (--sale): crece sin quitarle ancho al texto. Es una foto apaisada: va casi cuadrada y encuadrada sobre el guitarrista y el grupo. TELÉFONO: la foto arriba y el texto abajo, como siempre. */ .apost{--sale:clamp(0px,calc((100vw - 1080px) / 2 - 24px),120px); display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,56px);align-items:center} .apost-foto{order:2;margin:0 calc(var(--sale) * -1) 0 0;aspect-ratio:8/7;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-2); box-shadow:0 2px 6px rgba(0,0,0,.2),0 30px 56px -26px rgba(0,0,0,.7)} .apost-foto img{width:100%;height:100%;object-fit:cover;object-position:36% center} .semanas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:24px} .semana{padding:20px;border-radius:var(--r);background:color-mix(in srgb,var(--navy) 93%,#fff); box-shadow:0 0 0 1px var(--line-lt)} .semana-t{margin:0 0 14px;font-size:.65625rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#f5a397} .lugar{display:flex;align-items:center;gap:14px} .lugar+.lugar{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-lt)} .lg-dia{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--red);color:#fff; font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .lg-txt{min-width:0} .lugar h3{font-family:var(--sans);font-weight:600;font-size:1.0625rem;line-height:1.3;margin:0;color:#fff} .lugar p{margin:2px 0 0;font-size:.875rem;color:rgba(246,242,234,.76)} .lg-foto{width:56px;height:56px;flex:none;margin-left:auto;border-radius:10px;overflow:hidden} .lg-foto img{width:100%;height:100%;object-fit:cover} .lugares-nota{margin:18px 0 0;font-size:.875rem;color:rgba(246,242,234,.76)} @media(max-width:900px){ .apost{grid-template-columns:1fr} .apost-foto{aspect-ratio:3/2;margin-right:0;order:0} } @media(max-width:620px){ .semanas{grid-template-columns:1fr;gap:12px} } /* computador angosto o iPad acostado: la columna del texto es más angosta (la foto creció), así que los dos fines de semana van uno bajo el otro para que los nombres de las parroquias no se corten en cuatro líneas */ @media(min-width:901px) and (max-width:1180px){ .semanas{grid-template-columns:1fr;gap:12px} } /* ESCÚCHANOS: la grilla con todas las carátulas, y el gráfico junto al reproductor */ .discos-grilla{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:10px;margin-top:32px} .discos-grilla img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm); background:var(--navy-2);box-shadow:0 14px 24px -16px rgba(0,0,0,.75)} /* cada carátula es un botón al disco en Spotify. Con mouse, se agranda un poco al pasar por encima. En el teléfono no hay "pasar por encima": van más grandes de entrada (tres por fila en vez de cuatro). */ .discos-grilla a{display:block;border-radius:var(--r-sm);transition:transform var(--t-base) var(--ease)} .discos-grilla a:active{transform:scale(.96)} @media (hover:hover){ .discos-grilla a:hover{transform:scale(1.14);position:relative;z-index:2} .discos-grilla a:hover img{box-shadow:0 22px 34px -14px rgba(0,0,0,.85)} } @media(max-width:1000px){ .discos-grilla{grid-template-columns:repeat(6,minmax(0,1fr))} } @media(max-width:560px){ .discos-grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} } @media (prefers-reduced-motion:reduce){ .discos-grilla a:hover,.discos-grilla a:active{transform:none} } .escucha-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:center} /* arriba: plataformas y redes a la izquierda, el reproductor a la derecha. En el teléfono el reproductor va PRIMERO: es lo que más se usa. */ .escucha-arriba{align-items:start} .escucha-arriba .plats{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .escucha-arriba .plat-group:last-child{margin-bottom:0} .sec .graf{margin-top:0} /* abajo: las cifras (en su versión clara, sobre crema) junto al gráfico */ .escucha-numeros .h2{margin-bottom:24px} .cifras--claro{background:var(--line);box-shadow:0 0 0 1px var(--line)} /* tres en una fila (Nuestra historia, en Nosotros) */ .cifras.cifras--3{grid-template-columns:repeat(3,1fr);margin-top:28px;max-width:540px} .cifras--3 .cifra:last-child:nth-child(odd){grid-column:auto} .cifras--claro .cifra{background:var(--card)} .cifras--claro .cifra .n{color:var(--ink)} .cifras--claro .cifra .l{color:var(--ink-soft)} .escucha-numeros .cifras-paises{color:var(--ink-soft);text-align:left} .escucha-numeros .cifras-paises b{color:var(--ink)} @media(max-width:900px){ .escucha-2{grid-template-columns:1fr} .escucha-arriba .embed{order:-1} } .faq{max-width:780px;margin-top:12px} details{border-bottom:1px solid var(--line)} summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:1rem;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:12px} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:var(--sans);color:var(--red);font-size:1.375rem;font-weight:400} details[open] summary::after{content:"\2013"} details p{margin:0 0 20px;color:var(--ink-soft);font-size:.90625rem;max-width:66ch} /* Colapso fluido: el contenido crece/encoge en vez de saltar. Donde el navegador no lo soporte (Safari viejo) simplemente abre al instante. */ :root{interpolate-size:allow-keywords} @supports (interpolate-size:allow-keywords){ details::details-content{block-size:0;overflow:hidden;content-visibility:hidden; transition:block-size var(--t-slow) var(--ease),content-visibility var(--t-slow) allow-discrete} details[open]::details-content{block-size:auto;content-visibility:visible} } /* dona */ .give{background:var(--card);box-shadow:var(--sh-1);border-radius:var(--r-xl);padding:clamp(26px,4vw,40px)} .give dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:.90625rem} .give dt{color:var(--red);font-weight:600} .give dd{margin:0;color:var(--ink)} .group-h{margin:40px 0 12px;font-family:var(--sans);font-weight:600;font-size:1.0625rem;letter-spacing:.01em;color:var(--navy)} .cover{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden} .cover img{width:100%;height:100%;object-fit:cover} /* footer */ footer{background:var(--navy-deep);color:var(--paper);padding:clamp(44px,6vw,68px) 0 30px;position:relative;overflow:hidden} footer .foot-logo-fondo{position:absolute;right:-2%;top:50%;transform:translateY(-50%) rotate(-10deg); width:clamp(220px,26vw,340px);height:auto;opacity:.06;pointer-events:none} @media(max-width:700px){footer .foot-logo-fondo{width:180px;right:-36px;top:auto;bottom:70px;transform:rotate(-10deg)}} .foot-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px} /* PIE EN EL TELÉFONO: compacto. Nombre, redes, una lista corta de enlaces seguidos y el logo de la Pastoral UC al final. Sin títulos de columna ni enlaces repetidos. */ @media(max-width:700px){ footer{padding:var(--pie-arriba,40px) 0 calc(24px + env(safe-area-inset-bottom,0px))} .foot-grid{display:flex;flex-direction:column;gap:16px} .foot-grid>div:first-child{display:contents} .foot-grid .foot-tag,.foot-grid h5{display:none} .foot-grid .foot-brand{order:1;margin:0} .foot-grid .foot-soc{order:2;margin:0} .foot-grid>div:nth-child(2),.foot-grid>div:nth-child(3){order:3;display:flex;flex-wrap:wrap;gap:0 20px} .foot-grid>div:nth-child(3){order:4;margin-top:-16px} .foot-grid>div:nth-child(2) a,.foot-grid>div:nth-child(3) a{display:inline-flex;align-items:center;min-height:44px;padding:0} .foot-grid>div:nth-child(3) a[href^="https://pastoral"]{display:none} .foot-grid .pas{order:5;margin-top:8px} .foot-bottom{margin-top:24px} } .foot-grid h5{font-family:var(--sans);font-size:.65625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin:0 0 14px;font-weight:600} .foot-brand{font-family:var(--display);font-size:1.375rem;letter-spacing:.03em;margin-bottom:8px} .foot-tag{font-family:var(--sans);color:var(--red);font-weight:600;font-size:.875rem;max-width:34ch;margin:0 0 6px} .foot-grid a{display:block;color:rgba(246,242,234,.78);text-decoration:none;font-size:.875rem;padding:4px 0;cursor:pointer} .foot-grid a:hover{color:#fff} .foot-soc{display:flex;gap:10px;margin-top:8px} .foot-soc a{width:36px;height:36px;border:1px solid var(--line-lt);border-radius:50%;display:grid;place-items:center;padding:0} .foot-soc svg{width:17px;height:17px;fill:var(--paper);stroke:none} .foot-bottom{position:relative;border-top:1px solid var(--line-lt);margin-top:38px;padding-top:20px;font-size:.75rem;color:rgba(246,242,234,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* --- mobile --- */ /* actividades con imagen */ .actgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:26px} /* cuatro tarjetas: en dos columnas quedan 2x2 y no sobra una sola abajo */ .actgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:760px){.actgrid--2{grid-template-columns:1fr}} .act2{background:var(--card);box-shadow:var(--sh-1);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .act2 .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,var(--navy-2),var(--navy-deep))} .act2 .ph img{width:100%;height:100%;object-fit:cover} .act2 .badge2{position:absolute;top:12px;left:12px;font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);background:rgba(246,242,234,.95);color:var(--navy);box-shadow:var(--sh-1)} .act2 .badge2.open{background:var(--red);color:#fff} .act2 .badge2.mem{background:var(--navy);color:var(--paper)} .act2 .badge2.see{background:rgba(246,242,234,.95);color:var(--red)} .act2 .b2{padding:26px 26px;display:flex;flex-direction:column;gap:7px;flex:1} .act2 h3{font-family:var(--sans);font-weight:600;font-size:1.125rem;margin:0;color:var(--navy)} .act2 p{margin:0;font-size:.875rem;color:var(--ink-soft)} .act2 em{color:var(--rose);font-style:normal;font-size:.78125rem} @media(max-width:600px){ .sec{padding:clamp(56px,12vw,84px) 0} .nav-links a{font-size:.9375rem} } /* "SABER MÁS" dentro de una tarjeta (Qué hacemos, en Nosotros): se despliega hacia abajo con el detalle y, si lo hay, un enlace */ .act-mas{margin-top:auto;padding-top:10px;border:0} .act-mas>summary{display:inline-flex;justify-content:flex-start;gap:6px;padding:6px 0;font-size:.8125rem;font-weight:600;color:var(--red)} .act-mas>summary::after{font-size:1rem;line-height:1} .act-mas>summary:active{background:transparent} .act-mas p{margin:6px 0 10px;font-size:.875rem;color:var(--ink);max-width:none} .act-mas .nov-mas{display:inline-block;padding:0 0 4px;text-decoration:none} @media(max-width:480px){ .cta-row{flex-direction:column;align-items:stretch} .cta-row .btn{justify-content:center;width:100%} .give dl{grid-template-columns:1fr;gap:4px 0} .give dt{margin-top:10px} } @media(max-width:600px){.cta-row{flex-direction:column;align-items:stretch}.cta-row .btn{width:100%;justify-content:center}} .pas{display:inline-block;margin-top:20px;opacity:.85;transition:opacity .16s} .pas:hover{opacity:1} .pas img{height:46px;width:auto;display:block} /* Logo Pastoral UC: imagen normal, teñida por tema con filtro. Gris en claro / blanco en oscuro. Funciona si el PNG es una silueta sobre fondo transparente (lo normal en un logo monocromo). */ .pas-logo{display:block;height:46px;width:auto;filter:brightness(0) invert(.45)} /* ---- buscador incrustado (sección Material) ---- */ .buscador-wrap{width:100%;background:var(--paper)} .buscador-embed{display:block;width:100%;border:0;background:var(--paper)} /* Con una canción abierta (navegacion.js, "visorAbierto") el recuadro cubre la ventana entera y la barra del sitio se esconde. El color es el de la barra del visor: así Safari pinta igual la franja de la hora. */ .visor-abierto .nav,.visor-abierto .pildora{visibility:hidden} .visor-abierto .buscador-embed{position:fixed;top:0;left:0;z-index:80;width:100%;height:100% !important; box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);background:#171640} .cform{display:flex;flex-direction:column;gap:12px;background:var(--card);box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:clamp(24px,4vw,34px)} .cform input,.cform textarea{font-family:var(--sans);font-size:.9375rem;padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%} .cform input::placeholder,.cform textarea::placeholder{color:#9a97ac} .cform input:focus,.cform textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(200,55,43,.22)} .cform textarea{resize:vertical;min-height:120px} .cform .btn{align-self:flex-start;margin-top:4px} .cform .btn:disabled{opacity:.6;cursor:default;transform:none} .cform .thanks{margin:6px 0 0} .soc2{display:flex;gap:10px;margin-top:16px} .soc2 a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--navy);transition:border-color .16s,color .16s} .soc2 svg{width:18px;height:18px;fill:currentColor;stroke:none} .soc2 a:hover{border-color:var(--red);color:var(--red)} /* ---- modo oscuro ---- */ @media (prefers-color-scheme:dark){ :root{ /* Azul noche de la MARCA (el mismo índigo del modo claro, #171640), más oscuro. Antes eran azules "acero" que tiraban a verde azulado y no calzaban con la barra, el pie ni los velos de las fotos. */ --paper:#0e1024;--paper-2:#0a0b1b;--card:#171a33; --navy:#131630;--navy-2:#1b1f45;--navy-deep:#080916; --ink:#f6f6fc;--ink-soft:#c6c8dc; --line:rgba(232,233,247,.14);--staff:rgba(232,233,247,.10); --red:#e0584a;--red-deep:#f0897b;--rose:#e0584a; --sh-1:0 2px 8px -2px rgba(0,0,0,.45); --sh-2:0 16px 32px -18px rgba(0,0,0,.70); --sh-3:0 30px 60px -30px rgba(0,0,0,.85); --nav-bg:#12112a; } :root{--nav-vidrio:#12112a;--nav-tinta:var(--ink);--nav-suave:var(--ink-soft)} /* en oscuro la barra es oscura: siempre el logo claro */ .brand .logo-claro{opacity:0} .brand .logo-dark{opacity:1} .pas-logo{filter:brightness(0) invert(1)} footer,.embed-fb{color:#f0ede2} .pasos-banda{--pb:var(--navy-2)} .btn{color:#fff} .act2 .badge2.mem{color:#fff} h2.h2,.act2 h3,.step h3,summary,.plat,.soc2 a,.group-h{color:var(--ink)} .sec--azul{background:var(--navy-2)} .semana{background:color-mix(in srgb,var(--navy-2) 93%,#fff)} .nav-links a.nav-cta{background:var(--red);color:#fff} .nav-links a.nav-cta:hover{background:var(--red-deep);color:#fff} .nav-toggle.open{background:var(--red);color:#fff} @media(max-width:880px){.nav-links a.active{background:rgba(240,237,226,.07)}} .btn.outline{color:var(--ink);border-color:var(--line)} .btn.outline:hover{border-color:var(--ink)} .btn.light{background:#f0ede2;color:#171640} .btn.light:hover{background:#fff} .member .av{background:var(--red);color:#fff} .badge2.mem{color:#f0ede2} .foot-soc svg{fill:#f0ede2} .cform input::placeholder,.cform textarea::placeholder{color:#8683a6} } /* ================= GRÁFICO: DÓNDE NOS ESCUCHAN (página Escúchanos) ================= Barras horizontales en HTML (no SVG): se adaptan solas al ancho y el lector de pantalla las lee como la lista ordenada que son. */ .graf{margin:clamp(24px,3.4vw,36px) auto 0;max-width:620px} .graf figcaption{font-size:.8125rem;color:var(--ink-soft);text-align:center; margin:0 0 clamp(14px,2vw,20px)} .graf figcaption b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} .paises{list-style:none;margin:0;padding:0;display:grid;gap:7px} .pa-fila{display:grid;grid-template-columns:clamp(78px,16%,120px) 1fr auto; align-items:center;gap:clamp(8px,1.4vw,14px)} .pa-nom{font-size:.8125rem;color:var(--ink-soft);text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pa-pista{height:14px;border-radius:var(--r-pill); background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden} .pa-pista>i{display:block;height:100%;border-radius:var(--r-pill); background:var(--red);opacity:.72; transition:opacity .18s var(--ease),transform .18s var(--ease); transform-origin:left} .pa-val{font-size:.8125rem;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums;min-width:4.2em;text-align:right} .pa-lider .pa-nom{color:var(--ink);font-weight:600} .pa-lider .pa-pista>i{opacity:1} @media (hover:hover){ .pa-fila:hover .pa-pista>i{opacity:1} } .pa-resto{margin:clamp(14px,2vw,18px) 0 0;text-align:center;font-size:.78125rem; color:var(--ink-soft);line-height:1.5} .pa-fuente{margin:8px 0 0;text-align:center;font-size:.5625rem;letter-spacing:.07em; text-transform:uppercase;color:var(--ink-soft);opacity:.7} @media(max-width:520px){ .pa-fila{grid-template-columns:74px 1fr auto;gap:8px} .pa-nom,.pa-val{font-size:.75rem} .pa-val{min-width:3.6em} } /* ===================== NOVEDADES ===================== */ /* ETIQUETAS POR TIPO DE EVENTO Van en dos contextos distintos y necesitan tratamiento distinto: · SOBRE LA FOTO (tarjetas de la portada): fondo sólido y texto blanco. Un tinte translúcido encima de una foto no se lee. · SOBRE LA TARJETA (fichas de la pestaña Novedades): tinte suave, que ahí el fondo es plano y un bloque de color sólido pesa demasiado. */ .act2 .badge2.apostolado,.act2 .badge2.cmpaz,.act2 .badge2.casting{background:var(--red);color:#fff} .act2 .badge2.ruta{background:#4c6455;color:#fff} .act2 .badge2.concurso,.act2 .badge2.album{background:var(--navy);color:#fff} .act2 .badge2.aviso{background:rgba(246,242,234,.96);color:var(--navy)} /* un velo suave arriba de la foto: la etiqueta siempre tiene algo detrás */ .act2 .ph::before{content:"";position:absolute;inset:0 0 auto;height:46%;z-index:1; pointer-events:none; background:linear-gradient(to bottom,rgba(15,11,40,.34),transparent)} .act2 .badge2{z-index:2;box-shadow:0 1px 6px rgba(15,11,40,.22)} .nov-txt .badge2.apostolado,.nov-txt .badge2.cmpaz,.nov-txt .badge2.casting{ background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red-deep)} .nov-txt .badge2.concurso,.nov-txt .badge2.album{ background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)} .nov-txt .badge2.ruta{background:color-mix(in srgb,#56705f 22%,transparent);color:var(--ink)} .nov-txt .badge2.aviso{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft)} /* tarjeta de la portada: ahora es un enlace */ .act2-link{text-decoration:none;color:inherit;display:flex;flex-direction:column} .nov-fecha{font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--red-deep)} .nov-mas{margin-top:auto;padding-top:12px;font-size:.8125rem;font-weight:600;color:var(--red)} .nov-mas::after{content:" \2192"} /* FICHA COMPLETA en la pestaña Novedades: una tarjeta grande por novedad, mitad foto y mitad texto, con la foto ALTERNANDO de lado (una a la izquierda, la siguiente a la derecha) para que la lista no sea una fila de cajas iguales. Si la novedad tiene fecha, el día va en una ficha sobre la foto. En el teléfono, la foto va arriba. */ #nov-lista{display:grid;gap:clamp(20px,3vw,32px)} .nov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch; background:var(--card);box-shadow:var(--sh-2);border-radius:var(--r-lg);overflow:hidden} .nov:nth-child(even) .nov-img{order:2} /* width:100% explícito: sin él, Safari le da ancho cero a la caja cuando lleva proporción fija (en el teléfono) y la foto desaparece */ .nov-img{position:relative;width:100%;min-height:clamp(260px,26vw,340px);overflow:hidden;background:var(--paper-2)} .nov-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* El AFICHE se muestra completo: lleva texto en los bordes y recortarlo lo arruina. La foto de respaldo si puede recortarse, es decorativa. */ .nov-img.afiche img{object-fit:contain;padding:16px} .nov-dia{position:absolute;left:16px;top:16px;display:grid;justify-items:center;min-width:58px;padding:9px 10px 8px; border-radius:var(--r);background:rgba(255,254,251,.96);color:#171640;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)} .nov-dia b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.02em} .nov-dia i{font-style:normal;font-size:.65625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c8372b} .nov-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px; padding:clamp(22px,3.6vw,44px)} /* datos ordenados de una novedad (Cuándo / Dónde / Quién): el nombre del dato en rojo a la izquierda, el valor al lado, una línea fina entre uno y otro */ .nov-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;width:100%;max-width:60ch;margin:4px 0 0; border-top:1px solid var(--line)} .nov-datos dt,.nov-datos dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.45} .nov-datos dt{font-weight:600;color:var(--red)} .nov-datos dd{color:var(--ink)} .nov-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} /* El estilo base de estas etiquetas vive en `.act2 .badge2`, o sea SOLO dentro de las tarjetas de la portada. Acá se repite lo que forma el recuadro —relleno, esquinas redondas, tamaño— para que en la pestaña Novedades se vean igual que en el resto del sitio y no como texto pintado. */ .nov-txt .badge2{position:static;display:inline-block; font-size:.625rem;letter-spacing:.07em;text-transform:uppercase; font-weight:700;padding:5px 11px;border-radius:var(--r-pill); line-height:1.5;white-space:nowrap} .nov-txt h3{font-family:var(--sans);font-weight:600;font-size:clamp(19px,2.4vw,24px); line-height:1.18;margin:0;color:var(--ink)} .nov-cuando{margin:0;font-size:.875rem;font-weight:600;color:var(--red)} .nov-txt p{margin:0;color:var(--ink-soft);max-width:60ch} .nov-txt .btn{margin-top:0} /* se ilumina un momento cuando llegas desde la portada */ .nov-destacada{animation:novFlash 2.2s var(--ease)} @keyframes novFlash{0%{background:rgba(200,55,43,.10)}100%{background:transparent}} /* archivo de las que ya pasaron */ .nov-archivo{margin-top:clamp(30px,5vw,52px);border-top:1px solid var(--line)} .nov-archivo>summary{padding:20px 0;font-weight:600;color:var(--ink-soft);cursor:pointer; list-style:none;display:flex;align-items:center;gap:10px} .nov-archivo>summary::-webkit-details-marker{display:none} .nov-archivo>summary::after{content:"\25BE";transition:transform .2s var(--ease)} .nov-archivo[open]>summary::after{transform:rotate(180deg)} .nov-vieja{opacity:.62} .nov-vieja .nov-cuando{color:var(--ink-soft)} @media(max-width:700px){ .nov{grid-template-columns:1fr} .nov:nth-child(even) .nov-img{order:0} .nov-img{min-height:0;aspect-ratio:16/10} .nov-img.afiche{aspect-ratio:4/5} .nov-botones{width:100%} .nov-botones .btn{flex:1 1 100%;justify-content:center} } /* ================= DIBUJOS DE FONDO ================= Las secciones claras llevan dibujos MUY tenues, en DOS capas, para que el fondo juegue sin llenarse: Los archivos están en 2-iconos-y-compartir/dibujos-de-fondo/. ::before el dibujo PRINCIPAL, grande, asomando desde un borde (class "deco--guitarra", "deco--pentagrama"...) ::after los ACENTOS: instrumentos chicos, notas y destellos repartidos en los espacios vacíos (class "ac-pilares", "ac-agenda"...) Nunca van detrás de fotos. En teléfono los acentos se reducen a un par de notas en las esquinas, donde no tapan texto. · Los archivos ya vienen pintados con la tinta azul del sitio; en modo oscuro un filtro los pasa a blanco, sin otra versión del archivo. (No se usan "máscaras" CSS: Chrome las bloquea al abrir index.html con doble clic, y no se veían al probar en el Mac.) · Sin animación: es un fondo quieto, no cuesta nada al hacer scroll. Cuánto se notan: --deco-op (dibujo principal) y --ac-op (acentos). */ :root{ --f-violin:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/violin.svg); --f-guitarra:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/guitarra.svg); --f-clarinete:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/clarinete.svg); --f-flauta:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/flauta.svg); --f-tambor:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/tambor.svg); --f-pandero:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/pandero.svg); --f-maracas:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/maracas.svg); --f-clave:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/clave-de-sol.svg); --f-corcheas:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/corcheas.webp); --f-corchea:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/corchea.webp); --f-negra:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/negra.webp); --f-blanca:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/blanca.webp); --f-destello:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/destello.webp); --f-cruz:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/cruz.webp); --f-pentagrama-corto:url(../2-iconos-y-compartir/dibujos-de-fondo/notas/pentagrama-corto.webp); } .deco{position:relative;overflow:hidden;--deco-op:.07;--ac-op:.075} .deco::before{content:"";position:absolute;z-index:0;pointer-events:none; background:var(--deco) center/contain no-repeat;opacity:var(--deco-op)} .deco::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:var(--acentos,none);opacity:var(--ac-op)} .deco>.container{position:relative;z-index:1} /* --- dibujo principal: archivo, proporción, tamaño y desde qué borde asoma --- */ .deco--guitarra::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/guitarra-iglesia.webp);aspect-ratio:900/648; width:clamp(300px,44vw,600px);right:-5%;bottom:-4%} .deco--pentagrama::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/pentagrama.webp);aspect-ratio:754/373; width:clamp(320px,48vw,660px);right:-6%;top:2%} .deco--caliz::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/caliz-trigo.webp);aspect-ratio:900/536; width:clamp(300px,42vw,580px);left:-6%;bottom:-3%} .deco--altar::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/altar.webp);aspect-ratio:900/576; width:clamp(300px,44vw,600px);right:-6%;bottom:-3%} .deco--llama::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/llama-paloma.webp);aspect-ratio:659/900; width:clamp(220px,26vw,380px);right:-3%;top:6%} /* una guitarra grande (la estrella del logo iba acá, pero se repetía con el logo del pie de página, que queda justo debajo) */ .deco--guitarra-grande::before{--deco:url(../2-iconos-y-compartir/dibujos-de-fondo/instrumentos/guitarra.svg);aspect-ratio:226/372; width:clamp(170px,18vw,250px);right:2%;top:50%;transform:translateY(-50%)} /* una clave de sol grande, de marca de agua, asomando por la izquierda de Material (portada). Detrás de las carátulas no servía: quedaba tapada. */ .deco--clave::before{--deco:var(--f-clave);aspect-ratio:151/296; width:clamp(230px,24vw,330px);left:max(-60px,calc(50% - 770px));top:50%;transform:translateY(-50%) rotate(-8deg)} .p-material.deco{--deco-op:.1;--ac-op:.11} /* --- acentos de cada sección: dibujo, posición / tamaño --- Van en los costados y en los rincones que quedan vacíos junto a los títulos. Se leen como: dibujo posición-horizontal posición-vertical / tamaño */ .ac-novedades{--acentos: var(--f-maracas) left -8px bottom 4% / 150px auto no-repeat, var(--f-corcheas) 5% 13% / 46px auto no-repeat, var(--f-cruz) 3% 48% / auto 58px no-repeat, var(--f-destello) 96% 92% / 22px auto no-repeat, var(--f-blanca) 97% 62% / 24px auto no-repeat} .ac-quehacemos{--acentos: var(--f-clarinete) right -14px top 8% / auto 210px no-repeat, var(--f-corchea) 93% 74% / 32px auto no-repeat, var(--f-destello) 5% 11% / 22px auto no-repeat, var(--f-negra) 97% 96% / 24px auto no-repeat, var(--f-pentagrama-corto) 3% 46% / 90px auto no-repeat} .ac-consejo{--acentos: var(--f-pandero) 3% 16% / 96px auto no-repeat, var(--f-corchea) 7% 88% / 30px auto no-repeat, var(--f-destello) 88% 9% / 20px auto no-repeat, var(--f-negra) 97% 94% / 22px auto no-repeat} .ac-material{--acentos: var(--f-guitarra) right -18px top 6% / auto 230px no-repeat, var(--f-maracas) right 6% bottom 4% / 120px auto no-repeat, var(--f-violin) 47% 99% / auto 120px no-repeat, var(--f-corcheas) 60% 7% / 44px auto no-repeat, var(--f-pentagrama-corto) 50% 6% / 110px auto no-repeat, var(--f-blanca) 53% 92% / 26px auto no-repeat, var(--f-destello) 96% 8% / 22px auto no-repeat, var(--f-negra) 42% 95% / 24px auto no-repeat} /* "Quiénes somos" de la portada: más cargado que el resto (es una sección larga): instrumentos a los costados y notas entre un bloque y otro */ .ac-quienes-portada{--acentos: var(--f-violin) left -12px top 30% / auto 190px no-repeat, var(--f-clarinete) right -16px top 44% / auto 230px no-repeat, var(--f-guitarra) left -18px bottom 7% / auto 240px no-repeat, var(--f-pandero) right 2% bottom 3% / 96px auto no-repeat, var(--f-corcheas) 3% 4% / 46px auto no-repeat, var(--f-destello) 47% 3% / 22px auto no-repeat, var(--f-cruz) 96% 31% / auto 56px no-repeat, var(--f-negra) 4% 57% / 24px auto no-repeat, var(--f-blanca) 95% 70% / 26px auto no-repeat, var(--f-destello) 52% 97% / 20px auto no-repeat} .ac-historia{--acentos: var(--f-corcheas) 3% 6% / 46px auto no-repeat, var(--f-violin) left -12px top 46% / auto 170px no-repeat, var(--f-destello) 47% 5% / 22px auto no-repeat, var(--f-pentagrama-corto) 97% 52% / 110px auto no-repeat, var(--f-clarinete) right -16px bottom 6% / auto 200px no-repeat, var(--f-negra) 3% 93% / 24px auto no-repeat} .ac-quienes{--acentos: var(--f-corcheas) 3% 14% / 46px auto no-repeat, var(--f-destello) 96% 6% / 20px auto no-repeat, var(--f-pentagrama-corto) 2% 74% / 100px auto no-repeat, var(--f-negra) 97% 92% / 24px auto no-repeat} .ac-escuchanos{--acentos: var(--f-guitarra) left -14px top 30% / auto 210px no-repeat, var(--f-flauta) right -24px bottom 3% / 280px auto no-repeat, var(--f-corcheas) 96% 52% / 42px auto no-repeat, var(--f-destello) 4% 88% / 22px auto no-repeat, var(--f-negra) 3% 7% / 22px auto no-repeat} .ac-abiertas{--acentos: var(--f-violin) left -10px top 7% / auto 160px no-repeat, var(--f-corcheas) 93% 9% / 46px auto no-repeat, var(--f-cruz) 4% 80% / auto 54px no-repeat, var(--f-destello) 96% 42% / 20px auto no-repeat, var(--f-negra) 97% 72% / 22px auto no-repeat} .ac-preguntas{--acentos: var(--f-pentagrama-corto) 3% 93% / 120px auto no-repeat, var(--f-blanca) 5% 20% / 28px auto no-repeat, var(--f-destello) 97% 4% / 20px auto no-repeat, var(--f-corchea) 91% 95% / 28px auto no-repeat} /* --- sobre las franjas AZUL NOCHE de la portada (música y fotos) --- Los dibujos vienen en tinta azul, así que acá se pasan a blanco con el mismo filtro del modo oscuro. Van donde la franja tiene aire: junto al título, a los costados y abajo, al lado del botón. */ .deco--claro{--deco-op:.075;--ac-op:.085} .deco--claro::before,.deco--claro::after{filter:brightness(0) invert(1)} .ac-musica{--acentos: var(--f-clarinete) left -12px top 7% / auto 200px no-repeat, var(--f-corcheas) 46% 7% / 44px auto no-repeat, var(--f-destello) 97% 5% / 20px auto no-repeat, var(--f-flauta) left -30px bottom 5% / 260px auto no-repeat, var(--f-negra) 40% 95% / 22px auto no-repeat} .ac-fotos{--acentos: var(--f-violin) left -8px top 5% / auto 150px no-repeat, var(--f-destello) 52% 9% / 20px auto no-repeat, var(--f-pandero) 60% 97% / 84px auto no-repeat, var(--f-corcheas) 36% 94% / 42px auto no-repeat, var(--f-tambor) right 3% bottom 3% / 110px auto no-repeat, var(--f-cruz) 84% 93% / auto 50px no-repeat} /* en modo oscuro la tinta es casi blanca: con menos basta */ @media (prefers-color-scheme:dark){ .deco{--deco-op:.055;--ac-op:.06} .p-material.deco{--deco-op:.075;--ac-op:.08} .deco::before,.deco::after{filter:brightness(0) invert(1)} } /* TELÉFONO: el dibujo principal asoma más recortado y un poco más tenue, y de los acentos quedan solo dos notas en las esquinas (arriba a la derecha y abajo a la izquierda, donde la sección tiene aire y no hay texto). */ @media(max-width:700px){ .deco{--deco-op:.055;--ac-op:.07; --acentos:var(--f-corchea) right 20px top 22px / 24px auto no-repeat, var(--f-destello) right 54px top 14px / 14px auto no-repeat, var(--f-corcheas) left 16px bottom 18px / 32px auto no-repeat} .deco--guitarra::before,.deco--caliz::before,.deco--altar::before{width:82vw;bottom:-2%} .deco--guitarra::before,.deco--altar::before{right:-22vw} .deco--caliz::before{left:-20vw} .deco--pentagrama::before{width:92vw;right:-30vw;top:1%} .deco--llama::before{width:52vw;right:-14vw} .deco--guitarra-grande::before{width:40vw;right:-10vw} .deco--clave::before{width:min(42vw,170px);left:auto;right:min(-9vw,-30px);top:1%;transform:rotate(8deg)} /* donde el dibujo principal ya ocupa la esquina de abajo, las notas de abajo se pasan al otro lado */ .deco--caliz{--acentos:var(--f-corchea) right 20px top 22px / 24px auto no-repeat, var(--f-destello) right 54px top 14px / 14px auto no-repeat} } /* ============ DETALLES QUE EL NAVEGADOR DEJA GENERICOS ============ La selección de texto, el cursor de escritura, los controles de formulario, la barra de scroll y los subrayados vienen en el azul por defecto del sistema. Dejarlos así delata un sitio armado a la rápida. */ ::selection{background:rgba(200,55,43,.22);color:var(--ink)} :root{caret-color:var(--red);accent-color:var(--red); scrollbar-color:rgba(23,22,64,.28) transparent} a{text-underline-offset:.18em;text-decoration-thickness:.08em} /* HEADLINER NO TRAE KERNING: no tiene tabla kern ni GPOS, así que las letras solo se separan por su ancho y algunos pares quedan pegados — la M con la Ú de "Música" era el caso evidente. Por eso el tracking de los títulos va POSITIVO. La regla de apretar el texto grande vale para tipografías normales; en una condensada sin kerning hace justo lo contrario. */ /* ================= TILDES EN HEADLINER ================= Headliner no dibuja tildes, ni Ñ, ni ¡ ¿. 9-codigo/pintar-contenido.js los arma solos (ver ahí). La tilde y la virgulilla de la Ñ son DIBUJOS que van justo encima de la letra, en el espacio entre un renglón y el de arriba: · la letra NO cambia de alto: queda igual que las de al lado; · el dibujo tiene el grosor de los trazos de la fuente (antes era una rayita delgada, plana y lejos de la letra, que chocaba con el renglón de arriba); · todo se mide en "em", así que crece y se achica con el título. Las mayúsculas de Headliner llegan casi al borde de arriba de su caja, así que "top" negativo = cuánto sube el dibujo sobre la letra. */ /* line-height:1 fijo en la letra: así el dibujo queda a la misma altura en cualquier título, sin cambiar el interlineado del título. */ .tl{position:relative;display:inline-block;line-height:1} .tl svg{position:absolute;left:50%;transform:translateX(-50%);overflow:visible;pointer-events:none} /* la tilde: un trazo corto e inclinado */ .tl-a{top:-.128em;width:.175em;height:.105em} /* la virgulilla de la Ñ: casi del ancho de la N */ .tl-v{top:-.122em;width:.3em;height:.108em} /* una palabra con tilde no se corta en dos al saltar de línea */ .pal{white-space:nowrap} /* ¡ y ¿: el ! y el ? dados vuelta */ .inv{display:inline-block;transform:rotate(180deg)} /* texto solo para el lector de pantalla (invisible) */ .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ícono dentro de un botón (Spotify, Instagram...) */ .btn svg{width:20px;height:20px;flex:none} /* Reparte los títulos en líneas parejas en vez de dejar una palabra sola */ h1,h2,h3,h4,.h2{text-wrap:balance} p,li{text-wrap:pretty} /* ================= RESPUESTA AL TOQUE ================= La señal se da al PRESIONAR, no al soltar. En el teléfono no existe :hover, así que sin esto los botones no devuelven nada al dedo. */ *{-webkit-tap-highlight-color:transparent} .btn,.plat,.act2,.member,.soc2 a,.foot-soc a, .nav-links a,summary,.nav-toggle{ transition:transform var(--t-press) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease); } /* el hundimiento es proporcional al tamaño: chico se hunde más que grande */ .btn:active{transform:scale(.965)} .plat:active,.act2-link:active,.member:active{transform:scale(.985)} .soc2 a:active,.foot-soc a:active{transform:scale(.86)} .nav-links a:active,summary:active{background:var(--paper-2)} /* En pantallas táctiles el :hover se queda pegado después de tocar. Ahí manda :active, no el hover. */ @media (hover:none){ .btn:hover,.btn.outline:hover,.plat:hover{transform:none} } /* ================= APARECER AL BAJAR ================= Cada bloque sube 16 px y aparece la primera vez que entra a la pantalla (lo maneja 9-codigo/aparecer.js). Solo se esconde algo cuando ese archivo ya está corriendo (clase "anima"): si falla, todo se ve igual. */ html.anima .rev{opacity:0;transform:translateY(16px)} html.anima .rev.visto{opacity:1;transform:none; transition:opacity .42s ease,transform .46s var(--ease)} /* ================= FOTOS QUE RESPONDEN AL MOUSE ================= Con mouse, la foto de una tarjeta se acerca apenas al pasar por encima. En el teléfono no hay "pasar por encima": no se hace nada. */ .act2 .ph img,.tira figure img{transition:transform .5s var(--ease),opacity .4s ease} @media (hover:hover){ .act2:hover .ph img,.tira figure:hover img{transform:scale(1.04)} } @media (prefers-reduced-motion:reduce){ .act2:hover .ph img,.tira figure:hover img{transform:none} } /* ================= FOCO VISIBLE ================= */ :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:var(--r-xs)} .btn:focus-visible{outline-offset:4px} /* ================= ÁREAS DE TOQUE EN TELÉFONO ================= Nada bajo 44px: es el mínimo con el que un dedo acierta sin pelear. */ @media (max-width:880px){ /* MENÚ: lista simple de texto. Sin recuadros, sin divisores, sin barra lateral. La seccion actual se marca solo con color rojo + peso. Dona sigue siendo el unico boton. Area de toque comoda (>=48px). */ .nav-links{gap:0;padding:0 14px} .nav-links.open{padding:6px 14px 16px} .nav-links a{padding:13px 6px;min-height:48px;font-size:1.0625rem; display:flex;align-items:center;background:transparent; color:var(--ink-soft);font-weight:500} .nav-links a.active{color:var(--red);font-weight:600;background:transparent} .nav-links a.active::before,.nav-links a.active::after{display:none} .nav-links a.nav-cta{margin-top:14px;justify-content:center; background:var(--red);color:#fff; border-radius:var(--r-sm);padding:15px 14px;font-weight:600} .nav-toggle{width:44px;height:44px} .soc2 a,.foot-soc a{width:44px;height:44px} .btn{min-height:48px;padding:15px 26px} .btn.outline{padding:13.5px 24px} summary{padding:20px 0} } /* ================= MOVIMIENTO REDUCIDO ================= No es quitar la respuesta, es darla sin desplazamiento: todo lo que entra se funde en el lugar (opacidad), nada viaja ni se escala. Los fundidos de color y de las fotos del carrusel se conservan, ayudan a entender. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .view.entrando,.hero-inner>*{animation-name:fundido!important} .btn:hover,.plat:hover,.btn:active,.plat:active,.act2-link:active,.member:active, .soc2 a:active,.foot-soc a:active{transform:none!important} .nav-links,.nav-links a{transform:none!important} .nav-toggle>span{transform:none!important} } /* con "reducir movimiento" en el teléfono, la barra y la burbuja NO se estiran ni se encogen: una se apaga y la otra aparece, en un fundido corto */ @media (prefers-reduced-motion:reduce) and (max-width:880px){ .nav::before{display:block;transition:opacity .15s ease} .pildora::before{display:none} .pildora::after{transform:none!important;border-radius:28px;background:var(--nav-vidrio);transition:opacity .15s ease!important} .nav-pildora .nav::before{opacity:0} .nav-inner,.nav-pildora .nav-inner{transform:none!important;transition:opacity .15s ease!important} .pildora .nav-ic{transform:none!important;transition:opacity .15s ease!important} } @keyframes fundido{from{opacity:0}to{opacity:1}}