/* =====================================================================================
   FICHAS DE TRATAMIENTO · propuesta D
   Se carga DESPUÉS de d.css y reutiliza sus variables, sus botones, su acordeón de
   preguntas y su visor de antes/después. Aquí solo está lo que es propio de la ficha.
   Prefijo .dl- para no pisar nada de la home.
   ===================================================================================== */

.dl-body { background: var(--k); }
/* El número de plano de la cabecera cuenta las secciones de la home: en una ficha no dice nada */
.dl-body .d-head__hud { display: none; }

/* El ancho de lectura de la ficha es menor que el de la home: es una página de texto */
.dl-sec { position: relative; padding: clamp(56px, 9vh, 120px) 0; }
.dl-sec--alt { background: var(--g2); }
/* Dos bloques seguidos del mismo color se leen como uno: el filete los separa */
.dl-sec--base + .dl-sec--base::before,
.dl-sec--alt + .dl-sec--alt::before {
    content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: var(--line);
}
.dl-sec__in { max-width: 1400px; }

.dl-h2 {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(26px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.01em;
    color: var(--w); margin: 0 0 clamp(16px, 2.4vh, 28px);
}
.dl-h2--centro { text-align: center; margin-left: auto; margin-right: auto; }
p.dl-h2--centro { margin-bottom: 10px; }

/* ---------- el texto del cliente ----------
   El HTML viene escrito en las fichas actuales: <p>, <strong>, <a>, <ul> y las
   píldoras .landing-chip. Se respeta tal cual; aquí solo se viste. */
.dl-cuerpo { color: var(--mut2); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.72; }
/* El aire entre párrafos lo pone el hermano, no el párrafo: así no se acumula al principio
   ni al final del bloque. Las dos reglas tienen el mismo peso, manda la segunda. */
.dl-cuerpo > * { margin: 0; }
.dl-cuerpo > * + * { margin-top: 1.05em; }
.dl-cuerpo strong, .dl-cuerpo b { color: var(--w); font-weight: 600; }
.dl-cuerpo em { color: var(--w); font-style: italic; }
.dl-cuerpo h3 {
    font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
    text-transform: uppercase; font-size: clamp(16px, 1.4vw, 21px); color: var(--w); letter-spacing: .01em; margin-top: 1.6em;
}
.dl-cuerpo a { color: var(--champ); text-decoration: none; border-bottom: 1px solid rgba(216, 185, 142, .38); transition: border-color .35s var(--e-expo); }
.dl-cuerpo a:hover { border-color: var(--champ); }
.dl-cuerpo ul { list-style: none; margin: 1.05em 0 0; padding: 0; display: grid; gap: 9px; }
.dl-cuerpo li { position: relative; padding-left: 20px; }
.dl-cuerpo li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 1px; background: var(--champ); }
.dl-cuerpo--centro { max-width: 68ch; margin-left: auto; margin-right: auto; text-align: center; }

/* Las píldoras que vienen dentro del texto: mismo cristal que los botones */
.dl-cuerpo .landing-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.15em; }
.dl-cuerpo .landing-chip {
    display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
    font-family: var(--f-m); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--w);
    background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .26); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}

/* =====================================================================================
   PORTADA
   ===================================================================================== */
.dl-hero { position: relative; min-height: min(84vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--k); }
.dl-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Dos degradados: uno general para que el texto se lea y otro lateral para el titular */
.dl-hero__shade {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top, var(--k) 2%, rgba(5, 5, 5, .86) 24%, rgba(5, 5, 5, .42) 56%, rgba(5, 5, 5, .55) 100%),
        linear-gradient(to right, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .18) 52%, transparent 78%);
}
.dl-hero__in { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(34px, 6vh, 66px); max-width: 1400px; }

.dl-migas { display: flex; align-items: center; gap: 10px; color: var(--t4); margin-bottom: clamp(14px, 2.4vh, 24px); }
.dl-migas a { color: var(--mut); text-decoration: none; transition: color .3s var(--e-expo); }
.dl-migas a:hover { color: var(--w); }
.dl-migas i { color: var(--t7); font-style: normal; }
.dl-migas span { color: var(--champ); }

.dl-hero__t {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; color: var(--w); margin: 0;
    font-size: clamp(34px, 6.4vw, 104px); line-height: .96; letter-spacing: -.015em; max-width: 16ch;
}
.dl-hero__sub { margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 56ch; color: var(--mut2); font-size: clamp(15px, 1.25vw, 20px); line-height: 1.6; }

.dl-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: clamp(18px, 2.6vh, 26px) 0 0; padding: 0; }
.dl-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; color: var(--w);
    background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .3); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dl-pill .material-symbols-outlined { font-size: 16px; }
.dl-pill__et { color: var(--t4); }

.dl-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.2vh, 34px); }

/* =====================================================================================
   TEXTO + FOTO
   ===================================================================================== */
