/* Home nueva (prefijo hm-): "un estudio pequeño que trata cada proyecto como si fuera suyo y no coge más de lo que puede
   cuidar". Las secciones que se conservan de la home v3 (clientes, manifiesto, problema, proceso y pausa) usan home-v3.css */

.hm { --cover-focus: 70% 55%; --cover-focus-x: 70%; }
.hm-cover { --cover-focus: 70% 72%; --cover-focus-x: 70%; --cover-stack-pos: 92% 50%; }
.hm-cover .v3-cover__content { max-width: 52rem; }
/* Velo del texto en café muy oscuro en lugar de gris: sobre la niebla azulada, el gris la enfriaba (decisión del usuario, opción A) */
.hm-cover .v3-cover__media::after {
    background:
        linear-gradient(90deg, rgba(38, 25, 20, .74) 0%, rgba(38, 25, 20, .34) 40%, transparent 66%),
        linear-gradient(0deg, rgba(30, 21, 18, .75) 0%, transparent 30%),
        linear-gradient(180deg, rgba(30, 21, 18, .35) 0%, transparent 22%);
}
.hm-cover .v3-cover__title { font-size: clamp(3.2rem, 6.4vw, 6.8rem); }

/* ---------- Clientes: logos reales de la web original, en un solo tono carbón sobre la franja clara ---------- */

.hm-clients .v3-clients__track span { display: inline-flex; align-items: center; }
.hm-clients .v3-clients__track img { display: block; width: auto; height: clamp(1.7rem, 2.5vw, 2.3rem); max-width: 9.5rem; object-fit: contain; filter: brightness(0); opacity: .58; }

/* ---------- Lo que hacemos: los seis servicios, en texto (sin fotos: la atención va a lo que ofrecemos) ---------- */

.hm-services { padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2)); background: var(--carbon); }
.hm-services .v3-head { margin-bottom: clamp(3rem, 7vh, 4.5rem); }

.hm-svcs { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(245, 244, 241, .12); }

/* Una fila por servicio; al pasar (o, en táctil, al quedar en el centro) la luz recorre su línea */
.hm-svc {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr) 1.4rem;
    gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.7rem, 3.6vh, 2.3rem) 0;
    border-bottom: 1px solid rgba(245, 244, 241, .12);
    color: var(--hueso);
    text-decoration: none;
}
.hm-svc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--luz), .95), rgba(var(--luz), .35) 55%, rgba(var(--luz), 0));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--ease-curtain);
}
.hm-svc__n { align-self: start; padding-top: .5rem; color: rgba(var(--luz), .55); font-family: var(--serif); font-size: 1.05rem; font-style: italic; font-weight: 300; transition: color var(--glow-dur) var(--glow-ease); }
.hm-svc__head { display: grid; gap: .4rem; }
.hm-svc__tag { color: rgba(245, 244, 241, .46); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hm-svc__name { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; transition: transform 1s var(--ease-curtain); }
.hm-svc__line { color: rgba(245, 244, 241, .66); font-family: var(--serif); font-size: 1.05rem; font-style: italic; font-weight: 300; }
.hm-svc__desc { max-width: 30rem; color: rgba(245, 244, 241, .58); font-size: .95rem; font-weight: 300; line-height: 1.65; }
.hm-svc__go { width: 1.2rem; height: 1.2rem; color: rgba(245, 244, 241, .5); transition: transform .8s var(--ease-curtain), color var(--glow-dur) var(--glow-ease); }
html:not(.is-touch) .hm-svc:hover::after, .hm-svc:focus-visible::after, .hm-svc.is-focus::after { transform: scaleX(1); }
html:not(.is-touch) .hm-svc:hover .hm-svc__n, .hm-svc:focus-visible .hm-svc__n, .hm-svc.is-focus .hm-svc__n { color: rgb(var(--luz-core)); }
html:not(.is-touch) .hm-svc:hover .hm-svc__name, .hm-svc:focus-visible .hm-svc__name, .hm-svc.is-focus .hm-svc__name { transform: translateX(.35rem); }
html:not(.is-touch) .hm-svc:hover .hm-svc__go, .hm-svc:focus-visible .hm-svc__go, .hm-svc.is-focus .hm-svc__go { color: rgb(var(--luz-core)); transform: translateX(4px); }

/* Por dónde empezar: las dos entradas pequeñas (diagnóstico y auditoría) */
.hm-start {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 2.4vw, 2.2rem);
    align-items: stretch;
    margin-top: clamp(4rem, 9vh, 6rem);
    padding-top: clamp(2.2rem, 5vh, 3rem);
    border-top: 1px solid rgba(245, 244, 241, .12);
}

