/* Escuela de Dibujo y Pintura al Óleo México — la mesa del taller. Sistema en DESIGN.md */

/* Fuentes propias, recortadas a los caracteres de la página (si se agrega texto con signos nuevos, regenerarlas) */
@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/montserrat.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('../assets/fonts/caveat.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --bg: #101012;
    --surface: #18181b;
    --fg: #f2efe8;
    --muted: #b3afa7;
    --line: rgba(242, 239, 232, 0.12);
    --paper: #f5f2ea;
    --paper-shade: #eeeadf;
    --ink: #16161a;
    --ink-muted: #46433e;
    --accent: #4cc244;
    --accent-ink: #1f5a1e;
    --tape: rgba(232, 222, 196, 0.82);
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.35);

    /* Solo dentro de las muestras de técnica */
    --sw-graphite: #3a3936;
    --sw-orange: #e07a3a;
    --sw-crimson: #d9434f;
    --sw-blue: #3f7fbf;
    --sw-yellow: #f0c43c;
    --sw-pink: #e9a3b4;
    --sw-lilac: #b9a6dc;

    --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --hand: 'Caveat', 'Segoe Print', cursive;

    --grain: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --grain-papel: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --radius: 6px;
    --gutter: clamp(16px, 4vw, 40px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

::selection {
    background: var(--accent);
    color: var(--ink);
}

html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* el clip de body pasa a la ventana y en celular no recorta; main sí lo respeta */
main {
    overflow-x: clip;
}

/* grano del taller sobre toda la página */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.07;
    pointer-events: none;
    z-index: 200;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

.oculto {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.saltar {
    position: absolute;
    left: 16px;
    top: -60px;
    background: var(--accent);
    color: var(--ink);
    padding: 10px 16px;
    z-index: 300;
    font-weight: 600;
}

.saltar:focus {
    top: 12px;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.contenedor {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- Tipografía ---------- */
.ceja {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.ceja::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    margin-right: 10px;
    vertical-align: 0.3em;
    background: var(--accent);
}

.ceja--papel::before {
    background: var(--accent-ink);
}

.ceja--centro {
    text-align: center;
}

.ceja--papel {
    color: var(--ink-muted);
}

.titular {
    font-size: clamp(44px, 7.2vw, 88px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.h2 {
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin-bottom: 20px;
}

.h2--papel {
    color: var(--ink);
}

.h3 {
    font-size: clamp(22px, 2.2vw, 26px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.texto {
    color: var(--muted);
    max-width: 60ch;
    text-wrap: pretty;
}

.texto+.texto {
    margin-top: 14px;
}

.texto--chico {
    font-size: 15px;
}

.texto--grande {
    font-size: clamp(18px, 1.6vw, 20px);
    color: var(--fg);
    line-height: 1.55;
}

.entrada {
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.55;
    color: var(--muted);
    max-width: 52ch;
    margin-top: 24px;
}

/* nota escrita a mano */
.nota {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--fg);
}

.palabra {
    display: inline-block;
}

.intro [data-intro],
.intro .portada__collage>* {
    opacity: 0;
}

/* ---------- Pincelada ---------- */
.pincel {
    position: relative;
    display: inline-block;
    z-index: 0;
    white-space: nowrap;
}

.pincel>svg {
    position: absolute;
    left: -0.12em;
    right: -0.14em;
    width: calc(100% + 0.26em);
    bottom: -0.34em;
    height: 0.5em;
    z-index: -1;
    fill: var(--accent);
    color: var(--accent);
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.7s var(--ease-out) 0.25s;
}

.js .pincel:not(.pintado)>svg {
    transform: scaleX(0);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 28px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 10px 24px -12px rgba(76, 194, 68, 0.75);
    transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s;
}

.btn:hover {
    transform: translateY(-2px);
    background: #5ed155;
    box-shadow: 0 16px 30px -14px rgba(76, 194, 68, 0.9);
}

.btn:active {
    transform: translateY(1px);
}

.btn .ico {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex: none;
}

.btn--chico {
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    box-shadow: none;
}

.btn--chico .ico {
    width: 18px;
    height: 18px;
}

.btn--grande {
    min-height: 64px;
    padding: 0 36px;
    font-size: 19px;
}

.btn--tinta {
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
}

.btn--tinta:hover {
    background: #2a2a30;
    box-shadow: none;
}

.btn--linea {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1.5px rgba(22, 22, 26, 0.35);
}

.btn--linea:hover {
    background: rgba(22, 22, 26, 0.06);
    box-shadow: inset 0 0 0 1.5px var(--ink);
}

.precios__plazo {
    text-wrap: balance;
    font-family: var(--hand);
    font-size: 26px;
    font-weight: 700;
    color: var(--accent);
    transform: rotate(-2deg);
}

.enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    text-decoration-color: rgba(242, 239, 232, 0.4);
    transition: text-decoration-color 0.2s;
}

.enlace:hover {
    text-decoration-color: var(--fg);
}

.enlace--papel {
    color: var(--ink);
    text-decoration-color: rgba(22, 22, 26, 0.35);
}

/* ---------- Papel, cinta y fotos ---------- */
.hoja {
    position: relative;
    background-color: var(--paper);
    background-image: var(--grain-papel), linear-gradient(170deg, var(--paper) 60%, var(--paper-shade));
    background-blend-mode: multiply, normal;
    color: var(--ink);
    border-radius: 2px;
    box-shadow: var(--shadow);
}

.hoja::before,
.foto-cinta::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    width: 112px;
    height: 30px;
    background: var(--tape);
    transform: translateX(-50%) rotate(-3deg);
    clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 24%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.foto-cinta {
    position: relative;
    background: var(--paper);
    padding: 10px;
    box-shadow: var(--shadow);
}

.foto-cinta img {
    width: 100%;
    filter: saturate(1.05) contrast(1.03);
}

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(16, 16, 18, 0.92);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, transform 0.4s var(--ease-out);
}

.cabecera.oculta {
    transform: translateY(-100%);
}

.progreso {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(var(--avance, 0));
}

.cabecera.con-borde {
    border-bottom-color: var(--line);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-right: auto;
}

.marca__logo {
    width: 52px;
    height: auto;
}

.marca__nombre {
    font-weight: 800;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.marca__sub {
    display: block;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.menu {
    display: flex;
    gap: 28px;
}

.menu a {
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--muted);
    padding: 10px 0;
    transition: color 0.2s;
}

.menu a:hover,
.menu a.activa {
    color: var(--fg);
}

.menu {
    position: relative;
}

.menu__raya {
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 1px;
    height: 2px;
    background: var(--accent);
    transform-origin: left center;
    opacity: 0;
    transition: transform 0.45s var(--ease-out), opacity 0.3s;
}

.menu-movil__lista a[aria-current] {
    color: var(--accent-ink);
}

/* ---------- Portada ---------- */
.acciones {
    position: relative;
}

.garabato {
    position: absolute;
    left: 268px;
    top: calc(100% + 2px);
    display: flex;
    align-items: flex-start;
    gap: 2px;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    color: var(--accent);
    transform: rotate(-3deg);
    pointer-events: none;
}

.garabato svg {
    width: 54px;
    height: 36px;
    flex: none;
    margin-top: -14px;
    order: -1;
    overflow: visible;
}

.garabato__trazo {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.portada {
    padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 8vw, 120px);
    /* la lámpara sobre la mesa del taller; en escritorio sigue al ratón (js/sitio.js) */
    background: radial-gradient(ellipse 60% 55% at var(--luz-x, 72%) var(--luz-y, 34%), rgba(255, 240, 210, 0.075), transparent 70%);
}

@media (min-width: 861px) {
    .portada {
        min-height: calc(100svh - 72px);
        display: grid;
        align-items: center;
    }

    .portada .contenedor {
        max-width: 1320px;
    }

    .portada__collage {
        padding: 0 0 72px 56px;
    }

    .foto-cinta--grande {
        width: 88%;
        margin-left: auto;
    }

    .foto-cinta--chica {
        width: 44%;
        left: 0;
    }

    .nota--portada {
        right: -4px;
        bottom: 18px;
        font-size: 28px;
        max-width: 250px;
    }
}

.portada__rejilla {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 36px;
}

.garantias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--muted);
}

.garantias li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.garantias li:not(:first-child)::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    opacity: 0.6;
}

.sello-mini {
    color: var(--fg);
    font-weight: 600;
}

.atajos-wa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 18px;
}

.atajos-wa__etiqueta {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 4px;
}

.atajo-wa {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(242, 239, 232, 0.04);
    color: var(--fg);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s var(--ease-out);
}

.atajo-wa:hover {
    border-color: var(--accent);
    background: rgba(76, 194, 68, 0.12);
    transform: translateY(-2px);
}

.portada__collage {
    position: relative;
    padding: 0 0 56px 24px;
}

.foto-cinta--grande {
    transform: rotate(1.6deg);
}

.foto-cinta--chica {
    position: absolute;
    width: 46%;
    left: -10%;
    bottom: 0;
    transform: rotate(-4deg);
}

.foto-cinta--chica::before {
    width: 84px;
    transform: translateX(-50%) rotate(5deg);
}

.nota--portada {
    position: absolute;
    right: -8px;
    bottom: 6px;
    max-width: 230px;
    padding: 16px 18px 14px;
    background: var(--paper);
    color: var(--ink);
    transform: rotate(-3deg);
    box-shadow: var(--shadow);
}

.nota--portada span {
    display: block;
    font-size: 22px;
    color: var(--accent-ink);
    margin-top: 4px;
}

/* ---------- Secciones ---------- */
.seccion {
    padding: clamp(72px, 9vw, 128px) 0;
}

.encabezado {
    margin-bottom: clamp(36px, 5vw, 56px);
}

.encabezado--centro {
    text-align: center;
}

.encabezado--centro .h2 {
    margin-inline: auto;
}

.encabezado--fila {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

/* Cinta de técnicas */
.cinta-marco {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-block: 40px;
    margin-block: -66px;
    pointer-events: none;
}

.cinta {
    width: 112%;
    margin-left: -6%;
    padding: 14px 0 12px;
    background-color: var(--accent);
    background-image: var(--grain-papel);
    color: var(--ink);
    transform: rotate(-2deg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cinta__pista {
    display: flex;
    width: max-content;
    will-change: transform;
}

.cinta__pista span {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding-right: 0.55em;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* decorativa: el texto va en CSS para que no cuente como contenido */
.cinta__pista span::before {
    content: attr(data-t);
}

.cinta__pista span::after {
    content: '';
    width: 0.26em;
    height: 0.26em;
    border-radius: 50%;
    background: currentColor;
}

/* Por qué */
.porque {
    background: var(--surface);
}

.porque__rejilla {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.perfiles {
    margin-top: 28px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(16, 16, 18, 0.45);
}

.perfiles__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.perfiles__tab {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: 600 15px var(--font);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}

.perfiles__tab:hover {
    color: var(--fg);
    border-color: rgba(242, 239, 232, 0.35);
}

.perfiles__tab.activa {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 800;
}

.perfiles__texto {
    font-size: 16px;
    line-height: 1.5;
    color: var(--fg);
    max-width: 54ch;
}

.perfiles__cta {
    margin-top: 6px;
    color: var(--accent);
    font-size: 15px;
    text-decoration-color: rgba(76, 194, 68, 0.45);
}

.receta {
    padding: 48px 36px 36px;
    transform: rotate(-1.2deg);
}

.receta__titulo {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: 16px;
    border-bottom: 1.5px dashed rgba(22, 22, 26, 0.25);
    margin-bottom: 20px;
}

.receta__lista li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 10px 0;
}

.receta__lista svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.receta__lista rect {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.8;
}

.palomita {
    fill: none;
    stroke: var(--accent-ink);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 26;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.45s var(--ease-out);
}

.js .receta:not(.visto) .palomita {
    stroke-dashoffset: 26;
}

.receta__lista li:nth-child(2) .palomita {
    transition-delay: 0.25s;
}

.receta__lista li:nth-child(3) .palomita {
    transition-delay: 0.5s;
}

.receta__lista li:nth-child(4) .palomita {
    transition-delay: 0.75s;
}

.receta__firma {
    font-family: var(--hand);
    font-size: 26px;
    color: var(--accent-ink);
    margin-top: 16px;
}

/* Programa */
.etapa__cabeza {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.etapa__num {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    font-weight: 800;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.muestras {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 12px;
}

.muestra {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--paper);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 0 1px rgba(22, 22, 26, 0.08), var(--shadow);
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.muestra:nth-child(odd) {
    transform: rotate(-1deg);
}

.muestra:nth-child(even) {
    transform: rotate(1.2deg);
}

.muestra:hover,
.muestra.activa {
    transform: translateY(-6px) rotate(0deg);
}

.muestra.activa {
    box-shadow: 0 0 0 2.5px var(--accent), var(--shadow);
}

.muestra__num {
    position: absolute;
    top: 7px;
    right: 9px;
    z-index: 3;
    font-family: var(--hand);
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: var(--ink);
}

.muestra.activa .muestra__num {
    color: var(--accent-ink);
}

@media (hover: hover) {
    .muestras.visto .muestra:hover::before {
        animation: repinta 0.8s var(--ease-out);
    }
}

@keyframes repinta {
    from { clip-path: inset(0 100% 0 0); }
}

.muestra::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.9s var(--ease-out) calc(var(--i, 0) * 70ms + 0.35s), transform 0.3s var(--ease-out);
}

.muestra:hover::before,
.muestra.activa::before {
    transform: scale(1.04);
}

.js .muestras:not(.visto) .muestra::before {
    clip-path: inset(0 100% 0 0);
}

.muestra::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: var(--grain);
    mix-blend-mode: multiply;
    opacity: 0.22;
    pointer-events: none;
}

.muestra span {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 8px 10px 11px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.muestra--carbon::before {
    background-image: url('../assets/img/muestra-carbon.webp');
}

.muestra--carboncillo::before {
    background-image: url('../assets/img/muestra-carboncillo.webp');
}

.muestra--acrilico::before {
    background-image: url('../assets/img/muestra-acrilico.webp');
}

.muestra--lapiz::before {
    background-image: url('../assets/img/muestra-lapiz.webp');
}

.muestra--acuarela::before {
    background-image: url('../assets/img/muestra-acuarela.webp');
}

.muestra--pastel::before {
    background-image: url('../assets/img/muestra-pastel.webp');
}

.muestra--crayon::before {
    background-image: url('../assets/img/muestra-crayon.webp');
}

.muestra--tinta::before {
    background-image: url('../assets/img/muestra-tinta.webp');
}

.muestra--plumon::before {
    background-image: url('../assets/img/muestra-plumon.webp');
}

.etapa__ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 20px;
    padding: 16px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.etapa__ficha-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(76, 194, 68, 0.16);
    color: var(--accent);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.etapa__ficha-texto {
    font-size: 16px;
    color: var(--fg);
}

.etapa--oleo {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
    margin-top: clamp(64px, 8vw, 104px);
}

.etapa__collage {
    position: relative;
    padding: 0 28px 44px 0;
}

.etapa__foto {
    transform: rotate(-1.5deg);
    width: 86%;
}

.etapa__foto-sec {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    padding: 8px;
    transform: rotate(3.2deg);
    z-index: 2;
}

.nota--etapa {
    color: var(--accent);
    font-size: 30px;
    margin-top: 16px;
    transform: rotate(-2deg);
}

.taller-vivo {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 18px;
    padding: 12px 18px 12px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.taller-vivo img {
    width: 100%;
    height: 116px;
    object-fit: cover;
    border-radius: 3px;
}

.taller-vivo__pie {
    display: grid;
    gap: 4px;
}

.taller-vivo__pie strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--fg);
}

.taller-vivo__pie span {
    font-size: 15px;
    line-height: 1.4;
    color: var(--muted);
}

/* Graduación */
.graduacion {
    position: relative;
    isolation: isolate;
}

.graduacion picture {
    display: block;
    overflow: hidden;
}

.graduacion img {
    width: 100%;
    max-height: 88vh;
    object-fit: cover;
}

.graduacion::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg) 0, transparent 20%, transparent 45%, rgba(16, 16, 18, 0.94) 92%, var(--bg) 100%);
    pointer-events: none;
}

.graduacion__pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(32px, 5vw, 68px);
    margin-inline: auto;
    z-index: 1;
}

.graduacion__ceja {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.graduacion__frase {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    max-width: 15ch;
}

.graduacion__dato {
    font-size: 15px;
    color: var(--fg);
    opacity: 0.9;
    margin-top: 12px;
}

/* Testimonios */
/* el carrusel de polaroids no debe ensanchar la columna */
.voces__citas {
    min-width: 0;
}

.voces__rejilla {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.telefono {
    position: relative;
    max-width: 340px;
    margin-inline: auto;
    border-radius: 34px;
    padding: 10px;
    background: #050506;
    box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
    transform: rotate(-2deg);
}

.telefono video {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 26px;
    object-fit: cover;
    background: #050506;
}

.telefono__play {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 16px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font: 600 17px var(--font);
    cursor: pointer;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
    transition: transform 0.2s var(--ease-out);
}

.telefono__play:hover {
    transform: translateX(-50%) scale(1.04);
}

.telefono__play svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.telefono.reproduciendo .telefono__play {
    opacity: 0;
    pointer-events: none;
}

.cita-grande {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s var(--ease-out), background-color 0.25s;
}

.cita-grande:hover,
.cita-grande.activa {
    border-color: var(--accent);
    background: rgba(76, 194, 68, 0.08);
    transform: translateY(-2px);
}

.cita-grande__foto {
    width: 84px;
    height: 84px;
    flex: none;
    object-fit: cover;
    background: var(--paper);
    padding: 4px;
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
}

.cita-grande__cuerpo {
    display: grid;
    gap: 8px;
}

.cita-grande p {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.cita__audio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
}

.cita__audio svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* cada alumna en una polaroid con su frase escrita a mano */
.citas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 32px;
    padding-top: 8px;
}

.cita {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 8px 14px;
    background-color: var(--paper);
    background-image: var(--grain-papel);
    background-blend-mode: multiply;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: rotate 0.3s var(--ease-out), translate 0.3s var(--ease-out), box-shadow 0.25s;
}

.cita:nth-child(odd) {
    rotate: -2.2deg;
}

.cita:nth-child(even) {
    rotate: 1.8deg;
    translate: 0 12px;
}

.cita:hover,
.cita.activa {
    rotate: 0deg;
    translate: 0 -4px;
}

.cita.activa {
    box-shadow: 0 0 0 3px var(--accent), var(--shadow);
}

.cita__marco {
    position: relative;
}

.cita img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.cita__chip {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 16, 18, 0.84);
    color: var(--fg);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cita.activa .cita__chip {
    background: var(--accent);
    color: var(--ink);
}

.cita p {
    font-family: var(--hand);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.voces__nota {
    margin-top: 28px;
}

/* Obras */
.obras {
    background: var(--surface);
}

.nota--obras {
    color: var(--accent);
    font-size: 30px;
    transform: rotate(-3deg);
    padding-bottom: 12px;
    white-space: nowrap;
}

.tendedero__pista {
    display: flex;
    align-items: flex-start;
    gap: clamp(22px, 3vw, 44px);
    padding: 40px var(--gutter) 36px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    /* la cuerda viaja con las fotos */
    background: linear-gradient(rgba(242, 239, 232, 0.32), rgba(242, 239, 232, 0.32)) 0 40px / 100% 2px no-repeat local;
}

.tendedero__pista::-webkit-scrollbar {
    display: none;
}

.obra {
    position: relative;
    flex: none;
    scroll-snap-align: start;
    transform-origin: 50% 0;
}

.obra:nth-child(odd) {
    rotate: -1.4deg;
}

.obra:nth-child(even) {
    rotate: 1.1deg;
}

@media (hover: hover) {
    .obra figure {
        transition: translate 0.35s var(--ease-out), box-shadow 0.35s;
    }

    .obra:hover figure {
        translate: 0 -8px;
        box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.35);
    }
}

.obra figure {
    margin-top: 6px;
    background: var(--paper);
    padding: 8px 8px 10px;
    box-shadow: var(--shadow);
}

.obra figure::after {
    content: attr(data-nota);
    display: block;
    padding-top: 6px;
    text-align: center;
    font-family: var(--hand);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ink);
}

.obra img {
    height: clamp(320px, 54vh, 450px);
    width: auto;
    max-width: none;
    user-select: none;
}

/* pinza de metal sobre la cuerda */
.pinza {
    position: absolute;
    left: 50%;
    top: -12px;
    width: 26px;
    height: 24px;
    translate: -50% 0;
    z-index: 2;
}

.pinza::before {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: -9px;
    height: 12px;
    border: 2px solid #a9a9ad;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

.pinza::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #3a3a40, #0e0e10);
    clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.obras__pie {
    display: flex;
    align-items: center;
    gap: 20px;
}

.obras__contador {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.obras__actual {
    color: var(--fg);
}

.obras__barra {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--line);
    overflow: hidden;
}

.obras__barra i {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(var(--avance, 0.09));
}

.obras__ayuda {
    color: var(--accent);
}

.obras__ayuda span {
    display: inline-block;
    animation: empuja 1.6s var(--ease-out) 4;
}

@keyframes empuja {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* en escritorio el tendedero corre con el scroll (lo mueve js/sitio.js) */
.gsap-ancho .tendedero {
    overflow: hidden;
}

.gsap-ancho .tendedero__pista {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
}

.gsap-ancho .obras__ayuda {
    display: none;
}

.gsap-ancho .obras__pie {
    position: sticky;
    bottom: 0;
}

/* mientras la sección está fija, todo cabe en una pantalla */
.gsap-ancho .obras {
    padding-block: 76px 52px;
}

.gsap-ancho .obras .encabezado {
    margin-bottom: 10px;
}

.gsap-ancho .obra img {
    height: min(41vh, 390px);
}

/* Maestro */
.maestro__rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.maestro__foto {
    transform: rotate(-1.2deg);
    position: sticky;
    top: 110px;
}

.trayectoria {
    position: relative;
    margin-top: 36px;
    padding-left: 32px;
}

.trayectoria::before,
.trayectoria::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 26px;
    bottom: 26px;
    width: 2px;
    background: var(--line);
}

.trayectoria::after {
    background: var(--accent);
    transform-origin: top center;
    transform: scaleY(var(--avance, 1));
}

.trayectoria li {
    position: relative;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.45;
    transition: color 0.4s;
}

.trayectoria li::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 21px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
    z-index: 1;
    transition: background-color 0.3s;
}

.trayectoria li.activa::before {
    background: var(--accent);
}

.gsap .trayectoria li:not(.activa),
.gsap .trayectoria li:not(.activa) .trayectoria__anio {
    color: var(--muted);
}

.trayectoria__anio {
    transition: color 0.4s;
}

.trayectoria__anio {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.diplomas__titulo {
    margin-top: clamp(56px, 7vw, 88px);
}

.diplomas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    gap: 36px 28px;
    max-width: 1040px;
    margin-inline: auto;
    padding: 36px 6px 28px;
}

.diplomas li {
    flex: none;
    scroll-snap-align: start;
}

.diplomas li:nth-child(odd) {
    transform: rotate(-1.5deg);
}

.diplomas li:nth-child(even) {
    transform: rotate(1.3deg);
}

.diplomas a {
    display: grid;
    justify-items: center;
    gap: 8px;
    background: var(--paper);
    padding: 8px 8px 10px;
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform 0.25s var(--ease-out);
}

.diplomas a:hover {
    transform: translateY(-6px);
}

.diplomas img {
    height: 180px;
    width: auto;
}

.diploma__pie {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
}

.diplomas__ayuda {
    display: none;
    text-align: center;
    color: var(--accent);
    margin-top: 8px;
}

/* Precios */
.precios__sub {
    margin-inline: auto;
}

.planes {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 28px;
    max-width: 960px;
    margin-inline: auto;
    align-items: stretch;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 40px 36px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.plan--destacado {
    border: 0;
    background-color: var(--paper);
    transform: rotate(0.8deg);
}

.plan__etiqueta {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 8px;
}

.plan__etiqueta--suave {
    color: var(--muted);
}

.plan__nombre {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.plan__precio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-top: 18px;
}

.plan__precio {
    font-size: clamp(54px, 5.6vw, 72px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-top: 18px;
    font-variant-numeric: tabular-nums;
}

.plan__precio-fila .plan__precio {
    margin-top: 0;
}

.plan__ahorro {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}

.plan__signo {
    font-size: 0.5em;
    vertical-align: 0.6em;
    margin-right: 2px;
    font-weight: 800;
}

.plan__moneda {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 8px;
}

.plan--destacado .plan__moneda {
    color: var(--ink-muted);
}

.plan__antes {
    text-decoration: line-through;
    opacity: 0.85;
}

.plan__equivale {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    padding: 6px 12px;
    background: rgba(76, 194, 68, 0.18);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.plan__equivale strong {
    font-weight: 900;
    color: var(--accent-ink);
}

.plan__equivale--neutro {
    background: rgba(242, 239, 232, 0.06);
    color: var(--fg);
}

.plan__equivale--neutro strong {
    color: var(--accent);
}

.plan__lista {
    margin-top: 24px;
    margin-bottom: 28px;
    display: grid;
    gap: 12px;
}

.plan__lista li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1.45;
}

.plan__lista li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 14px;
    height: 8px;
    border-left: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    transform: rotate(-45deg);
}

.plan--destacado .plan__lista li::before {
    border-color: var(--accent-ink);
}

.plan__cta {
    margin-top: auto;
    width: 100%;
}

.btn--fantasma {
    background: transparent;
    color: var(--fg);
    box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn--fantasma:hover {
    background: rgba(242, 239, 232, 0.08);
    box-shadow: inset 0 0 0 1.5px var(--fg);
}

.sello {
    position: absolute;
    right: -26px;
    top: -34px;
    width: 128px;
    height: 128px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    transform: rotate(10deg);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--accent), var(--shadow);
    z-index: 3;
}

.sello__arriba {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sello__centro {
    font-family: var(--hand);
    font-size: 25px;
    line-height: 0.95;
    margin-top: 4px;
}

.precios__cta {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
    margin-top: 44px;
}

.precios__visita {
    display: grid;
    justify-items: center;
    gap: 6px;
    max-width: 620px;
    padding: 20px 28px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: rgba(24, 24, 27, 0.6);
}

.precios__visita-titulo {
    font-size: 17px;
    font-weight: 800;
    color: var(--fg);
}

.precios__visita-enlace {
    color: var(--accent);
    text-decoration-color: rgba(76, 194, 68, 0.45);
}

/* Ubicación */
.ubicacion__rejilla {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    max-width: 1040px;
}

.ubicacion__foto {
    transform: rotate(-1deg);
}

.direccion {
    padding: 48px 40px 40px;
    margin-left: -64px;
    transform: rotate(1.2deg);
    z-index: 1;
}

.direccion__texto {
    color: var(--ink-muted);
    font-size: 17px;
}

.nota--papel {
    color: var(--accent-ink);
    margin-top: 18px;
    font-size: 25px;
}

.direccion__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
}

/* Cierre */
.cierre {
    padding: clamp(80px, 10vw, 140px) 0;
    text-align: center;
}

/* una hoja grande pegada en la mesa, con los bordes rasgados */
.cierre__marco {
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.6));
    transform: rotate(-0.8deg);
}

.cierre__marco::before,
.cierre__marco::after {
    content: '';
    position: absolute;
    top: -12px;
    width: 120px;
    height: 32px;
    background: var(--tape);
    clip-path: polygon(3% 0, 97% 4%, 100% 22%, 97% 45%, 100% 70%, 96% 100%, 4% 96%, 0 74%, 3% 50%, 0 24%);
    z-index: 2;
}

.cierre__marco::before {
    left: -24px;
    transform: rotate(-32deg);
}

.cierre__marco::after {
    right: -24px;
    transform: rotate(30deg);
}

.cierre__caja {
    display: grid;
    justify-items: center;
    gap: 24px;
    padding: clamp(56px, 8vw, 96px) clamp(22px, 6vw, 80px) clamp(48px, 7vw, 80px);
    background-color: var(--paper);
    background-image: var(--grain-papel), linear-gradient(170deg, var(--paper) 60%, var(--paper-shade));
    background-blend-mode: multiply, normal;
    color: var(--ink);
    clip-path: polygon(0.0% 2.6px, 2.5% 1.2px, 5.0% 5.2px, 7.5% 0.6px, 10.0% 4.3px, 12.5% 2.9px, 15.0% 0.5px, 17.5% 4.1px, 20.0% 0.3px, 22.5% 3.5px, 25.0% 0.6px, 27.5% 0.7px, 30.0% 3.4px, 32.5% 6.6px, 35.0% 1.0px, 37.5% 1.8px, 40.0% 5.0px, 42.5% 7.6px, 45.0% 4.6px, 47.5% 3.2px, 50.0% 7.8px, 52.5% 0.4px, 55.0% 6.9px, 57.5% 2.3px, 60.0% 1.2px, 62.5% 0.9px, 65.0% 2.5px, 67.5% 6.5px, 70.0% 1.4px, 72.5% 4.7px, 75.0% 5.1px, 77.5% 3.0px, 80.0% 4.4px, 82.5% 0.5px, 85.0% 0.5px, 87.5% 1.6px, 90.0% 5.4px, 92.5% 3.4px, 95.0% 2.5px, 97.5% 4.7px, 100.0% 3.6px, 100.0% calc(100% - 2.4px), 97.5% calc(100% - 6.4px), 95.0% calc(100% - 5.6px), 92.5% calc(100% - 2.0px), 90.0% calc(100% - 4.6px), 87.5% calc(100% - 4.2px), 85.0% calc(100% - 7.0px), 82.5% calc(100% - 5.8px), 80.0% calc(100% - 2.3px), 77.5% calc(100% - 7.8px), 75.0% calc(100% - 0.9px), 72.5% calc(100% - 3.3px), 70.0% calc(100% - 6.1px), 67.5% calc(100% - 1.2px), 65.0% calc(100% - 3.9px), 62.5% calc(100% - 0.3px), 60.0% calc(100% - 5.3px), 57.5% calc(100% - 6.1px), 55.0% calc(100% - 4.6px), 52.5% calc(100% - 7.0px), 50.0% calc(100% - 2.5px), 47.5% calc(100% - 5.6px), 45.0% calc(100% - 4.8px), 42.5% calc(100% - 4.6px), 40.0% calc(100% - 3.6px), 37.5% calc(100% - 6.7px), 35.0% calc(100% - 7.6px), 32.5% calc(100% - 3.8px), 30.0% calc(100% - 5.3px), 27.5% calc(100% - 0.5px), 25.0% calc(100% - 5.6px), 22.5% calc(100% - 5.2px), 20.0% calc(100% - 7.9px), 17.5% calc(100% - 6.6px), 15.0% calc(100% - 2.3px), 12.5% calc(100% - 3.1px), 10.0% calc(100% - 5.3px), 7.5% calc(100% - 0.2px), 5.0% calc(100% - 3.7px), 2.5% calc(100% - 1.3px), 0.0% calc(100% - 0.9px));
}

.texto--papel {
    color: var(--ink-muted);
}

.cierre__firma {
    color: var(--accent-ink);
    transform: rotate(-2deg);
}

.cierre__titulo {
    font-size: clamp(36px, 5.6vw, 72px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.02;
    max-width: 16ch;
    text-wrap: balance;
}

.cierre .texto {
    margin-bottom: 12px;
}

/* Cómo empezar */
.pasos__lista {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 56px);
    counter-reset: paso;
}

/* línea de lápiz que une los pasos */
.pasos__lista::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 16%;
    right: 16%;
    border-top: 2px dashed rgba(242, 239, 232, 0.28);
    transform-origin: left center;
    transform: scaleX(var(--avance, 1));
}

