/*
Theme Name: Averroes
Description: Tema a medida para el Centro de Psicología y Logopedia Averroes (Montilla, Córdoba)
Author: Centro Averroes
Version: 1.0
Text Domain: averroes
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Inter:wght@400;500&display=swap");
body {
margin: 0;
font-family: "Inter", "Nunito Sans", "Open Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ============ VARIABLES DE MARCA (una sola vez) ============ */
:root {
--teal-principal: #357274;
--teal-oscuro: #2f484a;
--teal-palido: #e2eeed;
--teal-claro: #c7dcd9;
--crema: #faf8f4;
/* 2026-08-19 (informe de diseño, punto 17/18): antes #6b6b6b (gris
neutro, sin relación con el resto de la paleta) — se sustituye por
un gris con el mismo matiz frío/verdoso que --teal-oscuro (usado en
titulares), para que titulares y párrafos compartan una sola
"temperatura" de gris en vez de mezclar un frío (titulares) con uno
neutro (párrafos). De paso sube el contraste sobre crema/blanco. */
--texto-secundario: #5c6b6c;
/* 2026-08-19 (informe de diseño, punto 16): único acento cálido de
baja saturación del sitio — se usa en dosis mínimas (kicker del
Hero, etiquetas de categoría de blog/recursos) para que algo
destaque sobre el teal, que domina el resto del sitio. */
--acento-calido: #b8794a;
/* 2026-08-29 (revisión de diseño en conjunto, hallazgo 1): variante
oscurecida de --acento-calido, solo para cuando este color se usa
como TEXTO (kicker de Inicio, código de la 404, etiquetas de
categoría) — el tono original no llega al contraste mínimo AA en
texto pequeño sobre ninguno de los 3 fondos del sitio (3.0-3.6:1,
hace falta 4.5:1). Este tono lo supera con margen holgado en los
tres (5.2-6.1:1), sin dejar de leerse como el mismo acento cálido.
--acento-calido original se mantiene sin cambios para rellenos,
bordes e iconos, donde el contraste exigido es distinto (3:1) y ya
lo cumple. */
--acento-calido-texto: #865735;
/* 2026-08-19 (informe de diseño, punto 16): tono de hover para
botones — antes oscurecían hasta --teal-oscuro (#2f484a, casi
negro verdoso, "verde casi negro" según el informe). Este tono
intermedio sigue leyéndose como teal, sin llegar a negro.
--teal-oscuro se conserva tal cual para texto/titulares y para el
footer, que no formaban parte de esta queja. */
--teal-hover: #2c5f61;
/* 2026-08-19 (informe de diseño, punto 15): alias semántico del único
"papel" teal permitido a nivel de sección (fondo de zona completa,
no de tarjeta/insignia suelta). Las zonas de contenido del sitio ya
usan solo blanco / crema / este teal pálido — se deja este alias
para dejarlo explícito y evitar que en el futuro se cuele un cuarto
tono. Los bloques de CTA (teal-principal) y el pie de página
(teal-oscuro) son un tratamiento aparte — de acento de acción y de
cierre de página, no un "papel" de contenido — y no cuentan aquí. */
--papel-teal: var(--teal-palido);
/* 2026-08-19 (informe de diseño, punto 21): 3 radios fijos para todo
el sitio — campo/botón, tarjeta, cápsula. Los círculos (avatares,
iconos redondos, puntos de carrusel) usan 50% aparte, y las formas
orgánicas ("blobs") decorativas mantienen su propio valor: ninguno
de los dos entra en la queja de "tarjetas sin sistema". */
--radio-campo: 8px;
--radio-tarjeta: 12px;
--radio-capsula: 999px;
}
/* ============================================================
FOCO DE TECLADO — 2026-08-29 (revisión de diseño en conjunto)
============================================================
Antes, todo el sitio dependía del contorno azul por defecto del
navegador (nunca se quitó con outline:none, así que seguía siendo
accesible, pero no estaba en la línea visual de la marca). Regla
general de bajo riesgo: solo actúa con :focus-visible (teclado), no
con el clic de ratón, y usa outline (no cambia el layout). No toca
.av-pill, que ya tenía su propio estado de foco a medida. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--teal-principal);
outline-offset: 2px;
border-radius: 2px;
}
/* ============ Inicio (front-page.php) ============ */
/* -------- Reset básico y tipografía -------- */
.av-home * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-home .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
/* -------- Utilidades de contenedor -------- */
.av-home .contenedor {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================================================
1. HERO
============================================================ */
.av-hero {
background-color: var(--crema);
padding: 72px 0;
}
.av-hero__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.av-hero__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
/* 2026-08-19 (informe de diseño, punto 16): único acento cálido del
sitio, en dosis mínima — antes teal-principal, se fundía con el
resto de textos destacados.
2026-08-29: usa --acento-calido-texto (variante oscurecida), no
--acento-calido — ver nota junto a la variable en :root. */
color: var(--acento-calido-texto);
margin-bottom: 16px;
}
.av-hero__titulo {
color: var(--teal-oscuro);
/* 2026-08-29 (revisión de diseño en conjunto, hallazgo 2): antes 40px
(30px en móvil) — único H1 del sitio fuera del tamaño estándar de
32px/26px que comparten Quiénes Somos, Áreas de Intervención,
Recursos, Contacto, las 9 fichas y la 404. Homogeneizado al mismo
tamaño que el resto. */
font-size: 32px;
line-height: 1.2;
margin-bottom: 20px;
}
.av-hero__subtitulo {
color: var(--texto-secundario);
font-size: 18px;
line-height: 1.6;
max-width: 480px;
margin-bottom: 32px;
}
.av-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.av-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 14px 26px;
border-radius: var(--radio-campo);
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18);
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.av-btn:hover {
box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24);
transform: translateY(-1px);
}
.av-btn--psicologia,
.av-btn--psicologia:link,
.av-btn--psicologia:visited {
background-color: var(--teal-principal) !important; /* teal principal */
color: #ffffff !important;
}
.av-btn--psicologia:hover { background-color: var(--teal-hover) !important; }
.av-btn--logopedia,
.av-btn--logopedia:link,
.av-btn--logopedia:visited {
/* 2026-08-17: antes usaba teal-oscuro (mucho más pesado visualmente
que Psicología) pese a ser una opción equivalente — informe de
diseño, punto 4 "jerarquía de botones invertida". Unificado al
mismo peso que Psicología; se diferencian solo por icono y texto. */
background-color: var(--teal-principal) !important;
color: #ffffff !important;
}
.av-btn--logopedia:hover { background-color: var(--teal-hover) !important; }
.av-hero__imagen {
aspect-ratio: 3 / 2;
border-radius: var(--radio-tarjeta);
background-color: var(--teal-palido); /* placeholder — sustituir por foto real del equipo */
overflow: hidden;
width: 100%;
display: block;
}
.av-hero__imagen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================================================
2. FILOSOFÍA DEL CENTRO
============================================================ */
.av-filosofia {
background-color: #ffffff;
border-top: 1px solid var(--teal-claro);
border-bottom: 1px solid var(--teal-claro);
padding: 64px 0;
}
.av-filosofia__contenido {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.av-filosofia__titulo {
color: var(--teal-oscuro);
font-size: 22px;
margin-bottom: 12px;
}
.av-filosofia__texto {
color: var(--texto-secundario);
font-size: 16px;
line-height: 1.7;
}
/* ============================================================
3. RESUMEN DE ESPECIALIDADES
============================================================ */
.av-especialidades {
background-color: var(--crema);
padding: 64px 0;
}
.av-especialidades__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.av-especialidades__card {
background-color: #ffffff;
border-radius: var(--radio-tarjeta);
overflow: hidden;
box-shadow: 0 4px 14px rgba(47, 72, 74, 0.08);
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.av-especialidades__card:hover {
box-shadow: 0 10px 26px rgba(47, 72, 74, 0.15);
transform: translateY(-4px);
}
/* 2026-08-29: sustituye a .av-especialidades__cabecera +
.av-especialidades__blob (círculo blanco + círculo pequeño +
icono, "muñeca rusa") — ilustración SVG propia, rectangular, con
animación ambiental sutil. Decisión de diseño tras revisión
conjunta (el equipo no estaba convencido del blob anterior). */
.av-especialidades__ilustracion {
width: 100%;
height: 180px;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
.av-especialidades__ilustracion--psicologia {
background: linear-gradient(160deg, var(--teal-palido) 0%, var(--teal-claro) 100%);
}
.av-especialidades__ilustracion--logopedia {
background: linear-gradient(160deg, var(--teal-claro) 0%, var(--teal-palido) 100%);
}
.av-especialidades__ilustracion svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.av-especialidades__ilustracion .av-ilustracion__punto {
fill: #ffffff;
opacity: 0.85;
}
.av-especialidades__ilustracion .av-ilustracion__trazo {
fill: none;
stroke: var(--teal-oscuro);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.av-especialidades__ilustracion .av-ilustracion__relleno {
fill: #ffffff;
}
/* Animaciones ambientales reutilizables (av-respira / av-orbita) —
pensadas para las ilustraciones de las tarjetas, pero con nombre
genérico por si se reutilizan en otro punto del sitio más
adelante. Respetan prefers-reduced-motion, ver regla más abajo. */
.av-respira {
animation: av-respira 4.5s ease-in-out infinite;
transform-origin: center;
}
.av-orbita {
animation: av-orbita 11s linear infinite;
}
@keyframes av-respira {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes av-orbita {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.av-respira,
.av-orbita {
animation: none;
}
}
/* 2026-08-30 (medallones de Áreas de Intervención): 2 animaciones más
de la misma familia — av-orbita-lenta (misma rotación que
av-orbita, pero con una duración base más pausada; cada instancia
puede pisarla con animation-duration inline, como ya se hace en
av_medallon_svg()) para el anillo punteado de los medallones más
"clínicos/de evaluación", y av-columpio (balanceo suave) para el
único medallón con carácter infantil. Mismo criterio de
prefers-reduced-motion que av-respira/av-orbita. */
.av-orbita-lenta {
animation: av-orbita 22s linear infinite;
}
.av-columpio {
animation: av-columpio 5s ease-in-out infinite;
}
@keyframes av-columpio {
0%, 100% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
.av-orbita-lenta,
.av-columpio {
animation: none;
}
}
/* 2026-08-29 (revisión de diseño en conjunto, hallazgo de accesibilidad):
av-flotar (animación más antigua, usada en .av-tarjeta__blob,
.av-p-hero__blob y .av-l-hero__blob — hoy sin uso en ninguna
plantilla activa, todas pertenecen al catálogo antiguo retirado)
no tenía guardia de movimiento reducido. Se añade aquí como red de
seguridad, por si alguna de esas plantillas se reactivara. */
@media (prefers-reduced-motion: reduce) {
.av-tarjeta__blob,
.av-p-hero__blob,
.av-l-hero__blob {
animation: none;
}
}
.av-especialidades__contenido {
padding: 28px 32px 32px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.av-especialidades__titulo {
color: var(--teal-oscuro);
font-size: 18px;
margin-bottom: 12px;
}
.av-especialidades__texto {
color: var(--texto-secundario);
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.av-especialidades__enlace {
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.av-especialidades__enlace--psicologia { color: var(--teal-principal); }
.av-especialidades__enlace--logopedia { color: var(--teal-oscuro); }
/* ============================================================
4. ESCAPARATE DE RECURSOS
============================================================ */
.av-recursos {
background-color: #ffffff;
padding: 64px 0;
}
.av-recursos__titulo {
color: var(--teal-oscuro);
font-size: 20px;
text-align: center;
margin-bottom: 40px;
}
.av-recursos__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.av-recursos__card {
border: 1px solid var(--teal-claro);
border-radius: var(--radio-tarjeta);
overflow: hidden;
box-shadow: 0 4px 14px rgba(47, 72, 74, 0.07);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.av-recursos__card:hover {
box-shadow: 0 10px 26px rgba(47, 72, 74, 0.14);
transform: translateY(-4px);
}
.av-recursos__card-img {
height: 110px;
background-color: var(--teal-palido); /* placeholder — sustituir por imagen del artículo */
}
.av-recursos__card-body { padding: 20px; }
.av-recursos__categoria {
display: block;
font-size: 12px;
font-weight: 600;
/* 2026-08-19 (informe de diseño, punto 16): acento cálido en dosis
mínima, igual que en .av-r-articulo__categoria (Recursos) — para
que la etiqueta de categoría destaque frente al resto de teal. */
color: var(--acento-calido);
margin-bottom: 6px;
}
.av-recursos__card-titulo {
color: var(--teal-oscuro);
font-size: 15px;
margin-bottom: 8px;
}
.av-recursos__card-texto {
color: var(--texto-secundario);
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
}
.av-recursos__card-link {
font-size: 13px;
font-weight: 600;
color: var(--teal-principal);
text-decoration: none;
}
.av-recursos__cta { text-align: center; }
/* ============================================================
5. BANNER DE REDES SOCIALES
============================================================ */
.av-redes {
/* 2026-08-19 (informe de diseño, punto 15): este es el único "papel"
teal de sección de todo el sitio — ver --papel-teal en :root. */
background-color: var(--papel-teal);
padding: 48px 0;
}
.av-redes__texto {
max-width: 640px;
margin: 0 auto;
text-align: center;
color: var(--teal-oscuro);
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 16px;
}
/* ============================================================
RESPONSIVE — móvil
============================================================ */
@media (max-width: 768px) {
.av-hero__grid { grid-template-columns: 1fr; }
.av-hero__titulo { font-size: 26px; }
.av-especialidades__grid { grid-template-columns: 1fr; }
.av-recursos__grid { grid-template-columns: 1fr; }
}
/* ============ Quiénes somos (page-templates/page-quienes-somos.php) ============ */
.av-quienes * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-quienes .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-quienes .contenedor {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================================================
1. CABECERA / MANIFIESTO
============================================================ */
/* 2026-08-17 (informe, punto 9): texto centrado en párrafos largos
es más difícil de leer (el ojo pierde el punto de retorno al
final de cada línea). Cambiado a alineado izquierda, con el
párrafo limitado a ~70 caracteres de medida (max-width: 65ch). */
.av-q-hero {
background-color: var(--crema);
padding: 64px 0 48px;
text-align: left;
}
.av-q-hero__titulo {
color: var(--teal-oscuro);
font-size: 32px;
line-height: 1.25;
max-width: 760px;
margin: 0 0 20px;
}
/* 2026-08-20 (aviso del usuario): a 65ch el párrafo quedaba mucho más
estrecho que el título de arriba (que sí ocupa todo el ancho del
contenedor), dando sensación de texto "descentrado"/pegado a un
lado. Ampliado a 85ch — término medio entre "igualar el ancho del
título" (líneas demasiado largas en monitores anchos, peor
lectura) y el 65ch original (demasiado estrecho). No hace falta
ningún ajuste para móvil/tablet: al ser un max-width (límite, no
ancho fijo), en pantallas estrechas el contenedor ya es más
angosto que este límite, así que no cambia nada ahí. */
.av-q-hero__texto {
color: var(--texto-secundario);
font-size: 16px;
line-height: 1.75;
max-width: 85ch;
margin: 0;
}
/* 2026-08-20: la cabecera pasa a tener 2 párrafos (introducción +
resumen de "cómo trabajamos", fusionados por decisión del usuario
— ver page-quienes-somos.php). Separación entre ambos sin tocar el
margin:0 de base (que sigue haciendo falta para cuando solo hay un
párrafo, p. ej. si intro_texto_2 queda vacío en wp-admin). */
.av-q-hero__texto + .av-q-hero__texto { margin-top: 16px; }
/* Avales (informe, punto 12) — visibles aquí, no solo en el footer */
.av-q-hero__avales { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.av-q-hero__aval {
/* 2026-08-17: la insignia del NICA ahora lleva el nombre oficial
completo de la Consejería — demasiado larga para una "píldora"
totalmente redondeada. Se suaviza el radio a un rectángulo con
esquinas suaves, se permite que ocupe todo el ancho disponible
y se centra su texto para que envuelva en varias líneas con
limpieza en vez de forzarse en una forma pensada para
etiquetas cortas de una sola línea. */
display: inline-block;
background-color: #ffffff;
color: var(--teal-oscuro);
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
padding: 8px 16px;
border-radius: var(--radio-campo);
max-width: 100%;
text-align: center;
box-shadow: 0 2px 8px rgba(47, 72, 74, 0.08);
}
/* ============================================================
2. NUESTRO EQUIPO — grid simétrico de 4 tarjetas
============================================================ */
.av-equipo {
background-color: #ffffff;
padding: 64px 0;
}
/* Frase reforzada de coordinación entre disciplinas (punto 13, 2026-08-18) */
.av-equipo__intro {
color: var(--texto-secundario);
font-size: 15px;
text-align: center;
max-width: 60ch;
margin: 0 auto 32px;
line-height: 1.6;
}
.av-equipo__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.av-equipo__card {
background-color: var(--crema);
border-radius: var(--radio-tarjeta);
padding: 28px 20px;
box-shadow: 0 4px 14px rgba(47, 72, 74, 0.06);
text-align: center;
transition: box-shadow 0.25s ease, transform 0.25s ease;
display: flex;
flex-direction: column;
}
.av-equipo__card:hover {
box-shadow: 0 10px 26px rgba(47, 72, 74, 0.14);
transform: translateY(-4px);
}
.av-equipo__foto {
width: 116px;
height: 116px;
border-radius: 50%;
background-color: var(--teal-palido); /* placeholder — sustituir por foto real */
border: 3px solid var(--teal-principal);
overflow: hidden;
display: block;
margin: 0 auto 16px;
}
.av-equipo__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.av-equipo__nombre {
color: var(--teal-oscuro);
font-size: 16px;
margin-bottom: 4px;
}
.av-equipo__colegiado {
color: var(--texto-secundario);
font-size: 12px;
margin-bottom: 8px;
}
.av-equipo__especialidad {
color: var(--teal-principal);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 8px;
}
.av-equipo__resumen {
color: var(--texto-secundario);
font-size: 13px;
line-height: 1.6;
margin-bottom: 12px;
flex-grow: 1;
}
.av-equipo__desplegable {
text-align: left;
font-size: 12.5px;
margin-bottom: 16px;
}
.av-equipo__desplegable summary {
text-align: center;
color: var(--teal-principal);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.av-equipo__desplegable summary::-webkit-details-marker { display: none; }
.av-equipo__desplegable summary:hover { color: var(--teal-oscuro); }
/* Indicador visual de abierto/cerrado — flecha que rota y texto que
cambia a "Ocultar...", para que quede claro que hay que volver a
pulsar el mismo botón para cerrar el desplegable (sin JS). */
.av-equipo__desplegable summary::after {
content: "▾";
display: inline-block;
margin-left: 6px;
transition: transform 0.2s ease;
}
.av-equipo__desplegable[open] summary::after { transform: rotate(180deg); }
.av-equipo__desplegable-etiqueta--abierto { display: none; }
.av-equipo__desplegable[open] .av-equipo__desplegable-etiqueta--cerrado { display: none; }
.av-equipo__desplegable[open] .av-equipo__desplegable-etiqueta--abierto { display: inline; }
.av-equipo__desplegable p {
color: var(--texto-secundario);
line-height: 1.6;
margin-top: 10px;
}
.av-equipo__boton:link, .av-equipo__boton:visited { color: #ffffff; }
.av-equipo__boton {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: #ffffff;
background-color: var(--teal-principal);
text-decoration: none;
padding: 10px 16px;
border-radius: var(--radio-campo);
margin: 3px 4px;
transition: background-color 0.2s ease;
}
.av-equipo__boton:hover { background-color: var(--teal-hover); }
/* ============================================================
3. CTA dentro del bloque del equipo (fondo blanco/crema — antes
era una franja separada del mismo teal oscuro que el footer y se
fundía visualmente con él nada más terminar la página; ahora vive
en el mismo bloque blanco que las tarjetas, con un separador
sutil, para que no se confunda con el pie y el botón mantenga
contraste)
============================================================ */
.av-equipo__cta {
text-align: center;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid var(--teal-claro);
}
.av-equipo__cta-texto {
color: var(--teal-oscuro);
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.av-equipo__cta-boton:link, .av-equipo__cta-boton:visited { color: #ffffff; }
.av-equipo__cta-boton {
display: inline-block;
background-color: var(--teal-principal);
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 14px 28px;
border-radius: var(--radio-campo);
text-decoration: none;
box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.av-equipo__cta-boton:hover { background-color: var(--teal-hover); box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
/* ============================================================
4. CÓMO TRABAJAMOS — ⚠️ YA SIN USO (2026-08-20). Era una cuarta
sección propia al final de la página; el usuario, tras una
valoración de composición, decidió fusionar ese contenido como
segundo párrafo de la cabecera (ver .av-q-hero__texto más arriba y
el docblock de page-quienes-somos.php) para no fragmentar la
lectura en más apartados. Se conservan estas reglas sin borrar,
mismo criterio conservador que el resto del proyecto, por si se
reutiliza esta estructura en el futuro — no se aplican a ningún
elemento vivo del sitio actual.
============================================================ */
.av-como-trabajamos { background-color: var(--crema); padding: 64px 0; }
.av-como-trabajamos__titulo { color: var(--teal-oscuro); font-size: 24px; margin-bottom: 28px; }
/* 2026-08-20 (aviso del usuario): mismo criterio que .av-q-hero__texto
de más arriba — ampliado de 70ch a 85ch para que no quede tan
estrecho respecto al título "Cómo trabajamos". */
.av-como-trabajamos__apartado { max-width: 85ch; margin-bottom: 24px; }
.av-como-trabajamos__apartado:last-child { margin-bottom: 0; }
.av-como-trabajamos__subtitulo { color: var(--teal-principal); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.av-como-trabajamos__texto { color: var(--texto-secundario); font-size: 15px; line-height: 1.8; }
/* ============================================================
RESPONSIVE — móvil
============================================================ */
@media (max-width: 900px) {
.av-equipo__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.av-equipo__grid { grid-template-columns: 1fr; }
.av-q-hero__titulo { font-size: 26px; }
.av-como-trabajamos__titulo { font-size: 20px; }
}
/* ============ Áreas de Intervención (page-templates/page-areas-intervencion.php) ============ */
.av-areas2 * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-areas2 .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-areas2 .contenedor {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- Cabecera -------- */
/* 2026-08-17 (informe, punto 9): alineado izquierda, ~70 caracteres
de medida — mismo criterio que Quiénes Somos/Psicología/Logopedia. */
.av-a2-hero {
background-color: var(--crema);
padding: 56px 0 40px;
text-align: left;
}
.av-a2-hero__titulo {
color: var(--teal-oscuro);
font-size: 32px;
margin-bottom: 14px;
}
/* 2026-08-20 (aviso del usuario, ejemplo concreto que señaló): mismo
criterio que .av-q-hero__texto — ampliado de 65ch a 85ch, el
párrafo se acerca mucho más al ancho del título de arriba sin
llegar a líneas demasiado largas en pantallas anchas. */
.av-a2-hero__texto {
color: var(--texto-secundario);
font-size: 16px;
max-width: 85ch;
margin: 0;
line-height: 1.7;
}
/* -------- Bifurcación: 2 tarjetas en paralelo -------- */
.av-bifurcacion {
background-color: #ffffff;
padding: 56px 0;
}
.av-bifurcacion__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.av-tarjeta {
background-color: #ffffff;
border: 1px solid var(--teal-claro);
border-radius: var(--radio-tarjeta);
overflow: hidden;
box-shadow: 0 4px 16px rgba(47, 72, 74, 0.06);
display: flex;
flex-direction: column;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.av-tarjeta__cabecera {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.av-tarjeta__cabecera--psicologia { background-color: var(--teal-palido); }
.av-tarjeta__cabecera--logopedia { background-color: var(--teal-claro); }
.av-tarjeta__contenido {
padding: 28px 36px 36px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.av-tarjeta:hover {
box-shadow: 0 10px 28px rgba(47, 72, 74, 0.14);
transform: translateY(-4px);
}
.av-tarjeta__blob {
width: 190px;
height: 190px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
animation: av-flotar 5s ease-in-out infinite;
box-shadow: 0 6px 18px rgba(47, 72, 74, 0.08);
/* 2026-08-17 (informe, punto 11): sin overflow:hidden, el fondo
propio del SVG del icono podía asomar por los bordes de esta
forma orgánica (el border-radius no recorta el contenido por sí
solo). Con overflow:hidden queda recortado limpiamente al
contorno del blob. */
overflow: hidden;
}
.av-tarjeta__blob--psicologia { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
.av-tarjeta__blob--logopedia { border-radius: 65% 35% 40% 60% / 55% 60% 40% 45%; animation-delay: 0.6s; }
.av-tarjeta__titulo {
color: var(--teal-oscuro);
font-size: 22px;
margin-bottom: 12px;
}
.av-tarjeta__resumen {
color: var(--texto-secundario);
font-size: 14.5px;
line-height: 1.65;
margin-bottom: 20px;
}
.av-tarjeta__lista {
list-style: none;
margin-bottom: 28px;
flex-grow: 1;
}
.av-tarjeta__lista li {
position: relative;
padding-left: 20px;
color: var(--teal-oscuro);
font-size: 14px;
line-height: 1.9;
}
.av-tarjeta__lista li::before {
content: "•";
position: absolute;
left: 0;
color: var(--teal-principal);
font-weight: 700;
}
.av-tarjeta__boton {
display: inline-block;
text-align: center;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 14px 24px;
border-radius: var(--radio-campo);
text-decoration: none;
color: #ffffff;
box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.av-tarjeta__boton--psicologia:link, .av-tarjeta__boton--psicologia:visited { color: #ffffff; }
.av-tarjeta__boton--psicologia { background-color: var(--teal-principal); }
.av-tarjeta__boton--psicologia:hover { background-color: var(--teal-hover); box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
.av-tarjeta__boton--logopedia:link, .av-tarjeta__boton--logopedia:visited { color: #ffffff; }
/* 2026-08-17: mismo ajuste que .av-btn--logopedia — unificado al
peso de Psicología (informe, punto 4). */
.av-tarjeta__boton--logopedia { background-color: var(--teal-principal); }
.av-tarjeta__boton--logopedia:hover { background-color: var(--teal-hover); box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
/* -------- Banner de cierre: Independencia y Coordinación -------- */
.av-coordinacion {
background-color: var(--teal-palido);
padding: 40px 0;
}
.av-coordinacion__contenido {
max-width: 780px;
margin: 0 auto;
text-align: center;
}
.av-coordinacion__titulo {
color: var(--teal-oscuro);
font-size: 18px;
margin-bottom: 10px;
}
.av-coordinacion__texto {
color: var(--texto-secundario);
font-size: 14.5px;
line-height: 1.7;
}
/* -------- Responsive: apilado en móvil -------- */
@media (max-width: 760px) {
.av-bifurcacion__grid { grid-template-columns: 1fr; }
.av-a2-hero__titulo { font-size: 26px; }
.av-a2-metodologia__grid { grid-template-columns: 1fr; }
}
/* -------- Cuadrícula de 9 subáreas (punto 13, 2026-08-18) --------
Sustituye a .av-bifurcacion (2 tarjetas grandes) como forma
principal de navegar a las subáreas — .av-bifurcacion y
.av-tarjeta se dejan sin usar en esta página pero no se borran de
este archivo por si se reutilizan en otro sitio. */
.av-grupo { padding: 40px 0 8px; scroll-margin-top: 90px; /* cabecera sticky no tapa el título al llegar por ancla */ }
/* 2026-08-19 (aviso del usuario): al retirar el cierre "Independencia
y Coordinación Clínica" que antes daba aire entre el grupo de
Logopedia y el footer, las 3 tarjetas de Logopedia quedaron casi
pegadas al footer — el .av-grupo genérico solo tiene 8px de padding
inferior (pensado para dejar paso a la siguiente sección, no al
footer).
2026-08-23: desde que se añadió el bloque "Cómo trabajamos" justo
debajo (ver .av-a2-metodologia más abajo), #logopedia ya NO es la
última sección antes del footer — pero se conserva este aire
inferior de todos modos, para separar visualmente el grupo de
tarjetas de Logopedia del bloque "Cómo trabajamos" que viene a
continuación (mismo criterio de aire entre secciones que el resto
del sitio). Selector por ID: mayor especificidad que la clase
.av-grupo, no hace falta !important. */
#logopedia { padding-bottom: 64px; }
.av-grupo__cabecera { margin-bottom: 24px; }
.av-grupo__titulo { color: var(--teal-oscuro); font-size: 22px; }
.av-grid-subareas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.av-card-subarea {
background: #ffffff;
border: 1px solid var(--teal-claro);
border-radius: var(--radio-tarjeta);
padding: 26px 24px;
box-shadow: 0 4px 16px rgba(47, 72, 74, 0.06);
transition: box-shadow .25s ease, transform .25s ease;
display: flex;
flex-direction: column;
text-decoration: none;
}
.av-card-subarea:hover { box-shadow: 0 10px 28px rgba(47, 72, 74, 0.14); transform: translateY(-3px); }
.av-card-subarea__icono {
width: 52px; height: 52px; border-radius: 50%;
background: var(--teal-palido); display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; color: var(--teal-principal); font-size: 20px; font-weight: 700;
font-family: 'Poppins', sans-serif; flex-shrink: 0;
}
.av-card-subarea__icono img { width: 28px; height: 28px; }
/* 2026-08-30: medallón nuevo para las 9 fichas ya cerradas — sustituye
el círculo teal-palido + icono/letra de siempre por una ilustración
circular propia por subárea (ver av_medallon_svg() en
page-areas-intervencion.php). El propio medallón ya trae su
degradado de fondo, así que aquí solo se quita el relleno plano del
contenedor y se agranda un poco el hueco (52px → 60px) — la crítica
original era que el icono se veía "muy discreto y demasiado
simple", así que gana algo de presencia sin desproporcionar la
tarjeta. */
.av-card-subarea__icono--medallon {
background: none;
width: 60px;
height: 60px;
}
.av-medallon {
width: 60px;
height: 60px;
position: relative;
}
.av-medallon svg { width: 100%; height: 100%; overflow: visible; }
.av-medallon .fondo { fill: url(#avMedallonGradiente); }
.av-medallon .anillo {
fill: none;
stroke: var(--teal-claro);
stroke-width: 1;
stroke-dasharray: 2 5;
}
.av-medallon .trazo {
fill: none;
stroke: var(--teal-oscuro);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.av-medallon .trazo-secundario {
fill: none;
stroke: var(--teal-principal);
stroke-width: 1.4;
stroke-linecap: round;
}
.av-medallon .relleno { fill: #ffffff; }
.av-medallon .punto-calido { fill: var(--acento-calido); }
.av-medallon .punto-teal { fill: var(--teal-principal); }
.av-card-subarea__titulo { color: var(--teal-oscuro); font-size: 16.5px; margin-bottom: 8px; line-height: 1.35; }
.av-card-subarea__resumen { color: var(--texto-secundario); font-size: 13.5px; line-height: 1.6; flex-grow: 1; margin-bottom: 18px; }
.av-card-subarea__enlace {
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px;
color: var(--teal-principal);
}
.av-card-subarea:hover .av-card-subarea__enlace { color: var(--teal-oscuro); }
@media (max-width: 900px) {
.av-grid-subareas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.av-grid-subareas { grid-template-columns: 1fr; }
}
/* -------- Cómo trabajamos: 3 pasos (2026-08-23) --------
Misma estructura visual que .av-p-metodologia/.av-p-paso (ver más
abajo, page-area-psicologia.php), reutilizada aquí con su propio
prefijo de página porque esta sección vive en .av-areas2, no en
.av-psico. Ver decisión de ubicación en
claude/decision-como-trabajamos-areas-intervencion.md. */
.av-a2-metodologia { background-color: var(--crema); padding: 64px 0; }
.av-a2-metodologia__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 32px; }
.av-a2-metodologia__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.av-a2-paso { text-align: center; }
.av-a2-paso__num {
width: 44px; height: 44px; border-radius: 50%;
background-color: var(--teal-principal); color: #ffffff;
display: flex; align-items: center; justify-content: center;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px;
margin: 0 auto 14px;
}
.av-a2-paso__titulo { color: var(--teal-oscuro); font-size: 15px; margin-bottom: 8px; }
.av-a2-paso__texto { color: var(--texto-secundario); font-size: 13px; line-height: 1.6; }
/* ============ Área de Psicología (page-templates/page-area-psicologia.php) ============ */
.av-psico * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-psico .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-psico .contenedor {
max-width: 980px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- 1. Cabecera -------- */
/* 2026-08-17 (informe, punto 9): alineado izquierda, ~70 caracteres
de medida. Además, al estar en un layout de 2 columnas (texto +
ilustración), centrar el texto dentro de esa columna estrecha se
veía peor que alinearlo a la izquierda. */
.av-p-hero {
background-color: var(--crema);
padding: 64px 0 40px;
text-align: left;
}
.av-p-hero__titulo { color: var(--teal-oscuro); font-size: 32px; margin-bottom: 12px; }
.av-p-hero__subtitulo { color: var(--texto-secundario); font-size: 16px; max-width: 65ch; margin: 0; line-height: 1.7; }
.av-p-hero__blob {
width: 260px;
height: 260px;
flex-shrink: 0;
background-color: var(--teal-palido);
border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
display: flex;
align-items: center;
justify-content: center;
animation: av-flotar 5s ease-in-out infinite;
/* 2026-08-17 (informe, punto 11): mismo recorte que .av-tarjeta__blob
— evita que la ilustración se salga del contorno orgánico. */
overflow: hidden;
}
@keyframes av-flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* -------- Quién te atiende (mini-tarjetas, tras Tratamientos) -------- */
.av-p-equipo { background-color: #ffffff; padding: 56px 0; text-align: center; }
.av-p-equipo__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 24px; }
.av-p-equipo__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.av-p-mini-perfil__enlace { display: block; text-decoration: none; width: 150px; text-align: center; }
.av-p-mini-perfil__foto { width: 72px; height: 72px; border-radius: 50%; background-color: var(--teal-palido); border: 2px solid var(--teal-principal); overflow: hidden; margin: 0 auto 8px; display: block; object-fit: cover; }
.av-p-mini-perfil__nombre { display: block; color: var(--teal-oscuro); font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.av-p-mini-perfil__especialidad { display: block; color: var(--teal-principal); font-size: 11px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.av-p-mini-perfil__colegiado { display: block; color: var(--texto-secundario); font-size: 10.5px; line-height: 1.3; }
.av-p-mini-perfil__enlace:hover .av-p-mini-perfil__nombre { color: var(--teal-principal); }
.av-p-equipo__nota { margin-top: 20px; font-size: 13px; }
.av-p-equipo__nota a { color: var(--teal-principal); font-weight: 600; text-decoration: none; }
.av-p-equipo__nota a:hover { text-decoration: underline; }
/* -------- 2. Catálogo de tratamientos -------- */
.av-p-tratamientos { background-color: var(--crema); padding: 64px 0; }
.av-p-tratamientos__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 28px; }
.av-p-fila {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--teal-claro);
}
.av-p-fila:first-child { border-top: 1px solid var(--teal-claro); }
.av-p-fila__num {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.av-p-fila__contenido { flex-grow: 1; }
.av-p-fila__titulo { color: var(--teal-oscuro); font-size: 16px; margin-bottom: 4px; }
.av-p-fila__resumen { color: var(--teal-oscuro); font-size: 14.5px; line-height: 1.6; margin-bottom: 4px; }
.av-p-fila__texto { color: var(--texto-secundario); font-size: 13px; line-height: 1.6; }
.av-p-fila__meta {
flex-shrink: 0;
align-self: flex-end;
text-align: right;
font-size: 11.5px;
color: var(--teal-principal);
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
}
/* -------- 4. Metodología en 3 pasos -------- */
.av-p-metodologia { background-color: #ffffff; padding: 64px 0; }
.av-p-metodologia__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 32px; }
.av-p-metodologia__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.av-p-paso { text-align: center; }
.av-p-paso__num {
width: 44px; height: 44px; border-radius: 50%;
background-color: var(--teal-principal); color: #ffffff;
display: flex; align-items: center; justify-content: center;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px;
margin: 0 auto 14px;
}
.av-p-paso__titulo { color: var(--teal-oscuro); font-size: 15px; margin-bottom: 8px; }
.av-p-paso__texto { color: var(--texto-secundario); font-size: 13px; line-height: 1.6; }
/* -------- 5. FAQs (acordeón nativo) -------- */
.av-p-faqs { background-color: var(--crema); padding: 64px 0; }
.av-p-faqs__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 24px; }
.av-p-faq {
background-color: #ffffff;
border-radius: var(--radio-tarjeta);
/* 2026-08-20 (aviso del usuario, 3ª vez): causa real encontrada —
cada plantilla de página tiene su propio reset ".av-XXX * {
margin: 0; ... }" (limpia estilos por defecto del navegador), y
varios de esos resets (Contacto, Recursos, fichas de subárea)
están definidos en el archivo MÁS ABAJO que esta regla — con el
mismo "peso" CSS, en un empate gana quien va después, así que el
reset pisaba silenciosamente este margen en esas páginas (pero no
en Quiénes somos / Áreas / Psicología, cuyo reset va antes). Se
fuerza con !important para que esta tarjeta compartida (usada en
Contacto y en las 9 fichas de subárea) mantenga siempre su
espaciado, sin depender del orden en el archivo. También sube a
28px y se añade una sombra suave para que cada pregunta se lea
como una tarjeta propia, no solo separada por aire en blanco. */
margin-bottom: 28px !important;
box-shadow: 0 1px 4px rgba(47, 72, 74, 0.08);
overflow: hidden;
}
.av-p-faq:last-child { margin-bottom: 0 !important; }
.av-p-faq summary {
padding: 16px 20px;
font-size: 14.5px;
font-weight: 600;
color: var(--teal-oscuro);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.av-p-faq summary::-webkit-details-marker { display: none; }
.av-p-faq summary::after {
content: "+";
color: var(--teal-principal);
font-size: 20px;
font-weight: 600;
}
.av-p-faq[open] summary::after { content: "–"; }
.av-p-faq__respuesta {
padding: 0 20px 18px;
color: var(--texto-secundario);
font-size: 13.5px;
line-height: 1.65;
}
/* -------- 6. Banner de cierre -------- */
.av-p-cta { background-color: var(--teal-oscuro); padding: 64px 0; text-align: center; }
.av-p-cta__texto { color: #ffffff; font-size: 20px; margin-bottom: 24px; }
.av-p-cta__boton:link, .av-p-cta__boton:visited { color: #ffffff; }
.av-p-cta__boton {
display: inline-block;
background-color: var(--teal-principal);
color: #ffffff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 14px 28px;
border-radius: var(--radio-campo);
text-decoration: none;
box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.av-p-cta__boton:hover { background-color: #7fa8a8; box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
/* -------- Responsive -------- */
@media (max-width: 760px) {
.av-p-metodologia__grid { grid-template-columns: 1fr; }
.av-p-fila { flex-direction: column; }
.av-p-fila__meta { text-align: left; align-self: flex-start; }
.av-p-hero__titulo { font-size: 26px; }
}
/* ============ Área de Logopedia (page-templates/page-area-logopedia.php) ============ */
.av-logo * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-logo .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-logo .contenedor {
max-width: 980px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- 1. Cabecera -------- */
/* 2026-08-17 (informe, punto 9): mismo criterio que Psicología —
alineado izquierda, ~70 caracteres de medida. */
.av-l-hero { background-color: var(--crema); padding: 64px 0 40px; text-align: left; }
.av-l-hero__blob {
width: 260px;
height: 260px;
flex-shrink: 0;
background-color: var(--teal-palido);
border-radius: 65% 35% 40% 60% / 55% 60% 40% 45%;
display: flex;
align-items: center;
justify-content: center;
animation: av-flotar 5.5s ease-in-out infinite;
/* 2026-08-17 (informe, punto 11): mismo recorte que en Psicología. */
overflow: hidden;
}
.av-l-hero__titulo { color: var(--teal-oscuro); font-size: 32px; margin-bottom: 12px; }
.av-l-hero__subtitulo { color: var(--texto-secundario); font-size: 16px; max-width: 65ch; margin: 0; line-height: 1.7; }
/* -------- Quién te atiende (mini-tarjetas, tras Tratamientos) -------- */
.av-l-equipo { background-color: #ffffff; padding: 56px 0; text-align: center; }
.av-l-equipo__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 24px; }
.av-l-equipo__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.av-l-mini-perfil__enlace { display: block; text-decoration: none; width: 150px; text-align: center; }
.av-l-mini-perfil__foto { width: 72px; height: 72px; border-radius: 50%; background-color: var(--teal-palido); border: 2px solid var(--teal-principal); overflow: hidden; margin: 0 auto 8px; display: block; object-fit: cover; }
.av-l-mini-perfil__nombre { display: block; color: var(--teal-oscuro); font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.av-l-mini-perfil__especialidad { display: block; color: var(--teal-principal); font-size: 11px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.av-l-mini-perfil__colegiado { display: block; color: var(--texto-secundario); font-size: 10.5px; line-height: 1.3; }
.av-l-mini-perfil__enlace:hover .av-l-mini-perfil__nombre { color: var(--teal-principal); }
.av-l-equipo__nota { margin-top: 20px; font-size: 13px; }
.av-l-equipo__nota a { color: var(--teal-principal); font-weight: 600; text-decoration: none; }
.av-l-equipo__nota a:hover { text-decoration: underline; }
/* -------- 2. Catálogo de tratamientos -------- */
.av-l-tratamientos { background-color: var(--crema); padding: 64px 0; }
.av-l-tratamientos__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 28px; }
.av-l-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--teal-claro); }
.av-l-fila:first-child { border-top: 1px solid var(--teal-claro); }
.av-l-fila__num { width: 60px; height: 60px; flex-shrink: 0; }
.av-l-fila__contenido { flex-grow: 1; }
.av-l-fila__titulo { color: var(--teal-oscuro); font-size: 16px; margin-bottom: 4px; }
.av-l-fila__resumen { color: var(--teal-oscuro); font-size: 14.5px; line-height: 1.6; margin-bottom: 4px; }
.av-l-fila__texto { color: var(--texto-secundario); font-size: 13px; line-height: 1.6; }
.av-l-fila__meta { flex-shrink: 0; align-self: flex-end; text-align: right; font-size: 11.5px; color: var(--teal-principal); font-weight: 600; line-height: 1.6; white-space: nowrap; }
/* -------- 4. Metodología en 3 pasos -------- */
.av-l-metodologia { background-color: #ffffff; padding: 64px 0; }
.av-l-metodologia__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 32px; }
.av-l-metodologia__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.av-l-paso { text-align: center; }
.av-l-paso__num { width: 44px; height: 44px; border-radius: 50%; background-color: var(--teal-principal); color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; margin: 0 auto 14px; }
.av-l-paso__titulo { color: var(--teal-oscuro); font-size: 15px; margin-bottom: 8px; }
.av-l-paso__texto { color: var(--texto-secundario); font-size: 13px; line-height: 1.6; }
/* -------- 5. FAQs -------- */
.av-l-faqs { background-color: var(--crema); padding: 64px 0; }
.av-l-faqs__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 24px; }
.av-l-faq { background-color: #ffffff; border-radius: var(--radio-tarjeta); margin-bottom: 10px; overflow: hidden; }
.av-l-faq summary { padding: 16px 20px; font-size: 14.5px; font-weight: 600; color: var(--teal-oscuro); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.av-l-faq summary::-webkit-details-marker { display: none; }
.av-l-faq summary::after { content: "+"; color: var(--teal-principal); font-size: 20px; font-weight: 600; }
.av-l-faq[open] summary::after { content: "–"; }
.av-l-faq__respuesta { padding: 0 20px 18px; color: var(--texto-secundario); font-size: 13.5px; line-height: 1.65; }
/* -------- 6. Banner de cierre -------- */
.av-l-cta { background-color: var(--teal-oscuro); padding: 64px 0; text-align: center; }
.av-l-cta__texto { color: #ffffff; font-size: 20px; margin-bottom: 24px; }
.av-l-cta__boton:link, .av-l-cta__boton:visited { color: #ffffff; }
.av-l-cta__boton { display: inline-block; background-color: var(--teal-principal); color: #ffffff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: var(--radio-campo); text-decoration: none; box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18); transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.av-l-cta__boton:hover { background-color: #7fa8a8; box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
/* -------- Responsive -------- */
@media (max-width: 760px) {
.av-l-metodologia__grid { grid-template-columns: 1fr; }
.av-l-fila { flex-direction: column; }
.av-l-fila__meta { text-align: left; align-self: flex-start; }
.av-l-hero__titulo { font-size: 26px; }
}
/* ============ Recursos (page-templates/page-recursos.php) ============ */
.av-recursos-pg * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-recursos-pg .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-recursos-pg .contenedor {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- Cabecera -------- */
.av-r-hero { background-color: var(--crema); padding: 64px 0 40px; text-align: center; }
.av-r-hero__titulo { color: var(--teal-oscuro); font-size: 32px; margin-bottom: 12px; }
.av-r-hero__texto { color: var(--texto-secundario); font-size: 16px; max-width: 600px; margin: 0 auto; line-height: 1.7; }
/* -------- 1. Blog -------- */
.av-r-blog { background-color: #ffffff; padding: 64px 0; }
.av-r-blog__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 6px; }
/* 2026-08-31: subtítulo añadido a petición del usuario, para dejar
claro que la sección muestra las últimas entradas (con filtro y
paginación), no el listado completo — mismo patrón visual que
.av-r-pacientes__subtitulo, justo debajo. */
.av-r-blog__subtitulo { color: var(--texto-secundario); font-size: 14px; margin-bottom: 20px; }
.av-r-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.av-r-articulo { border: 1px solid var(--teal-claro); border-radius: var(--radio-tarjeta); overflow: hidden; box-shadow: 0 4px 14px rgba(47, 72, 74, 0.07); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.av-r-articulo:hover { box-shadow: 0 10px 26px rgba(47, 72, 74, 0.14); transform: translateY(-4px); }
.av-r-articulo__img { height: 130px; background-color: var(--teal-palido); }
.av-r-articulo__body { padding: 18px; }
/* 2026-08-19 (informe de diseño, punto 16): acento cálido en dosis mínima.
2026-08-29: color(--acento-calido-texto), no --acento-calido — el
tono original no cumplía contraste AA en este tamaño de texto. */
.av-r-articulo__categoria { display: block; font-size: 11.5px; font-weight: 600; color: var(--acento-calido-texto); margin-bottom: 6px; }
.av-r-articulo__titulo { color: var(--teal-oscuro); font-size: 15px; margin-bottom: 8px; line-height: 1.4; }
.av-r-articulo__resumen { color: var(--texto-secundario); font-size: 13px; line-height: 1.55; margin-bottom: 10px; }
.av-r-articulo__fecha { color: var(--texto-secundario); font-size: 11.5px; }
/* -------- 2. Recursos para pacientes -------- */
.av-r-pacientes { background-color: var(--crema); padding: 64px 0; }
.av-r-pacientes__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 6px; }
.av-r-pacientes__subtitulo { color: var(--texto-secundario); font-size: 14px; margin-bottom: 20px; }
.av-r-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.av-r-chip {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 12.5px;
padding: 8px 18px;
border-radius: var(--radio-capsula);
border: none;
cursor: pointer;
background-color: var(--teal-palido);
color: var(--teal-oscuro);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.av-r-chip:hover { background-color: var(--teal-principal); color: #ffffff; transform: translateY(-1px); }
.av-r-chip.activo { background-color: var(--teal-principal); color: #ffffff; }
.av-r-pacientes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.av-r-recurso {
display: none;
background-color: #ffffff;
border-radius: var(--radio-tarjeta);
padding: 18px;
gap: 10px;
}
.av-r-recurso.visible { display: flex; }
.av-r-ver-todos { text-align: center; margin-top: 24px; }
.av-r-ver-todos .av-r-chip {
background-color: transparent;
border: 2px solid var(--teal-principal);
color: var(--teal-principal);
padding: 10px 24px;
}
.av-r-ver-todos .av-r-chip:hover { background-color: var(--teal-palido); }
.av-r-recurso__icono { width: 36px; height: 36px; border-radius: var(--radio-campo); background-color: var(--teal-palido); flex-shrink: 0; }
.av-r-recurso__titulo { color: var(--teal-oscuro); font-size: 13.5px; margin-bottom: 4px; }
.av-r-recurso__tipo { color: var(--teal-principal); font-size: 11.5px; font-weight: 600; }
/* -------- 3. Enlaces de interés -------- */
.av-r-enlaces { background-color: #ffffff; padding: 40px 0 56px; border-top: 1px solid var(--teal-claro); }
.av-r-enlaces__titulo { color: var(--texto-secundario); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.av-r-enlaces__lista { list-style: none; }
.av-r-enlaces__lista li { margin-bottom: 8px; }
.av-r-enlaces__lista a { font-size: 12.5px; color: var(--texto-secundario); text-decoration: none; }
.av-r-enlaces__lista a:hover { color: var(--teal-principal); }
/* -------- Responsive -------- */
@media (max-width: 760px) {
.av-r-blog__grid { grid-template-columns: 1fr; }
.av-r-pacientes__grid { grid-template-columns: 1fr; }
.av-r-hero__titulo { font-size: 26px; }
}
/* ============ Contacto (page-templates/page-contacto.php) ============ */
.av-contacto-pg * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-contacto-pg .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-contacto-pg .contenedor {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- Cabecera -------- */
.av-c-hero { background-color: var(--crema); padding: 64px 0 36px; text-align: center; }
.av-c-hero__titulo { color: var(--teal-oscuro); font-size: 32px; margin-bottom: 10px; }
/* 2026-08-20 (aviso del usuario): "Contacto y cita previa" vuelve a
mostrarse, ahora como etiqueta corta debajo del nombre completo del
centro (en vez de ser el título principal, como antes de la 2ª
ronda) — así se ve de un vistazo en qué página estás, sin perder el
nombre del centro como titular. */
.av-c-hero__kicker { color: var(--teal-principal); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.av-c-hero__texto { color: var(--texto-secundario); font-size: 16px; line-height: 1.7; }
/* 2026-08-19 (aviso del usuario): avales trasladados aquí desde debajo
del formulario — mismo tratamiento visual que .av-q-hero__avales en
Quiénes Somos (insignia blanca sobre el fondo crema de la cabecera),
centrados porque .av-c-hero ya centra todo su contenido. */
.av-c-hero__avales { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.av-c-hero__aval {
display: inline-block;
background-color: #ffffff;
color: var(--teal-oscuro);
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
padding: 8px 16px;
border-radius: var(--radio-campo);
max-width: 100%;
text-align: center;
box-shadow: 0 2px 8px rgba(47, 72, 74, 0.08);
}
/* -------- Vías de contacto rápido -------- */
/* 2026-08-17: tenía 0 de padding inferior — las tarjetas (fondo
crema) quedaban pegadas al borde exacto de la sección siguiente,
que también podía tener fondo crema, y se veían fundidas en un
solo bloque. Padding inferior añadido para que siempre quede aire
blanco entre las tarjetas y lo que venga después. */
/* 2026-08-20 (aviso del usuario, lectura general de espaciados): esta
sección y .av-c-cuerpo comparten fondo blanco y son, en realidad,
el mismo bloque lógico ("vías rápidas" + "formulario"), sin línea
divisoria entre ambas — pero cada una tenía su padding vertical
simétrico completo (40px aquí + 64px en .av-c-cuerpo = 104px de
aire entre las 3 tarjetas y "Si lo prefieres..."), demasiado para
un único bloque continuo. Se reparte de forma asimétrica: full
arriba (transición real desde la cabecera, que sí cambia de fondo)
y menos abajo (transición interna al mismo bloque). */
.av-c-vias { background-color: #ffffff; padding: 40px 0 24px; }
/* 2026-08-19 (2ª ronda, aviso del usuario): frase de transición antes
de la cuadrícula — sin ella se pasaba del eslogan directamente a
las 3 tarjetas sin ningún puente.
2026-08-20 (aviso del usuario): deja de ser una etiqueta corta en
negrita — ahora recibe el párrafo completo que antes iba en la
cabecera ($c_texto), así que pasa a leerse como texto normal
(mismo estilo que tenía .av-c-hero__texto), centrado y con un
ancho máximo para que no se estire de punta a punta en pantallas
grandes. */
/* 2026-08-20 (aviso del usuario): "Contacto y cita previa" se
traslada aquí desde la cabecera. Primero se probó como etiqueta
pequeña en mayúsculas (13px, teal claro) a juego con el antiguo
.av-c-hero__kicker, pero quedaba "escondida" frente al resto de
títulos de sección, ya homogeneizados a 20px — se sube a ese mismo
tamaño y color (teal oscuro) para que tenga el mismo peso visual
que "Formulario confidencial" o "Nuestro centro". Ahora es un
real (antes era un párrafo con estilo), mejor también para la
estructura semántica de la página. */
/* 2026-08-20 (aviso del usuario, a contrastar): prueba de acento
cálido — misma variable y mismo rol que ya documenta el sistema de
diseño ("único acento cálido del sitio, en dosis mínimas — kicker
del Hero..."), esta etiqueta cumple exactamente ese papel de
"kicker", así que no es una excepción nueva a la regla. Se
descarta aplicarlo al NICA (dato oficial/de cumplimiento, mejor en
un tono serio) — ver conversación. */
/* 2026-08-29: color(--acento-calido-texto) — ver nota junto a la
variable en :root (contraste AA en uso como texto). */
.av-c-vias__kicker { color: var(--acento-calido-texto); font-size: 20px; text-align: center; margin-bottom: 10px; }
.av-c-vias__intro { color: var(--texto-secundario); font-size: 15px; font-weight: 400; line-height: 1.6; text-align: center; max-width: 640px; margin: 0 auto 24px; }
.av-c-vias__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.av-c-via { display: flex; align-items: center; gap: 12px; background-color: var(--crema); border-radius: var(--radio-tarjeta); padding: 16px 18px; box-shadow: 0 3px 10px rgba(47, 72, 74, 0.05); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.av-c-via:hover { box-shadow: 0 8px 20px rgba(47, 72, 74, 0.12); transform: translateY(-3px); }
.av-c-via__icono { width: 40px; height: 40px; border-radius: 50%; background-color: var(--teal-palido); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.av-c-via__label { color: var(--texto-secundario); font-size: 11.5px; }
.av-c-via__valor { color: var(--teal-oscuro); font-size: 14px; font-weight: 600; }
/* -------- Antes de tu primera cita (informe, punto 7) --------
2026-08-19 (aviso del usuario): la cuadrícula de 3 tarjetas
(Duración/Modalidad/Precio) se retiró — esas 3 respuestas pasan a
vivir dentro de .av-c-primera__faqs como 3 preguntas más, ver
page-contacto.php. .av-c-primera__grid/__bloque/__subtitulo ya no
se usan en ningún sitio. */
/* 2026-08-19 (2ª ronda, aviso del usuario): border-top añadido —
"Nuestro centro" y esta sección comparten el mismo fondo crema, así
que aunque hay ~120px de aire combinado entre ambas (64px de
padding inferior de .av-c-centro + 56px de padding superior aquí),
no había ninguna línea que marcara dónde termina una y empieza la
otra. Mismo patrón que ya usa .av-c-centro contra la sección de
arriba. */
.av-c-primera { background-color: var(--crema); padding: 56px 0; border-top: 1px solid var(--teal-claro); }
/* 2026-08-20 (aviso del usuario): homogenizado a 20px, mismo tamaño
que el resto de títulos de sección de esta página (Formulario
confidencial, Horario de atención, Cómo llegar, Nuestro centro) —
antes tenía 22px, un poco más grande sin motivo real. */
.av-c-primera__titulo { color: var(--teal-oscuro); font-size: 20px; text-align: center; margin-bottom: 28px; }
.av-c-primera__faqs { max-width: 760px; margin: 0 auto; }
/* -------- Formulario + Horario (en paralelo) + Cómo llegar/Mapa
(debajo, ancho completo) — 2026-08-19, 2ª ronda (aviso del
usuario): antes el formulario iba solo en su fila (max-width 600px
centrado) y Horario/Cómo llegar/Mapa en una sección aparte, lo que
dejaba un hueco en blanco grande entre ambas (dos secciones
.av-c-cuerpo consecutivas, cada una con 64px de padding). Ahora
todo vive en una sola sección: formulario y horario en 2 columnas
(el horario es un bloque corto, no necesita el ancho completo ni
la altura del formulario), y "Cómo llegar" + mapa justo debajo, a
ancho completo, sin salto de sección de por medio. */
/* 2026-08-20: padding superior reducido (mismo motivo que
.av-c-vias, ver comentario ahí) — el inferior se queda en 64px
porque ahí sí viene un cambio de fondo real (a "Nuestro centro",
crema), con su propio border-top de separación. */
.av-c-cuerpo { background-color: #ffffff; padding: 32px 0 64px; }
.av-c-cuerpo__intro { color: var(--teal-oscuro); font-size: 14px; font-weight: 600; margin-bottom: 24px; text-align: center; }
.av-c-form-horario-fila { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-bottom: 48px; }
.av-c-form-fila { max-width: none; margin: 0; }
@media (max-width: 720px) {
.av-c-form-horario-fila { grid-template-columns: 1fr; gap: 32px; }
}
.av-c-como-llegar-fila { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--teal-palido); padding-top: 40px; }
.av-c-form__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 6px; }
.av-c-form__subtitulo { color: var(--texto-secundario); font-size: 13px; margin-bottom: 20px; }
.av-c-form input:not([type="checkbox"]):not([type="radio"]), .av-c-form textarea, .av-c-form select {
width: 100%; border: 1px solid var(--teal-claro); border-radius: var(--radio-campo);
padding: 12px 14px; font-size: 13.5px; color: var(--teal-oscuro);
margin-bottom: 14px; font-family: inherit; background-color: #ffffff;
}
.av-c-form select { cursor: pointer; }
.av-c-form input[type="checkbox"] { width: auto; margin: 0 6px 0 0; vertical-align: middle; }
.av-c-form .wpcf7-list-item { margin: 0 0 14px; display: block; font-size: 12.5px; color: var(--texto-secundario); }
.av-c-form .wpcf7-list-item a { color: var(--teal-principal); }
.av-c-form textarea { resize: vertical; min-height: 100px; }
.av-c-form__boton:link, .av-c-form__boton:visited { color: #ffffff; }
.av-c-form__boton {
background-color: var(--teal-principal); color: #ffffff; border: none;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
padding: 14px 28px; border-radius: var(--radio-campo); cursor: pointer;
box-shadow: 0 3px 10px rgba(47, 72, 74, 0.18);
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.av-c-form__boton:hover { background-color: var(--teal-hover); box-shadow: 0 5px 14px rgba(47, 72, 74, 0.24); transform: translateY(-1px); }
/* 2026-08-19: avales trasladados a .av-c-hero__avales (debajo del
título principal) — .av-c-form__avales / .av-c-form__aval quedan
retiradas, ya no se usan en ningún sitio. */
/* Compatibilidad automática con Contact Form 7 — así el formulario
hereda el mismo diseño aunque no se añada la clase av-c-form__boton
manualmente al botón dentro del propio CF7. */
.av-c-form p { margin: 0; }
.av-c-form input[type="submit"] {
/* 2026-08-17 (informe, punto 4): reforzado con !important — el
plugin Contact Form 7 carga su propia hoja de estilos por
defecto (botón blanco con borde fino), que puede pisar esta
regla según el orden de carga. Estas propiedades clave se
marcan !important para garantizar que el botón "Enviar mensaje"
salga siempre como botón sólido/primario, nunca en blanco. */
width: auto !important; background-color: var(--teal-principal) !important; color: #ffffff !important; border: none !important;
font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
padding: 13px 26px; border-radius: var(--radio-campo); cursor: pointer; transition: background-color 0.2s ease;
}
.av-c-form input[type="submit"]:hover { background-color: var(--teal-hover) !important; }
.av-c-form .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; margin: -10px 0 12px; }
.av-c-form .wpcf7-response-output { border-radius: var(--radio-campo); font-size: 13px; margin-top: 14px; }
.av-c-info__bloque { margin-bottom: 28px; }
/* 2026-08-20 (aviso del usuario): homogenizado a 20px (antes 18px) —
usada por "Horario de atención" y "Cómo llegar", ahora al mismo
tamaño que "Formulario confidencial", "Nuestro centro" y
"Preguntas frecuentes". */
.av-c-info__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 14px; }
.av-c-horario-fila { display: flex; justify-content: space-between; font-size: 13px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--teal-palido); }
.av-c-horario-fila span:first-child { color: var(--texto-secundario); }
.av-c-horario-fila span:last-child { color: var(--teal-oscuro); font-weight: 600; }
.av-c-direccion { color: var(--texto-secundario); font-size: 13px; margin-bottom: 12px; }
.av-c-mapa { height: 260px; border-radius: var(--radio-tarjeta); overflow: hidden; background-color: var(--teal-palido); }
.av-c-mapa iframe { border-radius: var(--radio-tarjeta); display: block; }
/* 2026-08-17 (informe, punto 8): el mapa ya no vive apretado en la
columna de la derecha (quedaba descompensado frente al
formulario) — ahora es un bloque a ancho completo debajo del
grid, más alto y con más presencia. */
.av-c-mapa--ancho-completo { height: 380px; margin-top: 8px; }
@media (max-width: 720px) {
.av-c-mapa--ancho-completo { height: 280px; margin-top: 8px; }
}
/* -------- Nuestro centro (carrusel) -------- */
.av-c-centro { background-color: var(--crema); padding: 64px 0; border-top: 1px solid var(--teal-claro); }
.av-c-centro__titulo { color: var(--teal-oscuro); font-size: 20px; margin-bottom: 6px; }
.av-c-centro__texto { color: var(--texto-secundario); font-size: 13px; margin-bottom: 24px; }
.av-c-carrusel { position: relative; max-width: 700px; margin: 0 auto; border-radius: var(--radio-tarjeta); overflow: hidden; }
.av-c-carrusel__pista { display: flex; transition: transform 0.35s ease; }
.av-c-carrusel__slide { flex: 0 0 100%; aspect-ratio: 3/2; background-color: var(--teal-palido); }
.av-c-carrusel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-c-carrusel__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background-color: rgba(255,255,255,0.9); color: var(--teal-oscuro); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.av-c-carrusel__flecha--prev { left: 10px; }
.av-c-carrusel__flecha--next { right: 10px; }
.av-c-carrusel__puntos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.av-c-carrusel__punto { width: 8px; height: 8px; border-radius: 50%; border: none; background-color: var(--teal-claro); cursor: pointer; padding: 0; }
.av-c-carrusel__punto.activo { background-color: var(--teal-principal); }
/* -------- Responsive -------- */
@media (max-width: 760px) {
.av-c-vias__grid { grid-template-columns: 1fr; }
.av-c-hero__titulo { font-size: 26px; }
}
/* ============================================================
MENÚ PRINCIPAL (header) — hover animado + página activa
============================================================ */
.av-menu-principal {
list-style: none;
display: flex;
gap: 30px;
margin: 0;
padding: 0;
}
.av-menu-principal li {
position: relative;
}
.av-menu-principal a {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--teal-oscuro, #2f484a);
text-decoration: none;
padding: 6px 0;
display: inline-block;
position: relative;
transition: color 0.2s ease;
}
.av-menu-principal a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--teal-principal, #357274);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.av-menu-principal a:hover {
color: var(--teal-principal, #357274);
}
.av-menu-principal a:hover::after {
transform: scaleX(1);
}
/* Página activa — WordPress añade esta clase automáticamente */
.av-menu-principal .current-menu-item a,
.av-menu-principal .current_page_item a {
color: var(--teal-principal, #357274);
}
.av-menu-principal .current-menu-item a::after,
.av-menu-principal .current_page_item a::after {
transform: scaleX(1);
}
@media (max-width: 760px) {
.av-menu-principal {
gap: 16px;
flex-wrap: wrap;
}
.av-menu-principal a {
font-size: 13px;
}
}
/* ============================================================
MENÚ DE NAVEGACIÓN DEL FOOTER — hover animado
============================================================ */
.av-footer-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.av-footer-menu a,
.av-footer-menu a:link,
.av-footer-menu a:visited {
/* 2026-08-29 (revisión de diseño en conjunto, hallazgo 4): antes
#c7dcd9 escrito a mano — mismo valor que --teal-claro, ahora usa la
variable para que un futuro cambio de paleta no se olvide de este
punto. */
color: var(--teal-claro) !important;
font-size: 13px;
text-decoration: none;
display: inline-block;
transition: color 0.2s ease, transform 0.2s ease;
}
.av-footer-menu a:hover {
color: #ffffff !important;
transform: translateX(4px);
}
/* ============================================================
ENLACE CRUZADO ENTRE ÁREAS (Psicología ↔ Logopedia)
============================================================ */
.av-p-cruce, .av-l-cruce {
background-color: var(--teal-palido);
padding: 18px 0;
text-align: center;
}
.av-p-cruce__texto, .av-l-cruce__texto {
font-size: 13.5px;
color: var(--teal-oscuro);
margin: 0;
}
.av-p-cruce__enlace, .av-l-cruce__enlace,
.av-p-cruce__enlace:link, .av-l-cruce__enlace:link,
.av-p-cruce__enlace:visited, .av-l-cruce__enlace:visited {
color: var(--teal-principal) !important;
font-weight: 600;
text-decoration: none;
margin-left: 4px;
}
.av-p-cruce__enlace:hover, .av-l-cruce__enlace:hover {
text-decoration: underline;
}
/* ============================================================
PAGINACIÓN DEL BLOG (Recursos)
============================================================ */
.av-r-paginacion {
margin-top: 32px;
display: flex;
justify-content: center;
}
.av-r-paginacion ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0;
margin: 0;
}
.av-r-paginacion .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: var(--radio-campo);
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--teal-oscuro, #2f484a);
background-color: var(--crema, #faf8f4);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.av-r-paginacion .page-numbers:hover {
background-color: var(--teal-palido, #e2eeed);
}
.av-r-paginacion .page-numbers.current {
background-color: var(--teal-principal, #357274);
color: #ffffff !important;
}
.av-r-paginacion .page-numbers.dots {
background-color: transparent;
}
/* ============================================================
FOOTER — grid de 4 columnas, apiladas en móvil
============================================================ */
.av-footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-bottom: 32px;
}
@media (max-width: 768px) {
.av-footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* ============================================================
FOOTER — iconos de redes sociales, animación al pasar el ratón
============================================================ */
.av-footer-social {
transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.av-footer-social:hover {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.av-footer-social--inicial:hover {
background-color: rgba(255, 255, 255, 0.22) !important;
}
/* 2026-08-19 (informe de diseño, punto 19) — INTENTO DESCARTADO: se
probó forzar los SVG reales de Instagram/Facebook/Pinterest/Google
Business a blanco monocromo vía filter: brightness(0) invert(1). No
funciona con estos iconos en concreto — llevan el círculo de fondo y
el logo como formas opacas sin transparencia entre ambas, así que el
filtro los aplana a un círculo blanco liso sin ningún trazo visible
(confirmado en vivo por el usuario). Revertido: ver más abajo la
solución real (footer.php pasa las 4 redes al tratamiento de inicial
en círculo, .av-footer-social--inicial, que sí es monocromo blanco de
verdad y ya estaba probado en el propio tema). */
.av-footer-social img {
transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* ============================================================
HEADER RESPONSIVE — botón "Pedir Cita" siempre visible +
menú hamburguesa en móvil (el menú horizontal de escritorio
no se toca, sigue con .av-menu-principal ya existente)
============================================================ */
.av-header-derecha {
display: flex;
align-items: center;
gap: 20px;
}
/* Icono de llamada directa — visible siempre (móvil y escritorio):
es la vía de contacto más directa, sin depender de rellenar un
formulario, y no tiene sentido ocultarla solo en un tamaño de
pantalla. Ver punto 12 del informe de revisión (2026-08). */
.av-header-telefono {
display: inline-flex;
align-items: center;
justify-content: center;
/* 2026-08-29 (revisión de diseño en conjunto): antes 36px — por debajo
del mínimo táctil orientativo de 44px. Se sube a 40px (y a 36px en
móvil, ver media query) como mejora sin arriesgar el ajuste de la
cabecera, ya puesto a prueba con el resto de elementos nuevos. */
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--teal-palido, #e2eeed);
flex-shrink: 0;
transition: background-color 0.2s ease;
}
.av-header-telefono:hover {
background-color: var(--teal-claro, #c7dcd9);
}
/* 2026-08-29: insignia "También online" — aviso sutil junto al CTA,
no un botón flotante (se descartó esa opción por competir con el
CTA principal y por parecer un widget de chat). Solo un reclamo
corto; el matiz completo ("si el caso lo permite") ya vive en la
cabecera de Quiénes Somos, así que aquí no hace falta repetirlo. */
.av-badge-online {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Inter', sans-serif;
font-size: 11.5px;
font-weight: 600;
color: var(--teal-oscuro, #2f484a);
background-color: var(--teal-palido, #e2eeed);
border: 1px solid var(--teal-claro, #c7dcd9);
padding: 6px 11px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.av-badge-online svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.av-header-cta {
display: inline-block;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: #ffffff !important;
background-color: var(--teal-principal, #357274);
padding: 10px 20px;
border-radius: var(--radio-campo);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.av-header-cta:hover {
background-color: var(--teal-hover, #2c5f61);
}
/* Botón hamburguesa — oculto en escritorio por defecto */
.av-header-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
/* 2026-08-29: antes 36px — sube a 40px, mismo criterio que
.av-header-telefono (mínimo táctil). */
width: 40px;
height: 40px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
.av-header-hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--teal-oscuro, #2f484a);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animación a "X" cuando el menú está abierto */
.av-header-hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.av-header-hamburger.is-open span:nth-child(2) {
opacity: 0;
}
.av-header-hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* 2026-08-30 (2ª tanda, bloque 5 — responsive): este bloque cubría
hasta 760px, pero entre 761px y ~960px (tablets en vertical: iPad
768px incluido) el menú horizontal completo + insignia con texto +
teléfono + "Pedir Cita" no caben — comprobado en vivo, el botón
"Pedir Cita" quedaba completamente fuera de pantalla en un iPad de
768px, sin scroll horizontal visible que avisara del problema. Se
amplía el umbral a 1024px (cubre toda la franja de tablets en
vertical) para que ese rango use el mismo menú desplegable ya
probado, en vez de intentar encajar la versión de escritorio en un
ancho que no le llega. */
@media (max-width: 1024px) {
/* El menú horizontal se convierte en panel desplegable */
.av-menu-principal {
display: none;
flex-direction: column;
gap: 4px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #ffffff;
border-bottom: 1px solid var(--teal-claro, #c7dcd9);
box-shadow: 0 8px 20px rgba(47, 72, 74, 0.1);
padding: 12px 24px 18px;
}
.av-menu-principal.is-open {
display: flex;
}
.av-menu-principal a {
padding: 10px 0;
font-size: 15px;
}
/* En móvil, el botón "Pedir Cita" se hace algo más compacto */
.av-header-cta {
font-size: 12.5px;
padding: 9px 14px;
}
.av-header-hamburger {
display: flex;
}
/* Menos separación en móvil: ahora conviven icono de llamada +
botón "Pedir Cita" + hamburguesa en el mismo ancho reducido */
.av-header-derecha {
gap: 10px;
}
.av-header-telefono {
/* 2026-08-29: antes 32px — sube a 36px, mismo criterio de tamaño
táctil que en escritorio (ver regla base más arriba). */
width: 36px;
height: 36px;
}
/* 2026-08-30 (2ª tanda, bloque 5 — responsive): al subir el
hamburguesa a 40px (ver regla base) se quedó sin su propio ajuste
a móvil, a diferencia del teléfono y la insignia — eso empujaba la
cabecera 3px por encima del ancho de un iPhone SE/mini (375px),
provocando scroll horizontal real. Mismo criterio que el teléfono:
36px en móvil. */
.av-header-hamburger {
width: 36px;
height: 36px;
}
/* La insignia "También online" se reduce a solo icono en móvil
estrecho, para no competir por espacio con el botón "Pedir Cita"
y el resto de elementos de la cabecera. */
.av-badge-online {
padding: 6px;
/* 2026-08-29: antes 32px — mismo criterio de tamaño táctil. */
width: 36px;
height: 36px;
justify-content: center;
}
.av-badge-online__texto {
display: none;
}
}
@media (max-width: 400px) {
/* En pantallas muy estrechas, se prioriza el botón "Pedir Cita":
la insignia se oculta del todo (el mensaje ya vive también en
Quiénes Somos, así que no es información que se pierda). */
.av-badge-online {
display: none;
}
}
/* ============================================================
PASTILLAS DE TRATAMIENTO Y NAVEGACIÓN (tags→blog, puente→área)
Añadido: sistema de pastillas para las palabras clave de cada
tratamiento (enlazan a su categoría fija del blog) y para la
navegación de la página puente hacia las áreas. Reutiliza el
mismo lenguaje visual que .av-r-chip (filtros de Recursos
varios) para sentirse parte del mismo sistema.
============================================================ */
.av-pill-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.av-pill {
display: inline-block;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 12.5px;
padding: 8px 16px;
border-radius: var(--radio-capsula);
background-color: var(--teal-palido);
color: var(--teal-oscuro);
text-decoration: none;
border: none;
line-height: 1.3;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
a.av-pill:hover,
a.av-pill:focus-visible {
background-color: var(--teal-principal);
color: #ffffff;
transform: translateY(-1px);
}
/* Pastilla informativa de Formato + Modalidad — no es un enlace,
se distingue visualmente con contorno en vez de relleno. */
.av-pill--meta {
background-color: transparent;
border: 1.5px solid var(--teal-claro);
color: var(--teal-principal);
cursor: default;
}
/* Palabra clave sin "ruta_blog" todavía asignada en ese tratamiento
— se muestra igual mientras se rellena el campo, pero no enlaza. */
.av-pill--sin-enlace {
cursor: default;
}
/* Grupo de pastillas de navegación en la página puente — un poco
más de aire antes del botón "Acceder al Área". */
.av-pill-group--puente {
margin-bottom: 24px;
flex-grow: 1;
align-content: flex-start;
}
/* ============ Subárea individual (single-tratamiento.php) — punto 13, 2026-08-18 ============ */
.av-subarea * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Inter', 'Nunito Sans', 'Open Sans', sans-serif;
}
.av-subarea .titulo-display {
font-family: 'Poppins', 'Nunito', 'Quicksand', sans-serif;
font-weight: 600;
}
.av-subarea .contenedor {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
}
/* -------- Migas de pan -------- */
.av-subarea-breadcrumb { padding: 18px 0 0; }
.av-subarea-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 12.5px;
color: var(--texto-secundario);
}
.av-subarea-breadcrumb a { color: var(--teal-principal); text-decoration: none; }
.av-subarea-breadcrumb a:hover { text-decoration: underline; }
.av-subarea-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--teal-claro); }
/* -------- Cabecera -------- */
.av-subarea-hero { background-color: var(--crema); padding: 32px 0 44px; }
/* 2026-08-19 (aviso del usuario, sensación de página "plana"): esta
plantilla no tenía ninguna imagen — texto apilado de principio a fin.
En vez de fotos de profesionales (ver razonamiento aparte: el mismo
equipo cubre varias fichas de una misma área, así que la foto sería
idéntica en 6 páginas de Psicología o en 3 de Logopedia — cero
información nueva por página, y contradice la decisión ya tomada de
centralizar al equipo en Quiénes Somos), se reutiliza el icono propio
de cada ficha como acento visual. Mismo círculo teal que
.av-card-subarea__icono, algo más grande por ser el elemento
principal de la cabecera en vez de una tarjeta pequeña.
2026-08-31: ahora usa el mismo medallón ilustrado que la tarjeta de
/areas-intervencion/ (ver .av-subarea-hero__icono--medallon justo
abajo) — antes esta cabecera se había quedado con el icono de línea
antiguo mientras la cuadrícula ya había pasado al medallón nuevo el
30/08, así que la misma subárea se veía distinta según la página.
Este bloque base se mantiene tal cual como fallback, para las fichas
que todavía no tengan medallón propio. */
.av-subarea-hero__icono {
width: 64px; height: 64px; border-radius: 50%;
background: var(--teal-palido); display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.av-subarea-hero__icono img { width: 32px; height: 32px; }
.av-subarea-hero__icono--medallon { background: none; }
.av-subarea-hero__icono--medallon .av-medallon { width: 64px; height: 64px; }
.av-subarea-hero__titulo { color: var(--teal-oscuro); font-size: 32px; line-height: 1.25; }
.av-subarea-hero__frase { color: var(--teal-principal); font-size: 16px; font-weight: 500; margin-top: 10px; }
/* -------- Secciones genéricas -------- */
.av-subarea-sec { padding: 44px 0; }
.av-subarea-sec--crema { background-color: var(--crema); }
.av-subarea-sec__titulo { color: var(--teal-oscuro); font-size: 21px; margin-bottom: 18px; }
.av-subarea-sec__texto { color: var(--texto-secundario); font-size: 15px; line-height: 1.75; }
/* -------- "¿Qué se trabaja?" — bloques con subtítulo -------- */
.av-subarea-bloque { margin-bottom: 20px; }
.av-subarea-bloque:last-child { margin-bottom: 0; }
.av-subarea-bloque__titulo { color: var(--teal-principal); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px; margin-bottom: 5px; }
.av-subarea-bloque__texto { color: var(--texto-secundario); font-size: 14.5px; line-height: 1.7; }
/* -------- Introducción (fusiona "¿En qué consiste?" + "Cómo trabajamos"
específico, 2026-08-19) — menos padding superior, va pegada a la
cabecera sin un hueco tan grande como el resto de secciones. -------- */
.av-subarea-sec--intro { padding-top: 8px; }
.av-subarea-sec--intro .av-subarea-sec__texto:not(:last-child) { margin-bottom: 16px; }
/* -------- Equipo que atiende --------
2026-08-19: sustituyó al párrafo largo de "Quién te atiende" (el
texto completo vive en Quiénes Somos).
2026-08-31, dos rediseños el mismo día tras feedback de Jamil:
1) se añaden mini-caras del equipo (foto + nombre) — primera versión
en píldora de 28px con fondo/borde y solo nombre de pila →
ajustada a círculos sueltos de 48px con nombre completo.
2) el bloque tenía 3 elementos sueltos (frase "te atiende el
equipo...", las caras, y el enlace "Conocer al equipo →" aparte)
— Jamil pidió reducirlo a 2: una tarjeta centrada con una única
etiqueta ("Conoce al equipo que te atiende") montada sobre el
borde superior (como la leyenda de un