/* ========================================================================== ramonfandos.es — hoja de estilos unica La identidad no es inventada: los colores, la tipografia y la geometria estan tomados de la tienda oficial ramon-fandos.bemergroup.com, para que esta web se lea como una continuacion natural de la marca y no como un sitio ajeno. naranja #ff6400 el color de accion de BEMER petroleo #203b4a fondos oscuros y botones secundarios azul #1a6c89 enlaces y apoyos tinta #1a172b texto de titulares Barlow la tipografia corporativa, servida desde este dominio esquinas rectas: BEMER no usa redondeos salvo en iconos circulares titulares en peso 400, no en negrita: es lo que le da el aire sobrio Sin dependencias externas: ni CDN, ni frameworks, ni JS de terceros. ========================================================================== */ @import url('tipografia.css?v=1d326558'); :root { --naranja: #ff6400; --naranja-hondo: #d95400; --naranja-niebla: #fff2e8; --petroleo: #203b4a; --petroleo-hondo: #162c37; --azul: #1a6c89; --azul-hondo: #145a73; --azul-niebla: #eef5f8; --tinta: #1a172b; --texto: #5c5c5c; /* Era #777777, que sobre blanco da 4,48:1 y se queda justo por debajo del minimo legible (4,5:1). Lo usan las migas, los pies de tarjeta y las letras pequenas de los precios: precisamente lo que peor se ve. */ --tenue: #6a6a6a; --linea: #e3e3e3; --gris: #f2f2f2; --papel: #ffffff; --verde: #1faa59; /* WhatsApp */ --verde-hondo: #17853f; --ancho: 1180px; --ancho-lectura: 720px; --sombra-baja: 0 1px 2px rgba(26, 23, 43, .06), 0 2px 8px rgba(26, 23, 43, .05); --sombra: 0 4px 14px rgba(26, 23, 43, .09), 0 14px 36px rgba(26, 23, 43, .07); --sombra-alta: 0 10px 28px rgba(26, 23, 43, .12), 0 28px 60px rgba(26, 23, 43, .11); --papel-velo: rgba(255, 255, 255, .96); /* cabecera translucida */ /* Texto de los articulos: algo mas suave que la tinta de los titulares. */ --prosa: #3b4654; /* Botones de contorno (sin relleno): color del texto y del borde. */ --boton-linea: #203b4a; --fuente: 'Barlow', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif; --fuente-titular: 'Barlow Condensed', 'Barlow', 'Arial Narrow', Arial, sans-serif; color-scheme: light; } /* ------------------------------------------------------------ modo oscuro --- Toda la web pasa por estas variables, asi que el tema entero cambia aqui y no hay que tocar ni una regla mas abajo. Se activa de dos maneras y en este orden: 1. La preferencia del sistema operativo (prefers-color-scheme). 2. La eleccion manual del visitante, que manda sobre la anterior y se guarda en el navegador. La aplica tema.js escribiendo data-tema en ; por eso [data-tema] va despues y con mas peso. Sobre los colores: el naranja y el azul de marca se aclaran en oscuro. Los originales (#ff6400 sobre casi negro, y sobre todo el azul #1a6c89) no llegan al contraste minimo legible, y el objetivo de este modo es leerse mejor, no parecer moderno. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --prosa: #c6ced4; /* el #3b4654 de claro es ilegible aqui */ --boton-linea: #cfd8de; /* el petroleo desaparecia sobre el fondo */ --naranja-niebla: #2b1a0f; --azul: #6ab8d6; /* el #1a6c89 sobre fondo oscuro no se lee */ --azul-hondo: #8ccbe3; --azul-niebla: #17262e; --tinta: #f2f5f7; /* titulares */ --texto: #c6ced4; /* cuerpo de texto */ --tenue: #9aa5ac; --linea: #2d3841; --gris: #1b232a; /* bandas alternas */ --papel: #131a20; /* fondo de la pagina */ --papel-velo: rgba(19, 26, 32, .94); /* En claro estas sombras son grises suaves; sobre fondo oscuro no se ven. Se sustituyen por sombras negras, mas marcadas, que si separan. */ --sombra-baja: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30); --sombra: 0 4px 14px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .35); --sombra-alta: 0 10px 28px rgba(0, 0, 0, .55), 0 28px 60px rgba(0, 0, 0, .45); color-scheme: dark; } } /* Eleccion manual: gana siempre sobre la del sistema. */ :root[data-tema="oscuro"] { --prosa: #c6ced4; --boton-linea: #cfd8de; --naranja-niebla: #2b1a0f; --azul: #6ab8d6; --azul-hondo: #8ccbe3; --azul-niebla: #17262e; --tinta: #f2f5f7; --texto: #c6ced4; --tenue: #9aa5ac; --linea: #2d3841; --gris: #1b232a; --papel: #131a20; --papel-velo: rgba(19, 26, 32, .94); --sombra-baja: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .30); --sombra: 0 4px 14px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .35); --sombra-alta: 0 10px 28px rgba(0, 0, 0, .55), 0 28px 60px rgba(0, 0, 0, .45); color-scheme: dark; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 96px; /* que la cabecera fija no tape las anclas */ -webkit-text-size-adjust: 100%; } /* El desplazamiento suave solo para quien no haya pedido menos movimiento: a quien se marea, un salto de pantalla animado le sienta peor que el corte. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.65; color: var(--texto); background: var(--papel); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; } /* Titulares en Barlow Condensed, el registro de la carteleria deportiva de BEMER: grandes, estrechos y con contraste fuerte frente al texto. */ h1, h2 { font-family: var(--fuente-titular); color: var(--tinta); font-weight: 600; line-height: 1.04; margin: 0 0 .45em; letter-spacing: .005em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 4.6rem); } h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); } h3, h4 { color: var(--tinta); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; } h3 { font-size: clamp(1.22rem, 1.12rem + .45vw, 1.5rem); font-weight: 600; } h4 { font-size: 1.08rem; font-weight: 600; } /* Palabra destacada dentro de un titular. */ h1 em, h2 em { font-style: normal; color: var(--naranja); } p { margin: 0 0 1.1em; } strong, b { font-weight: 600; color: var(--tinta); } /* Sobre fondos oscuros, la negrita hereda el blanco del entorno. */ .hero strong, .bloque--oscuro strong, .franja strong, #banner-cookies strong, .pie strong { color: inherit; } :focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; } /* --------------------------------------------------- ver mejor de verdad --- Esto es lo que ayuda a quien ve con dificultad, mas que el modo oscuro: 1. prefers-contrast: more — el visitante ha pedido a su sistema mas contraste. Se sube el del texto secundario, que es el que primero se pierde, y se subrayan los enlaces del cuerpo para no depender del color. 2. forced-colors — modo de alto contraste de Windows. El sistema impone su propia paleta; aqui solo hay que apartarse y quitar la foto del hero, que taparia el texto al desaparecer el velo oscuro. */ @media (prefers-contrast: more) { :root { --texto: #2b2b2b; --tenue: #4a4a4a; --linea: #9a9a9a; } :root[data-tema="oscuro"], :root:not([data-tema="claro"]) { --texto: #eef2f5; --tenue: #cfd7dd; --linea: #6c7a85; } .prosa a, .bloque p a { text-decoration: underline; text-underline-offset: 2px; } .boton { border-width: 2px; } } @media (forced-colors: active) { /* Sin el velo oscuro que la acompaña, la foto del hero dejaria el titular ilegible: en este modo el fondo lo pone el sistema. */ .hero--foto::after { display: none; } .boton { border: 2px solid ButtonText; } .tarjeta { border: 1px solid CanvasText; } } .contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; } .saltar { position: absolute; left: -9999px; background: var(--petroleo); color: #fff; padding: .8rem 1.3rem; z-index: 200; } .saltar:focus { left: 0; top: 0; } /* Rotulo pequeno en mayusculas, muy usado en la marca. */ .rotulo { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); margin-bottom: .9rem; } .rotulo--claro { color: var(--naranja); } /* ----------------------------------------------------------- cabecera --- */ .cabecera { position: sticky; top: 0; z-index: 100; background: var(--papel-velo); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--linea); } .cabecera__caja { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; } .marca { display: flex; flex-direction: column; line-height: 1.14; flex-shrink: 0; } .marca:hover { text-decoration: none; } .marca__nombre { font-weight: 600; font-size: 1.22rem; color: var(--tinta); letter-spacing: .01em; } .marca__rol { font-size: .68rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .13em; font-weight: 500; } .menu { display: flex; align-items: center; gap: .1rem; margin-left: auto; } .menu a { color: var(--tinta); font-weight: 500; font-size: .93rem; padding: .55rem .75rem; border-bottom: 2px solid transparent; } .menu a:hover { color: var(--naranja); text-decoration: none; } .menu a[aria-current="page"] { color: var(--naranja); border-bottom-color: var(--naranja); } .menu__grupo { position: relative; } .menu__lista { position: absolute; top: 100%; left: 0; min-width: 240px; padding: .3rem 0; background: var(--papel); border: 1px solid var(--linea); box-shadow: var(--sombra); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .menu__grupo:hover .menu__lista, .menu__grupo:focus-within .menu__lista { opacity: 1; visibility: visible; transform: none; } .menu__lista a { display: block; padding: .6rem 1.1rem; border-bottom: 0; } .menu__lista a:hover { background: var(--gris); } /* ------------------------------------------------------------ botones --- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 1rem 1.75rem; font-family: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 2px solid transparent; border-radius: 0; /* BEMER: esquinas rectas */ cursor: pointer; text-align: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .boton:hover { text-decoration: none; } .boton--naranja { background: var(--naranja); color: #fff; } .boton--naranja:hover { background: var(--naranja-hondo); } .boton--oscuro { background: var(--petroleo); color: #fff; } .boton--oscuro:hover { background: var(--petroleo-hondo); } .boton--linea { background: transparent; color: var(--boton-linea); border-color: var(--boton-linea); } /* Al pasar por encima se invierte: el relleno toma el color del borde y el texto el del fondo de la pagina. Asi funciona igual en claro y en oscuro sin escribir dos veces la regla. */ .boton--linea:hover { background: var(--boton-linea); color: var(--papel); } .boton--linea-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .boton--linea-claro:hover { background: #fff; color: var(--petroleo); border-color: #fff; } .boton--wasap { background: var(--verde); color: #fff; } .boton--wasap:hover { background: var(--verde-hondo); } .boton--pequeno { padding: .6rem 1.1rem; font-size: .82rem; } /* --------------------------------------------------------------- hero --- */ .hero { position: relative; background: var(--petroleo); color: #fff; padding: clamp(3.5rem, 2rem + 7vw, 6.5rem) 0 clamp(3rem, 1.8rem + 6vw, 5.5rem); overflow: hidden; } .hero::before { /* Franja naranja: la firma visual de la marca. */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--naranja); } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 460px at 88% -10%, rgba(255, 100, 0, .20), transparent 62%), radial-gradient(700px 420px at 10% 110%, rgba(26, 108, 137, .28), transparent 60%); pointer-events: none; } .hero > * { position: relative; z-index: 1; } .hero h1 { color: #fff; margin-bottom: .4em; } .hero p { color: rgba(255, 255, 255, .86); font-size: 1.14rem; max-width: 60ch; } .hero p a, .bloque--oscuro p a, .franja p a { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; } .hero p a:hover, .bloque--oscuro p a:hover, .franja p a:hover { color: var(--naranja); } .hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; } /* Cabecera de pagina interior: la justa para el titulo y las migas. Antes reservaba altura de portada y empujaba el texto fuera de la pantalla. */ .hero--interior { padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem) 0; } .hero--interior h1 { font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.5rem); margin-bottom: 0; } .hero--interior p { margin-bottom: 0; } .hero--interior .migas { margin-bottom: .5rem; } /* Sumario del articulo: acompaña al titular sin competir con el. */ .hero__sumario { margin-top: .7rem !important; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 62ch; } /* Hero con fotografia de fondo: la sena de identidad de bemergroup.com. La imagen la pone cada pagina en linea (style="--foto-hero: url(...)"). */ .hero--foto { background-color: var(--petroleo); min-height: clamp(320px, 44vh, 460px); display: flex; align-items: center; } /* La foto no va en el fondo del bloque sino en una capa propia, para poder moverla al hacer scroll sin arrastrar el titular con ella. El velo oscuro viaja dentro de la misma capa y por encima de la foto: el texto se lee igual de bien se mueva lo que se mueva. La capa sobresale por arriba y por abajo (top -20%, alto 140%) para que el desplazamiento del parallax nunca deje ver el borde. El sobrante por cada lado (20%) es mayor que el recorrido maximo (10%), asi que no puede descubrirse el fondo ni en la posicion mas extrema. */ .hero--foto::after { display: block; content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 140%; background-image: linear-gradient(100deg, rgba(22, 44, 55, .93) 0%, rgba(22, 44, 55, .72) 46%, rgba(22, 44, 55, .25) 100%), var(--foto-hero); background-size: cover; background-position: center; z-index: 0; /* Posicion de reposo. Si el navegador sabe animar por scroll, los fotogramas de hero-parallax mandan sobre esto; si no, la mueve animaciones.js escribiendo --parallax. */ transform: translateY(var(--parallax, 0%)); } .hero--foto::before { z-index: 2; } /* la franja naranja, por encima de la foto */ /* En una pagina interior la foto acompaña, no protagoniza: basta una franja. */ .hero--interior.hero--foto { min-height: 0; } .hero--foto .contenedor { width: min(100% - 2.5rem, var(--ancho)); } .hero--foto-alta { min-height: clamp(420px, 62vh, 640px); } .migas { font-size: .86rem; margin-bottom: .9rem; color: rgba(255, 255, 255, .68); } .migas a { color: rgba(255, 255, 255, .9); } .migas span { margin: 0 .45rem; opacity: .45; } /* Barra de credibilidad bajo el hero. */ .credenciales { background: var(--petroleo-hondo); color: rgba(255, 255, 255, .82); padding: .95rem 0; font-size: .87rem; } .credenciales ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; justify-content: center; } .credenciales li { display: flex; align-items: center; gap: .5rem; } .credenciales li::before { content: "✓"; color: var(--naranja); font-weight: 700; } /* ------------------------------------------------------------ bloques --- */ .bloque { padding: clamp(2.5rem, 1.8rem + 3vw, 4.25rem) 0; } .bloque--gris { background: var(--gris); } .bloque--nube { background: var(--azul-niebla); } .bloque--oscuro { background: var(--petroleo); color: rgba(255,255,255,.86); } .bloque--oscuro h2, .bloque--oscuro h3 { color: #fff; } .bloque__titulo { max-width: 46rem; margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3.2rem); text-align: center; } .bloque__titulo p { color: var(--tenue); font-size: 1.06rem; margin: 0; } /* ------------------------------------------------- articulo de lectura --- */ /* Registro de revista: linea larga pero comoda, texto algo mayor que la interfaz y mucho aire entre bloques. Lo que se lee, se lee a gusto. */ .prosa { max-width: 44rem; margin-inline: auto; font-size: 1.12rem; line-height: 1.78; color: var(--prosa); } .prosa > h2 { margin-top: 2.4em; margin-bottom: .5em; font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.3rem); line-height: 1.12; } /* Filete naranja corto sobre cada epigrafe: ordena la lectura sin ruido. */ .prosa > h2::before { content: ""; display: block; width: 46px; height: 3px; background: var(--naranja); margin-bottom: .55rem; } .prosa > h3 { margin-top: 1.9em; font-size: 1.22rem; font-weight: 600; color: var(--tinta); } /* Un titular que ademas es enlace debe parecerlo: en los indices heredados hay decenas y quedaban como texto muerto. */ .prosa h2 > a, .prosa h3 > a, .prosa h4 > a { color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--naranja); padding-bottom: .08em; transition: color .15s ease; } .prosa h2 > a:hover, .prosa h3 > a:hover, .prosa h4 > a:hover { color: var(--naranja); text-decoration: none; } .prosa h2 > a::after, .prosa h3 > a::after, .prosa h4 > a::after { content: " →"; font-size: .8em; color: var(--naranja); display: inline-block; transition: transform .15s ease; } .prosa h2 > a:hover::after, .prosa h3 > a:hover::after, .prosa h4 > a:hover::after { transform: translateX(3px); } .prosa > h2:first-child, .prosa > h3:first-child { margin-top: 0; } .prosa p { margin: 0 0 1.35em; } /* Entradilla: el primer parrafo entra mas grande, como en prensa. */ .prosa .entradilla { font-size: 1.3rem; line-height: 1.6; color: var(--tinta); font-weight: 400; margin-bottom: 1.8rem; } .prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.5em; } .prosa li { margin-bottom: .6em; padding-left: .2em; } .prosa ul li::marker { color: var(--naranja); } /* Las fotos dentro del texto no deben tapar la lectura: se limitan en alto y se centran. Antes ocupaban pantallas enteras y partian el articulo. */ .prosa img { margin: 2.4rem auto; box-shadow: var(--sombra); max-height: 420px; width: auto; max-width: 100%; object-fit: cover; } /* Enlaces discretos: subrayado fino que se enciende al pasar. Antes iban en negrita y rompian el ritmo del parrafo. */ .prosa a { color: var(--azul); font-weight: 400; text-decoration: underline; text-decoration-color: var(--azul-borde, #bcd6e2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; } .prosa a:hover { color: var(--naranja); text-decoration-color: var(--naranja); } /* Un boton dentro del texto sigue siendo un boton: el estilo de enlace de lectura no debe pintarlo de azul ni subrayarlo. */ .prosa a.boton, .prosa a.enlace-mas { text-decoration: none; text-decoration-color: transparent; } .prosa a.boton--naranja, .prosa a.boton--oscuro, .prosa a.boton--wasap { color: #fff; } .prosa a.boton--linea { color: var(--boton-linea); } .prosa a.boton--linea:hover { color: var(--papel); } .prosa a.enlace-mas { color: var(--naranja); } .prosa a.boton:hover { text-decoration: none; } .prosa a.boton--naranja:hover, .prosa a.boton--oscuro:hover, .prosa a.boton--wasap:hover { color: #fff; } /* Los botones sueltos del texto respiran y no se pegan al parrafo. */ .prosa p > a.boton { margin: .35rem .5rem .35rem 0; } .prosa blockquote { margin: 2.2rem 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--naranja); font-size: 1.25rem; line-height: 1.5; color: var(--tinta); } /* Ficha de cabecera del articulo: autor y tiempo de lectura. */ .ficha-articulo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; max-width: 44rem; margin: 0 auto 2.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--linea); font-size: .9rem; color: var(--tenue); } .ficha-articulo strong { color: var(--tinta); font-weight: 600; } .ficha-articulo span::before { content: "·"; margin-right: 1.1rem; opacity: .5; } .ficha-articulo > :first-child::before { content: none; margin: 0; } /* Indice de contenidos, para los articulos largos. */ .indice { max-width: 44rem; margin: 0 auto 2.6rem; background: var(--gris); border-left: 3px solid var(--naranja); padding: 1.3rem 1.6rem; } .indice h2 { font-family: var(--fuente); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tenue); margin: 0 0 .8rem; } .indice h2::before { content: none; } .indice ol { margin: 0; padding-left: 1.2em; } .indice li { margin-bottom: .4em; } .indice a { color: var(--tinta); text-decoration: none; font-size: .98rem; } .indice a:hover { color: var(--naranja); text-decoration: underline; } /* Articulos relacionados al pie del texto. */ .relacionados { max-width: var(--ancho); margin-inline: auto; } .relacionados h2 { font-size: 1.5rem; margin-bottom: 1.4rem; } .relacionados h2::before { content: none; } /* ------------------------------------------------------------ tarjetas --- */ .rejilla { display: grid; gap: 1.5rem; } .rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); } .tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); padding: 1.75rem; transition: border-color .18s ease, box-shadow .2s ease, transform .18s ease; } a.tarjeta:hover { border-color: var(--naranja); box-shadow: var(--sombra); transform: translateY(-2px); text-decoration: none; } .tarjeta h3 { margin-bottom: .45rem; } .tarjeta p { margin-bottom: 0; font-size: .97rem; } .tarjeta__pie { margin-top: auto; padding-top: 1.15rem; font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--naranja); } .tarjeta__icono { width: 48px; height: 48px; margin-bottom: 1.1rem; display: grid; place-items: center; background: var(--naranja-niebla); color: var(--naranja); font-size: 1.4rem; } .tarjeta--foto { padding: 0; overflow: hidden; } .tarjeta--foto img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } /* Tarjeta de PRODUCTO. Los renders de BEMER vienen sobre fondo blanco y con aire alrededor: recortarlos a 16:10 le cortaba la cabeza al caballo y partia las polainas. Aqui la foto se muestra entera y centrada. */ .tarjeta--producto img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: .9rem; } .tarjeta--producto { background: var(--papel); } /* Lo mismo para las bandas: una foto de producto no se recorta. */ .duo img.duo__producto { aspect-ratio: auto; object-fit: contain; background: #fff; padding: 1rem; box-shadow: var(--sombra-baja); } /* Ficha sin fotografia: la que tiene un articulo que no trajo imagen propia. Una franja naranja arriba le da peso visual para que no parezca rota al lado de las que si llevan foto. */ .tarjeta--texto { border-top: 4px solid var(--naranja); } .tarjeta--texto .tarjeta__cuerpo { padding-top: 1.5rem; } .tarjeta--foto .tarjeta__cuerpo { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; } /* Tarjeta de producto con precio: cifra grande y condensada, que se vea. */ .precio { display: block; font-family: var(--fuente-titular); font-size: clamp(2.2rem, 1.9rem + 1.2vw, 3rem); font-weight: 700; color: var(--naranja); margin: .35rem 0 .55rem; line-height: 1; } .precio small { display: block; font-family: var(--fuente); font-size: .82rem; font-weight: 400; color: var(--tenue); letter-spacing: 0; margin-top: .35rem; line-height: 1.4; } /* --------------------------------------------------------------- pasos --- */ .pasos { counter-reset: paso; display: grid; gap: 1.2rem; max-width: 800px; margin-inline: auto; } .paso { position: relative; padding: 1.6rem 1.6rem 1.6rem 4.8rem; background: var(--papel); border: 1px solid var(--linea); border-left: 3px solid var(--naranja); } .paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 1.5rem; top: 1.55rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; background: var(--petroleo); color: #fff; font-weight: 600; font-size: 1rem; } .paso h3 { margin-bottom: .3rem; } .paso p { margin-bottom: 0; } /* --------------------------------------------------------------- avisos --- */ .aviso { border-left: 4px solid var(--naranja); background: var(--naranja-niebla); padding: 1.3rem 1.6rem; font-size: .95rem; } .aviso p:last-child { margin-bottom: 0; } .aviso--legal { border-left-color: var(--tenue); background: var(--gris); color: var(--tenue); font-size: .89rem; } .franja { background: var(--petroleo); color: #fff; padding: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); text-align: center; border-top: 4px solid var(--naranja); } .franja h2 { color: #fff; } .franja p { color: rgba(255, 255, 255, .88); max-width: 54ch; margin-inline: auto; } .franja__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.9rem; } /* --------------------------------------------------------------- tablas --- */ .tabla-caja { overflow-x: auto; margin: 2rem 0; border: 1px solid var(--linea); } table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--papel); } th, td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--linea); } th { background: var(--petroleo); color: #fff; font-weight: 600; white-space: nowrap; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; } tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: var(--gris); } /* --------------------------------------------------------- bibliografia --- */ .fuentes { font-size: .89rem; color: var(--tenue); } .fuentes h2 { font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); border: 0; } .fuentes ol { padding-left: 1.2em; } .fuentes li { margin-bottom: .5em; } .fuentes a { word-break: break-word; } .galeria { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .galeria img { box-shadow: var(--sombra-baja); } .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; box-shadow: var(--sombra); margin: 2rem 0; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Testimonio en video: el reproductor arriba y debajo quien habla y de que. El objetivo es que se vea aqui, sin marcharse a YouTube. */ .testimonio-video { margin: 0; display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-top: 3px solid var(--naranja); } .testimonio-video .video { margin: 0; box-shadow: none; } .testimonio-video figcaption { padding: 1.3rem 1.5rem 1.5rem; } .testimonio-video h3 { font-size: 1.12rem; margin-bottom: .45rem; } .testimonio-video p { margin: 0; font-size: .96rem; } /* ------------------------------------------------------------------ pie --- */ .pie { background: var(--petroleo-hondo); color: rgba(255, 255, 255, .72); padding: 3.6rem 0 2rem; border-top: 4px solid var(--naranja); } .pie__rejilla { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .pie h4 { color: #fff; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.15rem; } .pie ul { list-style: none; padding: 0; margin: 0; } .pie li { margin-bottom: .6rem; } .pie a { color: rgba(255, 255, 255, .76); font-size: .94rem; } .pie a:hover { color: var(--naranja); } .pie__legal { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, .13); font-size: .84rem; color: rgba(255, 255, 255, .55); } .pie__legal p { margin-bottom: .6rem; } /* ------------------------------------------------ formulario de contacto --- Los datos van al CRM de Ramon (bemer_lead.php). Criterios: campos altos y bien separados, porque mucha gente lo rellena desde el movil y con la vista cansada; y la casilla de consentimiento SIN marcar, que es lo unico que vale como consentimiento valido. */ .formulario { display: grid; gap: 1.1rem; max-width: 620px; } .formulario__fila { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .formulario label { display: block; font-size: .92rem; font-weight: 500; color: var(--tinta); margin-bottom: .35rem; } .formulario label .opcional { font-weight: 400; color: var(--tenue); } .formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario select, .formulario textarea { width: 100%; font: inherit; font-size: 1rem; min-height: 48px; padding: .7rem .9rem; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); } .formulario textarea { min-height: 120px; resize: vertical; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 3px solid var(--naranja); outline-offset: 1px; border-color: var(--naranja); } /* Casilla grande: con una de 13 px no acierta quien peor ve ni quien va con prisa en el movil. */ .formulario__consentimiento { display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--texto); } .formulario__consentimiento input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--naranja); } .formulario__consentimiento label { font-weight: 400; margin: 0; color: inherit; font-size: inherit; } /* Cazabobos: fuera de la pantalla, no display:none. Muchos robots rellenan todos los campos del formulario menos los que estan ocultos de esa manera. */ .formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formulario__aviso { margin: 0; font-size: .95rem; min-height: 1.4em; } .formulario__aviso--error { color: var(--naranja-hondo); font-weight: 500; } .formulario__aviso--espera { color: var(--tenue); } .formulario__gracias { border-left: 3px solid var(--naranja); background: var(--naranja-niebla); padding: 1.4rem 1.6rem; max-width: 620px; } .formulario__gracias p:last-child { margin-bottom: 0; } /* Interruptor de tema. Lo crea tema.js, asi que sin JavaScript no aparece un boton muerto. Hay dos: uno en la barra superior, que se ve nada mas entrar, y otro en el pie, porque en movil esa barra esta oculta. */ .tema { display: inline-flex; align-items: center; gap: .55rem; font: inherit; line-height: 1; cursor: pointer; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); } .tema:hover { background: rgba(255, 255, 255, .18); color: #fff; } .tema__icono { flex: 0 0 auto; } /* En la barra superior. Es lo primero que se ve al entrar y tiene que encontrarse sin buscarlo: fondo propio y borde marcado, no un enlace mas. El margen izquierdo lo separa del bloque de enlaces vecino. */ .barra-superior .tema { font-size: .84rem; font-weight: 500; padding: .35rem .85rem; min-height: 28px; margin-left: .5rem; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .42); color: #fff; } .barra-superior .tema:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; } /* En el pie: linea propia y area de pulsacion holgada. Aqui NO se usa float: convive con parrafos largos y quedaba aplastado contra ellos, de 37 px de ancho. Con display:flex y margen automatico a la izquierda se coloca a la derecha sin depender de como fluya el texto de al lado. */ .pie__legal .tema { display: flex; width: fit-content; margin: 0 0 1.5rem auto; min-height: 44px; padding: .6rem 1.2rem; font-size: .92rem; } @media (max-width: 560px) { .pie__legal .tema { width: 100%; justify-content: center; } } .flotante { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; /* circular: la unica excepcion */ background: var(--verde); color: #fff; display: grid; place-items: center; box-shadow: var(--sombra-alta); transition: transform .16s ease; } .flotante:hover { transform: scale(1.06); text-decoration: none; } .flotante svg { width: 30px; height: 30px; fill: currentColor; } /* ------------------------------------------- componentes del modelo BEMER --- */ /* Barra superior fina, como la de "Financiacion | Atencion al cliente". */ .barra-superior { background: var(--petroleo-hondo); color: rgba(255, 255, 255, .78); font-size: .82rem; } .barra-superior .contenedor { display: flex; align-items: center; gap: 1.5rem; justify-content: flex-end; min-height: 38px; } .barra-superior a { color: rgba(255, 255, 255, .82); } .barra-superior a:hover { color: var(--naranja); text-decoration: none; } /* Enlace-CTA en mayusculas, el patron "MAS INFORMACION" de BEMER. */ .enlace-mas { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja); border-bottom: 2px solid var(--naranja); padding-bottom: .25rem; } .enlace-mas:hover { text-decoration: none; color: var(--naranja-hondo); border-color: var(--naranja-hondo); } .enlace-mas::after { content: "→"; transition: transform .16s ease; } .enlace-mas:hover::after { transform: translateX(3px); } /* Banda de cifras: "La salud es una cuestion de confianza". */ .cifras { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: center; } .cifra__valor { font-family: var(--fuente-titular); font-size: clamp(2.4rem, 1.9rem + 2vw, 3.6rem); font-weight: 700; color: var(--naranja); line-height: 1; margin-bottom: .35rem; } .cifra__texto { font-size: .95rem; color: inherit; margin: 0; } .bloque--oscuro .cifra__texto { color: rgba(255, 255, 255, .8); } /* Testimonios: cita + nombre + profesion. */ .testimonio { background: var(--papel); border: 1px solid var(--linea); border-top: 3px solid var(--naranja); padding: 1.9rem 1.75rem 1.6rem; display: flex; flex-direction: column; } .testimonio blockquote { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--tinta); line-height: 1.5; } .testimonio figcaption { margin-top: auto; font-size: .9rem; color: var(--tenue); } .testimonio figcaption strong { display: block; color: var(--tinta); font-weight: 600; } /* Preguntas frecuentes desplegables, sin una linea de JavaScript. */ .faq { max-width: 820px; margin-inline: auto; } .faq details { border-bottom: 1px solid var(--linea); } .faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-size: 1.06rem; font-weight: 500; color: var(--tinta); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 300; color: var(--naranja); line-height: 1; transition: transform .18s ease; } .faq details[open] summary::after { content: "−"; } .faq summary:hover { color: var(--naranja); } .faq__cuerpo { padding: 0 2.5rem 1.4rem 0; } .faq__cuerpo p:last-child { margin-bottom: 0; } /* Embudo de media pagina: una barra que ofrece el camino a la compra sin cortar la lectura. Va a mitad del texto porque mucha gente no llega abajo. */ .embudo { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; max-width: var(--ancho-lectura); margin-inline: auto; background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--naranja); padding: 1.5rem 1.7rem; box-shadow: var(--sombra-baja); } .embudo__texto { flex: 1 1 300px; } .embudo__texto strong { display: block; font-family: var(--fuente-titular); font-size: 1.4rem; font-weight: 600; color: var(--tinta); line-height: 1.15; margin-bottom: .3rem; } .embudo__texto span { font-size: .95rem; color: var(--texto); } .embudo__acciones { display: flex; flex-wrap: wrap; gap: .6rem; } .embudo__acciones .boton { padding: .7rem 1.2rem; font-size: .85rem; } /* Dentro del embudo, el boton claro necesita borde oscuro: el fondo es blanco. */ .embudo .boton--linea-claro { color: var(--boton-linea); border-color: var(--boton-linea); } .embudo .boton--linea-claro:hover { background: var(--boton-linea); color: var(--papel); } @media (max-width: 560px) { .embudo { padding: 1.2rem 1.1rem; } .embudo__acciones { width: 100%; } .embudo__acciones .boton { flex: 1 1 100%; } } /* Fila de accesos: lo que en el original eran titulares-enlace sueltos. */ .acciones-fila { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; max-width: 44rem; margin-inline: auto; } /* Llamadas a la bibliografia, como los ⁽¹⁾⁽⁵⁾ de BEMER. */ .nota { font-size: .72em; vertical-align: super; line-height: 0; color: var(--naranja); font-weight: 600; text-decoration: none; padding: 0 .1em; } .nota:hover { text-decoration: underline; } /* Dos columnas de texto e imagen, alternables. */ .duo { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; } .duo--invertido > *:first-child { order: 2; } .duo img { box-shadow: var(--sombra-baja); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; /* recorte uniforme, sin huecos */ } /* "auto 4/3" deja mandar a la proporcion real de la foto (la que anuncian sus atributos width y height, ya antes de descargarse) y solo cae en 4/3 si no la hubiera. Con "auto" a secas el hueco medía cero y el texto saltaba. */ .duo img.duo__natural { aspect-ratio: auto 4 / 3; object-fit: contain; } .duo h2 { margin-bottom: .6rem; } /* ----------------------------------------------------------- animaciones --- */ /* El estado oculto solo existe si animaciones.js puso la clase "js" en el html: sin JavaScript todo se ve, la animacion es un extra. */ .js .aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .js .aparece.visible { opacity: 1; transform: none; } /* Entrada del hero al cargar la pagina. */ @keyframes hero-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .hero .contenedor > * { animation: hero-entra .8s ease backwards; } .hero .contenedor > *:nth-child(2) { animation-delay: .12s; } .hero .contenedor > *:nth-child(3) { animation-delay: .24s; } .hero .contenedor > *:nth-child(4) { animation-delay: .36s; } @media (prefers-reduced-motion: reduce) { .hero .contenedor > * { animation: none; } } /* Las tarjetas de una rejilla entran en cascada, no todas de golpe. El retraso es corto a proposito: se percibe como orden, no como espera. Solo se ocultan si animaciones.js esta vivo (clase "js"), igual que las bandas. */ @media (prefers-reduced-motion: no-preference) { .js .aparece .rejilla > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .js .aparece.visible .rejilla > * { opacity: 1; transform: none; } .js .aparece.visible .rejilla > *:nth-child(1) { transition-delay: .06s; } .js .aparece.visible .rejilla > *:nth-child(2) { transition-delay: .14s; } .js .aparece.visible .rejilla > *:nth-child(3) { transition-delay: .22s; } .js .aparece.visible .rejilla > *:nth-child(4) { transition-delay: .30s; } .js .aparece.visible .rejilla > *:nth-child(5) { transition-delay: .38s; } .js .aparece.visible .rejilla > *:nth-child(n+6) { transition-delay: .44s; } } /* ------------------------------------------------ efectos al hacer scroll --- Todo lo que sigue son animaciones de linea temporal de scroll: las calcula el navegador, sin JavaScript y sin escuchar el evento de scroll, que es lo que hace que este tipo de efectos vayan a tirones. Donde no se soporten, simplemente no ocurren y la web se ve igual de bien. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Parallax: la foto del hero se queda atras respecto al texto. Va sobre scroll(root) y NO sobre view(): el hero esta siempre arriba del todo de la pagina, asi que su "entrada" en pantalla no llega a ocurrir nunca y con view() arrancaba ya por la mitad del recorrido, dejando un movimiento de 30 px que no se percibia. Con scroll(root) el recorrido completo se reparte en la primera pantalla de scroll, que es justo mientras el hero se ve. */ .hero--foto::after { animation: hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; } /* El hero de una pagina interior es mucho mas bajo y desaparece de la pantalla en cuanto empiezas a bajar. Si el recorrido durase una pantalla entera, solo se veria la primera cuarta parte del movimiento. Se comprime para que el efecto termine mientras aun se ve la foto. */ .hero--interior.hero--foto::after { animation-range: 0 40vh; } /* La cabecera gana sombra en cuanto te separas de arriba, para que se despegue del contenido. No se le toca la altura: eso obligaria a recalcular la pagina entera en cada fotograma. */ .cabecera { animation: cabecera-despega linear both; animation-timeline: scroll(root); animation-range: 0 120px; } /* Barra de progreso de lectura, solo en los articulos: los reconoce por la ficha de autor. Se anima la escala, que no repinta nada. */ body:has(.ficha-articulo)::before { content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 200; background: var(--naranja); transform-origin: 0 50%; transform: scaleX(0); animation: leyendo linear both; animation-timeline: scroll(root); } } } /* Un 10% a cada lado sobre una capa que mide el 140% del hero son unos 165 px de recorrido en la primera pantalla: la foto avanza a un 20% de la velocidad del texto. Se ve sin lugar a dudas y no llega a marear. */ @keyframes hero-parallax { from { transform: translateY(-10%); } to { transform: translateY(10%); } } @keyframes cabecera-despega { to { box-shadow: 0 6px 22px rgba(26, 23, 43, .10); } } @keyframes leyendo { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ------------------------------------------- boton de compra siempre visible --- */ .comprar-fijo { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 90; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; background: var(--naranja); color: #fff; font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--sombra-alta); transition: background-color .18s ease, transform .16s ease; } .comprar-fijo:hover { background: var(--naranja-hondo); transform: translateY(-2px); text-decoration: none; color: #fff; } /* Mientras el banner de cookies esta abierto, los botones flotantes suben por encima de el (cookies.js publica su altura en --alto-banner). NUNCA se ocultan: el boton de compra es el objetivo de la web. */ .comprar-fijo, .flotante { bottom: calc(1.1rem + var(--alto-banner, 0px)); transition: bottom .25s ease; } @media (max-width: 560px) { .comprar-fijo { padding: .7rem 1rem; font-size: .8rem; left: .8rem; bottom: calc(.8rem + var(--alto-banner, 0px)); } } /* ------------------------------------------------------- banner de cookies --- */ #banner-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--petroleo-hondo); color: rgba(255, 255, 255, .9); border-top: 3px solid var(--naranja); box-shadow: 0 -6px 24px rgba(26, 23, 43, .25); } .banner-cookies__caja { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; flex-wrap: wrap; } .banner-cookies__caja p { margin: 0; font-size: .92rem; flex: 1 1 380px; } .banner-cookies__caja a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .banner-cookies__caja a:hover { color: var(--naranja); } .banner-cookies__botones { display: flex; gap: .6rem; } /* Video bloqueado hasta que haya consentimiento. Esta es la pantalla que ve TODO el mundo antes de pulsar, asi que se cuida: la foto real del testimonio de fondo y un boton de reproduccion claro. */ .video--espera { background: var(--petroleo); display: grid; place-items: center; } .video--con-poster { background-size: cover; background-position: center; } .video__cargar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1.4rem; background: linear-gradient(180deg, rgba(22,44,55,.35) 0%, rgba(22,44,55,.82) 100%); color: #fff; border: 0; cursor: pointer; text-align: center; font-family: inherit; transition: background-color .18s ease; } /* Sin foto de fondo, el degradado no basta: hace falta un color solido. */ .video--espera:not(.video--con-poster) .video__cargar { background: var(--petroleo); } /* Triangulo de reproduccion, dibujado con bordes: sin imagenes ni iconos. */ .video__play { width: 62px; height: 62px; border-radius: 50%; background: var(--naranja); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .18s ease, background-color .18s ease; } .video__play::before { content: ""; display: block; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; margin-left: 5px; } .video__cargar:hover .video__play { transform: scale(1.08); background: var(--naranja-hondo); } .video__rotulo { font-size: 1.02rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .video__cargar small { font-size: .76rem; font-weight: 400; color: rgba(255, 255, 255, .72); max-width: 42ch; line-height: 1.45; } /* ------------------------------------------------------------ responsive --- */ @media (max-width: 940px) { /* La cabecera llegaba a ocupar 162px, un 20% de la pantalla del movil. Aqui se compacta a una sola fila de marca + una tira de menu. */ .cabecera__caja { flex-wrap: wrap; min-height: 0; padding-block: .35rem; gap: .2rem; } .marca { line-height: 1.05; } .marca__nombre { font-size: .98rem; } /* El cargo completo no cabe en movil sin robar dos lineas de pantalla. */ .marca__rol { display: none; } /* El boton de compra de la cabecera sobra: el boton fijo esta siempre a la vista y decia lo mismo. Dos veces "Comprar" era ruido. */ .cabecera .boton { display: none; } .menu { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; } .menu::-webkit-scrollbar { display: none; } /* Con solo cuatro entradas caben justas en 375 px sin tener que deslizar, que es lo que se quiere: verlas todas de un vistazo. */ .menu a { white-space: nowrap; font-size: .84rem; padding: .25rem .4rem; } .menu > .menu__grupo:nth-of-type(1) > a { padding-left: 0; } /* En tactil no hay hover fiable para desplegar submenus, y apilarlos doblaba la altura de la cabecera. Se aplana todo en UNA sola tira. */ .menu__grupo, .menu__lista { display: contents; } .menu__lista { opacity: 1; visibility: visible; transform: none; position: static; box-shadow: none; border: 0; background: none; } /* Menu corto en movil. Cabe poco y hay que elegir: se deja lo que decide una compra y se quita lo que se lee con calma desde el escritorio. Queda: BEMER · Horse Line · Dog Line · Trabaja con nosotros. Articulos y Opiniones siguen accesibles desde el pie y desde el texto. */ /* Grupo 1 (BEMER): se ve el padre, no sus cuatro hijos. */ .menu > .menu__grupo:nth-of-type(1) > a[aria-haspopup] { display: block; } .menu > .menu__grupo:nth-of-type(1) .menu__lista { display: none; } /* Grupo 2 (Linea Animal): al reves, se ven Horse Line y Dog Line, que es como los busca la gente, y no la etiqueta que los agrupa. */ .menu > .menu__grupo:nth-of-type(2) > a[aria-haspopup] { display: none; } .menu > a[href="/queesbemer"], .menu > a[href="/bemeropiniones"] { display: none; } html { scroll-padding-top: 88px; } /* Al apilarse en una columna, la imagen debe volver a su orden natural. */ .duo--invertido > *:first-child { order: 0; } /* La barra superior sigue sin sus enlaces (no caben y se llega a ellos por el pie), pero NO se oculta entera: se queda como una franja minima que solo lleva el interruptor de tema. El del pie no basta en movil: hay que bajar la pagina entera y ademas compite con el boton fijo de comprar, que flota justo encima. Quien necesita el modo oscuro tiene que encontrarlo sin buscarlo. */ .barra-superior > .contenedor > a { display: none; } .barra-superior .contenedor { min-height: 34px; } .barra-superior .tema { margin-left: 0; } } @media (max-width: 560px) { body { font-size: 1rem; } .contenedor { width: min(100% - 1.75rem, var(--ancho)); } /* La ficha del articulo se partia en tres lineas y robaba 111 px. En movil basta el autor y el tiempo de lectura, en una sola linea. */ .ficha-articulo { gap: .4rem .8rem; font-size: .84rem; padding-bottom: .8rem; margin-bottom: 1.4rem; } .ficha-articulo > span:first-of-type { display: none; } .ficha-articulo > span:first-of-type + span::before { content: none; margin: 0; } /* Las bandas respiran menos: en pantalla pequena el aire de sobra obliga a hacer scroll para nada. */ .bloque { padding: 1.8rem 0; } .prosa .entradilla { font-size: 1.12rem; } .hero__acciones .boton, .franja__acciones .boton { width: 100%; } .paso { padding: 1.4rem 1.25rem; } .paso::before { position: static; margin-bottom: .75rem; } .credenciales ul { flex-direction: column; align-items: flex-start; gap: .45rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .cabecera, .flotante, .franja, .pie__rejilla, .credenciales { display: none; } body { font-size: 11pt; color: #000; } .hero { background: none; color: #000; } .hero h1 { color: #000; } }