.paso {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.paso .texto {
    max-width: 30ch;
}

.paso__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 8px;
    background: var(--bg);
    font-family: var(--hand);
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
}

.paso__num svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 190;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s var(--ease-out) calc(var(--i, 0) * 0.25s + 0.2s);
}

.js .pasos__lista:not(.visto) .paso__num svg {
    stroke-dashoffset: 190;
}

.paso:nth-child(2) {
    --i: 1;
}

.paso:nth-child(3) {
    --i: 2;
}

/* Preguntas */
.preguntas {
    background: var(--surface);
}

.preguntas__rejilla {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.preguntas .encabezado {
    position: sticky;
    top: 110px;
}

.preguntas__nota {
    color: var(--accent);
    transform: rotate(-2deg);
    margin-top: 8px;
}

.preguntas__lista {
    border-top: 1px solid var(--line);
}

.pregunta {
    border-bottom: 1px solid var(--line);
    interpolate-size: allow-keywords;
}

.pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 64px;
    padding: 18px 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

.pregunta summary::-webkit-details-marker {
    display: none;
}

.pregunta__signo {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    transition: transform 0.35s var(--ease-out), background-color 0.25s, border-color 0.25s;
}

.pregunta__signo::before,
.pregunta__signo::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: currentColor;
    translate: -50% -50%;
}

