/* ========================================================================== Mamá Yoguini — estilos principales ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 15px; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-cream); line-height: 1.6; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: var(--color-green-action); text-decoration: none; transition: color .15s ease; } a:hover { text-decoration: none; color: var(--color-purple-dark); } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-purple-dark); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; } /* Compensadas para que el tamaño en pantalla de los títulos no cambie al reducir la base a 15px */ h1 { font-size: clamp(2.13rem, 4.3vw, 3.2rem); } h2 { font-size: clamp(1.6rem, 3.2vw, 2.24rem); } h3 { font-size: 1.33rem; } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } button { font-family: inherit; } /* El gestor de cookies pinta todo con var(--nivara-font). Su script escribe las variables como estilo en línea en , y ahí manda la fuente del sistema aunque en su panel esté configurada otra (sus colores sí llegan, la fuente no). Con !important una regla de hoja gana a un estilo en línea normal, así el banner usa la tipografía de la web, servida desde nuestro propio dominio. */ :root { --nivara-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; } /* Texto que solo perciben los lectores de pantalla: no ocupa espacio ni se ve */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-purple-dark); color: #fff; padding: 10px 16px; z-index: 200; } .skip-link:focus { left: 10px; top: 10px; } /* .container solo gobierna el eje horizontal y .section solo el vertical: si ambas usaran el atajo `padding`, la última en el archivo borraría el eje de la otra (pasaba en los elementos con class="container section"). */ .container { max-width: var(--container-w); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .section { padding-top: 72px; padding-bottom: 72px; } .section--white { background: #fff; } /* Fondo de marca: mandala sutil en las secciones alternas (no compromete el contraste del texto) */ .section--alt { background: var(--color-cream-alt) url('/wp-content/uploads/2026/08/fondo2-1.png') center / cover no-repeat; } .section--narrow .container, .section--narrow { max-width: 760px; margin: 0 auto; padding: 56px 24px; } .section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-header h2 { margin-bottom: 0; } .section-footer-cta { text-align: center; margin-top: 36px; } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--color-green-action); font-size: .8rem; margin-bottom: .5em; } .page-title { margin-bottom: .3em; } .page-lead { color: var(--color-text-soft); max-width: 640px; } .page-header-block { max-width: 760px; margin: 0 auto 40px; text-align: center; } .page-header-block .prose { text-align: left; } .page-template-page-contacto .page-header-block .prose { text-align: center; } .section-title-center { text-align: center; margin-bottom: 32px; } .prose :is(h2, h3) { margin-top: 1.4em; } .prose ul { margin-bottom: 1.2em; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 13px 28px; border-radius: 8px; font-weight: 600; font-family: var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; font-size: .95rem; letter-spacing: .01em; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn--primary { background: var(--color-green-action); color: #fff; } .btn--primary:hover { background: var(--color-green-action-dark); color: #fff; } .btn--secondary { background: var(--color-purple); color: #fff; } .btn--secondary:hover { background: var(--color-purple-hover); color: #fff; } .btn--outline, .btn--outline-light { background: var(--color-purple-dark); color: #fff; border-color: var(--color-purple-dark); } .btn--outline:hover, .btn--outline-light:hover { background: var(--color-purple-dark-hover); border-color: var(--color-purple-dark-hover); color: #fff; } .btn--lg { padding: 16px 34px; font-size: 1.05rem; } .btn--small { padding: 8px 18px; font-size: .85rem; } .btn--block { display: flex; width: 100%; } .btn--disabled { opacity: .5; pointer-events: none; } /* Header */ .site-header { background: var(--color-cream); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(60,53,80,.08); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; } .site-brand__name { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--color-purple-dark); letter-spacing: .01em; } .site-brand { text-decoration: none; display: flex; align-items: center; flex: none; } .site-logo-img { max-height: 48px; width: auto; display: block; } .footer__logo { max-height: 40px; width: auto; margin-bottom: 4px; } .primary-menu { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; } .primary-menu li { position: relative; } .primary-menu a { color: var(--color-text); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .primary-nav { display: flex; align-items: center; gap: 28px; } .nav-login { border-color: var(--color-purple-dark); flex: none; } .nav-toggle-checkbox, .nav-toggle-btn { display: none; } /* El botón de desplegar submenús solo existe en el menú móvil */ .submenu-toggle { display: none; } /* Flechita animada para items con subpáginas */ .dropdown-arrow { width: 7px; height: 7px; border-right: 1.5px solid var(--color-purple-dark); border-bottom: 1.5px solid var(--color-purple-dark); transform: rotate(45deg); transition: transform .2s ease; margin-top: -3px; } .primary-menu li:hover > a .dropdown-arrow, .primary-menu li:focus-within > a .dropdown-arrow { transform: rotate(225deg); margin-top: 3px; } /* Sub-menus (dropdown) */ .primary-menu .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); min-width: 220px; opacity: 0; visibility: hidden; transition: .15s ease; } .primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .primary-menu .sub-menu a { display: block; padding: 8px 10px; border-radius: 8px; } .primary-menu .sub-menu a:hover { background: var(--color-cream-alt); text-decoration: none; } /* Hero — foto a sangre completa con degradado */ .hero--fullbleed { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; padding: 0; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(60,53,80,.88) 0%, rgba(60,53,80,.68) 38%, rgba(60,53,80,.32) 68%, rgba(60,53,80,.15) 100%); } .hero__content { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 110px 24px; text-align: center; } .hero__icon { display: inline-flex; margin-bottom: 18px; } .hero__icon img { width: 56px; height: 56px; } .eyebrow--light { color: var(--color-sage-pale); } .hero__title { color: #fff; } .hero__lead { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 480px; margin-left: auto; margin-right: auto; } .hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-top: 8px; } .hero__content .hero__ctas { justify-content: center; } /* Two-column blocks */ .two-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; } .two-col--reverse { grid-template-columns: 1.1fr .9fr; } .two-col--reverse .two-col__media { order: 2; } .two-col__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--color-green-deep), var(--color-cream-alt)); } .two-col__media img { width: 100%; height: 100%; object-fit: cover; } /* Cards */ .card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 28px; } .card__body { padding: 20px 4px 4px; } /* El nivel del encabezado depende del contexto (h2 o h3), pero el tamaño visual de la tarjeta debe ser siempre el mismo */ .card__title { font-size: 1.2rem; line-height: 1.3; } .card__title a { color: var(--color-purple-dark); } .card__excerpt { color: var(--color-text-soft); font-size: .95rem; } .card__footer { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 14px; } .card__footer .btn { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-green-action); transition: gap .15s ease, color .15s ease; } .link-arrow:hover { color: var(--color-purple-dark); gap: 10px; } /* Compare / servicios grids */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .compare-card h3 { margin-bottom: .3em; } .servicios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .servicio-item { text-align: center; padding: 20px; } .servicio-item__icon { font-size: 2.4rem; display: block; margin-bottom: .3em; } /* Talleres */ .talleres-grid, .blog-grid, .testimonios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .taller-card, .post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .taller-card .card__body, .post-card .card__body { display: flex; flex-direction: column; flex: 1; } .taller-card__media, .post-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .taller-card__media { aspect-ratio: 4/3; } .post-card__media { aspect-ratio: 16/9; } .taller-card__media img, .post-card__media img { width: 100%; height: 100%; object-fit: cover; } .taller-card__media--placeholder, .post-card__media--placeholder { background: linear-gradient(135deg, var(--color-sage-pale), var(--color-cream-alt)); } .taller-card .card__body, .post-card .card__body { padding: 20px; } .taller-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--color-green-action); margin-bottom: 6px; } .taller-card__precio { font-weight: 700; color: var(--color-purple-dark); } /* Meta de tarjetas de blog: categoría en pill + fecha */ .post-card__meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .post-card__category { background: var(--color-sage-pale); color: var(--color-green-action); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: 4px 12px; border-radius: 999px; } .post-card__date { font-size: .8rem; color: var(--color-text-soft); } .post-card__excerpt { color: var(--color-text-soft); font-size: .95rem; margin: 8px 0 0; } .post-card__footer { margin-top: auto; padding-top: 14px; } .post-card__readmore { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--color-green-action); transition: gap .15s ease; } .post-card__readmore:hover { color: var(--color-purple-dark); gap: 10px; } /* Badges */ .badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: #fff; } .taller-single .badge { position: static; display: inline-block; margin-bottom: 10px; } .estado-abiertas { background: var(--color-green-action); } .estado-proximamente { background: var(--color-purple); } .estado-completo { background: var(--color-purple-dark); } .estado-finalizado { background: #6E5F73; } /* Taller single */ .taller-single__hero { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } .taller-single__image { aspect-ratio: 21/9; border-radius: var(--radius-lg); overflow: hidden; margin-top: 32px; } .taller-single__image img { width: 100%; height: 100%; object-fit: cover; } .taller-single__layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding: 40px 24px 72px; align-items: start; } .taller-single__instructor { color: var(--color-text-soft); font-style: italic; } .taller-single__notas { background: var(--color-cream-alt); padding: 14px 18px; border-radius: var(--radius-sm); } .taller-info-card { position: sticky; top: 96px; } .taller-info-card p { margin-bottom: 14px; } .taller-info-card__precio-box { background: var(--color-sage-pale); border-radius: var(--radius-sm); padding: 16px 18px; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 2px; } .taller-info-card__precio-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-green-action); } .taller-info-card__precio { font-size: 1.6rem; font-weight: 700; font-family: var(--font-heading); color: var(--color-purple-dark); } /* Pricing block */ .pricing-block { max-width: 480px; margin: 64px auto 0; text-align: center; } .pricing-block__price { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--color-purple-dark); } .pricing-block__price span { font-size: 1rem; font-weight: 600; color: var(--color-text-soft); } .pricing-block__list { text-align: left; list-style: none; padding: 0; margin: 20px 0; } .pricing-block__list li { padding: 8px 0 8px 28px; position: relative; border-bottom: 1px solid var(--color-cream-alt); } .pricing-block__list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-green-action); font-weight: 700; } .pricing-block__note { font-size: .85rem; color: var(--color-text-soft); } /* Horario interactivo */ .horario-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 32px 0; } .chip { border: 1px solid var(--color-green-action); background: transparent; color: var(--color-purple-dark); padding: 8px 18px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .85rem; } .chip.is-active, .chip:hover { background: var(--color-purple-dark); color: #fff; border-color: var(--color-purple-dark); } .horario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .horario-day { background: #fff; border-radius: var(--radius-md); padding: 16px 12px; box-shadow: var(--shadow-soft); min-height: 160px; } .horario-day__title { text-align: center; font-size: 1rem; margin-bottom: 12px; } .horario-day__empty { text-align: center; color: var(--color-text-soft); } .horario-day__slots { display: flex; flex-direction: column; gap: 8px; } .horario-slot { display: flex; flex-direction: column; text-align: left; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: .82rem; background: var(--color-sage-pale); color: var(--color-text); transition: transform .12s ease; } .horario-slot:hover, .horario-slot:focus-visible { transform: scale(1.03); } .horario-slot { color: var(--color-green-action); } .horario-slot--posparto { background: #DDE7E1; color: var(--color-purple); } .horario-slot--mujer { background: var(--color-lilac-pale); color: #A063AE; } .horario-slot--especial { background: var(--color-gold-pale); color: #B5824A; } .horario-slot__hora, .horario-slot__titulo { color: var(--color-purple-dark); } .horario-slot__hora { font-weight: 800; color: var(--color-purple-dark); } .horario-slot__titulo { font-weight: 700; } .horario-slot__modalidad { font-size: .74rem; color: var(--color-text-soft); } .horario-slot__plazas-bar { display: block; width: 100%; height: 4px; border-radius: 999px; background: rgba(60,53,80,.12); margin-top: 8px; overflow: hidden; } .horario-slot__plazas-bar span { display: block; height: 100%; background: currentColor; border-radius: inherit; } .horario-slot__plazas-text { font-size: .72rem; color: var(--color-text-soft); margin-top: 4px; } .horario-slot.is-hidden { display: none; } .horario-detail { position: fixed; inset: 0; background: rgba(60,53,80,.45); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 20px; } .horario-detail[hidden] { display: none; } .horario-detail__card { max-width: 420px; width: 100%; position: relative; } .horario-detail__close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-text-soft); } /* Contacto */ .contacto-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; margin-top: 40px; } .contacto-form { display: flex; flex-direction: column; gap: 16px; } .contacto-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--color-purple-dark); font-size: .9rem; } .contacto-form input, .contacto-form textarea { font-family: var(--font-body); padding: 12px 14px; border-radius: var(--radius-sm); border: 2px solid var(--color-cream-alt); font-size: 1rem; background: var(--color-cream); } .contacto-form input:focus, .contacto-form textarea:focus { outline: none; border-color: var(--color-green-action); } .contacto-form .form-consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: .85rem; color: var(--color-text-soft); } .contacto-form .form-consent input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-green-action); } .contacto-form .form-consent a { text-decoration: underline; } .form-legal-info { font-size: .78rem; color: var(--color-text-soft); margin: 0; } .my-web { position: absolute; left: -9999px; } .contacto-info p { margin-bottom: 18px; } .contacto-info .btn { margin-bottom: 20px; } .contacto-map { border-radius: var(--radius-sm); overflow: hidden; } .contacto-map--bajo-demanda { background: var(--color-cream-alt); } .contacto-map__activar { width: 100%; min-height: 260px; border: 1px dashed rgba(60,53,80,.25); background: none; border-radius: var(--radius-sm); cursor: pointer; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-family: inherit; transition: background .15s ease; } .contacto-map__activar:hover { background: rgba(255,255,255,.6); } .contacto-map__icono { font-size: 1.8rem; } .contacto-map__titulo { font-weight: 700; color: var(--color-green-action); } .contacto-map__aviso { font-size: .85rem; color: var(--color-text-soft); max-width: 300px; } /* Landing de campaña: sin menú, secciones activables, CTA fijo opcional */ .landing-page { background: var(--color-cream); } .landing-header { display: flex; justify-content: center; padding: 28px 24px 0; } .landing-logo { max-height: 44px; width: auto; } .landing-nota { font-size: .85rem; color: var(--color-text-soft); margin: 14px 0 0; } .landing-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .landing-destacado { font-style: italic; color: #C46F60; } .landing-hero-media { border-radius: var(--radius-lg); overflow: hidden; } .landing-hero-media img, .landing-hero-media video { width: 100%; display: block; } .landing-hero-media--video { max-width: 340px; margin: 0 auto; aspect-ratio: 9/16; background: linear-gradient(135deg, var(--color-sage-pale), var(--color-cream-alt)); } .landing-hero-media--video video { height: 100%; object-fit: cover; } .landing-precio-sec { background: var(--color-green-deep); } .landing-precio-card { max-width: 760px; margin: 0 auto; text-align: center; padding: 36px 32px 40px; } .landing-oferta { background: var(--color-cream-alt); border-radius: var(--radius-sm); padding: 16px 20px; max-width: 420px; margin: 0 auto 22px; } .landing-oferta__texto { font-weight: 700; color: var(--color-purple-dark); margin: 0 0 8px; font-size: .9rem; } .landing-countdown { display: flex; justify-content: center; gap: 18px; } .landing-countdown span { display: flex; flex-direction: column; align-items: center; } .landing-countdown b { font-size: 1.5rem; font-family: var(--font-heading); color: var(--color-purple-dark); } .landing-countdown small { text-transform: uppercase; font-size: .65rem; letter-spacing: .05em; color: var(--color-text-soft); } .landing-precio-nombre { font-style: italic; margin-bottom: .3em; } .landing-precio-cifra { font-size: 2.2rem; font-family: var(--font-heading); color: var(--color-purple-dark); margin-bottom: 20px; } .landing-precio-cifra s { font-size: 1.2rem; color: var(--color-text-soft); margin-right: 12px; } .landing-incluye-titulo { font-weight: 700; color: var(--color-purple-dark); margin-bottom: 10px; } .landing-incluye { list-style: none; padding: 0; margin: 0 auto 26px; max-width: 420px; display: flex; flex-direction: column; gap: 10px; text-align: left; } .landing-incluye li { display: flex; gap: 10px; align-items: baseline; } .landing-trust { font-size: .85rem; font-weight: 600; color: var(--color-green-action); margin: 16px 0 0; } .etapas-online { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .etapas-online__item h3 { color: var(--color-green-action); margin-bottom: .4em; } .etapas-online__item p { color: var(--color-text-soft); margin: 0; } @media (max-width: 700px) { .etapas-online { grid-template-columns: 1fr; gap: 24px; } } .post-cierre { max-width: 760px; margin: 56px auto 72px; padding: 32px 34px 34px; background: var(--color-cream-alt); border-radius: var(--radius-lg); } .post-cierre h2 { font-size: 1.3rem; margin-bottom: .9em; } .post-cierre__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .post-cierre__lista a { font-weight: 700; display: block; } .post-cierre__lista span { color: var(--color-text-soft); font-size: .9rem; } .post-cierre__cta { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(60,53,80,.12); text-align: center; } .post-cierre__cta p { color: var(--color-text-soft); font-size: .95rem; margin-bottom: 1em; } .landing-form-card { max-width: 560px; margin: 0 auto; text-align: center; padding: 36px 32px 40px; } .landing-form-card h2 { margin-bottom: .3em; } .landing-form-texto { color: var(--color-text-soft); margin-bottom: 24px; } .landing-form { text-align: left; } .landing-frase-final { text-align: center; } .landing-frase-final p { font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; color: var(--color-purple-dark); max-width: 620px; margin: 0 auto; } .ty-main { max-width: 640px; margin: 0 auto; padding: 48px 24px 72px; text-align: center; } .ty-icono { font-size: 3.2rem; display: block; margin-bottom: 12px; } .ty-texto { text-align: left; margin-bottom: 28px; } .ty-pasos { background: var(--color-cream-alt); border-radius: var(--radius-sm); padding: 22px 26px; text-align: left; margin-bottom: 28px; } .ty-pasos__titulo { font-weight: 700; color: var(--color-purple-dark); margin-bottom: 10px; } .ty-pasos ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; } .landing-footer { border-top: 1px solid rgba(60,53,80,.1); padding: 20px 24px 28px; text-align: center; font-size: .8rem; color: var(--color-text-soft); } .landing-footer a { color: var(--color-text-soft); text-decoration: underline; } .landing-fixedbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 300; background: var(--color-purple-dark); color: #fff; display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 12px 20px; box-shadow: 0 -4px 16px rgba(60,53,80,.2); } .landing-fixedbar p { margin: 0; font-weight: 600; font-size: .95rem; } /* Botón de la barra en naranja de marca: destaca sobre el morado oscuro */ .landing-fixedbar .btn { background: var(--color-gold); color: var(--color-purple-dark); } .landing-fixedbar .btn:hover { background: #C08C4A; color: var(--color-purple-dark); } .has-fixedbar { padding-bottom: 76px; } @media (max-width: 640px) { .landing-fixedbar { flex-wrap: nowrap; justify-content: space-between; text-align: left; gap: 12px; padding: 13px 14px; } .landing-fixedbar p { font-size: .78rem; line-height: 1.3; } .landing-fixedbar .btn { padding: 10px 15px; font-size: .8rem; white-space: nowrap; flex-shrink: 0; } .has-fixedbar { padding-bottom: 72px; } } .btn--sage { background: var(--color-sage); color: var(--color-purple-dark); } .btn--sage:hover { background: #9FC4AC; color: var(--color-purple-dark); } @media (max-width: 860px) { .landing-hero-grid { grid-template-columns: 1fr; } .landing-hero-media--video { max-width: 280px; } } /* Taller con inscripciones abiertas: borde verde y sombra para destacar sobre el resto */ .taller-card--abierto { border: 2px solid var(--color-green-action); box-shadow: var(--shadow-soft); } .contacto-bloque__titulo { font-size: 1.3rem; margin-bottom: 1em; } .contacto-faq { margin-top: 64px; } .contacto-faq h2 { text-align: center; margin-bottom: 1.2em; } .contacto-llegar { text-align: center; margin-top: 64px; } .contacto-llegar h2 { font-size: 1.5rem; margin-bottom: .6em; } .contacto-llegar p { max-width: 640px; margin: 0 auto 20px; } .contacto-llegar .btn { margin-top: 8px; } .colaboracion-card { max-width: 900px; margin: 48px auto 0; text-align: center; border-top: 3px solid var(--color-green-action); } .colaboracion-card h2 { margin-top: .2em; } .colaboracion-card p { max-width: 680px; margin: 0 auto 22px; color: var(--color-text-soft); } .btn--gold { background: var(--color-gold-pale); color: var(--color-purple-dark); } .btn--gold:hover { background: var(--color-gold); color: var(--color-purple-dark); } .form-error { background: #FDECEA; border-left: 4px solid #B3261E; color: #7A1C16; padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 18px; } .form-success { background: var(--color-cream-alt); padding: 20px; border-radius: var(--radius-sm); font-weight: 700; color: var(--color-purple-dark); } /* Biblioteca de maternidad */ .biblioteca__layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; max-width: 1020px; margin: 0 auto; background: var(--color-cream); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-soft); } .biblioteca__text { display: flex; flex-direction: column; justify-content: center; } .biblioteca__text p:last-child { margin-bottom: 0; } .biblioteca__nota { font-weight: 600; color: var(--color-purple-dark); } .biblioteca__precio { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--color-purple-dark); margin-bottom: 6px; } .biblioteca__precio span { font-size: 1rem; font-weight: 600; font-family: var(--font-body); color: var(--color-text-soft); } .biblioteca__media { border-radius: var(--radius-md); overflow: hidden; } .biblioteca__media img { width: 100%; height: 100%; object-fit: cover; } .biblioteca__layout .carrusel { box-shadow: 0 6px 18px rgba(60,53,80,.12); width: 100%; } /* Comunidad */ .comunidad { background: var(--color-purple-dark); color: #fff; } .comunidad .section-header { max-width: 680px; } .comunidad__title, .comunidad .section-header h2 { color: #fff; } .comunidad__highlight { color: var(--color-gold); font-style: italic; } .comunidad__lead { color: #ECEBEE; } .comunidad__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; margin: 0 auto; } .comunidad__card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .comunidad__card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; } .comunidad__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #fff; } .comunidad__icon--whatsapp { background: #25D366; } .comunidad__icon--facebook { background: #1877F2; } .comunidad__icon--youtube { background: #FF0000; } .comunidad__icon--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .comunidad__card-text { display: flex; flex-direction: column; gap: 2px; } .comunidad__card-text span:last-child { font-size: .85rem; color: #D8D7DC; font-weight: 400; } .comunidad__card-text strong, .comunidad__card-text span:first-child { color: #fff; } /* Carrusel de capturas de la plataforma (home, sección yoga online) */ .carrusel { position: relative; overflow: hidden; border-radius: var(--radius-md); background: #fff; align-self: center; } .carrusel__track { display: flex; transition: transform .4s ease; } .carrusel__slide { flex: 0 0 100%; aspect-ratio: 1500 / 773; display: flex; align-items: center; justify-content: center; } .carrusel__slide img { width: 100%; height: 100%; object-fit: contain; } .carrusel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: var(--color-purple-dark); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: background .15s ease; } .carrusel__btn:hover { background: var(--color-purple-dark-hover); } .carrusel__btn--prev { left: 12px; } .carrusel__btn--next { right: 12px; } .carrusel__dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; z-index: 2; } .carrusel__dots button { width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(60,53,80,.25); transition: background .15s ease; position: relative; } /* El punto se ve pequeño, pero el área pulsable se amplía con un pseudoelemento para que el dedo lo acierte sin separar visualmente los puntos entre sí */ .carrusel__dots button::after { content: ''; position: absolute; inset: -11px; } .carrusel__dots button[aria-selected="true"] { background: var(--color-purple-dark); } /* Variante ancha (página Yoga online): centrada, con sombra de tarjeta */ .carrusel--ancho { max-width: 1000px; margin: 0 auto; box-shadow: var(--shadow-soft); } /* Página tipo de clase (prenatal/posparto) */ .clase-hero { padding-top: 48px; } /* En este hero el texto manda: columna de texto más ancha que la imagen */ .clase-hero .two-col { grid-template-columns: 1.2fr .8fr; } .clase-hero__lead { font-size: 1.05rem; color: var(--color-text-soft); } .hero-highlights { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; } .hero-highlights li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; } .hero-highlights__icon { font-size: 1.2rem; line-height: 1; flex: none; } .beneficios-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; max-width: 860px; margin: 0 auto; } .beneficios-grid li { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; } .beneficios-grid__check { color: var(--color-green-action); font-weight: 800; flex: none; } .quien-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; gap: 24px; } /* Con exactamente 4 tarjetas se reparten 2 y 2: en 3 columnas la cuarta quedaba huérfana */ .quien-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(240px, 320px)); } .quien-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 28px 24px; text-align: center; } .quien-card__icon { display: block; font-size: 2.2rem; margin-bottom: 12px; } .quien-card h3 { font-size: 1.05rem; margin-bottom: 8px; } .quien-card p { color: var(--color-text-soft); font-size: .92rem; margin: 0; } /* Solo centra: si usara el atajo `margin` borraría el margen vertical de las clases que se combinen con ella en el mismo elemento */ .section--narrow-inner { max-width: 760px; margin-left: auto; margin-right: auto; } /* Página "Sobre mí" */ .sobre-mi-hero { text-align: center; padding-bottom: 0; } .sobre-mi-hero__collage { display: block; width: 100%; max-width: 774px; height: auto; margin: 0 auto 40px; } .sobre-mi-hero h1 { font-style: italic; max-width: 820px; margin: 0 auto; } .sobre-mi-hero__label { margin: 18px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-green-action); } .sobre-mi-card { max-width: 780px; margin: 0 auto; padding: 48px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .sobre-mi-card h2 { font-style: italic; font-size: 1.3rem; color: var(--color-purple); margin: 0 0 .5em; } .sobre-mi-card h2:not(:first-child) { margin-top: 1.5em; } .sobre-mi-card blockquote { background: var(--color-cream-alt); border-radius: var(--radius-md); padding: 24px 28px; margin: 1.6em 0 0; font-style: italic; font-weight: 600; color: var(--color-purple-dark); text-align: center; } .sobre-mi-card blockquote p { margin: 0; } .sobre-mi-outro { background: var(--color-green-action); color: #fff; border-radius: var(--radius-lg); max-width: 780px; margin: 40px auto 0; padding: 56px 40px; text-align: center; } .sobre-mi-outro__icon { display: inline-flex; } .sobre-mi-outro__icon img { width: 56px; height: 56px; } .sobre-mi-outro h2 { font-style: italic; color: #fff; margin: 16px 0 12px; } .sobre-mi-outro p { color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: #fff; border-radius: var(--radius-sm); padding: 18px 22px; box-shadow: var(--shadow-soft); } .faq-item summary { font-weight: 700; color: var(--color-purple-dark); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; color: var(--color-green-action); flex: none; transition: transform .2s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { margin: 12px 0 0; color: var(--color-text-soft); } /* Post individual del blog — fondo blanco para mejor lectura */ body.single-post { background: #fff; } .post-hero { padding: 40px 0 0; border-bottom: 1px solid var(--color-cream-alt); } .post-hero__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-bottom: 40px; } .post-breadcrumb { font-size: .85rem; color: var(--color-text-soft); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; } .post-breadcrumb a { color: var(--color-text-soft); } .post-breadcrumb a:hover { color: var(--color-purple-dark); } .post-hero__meta { color: var(--color-text-soft); font-size: .9rem; } .post-hero__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; } .post-hero__media img { width: 100%; height: 100%; object-fit: cover; } .post-single__layout { display: grid; grid-template-columns: 300px 1fr; gap: 56px; padding: 48px 0; align-items: start; } .post-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; } .post-author-card { display: flex; align-items: center; gap: 14px; padding: 20px; } .post-author-card__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .post-author-card strong { display: block; color: var(--color-purple-dark); } .post-author-card p { margin: 2px 0 0; font-size: .85rem; color: var(--color-text-soft); } .post-toc-card { padding: 20px; } .post-toc-card h2 { font-size: 1rem; margin-bottom: 12px; } .post-toc-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .post-toc-card__item a { font-size: .88rem; color: var(--color-text-soft); } .post-toc-card__item a:hover { color: var(--color-purple-dark); } .post-toc-card__item--h3 { padding-left: 14px; } .post-content { max-width: 680px; } .post-content :is(h2, h3) { scroll-margin-top: 96px; } /* Testimonios */ .testimonio-card__estrellas { color: var(--color-gold); letter-spacing: 2px; margin-bottom: 8px; } .testimonio-card__texto { font-style: italic; font-size: 1.05rem; } .testimonio-card__autor { font-weight: 700; color: var(--color-purple-dark); margin-bottom: 0; } .testimonio-card__rol { font-size: .85rem; color: var(--color-text-soft); } /* Página Yoga online — pasos "cómo funciona" */ .pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; } .pasos-grid__item { text-align: center; } .pasos-grid__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: var(--color-green-action); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; } .pasos-grid__item h3 { margin-bottom: 8px; } .pasos-grid__item p { color: var(--color-text-soft); font-size: .95rem; margin: 0; } /* CTA final */ .cta-final__inner { text-align: center; max-width: 560px; margin: 0 auto; } /* Footer */ .site-footer { background: var(--color-purple-dark); color: var(--color-cream); margin-top: 40px; } .footer__inner { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 40px; padding: 60px 24px; } .site-brand__name--footer { color: #fff; font-size: 1.5rem; } .footer__brand p { color: #C9B9CE; margin-top: 10px; } .footer__social { display: flex; gap: 10px; margin-top: 14px; } .footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 700; } .footer__social a:hover { background: var(--color-green-action); border-color: var(--color-green-action); text-decoration: none; } .footer__nav-col .footer__nav-title { color: var(--color-sage); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-body); font-weight: 700; margin-bottom: 16px; } .footer__nav-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer__nav-col a, .footer__contact a { color: var(--color-cream); } .footer__contact p { margin-bottom: 14px; font-size: .9rem; } .footer__contact strong { color: #fff; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.15); } .footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 24px; font-size: .8rem; color: #C9B9CE; } .footer__legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer__legal a { color: #C9B9CE; font-size: .8rem; } .footer__legal a:hover { color: #fff; } /* WhatsApp float */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); z-index: 150; } .whatsapp-float { transition: transform .2s ease; } .whatsapp-float:hover { transform: scale(1.06); text-decoration: none; } /* ========================================================================== Animaciones — ligeras, basadas en CSS + IntersectionObserver, sin librerías ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Aparición al hacer scroll (la clase .js-reveal la añade main.js) */ .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.25,.7,.35,1), transform .7s cubic-bezier(.25,.7,.35,1); } .js-reveal.is-visible { opacity: 1; transform: none; } .js-reveal:nth-child(2) { transition-delay: .08s; } .js-reveal:nth-child(3) { transition-delay: .16s; } .js-reveal:nth-child(4) { transition-delay: .24s; } .js-reveal:nth-child(5) { transition-delay: .32s; } .js-reveal:nth-child(6) { transition-delay: .4s; } /* Entrada del hero al cargar la página (no depende de JS) */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hero__content > *, .clase-hero .two-col__text > * { animation: heroFadeUp .7s cubic-bezier(.25,.7,.35,1) both; } .hero__content > *:nth-child(1), .clase-hero .two-col__text > *:nth-child(1) { animation-delay: 0s; } .hero__content > *:nth-child(2), .clase-hero .two-col__text > *:nth-child(2) { animation-delay: .1s; } .hero__content > *:nth-child(3), .clase-hero .two-col__text > *:nth-child(3) { animation-delay: .2s; } .hero__content > *:nth-child(4), .clase-hero .two-col__text > *:nth-child(4) { animation-delay: .3s; } .hero__content > *:nth-child(5), .clase-hero .two-col__text > *:nth-child(5) { animation-delay: .4s; } /* Lift sutil en tarjetas al pasar el ratón */ .taller-card, .post-card, .testimonio-card, .quien-card, .compare-card { transition: transform .25s ease, box-shadow .25s ease; } .taller-card:hover, .post-card:hover, .testimonio-card:hover, .quien-card:hover, .compare-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(60,53,80,.14); } /* Barra de plazas libres: se rellena al aparecer en pantalla */ .horario-slot__plazas-bar span { transition: width .8s cubic-bezier(.25,.7,.35,1); } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 960px) { /* .clase-hero .two-col listado aparte: su regla de proporción 1.2fr/.8fr tiene especificidad 0,2,0 y sin esto seguiría en dos columnas en móvil */ .hero__inner, .two-col, .two-col--reverse, .clase-hero .two-col { grid-template-columns: 1fr; } .two-col__media, .two-col--reverse .two-col__media { order: -1; } .compare-grid, .servicios-grid, .talleres-grid, .blog-grid, .testimonios-grid { grid-template-columns: repeat(2, 1fr); } .biblioteca__layout { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .post-hero__layout { grid-template-columns: 1fr; } .post-hero__media { order: -1; } .post-single__layout { grid-template-columns: 1fr; } .post-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .post-sidebar .card { flex: 1; min-width: 220px; } .taller-single__layout { grid-template-columns: 1fr; } .taller-info-card { position: static; } .contacto-layout { grid-template-columns: 1fr; } .footer__inner { grid-template-columns: 1fr 1fr; } .quien-grid { grid-template-columns: 1fr; } .pasos-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1040px) { .nav-toggle-btn { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 6px; position: relative; z-index: 210; } .nav-toggle-btn span { width: 26px; height: 3px; background: var(--color-purple-dark); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; } .nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* El panel de fondo es morado oscuro: la "X" tiene que verse en blanco, no en morado */ .nav-toggle-checkbox:checked ~ .nav-toggle-btn span { background: #fff; } .primary-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: fixed; inset: 0; background: var(--color-purple-dark); padding: 76px 32px 32px; overflow-y: auto; z-index: 200; transform: translateX(100%); transition: transform .3s ease; } .nav-toggle-checkbox:checked ~ .primary-nav { transform: translateX(0); } .primary-menu { flex-direction: column; gap: 14px; width: 100%; } /* Objetivo táctil cómodo: mínimo 44px de alto por enlace (WCAG 2.5.5) */ .primary-menu a { color: #fff; font-size: 1.1rem; white-space: normal; min-height: 44px; display: flex; align-items: center; padding: 4px 0; } .primary-menu .sub-menu a { min-height: 40px; } /* La flechita decorativa de escritorio sobra: en móvil manda el botón de desplegar */ .primary-menu .dropdown-arrow { display: none; } /* Cada item con hijos es una fila: enlace a la izquierda, botón de desplegar a la derecha */ .primary-menu .menu-item-has-children > a { flex: 1; } .primary-menu .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .primary-menu .menu-item-has-children > .sub-menu { flex-basis: 100%; } .submenu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 0; } .submenu-toggle::before { content: ''; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; } .submenu-toggle[aria-expanded="true"]::before { transform: rotate(225deg) translate(-2px, -2px); } /* Especificidad igual (o mayor) que la regla de :hover de escritorio, para que un :focus por toque en móvil no reintroduzca el transform de centrado de escritorio (causaba un salto/"efecto raro") */ .primary-menu .sub-menu, .primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; background: transparent; padding: 6px 0 0 16px; margin: 4px 0 0; border-left: 2px solid rgba(255,255,255,.2); } /* Plegados por defecto: solo se abre el que la usuaria despliega */ .primary-menu li.submenu-abierto > .sub-menu, .primary-menu li.submenu-abierto:hover > .sub-menu { display: block; } .primary-menu .sub-menu a { color: rgba(255,255,255,.85); font-size: 1rem; padding: 4px 0; } .primary-menu .sub-menu a:hover { background: transparent; color: #fff; } .nav-login { background: #fff; color: var(--color-purple-dark); border-color: #fff; margin-top: 10px; } .nav-login:hover { background: var(--color-cream-alt); } /* En móvil la barra ocupaba 30px arriba y abajo: se recorta para ganar pantalla, manteniendo el botón del menú por encima de los 44px táctiles */ .site-header__inner { position: relative; padding: 12px 20px; } .site-logo-img { max-height: 38px; } } @media (max-width: 640px) { .servicios-grid, .compare-grid, .talleres-grid, .blog-grid, .testimonios-grid, .footer__inner { grid-template-columns: 1fr; } .comunidad__grid { grid-template-columns: 1fr; } .beneficios-grid { grid-template-columns: 1fr; } .pasos-grid { grid-template-columns: 1fr; } .horario-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .section { padding-top: 48px; padding-bottom: 48px; } .hero__content { padding: 72px 20px; } /* Con .site-footer delante para ganar a la regla .container de la MQ de 480px, que va después en el archivo y dejaba el footer sin padding vertical en móvil */ .site-footer .footer__inner { padding: 80px 24px 56px; gap: 40px; } .site-footer .footer__bottom-inner { flex-direction: column; gap: 12px; text-align: center; padding: 32px 24px 40px; font-size: .87rem; } /* Suelo de legibilidad en móvil: nada por debajo de ~13px */ .footer__legal a, .footer__nav-col .footer__nav-title, .form-legal-info, .landing-nota, .eyebrow { font-size: .87rem; } .footer__legal { gap: 14px; } .footer__legal a, .footer__nav-col a, .footer__contact a { display: inline-block; padding: 3px 0; } } @media (max-width: 480px) { .container { padding-left: 18px; padding-right: 18px; } .section--narrow { padding: 40px 18px; } .card { padding: 20px; } .hero__content { padding: 64px 18px; } .sobre-mi-card { padding: 28px 22px; } .sobre-mi-outro { padding: 36px 24px; } .biblioteca__layout { padding: 18px; gap: 18px; } } /* El banner de cookies lo pinta un tercero (Nivara): su enlace no llegaba al contraste mínimo, así que se fuerza el verde de marca, que sí lo cumple. */ .nivara-inline-link, .nivara-banner a { color: var(--color-green-action) !important; text-decoration: underline; }