.hm-start__q { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.hm-start__q em { color: var(--ciruela-luz); font-style: italic; }

.hm-start__opt {
    position: relative;
    display: grid;
    gap: .45rem;
    align-content: start;
    padding: 1.5rem 3.2rem 1.5rem 1.5rem;
    border: 1px solid rgba(245, 244, 241, .12);
    border-radius: 4px;
    color: var(--hueso);
    text-decoration: none;
    transition: border-color var(--glow-dur) var(--glow-ease), background-color var(--glow-dur) var(--glow-ease);
}

.hm-start__tag { color: rgba(var(--luz), .85); font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hm-start__name { font-family: var(--serif); font-size: 1.45rem; font-weight: 300; }
.hm-start__desc { color: rgba(245, 244, 241, .58); font-size: .88rem; font-weight: 300; line-height: 1.6; }
.hm-start__opt > svg { position: absolute; top: 1.6rem; right: 1.4rem; width: 1.1rem; height: 1.1rem; color: rgba(245, 244, 241, .6); transition: transform .8s var(--ease-curtain); }
html:not(.is-touch) .hm-start__opt:hover,
.hm-start__opt:focus-visible { border-color: rgba(var(--luz), .45); background: rgba(var(--luz), .04); }
html:not(.is-touch) .hm-start__opt:hover > svg,
.hm-start__opt:focus-visible > svg { transform: translateX(4px); }

/* ---------- Estudio pequeño (sección clara): el bodegón en banda y, debajo, el texto y los compromisos ---------- */

.hm-two {
    padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2));
    background: var(--hueso);
    color: var(--carbon);
}

.hm-two__media { position: relative; aspect-ratio: 2 / 1; margin-bottom: clamp(3.5rem, 8vh, 5.5rem); overflow: hidden; border-radius: 4px; }
.hm-two__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hm-two__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.hm-two__intro .v3-body { margin-bottom: 2rem; }
.hm-two .v3-title em { display: block; color: var(--ciruela); }
.hm-two .v3-body { color: rgba(17, 17, 17, .72); }


.hm-promises { display: grid; gap: 1.5rem; margin: 0; padding: 2.2rem 0 0; border-top: 1px solid rgba(17, 17, 17, .12); list-style: none; }
.hm-promise { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .2rem 1rem; }
.hm-promise__n { grid-row: 1 / span 2; color: var(--ciruela); font-family: var(--serif); font-size: 1.05rem; font-style: italic; font-weight: 300; }
.hm-promise h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 400; letter-spacing: -.01em; }
.hm-promise p { margin: 0; color: rgba(17, 17, 17, .66); font-size: .92rem; font-weight: 300; line-height: 1.6; }
.hm-two .v3-textlink { color: var(--carbon); }

/* ---------- Lo que ya puedes ver ---------- */