.pregunta__signo::after {
    rotate: 90deg;
}

.pregunta[open] .pregunta__signo {
    transform: rotate(45deg);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}

.pregunta::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
}

.pregunta[open]::details-content {
    block-size: auto;
}

.pregunta__respuesta {
    padding: 0 48px 24px 0;
}

.pregunta__respuesta p {
    color: var(--muted);
    max-width: 60ch;
}

.pregunta__respuesta .enlace {
    margin-top: 6px;
    color: var(--accent);
    text-decoration-color: rgba(76, 194, 68, 0.45);
}

/* Pie */
.pie {
    padding: clamp(56px, 7vw, 88px) 0 120px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--muted);
}

.pie__rejilla {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
    gap: 40px;
}

.pie__logo {
    width: 72px;
    margin-bottom: 16px;
}

.pie__nombre {
    font-weight: 800;
    font-size: 17px;
    line-height: 1.3;
    color: var(--fg);
    max-width: 18ch;
}

.pie__nota {
    color: var(--accent);
    margin-top: 12px;
    font-size: 24px;
    transform: rotate(-2deg);
    transform-origin: left center;
}

.pie__columna {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 6px;
}

.pie__titulo {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg);
    margin-bottom: 8px;
}

.pie__columna a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    text-decoration: none;
    transition: color 0.2s;
}