.dl-ex { display: grid; gap: clamp(28px, 4vw, 72px); align-items: start; }
.dl-ex__et { color: var(--champ); margin: 0 0 10px; }
.dl-ex__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(22px, 3vh, 32px); }
/* Seis fichas llevan tres llamadas en vez de dos. Las cápsulas se aprietan para que entren
   en una línea: con el tamaño normal sumaban 689 px en una columna de 600. */
.dl-ex__ctas--tres { gap: 8px; }
.dl-ex__ctas--tres .d-btn { padding: 0 9px 0 15px; font-size: 12px; letter-spacing: .04em; gap: 10px; }
.dl-ex__ctas--tres .d-btn__o { width: 30px; height: 30px; }
.dl-ex__ctas--tres .d-btn__o .material-symbols-outlined { font-size: 17px; }
.dl-enlace { color: var(--w); font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(216, 185, 142, .5); padding-bottom: 3px; transition: color .3s var(--e-expo), border-color .3s var(--e-expo); }
.dl-enlace:hover { border-color: var(--champ); }

.dl-ex__fig { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: #0d0d10; border: 1px solid var(--line); box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .95); }
.dl-ex__fig::after {
    /* Un velo levísimo: las fotos vienen de la web actual, que es blanca, y en negro deslumbran */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(5, 5, 5, .34), transparent 46%);
}
.dl-ex__fig img, .dl-ex__fig video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio, 2 / 3); }

@media (min-width: 900px) {
    /* Asimétrica: el texto manda y la foto acompaña */
    .dl-ex { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .dl-ex--vuelta .dl-ex__txt { order: 2; }
    .dl-ex--vuelta .dl-ex__fig { order: 1; }
    .dl-ex--solo { grid-template-columns: minmax(0, 1fr); }
    .dl-ex--solo .dl-ex__txt { max-width: 78ch; margin: 0 auto; }
    /* La foto no se estira hasta el final del texto: se queda a una altura cómoda y se pega arriba */
    .dl-ex__fig { position: sticky; top: calc(var(--hdr) + 24px); max-height: 74vh; }
}

/* ---------- recuadro de beneficios ---------- */
.dl-ben {
    margin-top: clamp(28px, 4vh, 52px); padding: clamp(20px, 2.6vw, 32px); border-radius: 18px;
    background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dl-ben__h { color: var(--champ); margin: 0 0 16px; }
.dl-ben__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dl-ben__it { display: flex; gap: 11px; color: var(--mut2); font-size: 14.5px; line-height: 1.5; }
.dl-ben__it i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--champ); opacity: .85; }
.dl-ben__cierre { margin: 16px 0 0; color: var(--mut); font-size: 14px; }

/* =====================================================================================
   DOS LISTAS
   ===================================================================================== */
/* Más estrecho que el resto de la ficha: en 1400 px de ancho las líneas se quedaban
   en la mitad izquierda del panel y sobraba medio panel vacío. */
.dl-dl { display: grid; gap: clamp(14px, 1.6vw, 22px); margin: clamp(30px, 4.6vh, 56px) auto 0; max-width: 1180px; }
/* Panel en vez de columna suelta: así la lista corta no acaba colgando en mitad del negro */
.dl-dl__col {
    padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px);
    border-radius: 18px; background: rgba(243, 244, 245, .03); border: 1px solid var(--line);
}
.dl-sec--alt .dl-dl__col { background: rgba(243, 244, 245, .045); }
/* El rótulo de cada panel, con el mismo recurso que las demás etiquetas de la ficha:
   mono en champán. Antes competía con el titular de la sección, que es de la misma familia. */
.dl-dl__h {
    font-family: var(--f-m); font-size: 11px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 400; color: var(--champ); margin: 0 0 clamp(16px, 2.2vh, 22px);
    padding-bottom: clamp(14px, 1.8vh, 18px); border-bottom: 1px solid var(--line);
}
.dl-dl__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Un filete en champán como viñeta: el mismo que llevan las listas dentro del texto */
.dl-dl__it { position: relative; padding-left: 22px; color: var(--mut2); font-size: 15.5px; line-height: 1.55; }
.dl-dl__it::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--champ); }
@media (min-width: 860px) {
    .dl-dl--2 { grid-template-columns: 1fr 1fr; }
}
/* El cierre, atado al bloque con un filete corto en vez de flotando debajo */
.dl-dl__cierre { margin-top: clamp(30px, 4.4vh, 52px); }
.dl-dl__cierre::before {
    content: ""; display: block; width: 40px; height: 1px; background: var(--champ); opacity: .7;
    margin: 0 auto clamp(20px, 2.8vh, 30px);
}

/* =====================================================================================
   «PARA TI SI…» · CARACTERÍSTICAS · PRECIOS
   Los tres reutilizan el material de los bloques anteriores: el filete en champán de las
   listas y el panel de las dos columnas. Nada nuevo, para que la ficha no acabe siendo un
   muestrario de estilos.
   ===================================================================================== */
