@charset "UTF-8"; /* ============================================================================= Método A.M.A.S — Leticia VL Sistema de diseño "El Atelier de la Calma" Soft Editorial Artesanal · acuarela cálida · line-art botánico Master stylesheet (reutilizable por todas las páginas) ============================================================================= */ /* Fuentes (en fase 7 se auto-alojarán los .woff2) */ /* Fuentes auto-alojadas: ver a /assets/fonts/fonts.css en el */ /* ============================================================================= 1. TOKENS (copiados verbatim de la dirección de diseño) ============================================================================= */ :root { /* ============ COLOR — MARCA (la del cliente, manda) ============ */ --c-rosa: #F3B5C2; /* rosa suave — fondos, washes, estados hover suaves */ --c-coral: #EA707C; /* coral — ACENTO/CTA principal */ --c-malva: #C377A8; /* malva/orquídea — acento secundario, líneas */ /* Variantes derivadas (tints/shades para profundidad sin romper marca) */ --c-rosa-50: #FCEDF1; /* wash muy claro, fondos de sección alternos */ --c-rosa-100: #F8D7DE; --c-coral-600: #D85462; /* coral oscurecido: hover de botón, cumple contraste */ --c-coral-700: #B83E4B; /* coral profundo: texto-acento sobre crema (AA) */ --c-malva-600: #A85C90; /* malva hover */ --c-malva-700: #8A4675; /* ============ TINTA (berenjena/morado oscuro — su material) ============ */ --c-tinta: #4A1F3D; /* berenjena: titulares, texto fuerte (NO negro) */ --c-tinta-soft: #5E3450; /* berenjena media: subtítulos */ --c-tinta-muted: #6E5566; /* texto secundario cálido (cumple AA sobre crema) */ /* ============ NEUTROS CÁLIDOS (crema / hueso, nada de gris frío) ============ */ --c-hueso: #FBF7F2; /* fondo base "papel de acuarela" */ --c-crema: #F6EFE7; /* fondo de sección alterno cálido */ --c-arena: #ECE2D6; /* bordes suaves, divisores, superficies hundidas */ --c-lino: #FFFFFF; /* superficie de card limpia (jabón blanco) */ --c-borde: #E7DCD0; /* borde 1px cálido por defecto */ /* Acentos naturales de apoyo (de sus materiales: lana, romero, aceite) */ --c-salvia: #9DB39A; /* verde salvia/romero — micro-acentos botánicos */ --c-miel: #E8C9A0; /* miel/madera de cuchara — detalles cálidos */ /* ============ ROLES SEMÁNTICOS (usar SIEMPRE estos en componentes) ============ */ --color-bg: var(--c-hueso); --color-bg-alt: var(--c-crema); --color-surface: var(--c-lino); --color-surface-sunken: var(--c-rosa-50); --color-text: var(--c-tinta); --color-text-soft: var(--c-tinta-soft); --color-text-muted: var(--c-tinta-muted); --color-heading: var(--c-tinta); --color-primary: var(--c-coral); /* CTA */ --color-primary-hover: var(--c-coral-600); --color-on-primary: #FFFFFF; --color-secondary: var(--c-malva); --color-secondary-hover: var(--c-malva-600); --color-accent-soft: var(--c-rosa); --color-border: var(--c-borde); --color-ring: var(--c-coral-600); /* focus visible */ --color-link: var(--c-malva-700); --color-link-hover: var(--c-coral-700); /* ============ ESTADOS ============ */ --color-success: #5E8C6A; /* verde salvia profundo */ --color-success-bg: #E9F1EA; --color-error: #C0414C; /* coral-rojo (familia de marca, no rojo genérico) */ --color-error-bg: #FBEAEC; --color-warning: #C98A3E; --color-warning-bg: #FBF0E1; --color-info: var(--c-malva-700); --color-info-bg: #F3E8EF; /* ============ TIPOGRAFÍA ============ */ --font-display: "Fraunces", Georgia, serif; /* titulares editoriales cálidos */ --font-sans: "Mulish", "Helvetica Neue", sans-serif;/* cuerpo y UI legible */ --font-script: "Caveat", "Segoe Script", cursive; /* acentos manuscritos */ /* Escala tipográfica (fluida, base 16) — usar clamp en build */ --fs-xs: 0.75rem; /* 12px — etiquetas, breadcrumb */ --fs-sm: 0.875rem; /* 14px — captions, meta */ --fs-base: 1.0625rem; /* 17px — cuerpo (un punto más cálido que 16) */ --fs-md: 1.25rem; /* 20px — entradilla / lead */ --fs-lg: 1.5rem; /* 24px — H4 / cita pequeña */ --fs-xl: 2rem; /* 32px — H3 */ --fs-2xl: 2.625rem; /* 42px — H2 */ --fs-3xl: 3.5rem; /* 56px — H1 */ --fs-hero: clamp(2.75rem, 6vw, 4.75rem); /* 44→76px — hero display */ --fs-script:clamp(1.75rem, 4vw, 3rem); /* acento manuscrito */ --lh-tight: 1.1; /* titulares display */ --lh-snug: 1.25; /* H2/H3 */ --lh-normal: 1.6; /* cuerpo */ --lh-loose: 1.75; /* lectura larga blog */ --tracking-tight: -0.02em; /* display */ --tracking-wide: 0.12em; /* etiquetas mayúsculas */ --measure: 68ch; /* ancho máx. de lectura */ /* Tamaños fluidos derivados (clamp) para titulares */ --fs-h2-fluid: clamp(1.9rem, 4vw, 2.625rem); --fs-h3-fluid: clamp(1.45rem, 2.6vw, 2rem); --fs-lead-fluid: clamp(1.1rem, 1.6vw, 1.25rem); /* ============ ESPACIADO (escala 4/8) ============ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(3.5rem, 8vw, 8rem); /* aire vertical entre secciones */ --container-max: 72rem; /* 1152px — contenedor general */ --container-narrow: 42rem; /* 672px — lectura/columna estrecha */ --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ============ RADIOS (orgánicos / suaves) ============ */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; /* Radio "pétalo" asimétrico para cards/foto — sello orgánico */ --radius-blob: 42% 58% 60% 40% / 45% 42% 58% 55%; --radius-blob-alt: 58% 42% 38% 62% / 52% 56% 44% 48%; /* ============ SOMBRAS (suaves, difusas, cálidas — tinte rosa/berenjena) ============ */ --shadow-xs: 0 1px 2px rgba(74, 31, 61, 0.05); --shadow-sm: 0 4px 12px rgba(74, 31, 61, 0.06); --shadow-md: 0 10px 30px rgba(74, 31, 61, 0.08); --shadow-lg: 0 24px 60px rgba(74, 31, 61, 0.10); --shadow-coral: 0 12px 28px rgba(234, 112, 124, 0.22); /* glow CTA */ /* ============ MOTION ============ */ --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* entradas */ --ease-in-soft: cubic-bezier(0.55, 0, 0.85, 0.45);/* salidas */ --ease-breath: cubic-bezier(0.37, 0, 0.45, 1); /* parallax/respiración */ --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-reveal: 800ms; /* reveal de scroll */ /* ============ Z-INDEX ============ */ --z-base: 0; --z-deco: 1; --z-content: 10; --z-sticky: 40; --z-header: 60; --z-dropdown: 70; --z-overlay: 90; --z-modal: 100; } /* ============================================================================= 2. RESET MODERNO ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* containing block para el "Hilo de acuarela" firma: que su height:100% abarque TODO el documento (no solo un viewport) */ position: relative; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } :where(:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 3px; border-radius: 4px; } /* ============================================================================= 3. BASE — papel cálido con grano sutil + tipografía fluida ============================================================================= */ body { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 400; color: var(--color-text); background-color: var(--color-bg); /* grano de papel muy sutil (SVG turbulencia inline, ~4% opacidad) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-attachment: fixed; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-heading); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); font-weight: 600; } h2 { font-size: var(--fs-h2-fluid); } h3 { font-size: var(--fs-h3-fluid); } h4 { font-size: var(--fs-lg); } p { color: var(--color-text-soft); } strong, b { font-weight: 700; color: var(--color-text); } a:not([class]) { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out-soft); } a:not([class]):hover { color: var(--color-link-hover); } ::selection { background: var(--c-rosa-100); color: var(--c-tinta); } /* Acento manuscrito reutilizable */ .script { font-family: var(--font-script); font-weight: 700; color: var(--color-primary); font-size: 1.18em; line-height: 1; letter-spacing: 0; } /* ============================================================================= 4. LAYOUT — container, section, grid ============================================================================= */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 80rem; } .section { padding-block: var(--section-y); position: relative; } .section--alt { background-color: var(--color-bg-alt); } .section--sunken { background-color: var(--color-surface-sunken); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .measure { max-width: var(--measure); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .grid { display: grid; gap: var(--gutter); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-6); } /* ============================================================================= 5. TIPOGRAFÍA EDITORIAL — eyebrow, lead, section-head ============================================================================= */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-secondary-hover); } .eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.55; } .eyebrow--center { justify-content: center; } .lead { font-size: var(--fs-lead-fluid); line-height: var(--lh-normal); color: var(--color-text-soft); } .section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head.center { margin-inline: auto; } .section-head > * + * { margin-top: var(--space-4); } /* Cita / frase ancla grande */ .pullquote { font-family: var(--font-display); font-size: clamp(1.75rem, 4.5vw, 3rem); font-weight: 400; font-style: italic; line-height: 1.2; color: var(--color-heading); letter-spacing: var(--tracking-tight); } /* ============================================================================= 6. BOTONES ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0.85em 1.6em; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; line-height: 1; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; text-align: center; transition: transform var(--dur-base) var(--ease-out-soft), background-color var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft), color var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); } .btn:hover { transform: translateY(-2px) scale(1.02); } .btn:active { transform: translateY(0) scale(0.99); } .btn--primary { background-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-coral); } /* hover: oscurece + intensifica el glow coral (sensación premium, sin layout) */ .btn--primary:hover { background-color: var(--color-primary-hover); box-shadow: 0 16px 36px rgba(234, 112, 124, 0.34); } .btn--ghost { background-color: transparent; color: var(--color-text); border-color: var(--color-border); } .btn--ghost:hover { border-color: var(--color-secondary); color: var(--color-secondary-hover); background-color: var(--color-surface-sunken); } .btn--secondary { background-color: var(--color-secondary); color: #fff; } .btn--secondary:hover { background-color: var(--color-secondary-hover); } .btn--block { width: 100%; } .btn--lg { min-height: 56px; font-size: var(--fs-md); padding: 1em 2em; } .btn .btn__icon { width: 1.15em; height: 1.15em; } /* Enlace de texto con flecha (CTA blando) */ .link-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--color-link); transition: gap var(--dur-base) var(--ease-out-soft), color var(--dur-fast); } .link-cta svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out-soft); } .link-cta:hover { color: var(--color-link-hover); gap: var(--space-3); } .link-cta:hover svg { transform: translateX(3px); } /* ============================================================================= 7. PILLS / BADGES ============================================================================= */ .pill, .badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; padding: 0.4em 0.95em; border-radius: var(--radius-pill); line-height: 1.2; } .pill { background-color: var(--color-surface-sunken); color: var(--color-secondary-hover); border: 1px solid var(--c-rosa-100); } .badge { background-color: var(--c-salvia); color: #fff; } .badge--soft { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid #cfe1d3; } .badge svg { width: 1.05em; height: 1.05em; } /* microlínea de confianza con punto separador */ .trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: 500; } .trust-line span { display: inline-flex; align-items: center; gap: var(--space-2); } .trust-line span:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--color-secondary); opacity: 0.7; } .trust-line .dot { display: none; } /* ============================================================================= 8. CARDS ============================================================================= */ .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Card de taller: foto enmascarada + contenido + CTA, clicable entera */ .card--taller { display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; } .card--taller .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-sunken); } .card--taller .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-soft); } .card--taller:hover .card__media img { transform: scale(1.05); } .card--taller .card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); flex: 1; } .card--taller .card__title { font-size: var(--fs-xl); } .card--taller .card__text { color: var(--color-text-muted); flex: 1; } .card--taller .card__cta { margin-top: var(--space-2); font-weight: 600; color: var(--color-link); display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--dur-base) var(--ease-out-soft); } .card--taller .card__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out-soft); } .card--taller:hover .card__cta { color: var(--color-link-hover); gap: var(--space-3); } .card--taller:hover .card__cta svg { transform: translateX(3px); } /* enlace que cubre toda la card */ .card--taller .card__link::after { content: ""; position: absolute; inset: 0; } /* Card de beneficio (icono line-art) */ .card--benefit { text-align: left; background-color: var(--color-surface); } .card--benefit .card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-md); background-color: var(--color-surface-sunken); color: var(--color-secondary-hover); margin-bottom: var(--space-4); } .card--benefit .card__icon svg { width: 32px; height: 32px; } .card--benefit h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); } .card--benefit p { color: var(--color-text-muted); font-size: var(--fs-base); } /* ============================================================================= 9. MÁSCARAS / FOTOS ORGÁNICAS ============================================================================= */ .media-blob { border-radius: var(--radius-blob); overflow: hidden; box-shadow: var(--shadow-md); } .media-blob--alt { border-radius: var(--radius-blob-alt); } .media-blob img { width: 100%; height: 100%; object-fit: cover; } .media-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); } .media-frame img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================================= 10. DECORACIÓN — blobs de acuarela, separadores botánicos, hilo firma ============================================================================= */ .deco { position: absolute; pointer-events: none; z-index: var(--z-deco); user-select: none; } .blob-wash { position: absolute; pointer-events: none; z-index: var(--z-deco); filter: blur(8px); opacity: 0.5; } /* Separador botánico (ramita centrada entre secciones) */ .botanical-sep { display: flex; align-items: center; justify-content: center; gap: var(--space-4); color: var(--color-secondary); opacity: 0.7; padding-block: var(--space-2); } .botanical-sep svg { width: clamp(80px, 14vw, 130px); height: auto; } /* Hilo de acuarela firma (SVG vertical fijo a la izquierda en desktop) */ .signature-thread { position: absolute; top: 0; left: clamp(8px, 2vw, 28px); height: 100%; width: 60px; pointer-events: none; z-index: var(--z-deco); display: none; } .signature-thread svg { height: 100%; width: 100%; } .signature-thread path { fill: none; stroke: url(#thread-grad); stroke-width: 2.5; stroke-linecap: round; } @media (min-width: 1100px) { .signature-thread { display: block; } } /* ============================================================================= 11. HEADER ============================================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); transition: background-color var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft), backdrop-filter var(--dur-base) var(--ease-out-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 72px; padding-block: var(--space-3); } /* estado scrolled: crema translúcido + blur */ .site-header.is-scrolled { background-color: rgba(251, 247, 242, 0.82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm); } .brand { display: inline-flex; align-items: baseline; gap: 0.5ch; flex-shrink: 0; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--color-heading); letter-spacing: var(--tracking-tight); line-height: 1; } .brand__name .dot { color: var(--color-primary); } .brand__tag { font-family: var(--font-script); font-size: var(--fs-md); color: var(--color-secondary); line-height: 1; } /* Navegación desktop */ .nav { display: flex; align-items: center; gap: var(--space-2); } .nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; padding: 0; margin: 0; } .nav__link { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.6em 0.85em; border-radius: var(--radius-pill); font-weight: 500; color: var(--color-text-soft); transition: color var(--dur-fast), background-color var(--dur-fast); } .nav__link:hover { color: var(--color-text); background-color: var(--color-surface-sunken); } .nav__link[aria-current="page"] { color: var(--color-primary-hover); font-weight: 600; } .nav__link svg { width: 1em; height: 1em; transition: transform var(--dur-fast); } /* Dropdown Talleres */ .nav__item--has-menu { position: relative; } .nav__item--has-menu[data-open="true"] .nav__link svg { transform: rotate(180deg); } .nav__dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 17rem; background-color: rgba(251, 247, 242, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out-soft), transform var(--dur-fast) var(--ease-out-soft), visibility var(--dur-fast); z-index: var(--z-dropdown); } .nav__item--has-menu[data-open="true"] .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown a { display: block; padding: 0.7em 0.9em; border-radius: var(--radius-sm); color: var(--color-text-soft); font-weight: 500; transition: background-color var(--dur-fast), color var(--dur-fast); } .nav__dropdown a:hover, .nav__dropdown a:focus-visible { background-color: var(--color-surface-sunken); color: var(--color-secondary-hover); } .nav__dropdown a small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: 2px; } .nav__dropdown li:last-child a { margin-top: var(--space-2); border-top: 1px solid var(--color-border); border-radius: 0; font-weight: 600; color: var(--color-link); } /* hamburguesa */ .nav-toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text); } .nav-toggle:hover { background-color: var(--color-surface-sunken); } .nav-toggle__bars { position: relative; width: 24px; height: 16px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease-out-soft), opacity var(--dur-fast); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 7px; } .nav-toggle__bars span:nth-child(3) { top: 14px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Panel móvil */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-overlay); visibility: hidden; pointer-events: none; } .mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(74, 31, 61, 0.35); opacity: 0; transition: opacity var(--dur-base) var(--ease-out-soft); } .mobile-nav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background-color: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-5) var(--space-8); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out-soft); display: flex; flex-direction: column; gap: var(--space-2); } .mobile-nav.is-open { visibility: visible; pointer-events: auto; } .mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; } .mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); } .mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .mobile-nav__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-text); } .mobile-nav__close:hover { background-color: var(--color-surface-sunken); } .mobile-nav a { display: block; padding: 0.85em 0.5em; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--color-text); border-bottom: 1px solid var(--color-border); } .mobile-nav a[aria-current="page"] { color: var(--color-primary-hover); } .mobile-nav .mobile-sub a { font-family: var(--font-sans); font-size: var(--fs-base); padding-left: var(--space-5); color: var(--color-text-muted); border: none; } .mobile-nav__cta { margin-top: var(--space-5); } /* ============================================================================= 12. HERO ============================================================================= */ .hero { position: relative; padding-top: clamp(7rem, 14vw, 10rem); padding-bottom: var(--section-y); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero__content > * + * { margin-top: var(--space-5); } .hero__title { font-size: var(--fs-hero); } .hero__subtitle { font-size: var(--fs-lead-fluid); color: var(--color-text-soft); max-width: 34ch; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); } .hero__media { position: relative; } .hero__media .media-blob { aspect-ratio: 4 / 5; } .hero__media .media-blob img { animation: breathe 9s var(--ease-breath) infinite; will-change: transform; /* loop permanente: vale la pena la capa */ backface-visibility: hidden; /* fuerza compositing, evita repaints */ transform: translateZ(0); } .hero__badge-float { position: absolute; bottom: 6%; left: -4%; background-color: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3); max-width: 14rem; } .hero__badge-float .ico { width: 36px; height: 36px; color: var(--color-secondary); flex-shrink: 0; } .hero__badge-float strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); } .hero__badge-float span { font-size: var(--fs-sm); color: var(--color-text-muted); } @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; max-width: 26rem; margin-inline: auto; } .hero__subtitle { max-width: none; } } @keyframes breathe { 0%, 100% { transform: translateZ(0) scale(1); } 50% { transform: translateZ(0) scale(1.03); } } /* ============================================================================= 13. PROBLEMA / NARRATIVA ============================================================================= */ .prose p + p { margin-top: var(--space-4); } .prose { color: var(--color-text-soft); font-size: var(--fs-lead-fluid); } .prose strong { color: var(--color-text); } /* split editorial: texto + media */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--reverse .split__media { order: 2; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: -1; } } /* ============================================================================= 14. TIMELINE / MÉTODO 3 PASOS ============================================================================= */ .timeline { display: grid; gap: var(--space-7); position: relative; } .timeline__step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; } .timeline__num { font-family: var(--font-script); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; color: var(--color-primary); line-height: 0.8; width: 4rem; text-align: center; flex-shrink: 0; } .timeline__body h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); } .timeline__body p { color: var(--color-text-muted); } .timeline__connector { color: var(--color-secondary); opacity: 0.55; margin: var(--space-2) 0 var(--space-2) 1.7rem; } .timeline__connector svg { height: 44px; width: auto; } /* ============================================================================= 15. GALERÍA BROKEN GRID ============================================================================= */ .gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: var(--gutter); } .gallery__item { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); position: relative; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-soft); } .gallery__item:hover img { transform: scale(1.06); } .gallery__item--tall { grid-row: span 2; } .gallery__item--wide { grid-column: span 2; } .g-a { grid-column: span 3; grid-row: span 2; } .g-b { grid-column: span 3; } .g-c { grid-column: span 2; } .g-d { grid-column: span 4; grid-row: span 1; } @media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .g-a, .g-b, .g-c, .g-d { grid-column: span 1; grid-row: span 1; } .g-a { grid-column: span 2; grid-row: span 2; } } /* ============================================================================= 16. LEAD MAGNET / FRANJA CAPTACIÓN ============================================================================= */ .leadmagnet { position: relative; background-color: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 4rem); overflow: hidden; } .leadmagnet__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: var(--z-content); } @media (max-width: 760px) { .leadmagnet__grid { grid-template-columns: 1fr; } } /* ============================================================================= 17. FORMULARIOS ============================================================================= */ .form { display: grid; gap: var(--space-4); } .form__row { display: grid; gap: var(--space-4); } @media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: var(--space-2); } .field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); } .field .req { color: var(--color-primary-hover); } .input, .textarea, .select { width: 100%; min-height: 48px; padding: 0.75em 1em; background-color: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast); } .textarea { min-height: 130px; resize: vertical; line-height: var(--lh-normal); } .input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px rgba(216, 84, 98, 0.18); background-color: var(--color-bg); } .form__hint { font-size: var(--fs-sm); color: var(--color-text-muted); } /* inline form (email) */ .form-inline { display: flex; flex-wrap: wrap; gap: var(--space-3); } .form-inline .input { flex: 1 1 12rem; min-width: 0; } /* Mensaje de éxito cálido */ .form-success { display: none; align-items: flex-start; gap: var(--space-3); background-color: var(--color-success-bg); border: 1px solid #cfe1d3; border-radius: var(--radius-md); padding: var(--space-5); color: var(--c-tinta); } .form-success.is-visible { display: flex; } .form-success svg { width: 28px; height: 28px; color: var(--color-success); flex-shrink: 0; } .form-success strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); margin-bottom: var(--space-1); } .form[hidden] { display: none; } /* ============================================================================= 18. FAQ ACORDEÓN ============================================================================= */ .faq { display: grid; gap: var(--space-3); } .faq__item { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); text-align: left; padding: var(--space-5); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--color-heading); min-height: 44px; } .faq__trigger:hover { color: var(--color-secondary-hover); } .faq__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-primary); transition: transform var(--dur-base) var(--ease-out-soft); } .faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(45deg); } .faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out-soft); } .faq__panel > div { overflow: hidden; } .faq__item.is-open .faq__panel { grid-template-rows: 1fr; } .faq__panel p { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); } /* ============================================================================= 19. PRUEBA SOCIAL INSTAGRAM ============================================================================= */ .social-proof { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; } .social-count { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 600; color: var(--color-primary-hover); line-height: 1; } .social-count small { display: block; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 500; color: var(--color-text-muted); margin-top: var(--space-2); } /* ============================================================================= 20. FOOTER ============================================================================= */ .site-footer { position: relative; background-color: var(--c-tinta); color: #F4E9EF; padding-top: clamp(3.5rem, 7vw, 5.5rem); margin-top: var(--space-8); } .site-footer a { color: #F4E9EF; } .site-footer__thread { position: absolute; top: -1px; left: 0; right: 0; height: 24px; color: var(--c-coral); opacity: 0.9; line-height: 0; } .site-footer__thread svg { width: 100%; height: 24px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: var(--space-7) var(--space-6); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col h4 { color: #fff; font-size: var(--fs-base); font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-4); opacity: 0.85; } .footer-col p { color: #E4D2DC; font-size: var(--fs-sm); line-height: var(--lh-normal); } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); } .footer-col li a { color: #E4D2DC; font-size: var(--fs-sm); transition: color var(--dur-fast); display: inline-flex; align-items: center; gap: var(--space-2); } .footer-col li a:hover { color: #fff; } .footer-col .footer-tag { font-family: var(--font-script); font-size: var(--fs-md); color: var(--c-rosa); margin-top: var(--space-3); } .footer-brand__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: #fff; margin-bottom: var(--space-3); } .footer-brand__name .dot { color: var(--c-coral); } .footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); } .footer-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill); background-color: rgba(255,255,255,0.08); transition: background-color var(--dur-fast), transform var(--dur-fast); } .footer-social a:hover { background-color: var(--c-coral); transform: translateY(-2px); } .footer-social svg { width: 20px; height: 20px; } .footer-contact-item { display: flex; align-items: center; gap: var(--space-2); } .footer-contact-item svg { width: 18px; height: 18px; color: var(--c-rosa); flex-shrink: 0; } .footer-bar { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: #C9AFBE; } .footer-credit { font-size: var(--fs-xs); color: #B597A6; } .footer-credit a { color: var(--c-rosa); text-decoration: underline; text-underline-offset: 2px; } .footer-credit a:hover { color: #fff; } /* ============================================================================= 21. CTA STICKY FLOTANTE (WhatsApp / Escríbeme) ============================================================================= */ .floating-cta { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.85em 1.3em; background-color: var(--color-primary); color: #fff; font-weight: 600; border-radius: var(--radius-pill); box-shadow: var(--shadow-coral), var(--shadow-md); transform: translateY(140%); opacity: 0; will-change: transform, opacity; transition: transform var(--dur-base) var(--ease-out-soft), opacity var(--dur-base), background-color var(--dur-fast); } .floating-cta.is-visible { transform: translateY(0); opacity: 1; } .floating-cta:hover { background-color: var(--color-primary-hover); } .floating-cta svg { width: 22px; height: 22px; } @media (max-width: 520px) { .floating-cta .floating-cta__label { display: none; } .floating-cta { padding: 0.9em; } } /* ============================================================================= 22. CTA FINAL / BANDA DESTACADA ============================================================================= */ .cta-band { position: relative; text-align: center; background: linear-gradient(160deg, var(--c-rosa-50), var(--c-rosa-100)); border-radius: var(--radius-xl); padding: clamp(2.5rem, 6vw, 5rem); overflow: hidden; } .cta-band > * { position: relative; z-index: var(--z-content); } .cta-band h2 { margin-bottom: var(--space-4); } .cta-band .lead { max-width: 36rem; margin-inline: auto; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-6); } /* lista con check botánico */ .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); } .check-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-soft); } .check-list svg { width: 22px; height: 22px; color: var(--color-secondary); flex-shrink: 0; margin-top: 2px; } /* skip link accesibilidad */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-modal); background: var(--color-primary); color: #fff; padding: 0.7em 1.2em; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--dur-fast); } .skip-link:focus { top: var(--space-4); } /* ============================================================================= 23. UTILIDADES REVEAL (scroll-reveal por JS) ============================================================================= */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal) var(--ease-out-soft), transform var(--dur-reveal) var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); /* will-change se añade/quita en JS solo durante la animación (--is-animating) para no mantener docenas de capas GPU vivas todo el rato */ } .reveal.is-animating { will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Fallback anti-regresión: si el JS no carga, el contenido NUNCA queda oculto. La clase .js (que añade main.js) habilita el estado inicial opacity:0. */ html:not(.js) .reveal { opacity: 1; transform: none; } html:not(.js) .draw path { stroke-dashoffset: 0; } /* draw para line-art (stroke al entrar) */ .draw path { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.4s var(--ease-out-soft); } .draw.is-visible path { stroke-dashoffset: 0; } /* helpers visualmente ocultos */ .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; } .no-scroll { overflow: hidden; } /* ============================================================================= 24. BREADCRUMBS ============================================================================= */ .breadcrumbs { font-size: var(--fs-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .breadcrumbs a { color: var(--color-link); } .breadcrumbs a:hover { color: var(--color-link-hover); } .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); list-style: none; } .breadcrumbs li:not(:last-child)::after { content: "›"; color: var(--color-border); } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; } /* ============================================================================= 25. RESPONSIVE — nav colapso ============================================================================= */ @media (max-width: 1024px) { .nav__list, .nav .btn--primary { display: none; } .nav-toggle { display: inline-flex; } } /* ============================================================================= 26. PREFERS-REDUCED-MOTION — desactivar animaciones ============================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .reveal.is-animating { will-change: auto; } .draw path { stroke-dashoffset: 0; } .hero__media .media-blob img { animation: none; will-change: auto; transform: none; } .floating-cta { transition: none; will-change: auto; } } /* ============================================================================= 27. BLOG — lectura larga (AÑADIDO fase blog; extiende .prose para artículos) Necesario porque .prose base solo estiliza p/strong; los artículos requieren H2/H3, listas y enlaces legibles en columna estrecha (~68ch, interlineado 1.75). ============================================================================= */ /* Cabecera editorial de artículo */ .article-header { text-align: center; margin-bottom: var(--space-8); } .article-header .article-title { font-size: var(--fs-2xl); line-height: var(--lh-snug); margin: var(--space-4) 0; } .article-lead { font-size: var(--fs-md); color: var(--color-text-soft); line-height: var(--lh-normal); max-width: var(--measure); margin-inline: auto; } .article-meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: var(--space-5); } .article-meta svg { width: 1.1em; height: 1.1em; color: var(--color-secondary); } /* Foto de cabecera con borde orgánico (sello de marca) */ .article-figure { margin: var(--space-7) 0; } .article-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-blob); box-shadow: var(--shadow-md); } .article-figure figcaption { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; margin-top: var(--space-3); } /* Cuerpo de lectura larga: interlineado generoso, medida ~68ch */ .prose--article { line-height: var(--lh-loose); } .prose--article h2 { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--color-heading); margin-top: var(--space-8); margin-bottom: var(--space-4); } .prose--article h3 { font-family: var(--font-display); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--color-text-soft); margin-top: var(--space-6); margin-bottom: var(--space-3); } .prose--article ul, .prose--article ol { margin: var(--space-4) 0; padding-left: var(--space-6); display: grid; gap: var(--space-3); } .prose--article li { padding-left: var(--space-2); } .prose--article ul li::marker { color: var(--color-primary); } .prose--article ol li::marker { color: var(--color-secondary); font-family: var(--font-display); font-weight: 600; } .prose--article a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--color-accent-soft); } .prose--article a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; } /* Bloque de enlaces internos (related) al pie del artículo */ .related { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); } @media (max-width: 640px) { .related { grid-template-columns: 1fr; } } .related__item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft); } .related__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .related__item strong { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-heading); } .related__item span { color: var(--color-text-muted); font-size: var(--fs-base); } .related__item .link-cta { margin-top: var(--space-2); } /* ============================================================================= 28. BADGE FLOTANTE SOBRE MEDIA DE CARD — añadido para hub de Talleres (sello "Sin experiencia previa" superpuesto a la foto de cada taller) ============================================================================= */ .card__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: var(--z-content); box-shadow: var(--shadow-sm); } .card--taller .card__text em { font-style: italic; color: var(--color-secondary-hover); } /* ============================================================================= 29. MÉTODOS DE CONTACTO — tiles grandes (AÑADIDO fase /contacto) Botones grandes de WhatsApp/teléfono/Instagram sobre el hero de contacto. Clases nuevas; no modifican nada de lo existente. ============================================================================= */ .contact-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 560px) { .contact-methods { grid-template-columns: 1fr; } } .contact-method { display: flex; align-items: center; gap: var(--space-4); min-height: 76px; padding: var(--space-5); background-color: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--color-text); transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); } .contact-method:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-secondary); } .contact-method__icon { flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-md); background-color: var(--color-surface-sunken); color: var(--color-secondary-hover); } .contact-method__icon svg { width: 26px; height: 26px; } .contact-method__text strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-heading); font-weight: 600; } .contact-method__text span { font-size: var(--fs-sm); color: var(--color-text-muted); } /* destaque del canal preferente (WhatsApp) en coral de marca */ .contact-method--wa { border-color: var(--c-rosa-100); background-color: var(--color-surface-sunken); } .contact-method--wa .contact-method__icon { background-color: var(--color-primary); color: var(--color-on-primary); } .contact-method--wa:hover { border-color: var(--color-primary); }