.pie__columna a:hover {
    color: var(--fg);
}

.redes {
    display: flex;
    gap: 10px;
}

.redes a {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color 0.2s, transform 0.2s var(--ease-out);
}

.redes a:hover {
    border-color: var(--fg);
    transform: translateY(-2px);
}

.redes svg {
    width: 20px;
    height: 20px;
    fill: var(--fg);
}

.pie__legal {
    margin-top: 48px;
    padding-top: 24px;
    /* la raya solo a lo ancho del contenido, no del margen */
    background: linear-gradient(var(--line), var(--line)) no-repeat content-box top / 100% 1px;
}

/* ---------- Menú de celular: una hoja con el índice ---------- */
.boton-menu {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.boton-menu span,
.menu-movil__cerrar span,
.visor__cerrar span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    translate: -50% -50%;
}

.boton-menu {
    color: var(--fg);
}

.boton-menu span:first-child {
    margin-top: -4px;
}

.boton-menu span:last-child {
    margin-top: 4px;
    width: 12px;
    margin-left: 3px;
}

.menu-movil {
    position: fixed;
    inset: 0;
    z-index: 260;
    padding: 10px;
    background: rgba(16, 16, 18, 0.6);
    opacity: 0;
    transition: opacity 0.35s;
}

.menu-movil.abierto {
    opacity: 1;
}