.dl-lista { margin-top: clamp(18px, 2.6vh, 26px); }
.dl-lista__fin { margin-top: clamp(20px, 2.8vh, 28px); }

.dl-feat { list-style: none; margin: clamp(26px, 4vh, 48px) auto 0; padding: 0; max-width: 1180px;
           display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dl-feat__d { font-size: 14.5px; }
.dl-feat__d br { content: ""; display: block; margin-top: .5em; }

/* La tarifa, como una carta: concepto, filete de puntos e importe */
.dl-tarifa { list-style: none; margin: clamp(26px, 4vh, 44px) auto 0; padding: 0; max-width: 720px; display: grid; gap: 2px; }
.dl-tarifa__it { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dl-tarifa__n { color: var(--mut2); font-size: 15.5px; line-height: 1.4; }
.dl-tarifa__it::after { content: ""; flex: 1 1 auto; height: 0; border-bottom: 1px dotted rgba(243, 244, 245, .2); transform: translateY(-4px); order: 1; }
.dl-tarifa__p { order: 2; flex: 0 0 auto; color: var(--w); font-size: 13px; letter-spacing: .06em; }

/* La membresía, en cristal: es la oferta, no la tarifa */
.dl-memb {
    max-width: 720px; margin: clamp(28px, 4vh, 50px) auto 0; padding: clamp(22px, 2.6vw, 34px);
    border-radius: 18px; background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14);
    box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dl-memb__h {
    font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
    text-transform: uppercase; font-size: clamp(15px, 1.3vw, 20px); color: var(--w); margin: 0 0 clamp(16px, 2.2vh, 22px);
}
.dl-memb__grupo + .dl-memb__grupo { margin-top: clamp(20px, 2.8vh, 30px); padding-top: clamp(18px, 2.4vh, 26px); border-top: 1px solid var(--line); }
.dl-memb__st { color: var(--champ); margin: 0 0 12px; }
.dl-memb__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-memb__it { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.dl-memb__n { color: var(--mut2); font-size: 15px; line-height: 1.4; }
.dl-memb__p { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 9px; }
.dl-memb__antes { color: var(--t4); font-size: 11px; }
.dl-memb__ahora { color: var(--w); font-weight: 600; font-size: 15px; }
.dl-memb__nota { margin-top: clamp(16px, 2.2vh, 22px); font-size: 14px; color: var(--mut); }

/* =====================================================================================
   PASOS
   ===================================================================================== */
.dl-pasos { position: relative; list-style: none; margin: clamp(26px, 4vh, 48px) auto 0; padding: 0; max-width: 820px; display: grid; gap: clamp(22px, 3.4vh, 40px); }
.dl-pasos::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(to bottom, var(--line2), var(--line) 60%, transparent); }
.dl-paso { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: clamp(16px, 2vw, 26px); align-items: start; }
.dl-paso__n {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: var(--w); font-size: 10px;
    background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .26); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dl-paso__h {
    font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
    text-transform: uppercase; font-size: clamp(15px, 1.3vw, 20px); color: var(--w); margin: 9px 0 7px; line-height: 1.12;
}
.dl-paso__d { margin: 0; color: var(--mut2); font-size: 15px; line-height: 1.62; }

/* =====================================================================================
   ANTES Y DESPUÉS (una sola tarjeta, a mayor tamaño que en la home)
   ===================================================================================== */
.dl-ad__card { max-width: 560px; margin: clamp(26px, 4vh, 44px) auto 0; }
/* El rótulo sobra: ya está en el titular de la página. Quedan solo los mandos, centrados. */
.dl-ad .d-ad__t { display: none; }
.dl-ad .d-ad__pie { justify-content: center; padding-top: 14px; padding-bottom: 14px; }

/* =====================================================================================
   INSTAGRAM
   ===================================================================================== */
.dl-ig__user { text-align: center; margin: -6px 0 clamp(24px, 3.4vh, 38px); }
.dl-ig__user a { display: inline-flex; align-items: center; gap: 6px; color: var(--champ); text-decoration: none; }
/* El distintivo de cuenta verificada, en el azul de Instagram: es el único punto de color
   de la página aparte del champán, así que va al tamaño justo del texto y ni un pixel más. */
.dl-ig__ok { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.dl-ig__ok-sello { fill: #0095F6; }
.dl-ig__ok-check { fill: #fff; }
.dl-ig { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(8px, 1vw, 14px); }
.dl-ig__hueco, .dl-ig__it { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--g2); border: 1px solid var(--line); }
.dl-ig__it img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.82); transition: filter .5s var(--e-expo), transform .8s var(--e-expo); }
@media (hover: hover) { .dl-ig__it:hover img { filter: none; transform: scale(1.05); } }
.dl-ig__reel { position: absolute; right: 9px; top: 9px; width: 0; height: 0; border-left: 9px solid var(--w); border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.dl-ig__no { grid-column: 1 / -1; text-align: center; color: var(--mut); font-size: 14px; }
.dl-ig__no a { color: var(--champ); }

/* =====================================================================================
   CIERRE
   ===================================================================================== */
.dl-cta { position: relative; display: grid; place-items: center; padding: clamp(70px, 12vh, 150px) var(--gut); overflow: hidden; background: var(--k); }
.dl-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dl-cta__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 5, 5, .72), rgba(5, 5, 5, .86)); }
.dl-cta__card {
    position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; text-align: center;
    max-width: min(680px, 100%); padding: clamp(28px, 4vw, 46px); border-radius: 20px;
    background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .26); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dl-cta__h {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(24px, 3vw, 44px); line-height: 1.04; color: var(--w); margin: 0;
}
.dl-cta__sub { margin: 0; color: var(--mut2); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.6; max-width: 52ch; }
.dl-cta__card .d-btn { margin-top: 8px; }

