/** * Bellamar — hoja de la landing de captación. * * Una sola hoja para los ocho bloques en vez de un style.css por bloque: todos * se pintan en la misma página, así que partirla no ahorra ninguna descarga y sí * complica el orden de la cascada, que es justo lo que hay que tener controlado * cuando el tema padre inyecta CSS de bloque en línea después de esta hoja. * * Medidas tomadas de la maqueta «Landing Meta Ads» del lienzo Web Bellamar: * escritorio a 1440 (caja de 1104 con 168 de aire a cada lado) y móvil a 390. * * Orden del archivo: * 1. Alias de tokens y costuras * 2. Piezas compartidas (botones, listas, formulario) * 3. Secciones, de arriba abajo * 4. Móvil * 5. Accesibilidad y impresión */ /* ───────────────────────────── 1. Tokens y costuras ───────────────────────── */ /* * Nota sobre los tokens de tamano de letra: los slugs que empiezan por un digito * NO generan la variable que uno escribiria. WordPress pasa el slug por * kebab-case, asi que `2xl` sale como `--wp--preset--font-size--2-xl`, no * `--2xl`. Escribir `--2xl` no da error: la variable no existe, la declaracion se * descarta en silencio y el texto se queda en los 16px heredados. De ahi los * guiones de `--2-xl`, `--3-xl` y `--4-xl` en todo el archivo; no sobran. */ :root { /* Ancho del contenido, sin contar el aire lateral: a 1440 deja los 168px a * cada lado de la maqueta. El `max-width` de los contenedores le suma ese * aire porque el padding va por dentro de la caja. */ --bellamar-caja: 1104px; --bellamar-aire: 24px; --bellamar-radio: 16px; --bellamar-radio-ch: 8px; --bellamar-sombra-tarjeta: 0 12px 40px rgba(56, 75, 113, 0.18); } /* * Los bloques hermanos dentro del contenido llevan `margin-block-start: 24px` * de `is-layout-flow`. Como aquí las bandas van a sangre y pegadas, ese margen * abre una franja del color del body entre cada dos secciones: invisible entre * dos bandas claras y muy visible justo encima de la banda azul del cierre. */ #bellamar-main > .entry-content > *, #bellamar-main > *, .bellamar-landing > * { margin-block: 0; } /* * Cada seccion manda en su propio ancho; el aire lateral lo pone el inner. * * Se nombran por la clase que WordPress le pone a cada bloque del tema * (wp-block-bellamar-landing-*) en vez de enumerarlos uno a uno: la lista se * quedaba corta cada vez que se añadia una seccion, y el sintoma —una seccion * estrecha en medio de la pagina— no se parece en nada a la causa. * * El comodin es seguro aqui porque ese prefijo solo existe en estos bloques. * Ojo con la tentacion de acortarlo a [class*="bellamar-"]: eso engancharia * tambien al , que lleva la clase del tema. */ #bellamar-main [class*="wp-block-bellamar-landing-"] { width: 100%; max-width: none; margin-inline: 0; } /* La caja de lectura de 1104 px, centrada, con su aire a los lados. */ .bellamar-inner, .bellamar-header__inner, .bellamar-hero__inner, .bellamar-cifras__inner, .bellamar-centro__inner, .bellamar-proceso__inner, .bellamar-testimonios__inner, .bellamar-cta__inner { box-sizing: border-box; max-width: calc( var(--bellamar-caja) + 2 * var(--bellamar-aire) ); margin-inline: auto; padding-inline: var(--bellamar-aire); } /* ──────────────────────── 2. Piezas compartidas ───────────────────────────── */ .bellamar-boton { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--bellamar-radio-ch); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--md); font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; /* Dentro de un flex, un boton se encoge por defecto: si la caja se queda * corta —o el visitante tiene el navegador con zoom o una letra base mas * grande— el texto se parte en dos lineas y la pildora se deforma. Estas dos * lineas lo impiden pase lo que pase. */ flex-shrink: 0; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .bellamar-boton__icono { display: inline-flex; flex-shrink: 0; } .bellamar-boton__icono svg { width: 24px; height: 24px; } .bellamar-boton--whatsapp, #bellamar-main .bellamar-boton--whatsapp { background: var(--wp--preset--color--whatsapp); color: #ffffff; } .bellamar-boton--whatsapp:hover, .bellamar-boton--whatsapp:focus-visible { background: #1fb855; color: #ffffff; } /* * El boton de accion de esta landing: coral con texto azul noche, 56 de alto * y 28 de aire a los lados. Es el que pide el lienzo de Google en las cinco * llamadas a la accion de la pagina. * * No se toca --primario, que es el azul de la landing de Meta y sigue usandose * en la pagina de gracias: son dos campañas distintas con el mismo tema debajo. */ .bellamar-boton--accion, #bellamar-main .bellamar-boton--accion { min-height: 56px; padding: 0 28px; align-self: flex-start; background: var(--wp--preset--color--accent); /* Azul noche profundo, no el normal: sobre el coral, #384B71 se queda en 3,70:1 y la AA de un texto de 16 en negrita pide 4,5. Con #2C3B5A sube a 4,75 sin que el coral cambie ni un punto. Es el mismo azul del pie, o sea que sigue siendo la paleta de la marca. */ color: var(--wp--preset--color--deep); font-size: var(--wp--preset--font-size--base); } .bellamar-boton--accion:hover, .bellamar-boton--accion:focus-visible { background: var(--wp--preset--color--accent-hover, #e27f6d); color: var(--wp--preset--color--deep); } .bellamar-boton--primario, #bellamar-main .bellamar-boton--primario { min-height: 48px; align-self: flex-start; background: var(--wp--preset--color--primary); color: #ffffff; font-size: var(--wp--preset--font-size--sm); } .bellamar-boton--primario:hover, .bellamar-boton--primario:focus-visible { background: var(--wp--preset--color--primary-hover); color: #ffffff; } .bellamar-boton--navy, #bellamar-main .bellamar-boton--navy { background: var(--wp--preset--color--navy); color: #ffffff; } .bellamar-boton--navy:hover, .bellamar-boton--navy:focus-visible { background: var(--wp--preset--color--deep); color: #ffffff; } .bellamar-boton--contorno, #bellamar-main .bellamar-boton--contorno { border: 1px solid #ffffff; background: transparent; color: #ffffff; font-weight: 400; } .bellamar-boton--contorno:hover, .bellamar-boton--contorno:focus-visible { background: #ffffff; color: var(--wp--preset--color--navy); } /* Lista con la marca de verificación azulón. */ .bellamar-lista-check { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .bellamar-lista-check li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-lista-check__icono { flex-shrink: 0; color: var(--wp--preset--color--primary); } .bellamar-lista-check__icono svg { display: block; width: 24px; height: 24px; } /* Titulares a dos tonos: recta en azul noche, cursiva en azulón. */ .bellamar-hero__titular, .bellamar-centro__titular, .bellamar-proceso__titular, .bellamar-testimonios__titular, .bellamar-cta__titular, .bellamar-gracias__titular { display: flex; flex-direction: column; gap: 8px; margin: 0; } [class$="__titular-a"] { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-style: normal; color: var(--wp--preset--color--navy); } [class$="__titular-b"] { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-style: italic; color: var(--wp--preset--color--primary); } /* ── Formulario ───────────────────────────────────────────────────────────── * Los dos formularios de la página comparten este bloque de reglas porque * comparten el marcado (ver bellamar_render_formulario()). */ .bellamar-form { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 32px; border-radius: var(--bellamar-radio); background: var(--wp--preset--color--bg); box-shadow: var(--bellamar-sombra-tarjeta); /* Ancla del salto desde los CTA de las tarjetas: sin esto el formulario * queda justo debajo de la cabecera y el título se pierde. */ scroll-margin-block-start: 96px; } .bellamar-form__cabecera { display: flex; flex-direction: column; gap: 4px; } .bellamar-form__titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 400; line-height: 1.33; color: var(--wp--preset--color--navy); } .bellamar-form__descripcion { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } .bellamar-form__aviso { margin: 0; padding: 12px 16px; border-radius: var(--bellamar-radio-ch); font-size: var(--wp--preset--font-size--sm); line-height: 1.5; } .bellamar-form__aviso--error { background: rgba(192, 57, 43, 0.08); color: var(--wp--preset--color--error); } .bellamar-form__aviso--ok { background: rgba(46, 158, 107, 0.1); color: var(--wp--preset--color--success); } /* 16 px entre campos, como el lienzo. La landing de Meta usa 12 porque su formulario lleva un campo mas y con 16 no cabia sin hacer scroll. */ .bellamar-form__form { display: flex; flex-direction: column; gap: 16px; } /* El señuelo antibots: fuera de la vista sin `display:none`, que algunos bots * detectan y esquivan. */ .bellamar-form__senuelo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bellamar-form__campo { display: flex; flex-direction: column; gap: 4px; position: relative; } /* * Las etiquetas están, pero fuera de la vista: la maqueta enseña sólo el texto * de ejemplo dentro del campo. Quitarlas del HTML dejaría el formulario sin * nombres accesibles, y un `placeholder` no es una etiqueta — desaparece al * escribir y los lectores de pantalla no siempre lo anuncian. */ .bellamar-form__campo > label, .bellamar-form__campo--select > label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .bellamar-form__campo input, .bellamar-form__campo select { box-sizing: border-box; width: 100%; height: 56px; padding: 0 24px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--bellamar-radio-ch); background: var(--wp--preset--color--bg); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--wp--preset--color--navy); } .bellamar-form__campo input::placeholder { color: var(--wp--preset--color--text-muted); opacity: 1; } .bellamar-form__campo input:focus-visible, .bellamar-form__campo select:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px; border-color: var(--wp--preset--color--primary); } .bellamar-form__campo input[aria-invalid="true"], .bellamar-form__campo select[aria-invalid="true"] { border-color: var(--wp--preset--color--error); } /* El desplegable nativo con la punta de flecha de la maqueta. */ .bellamar-form__campo--select select { appearance: none; padding-inline-end: 48px; color: var(--wp--preset--color--text-muted); } .bellamar-form__campo--select select:valid { color: var(--wp--preset--color--navy); } .bellamar-form__chevron { position: absolute; inset-inline-end: 24px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--wp--preset--color--navy); } .bellamar-form__chevron svg { display: block; width: 16px; height: 16px; } .bellamar-form__enviar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-block-start: 4px; padding: 0 24px; border: 0; border-radius: var(--bellamar-radio-ch); background: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--md); font-weight: 700; line-height: 1.5; /* Ver la nota del boton de accion: azul profundo para llegar a 4,75:1 sobre el coral. Este es el boton que decide la campaña; si hay uno que tiene que leerse sin esfuerzo, es este. */ color: var(--wp--preset--color--deep); cursor: pointer; transition: background-color 0.15s ease; } .bellamar-form__enviar:hover, .bellamar-form__enviar:focus-visible { background: #e47a66; } .bellamar-form__consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--wp--preset--font-size--xs); line-height: 1.33; color: var(--wp--preset--color--text-muted); } .bellamar-form__consent input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--wp--preset--color--primary); } /* * El enlace a la politica de privacidad, mas oscuro que el azulon de marca. * * No es purismo: aqui el azulon sobre blanco se queda en 2,96:1 y este es un * texto de 12 px, donde la AA pide 4,5. Ademas es el enlace del consentimiento, * el unico de la pagina que la ley obliga a que se pueda leer y seguir. El * #5870C5 sube a 4,63 y es el mismo azulon bajado tres tonos. */ .bellamar-form__consent a { color: #5870c5; text-decoration: underline; } /* ─────────────────────────── 3. Secciones ─────────────────────────────────── */ /* ── Cabecera ── */ .bellamar-header { background: var(--wp--preset--color--navy); } /* * Cabecera fija en todos los tamanos: en una landing larga, el telefono y el * WhatsApp son la mitad de las conversiones y perderlos al primer scroll obliga * a volver arriba. * * En movil se fija desde que se retiro la barra inferior: sin ella, el boton de * «Llamar» de la cabecera es el unico CTA permanente que queda, y desaparecia * en cuanto se bajaba un dedo. * * `top` sale de la variable que WordPress pone cuando hay barra de * administracion, para que la cabecera no quede debajo de ella al estar dentro * del escritorio. Fuera del escritorio la variable no existe y cae a 0. */ .bellamar-header { position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 12px rgba(20, 26, 42, 0.18); } /* * Hueco para la barra de administracion, solo de tablet hacia arriba. Por debajo * de 782px WordPress la pone en `absolute` en vez de `fixed`: se va con el * scroll, y reservarle sitio dejaba una franja blanca permanente sobre la * cabecera. Quien visita la landing no ve ninguna de las dos cosas; esto es solo * para quien la revisa desde el escritorio. */ @media (min-width: 783px) { .bellamar-header { top: var( --wp-admin--admin-bar--height, 0px ); } } .bellamar-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; } /* El enlace envuelve al logo: `inline-flex` para que no le cuelgue el hueco de * la linea base debajo de la imagen y la barra azul no crezca de mas. */ .bellamar-header__marca { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; border-radius: 4px; } .bellamar-header__marca:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 4px; } .bellamar-header__logo { /* Alto fijo y ancho libre: el logo es un SVG y asi mantiene su proporcion * exacta sea cual sea. Con un ancho fijo de 190 quedaba medio pixel de aire * a la derecha, porque la proporcion real es 5,87:1 y no 5,94:1. */ height: 32px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; } .bellamar-header__logo-texto { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); color: #ffffff; } .bellamar-header__acciones { display: flex; align-items: center; gap: 24px; } /* * El CTA de llamar, en los dos tamaños. La maqueta de Google lo pone tambien * en escritorio —a la derecha del WhatsApp— porque aqui el visitante llega de * una busqueda y el telefono es la via que convierte. Medidas del lienzo: * 146x56, salmon, texto azul noche. */ .bellamar-header__llamar { display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; height: 56px; padding: 0 24px; border-radius: var(--bellamar-radio-ch); background: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--base); font-weight: 700; line-height: 1.5; white-space: nowrap; text-decoration: none; /* Azul noche profundo, no el normal: sobre el coral, #384B71 se queda en 3,70:1 y la AA de un texto de 16 en negrita pide 4,5. Con #2C3B5A sube a 4,75 sin que el coral cambie ni un punto. Es el mismo azul del pie, o sea que sigue siendo la paleta de la marca. */ color: var(--wp--preset--color--deep); } /* El azul del padre para los enlaces dentro del contenido gana por especificidad al color de arriba, asi que se le nombra igual que a el. */ #bellamar-main .bellamar-header__llamar { color: var(--wp--preset--color--deep); } /* El rotulo corto solo sale en movil. */ .bellamar-header__llamar-corto { display: none; } .bellamar-header__telefono { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text-light); } .bellamar-header__telefono a, #bellamar-main .bellamar-header__telefono a { color: #ffffff; text-decoration: none; } .bellamar-header__telefono a:hover { text-decoration: underline; } /* ── Hero ── */ /* * La foto va de fondo, con el degradado que pone el propio bloque en su * atributo style: casi opaco donde está el titular y abierto a la derecha. * Aquí sólo queda el encuadre, que es lo que no cambia si se cambia la foto. */ .bellamar-hero { background-color: var(--wp--preset--color--bg-soft); background-position: center; background-size: cover; background-repeat: no-repeat; } .bellamar-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 64px; padding-block: 96px; } /* * 600 de ancho en el lienzo, y se encoge antes que el formulario: el texto * aguanta perder ancho, una tarjeta de 432 con tres campos dentro no. */ .bellamar-hero__columna { display: flex; flex-direction: column; gap: 32px; flex: 1 1 600px; min-width: 0; } .bellamar-hero__texto { display: flex; flex-direction: column; gap: 16px; } .bellamar-hero__kicker { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--text); } /* 46/52 en el lienzo nuevo: el titular pasó de dos palabras a dos líneas largas («Centro de salud mental con ingreso en Tarragona») y a 52 px se comía el hueco de las tres ventajas. */ .bellamar-hero__titular { font-size: 46px; line-height: 1.13; } .bellamar-hero__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.56; color: var(--wp--preset--color--text); } .bellamar-hero__cuerpo strong { font-weight: 700; } /* Las tres ventajas: lista sin viñetas, con la marca de verificado delante. */ .bellamar-hero__ventajas { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .bellamar-hero__ventaja { display: flex; align-items: flex-start; gap: 12px; font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-hero__ventaja-icono { display: flex; flex-shrink: 0; width: 24px; height: 24px; color: var(--wp--preset--color--primary); } .bellamar-hero__ventaja-icono svg { width: 24px; height: 24px; } .bellamar-hero__formulario { display: flex; flex-direction: column; gap: 16px; flex: 0 0 432px; max-width: 432px; } /* El botón de WhatsApp bajo el formulario sólo existe en móvil: en escritorio * ya está en la cabecera, a la vista, y repetirlo resta al formulario. */ .bellamar-hero__whatsapp-movil { display: none; } /* ── Sello de las reseñas de Google ── */ /* * La píldora con la «G», las cinco estrellas y la nota. Sale dos veces en la * página —en el hero y encima de los testimonios—, así que vive fuera de los * dos bloques. */ .bellamar-sello-fila { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .bellamar-sello-fila__pie { flex: 1 1 240px; min-width: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } .bellamar-sello { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--wp--preset--color--text-light); border-radius: 999px; background: #ffffff; } .bellamar-sello__g { display: flex; flex-shrink: 0; } .bellamar-sello__g svg { width: 24px; height: 24px; } .bellamar-sello__estrellas { display: flex; gap: 2px; /* El amarillo de las estrellas de Google, no el coral del tema: son la misma convención visual que la ficha de la que salen. */ color: #fbbc05; } .bellamar-sello__estrellas svg { width: 16px; height: 16px; } .bellamar-sello__nota { font-size: var(--wp--preset--font-size--sm); line-height: 1.43; white-space: nowrap; color: var(--wp--preset--color--navy); } .bellamar-sello__nota strong { font-weight: 700; } /* ── Cifras ── */ /* * Banda de cifras sobre blanco, separada del hero por una linea fina. En el * lienzo de Meta iba sobre el azul palido; aqui el hero ya trae foto y fondo * claro, y dos bandas de color seguidas se comian el contraste del formulario. */ .bellamar-cifras { background: var(--wp--preset--color--bg); border-bottom: 1px solid var(--wp--preset--color--text-light); } .bellamar-cifras__inner { display: flex; justify-content: space-between; gap: 24px; padding-block: 48px; } /* * 240 de ancho fijo: las cuatro cifras ocupan lo mismo aunque el texto de una * sea mas largo, que es lo que las alinea. Sin el ancho, «5 min de Tarragona, * en un entorno tranquilo» empujaba a las otras tres. */ .bellamar-cifras__item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 1 240px; text-align: center; } .bellamar-cifras__valor { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--3-xl); font-weight: 500; line-height: 1; color: var(--wp--preset--color--primary); } .bellamar-cifras__texto { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } /* ── Dos caminos ── */ /* El botón queda abajo y alineado aunque las dos tarjetas tengan listas de * distinto largo. */ /* ── El centro ── */ .bellamar-centro { background: var(--wp--preset--color--bg-soft); } .bellamar-centro__inner { display: flex; align-items: center; justify-content: space-between; gap: 96px; padding-block: 96px; } .bellamar-centro__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 0 0 544px; max-width: 544px; } .bellamar-centro__foto { width: 100%; height: 200px; border-radius: var(--bellamar-radio); object-fit: cover; } .bellamar-centro__texto { display: flex; flex-direction: column; gap: 24px; flex: 0 1 432px; min-width: 0; } .bellamar-centro__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--wp--preset--color--text); } /* ── Testimonios ── */ .bellamar-testimonios { background-color: var(--wp--preset--color--navy); background-position: center; background-size: cover; background-repeat: no-repeat; } .bellamar-testimonios__inner { display: flex; flex-direction: column; gap: 40px; padding-block: 96px; } /* Titular y sello, centrados sobre la foto. */ .bellamar-testimonios__cabecera { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .bellamar-testimonios .bellamar-cabecera__titular { align-items: center; } .bellamar-testimonios .bellamar-cabecera__titular-a { color: #ffffff; } .bellamar-testimonios .bellamar-cabecera__titular-b { color: var(--wp--preset--color--bg-warm); } /* La fila de la tarjeta: estrellas a un lado, la «G» al otro. */ .bellamar-testimonios__marca { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bellamar-testimonios__fuente { display: flex; flex-shrink: 0; } .bellamar-testimonios__fuente svg { width: 20px; height: 20px; } .bellamar-testimonios__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .bellamar-testimonios__tarjeta { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; border-radius: var(--bellamar-radio); background: var(--wp--preset--color--bg); } .bellamar-testimonios__estrellas { display: flex; gap: 4px; /* El amarillo de Google, no el coral del tema: son sus estrellas. */ color: #fbbc05; } .bellamar-testimonios__estrella svg { display: block; width: 16px; height: 16px; } .bellamar-testimonios__cita { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; } .bellamar-testimonios__titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 400; line-height: 1.33; color: var(--wp--preset--color--primary); } .bellamar-testimonios__texto { margin: 0; font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-testimonios__nombre { font-size: var(--wp--preset--font-size--md); font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--text); } /* ── Cierre ── */ .bellamar-cta { background-color: var(--wp--preset--color--navy); background-position: center; background-size: cover; background-repeat: no-repeat; } .bellamar-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 64px; padding-block: 96px; } .bellamar-cta__texto { display: flex; flex-direction: column; gap: 24px; flex: 1 1 520px; min-width: 0; } .bellamar-cta__titular { font-size: var(--wp--preset--font-size--3-xl); line-height: 1; } .bellamar-cta__titular .bellamar-cta__titular-a { color: #ffffff; } .bellamar-cta__titular .bellamar-cta__titular-b { color: var(--wp--preset--color--bg-warm); } .bellamar-cta__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: #ffffff; } .bellamar-cta__acciones { display: flex; flex-wrap: wrap; gap: 16px; } .bellamar-cta__formulario { flex: 0 0 432px; max-width: 432px; } /* ── Aviso de cookies (bloques del padre) ── * * Rechazar tiene que pesar lo mismo que aceptar. El bloque del padre pinta * «Aceptar» relleno y «Rechazar» en contorno: mismo tamano, misma letra, pero el * relleno se lleva la mirada, y ese desequilibrio es justo lo que la AEPD * considera que vicia el consentimiento. Aqui se igualan. * * Selector de clase + atributo (0,2,0) porque el CSS del bloque del padre se * inyecta DESPUES de esta hoja: un empate de especificidad lo ganaria el. */ .vidaytu-cookies-banner-bottom__btn[data-vidaytu-cookies-action="reject"], .vidaytu-cookies-preferences-panel__btn[data-vidaytu-cookies-action="reject"] { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } /* Texto azul noche sobre el salmon, en los dos botones. El blanco que trae el * padre se queda en 2,4:1 de contraste —ilegible para bastante gente—; el azul * noche sube a 3,7:1, que es el mismo par que ya usa el boton del formulario. */ .vidaytu-cookies-banner-bottom__btn[data-vidaytu-cookies-action="accept"], .vidaytu-cookies-banner-bottom__btn[data-vidaytu-cookies-action="reject"], .vidaytu-cookies-preferences-panel__btn[data-vidaytu-cookies-action="accept"], .vidaytu-cookies-preferences-panel__btn[data-vidaytu-cookies-action="reject"] { color: var(--wp--preset--color--navy); } /* -- Pagina de gracias -- */ .bellamar-gracias { background: var(--wp--preset--color--bg-soft); } .bellamar-gracias__inner { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: calc( 640px + 2 * var(--bellamar-aire) ); /* Alto minimo para que la confirmacion no quede flotando en una franja * estrecha con el pie pegado justo debajo. */ min-height: 62vh; margin-inline: auto; justify-content: center; padding: 80px var(--bellamar-aire); text-align: center; } .bellamar-gracias__marca { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--primary); color: #ffffff; } .bellamar-gracias__marca svg { width: 36px; height: 36px; } .bellamar-gracias__titular { align-items: center; gap: 4px; font-size: var(--wp--preset--font-size--3-xl); line-height: 1.1; } .bellamar-gracias__cuerpo { margin: 0; max-width: 520px; font-size: var(--wp--preset--font-size--lg); line-height: 1.56; color: var(--wp--preset--color--text); } .bellamar-gracias__nota { margin: 0; max-width: 520px; font-size: var(--wp--preset--font-size--md); line-height: 1.5; color: var(--wp--preset--color--text-muted); } .bellamar-gracias__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-block-start: 8px; } /* -- Pie -- */ .bellamar-footer { background: var(--wp--preset--color--deep); } .bellamar-footer__inner { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: calc( var(--bellamar-caja) + 2 * var(--bellamar-aire) ); min-height: 72px; margin-inline: auto; padding: 12px var(--bellamar-aire); } .bellamar-footer__legal { margin: 0; font-size: var(--wp--preset--font-size--xs); line-height: 1.33; color: #ffffff; } .bellamar-footer__enlaces { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; } .bellamar-footer__enlaces a { font-size: var(--wp--preset--font-size--xs); line-height: 1.33; color: #ffffff; text-decoration: none; } .bellamar-footer__enlaces a:hover, .bellamar-footer__enlaces a:focus-visible { text-decoration: underline; } /* -- Paginas legales -- * Columna de lectura estrecha: un aviso legal es texto corrido, y a los 1104px * de las bandas la linea se hace imposible de seguir. */ .bellamar-legal__cuerpo { box-sizing: border-box; max-width: calc( 720px + 2 * var(--bellamar-aire) ); margin-inline: auto; padding: 80px var(--bellamar-aire); } .bellamar-legal__titulo { margin: 0 0 32px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--3-xl); font-weight: 500; line-height: 1.1; color: var(--wp--preset--color--navy); } .bellamar-legal__cuerpo p { margin: 0 0 20px; font-size: var(--wp--preset--font-size--md); line-height: 1.7; color: var(--wp--preset--color--text); } .bellamar-legal__cuerpo h2 { margin: 40px 0 16px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--navy); } .bellamar-legal__cuerpo h3 { margin: 32px 0 12px; font-size: var(--wp--preset--font-size--lg); font-weight: 700; color: var(--wp--preset--color--navy); } .bellamar-legal__cuerpo ul, .bellamar-legal__cuerpo ol { margin: 0 0 20px; padding-inline-start: 24px; font-size: var(--wp--preset--font-size--md); line-height: 1.7; color: var(--wp--preset--color--text); } .bellamar-legal__cuerpo li { margin-block-end: 8px; } .bellamar-legal__cuerpo a { color: var(--wp--preset--color--primary); text-decoration: underline; } .bellamar-legal__cuerpo table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: var(--wp--preset--font-size--sm); } .bellamar-legal__cuerpo th, .bellamar-legal__cuerpo td { padding: 10px 12px; border: 1px solid var(--wp--preset--color--border); text-align: start; vertical-align: top; } .bellamar-legal__cuerpo th { background: var(--wp--preset--color--bg-soft); color: var(--wp--preset--color--navy); } /* -- Proceso -- */ .bellamar-proceso { background: var(--wp--preset--color--bg); } .bellamar-proceso__inner { display: flex; flex-direction: column; gap: 48px; padding-block: 96px; } /* Tres columnas: el lienzo de Google parte el proceso en tres pasos, no en cuatro como el de Meta. */ .bellamar-proceso__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; } /* Cada paso, en su tarjeta azul palida. */ .bellamar-proceso__paso { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 32px; border-radius: var(--bellamar-radio); background: var(--wp--preset--color--bg-soft); } .bellamar-proceso__numero { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 500; line-height: 1; color: #ffffff; } .bellamar-proceso__paso-titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 400; line-height: 1.33; color: var(--wp--preset--color--navy); } .bellamar-proceso__paso-texto { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } /* ─────────────────────────────── 4. Móvil ─────────────────────────────────── */ @media (max-width: 781px) { :root { --bellamar-aire: 20px; } /* ── Cabecera ── */ .bellamar-header__inner { min-height: 64px; gap: 12px; } .bellamar-header__logo { height: 24px; width: auto; } /* * Cabecera de movil: logo y un boton de LLAMAR en salmon, como la maqueta. * El telefono escrito ocupaba una linea entera y el WhatsApp de la cabecera * duplicaba el de la barra fija de abajo, asi que los dos sobran aqui. */ .bellamar-header__telefono, .bellamar-header .bellamar-boton--whatsapp { display: none; } .bellamar-header__logo { height: 22px; } .bellamar-header__llamar { height: 40px; padding: 0 14px; border-radius: var(--bellamar-radio-ch); background: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--sm); font-weight: 700; line-height: 1.71; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--navy); } #bellamar-main .bellamar-header__llamar { color: var(--wp--preset--color--navy); } .bellamar-header__llamar-ancho { display: none; } .bellamar-header__llamar-corto { display: inline; } /* ── Hero ── */ .bellamar-hero__inner { flex-direction: column; align-items: stretch; gap: 20px; padding-block: 32px; } .bellamar-hero__columna { flex: 1 1 auto; gap: 20px; } .bellamar-hero__kicker { font-size: var(--wp--preset--font-size--xs); line-height: 1.33; } .bellamar-hero__titular { gap: 4px; font-size: 34px; line-height: 1.12; } .bellamar-hero__cuerpo { font-size: var(--wp--preset--font-size--md); line-height: 1.5; } .bellamar-hero__formulario { flex: 1 1 auto; max-width: none; } .bellamar-hero__whatsapp-movil { display: flex; width: 100%; } /* ── Cifras: dos por fila ── */ .bellamar-cifras__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-block: 24px; } .bellamar-cifras__valor { font-size: 28px; } .bellamar-cifras__texto { font-size: var(--wp--preset--font-size--xs); line-height: 1.33; } /* ── Secciones de texto ── */ .bellamar-boton--primario { align-self: stretch; } /* ── El centro: las fotos primero, en rejilla de dos ── */ .bellamar-centro__inner { flex-direction: column; align-items: stretch; } .bellamar-centro__fotos { flex: 1 1 auto; max-width: none; gap: 10px; order: 2; } .bellamar-centro__foto { height: 120px; border-radius: 12px; } .bellamar-centro__texto { order: 1; gap: 16px; } /* ── Testimonios: carrusel de arrastre, sin JavaScript ── * La maqueta enseña una reseña por pantalla. Un carrusel con scroll-snap da * ese gesto sin cargar ninguna librería, y si el navegador no lo soporta * queda una lista que se arrastra: nunca una reseña inaccesible. */ .bellamar-testimonios__lista { display: flex; grid-template-columns: none; gap: 12px; margin-inline: calc( var(--bellamar-aire) * -1 ); padding-inline: var(--bellamar-aire); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .bellamar-testimonios__lista::-webkit-scrollbar { display: none; } .bellamar-testimonios__tarjeta { flex: 0 0 85%; gap: 12px; padding: 20px; scroll-snap-align: center; } .bellamar-testimonios__titulo { font-size: 20px; line-height: 1.4; } .bellamar-testimonios__texto, .bellamar-testimonios__nombre { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; } /* ── Cierre ── */ .bellamar-cta__inner { flex-direction: column; align-items: stretch; gap: 20px; padding-block: 48px 40px; } /* * En la maqueta de movil el orden es titular -> formulario -> texto -> * botones, o sea que el formulario se cuela EN MEDIO de la columna de * texto. Como en escritorio son dos columnas hermanas, aqui se disuelve * el envoltorio del texto con `display: contents` y sus hijos pasan a ser * elementos del mismo flex que el formulario, que es lo unico que permite * intercalarlos sin duplicar el marcado. */ .bellamar-cta__texto { display: contents; } .bellamar-cta__titular { order: 1; } .bellamar-cta__formulario { flex: 1 1 auto; max-width: none; order: 2; } .bellamar-cta__cuerpo { order: 3; } .bellamar-cta__acciones { order: 4; } .bellamar-cta__acciones { flex-direction: column; } .bellamar-cta__acciones .bellamar-boton { width: 100%; } /* -- Pagina de gracias -- */ .bellamar-gracias__inner { gap: 20px; min-height: 0; padding-block: 48px; } .bellamar-gracias__titular { align-items: center; text-align: center; font-size: 30px; } .bellamar-gracias__cuerpo { font-size: var(--wp--preset--font-size--md); } .bellamar-gracias__acciones { align-self: stretch; flex-direction: column; } .bellamar-gracias__acciones .bellamar-boton { width: 100%; } /* -- Pie -- */ .bellamar-footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 24px; } .bellamar-footer__legal, .bellamar-footer__enlaces a { font-size: 11px; } .bellamar-legal__cuerpo { padding-block: 40px; } .bellamar-legal__titulo { font-size: 30px; } .bellamar-proceso__inner { gap: 24px; padding-block: 48px; } .bellamar-proceso__lista { grid-template-columns: 1fr; gap: 24px; } .bellamar-proceso__numero { width: 48px; height: 48px; } } /* ──────────────────── 5. Accesibilidad e impresión ────────────────────────── */ @media (prefers-reduced-motion: reduce) { .bellamar-testimonios__lista { scroll-behavior: auto; } } /* Un foco visible en todo lo que se pulsa: la mitad de estos elementos son * enlaces y botones sobre fondo azul, donde el anillo por defecto del navegador * casi no se ve. */ .bellamar-boton:focus-visible, .bellamar-form__enviar:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; } @media print { } /* ── Cabecera de sección ─────────────────────────────────────────────────── */ /* * Rótulo en versales, filete azulón de 64 px y titular a dos tonos. Se repite * en diez secciones; vive aquí una sola vez. */ .bellamar-cabecera { display: flex; flex-direction: column; gap: 24px; } /* En las secciones centradas el lienzo aprieta el hueco a 16. */ .bellamar-cabecera--centrada { gap: 16px; align-items: center; text-align: center; } .bellamar-cabecera__rotulo { display: flex; flex-direction: column; gap: 8px; } .bellamar-cabecera--centrada .bellamar-cabecera__rotulo { align-items: center; } .bellamar-cabecera__rotulo p { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--text); } .bellamar-cabecera__filete { display: block; width: 64px; height: 1px; background: var(--wp--preset--color--primary); } .bellamar-cabecera__titular { display: flex; flex-direction: column; gap: 8px; margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--3-xl); font-weight: 500; line-height: 1; color: var(--wp--preset--color--navy); } .bellamar-cabecera__titular-b { color: var(--wp--preset--color--primary); } /* ── ¿Te sientes identificado? ───────────────────────────────────────────── */ .bellamar-identificado { background: var(--wp--preset--color--bg-soft); } .bellamar-identificado__inner { display: flex; align-items: flex-start; gap: 96px; padding-block: 96px; } .bellamar-identificado__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 1 432px; min-width: 0; } .bellamar-identificado__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--text); } /* * La lista de la derecha, con cada frase en su tarjeta blanca. Es la misma * lista de siempre con un modificador: el icono y la alineación no cambian, * sólo el fondo y el aire. */ .bellamar-identificado .bellamar-lista-check { flex: 1 1 576px; min-width: 0; } .bellamar-lista-check--tarjetas { gap: 12px; } .bellamar-lista-check--tarjetas li { padding: 16px 20px; border-radius: 12px; background: var(--wp--preset--color--bg); } /* ── Por qué Bellamar ────────────────────────────────────────────────────── */ .bellamar-razones { background: var(--wp--preset--color--bg-warm); } .bellamar-razones__inner { display: flex; flex-direction: column; gap: 48px; padding-block: 96px; } /* * Tres columnas iguales. `minmax(0, 1fr)` y no `1fr` a secas: el contenido * minimo de una tarjeta con una palabra larga ensancha su columna y descuadra * las otras dos, y eso solo se ve con el texto real. */ .bellamar-razones__rejilla { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 32px; } .bellamar-razones__tarjeta { display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; padding: 32px; border-radius: var(--bellamar-radio); background: var(--wp--preset--color--bg); } .bellamar-razones__icono { display: flex; color: var(--wp--preset--color--primary); } .bellamar-razones__icono svg { width: 40px; height: 40px; } .bellamar-razones__titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 400; line-height: 1.33; color: var(--wp--preset--color--navy); } .bellamar-razones__texto { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } /* ── El tratamiento ──────────────────────────────────────────────────────── */ .bellamar-tratamiento { background: var(--wp--preset--color--bg); } .bellamar-tratamiento__inner { display: flex; align-items: center; gap: 96px; padding-block: 96px; } /* * 480x560 en el lienzo. `flex: 0 0 auto` con el alto fijo: si se deja crecer, * la foto estira la seccion entera cuando la columna de al lado es mas larga. */ .bellamar-tratamiento__foto { flex: 0 0 480px; width: 480px; height: 560px; object-fit: cover; border-radius: var(--bellamar-radio); } .bellamar-tratamiento__texto { display: flex; flex-direction: column; gap: 32px; flex: 1 1 528px; min-width: 0; } .bellamar-tratamiento__intro { display: flex; flex-direction: column; gap: 16px; } .bellamar-tratamiento__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-tratamiento__fases { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; } .bellamar-tratamiento__fase { display: flex; align-items: flex-start; gap: 16px; } .bellamar-tratamiento__fase > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bellamar-tratamiento__icono { display: flex; flex-shrink: 0; width: 24px; height: 24px; color: var(--wp--preset--color--primary); } .bellamar-tratamiento__icono svg { width: 24px; height: 24px; stroke-width: 2; } .bellamar-tratamiento__fase-titulo { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 20px; font-weight: 400; line-height: 1.4; color: var(--wp--preset--color--navy); } .bellamar-tratamiento__fase-texto { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } /* Las dos vías bajo los tres pasos. */ .bellamar-proceso__acciones { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } /* * En «El tratamiento» el lienzo aprieta el hueco entre rótulo, titular y * párrafo a 16: los tres van seguidos y el aire de 24 los separaba en tres * bloques distintos. Es la única sección de columna que lo hace así. */ .bellamar-tratamiento .bellamar-cabecera { gap: 16px; } /* ── Quién te acompaña ───────────────────────────────────────────────────── */ .bellamar-lolo { background: var(--wp--preset--color--bg-soft); } .bellamar-lolo__inner { display: flex; align-items: center; gap: 96px; padding-block: 96px; } /* * La foto lleva el rótulo encima, en una pastilla blanca casi opaca. Va dentro * de un