.menu-movil__hoja {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
    background-color: var(--paper);
    background-image: var(--grain-papel), linear-gradient(170deg, var(--paper) 60%, var(--paper-shade));
    background-blend-mode: multiply, normal;
    color: var(--ink);
    border-radius: 4px;
    box-shadow: var(--shadow);
    transform: translateY(-104%) rotate(-2deg);
    transition: transform 0.6s var(--ease-out);
}

.menu-movil.abierto .menu-movil__hoja {
    transform: translateY(0) rotate(0);
}

.menu-movil__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-movil__titulo {
    color: var(--accent-ink);
    font-size: 26px;
}

.menu-movil__cerrar {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(22, 22, 26, 0.2);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

.menu-movil__cerrar span:first-child,
.visor__cerrar span:first-child {
    rotate: 45deg;
}

.menu-movil__cerrar span:last-child,
.visor__cerrar span:last-child {
    rotate: -45deg;
}

.menu-movil__lista {
    margin: auto 0;
    padding: 28px 0;
}

.menu-movil__lista li {
    border-bottom: 1.5px dashed rgba(22, 22, 26, 0.18);
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.4s, translate 0.5s var(--ease-out);
}

.menu-movil.abierto .menu-movil__lista li {
    opacity: 1;
    translate: 0 0;
}

.menu-movil.abierto .menu-movil__lista li:nth-child(1) { transition-delay: 0.18s; }
.menu-movil.abierto .menu-movil__lista li:nth-child(2) { transition-delay: 0.23s; }
.menu-movil.abierto .menu-movil__lista li:nth-child(3) { transition-delay: 0.28s; }
.menu-movil.abierto .menu-movil__lista li:nth-child(4) { transition-delay: 0.33s; }
.menu-movil.abierto .menu-movil__lista li:nth-child(5) { transition-delay: 0.38s; }
.menu-movil.abierto .menu-movil__lista li:nth-child(6) { transition-delay: 0.43s; }

.menu-movil__lista a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    font-size: clamp(32px, 9vw, 44px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-decoration: none;
}

.menu-movil__num {
    font-family: var(--hand);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accent-ink);
    min-width: 28px;
}