/* =====================================================================================
   EL RESTO DE LA FAMILIA
   ===================================================================================== */
/* La rueda se sale de la caja por los lados a propósito (las fichas del borde asoman
   medio desvanecidas): la sección recorta, como hace la de la home. */
.dl-fam { overflow: hidden; }
.dl-fam__rueda { margin-top: clamp(22px, 3.4vh, 40px); }
/* Dos líneas de rótulo como mínimo: los nombres van de «Full face» a «Relleno de fosa
   temporal» y, sin esto, cada ficha medía distinto y la rueda quedaba dentada. */
.dl-fam__rueda .d-ficha__t { min-height: 2.2em; }
.dl-fam__fin { display: flex; justify-content: center; margin-top: clamp(24px, 3.6vh, 40px); }

/* =====================================================================================
   LISTADO DE TRATAMIENTOS
   Misma estructura que la pagina actual -rotulo, titulo, pastillas de familia con su
   numero, contador y rejilla- con el material de la propuesta.
   ===================================================================================== */
.dt-cab { padding: calc(var(--hdr) + clamp(40px, 7vh, 90px)) 0 clamp(26px, 4vh, 44px); background: var(--k); }
.dt-cab__in { max-width: 1400px; }
.dt-h1 {
    font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300;
    text-transform: uppercase; font-size: clamp(38px, 7vw, 108px); line-height: .96; letter-spacing: -.015em;
    color: var(--w); margin: 0;
}
.dt-cab__p { margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 54ch; color: var(--mut2); font-size: clamp(15px, 1.2vw, 19px); line-height: 1.6; }

.dt-lista { padding-bottom: clamp(60px, 10vh, 130px); background: var(--k); }

/* Las pastillas se quedan pegadas bajo la cabecera: con 49 tarjetas, el filtro tiene que
   seguir a mano cuando ya has bajado. */
.dt-filtros {
    position: sticky; top: var(--hdr); z-index: 5;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: clamp(14px, 2vh, 20px); padding-bottom: clamp(14px, 2vh, 20px);
    background: var(--k);
}
/* El fondo tiene que tapar del todo: con el degradado anterior el ultimo tercio de la
   barra era transparente y se veian las tarjetas pasar por detras de las pastillas.
   Ahora la barra es opaca y el degradado baja por debajo, donde no hay nada que tapar. */
.dt-filtros::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
    background: linear-gradient(to bottom, var(--k), rgba(5, 5, 5, 0)); pointer-events: none;
}
.dt-filtro {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
    font-family: var(--f-m); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mut2); text-decoration: none; cursor: pointer;
    background: var(--vidrio); border: 1px solid var(--line); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
    transition: color .3s var(--e-expo), border-color .3s var(--e-expo);
}
.dt-filtro__n { color: var(--t4); }
.dt-filtro:hover { color: var(--w); border-color: var(--line2); }
/* La pastilla elegida era el unico sitio del diseño que se rellenaba de blanco macizo,
   justo lo que no queremos en los botones. El resto del sistema dice «esta es la
   elegida» con el filo champan sobre el mismo cristal —reservar cita, la opcion de
   envio del checkout, la seccion abierta de la revista—, asi que aqui igual: el cristal
   se tiñe de champan, el filo se enciende y la cifra pasa a champan. */
.dt-filtro.es-activo {
    color: var(--w); border-color: rgba(216, 185, 142, .7);
    background:
        linear-gradient(170deg, rgba(216, 185, 142, .20) 0%, rgba(216, 185, 142, .07) 42%, rgba(216, 185, 142, .05) 62%, rgba(216, 185, 142, .17) 100%),
        rgba(12, 13, 15, .3);
    box-shadow: var(--vidrio-relieve), inset 0 0 0 1px rgba(216, 185, 142, .12);
}
.dt-filtro.es-activo .dt-filtro__n { color: var(--champ); }
.dt-filtro.es-activo:hover { border-color: rgba(216, 185, 142, 1); }
.dt-filtro:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }

