/* 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%; }
/* 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); }
/* «Quiénes somos» (29-10-2026): en Hueso sobre la sección Hueso no se veía (1:1); en las secciones claras, Plomo (5,2:1) */
.hm-two .v3-kicker { color: var(--plomo); }
.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; }
/* Solo si es enlace: con Connect en el taller la tarjeta no lleva a ningún sitio y no reacciona (01-11-2026) */
html:not(.is-touch) .hm-tool[href]: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; }
}

/* Con la auditoría oculta («hidden» en i18n/pages.json, 31-10-2026) queda una sola entrada: ocupa el sitio de las dos */
@media (min-width: 821px) {
    .hm-start:has(> .hm-start__opt[hidden]) > .hm-start__opt:not([hidden]) { grid-column: span 2; }
}

@media (max-width: 820px) {
    /* La esfera y las sillas están abajo en la foto: fundido corto, para que el texto empiece debajo de ellas.
       Cambios de la home (29-10-2026): «Solicitar diagnóstico» se ve entero sin bajar y por encima de los botones flotantes
       (cookies y WhatsApp, abajo). La foto entra en el flujo y ocupa lo que dejan el texto y esa franja: en los móviles,
       como mucho el 52svh de antes y menos en los bajos (nunca por debajo de 24svh); en tabletas, hasta 62svh (el alto de
       la portada apilada del sistema), para que no quede una franja vacía bajo el texto. El texto pisa 4svh del fundido */
    .hm-cover.v3-cover--stack {
        --hm-float-zone: calc(var(--site-edge, .75rem) + 3.6rem);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 100svh;
        padding: 0 var(--gutter) var(--hm-float-zone);
    }
    .hm-cover.v3-cover--stack .v3-cover__media {
        position: relative;
        inset: auto;
        flex: 1 1 0;
        height: auto;
        min-height: 24svh;
        max-height: 62svh;
        margin: 0 calc(var(--gutter) * -1) -4svh;
    }
    .hm-cover .v3-cover__content { flex: none; }
    /* Cuando la foto es tan baja que se recorta en alto, el recorte guarda la terraza (sillas y esfera), no el cielo */
    .hm-cover { --cover-stack-pos: 92% 80%; }
    /* En pantallas bajas (un SE con las barras de Safari) el titular y los aires se ajustan al alto; desde unos 660px de alto, como siempre */
    .hm-cover .v3-cover__title { font-size: min(clamp(2.6rem, 11.5vw, 3.6rem), 7svh); }
    .hm-cover .v3-cover__intro { margin: clamp(.75rem, 2.3svh, 1.2rem) 0 clamp(1.1rem, 3.4svh, 1.8rem); }
    .hm-cover .v3-cover__actions { row-gap: clamp(.6rem, 1.9svh, 1rem); }
    /* En móvil, solo «Solicitar diagnóstico» (29-10-2026, usuario): fuera «Hablemos de tu proyecto», menos cosas en pantalla
       y más foto. El botón sigue por encima de la franja de los flotantes (--hm-float-zone) */
    .hm-cover .v3-cover__actions .v3-textlink { display: none; }
    .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%; }
    /* Con la frase al tamaño común (29-10-2026) la foto va algo más a la izquierda (antes 71 %): la pared de la casa queda
       al 85-88 % del ancho y enmarca la frase en vez de cruzarla. La foto mide 100lvh de alto (desde el 31-10-2026; antes 100svh)
       y 1,792 veces eso de ancho, así que la pared está en 65,5vw + 10,8lvh: la frase acaba 12 px antes (las traducciones largas se parten más) */
    .hm-contact .v3-contact__media img { object-position: 65.5% 50%; }
    /* La frase más abajo (29-10-2026, usuario): en 18svh caía en la franja más clara del cielo (Hueso 2,4-2,8:1); en 33svh
       queda sobre las montañas, donde la foto ya es oscura (5-9,4:1). La foto escala con el alto, así que la frase también.
       En escritorio se queda en su sitio: más abajo «también.» cae sobre la bruma clara y se lee peor */
    .hm-contact .v3-contact__caption { top: 33lvh; right: calc(34.5vw - 10.8lvh + .75rem); }

}

@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); }
/* La primera parte se parte por la coma (29-10-2026): «te lo diremos.» va entera a la línea siguiente cuando no cabe (en
   escritorio, por el ancho de la frase, para no cruzar la pared de la casa); equilibrada se partía tras «cuidarlo» */
.hm-contact .v3-contact__caption > span:first-child { text-wrap: wrap; }
.hm-contact .v3-contact__caption .hm-keep { white-space: nowrap; }