.menu-movil__pie {
    display: grid;
    gap: 14px;
    font-size: 15px;
    color: var(--ink-muted);
    text-align: center;
}

.menu-movil__pie .btn {
    width: 100%;
}

.menu-movil__pie a[data-tel] {
    white-space: nowrap;
}

.menu-movil__pie a[data-tel] {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- Visor de fotos ---------- */
.visor[open]~.barra-wa {
    opacity: 0;
    pointer-events: none;
}

[data-visor] {
    display: block;
    cursor: zoom-in;
}

.visor {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fg);
    overflow: hidden;
}

.visor::backdrop {
    background: rgba(10, 10, 12, 0.94);
}

.visor[open] {
    display: grid;
    place-items: center;
    animation: visor-entra 0.35s var(--ease-out);
}

@keyframes visor-entra {
    from { opacity: 0; }
}

.visor__marco {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 72px 16px 96px;
    max-width: 100%;
    max-height: 100%;
}

.visor__img {
    max-width: min(92vw, 1100px);
    max-height: calc(100dvh - 190px);
    width: auto;
    height: auto;
    background: var(--paper);
    padding: 8px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9);
    touch-action: pan-y;
    transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.visor[open] .visor__img {
    animation: visor-foto 0.5s var(--ease-out);
}

@keyframes visor-foto {
    from { transform: scale(0.94) rotate(-1.5deg); opacity: 0; }
}