.dt-cuenta { color: var(--mut); padding-top: clamp(10px, 1.6vh, 16px); padding-bottom: clamp(18px, 2.6vh, 28px); }
.dt-cuenta b { color: var(--w); font-weight: 400; }
.dt-vacio { color: var(--mut); padding-top: 20px; }

/* overflow-anchor: none — al filtrar se esconden tarjetas y el navegador recolocaba la
   pagina para mantener a la vista el elemento que estabas mirando: desde abajo del listado
   saltaba al principio y parecia que el filtro te llevaba a otra seccion. */
.dt-rejilla { list-style: none; margin: 0; padding-top: 0; display: grid; gap: clamp(12px, 1.4vw, 20px);
              grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-width: 1920px; overflow-anchor: none; }
.dt-item { overflow-anchor: none; }
.dt-item { display: grid; }

/* La tarjeta: la misma ficha de cristal de la rueda, con el precio bajo el nombre */
.dt-card { position: relative; display: grid; height: 100%; border-radius: 16px; overflow: hidden;
           background: var(--vidrio); border: 1px solid var(--line); box-shadow: var(--vidrio-relieve);
           transition: border-color .4s var(--e-expo); }
.dt-card__a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; color: var(--w); }
.dt-card__im { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0d0d10; }
.dt-card__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                   filter: grayscale(1) brightness(.8); transition: filter .6s var(--e-expo), transform 1s var(--e-expo); }
.dt-card__pie { display: grid; gap: 5px; align-content: start; padding: 13px 14px 15px; }
.dt-card__n { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300;
              text-transform: uppercase; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.14; min-height: 2.28em; }
.dt-card__p { color: var(--t4); font-size: 9.5px; }
@media (hover: hover) {
    .dt-card:hover { border-color: rgba(216, 185, 142, .55); }
    .dt-card:hover .dt-card__im img { filter: none; transform: scale(1.05); }
}
.dt-card__a:focus-visible { outline: 2px solid var(--champ); outline-offset: -2px; border-radius: 16px; }

/* El desplegable de la pagina actual. En <details> para que tambien se abra sin JavaScript. */
.dt-card__mas { position: absolute; inset: 0; pointer-events: none; }
.dt-card__mas summary {
    position: absolute; right: 9px; top: 9px; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    pointer-events: auto; list-style: none; z-index: 2;
    background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .3); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dt-card__mas summary::-webkit-details-marker { display: none; }
.dt-card__mas summary::before, .dt-card__mas summary::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: var(--w); transition: transform .35s var(--e-expo);
}
.dt-card__mas summary::before { width: 11px; height: 1.4px; margin: -.7px 0 0 -5.5px; }
.dt-card__mas summary::after { width: 1.4px; height: 11px; margin: -5.5px 0 0 -.7px; }
.dt-card__mas[open] summary::after { transform: rotate(90deg); }
.dt-card__panel {
    position: absolute; inset: 0; z-index: 1; pointer-events: auto;
    display: grid; align-content: end; gap: 7px; padding: 16px 15px 17px;
    background: linear-gradient(to top, rgba(5, 5, 5, .96) 55%, rgba(5, 5, 5, .82));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dt-card__pn { margin: 0; font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118;
               font-weight: 300; text-transform: uppercase; font-size: 14px; line-height: 1.14; color: var(--w); }
.dt-card__pd { margin: 0; color: var(--mut2); font-size: 13px; line-height: 1.5; }
.dt-card__pm { margin: 0; color: var(--champ); }
.dt-card__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--w); text-decoration: none; }
.dt-card__cta .material-symbols-outlined { font-size: 15px; }

@media (max-width: 767px) {
    /* Siete pastillas se partian en cuatro lineas y, al quedarse pegadas arriba, tapaban
       media rejilla. En una sola linea que se desliza ocupan lo que una. */
    .dt-filtros {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
        background: var(--k);
    }
    .dt-filtros::-webkit-scrollbar { display: none; }
    .dt-filtro { flex: 0 0 auto; font-size: 10px; padding: 9px 13px; }
}
@media (max-width: 620px) {
    .dt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dt-card__pd { font-size: 12px; }
}

/* =====================================================================================
   DIÁLOGO DE VALORACIÓN (3 fichas)
   El formulario viene escrito con la rejilla de Bootstrap, que aquí no se carga: sin ella
   los campos se apilan, que en un formulario de diez campos se lee igual de bien.
   ===================================================================================== */
