/* ========================================================================= Me Amo Clinic — Hoja de estilos principal Paleta: blanco + dorado · Tipografía: Inter · Mobile-first Los tokens viven en :root para re-tematizar y escalar a multipágina. ========================================================================= */ /* ---------------------------------------------------------------------- 1. Tokens de diseño ---------------------------------------------------------------------- */ :root { color-scheme: light; /* Color — base blanca, acento dorado */ --color-bg: #f6efe2; /* perla cremosa / beige cálido (cliente NO quiere blanco) */ --color-bg-soft: #efe6d4; /* beige más profundo para secciones alternas */ --color-bg-dark: #1c1a17; /* footer / contraste */ --color-text: #1f1d1a; /* casi negro cálido */ --color-text-soft: #5c5852; --color-line: #e2d8c5; /* hairline cálido sobre beige */ --header-bg: #f6efe2; /* navbar opaca, igual que el fondo */ /* Oro real — más saturado y metálico */ --color-gold: #caa53a; /* dorado principal, más oro */ --color-gold-deep: #846617; /* dorado oscuro para texto/contraste AA sobre blanco */ --color-gold-soft: #f6edcf; /* dorado muy claro para fondos */ /* Gradiente metálico vertical para texto sobre BLANCO: más oscuro para que incluso la banda brillante mantenga contraste (legibilidad). */ --gold-metallic: linear-gradient(180deg, #6f5413 0%, #b08c2c 30%, #c7a039 47%, #997726 62%, #604811 100%); --gold-btn: linear-gradient(160deg, #e4c465 0%, #c5a035 46%, #a07d24 100%); --gold-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18); /* Oro pulido suave: bandas claro/oscuro a 45° pero con menos contraste, sin reflejos casi-blancos → metal más sobrio, menos agresivo */ --gold-polished: linear-gradient(45deg, #ad8c36 0%, #d8bd6a 28%, #c4a043 50%, #ddc174 64%, #b8942f 84%, #c9a648 100%); --gold-ink: #2c2109; /* texto oscuro grabado sobre el metal claro */ /* Tipografía */ --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Serif de acento para palabras destacadas y pequeños títulos. Cambiar aquí para probar otra (p. ej. "Fraunces", "Cormorant Garamond"). */ --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.5rem; /* 24px */ --fs-xl: 2rem; /* 32px */ --fs-2xl: 2.75rem; /* 44px */ --fs-3xl: 3.5rem; /* 56px */ /* Espaciado y formas */ --space-section: 5rem; --radius: 14px; --radius-lg: 24px; --maxw: 1140px; --shadow: 0 18px 50px -24px rgba(40, 33, 18, 0.35); --shadow-soft: 0 8px 30px -18px rgba(40, 33, 18, 0.28); --transition: 200ms ease; /* Grano fino (arena/perla) — turbulencia SVG en escala de grises, se tiñe por blend. Sin colores hex dentro → sin problemas de codificación. */ --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------------- 1b. Modo oscuro — fondo negro, textos invertidos, oro más luminoso. El tema lo fija `data-theme` en (script en , respeta el sistema y guarda la preferencia). Tokens iguales → resto del CSS no cambia. ---------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0d0c0a; /* negro cálido */ --color-bg-soft: #15130f; /* secciones alternas */ --color-bg-dark: #060504; /* footer aún más oscuro */ --color-text: #f4efe4; /* blanco roto cálido */ --color-text-soft: #a9a294; --color-line: #2b2720; --header-bg: #0d0c0a; /* navbar opaca (oscuro) */ /* Oro más luminoso para destacar sobre negro */ --color-gold: #e7c463; --color-gold-deep: #e7c463; /* en oscuro el "deep" debe ser claro, no oscuro */ --color-gold-soft: #2a2310; /* superficie con tinte oro */ --gold-metallic: linear-gradient(180deg, #c79f3b 0%, #f0d27c 30%, #fff0b8 48%, #d9b452 64%, #a9842c 100%); --gold-btn: linear-gradient(160deg, #f0d075 0%, #d2ad42 46%, #a9842c 100%); --shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.75); --shadow-soft: 0 10px 34px -18px rgba(0, 0, 0, 0.6); } /* ---------------------------------------------------------------------- 2. Reset ligero y base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fondo perlado con relieve natural (solo tema claro): blooms cálidos + grano fino. El blanco plano resultaba soso; estas capas dan profundidad tipo arena/perla. */ :root:not([data-theme="dark"]) body { background-color: var(--color-bg); background-image: radial-gradient(135% 110% at 6% -5%, rgba(255, 252, 245, 0.9), rgba(255, 252, 245, 0) 52%), radial-gradient(120% 100% at 96% 6%, rgba(232, 216, 176, 0.38), rgba(232, 216, 176, 0) 55%), radial-gradient(130% 120% at 50% 106%, rgba(212, 195, 158, 0.32), rgba(212, 195, 158, 0) 60%); background-attachment: fixed; background-repeat: no-repeat; } /* Capa de grano por encima de los blooms, debajo del contenido (soft-light = textura sin ensuciar el color). */ :root:not([data-theme="dark"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--grain); background-size: 200px 200px; opacity: 0.55; mix-blend-mode: soft-light; pointer-events: none; } /* Las secciones "soft" claras dejan de ser planas: leve veladura perlada. */ :root:not([data-theme="dark"]) .section--soft { background-color: var(--color-bg-soft); background-image: radial-gradient(120% 150% at 100% 0%, rgba(255, 251, 242, 0.65), transparent 55%), radial-gradient(120% 150% at 0% 100%, rgba(205, 188, 149, 0.28), transparent 55%); } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; } :focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------------- 3. Utilidades de layout ---------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: var(--space-section); } .section--soft { background: var(--color-bg-soft); } /* Compensa el header sticky al saltar por anclas */ .hero, .section { scroll-margin-top: 88px; } .eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-deep); margin-bottom: 0.75rem; } .section__head { max-width: 640px; margin-bottom: 3rem; } .section__title { font-size: var(--fs-xl); margin-bottom: 0.75rem; } .section__lead { font-size: var(--fs-md); color: var(--color-text-soft); } /* Skip link accesible */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-bg-dark); color: #fff; padding: 0.75rem 1rem; z-index: 100; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ---------------------------------------------------------------------- 4. Botones ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; /* texto centrado aunque el botón se estire (p. ej. en el form) */ gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; padding: 0.85rem 1.6rem; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn--gold { position: relative; overflow: hidden; isolation: isolate; background-color: var(--color-gold); background-image: var(--gold-polished); color: var(--gold-ink); border-color: rgba(0, 0, 0, 0.14); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: var(--gold-sheen), 0 3px 8px -2px rgba(50, 38, 8, 0.4); } /* Barrido de brillo en hover — destello que cruza el metal */ .btn--gold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%); transform: translateX(-120%); transition: transform 650ms ease; } .btn--gold:hover { transform: translateY(-2px); box-shadow: var(--gold-sheen), 0 6px 16px -4px rgba(50, 38, 8, 0.45); } .btn--gold:hover::before { transform: translateX(120%); } .btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-line); } .btn--ghost:hover { border-color: var(--color-gold); color: var(--color-gold-deep); } /* ---------------------------------------------------------------------- 5. Header / navegación (responsive sin JS) ---------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); /* opaco: no transparenta el contenido al hacer scroll */ } .nav { display: flex; align-items: center; gap: 1rem; min-height: 72px; } .logo { margin-right: auto; } /* empuja links y controles a la derecha */ /* Botón de modo oscuro/claro */ .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-line); background: transparent; color: var(--color-text); cursor: pointer; flex: none; transition: var(--transition); } .theme-toggle:hover { border-color: var(--color-gold); color: var(--color-gold-deep); } .theme-toggle svg { width: 19px; height: 19px; display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Logo: imagen del logotipo Me Amo Clinic (PNG con transparencia) */ .logo { display: inline-flex; align-items: center; } .logo__img { height: 40px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: 1.75rem; list-style: none; padding: 0; } .nav__links a { font-size: var(--fs-sm); color: var(--color-text-soft); transition: var(--transition); } .nav__links a:hover { color: var(--color-text); } .nav__links a[aria-current="page"] { color: var(--color-text); font-weight: 600; } /* Ítem de nav no clicable (p. ej. "Blog" pendiente de publicar) */ .nav__soon { font-size: var(--fs-sm); color: var(--color-text-soft); cursor: default; user-select: none; display: inline-flex; align-items: center; gap: 0.45rem; } .nav__badge { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--color-gold-deep); white-space: nowrap; } /* Desplegable de "Tratamientos" (hover en escritorio, expandido en móvil) */ .nav__has-sub { position: relative; } .nav__caret { width: 16px; height: 16px; margin-left: 0.3rem; vertical-align: -3px; opacity: 0.8; transition: transform var(--transition); } .nav__has-sub:hover .nav__caret, .nav__has-sub:focus-within .nav__caret { transform: rotate(180deg); } .nav__sub { position: absolute; top: 100%; left: -0.75rem; margin-top: 0.55rem; /* siempre separado de la navbar */ display: none; gap: 0.15rem; grid-template-columns: repeat(3, minmax(118px, max-content)); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.5rem; } .nav__sub::before { /* puente invisible: no se pierde el hover en el hueco */ content: ""; position: absolute; top: -0.55rem; left: 0; right: 0; height: 0.55rem; } .nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { display: grid; } .nav__sub-col { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.35rem 0.4rem; border-radius: 10px; transition: var(--transition); } .nav__sub-col:hover { background: var(--color-bg-soft); } /* hover de toda la tarjeta */ /* (scope .nav__sub para ganar a `.nav__links a`) */ .nav__sub .nav__sub-head { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--color-text); padding: 0.4rem 0.55rem; } .nav__sub .nav__sub-head:hover { color: var(--color-gold-deep); } .nav__sub .nav__sub-link { display: block; padding: 0.35rem 0.55rem; border-radius: 8px; font-size: var(--fs-sm); color: var(--color-text-soft); } .nav__sub .nav__sub-link:hover { background: var(--color-gold-soft); color: var(--color-text); } /* hover individual */ @media (max-width: 719px) { .nav__sub { position: static; display: grid; grid-template-columns: 1fr; min-width: 0; margin-top: 0; border: 0; box-shadow: none; background: transparent; padding: 0 0 0.5rem 0.6rem; } .nav__caret { display: none; } .nav__sub-col:hover { background: transparent; } } /* El CTA del nav es un botón metálico: forzar el mismo tono de tinta que el del hero (gana en especificidad a `.nav__links a`, que si no lo pinta apagado). */ .nav__links .btn--gold, .nav__links .btn--gold:hover { color: var(--gold-ink); } .nav__cta { display: inline-flex; } /* CTA del header más bajo que un botón normal (menos alto) */ .nav__cta .btn { padding-block: 0.55rem; } /* Toggle (checkbox hack) — oculto en escritorio */ .nav__toggle, .nav__toggle-label { display: none; } /* ---------------------------------------------------------------------- 6. Hero ---------------------------------------------------------------------- */ .hero { position: relative; background: var(--color-bg); padding-block: 4.5rem 5rem; } .hero__inner { display: grid; gap: 2.5rem; align-items: center; } .hero__title { font-size: var(--fs-2xl); margin-bottom: 1.25rem; } /* Palabra destacada en serif italic con oro metálico (clip de texto) */ .hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-gold-deep); /* fallback si no hay background-clip */ background-image: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__lead { font-size: var(--fs-md); color: var(--color-text-soft); max-width: 48ch; margin-bottom: 2rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero__note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Tarjeta visual del hero (placeholder de imagen) */ .hero__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-gold-soft), var(--color-bg)); border: 1px solid var(--color-line); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--color-gold-deep); text-align: center; padding: 2rem; } .hero__media span { font-size: var(--fs-sm); opacity: 0.7; } /* Imagen real dentro de las tarjetas visuales (hero + filosofía) */ .hero__media, .philosophy__media { overflow: hidden; padding: 0; } .hero__media > img, .philosophy__media > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Retrato (fundadora) — más alto que cuadrado para encuadrar a la persona */ .philosophy__media--portrait { aspect-ratio: 3 / 4; } /* Apaisada (instalaciones) — encuadre hacia abajo para recortar techo/aire de la parte alta */ .philosophy__media.philosophy__media--wide { aspect-ratio: 9 / 8; } .philosophy__media--wide > img { object-position: center top; transform: scale(1.06); transform-origin: right top; } /* Foto de fachada en la sección de mapa (contacto) */ .storefront { margin: 0 0 2.5rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-line); } .storefront img { width: 100%; height: auto; display: block; aspect-ratio: 6 / 5; object-fit: cover; object-position: center top; transform: scale(1.06); transform-origin: right top; } .storefront figcaption { margin-top: 0.85rem; font-size: var(--fs-sm); color: var(--color-text-soft); text-align: center; } /* ---------------------------------------------------------------------- 7. Franja de confianza ---------------------------------------------------------------------- */ .trust { display: flex; flex-wrap: wrap; justify-content: center; /* bullets centrados horizontalmente en la página */ gap: 1.5rem 3rem; margin-top: 3.5rem; padding-block: 2rem; border-block: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-text-soft); } .trust span { display: inline-flex; align-items: center; gap: 0.6rem; } .trust span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); } /* ---------------------------------------------------------------------- 8. Tratamientos (grid de tarjetas) ---------------------------------------------------------------------- */ .cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } .card { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.75rem; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); border-color: var(--color-gold-soft); } /* Tarjeta como enlace (home → grupo de tratamientos) con flecha dorada */ a.card { text-decoration: none; color: inherit; cursor: pointer; } a.card::after { content: "→"; position: absolute; right: 1.6rem; bottom: 1.4rem; font-size: 1.15rem; color: var(--color-gold-deep); opacity: 0; transform: translateX(-5px); transition: var(--transition); } a.card:hover::after, a.card:focus-visible::after { opacity: 1; transform: translateX(0); } a.card:hover .card__title, a.card:focus-visible .card__title { color: var(--color-gold-deep); } a.card:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; } /* Acento editorial dorado en lugar de icono decorativo */ .card__title { font-size: var(--fs-md); margin-bottom: 0.5rem; } .card__title::before { content: ""; display: block; width: 34px; height: 2px; background: var(--color-gold); margin-bottom: 1.1rem; } .card__text { font-size: var(--fs-sm); color: var(--color-text-soft); margin-bottom: 1.25rem; } .card__list { list-style: none; padding: 1.25rem 0 0; margin: 0; border-top: 1px solid var(--color-line); font-size: var(--fs-sm); color: var(--color-text-soft); } .card__list li { padding-left: 1.4rem; position: relative; margin-bottom: 0.55rem; } .card__list li:last-child { margin-bottom: 0; } .card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-gold); font-weight: 700; } /* ---------------------------------------------------------------------- 9. Filosofía (split texto) ---------------------------------------------------------------------- */ .philosophy__grid { display: grid; gap: 2.5rem; align-items: center; } .philosophy__media { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-bg), var(--color-gold-soft)); border: 1px solid var(--color-line); display: grid; place-items: center; color: var(--color-gold-deep); font-size: var(--fs-sm); opacity: 0.95; } .philosophy blockquote { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 1.5rem; } .philosophy blockquote span { font-style: italic; color: var(--color-gold-deep); /* fallback */ background-image: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------------------------------------------------------------------- 10. Proceso (pasos numerados) ---------------------------------------------------------------------- */ .steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; } .step { position: relative; padding-left: 3.5rem; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--color-gold); color: var(--color-gold-deep); display: grid; place-items: center; font-weight: 700; } .step h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; } .step p { font-size: var(--fs-sm); color: var(--color-text-soft); } /* ---------------------------------------------------------------------- 11. Testimonios — carrusel coverflow (centro + una a cada lado) ---------------------------------------------------------------------- */ .reviews { overflow: hidden; } .reviews__viewport { position: relative; width: 100%; margin-top: 2.75rem; } .reviews__stage { --rev-gap: clamp(150px, 23vw, 280px); position: relative; height: 360px; max-width: var(--maxw); margin-inline: auto; perspective: 1400px; transform-style: preserve-3d; } .review-card { position: absolute; top: 50%; left: 50%; width: min(440px, 84vw); min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; padding: 2rem 2.1rem; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; transform-origin: center center; transition: transform 440ms cubic-bezier(.4, 0, .2, 1), opacity 440ms ease; will-change: transform, opacity; } /* posición por defecto (oculta) — todas llevan data-pos */ .review-card[data-pos] { transform: translate(-50%, -50%) scale(.7); opacity: 0; z-index: 0; pointer-events: none; } .review-card[data-pos="center"] { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; pointer-events: auto; } .review-card[data-pos="left"] { transform: translate(calc(-50% - var(--rev-gap)), -50%) scale(.82) rotateY(26deg); opacity: .5; z-index: 2; } .review-card[data-pos="right"] { transform: translate(calc(-50% + var(--rev-gap)), -50%) scale(.82) rotateY(-26deg); opacity: .5; z-index: 2; } .review-card[data-pos="far-left"] { transform: translate(calc(-50% - var(--rev-gap) * 1.65), -50%) scale(.6) rotateY(30deg); opacity: 0; z-index: 1; } .review-card[data-pos="far-right"] { transform: translate(calc(-50% + var(--rev-gap) * 1.65), -50%) scale(.6) rotateY(-30deg); opacity: 0; z-index: 1; } .review-card__stars { color: var(--color-gold); letter-spacing: 3px; font-size: var(--fs-sm); } .review-card__text { font-size: var(--fs-md); line-height: 1.55; margin: 0; color: var(--color-text); } .review-card__author { font-style: normal; font-weight: 600; font-size: var(--fs-sm); color: var(--color-text); } .review-card__author small { display: block; font-weight: 400; color: var(--color-text-soft); margin-top: .15rem; } /* flechas en los extremos horizontales */ .reviews__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-gold-deep); box-shadow: var(--shadow-soft); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); } .reviews__arrow svg { width: 24px; height: 24px; } .reviews__arrow--prev { left: clamp(.4rem, 2vw, 1.5rem); } .reviews__arrow--next { right: clamp(.4rem, 2vw, 1.5rem); } .reviews__arrow:hover { background: var(--gold-polished); color: var(--gold-ink); border-color: transparent; } .reviews__arrow:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; } .reviews__arrow:active { transform: translateY(-50%) scale(.93); } .reviews__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; } .reviews__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--color-line); transition: background var(--transition), transform var(--transition); } .reviews__dot[aria-current="true"] { background: var(--color-gold); transform: scale(1.35); } @media (max-width: 719px) { .reviews__stage { height: 420px; } .review-card { width: min(440px, 88vw); padding: 1.6rem 1.4rem; } .review-card__text { font-size: var(--fs-base); } .reviews__arrow { width: 44px; height: 44px; } /* en móvil solo la tarjeta central: las laterales asomaban por los bordes */ .review-card[data-pos="left"], .review-card[data-pos="right"] { transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .review-card { transition: none; } } /* ---------------------------------------------------------------------- 11b. Dudas frecuentes (FAQ con
, sin JS) ---------------------------------------------------------------------- */ .faq__inner { max-width: 820px; margin-inline: auto; } .faq__head { text-align: center; max-width: 600px; margin: 0 auto 3rem; } .faq__head .section__lead { margin-inline: auto; } .faq__list { display: grid; gap: 0.75rem; } .faq__item { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-bg); transition: var(--transition); } .faq__item[open] { border-color: var(--color-gold-soft); box-shadow: var(--shadow-soft); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.25rem 1.5rem; font-weight: 600; font-size: var(--fs-md); } .faq__item summary::-webkit-details-marker { display: none; } /* Indicador + / − dibujado en CSS, no es un icono superfluo */ .faq__item summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--color-gold-deep), var(--color-gold-deep)) center/14px 2px no-repeat, linear-gradient(var(--color-gold-deep), var(--color-gold-deep)) center/2px 14px no-repeat; transition: transform var(--transition); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { padding: 0 1.5rem 1.4rem; margin: 0; color: var(--color-text-soft); font-size: var(--fs-sm); max-width: 62ch; } /* ---------------------------------------------------------------------- 12. Contacto / CTA ---------------------------------------------------------------------- */ .contact__grid { display: grid; gap: 2.5rem; } .contact__info { display: grid; gap: 1.25rem; } .contact__item { display: grid; gap: 0.15rem; } .contact__item dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold-deep); font-weight: 600; } .contact__item dd { margin: 0; font-size: var(--fs-md); } .contact__placeholder { color: var(--color-text-soft); font-style: italic; } .contact__card { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 2.5rem; text-align: center; } .contact__card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-xl); margin-bottom: 0.75rem; } .contact__card p { color: var(--color-text-soft); margin-bottom: 1.75rem; } /* ---------------------------------------------------------------------- 12c. Páginas internas (hero compacto, formulario, mapa) ---------------------------------------------------------------------- */ .page-hero { background: radial-gradient(60% 75% at 82% 0%, var(--color-gold-soft), transparent 60%), var(--color-bg); padding-block: 3.5rem 3rem; border-bottom: 1px solid var(--color-line); } /* page-hero ocupa la misma banda que el header (ancho del .container, centrado), no todo el viewport. (Fijar explícito para no perder el max-width del .container.) */ .page-hero__inner { max-width: var(--maxw); } .page-hero h1 { font-size: var(--fs-2xl); margin: 0.5rem 0 1rem; line-height: 1.2; } .page-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; /* padding evita que el clip de texto recorte el punto de la "i" o los trazos altos */ padding: 0.04em 0.04em 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--color-gold-deep); background-image: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .page-hero p { font-size: var(--fs-md); color: var(--color-text-soft); max-width: 80ch; } /* Bloque de texto corrido */ .prose { max-width: 68ch; } .prose p { font-size: var(--fs-md); color: var(--color-text-soft); } .prose p + p { margin-top: 1.25rem; } .prose h2 { font-size: var(--fs-md); font-weight: 600; color: var(--color-text); margin: 2rem 0 0.5rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: var(--fs-base); font-weight: 600; color: var(--color-text); margin: 1.5rem 0 0.35rem; } .prose ul { margin: 0.75rem 0 0; padding-left: 1.25rem; color: var(--color-text-soft); } .prose li { font-size: var(--fs-md); margin-top: 0.5rem; } .prose a { color: var(--color-gold-deep); text-decoration: underline; } .prose a:hover { color: var(--color-gold); } /* Layout de la página de contacto */ .contact-page__grid { display: grid; gap: 3.5rem; } .contact-page__lead { margin-bottom: 2.25rem; } .contact-page__form { scroll-margin-top: 100px; } /* el scroll desde un tratamiento cae justo antes del form */ /* Tarjeta de información de contacto */ .contact-card { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 2.25rem; align-self: start; display: grid; gap: 1.75rem; } .contact-card h2 { font-size: var(--fs-lg); } .contact-page__info { display: grid; gap: 1.5rem; } .contact-page__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Formulario */ .form { display: grid; gap: 1.4rem; } .form__row { display: grid; gap: 1rem; } .field { display: grid; gap: 0.4rem; } .field label { font-size: var(--fs-sm); font-weight: 600; } .field .req { color: var(--color-gold-deep); } .field input, .field textarea { font: inherit; font-size: var(--fs-sm); padding: 0.8rem 1rem; width: 100%; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 12px; transition: var(--transition); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--color-gold); } .field input::placeholder, .field textarea::placeholder { color: var(--color-text-soft); opacity: 0.7; } .form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn__icon { width: 19px; height: 19px; flex: none; } .form__note { font-size: var(--fs-xs); color: var(--color-text-soft); } .form__msg { font-size: var(--fs-sm); color: var(--color-gold-deep); font-weight: 600; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Mapa */ .map { width: 100%; height: 420px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); display: block; } /* Marca Me Amo superpuesta sobre el mapa (Google embed = iframe, no se puede inyectar dentro; este pin es decorativo y no captura eventos del mapa). */ .map-wrap { position: relative; } .map-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; z-index: 2; } /* Isotipo "MA" recreado solo con CSS (sin imagen) */ .map-pin__logo { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--color-gold); background: #161410; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.45rem; letter-spacing: -0.04em; line-height: 1; } .map-pin__logo::before { content: "MA"; color: var(--color-gold); /* fallback si no hay background-clip */ background-image: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Punta del pin que señala la ubicación exacta */ .map-pin::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 12px; height: 12px; background: var(--color-bg); border-right: 3px solid var(--gold-polished); border-bottom: 3px solid var(--gold-polished); transform: translateX(-50%) rotate(45deg); z-index: -1; } @media (min-width: 720px) { .form__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .contact-page__grid { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; align-items: start; } } /* ---------------------------------------------------------------------- 12d. Timeline interactiva (CSS puro, radios) — recorrido del paciente ---------------------------------------------------------------------- */ .timeline { display: grid; gap: 2.5rem; } .timeline > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .timeline__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; position: relative; } .timeline__track::before { /* línea conectora */ content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: var(--color-line); } .timeline__node { flex: 1 1 0; min-width: 0; } .timeline__node label { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; cursor: pointer; padding: 0 0.25rem; } .timeline__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-gold); background: var(--color-bg); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--color-gold-deep); transition: var(--transition); } .timeline__caption { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-soft); transition: var(--transition); } .timeline__node label:hover .timeline__caption { color: var(--color-text); } .timeline__node label:hover .timeline__dot { transform: translateY(-2px); } .timeline__panel { display: none; } .timeline__panel-box { background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 2.25rem; } .timeline__meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-deep); } .timeline__panel h3 { font-size: var(--fs-lg); margin: 0.4rem 0 0.6rem; } .timeline__panel p { color: var(--color-text-soft); max-width: 64ch; } /* radio activo: rellena el punto y resalta el panel correspondiente */ #tl-1:checked ~ .timeline__track .timeline__node:nth-child(1) .timeline__dot, #tl-2:checked ~ .timeline__track .timeline__node:nth-child(2) .timeline__dot, #tl-3:checked ~ .timeline__track .timeline__node:nth-child(3) .timeline__dot, #tl-4:checked ~ .timeline__track .timeline__node:nth-child(4) .timeline__dot { background: var(--color-gold); color: #2c2109; } #tl-1:checked ~ .timeline__track .timeline__node:nth-child(1) .timeline__caption, #tl-2:checked ~ .timeline__track .timeline__node:nth-child(2) .timeline__caption, #tl-3:checked ~ .timeline__track .timeline__node:nth-child(3) .timeline__caption, #tl-4:checked ~ .timeline__track .timeline__node:nth-child(4) .timeline__caption { color: var(--color-text); } #tl-1:checked ~ .timeline__panels .tp-1, #tl-2:checked ~ .timeline__panels .tp-2, #tl-3:checked ~ .timeline__panels .tp-3, #tl-4:checked ~ .timeline__panels .tp-4 { display: block; } .timeline > input:focus-visible ~ .timeline__track .timeline__node label .timeline__dot { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; } @media (max-width: 680px) { .timeline__track { flex-direction: column; gap: 1.25rem; } .timeline__track::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .timeline__node label { flex-direction: row; align-items: center; gap: 0.85rem; text-align: left; } } /* ---------------------------------------------------------------------- 12e. Promesa "Nunca / Siempre" — sustituye a las cards de compromisos ---------------------------------------------------------------------- */ .promise__grid { display: grid; gap: 1.5rem; } .promise__col { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 2rem; background: var(--color-bg); } .promise--always { border-color: var(--color-gold); background: var(--color-gold-soft); } .promise__col h3 { font-size: var(--fs-md); margin-bottom: 1.25rem; } .promise__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; } .promise__list li { position: relative; padding-left: 1.9rem; color: var(--color-text-soft); } .promise__list li::before { position: absolute; left: 0; top: 0; width: 1.3rem; font-weight: 700; text-align: center; } .promise--never .promise__list li::before { content: "\00d7"; color: var(--color-text-soft); } .promise--always .promise__list li::before { content: "\2713"; color: var(--color-gold-deep); } @media (min-width: 760px) { .promise__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* ---------------------------------------------------------------------- 12f. Página de Tratamientos (menú por categorías, sin precios) ---------------------------------------------------------------------- */ .cat-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; } .cat-nav a { font-size: var(--fs-sm); font-weight: 500; padding: 0.5rem 1.05rem; border: 1px solid var(--color-line); border-radius: 100px; color: var(--color-text-soft); transition: var(--transition); } .cat-nav a:hover { border-color: var(--color-gold); color: var(--color-text); } /* Subgrupo dentro de una categoría (Faciales / Corporales) */ .tx-group { margin-top: 2.75rem; scroll-margin-top: 100px; } .tx-group__title { font-size: var(--fs-lg); margin-bottom: 1.5rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--color-gold-soft); } .tx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem 3rem; grid-template-columns: 1fr; } .tx-list li { border-bottom: 1px solid var(--color-line); } .tx-list b { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: 0.15rem; } .tx-list span { font-size: var(--fs-sm); color: var(--color-text-soft); } /* Cada tratamiento es un enlace a contacto con flecha dorada al pasar/enfocar */ .tx-item { position: relative; display: block; color: inherit; text-decoration: none; padding: 0 1.9rem 1.1rem 0; transition: var(--transition); } .tx-item::after { content: "→"; position: absolute; top: 0; right: 0.1rem; font-size: 1.15rem; line-height: 1.4; color: var(--color-gold-deep); opacity: 0; transform: translateX(-5px); transition: var(--transition); } .tx-item:hover b, .tx-item:focus-visible b { color: var(--color-gold-deep); } .tx-item:hover::after, .tx-item:focus-visible::after { opacity: 1; transform: translateX(0); } .tx-item:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 4px; border-radius: 6px; } @media (min-width: 760px) { .tx-list { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------------------- 13. Footer ---------------------------------------------------------------------- */ .site-footer { background: var(--color-bg-dark); color: #d8d2c7; padding-block: 3rem 2rem; font-size: var(--fs-sm); } .site-footer a { color: #d8d2c7; transition: var(--transition); } .site-footer a:hover { color: var(--color-gold); } .footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; } .footer__brand .logo__img { height: 44px; opacity: 0.95; } .footer__brand p { color: #9d978c; margin-top: 1rem; max-width: 34ch; } .footer__col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin-bottom: 1rem; } .footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: #9d978c; } /* ---------------------------------------------------------------------- 14. Responsive — tablet / desktop ---------------------------------------------------------------------- */ @media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .contact__grid { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 2fr 1fr 1fr; } } @media (min-width: 960px) { :root { --fs-2xl: 3.5rem; } .hero__inner { grid-template-columns: 1.1fr 0.9fr; } .hero { padding-block: 6rem; } .cards { grid-template-columns: repeat(3, 1fr); } .philosophy__grid { grid-template-columns: 0.9fr 1.1fr; } /* Variante invertida: texto a la izquierda, imagen a la derecha (Quiénes somos) */ .philosophy__grid--reverse { grid-template-columns: 1.1fr 0.9fr; } .section { padding-block: 6rem; } } /* ---------------------------------------------------------------------- 15. Menú móvil (checkbox hack, sin JS) — solo bajo 720px ---------------------------------------------------------------------- */ @media (max-width: 719px) { .nav__toggle-label { display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; } .nav__toggle-label span { width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: var(--transition); } .nav__links { position: absolute; inset: 72px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding: 0.5rem 1.25rem 1.25rem; display: none; box-shadow: var(--shadow-soft); } .nav__links li { width: 100%; } .nav__links a { display: block; padding: 0.85rem 0; width: 100%; } .nav__soon { display: flex; padding: 0.85rem 0; } .nav__cta { padding-top: 0.5rem; } .nav__toggle:checked ~ .nav__links { display: flex; } } /* ---------------------------------------------------------------------- 16. Accesibilidad — respeta reduce-motion ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------------------------------------------------------------------- 17. Resultados — comparador antes/después (deslizable, sin librerías) ---------------------------------------------------------------------- */ .results__intro { max-width: 72ch; } .results__hint { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } .results__hint svg { width: 20px; height: 20px; color: var(--color-gold-deep); flex: none; } .results__grid { display: grid; gap: 1.75rem; margin-top: 2.5rem; } .ba { margin: 0; } .ba__frame { --pos: 50%; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); background: var(--color-bg-soft); touch-action: none; /* arrastrar no hace scroll en móvil */ -webkit-user-select: none; user-select: none; } .ba__frame:focus-within { outline: 2px solid var(--color-gold); outline-offset: 3px; } .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* capa "antes": misma imagen a tamaño completo, recortada por la derecha según --pos */ .ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .ba__tag { position: absolute; top: 0.9rem; z-index: 3; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(13, 12, 10, 0.55); color: #fff; backdrop-filter: blur(4px); pointer-events: none; } .ba__tag--before { left: 0.9rem; } .ba__tag--after { right: 0.9rem; } /* línea divisoria + tirador */ .ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; z-index: 4; background: rgba(255, 255, 255, 0.92); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } .ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 999px; background: var(--gold-polished); color: var(--gold-ink); display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5), var(--gold-sheen); } .ba__grip svg { width: 22px; height: 22px; } /* input range invisible que cubre todo el marco → arrastrar en cualquier punto */ .ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; z-index: 5; opacity: 0; } .ba__range:focus { outline: none; } .ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 48px; height: 240px; } .ba__range::-moz-range-thumb { width: 48px; height: 240px; border: 0; background: transparent; } .ba__caption { margin-top: 0.85rem; font-size: var(--fs-sm); color: var(--color-text-soft); text-align: center; } .results__note { margin-top: 2.75rem; font-size: var(--fs-sm); color: var(--color-text-soft); border-left: 2px solid var(--color-gold); padding-left: 1.1rem; max-width: 78ch; } /* franja "garantías de honestidad" (compromiso de la clínica) */ .results__guarantees { display: grid; gap: 1.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; } .results__guarantee { display: flex; gap: 0.75rem; align-items: flex-start; } .results__guarantee svg { width: 22px; height: 22px; color: var(--color-gold-deep); flex: none; margin-top: 2px; } .results__guarantee strong { display: block; font-size: var(--fs-sm); color: var(--color-text); margin-bottom: 0.15rem; } .results__guarantee span { font-size: var(--fs-sm); color: var(--color-text-soft); } /* filtros por zona (no revelan el tratamiento, solo el área) */ .results__filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .results__filter { font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-text-soft); cursor: pointer; transition: var(--transition); } .results__filter:hover { border-color: var(--color-gold); color: var(--color-text); } .results__filter[aria-pressed="true"] { background: var(--gold-polished); color: var(--gold-ink); border-color: transparent; } .ba[hidden] { display: none; } .results__empty { margin-top: 2rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* comparador destacado: ocupa todo el ancho del grid, formato apaisado */ @media (min-width: 720px) { .ba--featured { grid-column: 1 / -1; } .ba--featured .ba__frame { aspect-ratio: 16 / 10; } /* comparador apaisado: ocupa 2 columnas, altura pareja con los tiles 4/5 vecinos */ .ba--wide { grid-column: span 2; } .ba--wide .ba__frame { aspect-ratio: 5 / 3; } } /* cursores de arrastre */ .ba__range { cursor: grab; } .ba__range:active { cursor: grabbing; } /* mientras el control tiene foco/uso, el tirador late suavemente para invitar a arrastrar */ .ba__frame:focus-within .ba__grip { box-shadow: 0 0 0 3px var(--color-gold-soft), 0 4px 14px -4px rgba(0,0,0,0.5), var(--gold-sheen); } @media (min-width: 720px) { .results__grid { grid-template-columns: repeat(2, 1fr); } .results__guarantees { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .results__grid { grid-template-columns: repeat(3, 1fr); } } /* =================================================================== 18. Experiencia (Inicio) =================================================================== */ .experience { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .experience__item { margin: 0; } .experience__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--color-line); transition: transform var(--transition), box-shadow var(--transition); } .experience__item:hover img { transform: translateY(-4px); box-shadow: var(--shadow); } .experience__item figcaption { margin-top: 0.85rem; text-align: center; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-deep); } @media (min-width: 720px) { .experience { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } } /* =================================================================== 19. Blog (listado de tarjetas + artículo) =================================================================== */ /* --- Listado: grid de tarjetas. Para añadir un post, duplica un
en blog.html. auto-fill + minmax → las tarjetas mantienen ~340px y NO se estiran a toda la fila aunque haya un solo post. --- */ /* Contenedor del blog algo más ancho que el resto del sitio, para que quepan 3 tarjetas cómodas a lo ancho. */ .container--wide { max-width: 1260px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.25rem 2rem; align-items: start; } /* ≥980px: exactamente 3 columnas */ @media (min-width: 980px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .post-card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-soft); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--color-gold-soft); } .post-card:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; } .post-card__media { margin: 0; overflow: hidden; position: relative; } .post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.6s ease; } .post-card:hover .post-card__media img { transform: scale(1.05); } /* Overlay suave oscuro en los bordes de la imagen (viñeta) */ .post-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 34px 8px rgba(0, 0, 0, 0.28), inset 0 -46px 46px -24px rgba(0, 0, 0, 0.30); } /* categoría como etiqueta sobre la imagen */ .post-card__cat { position: absolute; z-index: 2; top: 0.9rem; left: 0.9rem; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); background: var(--gold-btn); box-shadow: var(--gold-sheen); padding: 0.32rem 0.72rem; border-radius: 999px; } /* Tarjeta sin imagen (solo texto): la categoría pasa a fluir dentro del cuerpo */ .post-card--text .post-card__body { padding-top: 1.6rem; } .post-card--text .post-card__cat { position: static; align-self: flex-start; margin-bottom: 0.95rem; } .post-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .post-card__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; margin-bottom: 0.5rem; transition: color var(--transition); } .post-card:hover .post-card__title, .post-card:focus-visible .post-card__title { color: var(--color-gold-deep); } .post-card__excerpt { font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-soft); margin-bottom: 1.25rem; /* recorta a 3 líneas para igualar altura entre tarjetas */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card__meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-line); display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--color-text-soft); } .post-card__more { margin-left: auto; color: var(--color-gold-deep); font-weight: 600; } /* --- Artículo (plantilla de post) --- */ .post-article { max-width: 880px; margin-inline: auto; } /* En el artículo el texto ocupa todo el ancho de .post-article (por defecto .prose se capa a 68ch y queda estrecho). */ .post-article .prose { max-width: none; } .post-article .prose ul + p { margin-top: 1.25rem; } .post-back { display: flex; width: fit-content; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--color-gold-deep); text-decoration: none; margin-bottom: 1.25rem; } .post-back:hover { color: var(--color-gold); } .post-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: var(--fs-sm); color: var(--color-text-soft); margin-top: 1rem; } .post-cover { margin: 2rem 0 2.5rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); } .post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* Imágenes intercaladas dentro del cuerpo del artículo, con overlay negro. */ .post-figure { margin: 2.5rem 0; width: 100%; } .post-figure__frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-line); } /* Overlay negro sobre la imagen (unifica tono con la marca) */ .post-figure__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 5, 4, 0.30), rgba(6, 5, 4, 0.52)); pointer-events: none; } .post-figure__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .post-figure figcaption { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--color-text-soft); text-align: center; font-style: italic; } .post-cta { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-line); } /* CTA intercalado dentro del artículo (caja con acento dorado) */ .cta-inline { margin: 2.5rem 0; padding: 1.6rem 1.75rem; background: var(--color-gold-soft); border: 1px solid var(--color-line); border-left: 3px solid var(--color-gold); border-radius: var(--radius); } .cta-inline p { margin: 0 0 1.1rem; font-size: var(--fs-md); color: var(--color-text); } .cta-inline p:last-child { margin-bottom: 0; } /* --- Hero de artículo con imagen de fondo + overlay negro (marca MA) --- */ .post-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 5rem 3rem; border-bottom: 1px solid var(--color-line); } .post-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; z-index: -2; } .post-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 80% 0%, rgba(202, 165, 58, 0.16), transparent 55%), linear-gradient(180deg, rgba(8, 7, 5, 0.62) 0%, rgba(8, 7, 5, 0.72) 55%, rgba(8, 7, 5, 0.90) 100%); } .post-hero .eyebrow { color: var(--color-gold); } .post-hero h1 { color: #f7f1e6; } .post-hero .post-meta { color: #cdc3b2; } .post-hero .post-back { color: var(--color-gold); } .post-hero .post-back:hover { color: #f7f1e6; }