.visor__pie {
    max-width: 52ch;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}

.visor__boton {
    position: fixed;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(24, 24, 27, 0.8);
    color: var(--fg);
    font: 600 22px var(--font);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.visor__boton:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--ink);
}

.visor__cerrar {
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
}

.visor__ant,
.visor__sig {
    top: 50%;
    translate: 0 -50%;
}

.visor__ant {
    left: 14px;
}

.visor__sig {
    right: 14px;
}

.visor__cuenta {
    position: fixed;
    left: 50%;
    bottom: calc(26px + env(safe-area-inset-bottom));
    translate: -50% 0;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

/* salpicadura al tocar un botón de WhatsApp */
.salpicada {
    position: fixed;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%;
    background: radial-gradient(circle, rgba(245, 242, 234, 0.55) 0 38%, rgba(245, 242, 234, 0) 70%);
    pointer-events: none;
    z-index: 400;
    animation: salpica 0.55s var(--ease-out) forwards;
}

@keyframes salpica {
    from { transform: scale(0.1) rotate(0deg); opacity: 1; }
    to { transform: scale(1.4) rotate(40deg); opacity: 0; }
}

/* Barra fija de WhatsApp (celular) */
.barra-wa {
    display: none;
}

/* ---------- Aparición ---------- */
.js [data-revelar] {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out);
}