.dl-modal { width: min(560px, calc(100vw - 2 * var(--gut))); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 20px;
            background: #0b0b0d; color: var(--w); box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .95); overflow: hidden; }
.dl-modal::backdrop { background: rgba(4, 4, 5, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dl-modal__caja { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; border: 1px solid var(--line); border-radius: 20px; }
.dl-modal__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.4vw, 26px); border-bottom: 1px solid var(--line); }
.dl-modal__t { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
               text-transform: uppercase; font-size: clamp(16px, 1.5vw, 22px); margin: 0; }
.dl-modal__x { position: relative; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--line2); border-radius: 50%; background: none; cursor: pointer; }
.dl-modal__x::before, .dl-modal__x::after { content: ""; position: absolute; left: 11px; top: 17px; width: 13px; height: 1.4px; background: var(--w); }
.dl-modal__x::before { transform: rotate(45deg); }
.dl-modal__x::after { transform: rotate(-45deg); }
.dl-modal__cuerpo { padding: clamp(18px, 2.4vw, 26px); overflow-y: auto; }
/* Con un diálogo abierto, el cursor del sistema. Dos clases para ganar a la regla de d.css
   que lo esconde (html.has-cursor), que lleva una sola. */
html.dl-dialogo.has-cursor, html.dl-dialogo.has-cursor body { cursor: auto; }
html.dl-dialogo.has-cursor a, html.dl-dialogo.has-cursor button,
html.dl-dialogo.has-cursor summary, html.dl-dialogo.has-cursor label { cursor: pointer; }
html.dl-dialogo .d-cursor { opacity: 0; }

.dl-form { font-size: 14.5px; color: var(--mut2); }
.dl-form label { display: block; margin-bottom: 6px; font-family: var(--f-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.dl-form input, .dl-form select, .dl-form textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; color: var(--w); font: 400 15px/1.4 var(--f-b);
    background: rgba(243, 244, 245, .04); border: 1px solid var(--line2); transition: border-color .3s var(--e-expo);
}
.dl-form input:focus, .dl-form select:focus, .dl-form textarea:focus { outline: none; border-color: var(--champ); }
.dl-form input[type="checkbox"], .dl-form input[type="radio"] { width: auto; margin-right: 8px; accent-color: var(--champ); }
.dl-form .row > * + *, .dl-form .col-12 + .col-12 { margin-top: 14px; }
.dl-form .row + .row, .dl-form .mt-2, .dl-form .mt-3 { margin-top: 14px; }
.dl-form .text-danger { color: #ff8b7a; font-size: 12px; }
.dl-form button, .dl-form .landing-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
    border-radius: 999px; cursor: pointer; background: var(--w); color: #0a0a0c; border: 1px solid var(--w);
    font-family: var(--f-m); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.dl-form .w-100 { width: 100%; }


/* =====================================================================================
   PIEZAS COMUNES: botones, filas de importes, avisos y formularios
   Nacieron en la tienda, pero no son del comercio: las usa cualquier página de la
   propuesta que tenga un formulario (trabaja con nosotros, contacto…). Viven aquí para
   no duplicarlas. Prefijo .dts- por compatibilidad con lo que ya estaba escrito.
   ===================================================================================== */
/* ---------- botones ---------- */
.dts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 24px; border-radius: 999px; cursor: pointer; text-decoration: none;
    font-family: var(--f-m); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--w); background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
    transition: border-color .35s var(--e-expo), color .35s var(--e-expo);
}
.dts-btn:hover { border-color: rgba(216, 185, 142, .75); }
.dts-btn--solid { background: var(--w); color: #0a0a0c; border-color: var(--w); }
.dts-btn--solid:hover { border-color: var(--w); }
.dts-btn--acero { color: var(--w); }
.dts-btn--ancho { width: 100%; }
.dts-btn--lg { min-height: 58px; }
.dts-btn:disabled { opacity: .45; cursor: default; }

/* ---------- filas de importes ---------- */
.dts-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; color: var(--mut2); font-size: 14px; }
.dts-fila--total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--w); font-size: 17px; }
.dts-fila--total span:last-child { font-weight: 600; }