con

: es un pie de foto de verdad, no un adorno * flotante, y así quien no ve la imagen oye igualmente de quién es. */ .bellamar-lolo__figura { position: relative; flex: 0 0 480px; width: 480px; margin: 0; } .bellamar-lolo__foto { display: block; width: 480px; height: 560px; object-fit: cover; border-radius: var(--bellamar-radio); } .bellamar-lolo__rotulo { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; padding: 16px 20px; border-radius: 12px; background: rgba( 255, 255, 255, 0.94 ); } .bellamar-lolo__nombre { font-family: var(--wp--preset--font-family--display); font-size: 20px; font-weight: 400; line-height: 1.4; color: var(--wp--preset--color--navy); } .bellamar-lolo__cargo { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } .bellamar-lolo__texto { display: flex; flex-direction: column; gap: 32px; flex: 1 1 528px; min-width: 0; } .bellamar-lolo__intro { display: flex; flex-direction: column; gap: 16px; } .bellamar-lolo .bellamar-cabecera { gap: 16px; } .bellamar-lolo__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--lg); line-height: 1.56; color: var(--wp--preset--color--text); } .bellamar-lolo__remate { margin: 0; font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-lolo__cifras { display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); gap: 16px; } .bellamar-lolo__cifra { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; padding: 16px; border-radius: 12px; background: var(--wp--preset--color--bg); } .bellamar-lolo__cifra-valor { font-family: var(--wp--preset--font-family--display); font-size: 32px; font-weight: 500; line-height: 1.125; color: var(--wp--preset--color--primary); } .bellamar-lolo__cifra-texto { font-size: var(--wp--preset--font-size--xs); line-height: 1.33; color: var(--wp--preset--color--text); } /* La frase, con el filete azulón a la izquierda. */ .bellamar-lolo__cita { margin: 0; padding: 20px 24px; border-left: 4px solid var(--wp--preset--color--primary); border-radius: 0 12px 12px 0; background: var(--wp--preset--color--bg); } .bellamar-lolo__cita p { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xl); font-weight: 500; line-height: 1.33; color: var(--wp--preset--color--navy); } .bellamar-lolo__red { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } .bellamar-lolo__red a, #bellamar-main .bellamar-lolo__red a { font-weight: 700; color: var(--wp--preset--color--navy); text-decoration: none; } .bellamar-lolo__red a:hover { text-decoration: underline; } /* ── Para familias ───────────────────────────────────────────────────────── */ .bellamar-familias { background: var(--wp--preset--color--bg-warm); } .bellamar-familias__inner { display: flex; align-items: center; justify-content: space-between; gap: 96px; padding-block: 96px; } .bellamar-familias__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 0 1 520px; min-width: 0; } .bellamar-familias__cuerpo { margin: 0; font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--text); } .bellamar-familias__foto { flex: 0 0 488px; width: 488px; height: 400px; object-fit: cover; border-radius: var(--bellamar-radio); } /* ══════════════════════════ Móvil: el otro lienzo ══════════════════════════ * * La maqueta de móvil no es la de escritorio estrechada, es otro diseño: se * caen los rótulos y los filetes, las columnas se apilan en otro orden, los * tres pasos se tumban, los testimonios pasan a carrusel y aparece una barra * fija abajo. Todo eso vive aquí. * * Va después de la media query que traía el tema de la landing de Meta y con * el mismo punto de corte a propósito: donde las dos digan cosas distintas, * gana esta, que es la que sigue al lienzo de Google. */ @media ( max-width: 781px ) { /* ── Lo común ── */ /* * Fuera rótulos y filetes. En una pantalla de 390 px cada uno se come dos * líneas de alto para decir muy poco, y el lienzo de móvil los quita en las * once secciones que los llevan. */ .bellamar-cabecera__rotulo { display: none; } .bellamar-cabecera, .bellamar-cabecera--centrada { gap: 8px; align-items: flex-start; text-align: left; } .bellamar-cabecera__titular { font-size: 30px; line-height: 1.13; } /* Los botones ocupan el ancho y bajan a 52, como el lienzo. */ .bellamar-boton--accion, #bellamar-main .bellamar-boton--accion { width: 100%; min-height: 52px; padding: 0 20px; font-size: var(--wp--preset--font-size--sm); } /* ── Hero ── */ .bellamar-hero__titular { font-size: 36px; line-height: 1.11; } .bellamar-hero__ventaja { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; } .bellamar-sello-fila { gap: 12px; } /* El texto de al lado del sello sobra en móvil: la píldora ya lo dice. */ .bellamar-sello-fila__pie { display: none; } /* ── Cifras ── */ .bellamar-cifras__inner { display: grid; grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 16px; padding-block: 24px; } .bellamar-cifras__item { flex: initial; } .bellamar-cifras__valor { font-size: 28px; line-height: 1.14; } .bellamar-cifras__texto { font-size: var(--wp--preset--font-size--xs); line-height: 1.33; } /* ── ¿Te sientes identificado? ── */ .bellamar-identificado__inner { flex-direction: column; gap: 24px; padding-block: 48px; } .bellamar-identificado__texto { gap: 16px; flex: initial; width: 100%; } .bellamar-identificado .bellamar-lista-check { flex: initial; width: 100%; } /* ── Seis razones ── */ .bellamar-razones__inner { gap: 24px; padding-block: 48px; } .bellamar-razones__rejilla { grid-template-columns: 1fr; gap: 16px; } .bellamar-razones__tarjeta { padding: 24px; } .bellamar-razones__titulo { font-size: var(--wp--preset--font-size--lg); } /* ── El tratamiento ── */ /* * El lienzo de móvil pone el titular primero, luego la foto y después el * texto. Se consigue con `order` y no moviendo el HTML porque en escritorio * la foto va la primera: un solo marcado para los dos tamaños. * * `display: contents` en los dos contenedores intermedios saca a sus hijos * a la rejilla del padre para poder ordenarlos. No deja rastro visual — no * llevan fondo ni borde — y por eso aquí es seguro. */ .bellamar-tratamiento__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 48px; } .bellamar-tratamiento__foto { order: 2; flex: initial; width: 100%; height: 220px; } .bellamar-tratamiento__texto, .bellamar-tratamiento__intro { display: contents; } .bellamar-tratamiento .bellamar-cabecera { order: 1; } .bellamar-tratamiento__cuerpo { order: 3; } .bellamar-tratamiento__fases { order: 4; gap: 16px; } /* ── Las instalaciones ── */ .bellamar-centro__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 48px; } .bellamar-centro__texto { display: contents; } .bellamar-centro .bellamar-cabecera { order: 1; } .bellamar-centro__fotos { order: 2; flex: initial; max-width: none; } .bellamar-centro__foto { height: 117px; } .bellamar-centro__cuerpo { order: 3; } /* * La lista de tres no está en el lienzo de móvil, y tiene sentido: repite * lo que ya cuentan las cuatro fotos justo encima. */ .bellamar-centro .bellamar-lista-check { display: none; } /* ── Tres pasos ── */ .bellamar-proceso__inner { gap: 24px; padding-block: 48px; } .bellamar-proceso__lista { grid-template-columns: 1fr; gap: 16px; } /* Tumbados: el número al lado del texto, no encima. */ .bellamar-proceso__paso { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; } .bellamar-proceso__numero { flex-shrink: 0; width: 44px; height: 44px; font-size: var(--wp--preset--font-size--lg); } .bellamar-proceso__paso-titulo { font-size: var(--wp--preset--font-size--lg); } .bellamar-proceso__acciones { flex-direction: column; align-items: stretch; gap: 12px; } /* * El WhatsApp de aquí sobra en móvil: está en la barra fija de abajo, a un * pulgar de distancia, y repetido dos veces en la misma pantalla deja de * leerse como una opción y empieza a leerse como insistencia. */ .bellamar-proceso__acciones .bellamar-boton--whatsapp { display: none; } /* ── Quién te acompaña ── */ .bellamar-lolo__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 48px; } .bellamar-lolo__figura { order: 2; flex: initial; width: 100%; } .bellamar-lolo__foto { width: 100%; height: 360px; } .bellamar-lolo__texto, .bellamar-lolo__intro { display: contents; } .bellamar-lolo .bellamar-cabecera { order: 1; } .bellamar-lolo__cuerpo { order: 3; font-size: var(--wp--preset--font-size--base); } .bellamar-lolo__remate { order: 4; } .bellamar-lolo__cifras { order: 5; grid-template-columns: repeat( 2, minmax(0, 1fr) ); } .bellamar-lolo__cita { order: 6; } .bellamar-lolo__red { order: 7; } /* ── Testimonios ── */ .bellamar-testimonios__inner { gap: 24px; padding-block: 48px; } .bellamar-testimonios__cabecera { align-items: flex-start; text-align: left; } /* * Carrusel. Tres tarjetas de 450 px apiladas son metro y medio de scroll * para leer lo mismo; el lienzo las pone en una fila que se desliza. Es * scroll nativo con puntos de anclaje: sin JS no se rompe nada, y con el * teclado o un lector de pantalla sigue siendo una lista que se recorre * entera. */ .bellamar-testimonios__lista { display: flex; gap: 16px; /* * min-width: 0 no es decorativo: dentro de una columna flexible, un * elemento con overflow se mide por su contenido —tres tarjetas— y se * lleva la pagina entera 642 px a la derecha en vez de hacer scroll el. */ min-width: 0; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; /* El aire lateral de la sección, por dentro: así la primera tarjeta empieza alineada con el titular y la última no queda pegada al borde. */ margin-inline: calc( -1 * var(--bellamar-aire) ); padding-inline: var(--bellamar-aire); scroll-padding-inline: var(--bellamar-aire); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bellamar-testimonios__lista::-webkit-scrollbar { display: none; } .bellamar-testimonios__tarjeta { flex: 0 0 100%; scroll-snap-align: start; } /* ── Para familias ── */ .bellamar-familias__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 48px; } .bellamar-familias__texto { display: contents; } .bellamar-familias .bellamar-cabecera { order: 1; } .bellamar-familias__foto { order: 2; flex: initial; width: 100%; height: 200px; } .bellamar-familias__cuerpo { order: 3; } .bellamar-familias .bellamar-boton { order: 4; } /* ── Cierre ── */ /* En el lienzo de móvil el formulario va antes que los dos botones. */ .bellamar-cta__texto { display: contents; } .bellamar-cta__titular { order: 1; } .bellamar-cta__cuerpo { order: 2; } .bellamar-cta__formulario { order: 3; } .bellamar-cta__acciones { order: 4; flex-direction: column; align-items: stretch; gap: 12px; } } /* ── Los puntos del carrusel ── */ /* * Fuera del móvil no existen: en escritorio las tres tarjetas se ven a la vez y * unos puntos de paginación que no paginan nada son ruido. */ .bellamar-testimonios__puntos { display: none; } @media ( max-width: 781px ) { .bellamar-testimonios__puntos { display: flex; justify-content: center; gap: 8px; } .bellamar-testimonios__punto { width: 24px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba( 255, 255, 255, 0.45 ); cursor: pointer; transition: background 0.2s ease; } .bellamar-testimonios__punto[aria-current="true"] { background: #ffffff; } .bellamar-testimonios__punto:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; } } /* ── La barra fija del móvil ─────────────────────────────────────────────── */ /* * En escritorio no existe. Setenta y dos píxeles de pantalla tapados para * repetir un teléfono que ya está escrito en la cabecera no salen a cuenta. */ .bellamar-barra { display: none; } @media ( max-width: 781px ) { .bellamar-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 12px; box-sizing: border-box; padding: 12px 16px; /* El hueco de la barra de gestos del iPhone, para que el dedo no caiga sobre el borde del botón. En un móvil sin esa barra vale 0. */ padding-bottom: calc( 12px + env( safe-area-inset-bottom ) ); border-top: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg); } .bellamar-barra .bellamar-boton { flex: 1 1 50%; min-width: 0; min-height: 48px; padding: 0 12px; font-size: var(--wp--preset--font-size--sm); } /* * Y el pie deja sitio para ella. Sin esto, la barra tapa la última línea * del pie —que es justo donde están los enlaces legales— y quien va a leer * la política de privacidad no puede pulsarla. */ .bellamar-footer__inner { padding-bottom: calc( 96px + env( safe-area-inset-bottom ) ); } } @media ( max-width: 781px ) { /* * Nada se sale por el lado derecho. * * El carrusel de testimonios es una fila de tres tarjetas dentro de un * contenedor que hace scroll. Deberia bastar con eso, pero el motor sigue * contando esas tarjetas en el desbordamiento de la pagina y deja la landing * desplazable 522 px a la derecha: en un movil, el dedo se va de lado * mientras alguien lee. * * `clip` y no `hidden`: `hidden` convierte el elemento en un contenedor de * scroll y eso rompe cualquier `position: sticky` que cuelgue de el. `clip` * solo recorta. */ .bellamar-landing { overflow-x: clip; } } @media ( max-width: 781px ) { /* * El cuerpo de texto baja a 14/24 en todas las secciones y los huecos se * aprietan a 20. No es un capricho del lienzo: a 375 px, 16/24 deja seis * palabras por línea y convierte cualquier párrafo en una columna * interminable. Con 14 caben ocho y el bloque se lee de una pasada. */ .bellamar-identificado__inner, .bellamar-razones__inner, .bellamar-tratamiento__inner, .bellamar-centro__inner, .bellamar-proceso__inner, .bellamar-lolo__inner, .bellamar-testimonios__inner, .bellamar-familias__inner { gap: 20px; } .bellamar-identificado__cuerpo, .bellamar-tratamiento__cuerpo, .bellamar-familias__cuerpo, .bellamar-lolo__cuerpo, .bellamar-lolo__remate, .bellamar-centro__cuerpo { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; } /* Las tarjetas de «¿Te sientes identificado?»: menos hueco entre ellas. */ .bellamar-lista-check--tarjetas { gap: 8px; } /* Las seis razones, con el aire de la maqueta de móvil. */ .bellamar-razones__tarjeta { padding: 20px; } .bellamar-razones__texto { line-height: 1.71; } /* Los tres pasos caben en 104 px de alto cada uno. */ .bellamar-proceso__paso { align-items: center; padding: 16px 20px; } .bellamar-proceso__paso-texto { font-size: var(--wp--preset--font-size--sm); line-height: 1.71; } /* Las fases del tratamiento, más juntas. */ .bellamar-tratamiento__fases { gap: 12px; } /* Y la frase de Lolo, sin tanto aire por dentro. */ .bellamar-lolo__cita { padding: 16px 20px; } .bellamar-lolo__cita p { font-size: var(--wp--preset--font-size--lg); } } @media ( max-width: 781px ) { /* * Los tres pasos, tumbados de verdad. * * En fila simple los tres hijos —número, título y texto— se reparten el * ancho y el título se queda en una columna de 73 px: seis líneas para tres * palabras. Con rejilla, el número ocupa las dos filas de la izquierda y el * título y el texto se apilan a su derecha, que es lo que dibuja el lienzo. */ .bellamar-proceso__paso { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "numero titulo" "numero texto"; align-items: center; column-gap: 16px; row-gap: 4px; } .bellamar-proceso__numero { grid-area: numero; align-self: start; } .bellamar-proceso__paso-titulo { grid-area: titulo; } .bellamar-proceso__paso-texto { grid-area: texto; } } /* ── La franja incómoda: entre el móvil y el escritorio ──────────────────── */ /* * Entre 782 y ~1150 px ya manda el diseño de dos columnas pero no hay 1104 de * caja. Las fotos con ancho fijo —480 en el tratamiento y en Lolo, 488 en * familias— dejaban al texto una columna de 280 y la sección se estiraba a lo * alto: a 900 px la página medía 9.227 px, más que en un móvil. * * Con esto las fotos ceden ancho y, si aun así no caben las dos columnas, la * fila se parte y cada una ocupa el ancho entero. */ @media ( min-width: 782px ) and ( max-width: 1150px ) { .bellamar-tratamiento__inner, .bellamar-lolo__inner, .bellamar-familias__inner, .bellamar-centro__inner, .bellamar-identificado__inner, .bellamar-hero__inner, .bellamar-cta__inner { flex-wrap: wrap; gap: 48px; } .bellamar-tratamiento__foto, .bellamar-lolo__figura, .bellamar-familias__foto { flex: 1 1 320px; width: auto; max-width: 100%; } .bellamar-lolo__foto { width: 100%; } .bellamar-centro__fotos { flex: 1 1 320px; } .bellamar-tratamiento__texto, .bellamar-lolo__texto, .bellamar-familias__texto, .bellamar-centro__texto, .bellamar-identificado__texto { flex: 1 1 340px; } .bellamar-razones__rejilla { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } /* * Y las fotos bajan de alto. Con los 560 px del lienzo grande y la mitad de * ancho, una foto de estas se come la pantalla entera de una tableta: a 800 * px la pagina llegaba a 10.479 px de alto, mas que en un movil. */ .bellamar-tratamiento__foto, .bellamar-lolo__foto { height: 420px; } .bellamar-familias__foto { height: 320px; } /* Menos aire vertical: el de 96 esta pensado para una caja de 1104. */ .bellamar-hero__inner, .bellamar-identificado__inner, .bellamar-razones__inner, .bellamar-tratamiento__inner, .bellamar-centro__inner, .bellamar-proceso__inner, .bellamar-lolo__inner, .bellamar-testimonios__inner, .bellamar-familias__inner, .bellamar-cta__inner { padding-block: 64px; } } /* ── Qué tratamos ────────────────────────────────────────────────────────── */ .bellamar-tratamos { background: var(--wp--preset--color--bg); } .bellamar-tratamos__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; /* 64 y no 96: es una sección corta, entre dos largas. */ padding-block: 64px; text-align: center; } .bellamar-tratamos__cabecera { display: flex; flex-direction: column; align-items: center; gap: 8px; } .bellamar-tratamos__rotulo { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--text); } /* * El único titular de la página cuyas dos mitades van en la misma línea, no * apiladas. Es a propósito del lienzo: aquí la frase es una sola —«ingreso * voluntario con equipo psiquiátrico propio»— y partirla en dos renglones la * convertiría en dos ideas. */ .bellamar-tratamos__titular { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 32px; font-weight: 500; line-height: 1.25; color: var(--wp--preset--color--navy); } .bellamar-tratamos__titular-b { color: var(--wp--preset--color--primary); } .bellamar-tratamos__titular-a + .bellamar-tratamos__titular-b::before { /* El espacio entre las dos mitades, que si no se pierde al ir en spans. */ content: ' '; white-space: pre; } .bellamar-tratamos__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .bellamar-tratamos__pastilla { padding: 10px 20px; border-radius: 999px; background: var(--wp--preset--color--bg-soft); font-size: var(--wp--preset--font-size--base); line-height: 1.5; color: var(--wp--preset--color--navy); } .bellamar-tratamos__nota { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; color: var(--wp--preset--color--text); } /* ── Aviso de urgencias ──────────────────────────────────────────────────── */ /* * Franja estrecha en crema, justo encima del pie. Ni roja ni con icono de * alarma: quien la necesita la lee igual, y gritarla convertiría el final de la * página en una advertencia en vez de en una invitación a llamar. */ .bellamar-urgencias { background: var(--wp--preset--color--bg-warm); } .bellamar-urgencias__inner { padding-block: 20px; } .bellamar-urgencias__texto { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.71; text-align: center; color: var(--wp--preset--color--text); } .bellamar-urgencias__texto strong { font-weight: 700; } @media ( max-width: 781px ) { .bellamar-tratamos__inner { gap: 20px; padding-block: 48px; } .bellamar-tratamos__titular { font-size: 26px; } .bellamar-tratamos__lista { gap: 8px; } .bellamar-tratamos__pastilla { padding: 8px 16px; font-size: var(--wp--preset--font-size--sm); } .bellamar-urgencias__inner { padding-block: 16px; } }