.hm-proof { padding: clamp(6rem, 14vh, 9rem) max(var(--gutter), calc((100% - 82rem) / 2)); background: var(--carbon-2, #16151a); }
.hm-proof .v3-head { margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.hm-proof .v3-title em { display: block; }
.hm-proof__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }

.hm-tool { display: grid; gap: .6rem; color: var(--hueso); text-decoration: none; }
.hm-tool__media { display: block; aspect-ratio: 16 / 10; margin-bottom: .8rem; overflow: hidden; border-radius: 4px; }
.hm-tool__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; filter: brightness(.85); transition: filter var(--glow-dur) var(--glow-ease), transform 1.6s var(--ease-out); }
.hm-tool__state { display: inline-flex; gap: .6rem; align-items: center; color: rgb(var(--luz-core)); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hm-tool__name { font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; letter-spacing: -.025em; line-height: 1; }
.hm-tool__line { color: rgba(245, 244, 241, .7); font-family: var(--serif); font-size: 1.1rem; font-style: italic; font-weight: 300; }
.hm-tool__go { display: inline-flex; gap: .45rem; align-items: center; margin-top: .3rem; color: rgba(245, 244, 241, .78); font-size: .78rem; font-weight: 500; }
.hm-tool__go svg { width: 1rem; height: 1rem; }
html:not(.is-touch) .hm-tool:hover .hm-tool__media img,
.hm-tool:focus-visible .hm-tool__media img { filter: none; transform: scale(1.03); }

/* Los pilotos, como en el taller: encendido si funciona, en brasa si sigue en el taller */
.hm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--luz-core)); box-shadow: 0 0 10px 2px rgba(var(--luz), .6); }
.hm-dot--ember { background: color-mix(in srgb, rgb(var(--luz)) 42%, #0f0f12); box-shadow: 0 0 8px 1px rgba(var(--luz), .2); }

.hm-bench { display: grid; gap: 1.2rem; align-content: start; }
.hm-bench__label { display: inline-flex; gap: .7rem; align-items: center; margin: 0; color: rgba(245, 244, 241, .55); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hm-bench__list { margin: 0 0 .8rem; padding: 0; list-style: none; border-top: 1px solid rgba(245, 244, 241, .1); }
.hm-bench__item { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .3rem .9rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(245, 244, 241, .1); }
.hm-bench__item .hm-dot { grid-row: 1 / span 3; margin-top: .55rem; }
.hm-bench__name { font-family: var(--serif); font-size: 1.45rem; font-weight: 300; letter-spacing: -.01em; }
.hm-bench__role { color: rgba(var(--luz), .7); font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hm-bench__line { color: rgba(245, 244, 241, .56); font-size: .9rem; font-weight: 300; line-height: 1.6; }
.hm-bench .v3-textlink { justify-self: start; color: var(--hueso); }


@media (max-width: 1180px) {
    .hm-start { grid-template-columns: 1fr 1fr; }
    .hm-start__q { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .hm-cover .v3-cover__title { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
    /* La esfera y las sillas están abajo en la foto: foto más baja y fundido corto, para que el texto empiece debajo de ellas */
    .hm-cover { --cover-stack-h: 52svh; --cover-stack-pad: 48svh; }
    .hm-cover .v3-cover__media { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
    .hm-cover .v3-kicker { gap: .6rem; font-size: .62rem; letter-spacing: .18em; white-space: nowrap; }
    .hm-cover .v3-kicker::before { width: 1.2rem; }
    .hm-cover.v3-cover--stack .v3-cover__media::after { background: linear-gradient(180deg, rgba(30, 21, 18, .45) 0%, transparent 24%, transparent 60%, rgba(30, 21, 18, .6) 100%); }
    .hm-services, .hm-two, .hm-proof { padding: 5.5rem 1.5rem; }
    .hm-start, .hm-proof__grid, .hm-two__body { grid-template-columns: 1fr; }
    .hm-svc { grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem; gap: .9rem 1rem; }
    .hm-svc__desc { grid-column: 2; grid-row: 2; }
    .hm-svc__go { grid-column: 3; grid-row: 1; align-self: start; margin-top: 1.6rem; }
    .hm-two__media { aspect-ratio: 4 / 3; margin-bottom: 3rem; }
    .hm-two__media img { object-position: 60% 60%; }
    .hm-contact .v3-contact__media img { object-position: 71% 50%; }

}

@media (prefers-reduced-motion: reduce) {
    .hm-tool__media img, .hm-svc::after, .hm-svc__name { transition: none; }
}

/* Contacto (15-10-2026): «también» en ciruela, la palabra que importa. Sobre la foto oscura, la ciruela clara del libro de marca */
.hm-contact .v3-contact__caption .hm-also { color: var(--ciruela-luz); }