.js [data-revelar].visto {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .muestras {
        grid-template-columns: repeat(5, 1fr);
    }

    .menu {
        display: none;
    }

    .boton-menu {
        display: block;
    }

    .pie__rejilla {
        grid-template-columns: 1fr 1fr;
    }

    .diplomas {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .preguntas__rejilla {
        grid-template-columns: 1fr;
    }

    .preguntas .encabezado {
        position: static;
    }

    .pasos__lista {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 420px;
        margin-inline: auto;
    }

    /* en una columna, un tramo de lápiz bajo cada paso que lleva al siguiente */
    .pasos__lista::before {
        display: none;
    }

    .pasos__lista {
        gap: 16px;
    }

    .paso:not(:last-child)::after {
        content: '';
        height: 44px;
        margin-top: 10px;
        border-left: 2px dashed rgba(242, 239, 232, 0.28);
        transform-origin: top center;
        transition: transform 0.6s var(--ease-out) calc(var(--i, 0) * 0.25s + 0.6s);
    }

    .js .pasos__lista:not(.visto) .paso::after {
        transform: scaleY(0);
    }

    .portada__rejilla,
    .porque__rejilla,
    .etapa--oleo,
    .voces__rejilla,
    .maestro__rejilla,
    .ubicacion__rejilla {
        grid-template-columns: 1fr;
    }

    .portada__collage {
        max-width: 520px;
        margin-inline: auto;
        padding: 0 0 48px 32px;
    }

    .etapa__collage {
        max-width: 500px;
        margin-inline: auto;
    }

    .maestro__foto {
        position: relative;
        top: 0;
        max-width: 460px;
        margin-inline: auto;
    }

    .planes {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 540px;
        margin-top: 72px;
    }

    .plan--destacado {
        order: -1;
    }

    .direccion {
        margin: -48px 12px 0;
    }

    .voces__video {
        order: 2;
    }
}

@media (max-width: 640px) {
    /* cabecera: WhatsApp solo con el ícono para que quepan el nombre y el menú */
    /* polaroids: se deslizan con el dedo */
    .citas {
        display: flex;
        gap: 16px;
        margin-inline: calc(var(--gutter) * -1);
        padding: 20px var(--gutter) 28px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .citas::-webkit-scrollbar {
        display: none;
    }

    .cita {
        flex: 0 0 62%;
        scroll-snap-align: start;
    }

    .cita p {
        font-size: 22px;
    }

    .cita-grande {
        flex-direction: column;
        padding: 18px 16px;
        gap: 14px;
    }

    .cita-grande__cuerpo {
        justify-items: center;
    }

    .cabecera .cabecera__wa {
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .pie__columna a {
        min-height: 44px;
    }

    .cabecera__wa span {
        display: none;
    }

    .cabecera__wa .ico {
        width: 22px;
        height: 22px;
    }

    .pie__rejilla {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 36px;
    }

    .pie__marca {
        display: grid;
        justify-items: center;
    }

    .pie__nombre {
        max-width: none;
    }

    .pie__nota {
        transform-origin: center;
    }

    .pie__columna {
        justify-items: center;
    }

    /* las secciones del pie en renglones corridos, no una por línea */
    nav.pie__columna {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 20px;
    }

    nav.pie__columna .pie__titulo {
        flex-basis: 100%;
        text-align: center;
    }

    .visor__ant,
    .visor__sig {
        top: auto;
        bottom: calc(14px + env(safe-area-inset-bottom));
        translate: none;
    }
    /* texto centrado en celular; las listas se quedan a la izquierda para leerse bien */
    .portada__rejilla,
    .porque__texto,
    .encabezado,
    .etapa__ficha,
    .etapa__texto,
    .taller-vivo,
    .graduacion__pie,
    .voces__citas>.ceja,
    .cita-grande,
    .voces__nota,
    .maestro__texto>.ceja,
    .maestro__texto>.h2,
    .maestro__texto>.texto,
    .diplomas__titulo,
    .direccion,
    .pie {
        text-align: center;
    }

    .texto,
    .entrada,
    .perfiles__texto,
    .graduacion__frase {
        margin-inline: auto;
        text-wrap: balance;
    }

    .acciones,
    .atajos-wa,
    .perfiles__tabs,
    .etapa__cabeza,
    .etapa__ficha,
    .direccion__acciones,
    .pie__fila,
    .redes {
        justify-content: center;
    }

    .garantias {
        align-items: center;
    }

    /* centrado, el pie de la graduación cae sobre una zona clara de la foto */
    .graduacion::after {
        background: linear-gradient(180deg, var(--bg) 0, transparent 18%, transparent 34%, rgba(16, 16, 18, 0.96) 82%);
    }

    .encabezado--fila,
    .pie__fila {
        align-items: center;
    }

    .nota--obras,
    .nota--etapa,
    .preguntas__nota {
        transform: rotate(-2deg);
    }

    /* en celular la flecha a mano se amontona con «Ver precios» */
    .garabato {
        display: none;
    }

    .cierre__marco {
        transform: rotate(-1.2deg);
    }

    .cierre__marco::before,
    .cierre__marco::after {
        width: 84px;
        height: 26px;
    }

    .cierre__marco::before {
        left: -10px;
    }

    .cierre__marco::after {
        right: -10px;
    }

    .pregunta summary {
        font-size: 18px;
    }

    .pregunta__respuesta {
        padding-right: 0;
    }
    body {
        font-size: 16px;
    }

    .cabecera__fila {
        min-height: 64px;
        gap: 12px;
    }

    .marca__logo {
        width: 44px;
    }

    .marca__nombre {
        font-size: 15px;
    }

    .titular {
        font-size: clamp(42px, 12vw, 56px);
    }

    /* portada: la foto entra en la primera pantalla, entre el titular y el texto */
    .portada {
        padding-top: 24px;
    }

    .portada__rejilla {
        row-gap: 0;
    }

    .portada__texto {
        display: contents;
    }

    .portada .ceja {
        order: 1;
        margin-bottom: 12px;
    }

    .titular {
        order: 2;
    }

    .portada__collage {
        order: 3;
        width: 100%;
        max-width: 420px;
        height: 264px;
        margin: 26px auto 0;
        padding: 0;
    }

    .entrada {
        order: 4;
        margin-top: 18px;
    }

    .solo-ancho {
        display: none;
    }

    .acciones {
        order: 5;
        margin-top: 24px;
        gap: 4px;
    }

    .garantias {
        order: 6;
    }

    .atajos-wa {
        order: 7;
        margin-top: 16px;
    }

    .atajos-wa__etiqueta {
        flex-basis: 100%;
        margin-right: 0;
    }

    .foto-cinta--grande {
        position: absolute;
        right: 2%;
        top: 0;
        width: 55%;
        padding: 6px;
    }

    .foto-cinta--chica {
        width: 41%;
        left: 3%;
        top: 34px;
        bottom: auto;
        padding: 6px;
    }

    .portada__collage .foto-cinta::before {
        width: 76px;
        height: 22px;
        top: -10px;
    }

    .nota--portada {
        right: auto;
        left: 22%;
        bottom: -6px;
        max-width: 190px;
        padding: 10px 14px 8px;
        font-size: 20px;
    }

    .nota--portada span {
        font-size: 18px;
        margin-top: 0;
    }

    .cinta-marco {
        margin-block: -56px;
    }

    .cinta {
        padding: 10px 0 8px;
    }

    .btn {
        padding: 0 18px;
        font-size: 16px;
        white-space: nowrap;
    }

    .acciones .btn,
    .plan__cta,
    .precios__cta .btn,
    .cierre .btn {
        width: 100%;
    }

    .garantias {
        flex-direction: column;
        gap: 8px;
    }

    .garantias li:not(:first-child)::before {
        display: none;
    }

    .muestras {
        grid-template-columns: repeat(3, 1fr);
    }

    .taller-vivo {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .taller-vivo img {
        height: 176px;
    }

    .receta {
        padding: 44px 24px 28px;
    }

    .encabezado--fila {
        flex-direction: column;
        align-items: center;
    }

    .obra img {
        height: 320px;
    }

    .obras__pie {
        gap: 14px;
    }

    .trayectoria li {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .diplomas {
        display: flex;
        max-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .diplomas::-webkit-scrollbar {
        display: none;
    }

    .diplomas img {
        height: 170px;
    }

    .diplomas__ayuda {
        display: block;
    }

    .planes {
        margin-top: 84px;
    }

    .plan {
        padding: 32px 22px 28px;
    }

    .sello {
        right: 8px;
        top: -62px;
        width: 112px;
        height: 112px;
    }

    .sello__centro {
        font-size: 22px;
    }

    .precios__visita {
        padding: 18px 20px;
    }

    .direccion {
        padding: 44px 24px 28px;
        margin: -32px 4px 0;
    }

    .direccion__acciones .btn {
        width: 100%;
    }

    .pie__fila {
        flex-direction: column;
        align-items: center;
    }

    .barra-wa {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 150;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 62px;
        padding: 8px 18px;
        border-radius: 999px;
        background: var(--accent);
        color: var(--ink);
        font-weight: 800;
        font-size: 17px;
        line-height: 1.2;
        text-decoration: none;
        box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8);
        transform: translateY(0);
        opacity: 1;
        transition: transform 0.35s var(--ease-out), opacity 0.35s;
    }

    .barra-wa .ico {
        width: 26px;
        height: 26px;
        fill: currentColor;
    }

    .barra-wa__texto small {
        display: block;
        font-size: 15px;
        font-weight: 500;
    }

    .barra-wa.escondida {
        transform: translateY(140%);
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .js [data-revelar] {
        opacity: 1;
        translate: none;
    }

    .js .pincel:not(.pintado)>svg {
        transform: none;
    }

    .js .receta:not(.visto) .palomita {
        stroke-dashoffset: 0;
    }

    .js .muestras:not(.visto) .muestra::before {
        clip-path: none;
    }

    .js .pasos__lista:not(.visto) .paso__num svg {
        stroke-dashoffset: 0;
    }

    .intro [data-intro],
    .intro .portada__collage>* {
        opacity: 1;
    }
}