/* ==================================================================
GLOBAL.CSS — Hoja de estilos ÚNICA de supera-tu-ansiedad.es
------------------------------------------------------------------
Unificación 2026-07-12: chrome (header/footer/menú) común a todas
las páginas y clases en kebab-case español (ver unificacion/mapa-clases.md).
COMPATIBILIDAD: los selectores con nombres antiguos (p. ej. .mainTitle
junto a .titulo-logo) son ALIAS para los posts del blog ya publicados.
Cuando se republiquen todos los posts, se pueden retirar con
unificacion/aplicar-unificacion.py.
El HTML se genera con unificacion/aplicar-unificacion.py: el header y el
footer viven en plantillas/header.html y plantillas/footer.html.
================================================================== */
:root {
--color-primario: #2f6c8f;
--color-footer: #333;
--gris-claro: #f2f2f2;
--fuente-texto: Roboto, sans-serif;
--fuente-titulos: Montserrat, sans-serif;
--fuente-logo: "Dancing Script", cursive;
}
/* ==================================================================
BASE: homepage / landings (homepage.css)
================================================================== */
@font-face {
font-family: "Dancing Script";
font-style: normal;
font-weight: 400;
src: url("../fuente/dancing-script-v23-latin-regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: url("../fuente/roboto-v30-latin-regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: url("../fuente/roboto-v30-latin-700.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: 400;
src: url("../fuente/montserrat-v24-latin-regular.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: 600;
src: url("../fuente/montserrat-v24-latin-600.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: Montserrat;
font-style: normal;
font-weight: 700;
src: url("../fuente/montserrat-v24-latin-700.woff2") format("woff2");
font-display: swap;
}html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
main {
display: block;
}
b, strong {
font-weight: bolder;
}
.resaltado-negrita, .texto-grande p {
font-weight: 700;
}
em {
font-style: normal;
}
img {
border-style: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button, select {
text-transform: none;
}
[type="button"], [type="submit"], button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring {
outline: ButtonText dotted 1px;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
min-height: 100vh;
}
body {
background-color: #fff;
}
a {
background-color: transparent;
}
a, button, input, li, option, p, select, textarea {
color: #000;
font-family: var(--fuente-texto);
list-style: none;
}
p {
line-height: 1.7;
}
a, li {
text-decoration: none;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h1, h2, h3, h4, label {
font-family: var(--fuente-titulos);
font-weight: 700;
}
.titulo-destacado, h3 {
color: var(--color-primario);
}
button, input, textarea {
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
font-family: var(--fuente-texto);
}
input, select, textarea {
outline: 0;
}
.boton-transparente {
border: none;
cursor: pointer;
}
.caja-texto-centrado, .carrusel {
overflow: hidden;
}
.boton-primario, .caja-destacada, .carrusel, .carrusel-contenido, .mitad-flexible, .contenedor-flex-alto {
position: relative;
}
.hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy, .carrusel-item {
background-repeat: no-repeat;
background-position: center;
}
.hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy {
position: relative;
overflow: hidden;
height: 43.75em;
width: 100%;
background-image: none;
}
.hero-fondo picture, .hero-fondo-pagina picture, .hero-fondo-quien-soy picture, .hero-fondo img, .hero-fondo-pagina img, .hero-fondo-quien-soy img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-fondo img, .hero-fondo-pagina img, .hero-fondo-quien-soy img {
display: block;
object-fit: cover;
object-position: center;
}
.hero-fondo-quien-soy::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
}
.hero-texto {
position: relative;
z-index: 1;
}
.hero-fondo-quien-soy .hero-texto {
z-index: 2;
}
.subrayar {
text-decoration: underline;
}
#whatsapp-btn {
position: fixed;
bottom: 20px;
right: 30px;
z-index: 3;
border: none;
outline: 0;
background-color: transparent;
cursor: pointer;
padding: 15px;
transition: opacity 0.2s ease;
}
/* test.js la añade/quita mientras el botón se solapa visualmente con el
test interactivo, para que no tape las opciones ni el botón continuar. */
#whatsapp-btn.oculto-tras-test {
opacity: 0;
pointer-events: none;
}
.whatsapp {
height: 60px;
width: 60px;
}
.pulso, .pulse {
height: 60px;
width: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.pulso::before, .pulse::before {
content: "";
position: absolute;
border: 1px solid green;
width: calc(100% + 40px);
height: calc(100% + 40px);
border-radius: 50%;
animation: pulse 2s linear infinite;
}
.pulso::after, .pulse::after {
content: "";
position: absolute;
border: 1px solid green;
width: calc(100% + 40px);
height: calc(100% + 40px);
border-radius: 50%;
animation: pulse 2s linear infinite;
animation-delay: 0.3s;
}
@keyframes pulse {
0% {
transform: scale(0.4);
opacity: 0
}
20% {
transform: scale(0.9);
opacity: 1;
}
41% {
transform: scale(1.2);
opacity: 0;
}
100% {
transform: scale(1.2);
opacity: 0;
};
}.vibrar {
animation: vibrar 2.82s cubic-bezier(.36,.07,.19,.97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes vibrar {
0%, 29% {
transform: translate3d(0, 0, 0)
}
30%, 32% {
transform: translate3d(-2.5px, 0, 0);
}
33%, 35% {
transform: translate3d(2.5px, 0, 0);
}
36%, 38% {
transform: translate3d(-2.5px, 0, 0);
}
39%, 41% {
transform: translate3d(2.5px, 0, 0);
}
42%, 100% {
transform: translate3d(0, 0, 0);
};
}.contenido-centrado, .contenedor-flex, .flex-alineado-centro, .flexAlignCenter, .flex-centrado-items, .flexCenterAlignItems, .contenedor-fila-inversa, .contenedor-fila, .envoltorio-flex {
display: flex;
}
.boton-cta {
background-color: var(--color-primario);
min-height: 3.125em;
width: fit-content;
border: none;
padding: 1.05em 2.4em;
cursor: pointer;
margin-top: 15px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
max-width: calc(100% - 2rem);
line-height: 1.2;
box-sizing: border-box;
}
.flex-centrado-items, .flexCenterAlignItems {
justify-content: center;
align-items: center;
}
.caja-texto-centrado:hover, .caja-texto-centrado:hover .texto-grande, .texto-blanco {
color: #fff;
}
.texto-centrado, .centerText, .centerAlign, .caja-texto-centrado, .alineado-izquierda {
text-align: center;
}
.contenedor-adaptable, .responsiveContainer {
height: 6.5em;
width: 90%;
margin: auto;
}
.contenedor-flex, .flex-alineado-centro, .flexAlignCenter {
justify-content: space-between;
align-items: center;
}
.ancho-adaptable-40, .responsiveWidth40 {
width: 50%;
}
.titulo-logo, .mainTitle {
font-family: var(--fuente-logo);
font-size: 2.12em;
padding-right: 8.4375em;
list-style: none;
}
.fondo-seccion, .fondo-oscuro, .darkBackground, .seccion {
height: auto;
padding: 3em 0;
width: 100%;
}
.fondo-seccion {
background-color: var(--gris-claro);
margin: 2em 0;
padding: 4em 0;
}
.fondo-seccion-contacto {
background-color: var(--gris-claro);
margin: 0;
padding: 0;
}
.margen-especialista {
margin: 2em 0 0 0;
padding-bottom: 3em;
}
.fondo-oscuro, .darkBackground {
background-color: var(--color-footer);
}
.contenedor-enlaces-pie a, .footerLinkContainer a {
margin: 0 5px;
}
.contenedor-enlaces-pie, .footerLinkContainer {
margin-top: 25px;
}
.contenido-centrado {
align-items: center;
}
.titulo {
font-size: 72px;
margin: 0;
opacity: 1;
transform: none;
transition: none;
}
.hero-texto {
width: 55%;
margin: 7%;
text-align: left;
}
.hero-texto p {
width: 70%;
font-size: 19px;
font-weight: 700;
}
.hero-colegiado {
margin-top: 22px;
}
.hero-colegiado-chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.25;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {.hero-colegiado {
margin-top: 16px;
}
.hero-colegiado-chip {
font-size: 12px;
padding: 6px 12px;
letter-spacing: 0.2px;
}
.hero-colegiado-largo {
display: none;
}
.boton-cta {
min-height: 0;
padding: 0.7em 1.8em;
font-size: 16px;
}
}.contenedor-fila-inversa, .contenedor-fila {
height: auto;
flex-direction: row-reverse;
padding: 2.5em 0;
}
.contenedor-fila-inversa {
flex-direction: row;
}
.contenedor-principal {
width: 85%;
margin: auto;
max-width: 1200px;
}
.imagen-tamano-fijo {
height: 43em;
width: 31.25em;
}
.video {
height: 31.25em;
width: 31.25em;
}
.video-quien-soy {
height: 38em;
width: 32em;
object-fit: cover;
}
.mitad-flexible, .contenedor-flex-alto {
height: 100%;
width: 50%;
}
.contenedor-flex-alto {
margin-top: 100px;
}
.mitad-flexible {
margin-left: 3.125em;
}
.caja-contenido {
width: 85%;
margin: auto;
}
.mitad-flexible {
opacity: 0;
left: 6.25em;
}
.boton-primario, .caja-secundaria, .caja-tarjeta {
padding: 1.25em;
}
.efecto-deslizar {
opacity: 1;
left: 0;
transition: 0.8s linear;
}
.contenedor-flex-alto {
opacity: 0;
right: 6.25em;
}
.efecto-quienes-somos-1 {
opacity: 1;
right: 0;
transition: 0.8s linear;
}
.bloque-oculto {
display: none;
margin: 0 1.25em 0.625em 0;
}
.boton-transparente {
background-color: transparent;
}
.boton-primario, .caja-secundaria, .caja-destacada {
background-color: var(--color-primario);
}
.boton-primario, .caja-secundaria, .caja-tarjeta {
display: inline-block;
margin: 2.5em;
width: 18.75em;
height: auto;
vertical-align: top;
}
.boton-primario, .caja-destacada {
opacity: 0;
top: 6.25em;
}
.efecto-cards, .efecto-cards-2 {
opacity: 1;
top: 0;
transition: 0.8s linear;
}
.imagen-icono {
width: 6.25em;
height: 6.25em;
}
.boton-secundario, .boton-llamada-accion {
height: 2.5em;
width: 7.5em;
border: none;
background-color: var(--color-primario);
color: #fff;
border-radius: 30px;
margin-top: 10px;
cursor: pointer;
}
.boton-secundario {
height: 2.5em;
width: 6.875em;
margin: auto;
}
.boton-llamada-accion {
height: 3.125em;
width: fit-content;
min-width: 8.75em;
padding: 0 1.75em;
margin: 2.8125em auto;
white-space: nowrap;
max-width: calc(100% - 2rem);
line-height: 1.2;
box-sizing: border-box;
}
.caja-texto-centrado {
background-color: #fff;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.55);
}
.caja-texto-centrado, .grupo-formulario {
max-width: 25em;
min-width: 25em;
}
.margen-abajo-seccion {
margin-bottom: 2em;
}
.envoltorio-flex {
flex-wrap: wrap;
justify-content: space-around;
width: min(100em, 100%);
margin: auto;
}
.boton-contorno, .boton-pie {
display: inline-block;
text-transform: uppercase;
}
.caja-texto-centrado {
flex: 1;
margin: 1.25em;
color: var(--color-primario);
transition: 0.3s linear;
border-radius: 20px;
}
.boton-contorno:hover, .boton-pie {
background-color: var(--color-primario);
color: #fff;
}
.boton-pie {
padding: 0.75em 1.875em;
border-radius: 0 0 1.25em 1.25em;
font-size: 1em;
font-weight: 600;
transition: 0.4s linear;
margin: 0;
}
.campo-formulario, .campo-textarea, .grupo-formulario {
background-color: #fff;
}
.boton-contorno, .texto-grande {
color: var(--color-primario);
}
.texto-grande {
font-size: 3em;
margin: 1.2em 0 0.8em;
transition: 0.2s linear;
}
.caja-texto-centrado li {
font-size: 1.1em;
padding: 0.625em 0;
}
.caja-texto-centrado ul {
padding-left: 0;
}
.texto-grande p {
margin-bottom: 0;
}
.boton-contorno {
margin: 2.5em 0;
border: 2px solid var(--color-primario);
padding: 1.125em 2.5em;
border-radius: 0.5em;
font-weight: 500;
transition: 0.3s linear;
}
.contenedor-seccion, .sectionContainer, .mitad-ancho {
margin: auto;
}
.imagen-circular {
height: 4.375em;
width: 4.375em;
background: transparent;
}
.icono-red {
height: 2.5em !important;
width: 2.5em !important;
display: inline-block;
}
.grupo-formulario, .contenedor-mitad {
height: auto;
}
.mitad-ancho {
width: 75%;
}
.contenedor-seccion, .sectionContainer {
width: 80%;
}
.contenedor-mitad {
width: 50%;
}
.contenedor-cuadricula {
display: grid;
gap: 0.625em;
grid-template-columns: 1fr;
}
.mensaje-error {
color: red;
margin: 0;
}
.oculto {
display: none;
}
.grupo-formulario {
border: none;
border-radius: 1.5em;
padding: 2em;
width: auto;
box-shadow: 0 0 0.9375em 0 rgba(0, 0, 0, 0.55);
}
.texto-rojo {
color: red;
margin: 0 10px;
}
.alineado-izquierda {
display: flex;
justify-content: flex-start;
}
.campo-formulario, .campo-textarea {
border: 1px solid #000;
border-radius: 10px;
height: 2.5em;
margin: 1.25em 0;
padding: 0.1875em 0.625em;
width: 95%;
}
.campo-textarea {
height: 8em;
padding: 1em 0.5em;
}
#mensaje-rojo-nada-mensaje {
margin-bottom: 2.5em;
}
.margen-superior {
margin-top: 2em;
}
.margen-vertical {
margin: 1em 0;
}
.carrusel {
height: 100%;
width: 100%;
}
.carrusel-contenido {
width: 33.33%;
}
.carrusel-envoltorio {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carrusel-item {
flex: 1 0 100%;
width: 100%;
height: 100%;
background-size: contain;
color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.flecha-siguiente, .flecha-anterior {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: rgba(0, 0, 0, 0.3);
width: 1.25em;
}
.flecha-anterior {
left: 0.75em;
}
.flecha-siguiente {
left: 290%;
}
.flecha-siguiente:hover, .flecha-anterior:hover {
cursor: pointer;
color: rgba(0, 0, 0, 0.7);
}
.d-none {
display: none !important;
}
.carrusel-identificacion .carrusel {
height: auto;
margin-top: 1.5em;
}
.carrusel-identificacion .carrusel-envoltorio {
align-items: stretch;
}
.carrusel-identificacion .carrusel-item {
align-items: stretch;
box-sizing: border-box;
color: #111827;
padding: 1em;
}
.carrusel-identificacion .caja-tarjeta, .carrusel-identificacion .caja-secundaria, .carrusel-identificacion .boton-primario {
box-sizing: border-box;
margin: 1.2em;
min-height: 19em;
width: min(22em, 100%);
}
.carrusel-identificacion h3 {
margin-top: 0.65em;
}
#fobias-frecuentes .carrusel {
margin-top: 1.5em;
}
#fobias-frecuentes .carrusel-envoltorio {
align-items: stretch;
}
#fobias-frecuentes .carrusel-item {
align-items: stretch;
padding: 1em;
box-sizing: border-box;
}
#fobias-frecuentes .caja-tarjeta, #fobias-frecuentes .caja-secundaria {
width: min(22em, 100%);
min-height: 18em;
margin: 1.2em;
box-sizing: border-box;
}
#fobias-frecuentes h3 {
margin-top: 0.65em;
}
#fobias-frecuentes .caja-secundaria .icono-fobia {
filter: brightness(0) invert(1);
}
.carrusel-especialidades {
background: #fff;
}
.intro-especialidades {
max-width: 900px;
}
.intro-especialidades h2 {
margin-bottom: 1.8em;
}
#especialidades-ansiedad .carrusel {
height: auto;
margin-top: 0;
}
#especialidades-ansiedad .carrusel-envoltorio {
align-items: stretch;
}
#especialidades-ansiedad .carrusel-item {
align-items: stretch;
box-sizing: border-box;
color: #111827 !important;
padding: 1em 0;
}
.tarjeta-especialidad {
align-items: center;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 20.5rem;
margin: 0 auto;
padding: 1.25rem;
text-align: center;
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
width: min(21.25rem, 100%);
}
.tarjeta-especialidad-icono {
background: transparent;
border-radius: 0;
height: 6.25rem;
object-fit: contain;
padding: 0;
width: 6.25rem;
}
.tarjeta-especialidad h3 {
color: var(--color-primario);
font-size: 1.25rem;
margin: 1.05rem 0 0;
}
.tarjeta-especialidad > p {
color: #000;
font-size: 0.92rem;
line-height: 1.5;
margin: 1.05rem 0 0;
max-width: 30ch;
text-align: center;
}
.tarjeta-especialidad-cta {
margin-top: auto;
align-self: center;
display: inline-block;
padding: 0.4rem 1.15rem;
border: 1.5px solid var(--color-primario);
border-radius: 999px;
color: var(--color-primario);
background: transparent;
font-size: 0.82rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tarjeta-especialidad-cta:hover, .tarjeta-especialidad-cta:focus-visible {
background: var(--color-primario);
color: #fff;
}
#especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad-cta {
border-color: #fff;
color: #fff;
}
#especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad-cta:hover, #especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad-cta:focus-visible {
background: #fff;
color: var(--color-primario);
}
#especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad {
background: var(--color-primario);
}
#especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad h3, #especialidades-ansiedad .carrusel-envoltorio > .carrusel-item:nth-child(3n+2) .tarjeta-especialidad p {
color: #fff;
}
#especialidades-ansiedad #specialtyCarouselCta {
margin-top: 2.7rem;
}
.efecto-caja-citas-libres {
opacity: 1;
right: 0;
transition: 0.6s linear;
}
.block {
display: block;
}
select.campo-formulario {
width: 100%;
height: 3em;
padding: 0.1875em 0.625em;
border: 1px solid #000;
border-radius: 10px;
box-sizing: border-box;
font-size: 16px;
}
.input-error {
border: 2px solid red;
}
select.campo-formulario.input-error {
border: 2px solid red !important;
}
.hamburguesa, .hamburger {
background: none;
border: none;
display: none;
font-size: 2em;
cursor: pointer;
color: var(--color-primario);
}
.menu-lateral, .sideMenu, .overlay {
display: none;
}
.blur-background {
filter: blur(5px);
transition: filter 0.3s ease;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
#overlay.show {
opacity: 1;
visibility: visible;
}
.fondo-blanco {
background-color: #fff;
}
a.enlace-descarga {
color: #1a0dab;
text-decoration: underline;
}
a.enlace-descarga:hover {
color: #0d0080;
}
.grupo-honeypot {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.mitad {
margin-top: 50px;
}
.sin-cursor {
cursor: default;
pointer-events: none;
color: inherit;
text-decoration: none;
}
.caja-contenido ul, .caja-contenido ol {
margin-left: 1.5rem;
padding-left: 0.5rem;
}
.caja-contenido ul {
list-style: disc !important;
}
.caja-contenido ol {
list-style: decimal !important;
}
.caja-contenido li {
list-style: inherit !important;
margin: 0.6rem 0;
line-height: 1.6;
text-decoration: none !important;
}
.caja-contenido li a {
text-decoration: underline;
color: #0077b6;
}
.caja-contenido li a:hover {
color: #005a87;
}
.enlace-perfil {
color: #0077b6 !important;
text-decoration: underline !important;
text-underline-offset: 0.15em;
font-weight: 700;
}
.enlace-perfil:hover, .enlace-perfil:focus {
color: #005a87 !important;
}
[id^="sintomas-"] .contenedor-flex, #quienes-somos-1 .contenedor-flex {
margin-bottom: 2rem;
}
[id^="sintomas-"] .contenedor-flex:last-child, #quienes-somos-1 .contenedor-flex:last-child {
margin-bottom: 0;
}
[id^="sintomas-"] .mitad-ancho p {
max-width: 36rem;
}
.sin-relleno {
padding-bottom: 0;
}
#testimonios {
background-color: #f7f5f0;
}
#testimonios .cabecera-testimonios {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.75rem;
}
#testimonios .intro-testimonios h2 {
margin: 0;
}
#testimonios .intro-testimonios p {
margin: 0.6rem 0 0;
color: #4b5563;
max-width: 56ch;
}
#testimonios .resumen-testimonios {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 16px;
padding: 0.9rem 1.1rem;
box-shadow: 0 10px 22px rgba(0,0,0,0.06);
text-align: center;
min-width: 210px;
}
#testimonios .nota-testimonios {
font-family: var(--fuente-titulos);
font-weight: 700;
font-size: 1.55rem;
line-height: 1;
}
#testimonios .estrellas-testimonios {
color: #f2b01e;
letter-spacing: 2px;
margin-top: 0.25rem;
font-size: 1rem;
}
#testimonios .contador-testimonios {
color: #6b7280;
font-size: 0.82rem;
margin-top: 0.15rem;
}
#testimonios .carrusel {
margin-top: 0.5rem;
height: auto;
}
#testimonios .carrusel-contenido {
height: auto;
}
#testimonios .carrusel-envoltorio {
align-items: flex-start;
height: auto;
}
#testimonios .carrusel-item {
align-items: flex-start;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
height: auto;
}
#testimonios .tarjeta-testimonio {
width: min(420px, 100%);
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 18px;
padding: 1.2rem 1.2rem 1.1rem;
box-shadow: 0 14px 26px rgba(0,0,0,0.08);
text-align: left;
}
#testimonios .cabecera-testimonio {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin-bottom: 0.8rem;
}
#testimonios .avatar-testimonio {
width: 44px;
height: 44px;
border-radius: 999px;
background: #e5e7eb;
color: #111827;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--fuente-titulos);
font-weight: 700;
flex: 0 0 44px;
}
#testimonios .meta-testimonio {
min-width: 0;
}
#testimonios .nombre-testimonio {
font-family: var(--fuente-titulos);
font-weight: 700;
font-size: 1rem;
}
#testimonios .subtitulo-testimonio {
color: #6b7280;
font-size: 0.82rem;
margin-top: 0.1rem;
}
#testimonios .texto-testimonio {
margin: 0;
color: #111827;
line-height: 1.7;
font-size: 0.95rem;
}
#testimonios .carrusel-item {
color: #111827 !important;
}
#testimonios .nombre-testimonio {
color: #111827;
}
#testimonios .estrellas-testimonio {
color: #f2b01e;
letter-spacing: 2px;
font-size: 0.95rem;
margin-top: 0.35rem;
line-height: 1;
}
#testimonios .tarjeta-testimonio {
display: flex;
flex-direction: column;
height: auto;
min-height: 0;
}
#testimonios .texto-testimonio {
line-height: 1.7;
font-size: 0.95rem;
margin-top: 0.6rem;
--review-collapsed-lines: 6;
}
#testimonios .texto-testimonio.is-collapsed {
display: -webkit-box;
-webkit-line-clamp: var(--review-collapsed-lines);
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(1.7em * var(--review-collapsed-lines));
}
#testimonios .boton-leer-mas {
margin-top: 0.65rem;
align-self: flex-start;
padding: 0;
background: none;
border: none;
color: #1f4e79;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
}
#testimonios .boton-leer-mas:hover {
text-decoration: underline;
}
@media (max-width: 1200px) {.imagen-tamano-fijo {
height: 37.5em;
width: 29.375em;
}
.hero-texto {
width: auto;
}
.hero-fondo-pagina, .hero-fondo-quien-soy {
height: 43.75em;
}
.titulo-logo, .mainTitle {
padding: 0;
}
}
@media (max-width: 1050px) {#whatsapp-btn {
bottom: 10px;
right: 10px;
}
.grupo-formulario, .contenedor-mitad, .mitad-flexible, .contenedor-flex-alto {
margin: auto;
}
.imagen-tamano-fijo {
width: 26.875em;
height: 31.25em;
}
.hero-fondo-pagina, .hero-fondo-quien-soy {
height: 34.375em;
}
.contenedor-mitad, .mitad-flexible, .contenedor-flex-alto {
height: auto;
}
.titulo-logo, .mainTitle {
padding-right: 0;
}
.contenedor-nav, .navbarContainer {
padding-left: 0;
}
.contenedor-adaptable, .responsiveContainer {
width: 90%;
}
.contenedor-fila-inversa, .contenedor-fila {
display: block;
}
.contenedor-mitad, .mitad-flexible, .contenedor-flex-alto {
width: 100%;
}
.mitad-flexible, .contenedor-flex-alto {
margin-top: 3.125em;
}
.contenedor-flex h3 {
margin-bottom: 0.625em;
}
.boton-llamada-accion {
margin: 1.25em auto;
}
.carrusel-contenido {
width: 50%;
}
.flecha-siguiente {
left: 193%;
}
.relleno-seccion {
padding: 0;
}
.caja-margen-pequeno {
padding-bottom: 0.5em;
}
.titulo {
font-size: 3.75em;
}
.margen {
margin-bottom: 2em;
}
}
@media (min-width: 1001px) {.hamburguesa, .hamburger, .menu-lateral, .sideMenu {
display: none !important;
}
.contenedor-nav, .navbarContainer {
display: flex !important;
}
}
@media (max-width: 1000px) {.hamburguesa, .hamburger {
display: block;
font-size: 2em;
cursor: pointer;
color: #000;
}
.menu-lateral, .sideMenu {
position: fixed;
top: 0;
right: 0;
width: 70%;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
background-color: #fff;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
display: block;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
}
.menu-lateral.show, .sideMenu.show {
transform: translateX(0);
opacity: 1;
}
.cabecera-menu-lateral, .sideMenuHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1em 1.5em;
border-bottom: 2px solid #000;
}
.titulo-menu, .menuTitle {
font-weight: bold;
color: var(--color-primario);
font-size: 1.2em;
}
.boton-cerrar, .closeBtn {
font-size: 2.5em;
cursor: pointer;
color: #000;
}
.enlaces-menu-lateral, .sideMenuLinks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.enlaces-menu-lateral li, .sideMenuLinks li {
border-bottom: 1px solid #000;
}
.enlaces-menu-lateral li:last-child, .sideMenuLinks li:last-child {
border-bottom: 1px solid #ccc;
}
.enlaces-menu-lateral a, .sideMenuLinks a {
display: block;
width: 100%;
padding: 20px;
text-decoration: none;
color: #000;
font-size: 1.3em;
}
.enlaces-menu-lateral a:hover, .sideMenuLinks a:hover {
background-color: var(--gris-claro);
}
.contenedor-nav, .navbarContainer {
display: none;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 998;
}
.overlay.show {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 860px) {#testimonios .cabecera-testimonios {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1rem !important;
text-align: center !important;
}
#testimonios .intro-testimonios {
text-align: center !important;
}
#testimonios .intro-testimonios h2, #testimonios .intro-testimonios p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#testimonios .resumen-testimonios, #testimonios .caja-tarjeta, #testimonios .caja-secundaria, #testimonios .boton-primario.efecto-cards-2 {
margin-left: auto !important;
margin-right: auto !important;
}
#testimonios .carrusel-item {
display: flex !important;
justify-content: center !important;
}
}
@media (max-width: 768px) {.contenedor-adaptable, .responsiveContainer, .fondo-seccion, .fondo-oscuro, .darkBackground, .hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy, .seccion {
font-size: 15.5px;
}
.hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy {
height: 28.125em;
}
.contenedor-principal {
width: 90%;
}
.hero-texto p, .carrusel-contenido {
width: 100%;
}
.flecha-siguiente {
left: 95%;
}
.hero-texto {
text-align: center;
}
.hero-texto p {
font-size: 16px;
}
.titulo {
font-size: 2.8125em;
}
.margen-abajo-extra {
margin-bottom: 3.125em;
}
}
@media (max-width: 695px) {.grupo-formulario {
max-width: 21.875em;
min-width: 21.875em;
}
}
@media (max-width: 550px) {.hero-texto p {
margin-bottom: 0;
}
}
@media (max-width: 576px) {#whatsapp-btn {
bottom: 0;
right: 0;
padding: 8px;
}
.whatsapp {
height: 42px;
width: 42px;
}
.pulso, .pulse {
height: 42px;
width: 42px;
}
.caja-texto-centrado {
max-width: 22em;
min-width: 22em;
}
.contenedor-adaptable, .responsiveContainer, .fondo-seccion, .fondo-oscuro, .darkBackground, .seccion {
font-size: 15px;
}
.hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy {
height: 27em;
}
.ancho-adaptable-40, .responsiveWidth40 {
width: 40%;
}
.contenedor-adaptable, .responsiveContainer, .contenedor-mitad, .mitad-flexible, .contenedor-flex-alto {
width: 90%;
}
.contenedor-principal {
width: 95%;
}
.contenedor-flex {
display: block;
text-align: center;
}
.contenedor-imagen-flexible {
display: flex;
}
.boton-primario, .caja-secundaria, .caja-tarjeta {
margin: 1.5em 0;
}
.contenedor-flex {
margin-bottom: 2.5em;
}
.margen-abajo {
margin-bottom: 1em;
}
.contenedor-flex h3, .contenedor-seccion p, .sectionContainer p, .mitad-ancho {
text-align: left;
}
.contenedor-seccion, .sectionContainer, .mitad-ancho {
margin: auto;
}
.flecha-siguiente {
left: 93%;
}
.imagen-tamano-fijo {
width: 25em;
height: 31.25em;
}
.bloque-oculto {
margin: 0;
}
.titulo-logo, .mainTitle {
font-size: 1.875em;
}
}
@media (max-width: 500px) {.titulo {
font-size: 40px;
}
.hero-texto {
margin: 2% 1% 0;
}
.video {
height: 26em;
width: 26em;
}
.video-quien-soy {
height: 32em;
width: 26em;
object-fit: cover;
}
}
@media (max-width: 470px) {.boton-cta {
padding: 0.7em 1.5em;
}
.grupo-formulario {
max-width: 20em;
min-width: 20em;
}
.imagen-tamano-fijo {
width: 21.875em;
height: 26.25em;
}
}
@media (max-width: 450px) {.contenedor-adaptable, .responsiveContainer, .contenedor-mitad, .mitad-flexible, .contenedor-flex-alto {
width: 95%;
}
.imagen-tamano-fijo {
width: 20em;
height: 25em;
}
.video {
height: 24em;
width: 24em;
}
.video-quien-soy {
height: 30em;
width: 24em;
object-fit: cover;
}
.titulo {
font-size: 36px;
}
.boton-cta {
font-size: 15px;
}
}.hero-intro-cta {
display: none;
}
@media (max-width: 575px) {.hero-intro-solo-escritorio {
display: none;
}
.hero-intro-cta {
display: inline;
}
}
@media (max-width: 400px) {.caja-texto-centrado {
max-width: 20em;
min-width: 20em;
}
.grupo-formulario {
max-width: 18em;
min-width: 18em;
}
.ancho-adaptable-40, .responsiveWidth40 {
width: auto;
}
.video {
height: 23em;
width: 23em;
}
.video-quien-soy {
height: 29em;
width: 23em;
object-fit: cover;
}
.titulo-menu, .menuTitle {
font-size: 1.1rem;
padding: 0 10px;
text-align: center;
}
.boton-cerrar, .closeBtn {
font-size: 2rem;
}
.cabecera-menu-lateral, .sideMenuHeader {
padding: 0 10px;
}
.hero-fondo, .hero-fondo-pagina, .hero-fondo-quien-soy {
height: 25em;
}
}.contenedor-nav, .navbarContainer {
padding-left: 40px;
}
@media (max-width: 1200px) {.titulo-logo, .mainTitle {
padding-right: 0;
}
}
@media (max-width: 1000px) {.menu-lateral, .sideMenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
max-height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
z-index: 999;
display: block;
transform: translateY(-100%);
opacity: 0;
transition: all 0.3s ease;
}
.menu-lateral.show, .sideMenu.show {
transform: translateY(0);
opacity: 1;
}
}.item-desplegable, .nav-has-dropdown {
position: relative;
}
.boton-desplegable, .nav-dropdown-btn {
background: none;
border: none;
cursor: pointer;
font-size: inherit;
font-family: inherit;
color: inherit;
padding: 0;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.flecha-desplegable, .nav-dropdown-arrow {
font-size: 0.8em;
transition: transform 0.2s;
display: inline-block;
}
.item-desplegable:hover .flecha-desplegable, .nav-has-dropdown:hover .nav-dropdown-arrow, .item-desplegable.open .flecha-desplegable, .nav-has-dropdown.open .nav-dropdown-arrow {
transform: rotate(180deg);
}
.submenu-nav, .nav-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
list-style: none;
padding: 10px 0 8px;
margin: 0;
min-width: 230px;
border-radius: 0 0 8px 8px;
z-index: 200;
border-top: 3px solid var(--color-primario);
}
.item-desplegable:hover .submenu-nav, .nav-has-dropdown:hover .nav-dropdown-menu, .item-desplegable.open .submenu-nav, .nav-has-dropdown.open .nav-dropdown-menu {
display: block;
}
.submenu-nav li a, .nav-dropdown-menu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: var(--color-footer);
font-size: 0.95em;
white-space: nowrap;
transition: background 0.15s;
}
.submenu-nav li a:hover, .nav-dropdown-menu li a:hover {
background-color: #f0f7fc;
color: var(--color-primario);
}
@media (max-width: 1000px) {.item-desplegable-lateral, .side-has-dropdown {
border-bottom: 1px solid #000;
}
.boton-desplegable-lateral, .side-dropdown-btn {
display: flex;
width: 100%;
background: none;
border: none;
cursor: pointer;
font-size: 1.3em;
font-family: inherit;
color: #000;
padding: 20px;
text-align: left;
justify-content: space-between;
align-items: center;
}
.flecha-desplegable-lateral, .side-dropdown-arrow {
transition: transform 0.25s;
display: inline-block;
}
.item-desplegable-lateral.open .flecha-desplegable-lateral, .side-has-dropdown.open .side-dropdown-arrow {
transform: rotate(180deg);
}
.submenu-lateral, .side-dropdown-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
background-color: #f6f9fb;
}
.submenu-lateral.open, .side-dropdown-menu.open {
display: block;
}
.submenu-lateral li, .side-dropdown-menu li {
border-top: 1px solid #ddd;
}
.submenu-lateral li a, .side-dropdown-menu li a {
display: block;
padding: 14px 20px 14px 36px;
text-decoration: none;
color: #444;
font-size: 1.05em;
}
.submenu-lateral li a:hover, .side-dropdown-menu li a:hover {
background-color: #e8f3fa;
color: var(--color-primario);
}
}body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section {
margin: auto;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) h1, body:where(.page-legal, :has(.main-section:not(.centered-flex))) h1, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) h1, body:where(.page-error, :has(.main-section.centered-flex)) h1 {
font-size: 2em;
margin: .67em 0;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .blanco, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .blanco {
color: #fff;
}
.texto-centrado, .centerText, .centerAlign {
text-align: center;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .seccion-principal, body:where(.page-error, :has(.main-section.centered-flex)) .main-section {
height: auto;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section {
padding: 6.25em 0;
text-align: justify;
width: 70%;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal li, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section li, body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) p, body:where(.page-legal, :has(.main-section:not(.centered-flex))) p {
line-height: 2;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal ul, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section ul {
margin-top: 1.875em;
}
.subtitulo-centrado {
margin: 4em 0;
text-align: center;
}
.lista-vinetas {
list-style: initial;
}
@media (max-width:768px) {body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .seccion-principal, body:where(.page-error, :has(.main-section.centered-flex)) .main-section {
font-size: 15.5px;
}
}
@media (max-width:576px) {body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .seccion-principal, body:where(.page-error, :has(.main-section.centered-flex)) .main-section {
font-size: 15px;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .seccion-principal, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .main-section {
width: 85%;
}
.subtitulo-centrado {
font-size: 1.4em;
}
}
@media (max-width:400px) {.subtitulo-centrado {
font-size: 1.2em;
}
}.boton-cta-articulo {
color: #fff;
}
body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .flex-centrado, body:where(.page-error, :has(.main-section.centered-flex)) .centered-flex, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)), body:where(.page-error, :has(.main-section.centered-flex)) {
display: flex;
}
.envoltorio-contenido {
height: auto;
}
body:where(.pagina-error, :has(.seccion-principal.flex-centrado)), body:where(.page-error, :has(.main-section.centered-flex)) {
flex-direction: column;
}
body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .flex-centrado, body:where(.page-error, :has(.main-section.centered-flex)) .centered-flex {
justify-content: center;
align-items: center;
}
body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .bloque-centrado, body:where(.page-error, :has(.main-section.centered-flex)) .text-center {
text-align: center;
}
body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .seccion-principal, body:where(.page-error, :has(.main-section.centered-flex)) .main-section {
padding: 1.5em 0;
width: 100%;
}
.envoltorio-contenido {
margin: 8.125em;
max-width: 156.25em;
width: 50%;
}
.boton-inicio {
margin-top: 40px;
}
.boton-cta-articulo {
padding: 15px;
height: 2.5em;
width: 7.5em;
border: none;
background-color: var(--color-primario);
border-radius: 30px;
margin-top: 10px;
cursor: pointer;
}
@media (max-width:768px) {.envoltorio-contenido {
margin: 4em;
width: 60%;
}
}body:where(.pagina-blog, :has(.cabecera-blog)) em, body:where(.page-blog, :has(.header-blog)) em, body:where(.pagina-articulo, :has(.firma-autor)) em {
font-weight: bolder;
}
body:where(.pagina-blog, :has(.cabecera-blog)) h1, body:where(.page-blog, :has(.header-blog)) h1, body:where(.pagina-articulo, :has(.firma-autor)) h1 {
font-size: 2em;
margin: 40px 0;
}
body:where(.pagina-blog, :has(.cabecera-blog)) h3, body:where(.page-blog, :has(.header-blog)) h3, body:where(.pagina-articulo, :has(.firma-autor)) h3 {
color: var(--color-primario);
margin-top: 60px;
}
body:where(.pagina-blog, :has(.cabecera-blog)) h2, body:where(.page-blog, :has(.header-blog)) h2 {
line-height: 1.6;
}
body:where(.pagina-blog, :has(.cabecera-blog)) p, body:where(.page-blog, :has(.header-blog)) p, body:where(.pagina-articulo, :has(.firma-autor)) p {
line-height: 1.85;
}
body:where(.pagina-blog, :has(.cabecera-blog)) select:focus, body:where(.page-blog, :has(.header-blog)) select:focus, body:where(.pagina-articulo, :has(.firma-autor)) select:focus {
outline: 0;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 3;
border: none;
outline: 0;
background-color: var(--color-primario);
cursor: pointer;
padding: 15px;
border-radius: 100%;
}
.imagen-zoom, .image-container, .hoverImageEffect {
height: 50%;
overflow: hidden;
}
.imagen-zoom img, .image-container img, .hoverImageEffect img {
transition: transform .8s ease;
}
.imagen-zoom:hover img, .image-container:hover img, .hoverImageEffect:hover img {
transform: scale(1.1);
}
body:where(.pagina-blog, :has(.cabecera-blog)) .tarjeta-post, body:where(.page-blog, :has(.header-blog)) .post-preview {
align-items: center;
background-color: #fff;
border-radius: 25px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35);
cursor: pointer;
display: inline-block;
height: 31em;
margin: 2.4em;
width: 22em;
vertical-align: top;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .bloque-centrado, body:where(.page-blog, :has(.header-blog)) .text-center {
text-align: center;
margin-bottom: 20px;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .flex-centrado, body:where(.page-blog, :has(.header-blog)) .centered-flex {
align-items: center;
display: flex;
justify-content: center;
}
.imagen-borde-redondeado, .image-rounded-top, .roundedTopImage {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 100%;
object-fit: cover;
width: 100%;
}
body:where(.page-blog, :has(.header-blog)) header, body:where(.pagina-articulo, :has(.firma-autor)) header {
box-shadow: 0 4px 5px 0 rgb(0, 0, 0, .15);
background-color: #fff;
}
.cabecera-blog, .header-blog {
box-shadow: 0 4px 5px 0 rgb(0, 0, 0, .15);
background-color: #fff !important;
}
.extracto-post, .post-excerpt {
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
display: -webkit-box;
margin: 1em 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
font-size: 16px;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .titulo-post h3, body:where(.page-blog, :has(.header-blog)) .post-title h3 {
-webkit-box-orient: vertical;
display: -webkit-box;
margin: 1em 0 1.5em 0;
text-overflow: ellipsis;
white-space: normal;
font-size: 16px;
}
.relleno-seccion-blog, .section-padding {
height: auto;
padding: 2.5em 0;
width: 100%;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .blanco, body:where(.page-blog, :has(.header-blog)) .blanco {
color: #fff;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .titulo-post, body:where(.page-blog, :has(.header-blog)) .post-title {
margin: 10px 20px;
text-align: left;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .titulo-post h3, body:where(.page-blog, :has(.header-blog)) .post-title h3 {
font-family: var(--fuente-texto);
font-size: 20px;
letter-spacing: -.2px;
margin-top: 20px;
margin-bottom: 0;
}
.extracto-post, .post-excerpt {
margin-top: 0;
}
.seccion-imagen-fondo, .background-image-section {
background-image: url("https://supera-tu-ansiedad.es/imagen/foto-1300/blog-ansiedad.webp");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 35em;
width: 100%;
}
.seccion-intro, .intro-section {
width: 40%;
}
.seccion-intro h1, .intro-section h1 {
font-size: 3.125em;
margin-top: 0;
}
.seccion-intro p, .intro-section p {
font-size: 1.25em;
}
.contenedor-boton-intro, .intro-button-container {
margin-top: 2.8125em;
}
.boton-grande-primario, .button-large-primary {
background-color: var(--color-primario);
height: 100%;
width: auto;
border: none;
padding: 1.25em 3.125em;
cursor: pointer;
border-radius: 30px;
}
body:where(.page-blog, :has(.header-blog)) footer {
background-color: var(--color-footer);
text-align: center;
padding: 2em 0;
}
body:where(.page-blog, :has(.header-blog)) footer p {
color: #fff;
margin: 0;
font-family: var(--fuente-texto);
}
body:where(.page-blog, :has(.header-blog)) footer .footerLinkContainer {
margin-top: 25px;
}
body:where(.page-blog, :has(.header-blog)) footer .footerLinkContainer a {
color: #fff;
margin: 0 5px;
text-decoration: none;
font-family: var(--fuente-texto);
transition: color 0.3s ease;
}
body:where(.page-blog, :has(.header-blog)) footer .footerLinkContainer a:hover {
color: var(--color-primario);
}
@media (max-width:1200px) {.seccion-imagen-fondo, .background-image-section {
background-image: url("https://supera-tu-ansiedad.es/imagen/foto-1300/blog-ansiedad.webp");
height: 33em;
}
}
@media (max-width:1150px) {body:where(.pagina-blog, :has(.cabecera-blog)) .contenedor-adaptable, body:where(.page-blog, :has(.header-blog)) .responsiveContainer {
width: 90%;
}
body:where(.page-blog, :has(.header-blog)) .navbarContainer {
padding-left: 0;
}
}
@media (max-width:1070px) {.seccion-imagen-fondo, .background-image-section {
background-image: url("https://supera-tu-ansiedad.es/imagen/foto-1300/blog-ansiedad.webp");
height: 31em;
}
}
@media (max-width: 1000px) {body:where(.page-blog, :has(.header-blog)) .hamburger {
display: block;
font-size: 2em;
cursor: pointer;
color: #000;
background: none;
border: none;
}
}
@media (max-width:992px) {.seccion-intro, .intro-section {
width: 50%;
}
}
@media (max-width:845px) {body:where(.pagina-blog, :has(.cabecera-blog)) .tarjeta-post, body:where(.page-blog, :has(.header-blog)) .post-preview {
margin: 50px 15px;
}
}
@media (max-width:768px) {.relleno-seccion-blog, .section-padding, .seccion-imagen-fondo, .background-image-section {
font-size: 15.5px;
}
.seccion-intro, .intro-section {
width: 70%;
}
.seccion-imagen-fondo, .background-image-section {
background-image: url("https://supera-tu-ansiedad.es/imagen/foto-1300/blog-ansiedad.webp");
height: 28.125em;
}
}
@media (max-width:576px) {.seccion-intro h1, .intro-section h1 {
font-size: 2.8em;
margin-bottom: 0;
}
.boton-grande-primario, .button-large-primary {
padding: 1em 2.75em;
}
.seccion-intro p, .intro-section p {
line-height: 1.4;
margin-bottom: 0;
}
.relleno-seccion-blog, .section-padding, .seccion-imagen-fondo, .background-image-section {
font-size: 15px;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .tarjeta-post, body:where(.page-blog, :has(.header-blog)) .post-preview {
margin: 50px 0;
height: auto;
}
.seccion-intro, .intro-section {
width: 85%;
}
.seccion-imagen-fondo, .background-image-section {
background-image: url("https://supera-tu-ansiedad.es/imagen/foto-1300/blog-ansiedad.webp");
}
}
@media (max-width:430px) {.extracto-post, .post-excerpt {
-webkit-line-clamp: 4;
height: auto;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .titulo-post h3, body:where(.page-blog, :has(.header-blog)) .post-title h3 {
margin: 0;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .titulo-post, body:where(.page-blog, :has(.header-blog)) .post-title {
margin: 10px;
}
body:where(.pagina-blog, :has(.cabecera-blog)) .tarjeta-post, body:where(.page-blog, :has(.header-blog)) .post-preview {
height: 32em;
}
}
@media (max-width:400px) {.relleno-seccion-blog, .section-padding, .seccion-imagen-fondo, .background-image-section {
font-size: 13.5px;
}
}.seccion-botones-categoria, .category-buttons-section {
display: flex;
justify-content: center;
margin: 40px;
}
.botones-categoria, .category-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 800px;
justify-content: center;
}
.boton-categoria, .category-button {
background-color: #94b8d0;
color: #fff;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
.boton-categoria:hover, .category-button:hover {
background-color: #789ebc;
}
.boton-categoria:active, .category-button:active {
background-color: #6a93a6;
}
.boton-categoria.active, .category-button.active {
background-color: #397193;
color: #fff;
}
.desplegable-categoria, .category-dropdown {
display: none;
width: 100%;
max-width: 300px;
background-color: #789ebc;
color: #fff;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE2IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIwLDAgMTYsMCA4LDgiIGZpbGw9IiNmZmYiIC8+PC9zdmc+");
background-repeat: no-repeat;
background-position: calc(100% - 10px) center;
background-size: 16px 8px;
margin: 10px 0;
}
.desplegable-categoria:hover, .category-dropdown:hover {
background-color: var(--color-primario);
}
.desplegable-categoria:focus, .category-dropdown:focus, .desplegable-categoria:active, .category-dropdown:active {
background-color: #6a93a6;
}
.desplegable-categoria option, .category-dropdown option {
background-color: #fff;
color: #000;
}
@media (max-width: 576px) {#category-buttons {
display: none;
}
.desplegable-categoria, .category-dropdown {
display: block;
}
}.contenedor-paginacion, .pagination-container {
margin-top: 30px;
text-align: center;
padding: 20px 0;
}
.paginacion, .pagination {
display: inline-flex;
gap: 10px;
align-items: center;
justify-content: center;
list-style: none;
font-size: 16px;
}
.paginacion a, .pagination a, .paginacion span, .pagination span {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: #000;
border-radius: 50%;
transition: all 0.3s ease;
}
.paginacion a:hover, .pagination a:hover {
background-color: #f0f0f0;
color: #000;
}
.paginacion .disabled, .pagination .disabled {
color: #ccc;
pointer-events: none;
}
.paginacion .anterior, .pagination .prev, .paginacion .siguiente, .pagination .next {
font-weight: bold;
text-decoration: underline;
}
body:where(.pagina-articulo, :has(.firma-autor)) li {
line-height: 1.7;
}
body:where(.pagina-articulo, :has(.firma-autor)) h2 {
line-height: 1.6;
font-size: 1.7em;
margin-top: 2.5em;
}
.punto li, .lista li {
list-style: initial;
}
.lista li {
font-size: 17.5px;
margin-top: 15px;
}
.tarjeta-sombra, .boxShadowCard {
align-items: center;
background-color: #fff;
border-radius: 25px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35);
cursor: pointer;
display: inline-block;
height: 31em;
margin: 2.4em;
width: 22em;
vertical-align: top;
}
.contenedor-imagen-destacada, .featuredImageContainer {
height: 85%;
width: 100%;
margin: auto;
margin-bottom: 60px;
max-height: 867px;
}
.contenedor-imagen-destacada img, .featuredImageContainer img {
height: 100%;
width: 100%;
}
.envoltorio-contenido-principal, .mainContentWrapper {
margin: auto;
max-width: 1300px;
width: 55%;
}
.envoltorio-contenido-principal p, .mainContentWrapper p {
font-size: 17.5px;
line-height: 2.2;
margin-bottom: 30px;
}
.envoltorio-contenido-principal h2, .mainContentWrapper h2 {
color: var(--color-primario);
}
.lista-centrada, .centeredList {
align-items: center;
display: flex;
justify-content: center;
}
.boton-destacado, .highlightButton {
background-color: var(--color-primario);
height: 100%;
width: auto;
border: none;
padding: 2em 5em;
cursor: pointer;
border-radius: 30px;
}
.contenedor-botones-nav, .navButtonsContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
.texto-recortado, .textClamp {
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-wrap: break-word;
font-size: 16px;
}
.contenedor-titulo-post h3, .postTitleContainer h3 {
-webkit-box-orient: vertical;
display: -webkit-box;
margin: 1em 0 1.5em 0;
text-overflow: ellipsis;
white-space: normal;
font-size: 16px;
}
.seccion-destacada, .highlightedSection, body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-seccion, body:where(.page-articulo, :has(.firma-autor)) .sectionContainer {
height: auto;
padding: 2.5em 0;
width: 100%;
}
body:where(.pagina-articulo, :has(.firma-autor)) .seccion-destacada, body:where(.page-articulo, :has(.firma-autor)) .highlightedSection {
background-color: var(--gris-claro);
margin: 6em 0 2em 0;
padding: 4em 0;
}
.contenedor-titulo-post, .postTitleContainer {
margin: 10px 20px;
text-align: left;
}
body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-titulo-post h3, body:where(.page-articulo, :has(.firma-autor)) .postTitleContainer h3 {
font-family: var(--fuente-texto);
font-size: 20px;
letter-spacing: -.2px;
margin-top: 20px;
margin-bottom: 0;
}
.contenedor-flex-fila, .flexRowContainer {
display: flex;
flex-direction: row;
width: 80%;
margin: auto;
background-color: #fff;
max-width: 1000px;
height: 15.625em;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .55);
}
.contenedor-flex-fila div, .flexRowContainer div {
height: 15.625em;
}
.imagen-cuadrada, .squareImage {
height: 15.625em;
width: 16.875em;
}
.texto-seccion-grande, .largeSectionText {
font-size: 1.5em;
font-weight: 700;
width: auto;
}
.texto-seccion-grande h2, .largeSectionText h2 {
text-align: center;
margin: 0;
}
.envoltorio-boton, .buttonWrapper {
justify-content: flex-start;
width: 12.5em;
}
body:where(.pagina-articulo, :has(.firma-autor)) .boton-destacado, body:where(.page-articulo, :has(.firma-autor)) .highlightButton {
height: 1em;
width: 3em;
color: #fff;
font-size: 15px;
}
.titulo-seccion-destacado, .sectionTitleHighlight {
margin: 0 auto 50px auto;
}
.contenedor-video, .videoContainer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.contenedor-video iframe, .videoContainer iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.bibliografia {
padding-left: 1.5em;
margin-top: 1em;
}
.bibliografia li {
list-style-type: disc !important;
font-size: 17.5px;
font-style: italic;
line-height: 2.2;
margin-bottom: 0.7em;
margin-left: 1em;
}
ol.lista-numerica li {
list-style: decimal !important;
margin-left: 1.5em !important;
padding-left: 0 !important;
}
ol.lista-numerica li {
display: list-item !important;
}
.boton-descarga, .download-btn {
display: block;
width: fit-content;
max-width: 100%;
margin: 1.5em auto;
font-family: var(--fuente-titulos);
font-weight: 700;
font-size: 1rem;
color: #ffffff;
background-color: var(--color-primario);
text-decoration: none;
padding: 0.75em 1.5em;
border-radius: 8px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
text-align: center;
}
.boton-descarga:hover, .download-btn:hover {
background-color: #26576b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.boton-descarga:active, .download-btn:active {
background-color: #204954;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.boton-descarga .icono, .download-btn .icon {
margin-right: 0.5em;
vertical-align: middle;
font-size: 1.1em;
}
.enlace-afiliado, .affiliate-link {
color: #e08d00;
font-weight: 700;
text-decoration: none;
position: relative;
transition: color 0.2s ease;
}
.enlace-afiliado::after, .affiliate-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: #e08d00;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.enlace-afiliado:hover, .affiliate-link:hover {
color: #ca7f00;
}
.enlace-afiliado:hover::after, .affiliate-link:hover::after {
transform: scaleX(1);
}
.enlace-afiliado .icono, .affiliate-link .icon {
margin-left: 0.3em;
font-size: 1.1em;
vertical-align: middle;
transition: transform 0.3s ease;
}
.enlace-afiliado:hover .icono, .affiliate-link:hover .icon {
transform: translateX(3px);
}
a.enlace-interno, a.internal-link {
color: #0066cc;
text-decoration: underline;
text-underline-position: under;
transition: color 0.2s ease;
}
a.enlace-interno:visited, a.internal-link:visited {
color: #551a8b;
}
a.enlace-interno:hover, a.internal-link:hover, a.enlace-interno:focus, a.internal-link:focus {
color: #004a99;
}
.titulo-bibliografia {
font-size: 1.7em;
color: var(--color-primario);
font-family: var(--fuente-titulos);
font-weight: 700;
margin-top: 80px;
margin-bottom: 0.8em;
}
body:where(.pagina-articulo, :has(.firma-autor)) .blanco {
color: #fff;
}
body:where(.pagina-articulo, :has(.firma-autor)) footer {
background-color: var(--color-footer);
text-align: center;
padding: 2em 0;
}
body:where(.pagina-articulo, :has(.firma-autor)) footer p {
color: #fff;
margin: 0;
font-family: var(--fuente-texto);
}
body:where(.page-articulo, :has(.firma-autor)) footer .footerLinkContainer {
margin-top: 25px;
}
body:where(.page-articulo, :has(.firma-autor)) footer .footerLinkContainer a {
color: #fff;
margin: 0 5px;
text-decoration: none;
font-family: var(--fuente-texto);
transition: color 0.3s ease;
}
body:where(.page-articulo, :has(.firma-autor)) footer .footerLinkContainer a:hover {
color: var(--color-primario);
}
.firma-autor {
--firma-accent: var(--color-primario);
display: flex;
align-items: center;
gap: 22px;
padding: 22px 24px;
background: #fff;
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 18px 40px rgba(0,0,0,0.36);
width: 100%;
max-width: 720px;
margin: 40px auto;
box-sizing: border-box;
}
.firma-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.firma-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.firma-nombre {
font-size: 20px;
font-weight: 700;
color: var(--firma-accent);
}
.firma-titulo {
font-size: 15px;
color: #444;
}
.firma-colegiado {
font-size: 14px;
font-weight: 600;
color: var(--color-footer);
}
.firma-fecha {
font-size: 13px;
color: #6b6b6b;
margin-top: 4px;
}
.firma-contacto {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 44px;
background: var(--firma-accent);
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
border-radius: 10px;
transition: opacity .2s ease, transform .05s ease;
}
.firma-contacto:hover {
opacity: .90;
}
.firma-contacto:active {
transform: translateY(1px);
}
.firma-contacto:focus-visible {
outline: 3px solid rgba(47,108,143,0.25);
outline-offset: 3px;
}
@media (max-width:1200px) {.envoltorio-contenido-principal, .mainContentWrapper {
width: 65%;
}
.envoltorio-boton, .buttonWrapper {
justify-content: center;
}
}
@media (max-width:1070px) {.contenedor-botones-nav h3, .navButtonsContainer h3 {
margin-bottom: .625em;
}
.contenedor-botones-nav, .navButtonsContainer {
display: block;
text-align: center;
margin-bottom: 2.5em;
}
.contenedor-flex-fila, .flexRowContainer {
width: 20em;
height: auto;
display: block;
}
.contenedor-flex-fila div, .flexRowContainer div {
height: auto;
width: auto;
}
.imagen-cuadrada, .squareImage {
height: 18.75em;
width: 100%;
}
.texto-seccion-grande, .largeSectionText {
font-size: 1em;
}
.envoltorio-boton, .buttonWrapper {
width: auto;
margin-bottom: 1.25em;
padding: 0 1.875em 1.875em;
}
}
@media (max-width: 1000px) {body:where(.page-articulo, :has(.firma-autor)) .hamburger {
display: block;
font-size: 2em;
cursor: pointer;
color: #000;
background: none;
border: none;
}
}
@media (max-width:992px) {.envoltorio-contenido-principal, .mainContentWrapper {
width: 75%;
}
}
@media (max-width:845px) {.tarjeta-sombra, .boxShadowCard {
margin: 50px 15px;
}
}
@media (max-width:768px) {.seccion-destacada, .highlightedSection, body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-seccion, body:where(.page-articulo, :has(.firma-autor)) .sectionContainer {
font-size: 15.5px;
}
.envoltorio-contenido-principal, .mainContentWrapper {
width: 80%;
}
}
@media (max-width: 640px) {.firma-autor {
flex-direction: column;
text-align: center;
}
.firma-avatar {
width: 140px;
height: 140px;
}
.firma-contacto {
width: 100%;
max-width: 260px;
align-self: center;
}
}
@media (max-width:576px) {.seccion-destacada, .highlightedSection, body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-seccion, body:where(.page-articulo, :has(.firma-autor)) .sectionContainer {
font-size: 15px;
}
.tarjeta-sombra, .boxShadowCard {
margin: 50px 0;
height: auto;
}
.envoltorio-contenido-principal, .mainContentWrapper {
width: 92%;
}
.contenedor-imagen-destacada, .featuredImageContainer {
margin-bottom: 30px;
}
.envoltorio-contenido-principal img, .mainContentWrapper img {
width: 100%;
}
.contenedor-imagen-destacada, .featuredImageContainer, .contenedor-video, .videoContainer {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
width: 100vw;
max-width: none;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.contenedor-imagen-destacada img, .featuredImageContainer img, .contenedor-video iframe, .videoContainer iframe {
width: 100vw;
max-width: none;
height: auto;
min-height: 250px;
}
.envoltorio-contenido-principal p, .mainContentWrapper p {
font-size: 16px;
}
body:where(.pagina-articulo, :has(.firma-autor)) #whatsapp-btn {
bottom: 10px;
right: 0;
}
body:where(.pagina-articulo, :has(.firma-autor)) .pulso::before, body:where(.page-articulo, :has(.firma-autor)) .pulse::before, body:where(.pagina-articulo, :has(.firma-autor)) .pulso::after, body:where(.page-articulo, :has(.firma-autor)) .pulse::after {
width: calc(100% + 20px);
height: calc(100% + 20px);
}
body:where(.pagina-articulo, :has(.firma-autor)) h1 {
font-size: 1.5em;
}
body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-seccion, body:where(.page-articulo, :has(.firma-autor)) .sectionContainer {
padding: 0em 0;
}
.texto-seccion-grande h2, .largeSectionText h2 {
margin: 1em 0;
}
.firma-autor {
flex-direction: column;
text-align: center;
padding: 20px 16px;
}
.envoltorio-contenido-principal img.firma-avatar, .mainContentWrapper img.firma-avatar {
width: 140px;
height: 140px;
}
.firma-contacto {
width: 100%;
max-width: 280px;
}
}
@media (max-width:430px) {.texto-recortado, .textClamp {
-webkit-line-clamp: 4;
}
.contenedor-video, .videoContainer {
position: relative;
width: 100vw;
padding-bottom: 56.25%;
height: 0;
}
.contenedor-video iframe, .videoContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
@media (max-width:400px) {.contenedor-flex-fila, .flexRowContainer {
width: 18.75em;
}
.texto-seccion-grande, .largeSectionText {
font-size: 1em;
}
body:where(.pagina-articulo, :has(.firma-autor)) .titulo-post h3, body:where(.page-articulo, :has(.firma-autor)) .post-title h3 {
margin: 0;
}
body:where(.pagina-articulo, :has(.firma-autor)) .titulo-post, body:where(.page-articulo, :has(.firma-autor)) .post-title {
margin: 10px;
}
body:where(.pagina-articulo, :has(.firma-autor)) .tarjeta-post, body:where(.page-articulo, :has(.firma-autor)) .post-preview {
height: 32em;
}
}
@media (max-width:380px) {.seccion-destacada, .highlightedSection, body:where(.pagina-articulo, :has(.firma-autor)) .contenedor-seccion, body:where(.page-articulo, :has(.firma-autor)) .sectionContainer {
font-size: 13.5px;
}
.tarjeta-sombra, .boxShadowCard {
width: 90%;
}
.envoltorio-contenido-principal, .mainContentWrapper {
width: 96%;
}
}body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) h3, body:where(.page-legal, :has(.main-section:not(.centered-flex))) h3 {
color: #000;
}
body:where(.pagina-legal, :has(.seccion-principal:not(.flex-centrado))) .fondo-oscuro, body:where(.page-legal, :has(.main-section:not(.centered-flex))) .darkBackground, body:where(.pagina-error, :has(.seccion-principal.flex-centrado)) .fondo-oscuro, body:where(.page-error, :has(.main-section.centered-flex)) .darkBackground {
padding: 2em 0;
}
/* ==================================================================
TESTS INTERACTIVOS — widget de tests del blog
------------------------------------------------------------------
Fusionado aquí el 2026-08-20 (antes vivía en test.css, suelto).
post_detail.html ya no carga un CSS aparte para los posts de tipo
test: al estar en global.css, que se carga siempre, no hace falta.
Reglas de convivencia con el resto del sitio (importante):
· TODO cuelga de .bloque-test. Un `body` o `p` sueltos aquí
romperían el layout y centrarían todos los párrafos del sitio.
· Nombres en kebab-case español, como el resto de la unificación
(ver unificacion/mapa-clases.md).
================================================================== */
.bloque-test {
/* Reserva de alto para que la tarjeta no provoque salto de layout (CLS)
mientras el JS pinta la primera pregunta. Con la tarjeta estrecha el
texto envuelve más, así que hace falta más alto reservado que en la
versión ancha. */
min-height: 620px;
margin: 2.5em 0;
display: flex;
justify-content: center;
}
.bloque-test * {
box-sizing: border-box;
}
.test-tarjeta {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 450px;
background-color: #e7f0f5;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
padding: 35px 30px;
font-family: var(--fuente-texto, Roboto, sans-serif);
}
/* ---------- Cabecera: volver + contador ---------- */
.test-cabecera {
/* Grid con las columnas laterales fijas a 32px: el contador queda
centrado de forma geométrica (misma columna a cada lado), en vez de
depender de que el ancho "auto" del botón volver coincida al pixel
con el ancho fijo del hueco — ese desajuste de 1px es lo que hacía
que el contador se viera desplazado a la izquierda en ciertos anchos
de ventana. */
width: 100%;
display: grid;
grid-template-columns: 32px 1fr 32px;
align-items: center;
min-height: 32px;
}
.test-volver {
border: none;
background-color: transparent;
padding: 4px;
cursor: pointer;
line-height: 0;
transform: scaleX(-1);
}
.test-volver[hidden] {
visibility: hidden;
display: block; /* conserva la columna: si no, el contador se descoloca */
}
.test-volver img {
height: 24px;
width: 24px;
}
/* Selector compuesto (no ".test-contador" a secas) a propósito: el sitio
tiene una regla genérica ".contenedor-seccion p" (max-width: 576px) que
fuerza text-align:left en cualquier de esa sección del artículo, y
con más especificidad que una sola clase le ganaba a este centrado por
debajo de 576px. Con dos clases se impone siempre, sin tocar esa regla
compartida por el resto del blog. */
.test-cabecera .test-contador {
text-align: center;
font-size: 15px;
color: #000;
margin: 0;
}
/* Columna vacía simétrica a la del botón volver. Su tamaño lo fija el
grid (grid-template-columns de .test-cabecera), no necesita ancho propio. */
.test-hueco {
min-width: 0;
}
/* ---------- Barra de progreso ---------- */
.test-barra-progreso {
width: 80%;
height: 10px;
background-color: #273445;
border-radius: 5px;
overflow: hidden;
margin: 10px 0 20px;
}
.test-progreso {
height: 100%;
width: 0;
background-color: var(--color-primario, #2f6c8f);
transition: width 0.3s ease;
}
/* ---------- Preguntas ---------- */
.test-preguntas {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.test-grupo {
border: none;
margin: 0;
padding: 0;
}
.test-enunciado {
font-family: var(--fuente-titulos, Montserrat, sans-serif);
font-size: 1.15em;
font-weight: 700;
color: #111;
text-align: left;
margin: 0 0 25px;
padding: 0;
line-height: 1.4;
}
.test-opcion {
margin-bottom: 15px;
display: flex;
align-items: center;
background-color: #fff;
border: 3px solid #808080;
border-radius: 5px;
padding: 16px 20px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.test-opcion:last-child {
margin-bottom: 0;
}
.test-opcion input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.test-opcion label {
flex-grow: 1;
text-align: left;
color: #000;
font-family: var(--fuente-texto, Roboto, sans-serif);
font-weight: 400;
position: relative;
padding-right: 40px;
cursor: pointer;
line-height: 1.4;
}
.test-opcion label::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 2px solid #000;
border-radius: 3px;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.test-opcion--elegida {
border-color: var(--color-primario, #2f6c8f);
}
.test-opcion--elegida label::after {
content: "\2713";
color: #fff;
background-color: var(--color-primario, #2f6c8f);
border-color: var(--color-primario, #2f6c8f);
}
/* Foco de teclado: el radio real está oculto, así que lo pinta la fila. */
.test-opcion input[type="radio"]:focus-visible + label::after {
outline: 3px solid var(--color-primario, #2f6c8f);
outline-offset: 2px;
}
/* ---------- Botones ---------- */
.test-boton {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-family: var(--fuente-texto, Roboto, sans-serif);
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease;
background-color: var(--color-primario, #2f6c8f);
}
.test-boton:hover {
background-color: #1c86ee;
}
.test-boton:disabled {
background-color: #273445;
cursor: not-allowed;
}
.test-continuar {
margin-top: 20px;
}
.test-boton--secundario {
background-color: #273445;
text-decoration: underline;
}
/* ---------- Resultado ---------- */
.test-resultado {
width: 100%;
text-align: center;
}
.test-resultado h2 {
font-family: var(--fuente-titulos, Montserrat, sans-serif);
font-size: 1.4em;
color: #111;
margin: 0 0 20px;
}
.test-resultado p {
font-size: 18px;
line-height: 1.6;
color: #000;
text-align: center;
margin: 0 0 20px;
}
.test-resultado .test-boton {
margin-bottom: 15px;
}
.test-aviso {
font-size: 14px;
color: #444;
font-style: italic;
}
/* ---------- Móvil ---------- */
@media (max-width: 480px) {
.bloque-test {
min-height: 560px;
margin: 2em 0;
}
.test-tarjeta {
padding: 15px;
}
.test-opcion {
padding: 12px 15px;
}
.test-opcion label {
font-size: 15px;
padding-right: 34px;
}
.test-enunciado {
font-size: 1.05em;
margin-bottom: 20px;
}
.test-boton {
padding: 14px;
font-size: 16px;
}
.test-resultado p {
font-size: 16px;
}
}
/* ==================================================================
BUSCADOR DEL BLOG (2026-08-25)
------------------------------------------------------------------
Escritorio: lupa en el menu -> barra desplegable bajo el header.
Movil : el formulario vive DENTRO del menu lateral, como un
elemento mas del menu (la barra desplegable se oculta).
En ambos casos es un GET normal a /blog/?q=..., asi que buscar
funciona aunque el JS no llegue a ejecutarse.
El marcado esta en plantillas/header.html y en el bloque 15 de
global.js; los resultados los pinta posts_list.html reutilizando
las tarjetas .tarjeta-post de siempre.
================================================================== */
/* ==================================================================
HERO: texto a la izquierda (regresion de la unificacion, 2026-08-26)
------------------------------------------------------------------
.hero-texto ya trae text-align:left (y asi se ve en produccion), pero
.texto-centrado quedo duplicada al unificar y su SEGUNDA copia cae
despues, con la misma especificidad, y lo pisa. Las 13 landings llevan
ambas clases en el mismo div, asi que el titular salia centrado.
Se sube la especificidad en vez de tocar .texto-centrado, que la
comparten footers, botones y textos legales.
================================================================== */
/* Solo por encima de 768px: por debajo, el sitio centra el hero a proposito
(y produccion hace lo mismo), asi que ahi no se toca. */
@media (min-width: 769px) {
.texto-centrado.hero-texto, .centerText.heroTextContainer {
text-align: left;
}
}
/* --- Lupa del header (solo escritorio) --- */
.boton-buscador {
display: flex;
align-items: center;
justify-content: center;
width: 2.4em;
height: 2.4em;
padding: 0;
background: none;
border: 1px solid transparent;
border-radius: 50%;
color: var(--color-primario);
cursor: pointer;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.boton-buscador:hover {
background-color: var(--gris-claro);
}
.boton-buscador:focus-visible {
outline: 2px solid var(--color-primario);
outline-offset: 2px;
}
.icono-lupa {
display: block;
width: 20px;
height: 20px;
}
.item-buscador {
display: flex;
align-items: center;
}
/* --- Formulario, comun a escritorio y movil --- */
.formulario-buscador {
display: flex;
align-items: center;
gap: .6em;
/* global.css no pone box-sizing global: sin esto el padding y el borde se
suman al ancho y en movil el campo se come los margenes laterales. */
box-sizing: border-box;
padding: .5em .9em;
background-color: #fff;
border: 2px solid var(--color-primario);
border-radius: 30px;
}
/* global.css pone outline:0 a todos los input, asi que el foco visible
tiene que pintarlo el contenedor o el campo queda inaccesible a teclado. */
.formulario-buscador:focus-within {
box-shadow: 0 0 0 3px rgba(47, 108, 143, .18);
}
.icono-lupa-campo {
flex-shrink: 0;
color: var(--color-primario);
}
.campo-buscador {
flex: 1;
min-width: 0;
padding: .45em 0;
border: none;
background: none;
font-size: 1em;
}
.campo-buscador::placeholder {
color: #7a8a95;
}
.boton-enviar-busqueda {
flex-shrink: 0;
padding: .55em 1.4em;
border: none;
border-radius: 24px;
background-color: var(--color-primario);
color: #fff;
font-family: var(--fuente-titulos);
font-size: .95em;
cursor: pointer;
transition: background-color .3s;
}
.boton-enviar-busqueda:hover {
background-color: #26597a;
}
.boton-cerrar-buscador {
flex-shrink: 0;
padding: 0 .2em;
border: none;
background: none;
color: #7a8a95;
font-size: 1.6em;
line-height: 1;
cursor: pointer;
}
.boton-cerrar-buscador:hover {
color: #000;
}
/* --- Campo de busqueda dentro de la fila del menu (solo escritorio) --- */
/* En vez de abrir una banda bajo la cabecera (que empujaba el contenido casi
100px y dejaba 344px de blanco muerto a cada lado), el campo ocupa el sitio
de los enlaces dentro de la MISMA fila. La cabecera no cambia de alto, asi
que nada de la pagina se mueve. */
.item-campo-buscador {
display: none;
position: relative;
width: 100%;
}
.contenedor-nav.buscando > li:not(.item-campo-buscador) {
display: none;
}
.contenedor-nav.buscando > .item-campo-buscador {
display: block;
}
/* La animacion va en el FORMULARIO, no en el
. El es el bloque
contenedor del aviso flotante, y un transform (aunque sea de una animacion
ya terminada) le crea contexto de apilamiento: el z-index del aviso dejaria
de competir en la raiz y la imagen del hero lo taparia. */
.contenedor-nav.buscando > .item-campo-buscador > .formulario-buscador {
animation: aparece-campo-buscador .22s ease;
}
@keyframes aparece-campo-buscador {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.contenedor-nav.buscando > .item-campo-buscador > .formulario-buscador {
animation: none;
}
}
/* El campo sustituye a la lupa, asi que mide lo mismo de alto que ella (38px)
y la fila conserva sus 104px exactos. */
.formulario-buscador-escritorio {
height: 38px;
padding: 0 4px 0 16px;
gap: 10px;
background-color: #f4f7f9;
border: none;
border-radius: 19px;
}
.formulario-buscador-escritorio .icono-lupa-campo {
width: 18px;
height: 18px;
color: #9aabb6;
}
.formulario-buscador-escritorio .campo-buscador::placeholder {
color: #8fa1ad;
}
.formulario-buscador-escritorio .boton-cerrar-buscador {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
padding: 0;
border-radius: 50%;
background-color: #e6edf2;
color: #5c6f7c;
font-size: 18px;
}
.formulario-buscador-escritorio .boton-cerrar-buscador:hover {
background-color: #d8e3ea;
color: #000;
}
/* El campo no tiene boton a la vista. Este submit invisible garantiza el envio
con Enter en cualquier navegador y le da una accion con nombre a los lectores
de pantalla. No puede ser display:none: eso lo dejaria fuera del envio
implicito y del arbol de accesibilidad. */
.boton-enviar-oculto {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Cabecera de resultados en la home del blog --- */
.resumen-busqueda {
margin: .4em 0 0;
color: #6b7a85;
font-size: .95em;
}
.quitar-busqueda {
display: inline-block;
margin-top: .9em;
padding: .45em 1.1em;
border: 1px solid #cddae3;
border-radius: 20px;
color: var(--color-primario);
font-size: .9em;
transition: background-color .3s, border-color .3s;
}
.quitar-busqueda:hover {
background-color: var(--gris-claro);
border-color: var(--color-primario);
}
/* --- Estado sin resultados --- */
.sin-resultados {
max-width: 34em;
margin: 0 auto;
padding: 3em 1.5em 4em;
text-align: center;
}
.icono-sin-resultados {
display: block;
width: 46px;
height: 46px;
margin: 0 auto;
color: #c3d1da;
}
.titulo-sin-resultados {
margin: 1em 0 .5em;
color: #333;
font-family: var(--fuente-titulos);
font-weight: 700;
font-size: 1.25em;
}
.texto-sin-resultados {
margin: 0 0 1.6em;
color: #6b7a85;
}
.boton-ver-todos {
display: inline-block;
padding: .8em 1.8em;
border-radius: 26px;
background-color: var(--color-primario);
color: #fff;
font-family: var(--fuente-titulos);
transition: background-color .3s;
}
.boton-ver-todos:hover {
background-color: #26597a;
}
/* --- Buscador dentro del menu movil (direccion "Acento") --- */
/* Se despliega al pulsar, como "Especialidades", pero sin caret: no promete
una lista de opciones, abre un campo. La escala (padding, tamano, color) es
la misma que la de los demas enlaces del menu, para que la fila no
desentone entre ellos. */
.boton-buscador-movil {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 20px;
align-items: center;
gap: 12px;
background: none;
border: none;
color: #000;
font-family: var(--fuente-titulos);
font-weight: 600;
font-size: 1.3em;
text-align: left;
cursor: pointer;
}
.etiqueta-buscador-movil {
display: flex;
align-items: center;
gap: 12px;
}
/* La lupa vive dentro de un circulo relleno: es lo que marca la fila como
accion y no como otro enlace de navegacion. */
.chip-lupa-movil {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: var(--color-primario);
}
.icono-lupa-chip {
width: 17px;
height: 17px;
color: #fff;
}
/* Solo mientras esta abierto, la fila y el campo comparten un fondo muy
tenue: marca la zona de busqueda sin romper el ritmo del menu cerrado. */
.item-buscador-movil.abierto {
background-color: #f7fafc;
}
.buscador-movil {
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height .3s ease, visibility 0s linear .3s;
}
.item-buscador-movil.abierto .buscador-movil {
max-height: 20em;
visibility: visible;
transition: max-height .3s ease, visibility 0s;
}
/* El campo pierde el borde azul de 2px y gana un boton circular: ocupa 40px
en vez de los 90 del boton con texto, asi que casi todo el ancho queda
para escribir sin renunciar a tener algo que pulsar. */
.formulario-buscador-movil {
height: 50px;
margin: 0 20px 18px;
padding: 5px 5px 5px 18px;
gap: 8px;
background-color: #fff;
border: 1px solid #d4e2ec;
border-radius: 26px;
}
.boton-enviar-movil {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--color-primario);
cursor: pointer;
transition: background-color .3s;
}
.boton-enviar-movil:hover {
background-color: #26597a;
}
.boton-enviar-movil:focus-visible {
outline: 2px solid var(--color-primario);
outline-offset: 2px;
}
/* --- Borrar lo escrito --- */
/* Los input[type=search] traen una X propia del navegador que quedaba pegada
a la X de cerrar el buscador: dos simbolos iguales con dos efectos
distintos. Se retira la del navegador y se nombra la accion con palabras. */
.campo-buscador::-webkit-search-cancel-button,
.campo-buscador::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
.boton-limpiar-busqueda {
flex-shrink: 0;
padding: 5px 10px;
border: none;
border-radius: 14px;
background: none;
color: #5c6f7c;
font-family: var(--fuente-texto);
font-size: 13px;
cursor: pointer;
}
.boton-limpiar-busqueda:hover {
background-color: #e6edf2;
color: #000;
}
.boton-limpiar-busqueda:focus-visible {
outline: 2px solid var(--color-primario);
outline-offset: 1px;
}
/* Solo aparece cuando hay algo que borrar. El selector de hermano exige que
el boton vaya DESPUES del campo en el marcado. */
.campo-buscador:placeholder-shown ~ .boton-limpiar-busqueda {
display: none;
}
/* --- Mientras se consulta si hay resultados --- */
/* El envio no navega al instante: primero pregunta cuantos posts hay. Sin
esta senal, entre pulsar y que cargue la pagina no cambiaba nada a la vista
y parecia que el boton no habia hecho nada. */
.formulario-buscador.consultando .boton-enviar-movil,
.formulario-buscador.consultando .boton-enviar-busqueda {
opacity: .55;
pointer-events: none;
}
.formulario-buscador.consultando .campo-buscador {
color: #7a8a95;
}
/* --- Aviso "no hay ningun post con esa palabra" --- */
/* Lo rellena global.js tras preguntar a /blog/buscar.json, para no hacer
viajar a nadie al blog cuando no hay nada que ver alli. */
.aviso-buscador {
display: none;
margin: 0 auto;
color: #8a4a3c;
font-size: .9em;
text-align: center;
}
.aviso-buscador.visible {
display: block;
}
/* En escritorio el aviso cuelga del campo, flotando: si empujara la fila
perderiamos justo lo que buscabamos con la opcion D. */
.item-campo-buscador .aviso-buscador {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 200;
margin: 0;
padding: 10px 16px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(14, 26, 34, .16);
text-align: left;
}
.buscador-movil .aviso-buscador {
/* Pegado al campo al que se refiere, no flotando en medio de la caja. */
margin: -8px 20px 18px;
text-align: left;
}
@media (max-width: 1000px) {
/* ARREGLO (preexistente, no del buscador): los enlaces y el boton de
"Especialidades" del menu movil llevan padding:20px y width:100% sin
box-sizing, asi que median 40px MAS que el menu y lo hacian desplazarse
en horizontal. El menu solo debe moverse en vertical. */
.enlaces-menu-lateral a, .sideMenuLinks a, .submenu-lateral li a, .side-dropdown-menu li a, .boton-desplegable-lateral, .side-dropdown-btn {
box-sizing: border-box;
}
.menu-lateral, .sideMenu {
overflow-x: hidden;
}
}