/* ========================================================================== TR33 at Amador · base compartida (estructura y movimiento de 619, identidad TR33) Archivo de la BASE. Las páginas no lo editan: usan css/.css. Contrato completo en _build/STYLEGUIDE.md Índice: 1 tokens · 2 base · 3 tipografía · 4 enlaces y botones · 5 cabecera 6 intro de portada · 7 pie · 8 hero interior · 9 filas y capítulos 10 fotos y leyendas · 11 columnas · 12 cita · 13 carrusel · 14 slider 15 panel lateral · 16 formulario · 17 utilidades · 19 siguiente capítulo y miniaturas que son enlace · 20 botón de WhatsApp · 21 íconos y puntos clave 18 movimiento reducido (siempre al final) ========================================================================== */ /* 1. TOKENS --------------------------------------------------------------- */ :root { color-scheme: light; /* color: valores TR33 en los papeles de 619 */ --c-paper: #EEEDE6; /* fondo principal, menú sólido, menú móvil */ --c-paper-alt: #FBFAF7; /* banda alterna, campos de formulario */ --c-stone: #B3B8AB; /* body, pie, banda de introducción, banda de texto del hero móvil */ --c-sand: #9DA395; /* panel lateral, capítulo de color, bloque de equipo */ --c-accent: #7A8272; /* menú sobre claro, H2, citas, enlaces, flechas, hover de botón */ --c-accent-dark: #5C6356; /* hover de enlace */ --c-accent-text: #656D5E; /* el mismo verde un 15 % más profundo: TODO texto en acento de menos de 24 px (4,58:1 sobre papel, 5,16:1 sobre blanco; #7A8272 da 3,40 y 3,82) */ --c-wait: #D9DBD2; /* tono de espera bajo fotos y videos que aún cargan (piedra + papel) */ --c-error: #B23B3B; /* solo errores de formulario (5,0:1 sobre papel) */ --c-muted: rgba(43,43,39,.7); /* notas al pie, etiquetas de campo (5,3:1) */ --c-ink: #2B2B27; /* texto, borde de botón */ --c-on-dark: #FFFFFF; /* menú sobre el hero */ --c-logo: #000000; /* logo de la cabecera, negro en todos los estados (Raúl, 15-oct). El del pie sigue en tinta */ --c-whatsapp: #25D366; /* botón flotante de WhatsApp (verde de la marca WhatsApp; glifo blanco) */ --c-hero-text: #F6F6F3; /* texto sobre foto */ --c-danger: #EB5757; --c-input-text: #495057; --c-placeholder: rgba(43,43,39,.5); --c-focus-border: #C3C8BD; --overlay-hero-home: rgba(0,0,0,.4); --overlay-hero-page: linear-gradient(180deg, rgba(0,0,0,.01) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.85) 100%); --overlay-backdrop: rgba(0,0,0,.5); --overlay-nav-open: rgba(43,43,39,.75); --shadow-header: 0 0 1px rgba(0,0,0,.25); --focus-ring: 0 0 0 .2rem rgba(122,130,114,.25); /* familias */ --font-serif: "Cormorant Garamond","Cormorant","EB Garamond",Garamond,"Times New Roman",Times,Georgia,serif; --font-sans: "Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-caption: "Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fw-display: 300; /* titulares, menú, botones, citas */ --fw-text: 400; /* texto de cuerpo (16 a 21 px); ver STYLEGUIDE, "Igualado de fuente" */ --fw-small: 400; /* mayúsculas pequeñas de interfaz: menú, botones, rótulos (12 a 15 px) */ /* igualado óptico con PP Fragment / Söhne (altura de x como fracción del cuerpo) */ --fsa-serif: .4675; --fsa-sans: .489; --fsa-caption: .5015; --ls-fix-upper: -.07em; /* corrección de ancho en mayúsculas serif (medido contra 619: −.070em a 300, −.073em a 400) */ --ws-fix-upper: .08em; /* devuelve a los espacios lo que les quita --ls-fix-upper (rótulos en mayúsculas de 21 px o menos) */ --ls-fix-text: -.008em; /* corrección de ancho en texto corrido serif */ --ls-fix-caption: .12em; /* corrección de ancho en leyendas (rol de Söhne Breit) */ /* mayúsculas serif de 21 px o menos: tracking POSITIVO (etiqueta fina). --ls-fix-upper queda solo para 32 px o más */ --ls-caps: .08em; --ls-eyebrow: .14em; /* escala: móvil / >=768 / >=992 */ --fs-h1: 2rem; --fs-h1-md: 3rem; --fs-h1-lg: 3.75rem; --fs-h2: 1.75rem; --fs-h2-md: 2.5rem; --fs-h2-lg: 3rem; --fs-h3: 1.5rem; --fs-h3-md: 1.5rem; --fs-h3-lg: 2.5rem; --fs-h4: 1.25rem; --fs-h4-lg: 1.5rem; --fs-body: 1rem; --lh-body: 1.75; --fs-lead: 1rem; --fs-lead-md: 1.125rem; --lh-lead: 1.75; --fs-intro: 1rem; --fs-intro-md: 1.5rem; --fs-intro-lg: 2rem; --fs-caption: .625rem; --fs-caption-sm: .75rem; --fs-nav: .875rem; --fs-nav-xl: .9375rem; --ls-nav: 1.2px; --fs-nav-mobile: 1.25rem; --ls-nav-mobile: .4px; --fs-btn: .75rem; --ls-btn: .96px; --fs-footer: .75rem; --lh-heading: 1.25; --ls-h1: .64px; --ls-h1-sm: 1.2px; /* disposición */ --safe-top: env(safe-area-inset-top, 0px); --header-h: 160px; --header-h-pinned: 84px; --header-pad: 20px; --nav-gap: 29px; --nav-gap-xl: 40px; --nav-inset: 31px; --nav-inset-xl: 48px; --nav-lift: 32px; --logo-ratio: 1074 / 569; /* logo de la cabecera un 25 % mayor que el de 619 (Raúl, 15-oct: «a bit more prominent»): 118 → 148, 100 → 125, 150 → 188, 75 → 94, 50 → 63. La intro de portada (splash) no cambia */ --logo-w: 148px; --logo-w-mobile: 125px; --logo-w-xl: 188px; --logo-w-pinned: 94px; --logo-w-solid-mobile: 80px; --logo-w-splash: 525px; --logo-w-splash-mobile: 250px; --row-pad-y: 55px; --row-pad-x: 20px; --module-gap: 20px; --section-pad: 180px; --col-inset: 100px; --w-row: 1620px; --w-wide: 1500px; --w-contact: 1440px; --w-illustration: 1247px; --w-text: 750px; --w-bigtext: 1012px; --panel-w: 50%; --panel-max: 840px; --btn-pad: 16px 24px; --field-h: 56px; --field-gap: 10px; --footer-pad: 8px 5px; --footer-pad-mobile: 30px 25px; --solid-top: 165px; --radius: 0; /* movimiento */ --t-header: 1.25s ease; --t-header-compact: .25s ease; --t-hero: .75s ease; --t-ui: .15s ease-in-out; --t-fade: .25s ease; --t-panel: .3s ease-out; --t-backdrop: .15s linear; --slide-speed: .5s; --slide-ease: ease; --autoplay-carousel: 6000ms; --autoplay-gallery: 4000ms; --fade-in-up: .5s; --ease-fine: cubic-bezier(.25,.1,.25,1); /* subrayados que se dibujan, botones */ --ease-soft: cubic-bezier(.2,.6,.2,1); /* acercamiento de miniaturas */ /* el logo real (img/logo.png) incrustado como máscara: se tiñe con background-color */ --logo-mask: url("data:image/png;base64,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"); } @media (min-width: 1441px) { :root { --row-pad-x: 70px; } } @media (max-width: 1199px) { :root { --solid-top: 150px; } } /* 1200–1319: las etiquetas de TR33 son más largas que las de 619 y el menú derecho se salía de la barra (12 px de scroll horizontal a 1200; 28 px en la portada, cuyo logo mide 150). Se mantiene el corte de 1200 de 619 y solo en esta franja se cierran separación y sangría: 18 / 17 px a 1200 hasta los 29 / 31 px de 619 a 1320, de forma continua, para que el último enlace quede siempre dentro de la barra (≥ 30 px del borde en la portada) */ @media (min-width: 1200px) and (max-width: 1319.98px) { :root { --nav-gap: calc(18px + (100vw - 1200px) * .09167); --nav-inset: calc(17px + (100vw - 1200px) * .11667); } } @media (max-width: 991px) { :root { --section-pad: 80px; --col-inset: 0px; } } @media (max-width: 600px) { :root { --row-pad-y: 40px; --row-pad-x: 10px; } } /* 2. BASE ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* un ancla o un campo enfocado nunca queda bajo la cabecera fija (84 px) */ html { scroll-padding-top: calc(var(--header-h-pinned) + 24px); } body { margin: 0; background: var(--c-stone); color: var(--c-ink); font-family: var(--font-serif); font-size: var(--fs-body); font-weight: var(--fw-text); font-size-adjust: var(--fsa-serif); /* Cormorant Garamond trae cifras elzevirianas por defecto: «TR33», «106 m²» y «102» se leían como minúsculas */ font-variant-numeric: lining-nums; line-height: 1.5; letter-spacing: var(--ls-fix-text); text-align: left; -webkit-font-smoothing: antialiased; /* pie pegado al fondo: si el documento es más corto que la pantalla, crece main (papel), no asoma el color del body */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } main { display: block; flex: 1 0 auto; background: var(--c-paper); overflow-wrap: break-word; } img, video, svg { max-width: 100%; } img { height: auto; border: 0; } figure { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; border-radius: var(--radius); } button { cursor: pointer; } ul, ol { margin: 0 0 1rem; } ::selection { background: rgba(122,130,114,.28); color: var(--c-ink); } :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } :focus:not(:focus-visible) { outline: 0; } /* foco fino y separado en enlaces, flechas y miniaturas (los botones conservan el suyo) */ a:focus-visible, .carousel__arrow:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; } .skip-link { position: absolute; left: 12px; top: -80px; z-index: 2000; padding: 10px 16px; background: var(--c-ink); color: var(--c-paper); font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); font-size: 12px; letter-spacing: 0; } .skip-link:focus { top: calc(12px + var(--safe-top)); color: var(--c-paper); text-decoration: none; } /* 3. TIPOGRAFÍA ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 .5rem; font-family: var(--font-serif); font-weight: var(--fw-display); line-height: var(--lh-heading); letter-spacing: 0; } h1, .h1 { font-size: var(--fs-h1); letter-spacing: calc(var(--ls-h1) + var(--ls-fix-upper)); text-transform: uppercase; } h2, .h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-fix-text); text-transform: none; } /* h3 en mayúsculas: −.035em (a 24 px −0,84 px en lugar de −1,68; a 40 px −1,4 px) y algo de aire entre palabras */ h3, .h3 { font-size: var(--fs-h3); letter-spacing: -.035em; word-spacing: .06em; text-transform: uppercase; } h4, .h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-fix-text); text-transform: none; } h5, .h5 { font-size: 1.125rem; letter-spacing: var(--ls-fix-text); text-transform: none; } h6, .h6 { font-size: 1rem; letter-spacing: var(--ls-fix-text); text-transform: none; } @media (min-width: 576px) { h1, .h1 { letter-spacing: calc(var(--ls-h1-sm) + var(--ls-fix-upper)); } } @media (min-width: 768px) { h1, .h1 { font-size: var(--fs-h1-md); } h2, .h2 { font-size: var(--fs-h2-md); } h3, .h3 { font-size: var(--fs-h3-md); } } @media (min-width: 992px) { h1, .h1 { font-size: var(--fs-h1-lg); } h2, .h2 { font-size: var(--fs-h2-lg); } h3, .h3 { font-size: var(--fs-h3-lg); } h4, .h4 { font-size: var(--fs-h4-lg); } h5, .h5 { font-size: 1.25rem; } } p { margin: 0 0 1rem; line-height: var(--lh-body); } /* titulares equilibrados y párrafos sin palabra suelta al final (los
forzados siguen mandando) */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .subhead, .statement, .quote, .intro, .lead, .caption, .faq__q button, .next-ch__link { text-wrap: balance; } p, li, .feature-list li { text-wrap: pretty; } /* párrafo grande del hero y de los paneles de portada: 16 → 18 px, 175 % */ .lead { font-size: var(--fs-lead); font-weight: var(--fw-text); line-height: var(--lh-lead); } @media (min-width: 768px) { .lead { font-size: var(--fs-lead-md); } } /* banda de introducción de la portada: 16 → 24 → 32 px, 125 %, +.64 px */ .intro { font-size: var(--fs-intro); font-weight: var(--fw-display); line-height: 1.25; letter-spacing: calc(.64px + var(--ls-fix-text)); } @media (min-width: 768px) { .intro { font-size: var(--fs-intro-md); } } @media (min-width: 992px) { .intro { font-size: var(--fs-intro-lg); } } /* frase destacada: tamaño de .h3 en caja normal (sin sangría de comilla) */ .statement { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: 1.25; letter-spacing: var(--ls-fix-text); text-transform: none; color: var(--c-accent); } @media (min-width: 992px) { .statement { font-size: var(--fs-h3-lg); } } /* rótulo pequeño en versalitas (contacto, tarjetas de novedades) */ /* H2 en mayúsculas (intros centradas de la plantilla «location» de 619); h2--tracked suma su tracking de +.96 px */ .h2--upper { text-transform: uppercase; letter-spacing: var(--ls-fix-upper); } .h2--upper.h2--tracked, .h2--tracked { letter-spacing: calc(.96px + var(--ls-fix-upper)); } .eyebrow { margin: 0; font-size: .9375rem; font-weight: var(--fw-small); line-height: 1; letter-spacing: var(--ls-eyebrow); word-spacing: normal; text-transform: uppercase; color: var(--c-accent-text); } .eyebrow--wide { letter-spacing: .18em; color: inherit; } .phone { margin: 0; font-size: 1.3125rem; font-weight: var(--fw-display); line-height: 1; letter-spacing: .84px; text-transform: uppercase; color: var(--c-accent-text); } .subhead { margin: 0; font-size: 1.5rem; font-weight: var(--fw-display); line-height: 1.25; letter-spacing: var(--ls-fix-text); text-transform: none; } /* leyenda (rol de Söhne Breit): sans, mayúsculas, 10 → 12 px */ .caption { margin: 0; font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: var(--fs-caption); font-weight: 400; line-height: 1.5; letter-spacing: calc(.18px + var(--ls-fix-caption)); text-transform: uppercase; color: var(--c-ink); } @media (min-width: 576px) { .caption { font-size: var(--fs-caption-sm); letter-spacing: calc(.24px + var(--ls-fix-caption)); } } .caption--plain { text-transform: none; } .text-small { font-size: .9375rem; line-height: 1.5; } @media (min-width: 768px) { .text-small { font-size: 1.125rem; } } .font-sans, .legend { font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); letter-spacing: 0; font-weight: 400; } .legend { margin: 0; font-size: .75rem; line-height: 1.75; color: var(--c-ink); } .legend a { color: var(--c-accent-text); text-decoration: none; } .legend a:hover { color: var(--c-accent-dark); text-decoration: none; } /* 4. ENLACES Y BOTONES ---------------------------------------------------- */ a { color: var(--c-accent-text); text-decoration: none; background-color: transparent; } a:hover { color: var(--c-accent-dark); text-decoration: underline; } /* enlace de texto en el contenido: filete en reposo al 35 % y, al pasar o enfocar, la línea se dibuja de izquierda a derecha a plena intensidad (sin text-decoration). Especificidad mínima: el css de una página siempre manda. */ :where(.row, .next-ch, .legend, .form-done, .hero__text) a:where(:not(.btn, .gal-item, .news-card__media, .gal-nav a, .news-card a, .pod-viewer a, .next-ch__link, .icon-inline)) { color: var(--c-accent-text); text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(rgba(101,109,94,.35), rgba(101,109,94,.35)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-fine), color .3s ease; } :where(.row, .next-ch, .legend, .form-done, .hero__text) a:where(:not(.btn, .gal-item, .news-card__media, .gal-nav a, .news-card a, .pod-viewer a, .next-ch__link, .icon-inline)):is(:hover, :focus-visible) { color: var(--c-accent-dark); text-decoration: none; background-size: 100% 1px, 100% 1px; } /* en el texto del hero (blanco sobre foto desde 768, tinta sobre piedra debajo) el enlace hereda el color del texto */ :where(.hero__text) a:where(:not(.btn)) { color: inherit; } :where(.hero__text) a:where(:not(.btn)):is(:hover, :focus-visible) { color: inherit; } @supports (color: color-mix(in srgb, red 50%, transparent)) { :where(.hero__text) a:where(:not(.btn)) { background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)); } } .btn { display: inline-block; padding: var(--btn-pad); border: 1px solid var(--c-ink); border-radius: var(--radius); background: transparent; color: var(--c-ink); font-family: var(--font-serif); font-size: var(--fs-btn); font-size-adjust: var(--fsa-serif); /* propio: dentro de .form heredaba el de la sans y crecía un 4,6 % */ font-weight: var(--fw-small); line-height: 1.5; letter-spacing: .1em; /* 12 px → 1,2 px: rótulo con aire (antes −.07em) */ word-spacing: normal; text-transform: uppercase; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .4s var(--ease-fine), background-color .4s var(--ease-fine), border-color .4s var(--ease-fine), box-shadow var(--t-ui), opacity .2s ease; } .btn:hover { text-decoration: none; } /* relleno al pasar el ratón solo con ratón; en táctil el botón no se queda relleno después de tocarlo: responde solo mientras se pulsa */ @media (hover: hover) { .btn:hover { background-color: var(--c-accent-text); border-color: var(--c-accent-text); color: var(--c-paper); } } .btn:active { opacity: .85; } @media (hover: none) { .btn:not(.btn--dark):active { background-color: var(--c-accent-text); border-color: var(--c-accent-text); color: var(--c-paper); } } .btn:focus { outline: 0; box-shadow: var(--focus-ring); } /* teclado: contorno de 2 px + 2 px de separación además del halo (619) */ .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: var(--focus-ring); } .btn--dark { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); transition: opacity .25s ease; } .btn--dark:hover { background-color: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); opacity: .9; } .btn--hero { padding: .75rem 1.5rem; border-color: var(--c-on-dark); color: var(--c-on-dark); } .btn--submit { padding: 12px 24px; } @media (hover: hover) { .btn--submit:hover { color: #fff; } } .btn--submit:active { opacity: .8; } /* 5. CABECERA ------------------------------------------------------------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; height: calc(var(--header-h) + var(--safe-top)); padding: var(--header-pad); padding-top: calc(var(--header-pad) + var(--safe-top)); padding-left: max(var(--header-pad), env(safe-area-inset-left)); padding-right: max(var(--header-pad), env(safe-area-inset-right)); background-color: transparent; box-shadow: 0 0 1px rgba(0,0,0,0); transition: all var(--t-header); } .site-header__bar { position: relative; display: flex; flex: none; width: 100%; align-items: center; justify-content: space-around; } .site-nav { display: none; } .site-nav ul { display: flex; flex-wrap: nowrap; gap: var(--nav-gap); margin: 0; padding: 0; list-style: none; } /* la línea de 1 px queda 8 px bajo el texto y del mismo ancho, como en 619; en vez de aparecer de golpe se dibuja desde el centro (.45 s). El ancho del enlace no cambia: está calibrado para que el menú quepa entre 1200 y 1319 */ .site-nav__link { display: block; padding: 8px 0 9px; border-bottom: 0; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; color: var(--c-on-dark); font-size: .75rem; font-weight: var(--fw-small); line-height: 1; letter-spacing: calc(var(--ls-nav) + var(--ls-fix-upper)); word-spacing: var(--ws-fix-upper); text-transform: uppercase; white-space: nowrap; } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--c-on-dark); text-decoration: none; background-size: 100% 1px; } .site-nav__link:focus-visible { outline: 0; } @media (prefers-reduced-motion: no-preference) { .site-nav__link { transition: background-size .45s var(--ease-fine); } } /* 15-oct (Raúl: logo negro): con la cabecera transparente (sobre los heros) el menú y el logo van en NEGRO y detrás lleva un velo color papel que baja desde el borde superior y se desvanece (≈ 190 px; 150 en móvil). Así se leen sobre follaje, fachadas o cielo sin tapar la foto. No aplica a la barra sólida (ya va sobre papel) ni a la intro de la portada, que tiene su propia bruma detrás del logo grande */ body:not(.nav-solid) .site-header:not(.is-solid) .site-nav__link, body:not(.nav-solid) .site-header:not(.is-solid) .site-nav__link:hover, body:not(.nav-solid) .site-header:not(.is-solid) .site-nav__link:focus-visible { color: var(--c-logo); } body:not(.nav-solid) .site-header:not(.is-solid)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; height: calc(190px + var(--safe-top, 0px)); background: linear-gradient(rgba(238,237,230,.88) 0%, rgba(238,237,230,.72) 60%, rgba(238,237,230,0) 100%); } @media (min-width: 768px) { body:not(.nav-solid) .site-header:not(.is-solid)::before { height: calc(190px + var(--safe-top, 0px)); } } html.js body.page-home:not(.intro-done) .site-header::before { display: none; } /* intro de la portada: el logo grande y negro lleva detrás una bruma clara en elipse que se desvanece del todo */ html.js body.page-home:not(.intro-done) .site-header .site-logo { position: relative; } html.js body.page-home:not(.intro-done) .site-header .site-logo::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; width: min(196%, 100vw); height: 244%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(238,237,230,var(--logo-mist, .5)), rgba(238,237,230,var(--logo-mist-mid, .22)) 52%, rgba(238,237,230,0)); } @media (min-width: 1200px) { .site-nav { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; padding: 0 var(--nav-inset) var(--nav-lift); transition: all var(--t-header); } .site-nav--left { padding-left: 0; } .site-nav--right { padding-right: 0; } .site-nav--left ul { justify-content: flex-end; } .site-nav--right ul { justify-content: flex-start; } .site-nav__link { font-size: var(--fs-nav); } } @media (min-width: 1500px) { .site-nav { padding-left: var(--nav-inset-xl); padding-right: var(--nav-inset-xl); } .site-nav--left { padding-left: 0; } .site-nav--right { padding-right: 0; } .site-nav ul { gap: var(--nav-gap-xl); } .site-nav__link { font-size: var(--fs-nav-xl); } } /* logo real como máscara, en negro (--c-logo) en todos los estados; el ancho anima 1.25 s */ .site-logo { display: block; flex: none; line-height: 0; } .site-logo__mark { display: block; width: var(--logo-w-mobile); aspect-ratio: var(--logo-ratio); background-color: var(--c-logo); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; transition: width var(--t-header); } @media (min-width: 768px) { .site-header .site-logo__mark { width: var(--logo-w); } } @media (min-width: 1500px) { .site-header .site-logo__mark { width: var(--logo-w-xl); } } /* portada, arriba y con la intro terminada: 125 / 188 px */ @media (min-width: 768px) { :where(body.page-home) .site-header .site-logo__mark { width: var(--logo-w-xl); } } /* portada arriba entre 1200 y 1353 px: con el menú completo a los lados, un logo de 188 empujaría el último enlace a menos de 30 px del borde. Ahí el logo crece con la pantalla, de 150 (≤ 1316) a 188 (1354), y el menú no se mueve */ @media (min-width: 1200px) and (max-width: 1353.98px) { :where(body.page-home) .site-header .site-logo__mark { width: clamp(150px, calc(100vw - 1166px), var(--logo-w-xl)); } } /* B. fija y compacta (scrollY > 0), todavía transparente */ .site-header.is-pinned { position: fixed; height: calc(var(--header-h-pinned) + var(--safe-top)); } .site-header.is-pinned .site-nav { padding-bottom: 0; } @media (min-width: 1200px) { .site-header.is-pinned .site-logo__mark { width: var(--logo-w-pinned); } } /* 768-1199, barra compacta de 84 px (fija o con el menú abierto): el logo de 148 px no cabe; baja a 120 (63 px de alto) */ @media (min-width: 768px) and (max-width: 1199.98px) { .site-header.is-pinned:not(.is-solid) .site-logo__mark, .site-header.nav-open .site-logo__mark { width: 120px; } } @media (max-width: 1199px) { .site-header.is-pinned { transition: all var(--t-header-compact); } } /* C. sólida (scrollY > innerHeight - 100, o > 10 bajo 768) */ .site-header.is-solid { background-color: var(--c-paper); box-shadow: var(--shadow-header); } .site-header.is-solid .site-nav__link, body.nav-solid .site-header .site-nav__link { color: var(--c-accent-text); } .site-header.is-solid .site-logo__mark, body.nav-solid .site-header .site-logo__mark { background-color: var(--c-logo); } .site-header.is-solid .site-logo__mark { width: var(--logo-w-solid-mobile); } @media (min-width: 1200px) { .site-header.is-solid .site-logo__mark { width: var(--logo-w-pinned); } } @media (min-width: 768px) and (max-width: 1199.98px) { .site-header.is-solid .site-logo__mark { width: 94px; } } /* tableta: como en computador, sin saltar de 148 a 63 */ /* D. plantilla de menú sólido: mismo aspecto desde el scroll 0 (sin sombra hasta .is-solid) */ body.nav-solid .site-header { background-color: var(--c-paper); } body.nav-solid main { padding-top: var(--solid-top); } /* botón del menú (solo < 1200, y solo cuando la barra es sólida o en plantilla sólida) */ .nav-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--c-accent-text); font-family: var(--font-serif); font-size: .75rem; font-weight: var(--fw-small); line-height: 1; letter-spacing: var(--ls-caps); word-spacing: normal; text-transform: uppercase; } .nav-toggle:focus { outline: 0; } .nav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .nav-toggle__icon { position: relative; display: block; width: 40px; height: 40px; } .nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 8px; width: 24px; height: 1px; background: currentColor; } .nav-toggle__icon::before { top: 12px; box-shadow: 0 7px 0 currentColor; } .nav-toggle__icon::after { top: 26px; } .site-header.nav-open .nav-toggle__icon::before { top: 19px; left: 8px; box-shadow: none; transform: rotate(45deg); } .site-header.nav-open .nav-toggle__icon::after { top: 19px; left: 8px; transform: rotate(-45deg); } @media (max-width: 1199px) { .site-header.is-solid .nav-toggle, body.nav-solid .site-header .nav-toggle { display: flex; } } /* menú móvil: panel completo bajo la cabecera fijada (84 px). Es fijo y se desplaza por dentro, así cabe en cualquier pantalla (también en horizontal); site.js bloquea el scroll de la página, deja main y pie inertes y atrapa el foco. Entra con un fundido de .2 s (619 lo muestra de golpe; con movimiento reducido sigue siendo instantáneo) */ .mobile-nav { display: none; position: fixed; top: calc(var(--header-h-pinned) + var(--safe-top)); left: 0; right: 0; bottom: 0; margin-top: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--c-paper); } .mobile-nav__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; height: auto; min-height: 100%; padding: 24px max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: var(--c-paper); } .mobile-nav ul { display: flex; flex-direction: column; justify-content: center; gap: 0; min-height: 0; margin: 0; padding: 0; list-style: none; text-align: center; } .mobile-nav__link { display: block; padding: 12px 0; color: var(--c-accent-text); font-size: var(--fs-nav-mobile); font-weight: var(--fw-display); line-height: 1.25; letter-spacing: .06em; word-spacing: normal; text-transform: uppercase; } .mobile-nav__link:hover { color: var(--c-accent-dark); text-decoration: none; } @media (max-width: 1199px) { .site-header.nav-open .mobile-nav { display: block; animation: navIn .2s ease both; } body.nav-open-body::after { content: ""; position: fixed; inset: 0; z-index: 3; background: var(--overlay-nav-open); } } @keyframes navIn { from { opacity: 0; } to { opacity: 1; } } @media (max-height: 500px) and (orientation: landscape) { .mobile-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } .mobile-nav__link { font-size: 1.125rem; padding: 9px 0; } } /* 6. INTRO DE PORTADA (body.page-home sin .intro-done) -------------------- */ /* Solo con JavaScript: la clase «js» de la pone un script del . Sin JS la portada nunca se bloquea. */ html.js body.page-home:not(.intro-done) { height: 100vh; height: 100dvh; overflow: hidden; } html.js body.page-home:not(.intro-done) .intro-hide, html.js body.page-home:not(.intro-done) .site-footer { display: none; } html.js body.page-home:not(.intro-done) .site-header { height: 100vh; height: 100dvh; pointer-events: none; } html.js body.page-home:not(.intro-done) .site-header .site-logo__mark { width: var(--logo-w-splash-mobile); } html.js body.page-home:not(.intro-done) .site-header .site-nav { opacity: 0; } html.js body.page-home:not(.intro-done) .site-header .nav-toggle { display: none; } @media (min-width: 992px) { html.js body.page-home:not(.intro-done) .site-header .site-logo__mark { width: var(--logo-w-splash); } } /* logo negro en la intro: la bruma clara (sección 5) se suaviza, la película manda. La sombra oscura que css/index.css ponía detrás del logo cuando era BLANCO (.home-hero::before) le quitaba contraste al negro: se apaga desde aquí */ html.js body.page-home:not(.intro-done) .site-header .site-logo { --logo-mist: .5; --logo-mist-mid: .22; } body.page-home .home-hero::before { content: none; } .site-header.is-settling { pointer-events: none; } /* aplicar un estado sin animarlo (visita repetida, saltos del carrusel) */ .no-transition, .no-transition * { transition: none !important; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0,100%,0); } to { opacity: 1; transform: none; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-in-up { opacity: 0; } body.intro-done .fade-in-up, body:not(.page-home) .fade-in-up { animation: fadeInUp var(--fade-in-up) ease forwards; } body.intro-done .fade-in-up.delay-1, body:not(.page-home) .fade-in-up.delay-1 { animation-delay: .5s; } /* 7. PIE ------------------------------------------------------------------ */ /* Rejilla de 619 (_global.md §5): contenedor con 15 px de canal; bajo 768 todo apilado y centrado (padding 30px 25px bajo 576, bloque de logos al 80 % con margen 20px auto, 8 px entre líneas); desde 768 una fila: logos en 4/12 a la izquierda y textos en 8/12 a la derecha, separados 8 px, que parten línea cuando no caben. */ .site-footer { position: relative; z-index: 9; flex: none; padding: var(--footer-pad-mobile); background: var(--c-stone); color: var(--c-ink); font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); font-size: var(--fs-footer); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: center; } .site-footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); } .site-footer__inner { display: flex; flex-direction: column; align-items: center; padding: 0 15px; } /* enlaces del pie: filete en reposo al 30 % y la línea que se dibuja al pasar (ya no van subrayados siempre) */ .site-footer a { color: var(--c-ink); text-decoration: none; } .site-footer__legal a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(rgba(43,43,39,.3), rgba(43,43,39,.3)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-fine); } .site-footer a:hover { color: var(--c-ink); text-decoration: none; } .site-footer__legal a:is(:hover, :focus-visible) { background-size: 100% 1px, 100% 1px; } .site-footer .sep { opacity: .5; } /* teléfono: zonas de toque de 44 px sin cambiar el dibujo (el filete queda bajo el texto, no bajo la zona) */ @media (max-width: 767.98px) { .site-footer__legal a { display: inline-block; padding: 12px 6px; background-position: 6px calc(100% - 12px), 6px calc(100% - 12px); background-size: 0 1px, calc(100% - 12px) 1px; } .site-footer__legal a:is(:hover, :focus-visible) { background-size: calc(100% - 12px) 1px, calc(100% - 12px) 1px; } .site-footer__links--legal { gap: 16px; } .site-footer__legal { gap: 0; } /* los dos enlaces principales se apilan o se reparten sin dejar el separador colgando al final de una línea */ .site-footer__links--main { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; } .site-footer__links--main .sep { display: none; } } .site-footer p { margin: 0; line-height: 1.75; } .site-footer__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; width: 80%; margin: 20px auto; } .site-footer__logos a { display: block; line-height: 0; text-decoration: none; } .site-footer__tr33 .site-logo__mark { width: 68px; background-color: var(--c-logo); transition: none; } .site-footer__urbania img { display: block; width: auto; height: 36px; } .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; } .site-footer__legal > * { flex: 0 0 100%; } .site-footer__links--legal { display: flex; justify-content: center; gap: 8px; } @media (min-width: 576px) { .site-footer { padding: var(--footer-pad); padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .site-footer__logos { width: auto; margin: 0; } .site-footer__legal > * { flex: 0 0 auto; } } @media (min-width: 768px) { .site-footer__inner { flex-direction: row; min-height: 40px; padding: 0; } .site-footer__logos { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 15px; justify-content: flex-start; flex-wrap: nowrap; } .site-footer__legal { flex: 0 0 66.6667%; max-width: 66.6667%; width: auto; padding: 0 15px; justify-content: flex-end; text-align: right; } /* orden visual de 619 desde 768: enlaces · legales · © · nota (en el HTML, y bajo 768, el © va antes de los legales) */ .site-footer__links--legal { order: 2; } .site-footer__copy { order: 3; } .site-footer__fine { order: 4; } } /* 8. HERO INTERIOR -------------------------------------------------------- */ /* móvil: foto a pantalla completa y debajo banda piedra con el texto */ .hero { position: relative; overflow: hidden; background: var(--c-stone); transition: all var(--t-hero); } .hero__bg { position: relative; height: 100vh; height: 100dvh; overflow: hidden; transform-origin: center; transition: all var(--t-hero); } .hero__bg img, .hero__bg video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--hero-pos-m, 50% 0%); } /* (15-oct) el velo oscuro superior del hero se retiró: el menú y el logo van en negro sobre el velo claro de la cabecera */ .hero__veil { position: relative; z-index: 2; padding: 100px max(10px, env(safe-area-inset-right)) 100px max(10px, env(safe-area-inset-left)); background: var(--c-stone); color: var(--c-ink); text-align: center; } .hero__text { max-width: var(--w-bigtext); margin: 0 auto; padding: 0 20px; } .hero__text h1 { margin: 0 0 25px; color: inherit; } .hero__text p { margin: 0 0 1rem; font-size: var(--fs-lead); font-weight: var(--fw-text); line-height: var(--lh-lead); } .hero__text p:last-child { margin-bottom: 0; } .hero__text br, .br-lg, .br-xl { display: none; } .hero.is-compact .hero__bg { height: 95vw; min-height: 95vw; transform: translateY(80px); } @media (min-width: 992px) { .hero__text br, .br-lg { display: block; } } @media (min-width: 1200px) { .br-xl { display: block; } } /* >= 768: foto fija + velo de 200vh que sube con el scroll (300vh en total, sin JS) */ @media (min-width: 768px) { .hero { min-height: 100vh; min-height: 100dvh; padding-top: 100vh; padding-top: 100dvh; -webkit-clip-path: inset(0); clip-path: inset(0); } .hero__bg { position: fixed; top: 0; left: 0; right: 0; z-index: 1; width: 100%; height: 100vh; height: 100dvh; } .hero__bg img, .hero__bg video { object-position: var(--hero-pos, 50% 0%); } .hero__veil { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 200vh; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); color: var(--c-hero-text); background: var(--overlay-hero-page); } .hero__text { width: 100%; } .hero__text p { font-size: var(--fs-lead-md); } } @media (min-width: 1401px) { .hero__bg img, .hero__bg video { object-position: var(--hero-pos, 50% 50%); } } /* 9. FILAS Y CAPÍTULOS ---------------------------------------------------- */ .band-paper { --band: var(--c-paper); } .band-white { --band: var(--c-paper-alt); } .band-stone { --band: var(--c-stone); } .band-sand { --band: var(--c-sand); } .chapter { position: relative; z-index: 1; background: var(--band, var(--c-paper)); } .row { --row-pt: var(--row-pad-y); --row-pb: var(--row-pad-y); position: relative; z-index: 1; padding: var(--row-pt) var(--row-pad-x) var(--row-pb); /* teléfono en horizontal: el contenido no se mete bajo la muesca (sin efecto donde no hay zona segura) */ padding-left: max(var(--row-pad-x), env(safe-area-inset-left)); padding-right: max(var(--row-pad-x), env(safe-area-inset-right)); background: var(--band, var(--c-paper)); } .row.section-top, .chapter > .row:first-child { --row-pt: var(--section-pad); } .row.section-bottom, .chapter > .row:last-child { --row-pb: var(--section-pad); } .row__inner { display: flex; flex-direction: column; width: 100%; max-width: var(--w-row); margin: 0 auto; } .row__inner > *, .col > * { margin: var(--module-gap); } .row__inner > .cols { margin: 0; } .w-full { max-width: none; } .w-wide { max-width: var(--w-wide); } .w-contact { max-width: var(--w-contact); } .w-illustration { max-width: var(--w-illustration); } .w-text { max-width: var(--w-text); } .w-bigtext { max-width: var(--w-bigtext); } /* color por defecto de los títulos dentro de una fila: acento */ :where(.row) :is(h1, h2, h3, .h1, .h2, .h3) { color: var(--c-accent); } /* bloque de varios párrafos que cuenta como un solo módulo */ .rich > :first-child { margin-top: 0; } .rich > :last-child { margin-bottom: 0; } .rich h3 { font-size: 1.5rem; margin-bottom: 8px; } .row__inner .btn, .col .btn { align-self: flex-start; } /* introducción centrada de capítulo: H2 de dos líneas + párrafo en 750 px */ .t-center { text-align: center; } .t-center > .btn, .row__inner.t-center .btn { align-self: center; } .w-text > h2, .w-text > .h2 { margin-bottom: 5px; } /* intro en mayúsculas: 30 px del título al párrafo (20 px a ≤600), como en «location» de 619 */ .w-text > .h2--upper { margin-bottom: 10px; } @media (max-width: 600px) { .w-text > .h2--upper { margin-bottom: 0; } } /* fila a sangre: sin padding ni márgenes */ .row--fullbleed { padding: 0 !important; } .row--fullbleed > .row__inner { max-width: none; } .row--fullbleed > .row__inner > *, .row--fullbleed > * { margin: 0; } /* fila de carrusel: sin padding lateral a ningún ancho */ .row--carousel { padding-left: 0; padding-right: 0; } .row--carousel > .row__inner { max-width: none; } .row--carousel > .row__inner > *, .row--carousel > * { margin: 0; } /* ayudas de móvil (≤600) para los ajustes por fila de 619; ver STYLEGUIDE 6.5 */ @media (max-width: 600px) { .row--flush-m { --row-pt: 0px !important; --row-pb: 0px !important; } .row--flush-top-m { --row-pt: 0px !important; } .row--flush-bottom-m { --row-pb: 0px !important; } .mt-60-m { margin-top: 60px !important; } .mb-60-m { margin-bottom: 60px !important; } .mb-0-m { margin-bottom: 0 !important; } } /* 10. FOTOS Y LEYENDAS ---------------------------------------------------- */ .photo { position: relative; display: block; line-height: 0; } .photo img, .photo video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, auto); object-fit: cover; object-position: var(--pos, 50% 50%); } .photo .caption { padding: 10px 0 20px; text-align: left; } .photo--over .caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 15px; color: var(--c-hero-text); } /* degradado inferior mínimo bajo la leyenda blanca (el mismo recurso del slider de portada y de .slider--shade). Salida: photo--no-shade (foto oscura) · photo--caption-dark (leyenda en tinta) · photo--caption-dark-md desde 768 */ .photo--over:not(.photo--caption-dark):not(.photo--no-shade)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 110px; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0)); } @media (min-width: 768px) { .photo--over.photo--caption-dark-md::after { content: none; } /* compatibilidad: residencias marca su leyenda en tinta con una clase propia (pasar a photo--caption-dark-md) */ .photo--over.res-caption-dark::after { content: none; } } @media (max-width: 575.98px) { .caption { font-size: .6875rem; } /* 10 → 11 px */ .photo--over:not(.photo--caption-dark):not(.photo--no-shade)::after { height: 80px; background: linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0)); } .photo--over:not(.photo--caption-dark):not(.photo--no-shade) .caption { text-shadow: 0 0 8px rgba(0,0,0,.35); } } /* tono de espera: ninguna foto ni video deja una caja vacía mientras carga. El tono va en el propio medio (así la leyenda que va debajo no queda sobre color) y en los contenedores que miden exactamente lo que la imagen */ main :is(.photo, .carousel__slide, .slider__slide) :is(img, video), .photo--over, .photo:not(:has(> figcaption)), .gal-item, .news-card__media, .team-card__img, .hero__bg { background-color: var(--c-wait); } /* fundido al cargar (lo pone site.js solo en imágenes que todavía no habían llegado y solo dentro de esos contenedores; las ya cargadas nunca se ocultan y sin JS nada se oculta). Depende de la red, no del scroll */ html.js img.fade-media { opacity: 0; transition: opacity .6s ease, transform .9s var(--ease-soft); } html.js img.fade-media.is-loaded { opacity: 1; } .photo--over-right .caption { text-align: right; } .photo--caption-dark .caption { color: var(--c-ink); } .photo--caption-shadow .caption { text-shadow: 0 0 10px #000; } /* foto clara: leyenda en tinta desde 768 y blanca con sombra por debajo */ .photo--caption-dark-md .caption { text-shadow: 0 0 10px #000; } @media (min-width: 768px) { .photo--caption-dark-md .caption { color: var(--c-ink); text-shadow: none; } } .ar-16x10 { --ar: 16 / 10; } .ar-16x9 { --ar: 16 / 9; } .ar-wide { --ar: 1360 / 713; } .ar-5x6 { --ar: 660 / 778; } .ar-4x5 { --ar: 635 / 793; } .ar-1x1 { --ar: 1 / 1; } .ar-3x2 { --ar: 100 / 66; } .ar-1024x743 { --ar: 1024 / 743; } /* slide apaisado de «amenities» */ .ar-1024x999 { --ar: 1024 / 999; } /* slide casi cuadrado de «amenities» */ .ar-1360x741 { --ar: 1360 / 741; } /* fotos anchas con margen de «residences» */ .ar-1360x700 { --ar: 1360 / 700; } /* 11. COLUMNAS ------------------------------------------------------------ */ .cols { display: flex; align-items: flex-start; width: 100%; } .col { display: flex; flex-direction: column; flex: 0 0 50%; width: 50%; min-width: 0; } /* texto + imagen 50/50: texto de 560 px, canal de 140 px, imagen de 660 px; alineadas ARRIBA */ .cols--text-image > .col--text:first-child, .cols--text-text > .col:first-child { padding-right: var(--col-inset); } .cols--text-image > .col--text:last-child, .cols--text-text > .col:last-child { padding-left: var(--col-inset); } @media (min-width: 576px) { .cols--text-image > .col--media > .photo { margin: 30px var(--module-gap) 40px; } } /* título → párrafo: 40 px (dos márgenes de módulo). Variante de «residences» de 619, cuyo título lleva 8 px propios: 48 px, y 28 px con las columnas apiladas */ .cols--text-image > .col--text > .title--loose { margin-bottom: 28px; } /* par de fotos verticales: 90 px entre ambas; sigue 50/50 en móvil */ .cols--pair > .col:first-child { padding-right: 25px; } .cols--pair > .col:last-child { padding-left: 25px; } @media (max-width: 768px) { .cols--pair > .col:first-child, .cols--pair > .col:last-child { padding: 0; } } @media (max-width: 600px) { .cols:not(.cols--pair) { flex-direction: column; } .cols:not(.cols--pair) > .col { flex: none; width: 100%; } .cols--reverse-mobile:not(.cols--pair) { flex-direction: column-reverse; } /* apiladas (619): el título pierde su margen inferior (20 px hasta el párrafo) y la foto que queda bajo el texto lleva 60 px arriba (80 px desde el último elemento del texto) */ .cols--text-image > .col--text > :is(h1, h2, h3, .h1, .h2, .h3) { margin-bottom: 0; } .cols--text-image > .col--text > .title--loose { margin-bottom: 8px; } .cols--text-image:not(.cols--reverse-mobile) > .col--text + .col--media > .photo { margin-top: 60px; } .cols--pair > .col:first-child > * { margin: 20px 5px 20px 20px; } .cols--pair > .col:last-child > * { margin: 20px 20px 20px 5px; } } /* fila de contacto: frase a la izquierda, formulario desde el eje central */ .cols--contact > .col--text { padding-right: 60px; } .cols--contact > .col--text > h1, .cols--contact > .col--text > .h2 { margin-bottom: 60px; } /* toda línea bajo la frase (rótulo, teléfono y las que añada la página): 20 px arriba y a los lados, 0 abajo */ .cols--contact > .col--text > * + * { margin: 20px 20px 0; } .cols--contact > .col > .form, .cols--contact > .col > .form-done { margin: 20px 20px 20px 0; padding: 20px 0; } @media (min-width: 1441px) { .cols--contact > .col--text { padding-right: 100px; } } @media (max-width: 768px) { .cols.cols--contact { flex-direction: column; } .cols--contact > .col { flex: none; width: 100%; } .cols--contact > .col--text { padding-right: 0; text-align: center; } .cols--contact > .col--text > h1, .cols--contact > .col--text > .h2 { margin-bottom: 20px; } .cols--contact > .col--text > :last-child { margin-bottom: 20px; } .cols--contact > .col > .form, .cols--contact > .col > .form-done { margin: 20px; } } @media (max-width: 767px) { .cols--contact > .col > .form, .cols--contact > .col > .form-done { padding: 0; } } /* 12. CITA ---------------------------------------------------------------- */ .quote-block { display: block; } .quote { margin: 0 0 1.5rem; font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: 1.25; letter-spacing: var(--ls-fix-text); text-transform: none; color: var(--c-accent); text-indent: var(--quote-indent, -.4em); } .quote--plain { text-indent: 0; } /* la arena como color de texto queda prohibida (2,21:1): .quote--sand se mantiene por compatibilidad, en acento */ .quote--sand { color: var(--c-accent); } .quote-block cite { display: block; font-style: normal; } .quote-block cite p { margin: 0; font-size: .875rem; line-height: 1.75; color: var(--c-ink); } .quote-block cite p:first-child { margin-bottom: .125rem; } .nowrap { white-space: nowrap; } @media (min-width: 768px) { .quote { margin-bottom: 2.125rem; } .quote--plain { text-indent: 0; } .quote-block cite p { font-size: 1rem; } } @media (min-width: 992px) { .quote { font-size: var(--fs-h3-lg); } } /* 13. CARRUSEL CENTRADO --------------------------------------------------- */ .carousel { position: relative; overflow: hidden; width: 100%; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .carousel:not(.is-ready) { display: flex; overflow-x: auto; } /* alto del bloque = alto de imagen + 40 px como mínimo (619: 645 px a 1440 y 196 px a 390, aunque la leyenda de una línea solo reserve 38 / 35 px); el alto de imagen se redondea a píxeles enteros para que las filas siguientes no caigan en posiciones fraccionarias */ .carousel { --carousel-h: 40vw; } @supports (height: round(1vw, 1px)) { .carousel { --carousel-h: round(40vw, 1px); } } .carousel__track { display: flex; align-items: flex-start; min-height: calc(var(--carousel-h) + 40px); will-change: transform; transition: transform var(--slide-speed) var(--slide-ease); } .carousel.is-dragging .carousel__track { transition: none; } .carousel.is-dragging { cursor: grabbing; } .carousel__slide { position: relative; flex: none; margin: 0; padding: 0 14px; } .carousel__slide img, .carousel__slide video { display: block; width: auto; max-width: none; height: var(--carousel-h); margin: 0 0 40px; aspect-ratio: var(--ar, auto); object-fit: cover; object-position: var(--pos, 50% 50%); -webkit-user-drag: none; } .carousel__slide .caption { position: absolute; left: 20px; right: 20px; bottom: 0; margin: 0; text-align: center; } .carousel__slide .caption, .carousel__arrow { opacity: 0; pointer-events: none; transition: opacity var(--t-fade); } .carousel__slide.is-active .caption, .carousel__slide.is-active .carousel__arrow { opacity: 1; pointer-events: all; } /* zona de toque de 44 × 44 a todos los anchos; el centro del chevrón queda donde estaba (en el borde del slide) y el dibujo (5 × 9 / 15 × 25) no cambia */ .carousel__arrow { position: absolute; top: calc(var(--carousel-h) / 2); z-index: 2; transform: translateY(-50%); display: block; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none; font-size: 0; line-height: 0; color: var(--c-accent); cursor: pointer; } .carousel__arrow:focus { outline: 0; } .carousel__arrow:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; } .carousel__arrow--prev { left: -22px; } .carousel__arrow--next { right: -22px; } .carousel__arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; transform: translate(-50%,-50%); background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 26'%3E%3Cpath d='M15.78.38.78 12.88l15 12.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 26'%3E%3Cpath d='M15.78.38.78 12.88l15 12.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .carousel__arrow--next::before { transform: translate(-50%,-50%) scaleX(-1); } /* con ratón el chevrón se desplaza 3 px hacia donde lleva */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .carousel__arrow::before { transition: transform .35s ease; } .carousel__arrow--prev:hover::before { transform: translate(calc(-50% - 3px), -50%); } .carousel__arrow--next:hover::before { transform: translate(calc(-50% + 3px), -50%) scaleX(-1); } } /* teléfono: la foto activa ocupa el 86 % del ancho (349 × 218 a 390) y los vecinos siguen asomando (centerMode) */ @media (max-width: 767.98px) { .carousel { --carousel-h: 56vw; } @supports (height: round(1vw, 1px)) { .carousel { --carousel-h: round(56vw, 1px); } } .carousel__slide { padding: 0 10px; } } @media (min-width: 768px) { .carousel { --carousel-h: 42vw; } @supports (height: round(1vw, 1px)) { .carousel { --carousel-h: round(42vw, 1px); } } .carousel__slide { padding: 0 60px; } .carousel__slide .caption { left: 60px; right: 60px; } .carousel__arrow::before { width: 15px; height: 25px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 26'%3E%3Cpath d='M15.78.38.78 12.88l15 12.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 26'%3E%3Cpath d='M15.78.38.78 12.88l15 12.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); } } /* 14. SLIDER A SANGRE ----------------------------------------------------- */ .slider { position: relative; overflow: hidden; width: 100%; background: var(--band, var(--c-paper)); touch-action: pan-y; -webkit-user-select: none; user-select: none; } .slider__viewport { overflow: hidden; } .slider__track { display: flex; will-change: transform; transition: transform var(--slide-speed) var(--slide-ease); } .slider.is-dragging .slider__track { transition: none; } .slider__slide { flex: 0 0 100%; width: 100%; min-width: 0; } /* video en el slider: ya envuelto (.slider__slide) o hijo directo de un [data-slider]; nunca el video propio de la portada (.reveal__stage, sin data-slider), que tiene su regla en css/index.css */ .slider img, .slider__slide video, .slider[data-slider] > video { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; -webkit-user-drag: none; } .slider:not(.is-ready) > img + img, .slider:not(.is-ready) > video + img, .slider:not(.is-ready) > img + video, .slider:not(.is-ready) > video + video { display: none; } .slider__caption { margin: 0; padding: 14px 30px 0; text-align: center; font-family: var(--font-serif); font-size: .75rem; font-weight: var(--fw-small); line-height: 1; letter-spacing: var(--ls-caps); word-spacing: normal; text-transform: uppercase; color: var(--c-ink); transition: all ease 250ms; } .slider__caption.is-fading { opacity: 0; } .slider__caption:empty { display: none; } .slider__dots { display: block; margin: 0; padding: 10px 0 12px; list-style: none; text-align: center; line-height: 0; color: var(--c-ink); } .slider__dots li { display: inline-block; width: 16px; height: 16px; margin: 0 1px; } /* el número del punto es solo para lectores de pantalla: font-size:0 no basta porque el font-size-adjust heredado lo sigue pintando; se anula el ajuste y además se saca el texto de la caja */ .slider__dot { position: relative; display: block; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; background: none; font-size: 0; font-size-adjust: none; line-height: 0; text-indent: -200px; white-space: nowrap; overflow: hidden; color: inherit; cursor: pointer; } .slider__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; opacity: .25; } .slider__dot:hover::before, .slider__dot:focus::before { opacity: 1; } .slider__dot[aria-current="true"]::before { opacity: .75; } @media (prefers-reduced-motion: no-preference) { .slider__dot::before { transition: opacity .3s ease, transform .3s ease; } } .slider__dot[aria-current="true"]::before { transform: scale(1.15); } /* teléfono: zona de toque de 32 × 44 (el punto de 7 px sigue centrado); desde 768 no cambia */ @media (max-width: 767.98px) { .slider__dots { padding-top: 0; padding-bottom: 0; } .slider__dots li, .slider__dot { width: 32px; height: 44px; } } @media (min-width: 768px) { .slider img, .slider__slide video, .slider[data-slider] > video { height: var(--slider-h, 100vh); aspect-ratio: auto; } @supports (height: 100dvh) { .slider img, .slider__slide video, .slider[data-slider] > video { height: var(--slider-h, 100dvh); } } .slider__caption { position: absolute; left: 30px; right: 30px; bottom: 50px; padding: 0; font-size: .9375rem; color: var(--c-on-dark); } /* 619: puntos de 16 px en y 876–892 de un escenario de 900 */ .slider__dots { position: absolute; left: 0; right: 0; bottom: 8px; padding: 0; color: var(--c-on-dark); } /* opcional: degradado mínimo al pie para que leyenda y puntos blancos se lean sobre fotos claras */ .slider--shade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 170px; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.36), rgba(0,0,0,.16) 45%, rgba(0,0,0,0)); } .slider--shade .slider__caption, .slider--shade .slider__dots { z-index: 2; } } /* 15. PANEL LATERAL ------------------------------------------------------- */ .panel:not(.is-ready) { display: none; } /* secuencia de 619: al abrir, el telón funde .15 s y después entra el panel (.3 s); al cerrar, el panel sale .3 s y después se va el telón */ .panel-backdrop { position: fixed; inset: 0; z-index: 1040; background: #000; opacity: 0; visibility: hidden; transition: opacity var(--t-backdrop) .3s, visibility 0s linear .45s; } .panel-backdrop.is-open { opacity: .5; visibility: visible; transition: opacity var(--t-backdrop), visibility 0s; } .panel.is-ready { position: fixed; inset: 0; z-index: 1050; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-backdrop), visibility 0s linear .3s; } /* visible desde el primer instante (sigue transparente y fuera de pantalla .15 s): así el foco puede entrar al abrir */ .panel.is-ready.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-backdrop) .15s, visibility 0s; } .panel__dialog { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0 0 0 auto; background: var(--c-sand); color: var(--c-ink); pointer-events: auto; transform: translateX(100%); transition: transform var(--t-panel); } .panel.is-open .panel__dialog { transform: none; transition-delay: .15s; } .panel__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 80px 65px 40px 40px; } /* absoluta respecto al diálogo (que no se desplaza: solo .panel__body); misma posición que la fija de 619 */ /* zona de 44 × 44 con el aspa de 34 px en el mismo centro que el botón de 25 px de 619 */ .panel__close { position: absolute; top: calc(10px + var(--safe-top)); right: 10px; z-index: 2; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: var(--c-sand); color: var(--c-ink); cursor: pointer; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .panel__close::before, .panel__close::after { transition: transform .4s var(--ease-fine); } .panel__close:hover::before { transform: rotate(135deg); } .panel__close:hover::after { transform: rotate(45deg); } } .panel__close::before, .panel__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 1px; margin: -.5px 0 0 -17px; background: currentColor; } .panel__close::before { transform: rotate(45deg); } .panel__close::after { transform: rotate(-45deg); } .panel__body h2 { margin: 4rem 0 2rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; color: var(--c-ink); } .panel__body > .sr-only:first-child + h2 { margin-top: 0; } .panel__body h2:first-child { margin-top: 0; } .panel__body a { color: var(--c-ink); text-decoration: underline; } .feature-list { margin: 0 0 2.5rem; padding: 0; list-style: none; } .feature-list li { margin: 0 0 1.5rem; font-size: 1rem; font-weight: var(--fw-text); line-height: 1.5; } @media (min-width: 576px) { .panel__dialog { width: var(--panel-w); max-width: var(--panel-max); } } @media (min-width: 768px) { .feature-list li { font-size: 1.3125rem; } } @media (min-width: 992px) { .panel__body { padding: 150px 90px 200px; } } /* 16. FORMULARIO ---------------------------------------------------------- */ .form { font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); letter-spacing: 0; font-weight: 400; } .form__row { display: flex; flex-wrap: wrap; margin: 0 -5px; } .field { position: relative; flex: 0 0 100%; max-width: 100%; margin: 0 0 var(--field-gap); padding: 0 5px; } @media (min-width: 576px) { .field { flex-basis: 50%; max-width: 50%; } .field--full { flex-basis: 100%; max-width: 100%; } } /* etiqueta fija (mensaje): 18 px de línea + 12 = el área de texto empieza 30 px bajo el borde de la etiqueta (619) */ .field label { display: block; margin: 0 0 12px; font-size: .75rem; line-height: 1.5; color: var(--c-ink); } .field input, .field select, .field textarea { display: block; width: 100%; height: var(--field-h); margin: 0; padding: .375rem .75rem; border: 1px solid transparent; border-radius: var(--radius); background-color: #fff; background-clip: padding-box; color: var(--c-input-text); font-family: var(--font-sans); font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-appearance: none; appearance: none; transition: border-color var(--t-ui), box-shadow var(--t-ui); } .field textarea { height: 142px; padding: 8px 12px 12px; resize: vertical; } .field select { padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M0 0h11L5.5 6z' fill='%235C6356'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 6px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-focus-border); box-shadow: var(--focus-ring); outline: 2px solid var(--c-input-text); outline-offset: 2px; } .field--float input, .field--float select { padding: 1.3125rem .75rem .75rem; } .field--float label { position: absolute; top: 1rem; left: calc(5px + .875rem); margin: 0; font-size: 1rem; line-height: 1.5; color: var(--c-placeholder); pointer-events: none; transition: all 250ms ease; } .field--float.has-val label, .field--float:focus-within label { top: .15rem; font-size: .75rem; } /* el campo se lee como campo sin dibujar una caja: borde inferior de 3:1 contra blanco; etiqueta a 5,3:1 */ .field--float label { color: var(--c-muted); } .field input, .field select, .field textarea { border-color: transparent; border-bottom-color: #8E9485; } .field.is-invalid :is(input, select, textarea) { border-bottom-color: var(--c-error); } .field__error { margin: 6px 0 0; font: 400 .75rem/1.4 var(--font-sans); font-size-adjust: var(--fsa-sans); letter-spacing: 0; color: var(--c-error); } .form__foot { display: flex; justify-content: space-between; align-items: stretch; } .form .legend { margin: 0; } .form .legend--consent { margin: 16px 0 24px; } /* estado final de un formulario: ocupa la caja del formulario al que sustituye (la página lo muestra y le da el foco) */ .form-done { text-align: center; outline: 0; } .form-done > :is(h2, h3) { margin: 0 0 .5rem; font-size: var(--fs-h3); font-weight: var(--fw-display); line-height: 1.25; letter-spacing: var(--ls-fix-upper); text-transform: uppercase; color: var(--c-accent); } .form-done > p { margin: 0 0 1rem; line-height: 1.5; } .form-done > p:last-child { margin-bottom: 0; } @media (min-width: 992px) { .form-done > :is(h2, h3) { font-size: var(--fs-h3-lg); } } /* 17. UTILIDADES ---------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .c-accent { color: var(--c-accent) !important; } .c-ink { color: var(--c-ink) !important; } .c-sand { color: var(--c-accent) !important; } /* arena prohibida como texto: se lee en acento */ .c-hero { color: var(--c-hero-text) !important; } .c-white { color: var(--c-on-dark) !important; } .t-left { text-align: left; } .t-upper { text-transform: uppercase !important; } /* ® discreto junto a una palabra: ® */ .reg { font-size: .55em; line-height: 0; vertical-align: .55em; letter-spacing: 0; } /* nota al pie: avisos legales, de verificación o de imagen generada. Sans de 12 px, 70 % de tinta; no es cuerpo */ .note { margin-top: 24px; max-width: 36rem; font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); font-size: .75rem; font-weight: 400; line-height: 1.6; letter-spacing: .01em; color: var(--c-muted); } .t-center > .note, .note.t-center { margin-left: auto; margin-right: auto; } .t-none { text-transform: none !important; } .fw-text { font-weight: var(--fw-text) !important; } .fw-display { font-weight: var(--fw-display) !important; } .m-0 { margin: 0 !important; } .scroll-locked { overflow: hidden !important; } /* 19. SIGUIENTE CAPÍTULO E IMÁGENES QUE SON ENLACE ---------------------------- */ /* módulo al final de cada página interior (site.js lo inserta si la página no lo trae): una invitación discreta con el lenguaje de las intros centradas de 619 (H2 en acento sobre banda clara), sin flechas ni iconos */ .next-ch { position: relative; z-index: 1; padding: 150px max(20px, env(safe-area-inset-right)) 160px max(20px, env(safe-area-inset-left)); background: var(--c-paper-alt); text-align: center; } .next-ch__label { margin: 0 0 22px; font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent-text); } .next-ch__link { display: inline-block; padding: 4px 0 8px; font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: 1.15; letter-spacing: var(--ls-fix-text); color: var(--c-accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: background-size .7s cubic-bezier(.2,.7,.2,1), color .4s ease; } .next-ch__link:hover, .next-ch__link:focus-visible { background-size: 100% 1px; color: var(--c-accent-dark); text-decoration: none; } .next-ch__aside { margin: 40px 0 0; font-size: 1rem; line-height: 1.5; } @media (min-width: 768px) { .next-ch__link { font-size: var(--fs-h2-md); } } @media (min-width: 992px) { .next-ch__link { font-size: var(--fs-h2-lg); } } @media (max-width: 767.98px) { .next-ch { padding-top: 96px; padding-bottom: 104px; } } /* en táctil no hay hover: la línea queda dibujada para que se lea como enlace */ @media (hover: none) { .next-ch__link { background-size: 100% 1px; } } /* imágenes que SON enlace (miniaturas de galería y de novedades): se acercan apenas (1.03, 900 ms). Las fotos editoriales, que no son clicables, nunca se mueven */ .gal-item { cursor: zoom-in; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .gal-item, .news-card__media { overflow: hidden; } .gal-item img, .news-card__media img { transition: transform .9s var(--ease-soft), opacity .6s ease; } .gal-item:hover img, .gal-item:focus-visible img, .news-card__media:hover img, .news-card__media:focus-visible img { transform: scale(1.03); } } /* 20. BOTÓN FLOTANTE DE WHATSAPP (Raúl, 15-oct) ------------------------------ */ /* Lo pone build.py en todas las páginas (src/partials/whatsapp.html), después del pie. Única excepción a «sin botón fijo, sin esquinas redondeadas, sin sombras»: círculo verde de WhatsApp con el glifo blanco y una sombra muy suave. Por encima del contenido, del pie y de la cabecera; por debajo de panel, visores y menú (y se oculta mientras están abiertos: site.js pone .tr33-overlay en , y durante la intro de la portada) */ .wa-float { position: fixed; z-index: 40; right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-whatsapp); color: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.12); -webkit-tap-highlight-color: transparent; transition: box-shadow .4s var(--ease-fine), transform .4s var(--ease-fine), opacity .25s ease, visibility 0s linear 0s; } .wa-float:hover, .wa-float:focus { color: #fff; text-decoration: none; } .wa-float__glyph { display: block; width: 32px; height: 32px; max-width: none; pointer-events: none; } .wa-float:focus { outline: 0; } /* foco de teclado: aro blanco pegado al círculo y contorno de tinta por fuera (se lee sobre foto y sobre papel) */ .wa-float:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.12); } .wa-float:active { opacity: .9; } @media (hover: hover) { .wa-float:hover { box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.16); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .wa-float:hover { transform: translateY(-1px); } } /* rótulo discreto a la izquierda del botón, solo con ratón y desde 768 (el nombre accesible ya está en aria-label) */ .wa-float__label { position: absolute; right: calc(100% + 12px); top: 50%; padding: 8px 11px 7px; background: var(--c-ink); color: var(--c-paper); font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: .6875rem; font-weight: 400; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08); opacity: 0; transform: translate(4px, -50%); pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease-fine); } @media (hover: hover) and (min-width: 768px) { .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); } } @media (hover: none), (max-width: 767.98px) { .wa-float__label { display: none; } } @media (max-width: 767.98px) { .wa-float { width: 52px; height: 52px; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); } .wa-float__glyph { width: 30px; height: 30px; } } /* oculto con una capa abierta (menú móvil, panel lateral, visor de galería o de podcast) y durante la intro */ /* portada: el botón aparece cuando el logo ya terminó de bajar (la cabecera se asienta en 1.25 s) */ @keyframes waIn { from { opacity: 0; } to { opacity: 1; } } html.js body.page-home.intro-done .wa-float { animation: waIn .45s ease 1.3s backwards; } /* sin «forwards»: al cerrar el menú vuelve a mandar la regla de ocultar */ @media (prefers-reduced-motion: reduce) { html.js body.page-home.intro-done .wa-float { animation: none; } } html.js body.page-home:not(.intro-done) .wa-float, html.tr33-overlay .wa-float, body.nav-open-body .wa-float { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } @media print { .wa-float { display: none; } } /* el botón no tapa el pie al final de la página: en teléfono el pie gana el alto del botón abajo (16 + 52 + 16 px); desde 768, donde el pie es una sola fila alineada a la derecha, el texto termina antes del botón (24 + 56 + 16 px) */ @media (max-width: 767.98px) { .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (min-width: 768px) { .site-footer__legal { padding-right: calc(96px + env(safe-area-inset-right)); } } /* 21. ÍCONOS Y PUNTOS CLAVE (Raúl, 15-oct: «nadie lee bloques largos») --------- */ /* Íconos de línea propios (_build/iconos/.svg, rejilla de 48, trazo 1.25). En las páginas se escriben con el marcador , que build.py cambia por el SVG en línea (class="icon"). El trazo NO escala con el tamaño (vector-effect): mide 1.25 px a 22 y a 44 px, siempre una línea fina y nítida. Color: acento */ .icon { display: inline-block; flex: none; width: 1em; height: 1em; max-width: none; color: var(--icon-color, var(--c-accent)); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; vertical-align: middle; } .icon :is(path, circle, ellipse, line, polyline, polygon, rect) { vector-effect: non-scaling-stroke; } /* sobre piedra o arena el acento no alcanza (2,3:1): ícono en acento oscuro (3,1:1, gráfico) y rótulo en tinta. En un fondo propio de piedra (p. ej. la declaración de la portada) la página pone estas dos variables */ .band-stone { --icon-color: var(--c-ink); --ip-label-color: var(--c-ink); } /* acento oscuro sobre piedra = 3,07:1, al límite */ .band-sand { --icon-color: var(--c-ink); --ip-label-color: var(--c-ink); } /* acento oscuro sobre arena = 2,4:1 */ /* puntos clave: 2 a 4 en fila, cada uno con ícono (44 px), rótulo corto (sans en mayúsculas) y una línea corta en Cormorant. Por defecto centrados (bandas como la declaración de la portada); .icon-points--left para columnas de texto (ícono a la izquierda y texto al lado, en lista) */ .icon-points { --ip-cols: 3; --ip-icon: 44px; display: grid; grid-template-columns: repeat(var(--ip-cols), minmax(0, 1fr)); gap: 36px 40px; margin: 0; padding: 0; list-style: none; text-align: center; } .icon-points:where(:has(> :nth-child(2):last-child)) { --ip-cols: 2; } .icon-points:where(:has(> :nth-child(4):last-child)) { --ip-cols: 4; } .icon-point { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; } .icon-point > .icon { width: var(--ip-icon); height: var(--ip-icon); margin: 0 0 14px; } .icon-point__label { margin: 0; font-family: var(--font-caption); font-size-adjust: var(--fsa-caption); font-size: .75rem; font-weight: 400; line-height: 1.4; letter-spacing: .16em; word-spacing: normal; text-transform: uppercase; color: var(--ip-label-color, var(--c-accent-text)); text-wrap: balance; } .icon-point__text { margin: 8px 0 0; max-width: 22em; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink); text-wrap: pretty; } @media (min-width: 768px) { .icon-point__text { font-size: var(--fs-lead-md); } } /* alineada a la izquierda: lista compacta, ícono de 40 px a la izquierda (rótulo y línea a su lado) */ .icon-points--left { --ip-cols: 1; --ip-icon: 40px; gap: 24px 40px; text-align: left; } .icon-points--left > .icon-point, .icon-points--rows > .icon-point { display: grid; grid-template-columns: var(--ip-icon) minmax(0, 1fr); column-gap: 18px; align-items: start; } .icon-points--left > .icon-point > .icon, .icon-points--rows > .icon-point > .icon { grid-row: 1 / span 2; margin: 0; } .icon-points--left .icon-point__label, .icon-points--rows .icon-point__label { padding-top: 6px; } .icon-points--left .icon-point__text, .icon-points--rows .icon-point__text { margin-top: 4px; max-width: none; } .icon-points--rows { text-align: left; } /* columnas a mano (solo si hace falta): --2 / --3 / --4 */ .icon-points--2 { --ip-cols: 2; } .icon-points--3 { --ip-cols: 3; } .icon-points--4 { --ip-cols: 4; } /* tableta: 4 puntos centrados pasan a 2 × 2 */ @media (max-width: 991.98px) { .icon-points:where(:not(.icon-points--left, .icon-points--4)):where(:has(> :nth-child(4):last-child)) { --ip-cols: 2; } } /* teléfono: 2 o 4 puntos → 2 columnas; 3 puntos → lista compacta con el ícono a la izquierda; la variante izquierda siempre en una columna */ @media (max-width: 767.98px) { .icon-points { --ip-icon: 40px; gap: 28px 20px; } .icon-points:where(:not(.icon-points--left)) { --ip-cols: 2; } .icon-points:where(:not(.icon-points--left)):where(:has(> :nth-child(3):last-child)) { --ip-cols: 1; gap: 22px; text-align: left; max-width: 25rem; margin-inline: auto; } /* bloque centrado bajo un título centrado */ .icon-points:where(:not(.icon-points--left)):where(:has(> :nth-child(3):last-child)) > .icon-point { display: grid; grid-template-columns: var(--ip-icon) minmax(0, 1fr); column-gap: 18px; align-items: start; } .icon-points:where(:not(.icon-points--left)):where(:has(> :nth-child(3):last-child)) > .icon-point > .icon { grid-row: 1 / span 2; margin: 0; } .icon-points:where(:not(.icon-points--left)):where(:has(> :nth-child(3):last-child)) .icon-point__label { padding-top: 6px; } .icon-points:where(:not(.icon-points--left)):where(:has(> :nth-child(3):last-child)) .icon-point__text { margin-top: 4px; max-width: none; } .icon-point > .icon { margin-bottom: 12px; } .icon-points--left, .icon-points--2.icon-points--left { --ip-cols: 1; } } /* ícono pequeño (22 px) delante de un rótulo o enlace: datos clave, canales de contacto, listas cortas */ .icon-inline { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; } .icon-inline > .icon { width: 22px; height: 22px; } .icon-inline > :not(.icon) { min-width: 0; } .icon-list { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; padding: 0; list-style: none; } .icon-list > li { margin: 0; line-height: 1.5; } .t-center .icon-list, .icon-list.t-center { align-items: center; } /* enlace con ícono: el filete del enlace va solo bajo el texto, no bajo el ícono */ :where(.row, .next-ch, .legend, .form-done, .hero__text) a.icon-inline > span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(rgba(101,109,94,.35), rgba(101,109,94,.35)) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease-fine); } :where(.row, .next-ch, .legend, .form-done, .hero__text) a.icon-inline:is(:hover, :focus-visible) > span { background-size: 100% 1px, 100% 1px; } /* 18. MOVIMIENTO REDUCIDO ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; } } /* 15-oct (revisión): con un visor o un panel abierto la cabecera se oculta (el título del visor ya no toca el logo y el panel no lo corta por la mitad). El menú móvil no cuenta: vive dentro de la cabecera */ html.tr33-overlay body:not(.nav-open-body) .site-header { visibility: hidden; transition: visibility 0s; } /* al instante: la cabecera anima «all» en 1.25 s */ /* íconos en línea (22-24 px): un pelo más de trazo para que no queden como hilos */ .icon-inline > .icon :is(path, circle, ellipse, line, polyline, polygon, rect) { stroke-width: 1.45px; }