/* ---------- avisos ---------- */
.dts-aviso { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.dts-aviso ul { margin: 0; padding-left: 18px; }
.dts-aviso--mal { color: #ffd9d2; background: rgba(255, 92, 66, .1); border: 1px solid rgba(255, 92, 66, .4); }
.dts-aviso--bien { color: #d9f5e3; background: rgba(60, 200, 130, .1); border: 1px solid rgba(60, 200, 130, .4); }


.dts-form label { display: block; margin-bottom: 14px; }
.dts-form label > span { display: block; margin-bottom: 7px; font-family: var(--f-m); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.dts-form input, .dts-form textarea, .dts-form select {
    width: 100%; padding: 13px 15px; border-radius: 12px; color: var(--w); font: 400 15px/1.4 var(--f-b);
    background: rgba(243, 244, 245, .04); border: 1px solid var(--line2); transition: border-color .3s var(--e-expo);
}
.dts-form input:focus, .dts-form textarea:focus { outline: none; border-color: var(--champ); }
.dts-form textarea { resize: vertical; }
.dts-form--caja {
    padding: clamp(22px, 2.6vw, 32px); border-radius: 18px;
    background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14); box-shadow: var(--vidrio-relieve);
    -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
}
.dts-form--caja .dts-btn { margin-top: 6px; }
.dts-form__p { margin: 0 0 18px; color: var(--mut2); font-size: 14.5px; line-height: 1.6; }
.dts-form__entra { margin: 0 0 24px; color: var(--mut2); font-size: 14px; }
.dts-form__entra a { color: var(--champ); }

.dts-campos { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dts-campos__full { grid-column: 1 / -1; }

.dts-bloque { padding-bottom: clamp(22px, 3vh, 32px); margin-bottom: clamp(22px, 3vh, 32px); border-bottom: 1px solid var(--line); }
.dts-bloque:last-child { border-bottom: 0; margin-bottom: 0; }
.dts-bloque__t {
    font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-weight: 400;
    text-transform: uppercase; font-size: 15px; letter-spacing: .04em; color: var(--w); margin: 0 0 18px;
}
/* La casilla y su texto van en linea. Con dos clases, porque «.dts-form label» lleva
   display:block y «.dts-form label > span» pone el rotulo en mono y en bloque: aqui no. */
.dts-form label.dts-marca, .dts-marca { display: flex; align-items: center; gap: 11px; margin-bottom: 0; color: var(--mut2); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.dts-form label.dts-marca input, .dts-marca input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--champ); }
.dts-form label.dts-marca > span, .dts-marca > span { display: inline; margin: 0; font-family: var(--f-b); font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--mut2); }

/* =====================================================================================
   TRABAJA CON NOSOTROS
   ===================================================================================== */
/* El titular es largo (nueve palabras): aqui respira mas que en una ficha */
.dte-hero .dl-hero__t { max-width: 19ch; font-size: clamp(30px, 5vw, 78px); }
.dte { padding: clamp(50px, 8vh, 110px) 0 clamp(60px, 10vh, 130px); background: var(--k); }
.dte__in { max-width: 900px; }
.dte__form { margin-top: clamp(22px, 3vh, 34px); }
.dte__form textarea { min-height: 150px; }
/* Las dos preguntas largas, a mitad y mitad: en la rejilla de tres columnas de los campos
   cortos se quedaban las dos a la izquierda y la tercera columna vacia. */
@media (min-width: 760px) { .dte__cuenta .dts-campos { grid-template-columns: 1fr 1fr; } }
.dte__legal { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dte__legal-p { margin: 0 0 16px; color: var(--mut2); font-size: 14px; line-height: 1.6; }
.dte__legal-p a { color: var(--champ); }
.dte__enviar { margin-top: clamp(22px, 3vh, 32px); min-width: 220px; }
.dte__ok { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(30px, 6vh, 70px) 0; }
.dte__ok .dl-h2 { margin: 0; max-width: 20ch; }
/* El visto bueno del envio: el mismo circulo con la marca que el de la tienda */
.dte__marca { position: relative; display: block; width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(216, 185, 142, .6); }
.dte__marca::before { content: ""; position: absolute; left: 21px; top: 29px; width: 10px; height: 19px; border-right: 2px solid var(--champ); border-bottom: 2px solid var(--champ); transform: rotate(45deg); }

/* =====================================================================================
   BARRA FIJA DE MÓVIL
   La ficha mide seis mil píxeles: el botón no puede estar solo en la portada.
   ===================================================================================== */
.dl-barra { display: none; }
@media (max-width: 767px) {
    .dl-barra {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(5, 5, 5, .96), rgba(5, 5, 5, .78));
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        /* Escondida mientras se ve la portada, que ya lleva los dos botones: aparece al
           pasarla. Aprovecha la clase que el JS pone para volver sólida la cabecera. */
        transform: translateY(110%); transition: transform .45s var(--e-expo);
    }
    html.hdr-solid .dl-barra, html:not(.js) .dl-barra { transform: none; }
    .dl-barra__a {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
        border-radius: 999px; font-family: var(--f-m); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
        color: var(--w); text-decoration: none; cursor: pointer;
        background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .3); box-shadow: var(--vidrio-relieve);
        -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo);
    }
    /* Igual que la pastilla elegida de los filtros: nada macizo. El cristal se tiñe de
       champan y el filo se enciende, que es como el resto del diseño dice «este es el
       boton que importa». Asi la barra de movil habla el mismo idioma que la de arriba. */
    .dl-barra__a--solid {
        color: var(--w); border-color: rgba(216, 185, 142, .7);
        background:
            linear-gradient(170deg, rgba(216, 185, 142, .20) 0%, rgba(216, 185, 142, .07) 42%, rgba(216, 185, 142, .05) 62%, rgba(216, 185, 142, .17) 100%),
            rgba(12, 13, 15, .3);
        box-shadow: var(--vidrio-relieve), inset 0 0 0 1px rgba(216, 185, 142, .12);
    }
    /* Que la barra no tape el final del pie */
    .d-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    /* El selector de propuestas es solo de pruebas, pero caía justo debajo de la barra */
    .lux-selector { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}

/* =====================================================================================
   MÓVIL
   ===================================================================================== */
@media (max-width: 899px) {
    .dl-hero { min-height: min(88vh, 720px); }
    .dl-hero__t { font-size: clamp(30px, 8.6vw, 54px); max-width: 14ch; }
    .dl-ex__fig { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 767px) {
    /* Las píldoras, en una sola línea. Las 26 fichas que las llevan tienen siempre tres,
       pero hay casos de 78 caracteres entre las tres («Ácido hialurónico no reticulado»),
       que en un móvil no caben de ninguna manera a un tamaño legible: la fila se desliza
       y sale a sangre por los dos lados, así que el corte se lee como que hay más. Con el
       texto más corto —el caso normal— entran las tres sin deslizar nada. */
    .dl-cuerpo .landing-chips {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); gap: 6px;
    }
    .dl-cuerpo .landing-chips::-webkit-scrollbar { display: none; }
    .dl-cuerpo .landing-chip { flex: 0 0 auto; font-size: 9.5px; letter-spacing: .1em; padding: 7px 9px; }

    /* Las dos llamadas en fila, con el mismo tratamiento que la portada de la home: rótulo
       centrado, flecha sin su círculo —dentro del círculo abría un hueco en medio de la
       cápsula— y reparto 1,1 a 1, porque «Reservar cita» es más largo que «Contactar» y a
       medias el aire de dentro quedaba desigual. Entran en una línea hasta en 320 px. */
    .dl-hero__ctas { flex-wrap: nowrap; width: 100%; gap: 8px; }
    .dl-hero__ctas .d-btn { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; min-height: 54px; padding: 0 12px; font-size: 11px; letter-spacing: .03em; }
    .dl-hero__ctas .d-btn:first-child { flex-grow: 1.1; }
    .dl-hero__ctas .d-btn .d-btn__o,
    .dl-hero__ctas .d-btn:hover .d-btn__o { width: auto; height: auto; background: none; }
    .dl-hero__ctas .d-btn__o .material-symbols-outlined { font-size: 17px; }

    /* Los dos botones de dentro del texto, igual: en una línea. Aquí el reparto no puede ser
       fijo porque el primero cambia de ficha a ficha —de «Reservar cita» a «Reservar
       valoración capilar»—, así que cada uno parte de lo que mide su rótulo y se reparten el
       resto a partes iguales: el aire de dentro queda igual en los dos. El tercer botón,
       cuando lo hay (6 fichas), baja a su propia línea. */
    .dl-ex__ctas { flex-wrap: wrap; gap: 8px; }
    .dl-ex__ctas .d-btn { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; min-height: 54px; padding: 0 12px; font-size: 11px; letter-spacing: .03em; }
    .dl-ex__ctas .d-btn .d-btn__o,
    .dl-ex__ctas .d-btn:hover .d-btn__o { width: auto; height: auto; background: none; }
    .dl-ex__ctas .d-btn__o .material-symbols-outlined { font-size: 17px; }
    .dl-ex__ctas .dl-enlace { flex: 1 0 100%; margin-top: 4px; }
    /* Con tres, en móvil se quitan las flechas y se aprieta todo: con eso entran en una
       línea a partir de 390 px, que es el móvil más común. Por debajo no caben de ninguna
       manera —45 caracteres en tres cápsulas— y bajan en vez de recortar el rótulo. */
    .dl-ex__ctas--tres { gap: 5px; }
    .dl-ex__ctas--tres .d-btn { flex: 1 1 auto; min-width: 0; padding: 0 7px; font-size: 10px; letter-spacing: 0; gap: 0; }
    .dl-ex__ctas--tres .d-btn__o { display: none; }
    /* Cuando el tercero es un enlace («Ver opciones de precio») no se baja de línea: se
       queda al lado de las dos cápsulas, un punto más pequeño para que quepa. */
    .dl-ex__ctas--tres .dl-enlace { flex: 0 1 auto; margin-top: 0; font-size: 12px; }
}
/* Las tres cápsulas suman 45 caracteres: por debajo de 375 px hay que bajar un punto más
   para que sigan entrando en una línea. */
@media (max-width: 374px) {
    .dl-ex__ctas--tres .d-btn { font-size: 9px; padding: 0 6px; }
    .dl-ex__ctas--tres { gap: 4px; }
}

/* Pantallas muy estrechas: el rótulo largo rozaba el borde de la cápsula */
@media (max-width: 359px) {
    .dl-hero__ctas .d-btn, .dl-ex__ctas .d-btn { font-size: 10px; letter-spacing: .02em; padding: 0 10px; gap: 5px; }
    .dl-hero__ctas .d-btn__o .material-symbols-outlined,
    .dl-ex__ctas .d-btn__o .material-symbols-outlined { font-size: 15px; }
}

@media (max-width: 520px) {
    .dl-ig { grid-template-columns: repeat(2, 1fr); }
    .dl-ben__lista { grid-template-columns: 1fr; }
}