:root {
    --negro: #171717;
    --negro-suave: #24211f;
    --blanco: #ffffff;
    --marfil: #f8f6f3;
    --beige: #ece5de;
    --gris: #77716b;
    --linea: #e8e3dd;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--negro);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.encabezado {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 78px;
    padding: 12px 5.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--linea);
    backdrop-filter: blur(12px);
}
.logo {
    display: inline-block;
    flex: 0 0 auto;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 2.4px;
}
.logo-nombre { display: block; font-size: 20px; }
.logo small {
    display: block;
    margin-top: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 4px;
}
.menu { display: flex; align-items: center; justify-content: center; gap: 27px; }
.menu a {
    position: relative;
    padding: 9px 0;
    font-size: 12px;
    letter-spacing: .35px;
}
.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 0;
    height: 1px;
    background: var(--negro);
    transition: width .2s ease;
}
.menu a:hover::after { width: 100%; }
.boton-encabezado {
    flex: 0 0 auto;
    padding: 12px 18px;
    background: var(--negro);
    color: var(--blanco);
    border: 1px solid var(--negro);
    border-radius: 30px;
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.boton-encabezado:hover { background: var(--blanco); color: var(--negro); }

/* PORTADA */
.portada {
    min-height: 530px;
    padding: 42px 7%;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 35px;
    background: var(--marfil);
    overflow: hidden;
}
.contenido-portada { max-width: 500px; padding: 20px 0; }
.subtitulo {
    font-size: 9px;
    letter-spacing: 2.6px;
    font-weight: 700;
    line-height: 1.8;
}
.portada h1 {
    margin: 18px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(39px, 4.2vw, 57px);
    font-weight: 400;
    line-height: 1.12;
}
.descripcion {
    max-width: 420px;
    color: var(--gris);
    font-size: 13px;
    line-height: 1.9;
}
.boton {
    display: inline-block;
    margin-top: 24px;
    padding: 14px 22px;
    background: var(--negro);
    color: var(--blanco);
    border: 1px solid var(--negro);
    border-radius: 2px;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.boton:hover { background: transparent; color: var(--negro); transform: translateY(-2px); }
.imagen-portada {
    width: 100%;
    max-width: 560px;
    height: 100%;
    max-height: 650px;
    justify-self: end;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.imagen-portada img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    object-position: center bottom;
}

/* ENCABEZADOS DE SECCIÓN */
.seccion { padding: 76px 6%; }
.encabezado-seccion {
    max-width: 700px;
    margin: 0 auto 34px;
    text-align: center;
}
.encabezado-seccion h2 {
    margin: 8px 0 4px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(32px, 3.8vw, 43px);
    font-weight: 400;
    line-height: 1.2;
}
.frase-seccion {
    color: var(--gris);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
}
.seccion-servicios { background: var(--blanco); }

/* TARJETAS DE SERVICIOS */
.rejilla-servicios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1160px;
    margin: 0 auto;
    align-items: stretch;
}
.tarjeta-servicio {
    min-width: 0;
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    border: 1px solid #e7e0d9;
    border-radius: 17px;
    overflow: hidden;
    background: var(--blanco);
    box-shadow: 0 5px 18px rgba(30, 24, 20, .055);
}
.foto-servicio {
    min-width: 0;
    min-height: 100%;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: linear-gradient(145deg, #eee8e1, #e1d8ce);
}
.foto-peeling { background: linear-gradient(145deg, #eee8e1, #e6ded6); }
.foto-limpieza { background: linear-gradient(145deg, #e8e1da, #dcd2c8); }
.foto-servicio span, .marco-accesorio span {
    padding: 8px 11px;
    background: rgba(255,255,255,.78);
    color: #6f675f;
    border-radius: 20px;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.contenido-servicio {
    min-width: 0;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
}
.numero-servicio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: #91877d;
    font-size: 9px;
    letter-spacing: 1px;
}
.numero-servicio span {
    color: var(--negro);
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.tarjeta-servicio h3 {
    margin: 13px 0 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 400;
    line-height: 1.18;
}
.frase-servicio { font-size: 12px; font-weight: 600; line-height: 1.6; }
.descripcion-servicio {
    margin-top: 10px;
    color: var(--gris);
    font-size: 11px;
    line-height: 1.75;
}
.incluye { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--linea); }
.incluye h4 {
    margin-bottom: 9px;
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.incluye ul { list-style: none; display: grid; gap: 6px; }
.incluye li {
    position: relative;
    padding-left: 16px;
    color: #5f5a55;
    font-size: 10px;
    line-height: 1.5;
}
.incluye li::before { content: "✓"; position: absolute; left: 0; color: var(--negro); font-weight: 700; }
.nota-servicio {
    margin-top: 14px;
    padding: 11px 12px;
    background: var(--marfil);
    color: #625c55;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.6;
}
.precio-servicio {
    margin-top: auto;
    padding-top: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.precio-servicio span { color: var(--gris); font-size: 10px; }
.precio-servicio strong {
    padding: 9px 16px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: 24px;
    font-size: 13px;
    white-space: nowrap;
}
.domicilio { margin-top: 9px; color: var(--gris); font-size: 10px; text-align: right; }
.domicilio strong { color: var(--negro); }

/* ACCESORIOS */
.seccion-accesorios { background: var(--marfil); }
.rejilla-accesorios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.tarjeta-accesorio {
    min-width: 0;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    border: 1px solid #e7e0d9;
    border-radius: 17px;
    overflow: hidden;
    background: var(--blanco);
    box-shadow: 0 5px 18px rgba(30, 24, 20, .045);
}
.marco-accesorio {
    min-height: 230px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(145deg, #eee8e1, #ded5cb);
}
.contenido-accesorio {
    min-height: 230px;
    padding: 22px 19px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.categoria-accesorio { color: var(--gris); font-size: 8px; letter-spacing: 1.5px; }
.contenido-accesorio h3 {
    margin: 11px 0 8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 400;
}
.contenido-accesorio > p:not(.categoria-accesorio) { color: var(--gris); font-size: 11px; line-height: 1.7; }
.precio-accesorio {
    margin-top: auto;
    padding: 8px 15px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: 22px;
    font-size: 12px;
    font-weight: 500;
}

/* CONTACTO Y PIE */
.seccion-contacto {
    margin: 28px 3% 18px;
    padding: 30px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: 18px;
}
.seccion-contacto h2 {
    margin-top: 7px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.15;
}
.detalle-contacto { font-family: Georgia, 'Times New Roman', serif; font-size: 52px; font-weight: 300; }
.boton-claro { margin-top: 0; background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.boton-claro:hover { background: transparent; color: var(--blanco); }
.pie-pagina {
    padding: 22px 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #101010;
    color: var(--blanco);
    font-size: 9px;
    line-height: 1.7;
}
.frase-footer { font-family: Georgia, 'Times New Roman', serif; font-size: 13px; font-style: italic; }
.logo-footer .logo-nombre { font-size: 17px; }

/* AJUSTES PARA CELULARES */
@media (max-width: 900px) {
    .encabezado { padding-left: 4%; padding-right: 4%; gap: 14px; }
    .menu { gap: 17px; }
    .boton-encabezado { padding: 11px 14px; }
    .portada { padding: 35px 5%; gap: 22px; }
    .rejilla-servicios { grid-template-columns: 1fr; max-width: 700px; }
    .tarjeta-servicio { grid-template-columns: .75fr 1.25fr; }
    .rejilla-accesorios { grid-template-columns: 1fr; max-width: 700px; }
}
@media (max-width: 600px) {
    html { scroll-padding-top: 105px; }
    .encabezado {
        min-height: 0;
        padding: 11px 0 0;
        flex-direction: column;
        gap: 8px;
    }
    .logo { padding: 0 12px 2px; }
    .logo-nombre { font-size: 19px; letter-spacing: 2.7px; }
    .menu {
        width: 100%;
        justify-content: flex-start;
        gap: 0;
        overflow-x: auto;
        padding: 0 7px;
        border-top: 1px solid var(--linea);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { flex: 0 0 auto; padding: 13px 14px; font-size: 11px; }
    .boton-encabezado { display: none; }
    .portada {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 32px 0 0;
    }
    .contenido-portada { padding: 0 7%; text-align: center; }
    .portada .subtitulo { font-size: 8px; letter-spacing: 2px; }
    .portada h1 { margin: 12px 0; font-size: 36px; }
    .descripcion { margin: 0 auto; font-size: 12px; line-height: 1.75; }
    .portada .boton { margin-top: 17px; }
    .detalle-portada { display: none; }
    .imagen-portada {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        margin: 0;
        justify-self: stretch;
        align-items: flex-end;
    }
    .imagen-portada img {
        width: 100%;
        max-height: none;
        height: auto;
        object-fit: contain;
        object-position: center bottom;
    }
    .seccion { padding: 54px 5%; }
    .encabezado-seccion { margin-bottom: 25px; }
    .encabezado-seccion h2 { font-size: 32px; }
    .frase-seccion { font-size: 14px; }
    .rejilla-servicios { gap: 17px; }
    .tarjeta-servicio { grid-template-columns: 1fr; }
    .foto-servicio {
        min-height: 0;
        aspect-ratio: 16 / 9;
        padding: 14px;
    }
    .contenido-servicio { padding: 20px 19px 18px; }
    .tarjeta-servicio h3 { font-size: 25px; }
    .descripcion-servicio { font-size: 12px; }
    .incluye li { font-size: 11px; }
    .rejilla-accesorios { gap: 17px; }
    .tarjeta-accesorio { grid-template-columns: 1fr; }
    .marco-accesorio { min-height: 0; aspect-ratio: 16 / 9; padding: 14px; }
    .contenido-accesorio { min-height: 195px; padding: 19px; }
    .seccion-contacto {
        margin: 12px 4% 14px;
        padding: 26px 7%;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .detalle-contacto { font-size: 35px; }
    .seccion-contacto h2 { font-size: 31px; }
    .boton-claro { margin-top: 10px; }
    .pie-pagina { padding: 22px 7%; flex-direction: column; text-align: center; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* PORTADA EDITORIAL: fotografía a pantalla completa con navegación superpuesta */
.encabezado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 92px;
    padding: 18px 6%;
    background: linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.48));
    border-bottom: 1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
}
.portada {
    position: relative;
    isolation: isolate;
    min-height: min(820px, 100vh);
    padding: 150px 7% 70px;
    display: flex;
    align-items: center;
    background: #eee9e3;
}
.portada::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(248,246,243,.93) 0%, rgba(248,246,243,.78) 36%, rgba(248,246,243,.12) 72%, rgba(248,246,243,.04) 100%);
    pointer-events: none;
}
.imagen-portada {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    display: block;
}
.imagen-portada img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center 38%;
}
.contenido-portada {
    position: relative;
    z-index: 2;
    max-width: 530px;
    padding: 28px 0;
}
.portada h1 {
    font-size: clamp(46px, 5.2vw, 72px);
    letter-spacing: -.8px;
}
.portada .descripcion {
    max-width: 410px;
    color: #514b45;
    font-size: 14px;
}
.portada .boton {
    padding: 15px 25px;
    border-radius: 0;
    letter-spacing: 1.5px;
}
.detalle-portada {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 42px;
    color: #5e5750;
}
.detalle-portada span {
    display: block;
    width: 42px;
    height: 1px;
    background: #8b8178;
}
.detalle-portada p {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-style: italic;
}
@media (max-width: 900px) {
    .encabezado { padding-left: 4%; padding-right: 4%; }
    .portada { min-height: 720px; padding: 145px 6% 60px; }
}
@media (max-width: 600px) {
    .encabezado {
        position: absolute;
        top: 0;
        min-height: 0;
        padding: 12px 0 0;
        flex-direction: column;
        gap: 7px;
        background: rgba(255,255,255,.88);
        border-bottom: 1px solid rgba(255,255,255,.7);
    }
    .logo { padding: 0 12px 3px; }
    .logo-nombre { font-size: 18px; letter-spacing: 2.5px; }
    .logo small { font-size: 7px; letter-spacing: 3.5px; }
    .menu {
        width: 100%;
        justify-content: center;
        gap: 0;
        overflow-x: auto;
        padding: 0 4px;
        border-top: 1px solid rgba(0,0,0,.08);
    }
    .menu a { flex: 0 0 auto; padding: 12px 11px; font-size: 10px; }
    .portada {
        min-height: 760px;
        padding: 185px 7% 45px;
        align-items: flex-end;
    }
    .portada::before {
        background: linear-gradient(0deg, rgba(248,246,243,.98) 0%, rgba(248,246,243,.91) 34%, rgba(248,246,243,.22) 76%, rgba(248,246,243,.08) 100%);
    }
    .imagen-portada img {
        object-position: center top;
    }
    .contenido-portada {
        width: 100%;
        max-width: 480px;
        padding: 20px 0 0;
        text-align: left;
    }
    .portada .subtitulo { font-size: 8px; letter-spacing: 2px; }
    .portada h1 { margin: 12px 0; font-size: 42px; }
    .descripcion { margin: 0; font-size: 12px; }
    .portada .boton { margin-top: 18px; }
    .detalle-portada { display: flex; margin-top: 25px; }
}