#config *{fill: white}

/* ==========================================================================
   PALETA DKARD — 5 colores que rearman todo el look de la página.
   Reemplaza el mecanismo anterior (un <style> por negocio con selectores
   duplicados #id#id repetidos a mano para ganar especificidad — frágil,
   no escala, y cualquier cambio de color exige reescribir decenas de
   reglas). Con variables CSS un solo cambio en :root repinta toda la
   página, y el negocio los puede fijar en tiempo real desde JS
   (ver applyNegocioConfig() en main.js) sin tocar ni una hoja de estilos.
   Valores por defecto = paleta "Contraste" (fondo oscuro, la que ya traía
   la plantilla base). El tema "Claro" vive aparte, en la sección
   [data-tema="claro"] más abajo — son dos decisiones independientes:
   QUÉ colores, y CLARO u OSCURO como base de contraste.

   1. --dk-fondo:      fondo general de la página.
   2. --dk-header:      nav, encabezado y bloques informativos/botones fijos
                         de arriba (la franja superior de la página).
   3. --dk-boton:       botones generales del sitio, precios, íconos de
                         acento — el color "de marca" que más se repite.
   4. --dk-degradado:   punto claro de los degradados (con --dk-contraste
                         como punto oscuro) y fondos de botones destacados.
   5. --dk-contraste:   punto oscuro de los degradados, hovers, y textos/
                         fondos oscuros del tema Claro.
   ========================================================================== */
:root {
    /* Defaults NEUTROS, a proposito.
       Aca estaban los colores de Veka (#323017 / #C37B23 / #F4D119): la marca
       de un cliente hecha valor de fabrica de la plataforma, el mismo patron
       que ya nos mordio con su telefono y sus fotos. Un dkard al que le
       faltara un color salia con el marron de Veka.
       Ahora el default es una escala de grises: si un color falta, el bloque
       se ve neutro y se nota que falta, en vez de heredar una marca ajena.
       Ninguno de los dkards activos depende de esto —los cinco de pago
       definen sus cinco colores, y el unico que hereda es un Chispa, que se
       pinta con files/chispa.css, no con este archivo—. */
    --dk-fondo: #14151A;
    --dk-header: #2C2F36;
    --dk-boton: #6E7480;
    --dk-degradado: #D7DAE0;
    --dk-contraste: #08090C;

    /* Copia intocable de la paleta general.
       Las secciones de mas abajo REDEFINEN --dk-boton y compañia dentro de su
       propio bloque, asi que ahi dentro ya no se puede preguntar "cual era el
       color general" sin morderse la cola. Estas cuatro lineas guardan ese
       valor una sola vez, arriba del todo, y son las que usan como respaldo. */
    --dk-fondo-base: var(--dk-fondo);
    --dk-header-base: var(--dk-header);
    --dk-boton-base: var(--dk-boton);
    --dk-degradado-base: var(--dk-degradado);
    --dk-contraste-base: var(--dk-contraste);

    /* Color del precio: NO se elige, se deriva del color de botones.
       El precio salía en --dk-boton tal cual, y ese color el negocio lo elige
       pensando en un botón relleno —donde el texto va encima, no el color—,
       así que sobre la tarjeta quedaba flojo: un tono medio oscuro contra
       fondo oscuro casi no se leía. Acá se aclara sobre el tema oscuro y se
       oscurece sobre el claro, siempre partiendo del color de la marca. */
    --dk-precio: color-mix(in srgb, var(--dk-boton) 62%, #fff);

    /* -----------------------------------------------------------------
       COLOR POR SECCION
       -----------------------------------------------------------------
       Cada seccion tiene sus propias variables, y por defecto TODAS
       derivan de la paleta general de arriba. Un dkard que no toque nada
       se ve exactamente igual que antes: estas lineas solo dicen "de
       donde saca su color cada bloque".

       Cuando el negocio sobreescribe una seccion desde Tu Dkard, main.js
       (applyColoresSecciones) escribe la variable puntual sobre
       documentElement y esa gana, sin tocar el resto.

       Por que asi y no cinco colores mas: el negocio que no quiere
       complicarse elige la paleta general y listo; el que quiere que su
       menu sea de otro color no tiene que rehacer toda la paleta para
       conseguirlo. */

    /* Fondo de la pagina: tres paradas de degradado. Antes era un color
       plano mas un tinte fijo derivado del color de botones. */
    --dk-fondo-1: color-mix(in srgb, var(--dk-boton) 15%, var(--dk-fondo));
    --dk-fondo-2: var(--dk-fondo);
    --dk-fondo-3: var(--dk-fondo);

    /* Menu flotante (la barra de navegacion redonda). */
    --dk-menu-fondo: var(--dk-header);
    --dk-menu-acento: var(--dk-degradado);

    /* Hero: el velo de color sobre la foto y el boton principal. */
    --dk-hero-velo: var(--dk-header);
    --dk-hero-boton: var(--dk-degradado);
    --dk-hero-boton-texto: var(--dk-boton);

    /* Tarjeta de producto (catalogo y destacados). */
    --dk-producto-acento: var(--dk-boton);
    --dk-producto-precio: var(--dk-precio);

    /* Cualidades: la banda tiene su propio degradado de dos puntas. */
    --dk-cualidades-1: var(--dk-degradado);
    --dk-cualidades-2: var(--dk-boton);

    /* La tarjeta de la cita de contacto y el movil del QR. No tienen control
       en el editor; se les da variable para poder ajustarlas por tema sin
       repetir el selector. Con estos valores pintan exactamente igual que
       antes. */
    --dk-panel-1: var(--dk-degradado);
    --dk-panel-2: var(--dk-boton);

    /* Los de la tarjeta de descuento estaban solo como respaldo dentro del
       var() de su regla. Suben aca para que se puedan leer y ajustar como
       los demas. Mismos valores. */
    --dk-descuento-1: var(--dk-boton);
    --dk-descuento-2: color-mix(in srgb, var(--dk-boton) 58%, #fff);

    /* EL COLOR DEL TEXTO DE LOS CUATRO PANELES LO DECIDE main.js.

       Los cuatro —cualidades, cita de contacto, descuento y el mensaje
       destacado— son un degradado hecho con colores que elige el negocio, con
       texto blanco fijo encima. Cuando el negocio elige tonos claros, el texto
       desaparece: medido sobre la posicion real del texto dentro del
       degradado, atuservicio daba 1,4:1 e insigniastore 1,8:1. El minimo
       legible es 4,5:1. Es la pagina publica de un cliente que paga.

       No se puede resolver en CSS: depende de la luminancia de unos colores
       que solo se conocen al cargar. Y no vale con mirar el tema, que fue la
       primera idea: hay dkards de tema oscuro con paneles claros y de tema
       claro con paneles oscuros. main.js mide los dos extremos de cada
       degradado y escribe aqui el que mejor se lea en el peor punto; si
       ninguno llega, corre ademas el fondo lo minimo necesario. Ver
       ajustarTextoDePaneles().

       Si no llega a correr, el respaldo es el blanco de siempre. */

    --dk-cualidades-pie: var(--dk-degradado);

    /* Contenido destacado. */
    --dk-featured-borde: var(--dk-boton);
    --dk-featured-fondo: var(--dk-contraste);
    --dk-featured-acento: var(--dk-degradado);

    /* Servicios: la tarjeta normal y la destacada se pintan aparte. */
    /* Blanco, que es lo que tenia quemado: derivarla de --dk-contraste
       habria oscurecido la tarjeta en todos los dkards que ya existen. */
    --dk-servicio-fondo: #fff;
    --dk-servicio-boton: var(--dk-boton);
    --dk-servicio-dest-fondo: var(--dk-contraste);
    --dk-servicio-dest-boton: var(--dk-boton);
}

/* ==========================================================================
   TEMA: Contraste (por defecto) vs Claro — decisión INDEPENDIENTE de los 5
   colores de arriba. "Contraste" es fondo oscuro con texto/tarjetas claras
   (el look base de la plantilla, el de Insignia). "Claro" invierte eso:
   fondo claro, texto oscuro, tarjetas blancas — el look de Veka.

   Generaliza lo que antes era un bloque <style> pegado a mano en cada
   index.html de negocio (id fijo #dkrd-body + clase .light-vr, solo
   funcionaba para Veka). Con [data-tema="claro"] en <body> (fijado por
   negocio.config.tema vía applyNegocioConfig() en main.js) cualquier
   negocio puede activarlo, no solo el que lo tenía hardcodeado. */
/* :root Y NO [data-tema="claro"] A SECAS. Esto es lo que hacia que a un
   dkard de tema claro se le cargaran "otros colores de todo el sitio".

   `data-tema` se pone en <html> Y en <body> (main.js). El selector suelto
   casaba con LOS DOS. En <html> no pasaba nada, porque el negocio escribe su
   paleta como estilo en linea ahi y lo de linea gana. Pero en <body> no hay
   nada en linea, asi que ahi ganaba esta hoja: <body> volvia a declarar los
   cinco colores con los grises de fabrica, y como todo el contenido cuelga de
   <body>, esos grises se heredaban a la pagina ENTERA.

   Lo de linea solo gana sobre declaraciones del MISMO elemento; no vale
   contra una regla que apunta a otro. Por eso el resultado era una mezcla:
   --dk-cualidades-* (que se resuelven en <html>) salian con el marron del
   cliente, y --dk-fondo/--dk-boton/--dk-header con el gris de la plantilla.

   Acotado a :root la hoja solo puede hablar de <html>, donde el estilo en
   linea del negocio manda. Los que no eligieron colores siguen recibiendo
   estos valores y heredandolos igual. */
:root[data-tema="claro"] {
    /* Los mismos neutros de :root pero al derecho: escala de blancos en vez
       de escala de negros. Solo son valores de fabrica. */
    --dk-fondo: #F5F6F8;
    --dk-header: #DDE0E6;
    --dk-boton: #6E7480;
    --dk-degradado: #EDEFF3;
    --dk-contraste: #14151A;

    /* Copia intocable de la paleta general.
       Las secciones de mas abajo REDEFINEN --dk-boton y compañia dentro de su
       propio bloque, asi que ahi dentro ya no se puede preguntar "cual era el
       color general" sin morderse la cola. Estas cuatro lineas guardan ese
       valor una sola vez, arriba del todo, y son las que usan como respaldo. */
    --dk-fondo-base: var(--dk-fondo);
    --dk-header-base: var(--dk-header);
    --dk-boton-base: var(--dk-boton);
    --dk-degradado-base: var(--dk-degradado);
    --dk-contraste-base: var(--dk-contraste);

    /* Los paneles de texto blanco NO se tocan aqui.

       Primero se oscurecian en este bloque, y estaba mal por dos razones. Una,
       que cambiaba el tono que el negocio habia elegido para conseguir algo
       —que su texto se lea— que no depende del tema sino de los colores: hay
       dkards de tema oscuro con paneles claros y al reves. Y dos, que el
       editor lee estas mismas variables del preview para ensenar el color
       heredado de cada seccion, asi que el negocio veria un color que no es el
       suyo y podria acabar guardandolo.

       Lo resuelve main.js, que mide y corrige lo minimo. Ver
       ajustarTextoDePaneles(). */

    /* Tarjetas blancas: el precio va al lado oscuro del mismo color. */
    --dk-precio: color-mix(in srgb, var(--dk-boton) 78%, #000);

    /* El fondo es el que el negocio eligió en Configuración, no un gris fijo:
       con #f3f3f3 quemado, el color de fondo configurado no se usaba en ningún
       lado y el footer terminaba en un tercer color distinto. */
    background-color: var(--dk-fondo);
}

/* El fondo si se sigue pintando en los dos: es una propiedad normal, no una
   variable, y no puede heredarse mal. */
[data-tema="claro"] {
    background-color: var(--dk-fondo);
}

/* EL TEMA CLARO NO PUEDE PISAR LO QUE ELIGIO EL NEGOCIO.
   -------------------------------------------------------------------------
   Estos selectores llevan `[data-tema="claro"]` delante, asi que le ganan por
   especificidad a la regla normal de cada elemento. Cuando esa regla normal
   dice `color: var(--dk-about-titulo, #fff)`, lo de aqui la anulaba entera:
   en tema claro se elegia el color del titulo de "Quienes somos" y no pasaba
   absolutamente nada. Reportado como «hay textos que no cambian de color».

   La lista se parte en dos. Los que NO tienen control en el editor siguen
   igual: su color es el de la paleta y punto. Los que SI lo tienen repiten su
   variable delante, con --dk-contraste de respaldo — que es exactamente lo
   que se veia hasta hoy cuando nadie habia elegido nada. */
[data-tema="claro"] .dkrd-main .section-title,
[data-tema="claro"] .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card,
[data-tema="claro"] .dkrd-main .dkrd-catalog .title-badge-container .title-badge,
[data-tema="claro"] .dkrd-main .dkrd-gallery .gallery-description,
[data-tema="claro"] .dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-title,
[data-tema="claro"] .dkrd-footer,
[data-tema="claro"] .dkrd-footer .logo-label {
    color: var(--dk-contraste);
}

/* Y los cinco que si se eligen desde "Diseño y color". */
[data-tema="claro"] .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
    color: var(--dk-producto-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
    color: var(--dk-producto-texto, var(--dk-contraste));
}
/* Los mismos dos, para la tarjeta DESTACADA. El bloque de destacados vive
   anidado dentro de .dkrd-catalog, así que las dos reglas de arriba también
   alcanzan sus tarjetas y —por venir con [data-tema]— le ganaban a las reglas
   propias de .dkrd-destacados: en tema claro, elegir "Título" o "Descripción"
   en la tarjeta destacada no cambiaba nada. El respaldo repite la cadena que
   se veía antes del arreglo, para que un dkard que no ha elegido nada no
   cambie de aspecto. (El fondo ya tenía su gemela, unas líneas abajo: misma
   trampa, arreglada a medias en su momento.) */
[data-tema="claro"] .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-title {
    color: var(--dk-producto-dest-titulo, var(--dk-producto-titulo, var(--dk-contraste)));
}
[data-tema="claro"] .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-description {
    color: var(--dk-producto-dest-texto, var(--dk-producto-texto, var(--dk-contraste)));
}
/* Y la fila de variaciones, con las dos: la del catálogo primero y la de la
   destacada después, que es la que tiene que ganar cuando la tarjeta es de
   destacados. Sin esto, en tema claro salía el #fff del respaldo sobre una
   tarjeta clara y no se veía nada. */
[data-tema="claro"] .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-variaciones {
    color: var(--dk-producto-variaciones, var(--dk-producto-texto, var(--dk-contraste)));
}
[data-tema="claro"] .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-variaciones {
    color: var(--dk-producto-dest-variaciones, var(--dk-producto-variaciones, var(--dk-producto-texto, var(--dk-contraste))));
}
[data-tema="claro"] .dkrd-main .dkrd-about .about-wrapper .about-content .about-headline {
    color: var(--dk-about-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-about .about-wrapper .about-content .about-description {
    color: var(--dk-about-texto, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-about .about-wrapper .about-content .about-quote {
    color: var(--dk-about-frase, var(--dk-contraste));
}

/* Y los cuatro ENCABEZADOS DE SECCION que se habian quedado fuera.
   .section-title —el del catalogo— si estaba en la lista de arriba desde el
   principio; estos cuatro no, y son exactamente el mismo caso: un titulo que
   se apoya en el fondo de la pagina, con el blanco quemado como respaldo. En
   un dkard de tema claro salian en blanco sobre un fondo casi blanco. Se ve
   en el asistente en cuanto se elige una paleta clara: la seccion tiene su
   antetitulo de color visible y debajo, donde deberia ir el titulo, nada.

   Van con su variable delante, como los de arriba, para no anular el color
   que alguien haya elegido en "Diseño y color". */
[data-tema="claro"] .dkrd-main .dkrd-services .services-wrapper .services-header .services-title {
    color: var(--dk-servicio-enc-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-services .services-wrapper .services-header .services-subtitle {
    color: var(--dk-servicio-enc-subtitulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title {
    color: var(--dk-contacto-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-logos .logos-title {
    color: var(--dk-logos-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-logos .logos-description {
    color: var(--dk-logos-texto, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-video .video-title {
    color: var(--dk-video-titulo, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main .dkrd-video .video-subtitle {
    color: var(--dk-video-texto, var(--dk-contraste));
}
[data-tema="claro"] .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card {
    /* Con la variable delante: "Fondo de la tarjeta" existe en el editor y en
       tema claro este #fff se lo comia. Se elegia un color, se guardaba bien y
       la tarjeta seguia blanca. El blanco queda de respaldo, que es lo que se
       veia sin elegir nada. */
    background-color: var(--dk-producto-fondo, #fff);
}
/* Y la destacada, con el suyo delante. Va aparte porque el selector de arriba
   la alcanza —esta anidada dentro del catalogo— y le ganaria por orden. */
[data-tema="claro"] .dkrd-main .dkrd-destacados .product-grid .product-card {
    background-color: var(--dk-producto-dest-fondo, var(--dk-producto-fondo, #fff));
}
/* El footer NO pinta fondo propio, ni acá ni en el bloque base.
   Tenía un degradado que empalmaba con var(--dk-fondo), pensado para cuando
   el fondo de la página era un color plano. Ahora el fondo son tres colores
   repartidos a lo alto (los últimos 500px son el tercero), así que ese
   degradado tapaba justo el tramo final: el color que el cliente elige para
   el cierre de su página no se veía nunca. */
[data-tema="claro"] #config * {
    fill: var(--dk-contraste);
}

/* ---------------------------------------------------------------------------
   Spinner de Proload segun el tema
   --------------------------------------------------------------------------- */
/* ripple.svg entra como <img>, asi que el CSS no puede tocar el stroke de
   adentro (viene con un beige fijo de la paleta original). Se resuelve con
   un filtro sobre la imagen entera: brightness(0) lo lleva a negro puro
   conservando el alfa, y el invert lo pasa a blanco. Asi un solo archivo
   sirve para los dos temas y cambia en vivo si se cambia el tema.

   El selector es .proloader img y no .proload img: el segundo es la foto ya
   cargada, que no debe llevar ningun filtro. */
.proloader img {
    /* Tema por defecto (contraste, fondo oscuro): spinner blanco. */
    filter: brightness(0) invert(1);
}

[data-tema="claro"] .proloader img {
    filter: brightness(0);
}

/* ==========================================================================
   BASIC NORMALIZE & RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: normal;
    font-family: 'Barlow', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tres paradas configurables (Tu Dkard > Colores > Fondo). Por defecto
       la 2 y la 3 son el mismo --dk-fondo y la 1 es ese color con un tinte
       del principal, que es exactamente el degradado que habia antes: un
       dkard que no toque nada se ve igual.

       `100% 100%` y no `100% 55vh`: el degradado recorre la pagina ENTERA, de
       la portada al pie. Con 55vh solo pintaba la primera pantalla y todo lo
       de abajo quedaba en el color plano de la ultima parada — el negocio
       elegia tres colores y solo veia el primero, con un corte visible a
       media pagina.

       El background-color de respaldo se queda: en una pagina mas corta que
       la ventana, es lo que pinta el hueco que sobra. */
    background-color: var(--dk-fondo-3);
    /* Las paradas van en PIXELES y no en porcentaje.
       El color de arriba ocupa los primeros 500px, el del medio todo lo que
       haya en medio —sea una pantalla o veinte— y el de abajo los ultimos 500.

       Con porcentajes, la misma regla daba resultados incomparables: en el
       dkard de Veka, que mide 17.000px, el 60% del segundo color caia a los
       10.000px y el degradado se estiraba hasta perderse. Un catalogo largo y
       uno corto tienen que verse igual arriba y abajo; lo que cambia es cuanto
       dura el medio.

       En una pagina mas corta que 1000px las dos paradas se cruzarian; el
       navegador las ordena solo y queda un degradado directo de arriba a
       abajo, que es lo razonable. */
    background-image: linear-gradient(180deg,
        var(--dk-fondo-1) 0,
        var(--dk-fondo-2) 500px,
        var(--dk-fondo-2) calc(100% - 500px),
        var(--dk-fondo-3) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* Para que en una pagina corta el degradado tenga al menos la ventana de
       alto, en vez de comprimirse en unos pocos pixeles. */
    min-height: 100vh;
    color: #1e1e1e;
    overflow-x: hidden;
}

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

input,
button,
textarea,
select {
    font: inherit;
    border: none;
    background: none;
}

figure {
    margin: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ==========================================================================
   VARIABLES - DESIGN SYSTEM
   ========================================================================== */
:root {
    --color-gold: #c6a672;
    --color-gold-dark: #b08d55;
    --color-brown-bg: #967048;
    --color-text-dark: #222222;
    --color-text-light: #ffffff;
    --color-black: #000000;
}



/* Preloader */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Del color oscuro de la paleta, no negro fijo: así la precarga ya es del
       negocio y no hay un salto de color al aparecer la página. */
    background-color: var(--dk-contraste, #000);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 3000;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    line-height: 141%;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.preloader img {
    width: 60px;
    margin-bottom: 10px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: logo 2.5s infinite cubic-bezier(0.41, 0.06, 0.17, 1.55);
    animation: logo 2.5s infinite cubic-bezier(0.41, 0.06, 0.17, 1.55);
    -webkit-transition: all .2s;
    transition: all .2s;
}
.preloader span {
    color: #fff;
    font: 600 16px Barlow;
}
.preloader span::after {
    content: '';
    -webkit-animation-duration: 1500ms;
    animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: loading-dots;
    animation-name: loading-dots;
    -webkit-animation-direction: linear;
    animation-direction: linear;
}

@keyframes loading-dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    90% {
        content: '...';
    }

    100% {
        content: '';
    }
}

@-webkit-keyframes loading-dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    90% {
        content: '...';
    }

    100% {
        content: '';
    }
}

@keyframes logo {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    70% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@-webkit-keyframes logo {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    70% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}






/* Cursor de "mano abierta" por defecto para indicar que es agarrable */
.dkarta-nav {
  cursor: grab;
}

/* Cursor de "mano cerrada" mientras se está arrastrando */
.dkarta-nav.active {
  cursor: grabbing;
}

/* Opcional: Evitar que los usuarios seleccionen el texto de los botones al arrastrar */
.dkarta-nav-wrapper {
  user-select: none;
}




/* ==========================================================================
   HEADER
   ========================================================================== */
.dkrd-header {
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    padding-top: 5em;
}

.dkrd-header .header-wrapper {
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.dkrd-header .header-wrapper .branding-container {
    display: grid;
    /* `gap` solo entre columnas. El hueco de 1.5rem entre filas separaba el
       rotulo del logo 30px y se leia como dos cosas distintas, no como un
       logo con su rotulo debajo. La distancia entre ellos la decide el
       margen del propio rotulo, que es donde toca. */
    column-gap: 1.5rem;
    row-gap: 0;
    justify-content: center;
    justify-items: center;
}

.dkrd-header .header-wrapper .branding-container .brand-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-decoration: none;
}

.dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img {
    /* Ancho relativo con tope: los logos que suben los negocios vienen en
       proporciones muy distintas y un ancho fijo descuadraba el header.
       El negocio lo ajusta desde el admin (Colores y tema); 70% es el valor
       por defecto si nunca lo tocó. */
    width: var(--dk-logo-ancho, 70%);
    /* 380 es el tope que estuvo quemado aquí desde siempre, así que sigue
       siendo el valor por defecto: un dkard que nunca toque la manija se ve
       exactamente igual que antes. */
    max-width: var(--dk-logo-max, 380px);
}

/* El logo por defecto viene en dos archivos, blanco y negro, y se enseña el
   que contrasta con el tema. Mismo mecanismo que la firma del pie, y con el
   mismo cuidado con la especificidad: el selector de arriba lleva cuatro
   clases, así que uno de una sola clase perdería contra su `width` y, peor,
   las dos versiones se verían una encima de otra. Por eso estos repiten la
   cadena entera. */
.dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img--claro { display: none; }
[data-tema="claro"] .dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img--oscuro { display: none; }
[data-tema="claro"] .dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img--claro { display: block; }

.dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-info .brand-name {
    font-family: 'Blinker', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-text-dark);
    line-height: 1;
    letter-spacing: 0.5px;
}

.dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-info .brand-tagline {
    font-size: 0.75rem;
    color: #666;
    text-transform: capitalize;
    margin-top: 2px;
    letter-spacing: 0.3px;
}



/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.dkrd-hero {
    width: 100%;
    padding: 2rem;
}

.dkrd-hero .hero-card {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    min-height: 500px;
    /* Sin imagen de un cliente concreto: el fondo por defecto sale de la
       paleta. Cada negocio sube la suya desde Tu Dkard > Hero y Proload la
       pinta encima en .hero-bg-figure. */
    background-color: var(--dk-contraste);
    background-size: auto 100%;
    background-position: top right;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rem;
}

.dkrd-hero .hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* El degradado cierra antes: llegaba hasta el 80% del ancho y tapaba el
       centro de la foto, que suele ser donde está lo que se quiere mostrar.
       Ahora el color va sólido hasta donde termina el texto (~42%) y se
       desvanece a la mitad, dejando libre toda la derecha. */
    /* Pedido explícito: el color sólido cierra antes (30% en vez de 42%),
       dejando ver más foto detrás del texto. */
    background: linear-gradient(90deg, var(--dk-hero-velo) 5%, var(--dk-hero-velo) 30%, transparent 56%);
    z-index: 1;
}

/* Imagen de fondo editable desde el admin — reemplaza visualmente el
   background-image fijo de .hero-card cuando el negocio sube la suya
   propia. Queda detrás del degradado (::before, z-index:1) y del contenido
   (.hero-info, z-index:2), y vacía (sin data-byone) no pinta nada. */
.dkrd-hero .hero-card .hero-bg-figure {
    position: absolute;
    inset: 0;
    /* Después del inset a propósito: le pisa solo el lado izquierdo, así la
       foto arranca al 10% y sigue pegada a los otros tres bordes. */
    left: 10%;
    /* Y el relleno la encoge por dentro, sin moverla: deja libre la franja
       izquierda de la tarjeta, que es donde va el texto. */
    padding-left: 18%;
    z-index: 0;
    margin: 0;
}
.dkrd-hero .hero-card .hero-bg-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* El encuadre ya no se desplaza. Estuvo corrido un 20% para que el
       degradado no tapara lo importante de la foto; con la figura empezando
       más a la izquierda (padding-left del 18% en vez del 25%) ese
       corrimiento sacaba de cuadro el lado derecho de la imagen. */
    position: relative;
    left: 0;
    top: 0%;
}

.dkrd-hero .hero-card .hero-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
    position: relative;
    max-width: 500px;
}

.dkrd-hero .hero-card .hero-info .hero-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #fff;
    line-height: 100%;
    margin: 0;
}
.dkrd-hero .hero-card .hero-info .hero-headline {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3rem;
    color: #fff;
    line-height: 90%;
    margin: 0;
}

/* El <strong> del titular necesita su peso explícito, como el resto de los
   títulos de la página. Sin él no se veía negrilla ninguna: el valor por
   defecto de <strong> es `bolder`, que es RELATIVO al padre, y sobre un
   titular de peso 200 calcula 400 — al lado de 200 y en un tamaño grande, la
   diferencia es imperceptible.
   800 y no 700 porque Blinker se carga en 200/600/800: pedir un 700 que no
   existe deja que el navegador elija por su cuenta. */
.dkrd-hero .hero-card .hero-info .hero-headline strong,
.dkrd-hero .hero-card .hero-info .hero-headline b {
    font-weight: 800;
}
.dkrd-hero .hero-card .hero-info .hero-description {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #fff;
    line-height: 120%;
    margin: 0;
}

.dkrd-hero .hero-card .hero-info .hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn {
    /* Sin encoger: el grupo es flex y con `flex-wrap` los botones preferian
       apretarse antes que bajar de linea, recortando la palabra. Un rotulo mas
       largo que el de siempre —el mismo boton en ingles— tiene que hacer que
       el boton crezca o que baje, nunca que se corte. */
    flex: 0 0 auto;
    padding: 0.45rem 1.4rem;
    border-radius: 50px;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: capitalize;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}

/* El rotulo va en un <span> para poder traducirlo: data-i18n reescribe el
   textContent, y puesto sobre el <a> se habria llevado por delante el icono de
   WhatsApp que lleva dentro.
   Ese span pasa a ser un elemento flex, y como tal ENCOGE: con un texto mas
   largo que el hueco disponible ("Get in touch" contra "Solicitar asesoria")
   el boton se quedaba del ancho de antes y recortaba la palabra. */
.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn > span:not(.icon-whatsapp) {
    flex: 0 0 auto;
    white-space: nowrap;
}

.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn.btn-gold {
    background-color: var(--dk-hero-boton);
    color: #000;
    border: 2px solid var(--dk-hero-boton);
}

.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn.btn-gold:hover {
    background-color: #fff;
    color: var(--dk-servicio-boton);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25);
}
.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn.btn-gold:hover svg *{
    fill: var(--dk-boton);
}

.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn.btn-white {
    background-color: var(--dk-hero-boton-2, #fff);
    color: var(--dk-hero-boton-2-texto, var(--dk-boton));
    border: 2px solid var(--dk-hero-boton-2, #fff);
}

.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn.btn-white:hover {
    background-color: transparent;
    /* EL TEXTO NO CAMBIA DE COLOR AL PASAR EL MOUSE.
       Estaba quemado en blanco, asi que el color elegido para el texto se
       perdia justo al apuntarle: el boton se vaciaba y el rotulo saltaba a un
       blanco que el editor no podia tocar. Ahora se queda el suyo, y lo que
       cambia es el relleno —que es lo que un hover tiene que decir—. */
    color: var(--dk-hero-boton-2-texto, var(--dk-boton));
    border-color: var(--dk-hero-boton-2, #fff);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25);
}

/* Ese `width: 26px` era para el <span> del icono de WhatsApp, el unico que
   habia dentro del boton. Al meter el rotulo en otro <span> —para poder
   traducirlo— le caia encima la misma regla y el texto salia recortado a 26px:
   "Get in touch" se leia "Get In To".
   Se acota al icono, que es de quien era la medida. */
.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn>span {
    font-size: 1.2rem;
}
.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn>span.icon-whatsapp {
    width: 26px;
}

.dkrd-hero .hero-card .hero-visuals {
    display: none;
}

.dkrd-hero .hero-card .hero-visuals .visual-column {
    display: none;
}

.dkrd-hero .hero-card .hero-visuals .visual-column .visual-img {
    display: none;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */
.dkrd-main {}

/* ==========================================================================
   FEATURED BOX
   ========================================================================== */
.dkrd-main .featured-box {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 4rem 2rem;
    background-color: #000;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
}

.dkrd-main .featured-box .img-container {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, #ff0088 0%, #ffed00 100%);
    border-radius: 12px;
}

.dkrd-main .featured-box .img-container::before {
    content: '¡NOW!';
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #ffed00;
    color: #000;
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    transform: rotate(15deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.dkrd-main .featured-box .img-container>img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.dkrd-main .featured-box .featured-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dkrd-main .featured-box .featured-content .featured-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ff0088;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dkrd-main .featured-box .featured-content .featured-title {
    font-family: 'Blinker', sans-serif;
    font-size: 3rem;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}

.dkrd-main .featured-box .featured-content .featured-title::first-line {
    font-weight: 800;
}

.dkrd-main .featured-box .featured-content .featured-description {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #fff;
    line-height: 1.7;
    margin: 0;
}

.dkrd-main .featured-box .featured-content .featured-description.bold {
    font-weight: 700;
}

.dkrd-main .featured-box .featured-content .featured-description.color {
    color: #bfff00;
    font-style: italic;
}

.dkrd-main .featured-box .featured-content .cta-btn {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    background-color: #bfff00;
    color: #000;
    border: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
}

.dkrd-main .featured-box .featured-content .cta-btn:hover {
    background-color: #a8e600;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(191, 255, 0, 0.4);
}

/* ==========================================================================
   CATALOG SECTION
   ========================================================================== */
.dkrd-main .section-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    color: #ffffff;
    text-align: center;
    /* Antes el margen inferior era 0: al quedar el título dentro de su
       sección se pegaba al bloque de notas. */
    margin: 2rem auto 1.5rem;
    width: 90%;
    line-height: 110%;
}

.dkrd-main .section-title>strong,
.dkrd-main .section-title>b {
    font-weight: 800;
}

.dkrd-main .dkrd-catalog {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
}

/* EL AIRE DE ARRIBA LO PONE LA SECCION, no lo que lleva dentro.
   -------------------------------------------------------------------------
   Mientras las notas vivian DENTRO del catalogo, quien las separaba de lo
   anterior era el `padding: 2rem` del propio catalogo. Al salir a ser un
   bloque hermano se quedaron sin nada delante —la <section> no trae ni margen
   ni relleno— y aterrizaban pegadas al bloque de arriba: se leian como el pie
   de ESE bloque y no como uno suyo.

   Va en la seccion y no en el `.catalog-header` para que el hueco exista se
   ponga donde se ponga el bloque, que ahora se ordena solo. Y es `padding` y
   no `margin` porque los margenes se funden con los del vecino y se escapan
   por el borde del padre cuando el bloque queda el primero; el relleno no
   hace ninguna de las dos cosas.

   2rem, el mismo de `.dkrd-catalog`: es la separacion de la casa. */
.dkrd-main .dkrd-notas {
    padding-top: 2rem;
}

.dkrd-main .dkrd-notas .catalog-header {
    display: flex;
    justify-content: center;
    margin-bottom: 0rem;
}

.dkrd-main .dkrd-notas .catalog-header .info-note-box {
    border: 2px solid var(--dk-notas-borde, var(--dk-boton));
    border-radius: 12px;
    padding: 1.5rem 2rem;
    /* `min()` Y NO 500px A SECAS. El recuadro cabia de sobra en escritorio,
       pero en un telefono de 375px llegaba a tocar los dos bordes de la
       pantalla: el borde de 2px quedaba pegado al filo y se leia como si el
       texto se saliera. Con el 90% siempre le queda aire a los lados, y en
       pantalla grande manda el tope de siempre. */
    max-width: min(500px, 90%);
    background-color: var(--dk-notas-fondo, #fff);
}

.dkrd-main .dkrd-notas .catalog-header .info-note-box .note-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--dk-notas-borde, var(--dk-boton));
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.dkrd-main .dkrd-notas .catalog-header .info-note-box .note-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.dkrd-main .dkrd-notas .catalog-header .info-note-box .note-list>li {
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--dk-notas-texto, #666);
    line-height: 110%;
    margin-bottom: 0.3rem;
}

.dkrd-main .dkrd-catalog .title-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    margin-top: 5em;
}

.dkrd-main .dkrd-catalog .title-badge-container .title-badge {
    display: inline-block;
    color: #fff;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 0.3rem 1.5rem;
    border-radius: 8px;
    /* Nombres de categoría largos (una sola palabra, mayúsculas) podían
       superar el ancho del teléfono: el badge es un hijo flex y por defecto
       no se encoge por debajo de su ancho de contenido. min-width:0 se lo
       permite, y max-width/word-break lo parten en vez de desbordar. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   `:is(.dkrd-catalog, .dkrd-destacados)` Y NO `.dkrd-catalog` A SECAS
   ---------------------------------------------------------------------------
   Las 61 reglas de la tarjeta de producto colgaban solo del catalogo, y los
   destacados las heredaban PORQUE SU <section> VIVIA ANIDADA DENTRO DE LA DEL
   CATALOGO. Estaba escrito aqui mismo, mil lineas mas abajo: «La seccion lleva
   tambien la clase .dkrd-catalog, asi que hereda TODA la estetica de las
   tarjetas del catalogo sin duplicar una sola regla».

   El 10/09/2026 los destacados salieron a ser hermanos del catalogo -para que
   se puedan mover de sitio-, y con eso perdieron de golpe fondo, borde,
   tipografias, foto y boton «Anadir»: quedaron como tarjetas en crudo.

   Se nombran los dos en vez de duplicar las reglas. `:is()` toma la
   especificidad de su argumento MAS ALTO, y las dos son una clase: ninguna
   regla cambia de peso, asi que lo que ganaba antes sigue ganando. Eso importa
   sobre todo para las de `[data-tema="claro"]` de arriba, que le ganan a
   proposito a las propias de .dkrd-destacados y tienen su respaldo escrito
   justamente para eso.
   --------------------------------------------------------------------------- */
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid {
    display: grid;
    /* CUANTAS COLUMNAS LO DICE EL CLIENTE, y si no ha dicho nada entra el
       valor de siempre del var(). Por eso esto no le cambia la pagina a nadie
       que ya estuviera publicado: la variable no existe hasta que alguien
       elige. Se escribe sobre el NODO de la seccion (ver applyDisposicion en
       main.js), asi que dos catalogos pueden ir a tres y a cuatro columnas. */
    grid-template-columns: repeat(var(--dk-columnas, 4), minmax(22%, 1fr));
    gap: 1.1rem;
    margin-top: 2rem;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card {
    background-color: var(--dk-producto-fondo, #0000005e);
    border: 1px solid #ffffff33;
    border-radius: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card>a {
    display: none;
}

/* La foto llena el recuadro sin deformarse: recorta lo que sobra. */
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image img,
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image {
    width: 100%;
    /* Cuadrada en el catálogo: la tarjeta es angosta y con una foto vertical
       la fila se estiraba demasiado. La proporción vertical queda para los
       destacados, que tienen la tarjeta grande y a dos columnas. */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 23px;
    display: flex;
}
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image figure {
    width: 100%;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image:hover{
        cursor: zoom-in;
}
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image:hover>figure {
    transform: scale(1.15);
    transition: all .4s ease-out;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card:hover .card-image>img {
    transform: scale(1.05);
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0.8em 1em;
}

/* "REF: código" — del HTML original de los dkards (ver insigniastore/index.html),
   debajo del título. La etiqueta ("Nuevo", "Más vendido") es un badge aparte,
   encima del título — ver .product-etiqueta más abajo. */
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-ref {
    font-family: 'Barlow', sans-serif;
    font-size: 0.7rem;
    color: var(--dk-producto-ref, var(--dk-boton));
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-etiqueta {
    align-self: flex-start;
    font-family: 'Barlow', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dk-producto-etiqueta-texto, #fff);
    background: var(--dk-producto-etiqueta, var(--dk-boton));
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.35rem;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--dk-producto-titulo, #fff);
    line-height: 110%;
    margin-bottom: 0.2em;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--dk-producto-precio);
    line-height: 1.2;
    margin-bottom: auto;
    margin-top: 0.9em;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price--cotizar {
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.85;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
    color: var(--dk-producto-texto, #fff);
    /* Pedido explícito: un poco más grande, se leía muy pequeña. */
    font-size: 0.84em;
    line-height: 120%;
    margin-top: 0.8em;
    max-height: 7.3em;
    overflow-x: hidden;
    padding-right: 15px;
}


/* --- La vista previa de las variaciones, en la tarjeta -------------------
   Una fila por eje, encima de la descripción: "Color ● ● ●" / "Talla S M L".
   Diminuta a propósito. Compite con el nombre y el precio, que son lo que la
   tarjeta tiene que decir primero; esto solo tiene que insinuar que ahí dentro
   hay algo que elegir. Los colores van de muestra porque un cuadrito rojo se
   reconoce sin leerlo, y en un catálogo se leen de reojo.

   Se hereda el color del texto del producto (currentColor) en vez de fijar uno:
   la tarjeta ya se pinta con los colores que eligió el negocio y en los dos
   temas, y un gris quemado aquí se vería mal en la mitad de los dkards. */
.product-card .card-content .product-variaciones {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0.55em 0 0;
    padding: 0;
    list-style: none;
    /* CON SU PROPIA VARIABLE, y detrás la cadena de siempre: si el negocio no
       elige nada, esto se ve del color de la descripción, que es el vecino con
       el que comparte sitio.

       El respaldo #fff es SOLO para el tema oscuro. Antes estaba aquí a secas y
       faltaba la regla gemela de [data-tema="claro"] que tienen el título y la
       descripción unas líneas más arriba: en un dkard de tema claro esto salía
       blanco sobre una tarjeta blanca, o sea invisible. Se veía en la página del
       cliente y no en la de pruebas, que es oscura. */
    color: var(--dk-producto-variaciones, var(--dk-producto-texto, #fff));
    font-size: 0.72em;
    line-height: 1.2;
}

.product-card .card-content .pv-fila {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-width: 0;
}

/* El nombre del eje se distingue por la forma —mayúsculas, negrita, más
   espaciado— y NO por estar apagado. Tenía opacity y eso peleaba con lo que el
   negocio elija: bajar un color al 60% es no darle el color que pidió. */
.product-card .card-content .pv-eje {
    /* CEDE SITIO ANTES QUE LOS VALORES. En el catalogo a dos columnas de un
       telefono la tarjeta mide unos 170px: con `flex: 0 0 auto` el nombre del
       eje se quedaba con la fila entera y las muestras de color —que son lo
       que de verdad hay que ver— quedaban recortadas a cero por el
       `overflow: hidden` del contenedor de al lado. O sea que en el ancho mas
       comun de todos, la fila decia «COLOR» y nada mas. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* EN UNA SOLA LÍNEA. Con wrap, un eje de ocho valores empujaba la descripción
   fuera de la tarjeta y descuadraba la rejilla entera del catálogo. Lo que no
   cabe ya lo resume el "+3". */
.product-card .card-content .pv-valores {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Crece y no se encoge: es la mitad informativa de la fila. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.product-card .card-content .pv-color {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    /* Un borde tenue para que el blanco y el negro se distingan del fondo de
       la tarjeta, que puede ser cualquiera de los dos. */
    box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.55);
}

/* El texto va entero y lo que se suaviza es el BORDE: así la ficha se lee con
   el color elegido y el recuadro no compite con ella. */
.product-card .card-content .pv-chip {
    flex: 0 0 auto;
    padding: 1px 5px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 99px;
    white-space: nowrap;
}

.product-card .card-content .pv-mas {
    flex: 0 0 auto;
    font-weight: 600;
}

/* La destacada puede elegir su propio color sin arrastrar al catálogo, igual
   que ya hacen su título y su descripción. */
.dkrd-destacados .product-card .card-content .product-variaciones {
    color: var(--dk-producto-dest-variaciones, var(--dk-producto-variaciones, var(--dk-producto-texto, #fff)));
}

/* Firefox ignora las reglas ::-webkit-*: acá va el equivalente estándar, si no
   la descripción se ve con la barra gris del sistema en ese navegador. */
.product-card .card-content .product-description,
.dkarta-nav {
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.35) rgb(255 255 255 / 9%);
}

/* Firefox ignora ::-webkit-*, asi que el juego claro va aparte tambien aca. */
[data-tema="claro"] .product-card .card-content .product-description,
[data-tema="claro"] .dkarta-nav {
    scrollbar-color: rgb(0 0 0 / 0.28) rgb(0 0 0 / 8%);
}

/* ---------------------------------------------------------------------------
   Scrollbar general de la página
   ---------------------------------------------------------------------------
   Sin esto <html> usa la barra por defecto del navegador: gruesa y, en
   Windows/Chrome, con flechitas de subir/bajar arriba y abajo. Un scrollbar
   personalizado (::-webkit-scrollbar-thumb, etc.) ya no dibuja esas flechas,
   así que basta con declarar el ancho y los colores para que desaparezcan.
   El tono se invierte según el tema: claro sobre fondo oscuro (el look por
   defecto) y oscuro sobre fondo claro, para que siempre se note contra la
   página sin ser tan protagonista como un color de la marca.
   --------------------------------------------------------------------------- */
html {
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.35) transparent;
}
[data-tema="claro"] {
    scrollbar-color: rgb(0 0 0 / 0.28) transparent;
}

html::-webkit-scrollbar { width: 9px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.35);
    border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.5); }
/* Sin esto Chrome en Windows dibuja las dos flechas del scrollbar clásico. */
html::-webkit-scrollbar-button { display: none; }

[data-tema="claro"]::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 0.28); }
[data-tema="claro"]::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / 0.4); }

/* width */
.product-card .card-content .product-description::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.product-card .card-content .product-description::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 9%);
}

/* Handle: gris neutro, no el color de la marca.
   Antes salia de --dk-degradado al 45%, y con paletas de acento fuerte (el
   amarillo, el fucsia) la barrita quedaba como una linea fluorescente al lado
   del texto. Un gris translucido se apoya en el fondo que tenga debajo y queda
   bien con cualquier paleta: blanco sobre oscuro, negro sobre claro. */
.product-card .card-content .product-description::-webkit-scrollbar-thumb {
    background: var(--dk-producto-scroll, rgb(255 255 255 / 0.35));
}
.product-card .card-content .product-description::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / 0.5);
}
[data-tema="claro"] .product-card .card-content .product-description::-webkit-scrollbar-thumb {
    /* "Barra de scroll" tambien es un campo del editor: en tema claro este
       gris fijo lo anulaba. */
    background: var(--dk-producto-scroll, rgb(0 0 0 / 0.28));
}
[data-tema="claro"] .product-card .card-content .product-description::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 0.4);
}



.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--dk-producto-acento, var(--dk-boton));
    text-decoration: none;
    transition: opacity 0.3s;
    background: var(--dk-producto-boton, #fff);
    padding: 0.3em 1.5em;
    border-radius: 100px;
    line-height: 107%;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn:hover {color: #fff;text-decoration: none;transition: all 0.3s;background: var(--dk-boton);}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn .plus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn .plus-icon * {
    fill: var(--dk-producto-acento);
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn:hover .plus-icon * {
    fill: #fff;
}


/* ==========================================================================
   SITE URL BLOCK
   ========================================================================== */
/* ==========================================================================
   SITE URL BLOCK
   ========================================================================== */
.dkrd-main .site-url-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 4rem auto;
    padding: 1.5rem 3rem;
    border-radius: 100px;
    /* Pill shape */
    background: linear-gradient(90deg, #e8ea36 0%, #34e022 100%);
    /* Amarillo a Verde brillante */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    gap: 3rem;
    box-shadow: 0 10px 25px rgba(52, 224, 34, 0.3);
}

.dkrd-main .site-url-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(52, 224, 34, 0.4);
}

.dkrd-main .site-url-block .logo-container {
    flex-shrink: 0;
    width: 200px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

/* Divisor vertical blanco */
.dkrd-main .site-url-block .logo-container::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 50px;
    background-color: #fff;
    opacity: 0.8;
}

.dkrd-main .site-url-block .logo-container>img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60px;
    display: block;
}

.dkrd-main .site-url-block .site-url-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.dkrd-main .site-url-block .site-url-content .site-url-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dkrd-main .site-url-block .site-url-content .site-url-description {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: #ff3399;
    /* Rosa neón */
    margin: 0.2rem 0 0;
    line-height: 1.2;
}

.dkrd-main .site-url-block .site-url-content .cta-btn {
    display: none;
    /* Ocultar botón redundante */
}

/* ==========================================================================
   ABOUT SECTION
   ========================================================================== */
.dkrd-main .dkrd-about {
    width: 100%;
    max-width: 1000px;
    margin: 4rem auto;
    padding: 2em;
}

.dkrd-main .dkrd-about .about-wrapper {
    display: flex;
    overflow: hidden;
    min-height: 600px;
    /* Asegura altura suficiente como en la imagen */
}

.dkrd-main .dkrd-about .about-wrapper .about-image-container {
    width: 45%;
    position: relative;
}

.dkrd-main .dkrd-about .about-wrapper .about-image-container .about-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 30px;
    overflow: hidden;
    border-radius: 20px;
    max-height: 670px;
}

.dkrd-main .dkrd-about .about-wrapper .about-content {
    width: 90%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-top: 5em;
    margin-bottom: -2em;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--dk-about-velo, var(--dk-header)) 0%, transparent 90%);
}

/* La etiqueta del catálogo. Misma voz que la de «Quiénes somos» y que la de
   los destacados: es la tercera del mismo juego, no un estilo nuevo. Hereda
   del botón mientras el negocio no elija color propio, igual que aquellas. */
.dkrd-main .dkrd-catalog .section-label {
    display: block;
    /* CENTRADA, como el titulo que lleva debajo. Nacio copiando la de
       «Quienes somos», que va alineada a la izquierda porque alla el bloque
       entero lo esta; aqui el titulo es `text-align: center` y una etiqueta
       pegada al margen izquierdo se leia como texto suelto. */
    text-align: center;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-catalogo-label, var(--dk-boton));
    text-transform: uppercase;
    /* EL AIRE DE ARRIBA LO PONE LA ETIQUETA cuando hay etiqueta: son 2rem, los
       mismos que traia el titulo, para que el bloque no se mueva de sitio. */
    margin: 2rem 0 0;
}
.dkrd-main .dkrd-catalog .section-label.hidden { display: none; }

/* Y entonces el titulo se le pega debajo, en vez de abrir OTROS 2rem entre los
   dos. Solo cuando hay etiqueta: sin ella el titulo conserva su margen. */
.dkrd-main .dkrd-catalog .section-label:not(.hidden) + .section-title {
    margin-top: 0.2rem;
}

/* EL MARGEN DE ABAJO, MAS CORTO. El generico son 1.5rem y su comentario dice
   por que: «al quedar el titulo dentro de su seccion se pegaba al bloque de
   notas». Las notas salieron del catalogo el 10/09/2026, asi que ese hueco ya
   no separa de nada — deja al titulo flotando encima de la rejilla. Se recorta
   AQUI y no en el generico, que lo llevan todas las secciones de la pagina. */
.dkrd-main .dkrd-catalog .section-title {
    margin-bottom: 0.6rem;
}

/* Y EL PRIMER ROTULO DE CATEGORIA, PEGADO AL TITULO.
   -------------------------------------------------------------------------
   El hueco que se ve bajo el titulo no era suyo: son los `5em` de
   `.title-badge-container`, que separan cada categoria de la rejilla de la
   anterior. Entre dos categorias eso esta bien; encima de la PRIMERA no
   separa de ninguna rejilla, solo aleja el catalogo de su propio titulo —
   medido en insigniastore, 123px de aire entre «ZXCZXC» y «MORRALES».

   Solo el primero: `:first-of-type` entre los hijos de #catalog-groups, que es
   donde renderCatalog cuelga la terna [ancla, rotulo, rejilla] de cada
   categoria. Los demas conservan sus 5em. */
.dkrd-main .dkrd-catalog #catalog-groups > .title-badge-container:first-of-type {
    margin-top: 1.5rem;
}

/* La etiqueta de "Quiénes somos". Reemplaza al favicon que iba aquí (repetía
   el del encabezado): misma voz que las etiquetas de las demás secciones,
   editable en texto (quienes_somos.label) y color (--dk-about-label). */
.dkrd-main .dkrd-about .about-wrapper .about-content .about-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-about-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.6rem;
}

.dkrd-main .dkrd-about .about-wrapper .about-content .about-headline {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3.3rem;
    color: var(--dk-about-titulo, #ffffff);
    line-height: 90%;
    margin: 0.3em 0 2rem;
}

.dkrd-main .dkrd-about .about-wrapper .about-content .about-headline>strong,
.dkrd-main .dkrd-about .about-wrapper .about-content .about-headline b {
    font-weight: 800;
    /* Asegura que 'moda' sea bold */
}

.dkrd-main .dkrd-about .about-wrapper .about-content .about-headline .thin-text {
    font-weight: 300;
    /* Texto 'global y exclusiva' más fino */
}

.dkrd-main .dkrd-about .about-wrapper .about-content .about-description {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    color: var(--dk-about-texto, #ffffff);
    line-height: 130%;
    margin-bottom: 2rem;
    max-width: 90%;
}

.dkrd-main .dkrd-about .about-wrapper .about-content .about-quote {
    font-family: 'Barlow', sans-serif;
    font-weight: 800;
    /* Bold */
    font-size: 1.1rem;
    color: var(--dk-about-frase, #ffffff);
    line-height: 120%;
    margin: 0;
    max-width: 90%;
}

/* ==========================================================================
   PROMISES SECTION
   ========================================================================== */
/* ==========================================================================
   PROMISES SECTION
   ========================================================================== */
.dkrd-main .dkrd-promises {
    width: 100%;
    margin: 4rem 0;
    padding: 0 2rem;
}

.dkrd-main .dkrd-promises .promises-wrapper {
    max-width: 940px;
    margin: 0 auto;
    background: linear-gradient(129deg, var(--dk-cualidades-1) 0%, var(--dk-cualidades-2) 100%);
    padding: 3em;
    border-radius: 30px;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-header .qualities-label {
    font-family: "Blinker", Sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1em;
    color: var(--dk-cualidades-label, #000000);
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-header .promises-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 3rem;
    color: var(--dk-cualidades-titulo, var(--dk-auto-cualidades, #ffffff));
    margin: 0;
    line-height: 90%;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-header .promises-title>strong,
.dkrd-main .dkrd-promises .promises-wrapper .promises-header .promises-title b {
    font-weight: 600;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid {
    display: grid;
    grid-template-columns: repeat(var(--dk-columnas, 3), minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 3rem;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card {
    background-color: var(--dk-cualidades-caja, #ffffff00);
    border: 1px solid var(--dk-cualidades-caja-borde, #f0f0f000);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card .promise-icon {
    color: var(--dk-cualidades-icono, currentColor);
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card .promise-icon>img {
    width: 100%;
    height: auto;
    /* Filtro para intentar simular el color turquesa de la imagen si los iconos son negros */
    filter: invert(78%) sepia(26%) saturate(696%) hue-rotate(133deg) brightness(98%) contrast(90%);
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card .promise-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    color: var(--dk-cualidades-texto, var(--dk-auto-cualidades, #ffffff));
    line-height: 110%;
    margin: 0;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-footer .footer-quote {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--dk-cualidades-destacado, var(--dk-auto-cualidades, #ffffff));
    line-height: 110%;
    margin: 0 auto;
    max-width: 540px;
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-footer .btn-cta-brown {
    background-color: var(--dk-cualidades-pie);
    color: #000000;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.7rem 3rem;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(140, 107, 74, 0.3);
}

.dkrd-main .dkrd-promises .promises-wrapper .promises-footer .btn-cta-brown:hover {
    background-color: #000000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(140, 107, 74, 0.4);
}

/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
/* ==========================================================================
   SERVICES SECTION
   ========================================================================== */
.dkrd-main .dkrd-services {
    width: 100%;
    margin: 6rem 0;
    padding: 0 2rem;
}

.dkrd-main .dkrd-services .services-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.dkrd-main .dkrd-services .services-wrapper .services-header {
    text-align: center;
    margin-bottom: 3rem;
}

.dkrd-main .dkrd-services .services-wrapper .services-header .services-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-servicio-enc-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}

.dkrd-main .dkrd-services .services-wrapper .services-header .services-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3rem;
    /* Con control propio. Estaba quemado en blanco, y en tema claro lo pisaba
       la regla de --dk-contraste: por los dos caminos, el titulo que presenta
       la seccion era el unico texto del bloque sin color elegible. */
    color: var(--dk-servicio-enc-titulo, #ffffff);
    margin: 0;
    line-height: 90%;
}

.dkrd-main .dkrd-services .services-wrapper .services-header .services-title>strong,
.dkrd-main .dkrd-services .services-wrapper .services-header .services-title b {
    font-weight: 800;
}

.dkrd-main .dkrd-services .services-wrapper .services-header .services-subtitle {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    color: var(--dk-servicio-enc-subtitulo, #ffffff9e);
    margin-top: 0.5rem;
}

.dkrd-main .dkrd-services .services-wrapper .services-container {
    display: grid;
    /* Base de tres columnas. El caso real lo decide main.js
       (layoutDeServicios) y llega en data-serv-layout; antes esto era un
       "350px 1fr" fijo, calcado del caso de un cliente con dos servicios. */
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
}

/* Tres por fila; la destacada es horizontal y se lleva dos columnas. */
/* LA ELECCION DEL CLIENTE GANA AL AUTOMATICO. main.js calcula un
   data-serv-layout segun cuantos servicios hay y si alguno es destacado; eso
   sigue siendo el valor por defecto, pero si el dueno eligio un numero de
   columnas, manda el suyo. Sin el !important, las reglas de abajo —mas
   especificas por el atributo— le ganarian y el desplegable no haria nada.

   LA CONDICION VA EN LA SECCION, NO EN EL CONTENEDOR, y esto costo un fallo:
   la variable se escribe sobre el nodo de la seccion (ver applyDisposicion),
   asi que pedirsela al contenedor de dentro no la encontraba nunca y el
   selector de columnas de Servicios no hacia absolutamente nada. */
.dkrd-main .dkrd-services[style*="--dk-columnas"] .services-wrapper .services-container {
    grid-template-columns: repeat(var(--dk-columnas, 3), minmax(0, 1fr)) !important;
}

/* Y LOS DESTACADOS VAN APARTE. Una tarjeta destacada es mas grande y se lee
   distinto: quien pone tres servicios normales en fila casi nunca quiere tres
   destacados al lado. Son dos decisiones y se preguntan por separado.

   SE MIDE EN ANCHO, no en «cuantos por fila». Los destacados no tienen rejilla
   propia —son tarjetas dentro de la misma— asi que «dos por fila» habria que
   convertirlo en columnas dividiendo, y 3 entre 2 da 1,5: redondeando hacia
   abajo, pedir dos sacaba tres. El ancho es lo que la tarjeta de verdad tiene.

   Tres reglas y ningun calculo. «Todo el ancho» es `1 / -1`, que funciona con
   las columnas que haya sin que nadie tenga que saber cuantas son —que es
   justo lo que `span var()` no podia hacer—. */
.dkrd-main .dkrd-services[data-ancho-destacados="1"] .services-container .service-card.featured-card {
    grid-column: span 1 !important;
}
.dkrd-main .dkrd-services[data-ancho-destacados="2"] .services-container .service-card.featured-card {
    grid-column: span 2 !important;
}
.dkrd-main .dkrd-services[data-ancho-destacados="todo"] .services-container .service-card.featured-card {
    grid-column: 1 / -1 !important;
}

.services-container[data-serv-layout="tres"] {
    grid-template-columns: repeat(3, 1fr);
}
.services-container[data-serv-layout="tres"] .service-card.contratst-card {
    grid-column: span 2;
}

/* Dos por fila, todas del mismo ancho: sirve tanto para "todas destacadas"
   como para "solo dos normales". */
.services-container[data-serv-layout="dos"] {
    grid-template-columns: repeat(2, 1fr);
}

/* Una destacada y una normal: la destacada ocupa dos tercios. */
.services-container[data-serv-layout="uno-y-uno"] {
    grid-template-columns: repeat(3, 1fr);
}
.services-container[data-serv-layout="uno-y-uno"] .service-card.contratst-card {
    grid-column: span 2;
}

/* Destacada a todo el ancho y las dos normales debajo, lado a lado. */
.services-container[data-serv-layout="destacado-ancho"] {
    grid-template-columns: repeat(2, 1fr);
}
.services-container[data-serv-layout="destacado-ancho"] .service-card.contratst-card {
    grid-column: 1 / -1;
}

/* Ancho elegido a mano: manda sobre la disposicion automatica.

   ESTE BLOQUE VA AL FINAL Y CON ESPECIFICIDAD SUFICIENTE, y las dos cosas
   hacen falta. Antes estaba antes de las reglas de `data-serv-layout` y con
   menos peso —el comentario decia "misma especificidad, gana por orden" y era
   falso: `[data-serv-layout="destacado-ancho"] .service-card.contratst-card`
   pesa mas que `.services-container .service-card[data-columnas]`—. El
   resultado: se elegia "2 de 3" y la tarjeta seguia saliendo a todo el ancho,
   sin ninguna pista de por que.

   Se apoya en que la grilla base es de tres columnas: si la disposicion
   automatica habia decidido dos, se fuerzan tres para que "2 de 3" signifique
   lo que dice. */
.services-container:has(.service-card[data-columnas]),
.services-container[data-serv-layout]:has(.service-card[data-columnas]) {
    grid-template-columns: repeat(3, 1fr);
}

/* En cuanto UNA tarjeta lleva ancho elegido, la disposicion automatica deja de
   mandar sobre las demas de esa seccion. Mezclar las dos daba un resultado que
   no se puede razonar: una destacada a todo el ancho porque se eligio, y otra
   a todo el ancho porque la heuristica lo decidio, sin forma de distinguirlas
   ni de cambiar la segunda. */
.services-container:has(.service-card[data-columnas]) .service-card.contratst-card:not([data-columnas]) {
    grid-column: span 2;
}

/* `.contratst-card` en el selector no sobra: iguala el peso de las reglas de
   disposicion automatica, y al ir despues en el archivo, gana. */
.services-container .service-card.contratst-card[data-columnas="2"],
.services-container[data-serv-layout] .service-card.contratst-card[data-columnas="2"] {
    grid-column: span 2;
}
.services-container .service-card.contratst-card[data-columnas="3"],
.services-container[data-serv-layout] .service-card.contratst-card[data-columnas="3"] {
    grid-column: 1 / -1;
}

/* Common Card Styles */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Card 1: Asesoría (Vertical White) */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card:not(.contratst-card) {
    background-color: var(--dk-servicio-fondo);
    border: 1px solid #f0f0f020;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .card-image-wrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card:hover .card-image-wrapper img {
    transform: scale(1.05);
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: start;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    /* Bajó de 2.1rem: a ese tamaño un nombre de dos palabras ocupaba dos
       líneas y empujaba la descripción fuera de la tarjeta. */
    font-size: 1.5rem;
    line-height: 110%;
    margin-bottom: 1.1rem;
    /* Del color del negocio, no el marrón fijo de Veka. */
    color: var(--dk-servicio-titulo, var(--dk-servicio-boton));
}

/* Card 2: Pirotecnia (Horizontal Black) */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card {
    background-color: var(--dk-servicio-dest-fondo);
    flex-direction: row;
    /* Horizontal layout */
    justify-content: end;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper {
    /* Antes era 60% de ancho y alto automático: la imagen dejaba a la vista el
       fondo plano de la tarjeta en el resto. Ahora cubre todo el bloque y es
       el degradado de abajo el que la funde hacia el lado del texto. */
    width: 100%;
    height: 100%;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper img {
    /* Las fotos de servicio suelen ser verticales y con una persona: dentro de
       una caja horizontal, recortar por el centro exacto le corta la cabeza.
       Subir el foco al 30% deja la figura mejor encuadrada. */
    object-position: 50% 30%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Gradient overlay for pyro image to blend with black bg */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* Degradado largo y con varias paradas en vez de un corte de transparente
       a sólido: así no se ve la línea donde termina la foto. Va apenas
       inclinado (96deg) para que no quede un borde perfectamente vertical, y
       llega casi opaco al 52% —antes de que empiece el texto, en el 55%— pero
       sin cerrar del todo hasta el 68%. */
    background: linear-gradient(90deg,
        transparent 12%,
        color-mix(in srgb, var(--dk-servicio-dest-fondo) 30%, transparent) 30%,
        color-mix(in srgb, var(--dk-servicio-dest-fondo) 72%, transparent) 43%,
        color-mix(in srgb, var(--dk-servicio-dest-fondo) 94%, transparent) 52%,
        var(--dk-servicio-dest-fondo) 68%);
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content {
    /* flex: 0 0 en vez de solo width — como ítem flex se estaba encogiendo y
       el texto terminaba arrancando en el 63% en lugar del 53%, muy corrido a
       la derecha. Con la base fija empieza donde tiene que empezar y el
       degradado (que no se toca) ya viene cerrado desde antes. */
    flex: 0 0 47%;
    width: 47%;
    padding: 3rem 2em 3em 0em;
    justify-content: center;
    align-items: flex-start;
    margin-left: -8%;
    z-index: 1;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-logo {
    width: 60px;
    margin-bottom: 1.5rem;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-logo img {
    width: 100%;
    height: auto;
}

/* La tarjeta destacada va sobre una foto oscurecida: ahí el título sí va en
   blanco, y un punto más grande porque es la que manda en la sección. */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-title {
    color: #fff;
    /* La tarjeta destacada es ancha y oscura: con 1.7rem el título no pesaba
       lo suficiente frente a la foto que tiene al lado. */
    font-size: 2rem;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    color: var(--dk-servicio-texto, #666);
    /* Gris para la card blanca */
    margin-bottom: 2rem;
    line-height: 127%;

    /* NUEVE LINEAS Y A PARTIR DE AHI SE DESPLAZA.
       Una descripcion larga —un tour con su lista de "incluye"— estiraba la
       tarjeta a lo alto, y como las tarjetas de una fila comparten altura,
       una sola descripcion larga desmontaba la retícula entera.

       El tope va en `em` y no en px a proposito: `em` se mide contra el
       font-size de este mismo elemento, que en movil baja a 0.85rem. Asi
       siguen siendo nueve lineas en las dos pantallas, sin repetir el
       calculo en la media query.

       9 lineas x 1.27 de interlineado = 11.43em. */
    max-height: 11.43em;
    overflow-y: auto;

    /* Que al llegar al final del texto NO siga desplazandose la pagina
       detras: en movil, leer una descripcion larga daba un salto al soltar. */
    overscroll-behavior: contain;

    /* Sitio para la barra, para que no se monte sobre la ultima letra. */
    padding-right: 0.6em;
}

/* La barra, discreta y con el color de la tarjeta. Sin esto Windows pinta
   uno gris ancho que en la tarjeta oscura se ve como un error. */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc::-webkit-scrollbar {
    width: 6px;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc::-webkit-scrollbar-track {
    background: transparent;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 3px;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-desc {
    color: var(--dk-servicio-dest-texto, #ffffff);
    /* Gris claro para la card negra */
}

/* Buttons */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {display: flex;align-items: center;gap: 8px;font-family: 'Blinker', sans-serif;font-weight: 600;font-size: 1.3rem;color: #ffffff;text-decoration: none;background: #967048;padding: 0.3em 1em;border-radius: 100px;transition: .2s all;width: max-content;}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
    background-color: var(--dk-servicio-boton);
    border: 2px solid var(--dk-servicio-boton);
    color: #fff;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    /* El color de boton DE ESTA SECCION, no el general. Con --dk-boton, al
       pasar el mouse el texto saltaba a un color que no era el elegido en
       Servicios y que desde el editor no habia forma de cambiar. */
    color: var(--dk-servicio-boton, var(--dk-boton));
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service:hover svg {}
/* La tarjeta destacada se pinta aparte de la normal: son dos grupos de
   color distintos en Tu Dkard > Colores (Servicios / Servicio destacado).
   Por defecto las dos derivan de --dk-boton, asi que sin configurar nada se
   ven iguales que antes. */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-title {
    color: var(--dk-servicio-dest-titulo, var(--dk-servicio-dest-boton));
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .btn-service {
    background-color: var(--dk-servicio-dest-boton);
    border-color: var(--dk-servicio-dest-boton);
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .btn-service:hover {
    /* EL FONDO TAMBIEN, o el texto desaparece.
       Esta regla solo cambiaba el `color`, contando con que el fondo blanco
       viniera del hover de la tarjeta normal. Pero ese hover y la regla base
       de aqui arriba tienen LA MISMA especificidad, y la base va despues en el
       archivo: gana ella, el fondo se quedaba en el color del boton... y el
       texto pasaba a ese mismo color. Boton solido y rotulo invisible.
       Declarandolo aqui, el hover (una clase mas, por el :hover) manda sobre
       la base y la inversion queda completa: fondo claro, texto del color de
       la marca — igual que en la tarjeta normal. */
    background-color: #fff;
    color: var(--dk-servicio-dest-boton);
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .btn-service:hover svg * {
    fill: var(--dk-servicio-dest-boton) !important;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service:hover svg * {
    fill: var(--dk-servicio-boton) !important;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service .icon-whatsapp {
    /* Assuming it's a font icon or similar, styles might vary */
    width: 25px;
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service .icon-whatsapp svg * {
    fill: white
}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc {}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {}

.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service>span {}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.dkrd-main .dkrd-contact {
    width: 100%;
    margin: 2rem 0 7em;
    padding: 0 2rem;
    /* SIN FONDO, a proposito: la seccion se ve sobre el fondo de la pagina y
       no lleva color propio. Aqui hubo un control de "Fondo de la seccion"
       —que en realidad terminaba pintando el titulo— y se quito: lo que se
       elige son sus piezas (etiqueta, titulo, mensaje, iconos). */
}

.dkrd-main .dkrd-contact .contact-wrapper {
    max-width: 1300px;
    width: 90%;
    margin: 0 auto;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header {
    flex: 1;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-label {
    
    
    
    
    /* Marrón */
    
    /* "Múltiples opciones de contacto" no está todo en mayúsculas en la imagen */
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-contacto-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    /* Variable propia, separada del color de los iconos: antes los dos
       colgaban del mismo control y no habia forma de moverlos por separado. */
    color: var(--dk-contacto-titulo, #ffffff);
    margin: 0;
    line-height: 90%;
    margin-top: 9px;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title>strong,
.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title b {
    font-weight: 800;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card {
    flex: 1;
    /* Las DOS paradas se eligen, igual que en el mensaje destacado. Antes
       salian de --dk-panel-1/--dk-panel-2, que se declaran en :root y por eso
       se heredan ya resueltas: ningun color de seccion podia alcanzarlas, y el
       cliente no tenia forma de cambiar el fondo de su mensaje. Sin elegir
       nada, esas dos siguen siendo el respaldo y se ve como siempre. */
    background: linear-gradient(129deg,
        var(--dk-contacto-mensaje-1, var(--dk-panel-1)) 0%,
        var(--dk-contacto-mensaje-2, var(--dk-panel-2)) 100%);
    padding: 2rem 3em;
    border-radius: 12px;
    color: var(--dk-auto-panel, #fff);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .contact-quote-text {
    font-family: 'Barlow', sans-serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 110%;
    margin-bottom: 0;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .quote-dots {
    display: flex;
    gap: 0.5rem;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .quote-dots .dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .quote-dots .dot.active {
    background-color: #fff;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-icon {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* Opcional, si queremos círculo, pero en la imagen son iconos sueltos */
}

/* Filtro para iconos dorados suaves */
.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-icon img {
    filter: invert(80%) sepia(26%) saturate(696%) hue-rotate(333deg) brightness(90%) contrast(90%);
    /* Tono beige/dorado */
    width: 50px;
    height: auto;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details .method-action {
    font-family: 'Blinker', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #8c6b4a;
    /* Marrón */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details .method-value {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    /* No tan bold como el título, pero destacado */
    font-size: 1.8rem;
    color: #000;
}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-label {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title>strong {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .contact-quote-text {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .quote-dots {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card .quote-dots .dot {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-icon {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-icon>img {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details .method-action {}

.dkrd-main .dkrd-contact .contact-wrapper .contact-methods-grid .contact-method-card .method-details .method-value {}

/* ==========================================================================
   GALLERY SECTION
   ========================================================================== */
.dkrd-main .dkrd-gallery {}

.dkrd-main .dkrd-gallery .gallery-wrapper {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-header {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-header .gallery-label {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-header .gallery-title {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-header .gallery-title>strong {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-container {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-container .gallery-grid {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-container .gallery-grid .gallery-item {}

.dkrd-main .dkrd-gallery .gallery-wrapper .gallery-container .gallery-grid .gallery-item>img {}

/* ==========================================================================
   DISCOUNT SECTION
   ========================================================================== */
/* ==========================================================================
   DISCOUNT SECTION
   ========================================================================== */
.dkrd-main .dkrd-discount {
    width: 100%;
    margin: 4rem 0;
    padding: 0 2rem;
}

.dkrd-main .dkrd-discount .discount-wrapper {
    max-width: 1100px;
    /* Un poco más estrecho para esta sección */
    margin: 0 auto;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-header {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-label {font-family: 'Blinker', sans-serif;font-weight: 600;font-size: 1.5rem;color: var(--dk-boton);text-transform: uppercase;display: block;margin-bottom: -0.1rem;}

.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    color: #ffffff;
    margin: 0;
    line-height: 90%;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-title>strong,
.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-title b {
    font-weight: 800;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

/* Offer Card (Left - Gold/Brown) */
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card {
    /* Degradado monocromo, derivado de UN solo color de la paleta.
       Antes unía --dk-contraste con --dk-boton, dos colores que el negocio
       elige por separado: en cuanto no combinaban (un verde oscuro contra un
       dorado, por ejemplo) la tarjeta quedaba fea sin que nadie se hubiera
       equivocado al elegirlos. Tomando solo --dk-boton y aclarando/oscureciendo
       ese mismo tono, los dos extremos siempre pertenecen a la misma familia y
       la combinación no puede salir mal.
       Ojo: el segundo extremo es mas CLARO que el primero, no mas oscuro —el
       comentario decia lo contrario de lo que hace el codigo—. Que el texto
       se lea encima no lo resuelve este degradado, lo resuelve
       ajustarTextoDePaneles() midiendo los dos extremos al cargar. */
    background: linear-gradient(135deg, var(--dk-descuento-1) 0%, var(--dk-descuento-2) 100%);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dk-auto-descuento, #fff);
    text-align: center;
    position: relative;
    min-height: 450px;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    width: 100%;
    height: 100%;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-intro {
    font-family: 'Barlow', sans-serif;
    font-size: 1.2rem;
    line-height: 100%;
    /* Hereda el blanco de la tarjeta en vez de un marrón fijo. El degradado de
       fondo arranca siempre en --dk-contraste (el punto OSCURO de la paleta),
       así que va blanco en los dos temas: el #3e2b1d anterior se perdía contra
       ese fondo, igual que pasaría con negro en tema claro. */
    color: inherit;
    margin: 0;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-value {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 12rem;
    /* Muy grande */
    line-height: 90%;
    color: var(--dk-auto-descuento, #fff);
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-divider {
    width: 60px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 1.8rem 0;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 80%;
    margin-bottom: 2rem;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-btn {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--dk-auto-descuento, #fff);
    /* O quizas un tono beige */
    text-decoration: none;
    text-transform: capitalize;
    /* "Adquirir descuento" */
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-btn:hover {
    border-bottom-color: #fff;
    transform: translateY(-2px);
}

/* Visual Card (Right - Image) */
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    /* Sin alto propio: se estira al de la fila, que lo marca la tarjeta de la
       oferta de al lado (.discount-container es grid con align-items:stretch).
       Los 450px fijos de antes obligaban a un alto que no tenía por qué
       coincidir con el del texto, y sobraba o faltaba franja según el caso. */
    min-height: 0;
    height: 100%;
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card .discount-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* La foto se saca del flujo para que llene la tarjeta entera.
   Funciona porque .discount-visual-card es `position: relative` y esta figura
   no lo es: el punto de referencia de la imagen es la tarjeta. Y el tamaño ya
   se lo da proload/styles.css (`.proload img` va al 100% con object-fit:
   cover), así que no hace falta repetirlo aquí.
   El `overflow: hidden` de la tarjeta se encarga de recortar lo que sobre. */
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card .discount-img img {
    position: absolute;
}




/* ==========================================================================
   GALERÍA ("Conoce nuestro trabajo") + lightbox
   ========================================================================== */
.dkrd-main .dkrd-gallery {
    width: 100%;
    /* La grilla va a sangre y pegada a las secciones vecinas se leía como
       parte de ellas; con más aire se entiende como un bloque aparte. */
    margin: 7rem 0;
    padding: 0 2rem;
    /* Oculta por defecto: sin imágenes cargadas, el negocio veía igual el
       título "Conoce nuestro trabajo" sobre una grilla vacía. renderGaleria()
       la muestra (display:block) solo cuando hay imágenes de verdad. */
    display: none;
}
.dkrd-main .dkrd-gallery .gallery-wrapper {
    /* A sangre: la grilla toca los bordes de la ventana. El encabezado sí
       conserva el ancho de lectura, con su propio padding. */
    max-width: none;
    margin: 0;
}
.dkrd-main .dkrd-gallery .gallery-header {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    text-align: center;
}

/* Etiqueta y título con el mismo tratamiento del bloque de promoción. */
.dkrd-main .dkrd-gallery .gallery-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-galeria-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}
.dkrd-main .dkrd-gallery .gallery-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    color: var(--dk-galeria-titulo, #ffffff);
    margin: 0;
    line-height: 90%;
}
.dkrd-main .dkrd-gallery .gallery-title strong,
.dkrd-main .dkrd-gallery .gallery-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-gallery .gallery-title { color: var(--dk-galeria-titulo, var(--dk-contraste)); }
.dkrd-main .dkrd-gallery .gallery-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
/* El título de la galería usa .section-title como el resto de las secciones;
   antes tenía tipografía y peso propios y desentonaba con las demás. */
.dkrd-main .dkrd-gallery .gallery-description {
    color: #ffffffcc;
    font-size: 1rem;
    max-width: 560px;
    /* El shorthand va con el valor de arriba incluido: si se dejaba
       "margin-top" aparte, este "margin: 0 auto" lo pisaba y quedaba en 0.
       Separa la descripción del título, que si no se leían como un bloque. */
    margin: .9rem auto 0;
}
.dkrd-main .dkrd-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--dk-columnas, 5), minmax(0, 1fr));
    /* Sin separación: las fotos se tocan entre sí y con los bordes. */
    gap: 0;
    /* Salida a ancho completo de ventana: la sección tiene padding lateral y
       sin esto la grilla arrancaba a 32px del borde en vez de pegada. */
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
}
.dkrd-main .dkrd-gallery .gallery-item {
    aspect-ratio: 1 / 1;
    /* Sin radio ni margen: en un mosaico a sangre, los bordes redondeados
       dejaban huecos del fondo entre foto y foto. */
    overflow: hidden;
    cursor: zoom-in;
    margin: 0;
}
.dkrd-main .dkrd-gallery .gallery-item img { transition: transform .4s ease; }
.dkrd-main .dkrd-gallery .gallery-item:hover img { transform: scale(1.06); }
.dkrd-main .dkrd-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* Lightbox: overlay fijo con navegación anterior/siguiente. */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    /* Arriba de todo lo que flota en la página: la mano del menú fijo (1036),
       el resumen del cotizador (105) y el mensaje guía (2000). Estaba en 999,
       por debajo de los tres. */
    /* POR ENCIMA DEL SELECTOR DE VARIACIONES (3200). El visor se abre
       DESDE ese modal —al tocar la foto de la combinacion— y en 3100 se
       abria por detras: la pantalla se oscurecia y la foto grande no
       aparecia por ningun lado. Un visor a pantalla completa es, por
       definicion, lo ultimo que se pone encima. */
    z-index: 3250;
    background: rgba(10, 8, 6, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-lightbox.hidden { display: none; }

/* LA CLASE `hidden`, que faltaba.
   El JavaScript de la página la usa desde hace tiempo para quitar de la vista
   lo que quedó sin texto —la frase de "Quiénes somos", su etiqueta, los
   elementos vacíos del contenido destacado y del mensaje destacado— pero en
   esta hoja solo estaba definida para el lightbox de la galería. En todo lo
   demás no hacía nada: se ponía la clase y el hueco seguía ahí.

   Global y no acotada a .dkrd-main: el mensaje destacado vive FUERA de ese
   contenedor, pegado bajo la portada, y una regla por contenedor deja
   agujeros como ese cada vez que se mueve un bloque. Esta hoja solo la usa la
   página pública —el panel tiene la suya—, así que no choca con nada.

   La clase va REPETIDA a propósito. Varios de los bloques que hay que poder
   esconder traen su propio `display` desde una regla de una sola clase
   (.hero-highlight es `display: flex`), y con la misma especificidad gana la
   que esté más abajo en el archivo. Repetirla sube la especificidad lo justo
   para que esto funcione esté donde esté escrito, en vez de depender de que
   nadie mueva una regla. Es lo mismo que un !important pero sin cerrarle la
   puerta a una regla más específica que de verdad necesite mostrar algo. */
.hidden.hidden { display: none; }
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox-img {
    max-width: min(88vw, 1100px);
    max-height: 82vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.gallery-lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.gallery-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.gallery-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
/* Ícono en SVG y no el glifo ‹ ›: esos caracteres traen espacios laterales
   desiguales y quedaban descentrados dentro del círculo. */
.gallery-lightbox-nav svg {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
}
.gallery-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.gallery-lightbox-prev { left: 20px; }
.gallery-lightbox-next { right: 20px; }
.gallery-lightbox-counter {
    position: absolute;
    /* Encima de la tira de miniaturas, que ahora ocupa el pie del visor: la
       tira (62px) + el boton de pedir + su relleno miden unos 160px. */
    bottom: 168px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffffb3;
    font-size: 0.85rem;
    margin: 0;
}

/* ------------------------------------------------ el pie del visor -------
   Tira de miniaturas y, cuando lo abre un producto, el botón de pedir. */
.gallery-lightbox-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
}
.gallery-lightbox-thumbs {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px;
    /* Sin barra a la vista: la tira se arrastra con el dedo. */
    scrollbar-width: none;
}
.gallery-lightbox-thumbs::-webkit-scrollbar { display: none; }
.gallery-lightbox-thumbs.hidden { display: none; }

.gallery-thumb {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s ease, border-color .2s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.es-activa {
    opacity: 1;
    border-color: var(--dk-boton, #F2600C);
}

/* Pedir sin salir de la foto: quien está mirando es quien decide. */
.gallery-lightbox-pedir {
    padding: 12px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--dk-boton, #F2600C);
    color: var(--dk-fondo, #14100E);
    font-family: 'Blinker', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.gallery-lightbox-pedir:hover { filter: brightness(1.08); }
.gallery-lightbox-pedir.hidden { display: none; }

/* ------------------------------------- el mini-slider de cada tarjeta ----
   Scroll nativo con scroll-snap: el arrastre, la inercia y el gesto del dedo
   los hace el navegador. Un carrusel a mano aquí sería código que mantener
   para hacer peor lo que el navegador ya hace bien. */
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image .card-slider,
.dkrd-main .dkrd-destacados .product-grid .product-card .card-image .card-slider {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.card-image .card-slider::-webkit-scrollbar { display: none; }
.card-image .card-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    scroll-snap-align: center;
}
.card-image .card-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SE PUEDE AGARRAR: el cursor lo dice antes de intentarlo, y es lo unico que
   lo dice — la barra de estas tiras esta escondida a proposito.

   `dk-se-agarra` la pone `renderDestacados` y `renderResenas` sobre su tira
   cuando esta en modo lateral; `card-slider` es la de fotos de una tarjeta,
   que siempre lo esta.

   EL scroll-snap SE APAGA DESDE JAVASCRIPT y no aqui, aunque para el slider de
   tarjeta bastara con esta regla: las tiras de bloque declaran su snap con una
   clase mas de especificidad y le ganarian a cualquier excepcion escrita aqui.
   Ver `arrastrarParaDesplazar` en main.js. */
.card-image .card-slider,
.dkrd-main .dk-se-agarra { cursor: grab; }

.card-image .card-slider.se-arrastra,
.dkrd-main .dk-se-agarra.se-arrastra {
    cursor: grabbing;
    /* Sin esto, arrastrar una tira de texto lo unico que hace es seleccionarlo
       —que es lo que pasaba— y la tira no se mueve. */
    user-select: none;
}
.card-image .card-slider.se-arrastra { scroll-snap-type: none; }

.card-image .card-slider.se-arrastra img,
.dkrd-main .dk-se-agarra.se-arrastra img { pointer-events: none; }

/* En el visor, la foto grande tambien se agarra para pasar a la siguiente. */
.gallery-lightbox-img { cursor: grab; transition: transform .18s ease; }

/* Los puntitos: cuántas hay y en cuál va. */
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image,
.dkrd-main .dkrd-destacados .product-grid .product-card .card-image { position: relative; }

.card-slider-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}
.card-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transition: background .2s ease, transform .2s ease;
}
.card-punto.es-activo {
    background: #ffffff;
    transform: scale(1.25);
}


/* ==========================================================================
   SHARE SECTION
   ========================================================================== */
.dkrd-main .dkrd-share {
    width: 100%;
    margin-top: 4rem;
    padding: 2rem;
    text-align: center;
}

.dkrd-main .dkrd-share .share-wrapper {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.dkrd-main .dkrd-share .share-wrapper .share-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-boton);
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}

.dkrd-main .dkrd-share .share-wrapper .social-share-row {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn {
    width: 45px;
    height: 45px;
    background-color: var(--dk-boton);
    /* Marrón */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    /* Ligeramente redondeado como en la imagen */
    transition: background-color 0.3s ease;
}

.dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn:hover {
    background-color: #000;
}

.dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn>svg{
    filter: brightness(0) invert(1);
    /* Iconos blancos */
    width: 30px;
    height: 30px;
}

/* Phone Mockup */
.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper {
    width: 300px;
    height: 600px;
    /* Altura aproximada */
    position: relative;
    margin: 0 auto;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    /* Marco negro */
    border-radius: 40px;
    padding: 12px;
    /* Grosor del borde */
    box-shadow: 0 0 0 2px #333, 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
}

/* Botones laterales simulados */
.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device::before {
    content: '';
    position: absolute;
    top: 100px;
    left: -2px;
    width: 3px;
    height: 25px;
    background: #222;
    border-radius: 2px 0 0 2px;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device::after {
    content: '';
    position: absolute;
    top: 135px;
    left: -2px;
    width: 3px;
    height: 50px;
    background: #222;
    border-radius: 2px 0 0 2px;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-notch-area {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 25px;
    background-color: #1a1a1a;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen {
    width: 100%;
    height: 100%;
    background-color: #cbb08b;
    /* Beige/Marrón claro de fondo */
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    padding-top: 4rem;
    /* Espacio para el notch */
    text-align: center;
    color: #fff;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .smiley-icon {
    margin-bottom: 1.5rem;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .smiley-icon>img {
    filter: brightness(0) invert(1);
    /* Blanco */
    width: 60px;
    height: 60px;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .screen-cta-text {
    font-family: 'Blinker', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 2rem;
    line-height: 1.2;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .qr-code-frame {
    background-color: #fff;
    padding: 10px;
    border-radius: 12px;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .qr-code-frame .qr-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Logo central del QR simulado */
.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .qr-code-frame::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #5bc0b6;
    /* Turquesa */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .bottom-social {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    /* Empujar al fondo */
    margin-bottom: 1rem;
}

.dkrd-main .dkrd-share .share-wrapper .phone-mockup-wrapper .phone-device .phone-screen .screen-content .bottom-social>li>a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: #8c6b4a;
    /* Icono color marrón */
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.dkrd-footer {
    min-height: 580px;
    padding-bottom: 100px;
    /* Sin `background`: deja ver el fondo de la página. Ver la nota en el
       bloque de tema claro. */
    display: grid;
    justify-items: center;
    align-content: center;
}

.dkrd-footer .logo-label {
    color: #ffff;
}

/* Firma de DKARD en el pie. Las dos versiones están en el HTML y acá se
   decide cuál se ve: sin esto habría que esperar al JS y se vería el logo
   equivocado por un instante. */
.dkard-firma {
    /* Pedido explícito: 30% más chico que el tamaño original (240px). En
       móvil baja otro tanto, ver el media query de abajo. */
    width: min(168px, 60vw);
    /* #config (el <div> del que cuelga esta firma) sí es ítem del grid del
       pie y hereda `justify-items: center`, pero por sí solo eso lo encoge
       al ancho de su contenido — de ahí un `width` fijo quemado en #config
       (ya quitado) que le ganaba a los 240px de acá y la desbordaba fuera
       de centro. El margin:auto de acá centra la firma dentro de #config
       una vez que #config puede encogerse a su medida real. */
    margin: 0.6rem auto 0;
}
.dkard-firma .dkard-firma-img { width: 100%; height: auto; display: block; }

/* Por defecto se ve la versión oscura (blanca). El selector de una sola
   clase de acá abajo tenía menos especificidad que la regla de arriba
   (2 clases) y perdía contra su "display: block" — las dos versiones se
   veían a la vez, una debajo de la otra. Con ".dkard-firma" delante queda
   con la misma especificidad y gana por venir después en el archivo. */
.dkard-firma .dkard-firma-img--claro { display: none; }
[data-tema="claro"] .dkard-firma-img--oscuro { display: none; }
[data-tema="claro"] .dkard-firma-img--claro { display: block; }

.dkrd-footer .logo-label .logo-label-text {}

.dkrd-footer .logo-wrapper {}

.dkrd-footer .logo-wrapper>img {}


.dk-item {
    cursor: pointer;
}

.dkarta-resume.no-price {}

.dkarta-resume.no-price .price>span {
    display: none !important;
}

.dkarta-resume.no-price .resume-total {
    display: none;
}

.dkarta-resume.no-price .resume-items .item {
    margin-bottom: 10px;
}

.dkarta-resume.no-price .resume-items .item:last-child .price {
    display: none
}

.f-resume-total.n-price {
    display: none !important;
}

#dkard-form-btn.no-price~#dkarta-ui .f-resume-total {
    display: none;
}

#dkard-form-btn.no-price~#dkarta-ui .f-resume-total.n-price {
    display: flex !important;
}

#dkard-form-btn.no-price~#dkarta-ui .f-resume-total.n-price .txt {
    font: 600 22px Barlow;
    letter-spacing: 0px;
    text-transform: uppercase;
}

#dkard-form-btn.no-price~#dkarta-ui .dkarta-float-resume {
    bottom: 23px;
}

#dkard-form-btn.no-price~#dkarta-ui #resume-toggle:checked::before {
    content: var(--dk-txt-ver-pedido, "Ver pedido");
    font: 600 12px Barlow;
}


.noe {
    pointer-events: none;
}

#dkard-form-btn {
    position: fixed;
    z-index: 10;
    right: 18px;
    bottom: 18px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;

    transition: all .2s;
}

#dkard-form-btn .form-btn {
    display: flex;
    height: 60px;
    width: 60px;
    align-items: center;
    justify-content: center;
}

#dkard-form-btn .form-btn>* {
    width: 30px;
    margin-bottom: -5px;
    fill: #F95A00;
}

#dkard-form-btn:hover {
    background-color: #F95A00;
}

#dkard-form-btn:hover .form-btn>* {

    fill: #fff;
}

.elementor-slideshow__header {
    display: none;
}

/* Regla heredada de la plantilla original: evita que se pueda arrastrar o
   pulsar directamente una imagen, y hace que el clic caiga siempre en la
   tarjeta que la contiene. Se conserva, pero cualquier figura que SÍ tenga que
   responder al clic necesita reactivarlo (ver .gallery-item). */
figure,
img {
    pointer-events: none;
}

/* La galería es clicable: cada figura abre el lightbox. Sin esto, la regla de
   arriba se traga el clic y el hover, y la sección parece rota. */
.dkrd-main .dkrd-gallery .gallery-item {
    pointer-events: auto;
}


.lb-dkard-form {}

.lb-dkard-form .dkarta-resume {
    display: none;
}

.lb-dkard-form .dkard-form {
    display: block;
}

.lb-karta {}

.lb-karta .dkarta-resume {
    display: block;
}

.lb-karta .dkard-form {
    display: none;
}

.dkard-form {
    min-width: 280px;
    max-width: 560px;
    width: 90%;
    box-sizing: border-box;
    padding: 30px;
    background-color: #fff;
    border-radius: 14px;
    transform: scale(0.6);
    opacity: 0;
    transition: all .3s;
}

.dkard-form .dk-form {
    position: relative;
    width: 100%;
    font-family: Barlow;
}

.dkard-form .dk-form .f-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgb(249, 90, 0);
    background: linear-gradient(90deg, rgba(249, 90, 0, 1) 0%, rgba(255, 189, 18, 1) 100%);
    color: #fff;
    border-radius: 10px;
    margin-bottom: 40px;

    font: 600 20px Barlow;
    text-transform: uppercase;
}

.dkard-form .dk-form .f-title span {}

.dkard-form .dk-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dkard-form .dk-form form .form-group {
    display: flex;
    flex-direction: column-reverse;
    gap: 13px;
}

.dkard-form .dk-form form .form-group label {
    text-transform: uppercase;
    font-weight: 700;
    color: #000;
    font-size: 13px;
}

.dkard-form .dk-form form .form-group input,
.dkard-form .dk-form form .form-group textarea,
.dkard-form .dk-form form .form-group select {
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    padding: 0.6em 1em;
}

.dkard-form .dk-form form .form-group textarea {
    resize: none;
    height: 77px;
    line-height: 112%;
}

.dkard-form .dk-form form .f-terms {
    /* 1.35 de interlineado y no 100%: este renglon nacio siendo UNA linea y
       ahora es el aviso de datos, que ocupa dos. Con `line-height: 100%` las
       dos lineas se tocaban. */
    font: 600 16px / 1.35 Barlow;
    font-style: italic;
    color: #f95c00;
}

/* EL AVISO DE DATOS, en el cotizador. El del formulario de contacto es el
   .f-terms de mas arriba: mismo texto, cada uno con la pinta de su caja.

   LEGIBLE, NO ESCONDIDO. Un aviso a 12px y al 72% cumple sobre el papel y no
   lo lee nadie, que es la diferencia entre informar y cubrirse. A 13px y al
   85% se lee de corrido y sigue sin competir con el boton de pedir, que es lo
   unico que tiene que resaltar en esta caja.

   `currentColor` de base y no un gris fijo: esta hoja se pinta con los colores
   del negocio y hay dkards claros y oscuros. Un gris quemado desaparece en la
   mitad de ellos. */
.f-datos {
    margin: .7rem 0 0;
    font: 400 13px / 1.45 Barlow, system-ui, sans-serif;
    color: currentColor;
    opacity: .85;
}

/* EN EL COTIZADOR VA EN BLANCO, Y NO ES UN GUSTO: `.dkarta-resume` se pinta
   con `background-color: rgba(0,0,0,.8)` —negro fijo, no de la paleta del
   negocio— y no declara color de texto. En un dkard de tema claro la tinta
   heredada es oscura, asi que este aviso salia negro sobre negro. Sus vecinos
   de esta misma caja (.order-type-title) ya llevan `color: #fff` por lo mismo.

   Y su propio aire: arriba queda el telefono y abajo, los botones. */
.dkarta-resume .f-datos {
    margin: 1rem 0 .2rem;
    color: #fff;
    opacity: .78;
}

/* ===========================================================================
   LA CUENTA DE QUIEN COMPRA (ver dk-cuenta.js).
   ===========================================================================
   VIVE EN DOS CAJAS DE FONDO OPUESTO: el cotizador se pinta sobre el negro
   fijo de `.dkarta-resume` y el formulario de servicios sobre el blanco de
   `.dkard-form`. Un solo juego de colores no puede servir para los dos, y
   duplicar el bloque entero deja dos sitios donde arreglar cada cosa.

   Asi que la forma se escribe UNA vez con variables, y cada caja solo declara
   sus tonos. Lo que se toca al cambiar la forma esta en un sitio; lo que se
   toca al cambiar de fondo, en otro.

   COLORES PROPIOS Y NO DE LA PALETA DEL NEGOCIO, en los dos casos: estas cajas
   estan sobre fondos FIJOS —un negro y un blanco que no salen de la paleta—,
   asi que un color del negocio podria quedar invisible encima. Es la misma
   razon por la que el aviso de datos de al lado lleva su color escrito.

   DISCRETA A PROPOSITO. Pedir sin cuenta es el caso mayoritario: esto tiene que
   leerse como una comodidad que esta ahi si la quieres, no como un paso mas del
   formulario. De ahi que plegada sea una sola linea y no lleve ningun color
   llamativo hasta que se abre. */
.dk-cuenta {
    /* Sobre oscuro (el cotizador): blanco con transparencias. */
    --dkc-tinta: #fff;
    --dkc-suave: rgba(255, 255, 255, .75);
    --dkc-superficie: rgba(255, 255, 255, .07);
    --dkc-superficie-viva: rgba(255, 255, 255, .12);
    --dkc-borde: rgba(255, 255, 255, .16);
    --dkc-borde-vivo: rgba(255, 255, 255, .28);
    --dkc-campo: rgba(0, 0, 0, .35);
    --dkc-verde: #0ab724;
    --dkc-bien: #7ee89a;
    --dkc-malo: #ff9b8f;

    margin: 1rem 0 0;
    font-family: Barlow, system-ui, sans-serif;
    color: var(--dkc-tinta);
}

/* Sobre el blanco del formulario de servicios: la misma forma con tinta oscura
   y grises en vez de transparencias claras. */
.dkard-form .dk-cuenta {
    --dkc-tinta: #24201d;
    --dkc-suave: #6b625c;
    --dkc-superficie: rgba(0, 0, 0, .04);
    --dkc-superficie-viva: rgba(0, 0, 0, .07);
    --dkc-borde: rgba(0, 0, 0, .14);
    --dkc-borde-vivo: rgba(0, 0, 0, .26);
    --dkc-campo: #fff;
    --dkc-bien: #0a8f1f;
    --dkc-malo: #c0392b;

    margin: .9rem 0 0;
}

.dk-cuenta-gancho {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    background: var(--dkc-superficie);
    border: 1px solid var(--dkc-borde);
    border-radius: 10px;
    color: var(--dkc-tinta);
    font: 500 13.5px/1.3 Barlow, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.dk-cuenta-gancho:hover {
    background: var(--dkc-superficie-viva);
    border-color: var(--dkc-borde-vivo);
}
.dk-cuenta-icono {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dkc-superficie-viva);
}
.dk-cuenta-icono svg { width: 15px; height: 15px; display: block; }
/* min-width:0 para que el texto se recorte antes que empujar el «Entrar» fuera
   de la caja: estos formularios bajan hasta 280px de ancho. */
.dk-cuenta-gancho-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dk-cuenta-gancho-accion {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .9;
}

.dk-cuenta-form {
    margin-top: 8px;
    padding: 12px;
    background: var(--dkc-superficie);
    border: 1px solid var(--dkc-borde);
    border-radius: 10px;
}
/* `font-style: normal` en todo lo que lleva texto, y no es de adorno: en el
   formulario de servicios el vecino (.f-terms) va en cursiva naranja, y sin
   esto la cursiva se hereda y los dos avisos se leen como uno solo partido. */
.dk-cuenta-ayuda {
    margin: 0 0 9px;
    font: 400 12.5px/1.45 Barlow, system-ui, sans-serif;
    font-style: normal;
    color: var(--dkc-suave);
}
.dk-cuenta-ayuda strong { font-weight: 700; color: var(--dkc-tinta); }

/* En una sola fila mientras quepa, y en dos cuando no: en 280px el campo del
   correo y un boton de «Enviarme el codigo» no entran al lado. */
.dk-cuenta-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.dk-cuenta-campo {
    flex: 1 1 150px;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 11px;
    background: var(--dkc-campo);
    border: 1px solid var(--dkc-borde-vivo);
    border-radius: 8px;
    color: var(--dkc-tinta);
    font: 400 14px Barlow, system-ui, sans-serif;
    font-style: normal;
}
.dk-cuenta-campo::placeholder { color: var(--dkc-suave); opacity: .7; }
.dk-cuenta-campo:focus {
    outline: 2px solid var(--dkc-verde);
    outline-offset: 1px;
    border-color: var(--dkc-verde);
}
/* El codigo, grande y espaciado: son seis digitos que se copian mirando el
   correo, y se revisan de un vistazo antes de soltarlos. */
.dk-cuenta-campo--codigo {
    flex: 1 1 120px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .32em;
    text-align: center;
}
.dk-cuenta-boton {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: var(--dkc-verde);
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: 700 13px Barlow, system-ui, sans-serif;
    font-style: normal;
    cursor: pointer;
    transition: filter .15s ease;
}
.dk-cuenta-boton:hover { filter: brightness(1.12); }
.dk-cuenta-boton:disabled { opacity: .55; cursor: default; }

.dk-cuenta-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
}
.dk-cuenta-enlace {
    padding: 0;
    background: none;
    border: 0;
    color: var(--dkc-suave);
    font: 400 12px Barlow, system-ui, sans-serif;
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.dk-cuenta-enlace:hover { color: var(--dkc-tinta); }
.dk-cuenta-enlace:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* Dentro: verde tenue y una sola linea. Es un estado, no una accion, asi que
   no compite con «Pedir» ni con «Enviar». */
.dk-cuenta-dentro {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    background: rgba(10, 183, 36, .14);
    border: 1px solid rgba(10, 183, 36, .4);
    border-radius: 10px;
}
.dk-cuenta-tic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dkc-verde);
    color: #fff;
    font: 700 12px Barlow, system-ui, sans-serif;
    font-style: normal;
}
.dk-cuenta-quien {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 13px Barlow, system-ui, sans-serif;
    font-style: normal;
    color: var(--dkc-tinta);
}
.dk-cuenta-salir {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--dkc-suave);
    font: 400 12px Barlow, system-ui, sans-serif;
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.dk-cuenta-salir:hover { color: var(--dkc-tinta); }

/* LOS ULTIMOS PEDIDOS, para repetirlos de un toque. Van debajo del estado
   «entraste como…» y con el mismo aire: es informacion de la cuenta, no un
   paso mas del formulario. Discretos a proposito — el boton que manda sigue
   siendo «Pedir». */
.dk-cuenta-pedidos {
    margin-top: 7px;
    padding: 9px 10px 8px;
    background: var(--dkc-superficie);
    border: 1px solid var(--dkc-borde);
    border-radius: 10px;
}
/* EL TITULO TIENE QUE LEERSE COMO TITULO, no como la primera fila de la lista:
   con el mismo tono y el mismo peso que los nombres de los pedidos, el bloque
   se leia como cuatro renglones parejos y no como «un encabezado y sus tres
   pedidos». Se separa por tres vias a la vez —color, tamaño y una linea que lo
   despega— porque ninguna sola alcanzaba en un texto de 10px. */
.dk-cuenta-pedidos-titulo {
    display: block;
    margin: -1px 0 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dkc-borde);
    font: 700 10px Barlow, system-ui, sans-serif;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Mas apagado que los nombres, que son los que se leen. */
    color: var(--dkc-suave);
    opacity: .8;
}
.dk-cuenta-pedido {
    display: flex;
    align-items: center;
    gap: 9px;
}
.dk-cuenta-pedido + .dk-cuenta-pedido {
    margin-top: 6px;
    padding-top: 6px;
    /* Una linea entre pedidos y no una caja por cada uno: son tres filas de
       una lista corta, y encajarlas cada una en su recuadro dentro de otro
       recuadro es mas borde que contenido. */
    border-top: 1px solid var(--dkc-borde);
}
/* min-width:0 para que el nombre se recorte antes que empujar «Repetir» fuera
   de la caja: el cotizador baja hasta 280px de ancho. */
.dk-cuenta-pedido-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dk-cuenta-pedido-que {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 12.5px Barlow, system-ui, sans-serif;
    font-style: normal;
    color: var(--dkc-tinta);
}
.dk-cuenta-pedido-cuando {
    font: 400 11px Barlow, system-ui, sans-serif;
    font-style: normal;
    color: var(--dkc-suave);
}
.dk-cuenta-repetir {
    flex-shrink: 0;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--dkc-verde);
    border-radius: 7px;
    color: var(--dkc-verde);
    font: 700 11.5px Barlow, system-ui, sans-serif;
    font-style: normal;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dk-cuenta-repetir:hover { background: var(--dkc-verde); color: #fff; }

.dk-cuenta-aviso {
    margin: 8px 0 0;
    font: 400 12.5px/1.4 Barlow, system-ui, sans-serif;
    font-style: normal;
    color: var(--dkc-suave);
}
.dk-cuenta-aviso.es-bien { color: var(--dkc-bien); }
.dk-cuenta-aviso.es-malo { color: var(--dkc-malo); }

.dkard-form .dk-form .form-actions {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.dkard-form .dk-form .form-actions .f-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 22px;
    background-color: #ddd;
    border-radius: 7px;
    font: 700 19px Barlow;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
}

.dkard-form .dk-form .form-actions .f-action:hover {
    transform: scale(0.9);
    opacity: 0.7;
}


.dkard-form .dk-form .form-actions .f-action.close {
    background-color: #e2e2e2;
    min-width: 60px;
    width: auto;
    padding: 0;
}

.dkard-form .dk-form .form-actions .f-action.close svg {
    width: 60px;
    height: 38px;
}

.dkard-form .dk-form .form-actions .f-action.wa {
    background-color: #24d611;
}

.dkard-form .dk-form .form-actions .f-action.wa span {}

.dkard-form .dk-form .form-actions .f-action.sms {
    background-color: #2a87ff;
}

.dkard-form .dk-form .form-actions .f-action.sms span {}


.order-type-title {
    display: flex;
    margin-bottom: 10px;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font: 600 15px Barlow;
}

.order-type {
    display: flex;
    gap: 5px;
}

.order-type .order-option {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.order-type .order-option>input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}

.order-type .order-option>label {
    font: 700 13px Barlow;
    color: #fff;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 7px;
    text-transform: uppercase;
    transform: scale(0.95);

    transition: all .2s;
}

.order-type .order-option>label::before {
    content: '';
}

.order-type .order-option>input:checked~label {
    background-color: #999;
    border-color: #999;
    transform: scale(1.05);
}

#resume-comments {
    margin-top: 10px;
    width: 100%;
    padding: 9px 15px;
    border-radius: 6px;
    border: 1px solid #fff5;
    font: 16px / 110% Barlow;
    background: #fff2;
    color: #fff;
    resize: none;
}



/* Nombre y WhatsApp del cotizador: los dos obligatorios, mismo look. */
#resume-telefono,
#resume-name-user {
    margin-top: 2px;
    width: 100%;
    padding: 9px 15px;
    border-radius: 6px;
    border: 1px solid #fff5;
    font: 16px / 110% Barlow;
    background: #fff2;
    color: #fff;
}
#resume-telefono::placeholder,
#resume-name-user::placeholder { color: #fffc; }

/* El borde de color solo aparece cuando ya se escribió algo: en blanco no
   hay nada que corregir todavía, y arrancar en rojo se lee como un error
   que la persona no cometió. La clase la pone actualizarEstadoPedir(). */
#resume-telefono.dk-invalido,
#resume-name-user.dk-invalido {
    border-color: #ff3030;
}
#resume-telefono.dk-valido,
#resume-name-user.dk-valido {
    border-color: #0ab724;
}

#resume-toggle {
    position: fixed;
    z-index: 10;
    bottom: 58px;
    left: 196px;
    width: 80px;
    height: 32px;
    background: #f50000;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    transform: rotate(90deg);
    font: 600 13px Barlow;
    cursor: pointer;
    transition: all .2s;
}

#resume-toggle:before {
    content: var(--dk-txt-cerrar, "Cerrar");
    display: flex;
    text-transform: uppercase;
    background: #ffffff;
    color: #000;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border-radius: 6px 6px 0px 0px;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .1);
    transition: .3s;
}

#resume-toggle:after {
    content: attr(data-quantity);
    display: flex;
    text-transform: capitalize;
    background: #fff;
    color: #0ab724;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    z-index: 2;
    border-radius: 100px;
    box-sizing: border-box;
    position: absolute;
    right: 100%;
    margin-right: 15px;
    font-size: 20px;
    transform: rotate(-90deg);
    transition: .3s;
    box-shadow: 0px 0px 7px 4px rgb(0 0 0 / 15%);
    opacity: 0;
    bottom: -66px;
    visibility: hidden;
}

#resume-toggle:checked {
    left: -10px;
}

#resume-toggle:checked::before {
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    content: var(--dk-txt-ver-total, "Ver Total");
}

#resume-toggle:checked::after {
    opacity: 1;
    visibility: visible;
    bottom: -6px;
    transition-delay: .4s;
}

#resume-toggle:checked~.dkarta-float-resume {
    left: -300px;
}


.dkarta-notify {
    display: flex;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    width: 70vw;
    min-width: 290px;
    max-width: 470px;
    align-items: center;
    top: 20px;
    left: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    transition: all 1.2s linear;
    transition-delay: .8s;
}

.dkarta-notify.dk-show {
    transform: translateY(190px);
    opacity: 0;
}

.dkarta-notify .notify-q {
    min-width: 25px;
    min-height: 25px;
    background: #0ab724;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    margin-right: 14px;
    font: 700 17px / 100% Barlow;
    text-indent: -2px;
    align-self: baseline;
}

.dkarta-notify .notify-n {
    font: 600 16px / 105% Barlow;

    text-transform: capitalize;
    color: #000;
}

.dkarta-float-resume {
    width: 210px;
    padding: 10px 18px 15px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid #7c7c7c;
    position: fixed;
    bottom: 10px;
    left: 10px;
    cursor: pointer;

    transition: all .2s;
}

.dkarta-float-resume:hover {
    box-shadow: 0px 0px 32px rgb(253 187 255 / 87%);
}

.dkarta-float-resume .f-resume-actions {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dkarta-float-resume .f-resume-actions .f-resume-action {
    display: flex;
}

.dkarta-float-resume .f-resume-actions .f-resume-action .icon {}

.dkarta-float-resume .f-resume-actions .f-resume-action .icon>svg {}

.dkarta-float-resume .f-resume-actions .f-resume-action .txt {}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer,
.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2AABF4;
    padding: 7px 0;
    border-radius: 7px;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .icon,
.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .icon {
    margin-right: 9px;
    height: 22px;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .icon>svg,
.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .icon>svg {
    fill: #fff;
    width: 18px;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .txt,
.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .txt {
    font: 600 16px Barlow;
    color: #fff;
    text-transform: uppercase;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer {
    background-color: #2AABF4;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .icon {}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .icon>svg {}

.dkarta-float-resume .f-resume-actions .f-resume-action.deshacer .txt {}

.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar {
    background-color: #FA3939;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .icon {}

.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .icon>svg {
    fill: #fff;
    width: 16px;
}

.dkarta-float-resume .f-resume-actions .f-resume-action.vaciar .txt {}

.dkarta-float-resume .f-resume-q {
    font: 600 16px Barlow;
    text-align: center;
    color: #fff;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.dkarta-float-resume .f-resume-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #0ab724;
}

.dkarta-float-resume .f-resume-total:hover {
    background-color: #fff;
    color: #000;
}

.dkarta-float-resume .f-resume-total .txt {
    font: 400 12px Barlow;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.dkarta-float-resume .f-resume-total .f-resume-price-total {
    font: 600 27px/100% Barlow;
}

.dkarta-float-resume .f-resume-taps-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.dkarta-float-resume .f-resume-taps-btn .icon {}

.dkarta-float-resume .f-resume-taps-btn .icon>svg {
    fill: #C755EF;
    margin-right: 8px;
    height: 23px;
}

.dkarta-float-resume .f-resume-taps-btn .txt {
    color: #fff;
    font: 700 14px Barlow;
}

.dkarta-resume {
    min-width: 280px;
    max-width: 560px;
    width: 90%;
    box-sizing: border-box;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 14px;
    transform: scale(0.6);
    opacity: 0;
    border: 1px solid #999;
    box-shadow: 0px 0px 40px rgb(255 255 255 / 36%);

    transition: all .3s;
}

.dkarta-resume>hr {
    border: none;
    border-top: 5px solid #fff;
    width: 100%;
    margin-right: 14px;
    margin-bottom: 25px;
}

.dkarta-resume .resume-title {
    display: flex;
    padding: 15px;
    border-radius: 9px;
    font: 600 20px Barlow;
    text-align: center;
    justify-content: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #fff;
    background: #0ab724;
}

.dkarta-resume .resume-items {
    display: flex;
    flex-direction: column;
}

.dkarta-resume .resume-items .item {
    position: relative;
    display: flex;
    margin-bottom: 35px;
    padding-left: 16px;
    justify-content: space-between;
    align-items: center;
}

.dkarta-resume .resume-items .item .delete {
    position: absolute;
    right: 100%;
    padding: 1px;
    margin-top: 0px;
    margin-right: -11px;
    display: flex;
    cursor: pointer;
}

.dkarta-resume .resume-items .item .delete:hover {
    transform: scale(1.5);
}

.dkarta-resume .resume-items .item .delete>svg {
    fill: #ff3030;
    width: 12px;
    height: 12px;
}

/* LA MINIATURA DE CADA LINEA (ver miniaturaDeLaLinea en main.js).
   ---------------------------------------------------------------------------
   Chiquita a proposito: 44px alcanzan para reconocer que es y de que color, y
   el cotizador es una lista de repaso, no una vitrina. Para mirarla de verdad
   se toca y se abre el visor a pantalla completa. */
.dkarta-resume .resume-items .item .item-foto {
    /* HAY QUE REACTIVAR EL CLIC A MANO. Mas arriba en este archivo hay una
       regla heredada de la plantilla original —`figure, img { pointer-events:
       none }`— para que un clic sobre una foto caiga en la tarjeta que la
       contiene. Sin esto la miniatura no responde, y probarlo con click()
       desde la consola no lo detecta: el JS despachado ignora pointer-events. */
    pointer-events: auto;

    flex-shrink: 0;
    /* 37 y no 44: un 15% menos. Sigue alcanzando para reconocer que es y de
       que color —que es todo lo que se le pide a una lista de repaso— y le
       devuelve altura a la fila, que es lo escaso en el cotizador. */
    width: 37px;
    height: 37px;
    margin: 0 9px 0 0;
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    cursor: zoom-in;
    transition: transform .15s ease;
}
.dkarta-resume .resume-items .item .item-foto:hover { transform: scale(1.08); }
.dkarta-resume .resume-items .item .item-foto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.dkarta-resume .resume-items .item .item-foto img {
    width: 100%;
    height: 100%;
    /* `cover` y no `contain`: una foto de producto recortada se sigue
       reconociendo, y una con franjas a los lados en 44px no se ve. */
    object-fit: cover;
    display: block;
}

/* Con la miniatura delante, el nombre ocupa lo que queda y no se pega a ella. */
.dkarta-resume .resume-items .item .item-name {
    flex: 1;
    min-width: 0;
}

.dkarta-resume .resume-items .item .item-name {
    font: 300 16px / 105% Barlow;
    letter-spacing: -1px;
    color: #fff;

    text-transform: capitalize;
}

.dkarta-resume .resume-items .item .quantity {
    display: flex;
    justify-content: center;
    align-items: start;
    margin-right: -15px;
    margin-left: 10px;
    align-self: start;
    min-width: 55px;
}

.dkarta-resume .resume-items .item .quantity .add {}

.dkarta-resume .resume-items .item .quantity .add>svg {}

.dkarta-resume .resume-items .item .quantity .q {
    min-width: 25px;
    min-height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 100px;
    color: #000;
    font: 700 15px/100% Barlow;
}

.dkarta-resume .resume-items .item .quantity .remove {}

.dkarta-resume .resume-items .item .quantity .remove>svg {}

.dkarta-resume .resume-items .item .quantity .remove,
.dkarta-resume .resume-items .item .quantity .add {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 6px;
    cursor: pointer;
}

.dkarta-resume .resume-items .item .quantity .remove:hover,
.dkarta-resume .resume-items .item .quantity .add:hover {
    transform: scale(1.5);
}

.dkarta-resume .resume-items .item .quantity .remove>svg,
.dkarta-resume .resume-items .item .quantity .add>svg {
    fill: #16ed36;
    width: 18px;
    height: 11px;
}

.dkarta-resume .resume-items .item .price {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.dkarta-resume .resume-items .item .price>hr {
    padding: 0;
    margin: 0;
    border: none;
    border-top: 1px dotted #fff9;
    width: 100%;
    margin-right: 14px;
}

.dkarta-resume .resume-items .item .price>span {
    color: #fff;
    font: 600 15px Barlow;
}

.dkarta-resume .resume-total {
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.dkarta-resume .resume-total .title {
    font: 24px Barlow;
}

.dkarta-resume .resume-total .total-dkarta {
    font: 700 26px Barlow;
}



.dkarta-resume .resume-actions {
    display: flex;
    margin-top: 12px;
    gap: 14px;
}

.dkarta-resume .resume-actions .volver,
.dkarta-resume .resume-actions .pedir {
    width: 50%;
    text-align: center;
    padding: 11px;
    border-radius: 6px;
    font: 700 17px Barlow;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

.dkarta-resume .resume-actions .volver:hover,
.dkarta-resume .resume-actions .pedir:hover {
    background-color: #fff;
}


.dkarta-resume .resume-actions .volver {
    background-color: #2AABF4;
}

/* Deshabilitado por defecto. Se habilita con .datos-completos en
   .dkarta-resume, que pone actualizarEstadoPedir() cuando hay nombre Y
   WhatsApp validos. Antes dependia de "#resume-name-user:valid +
   .resume-actions", que se rompia en silencio con solo mover un campo. */
.dkarta-resume .resume-actions .pedir {
    background-color: #0ab724;
    opacity: 0.2;

    pointer-events: none;
}

.dkarta-resume.datos-completos .resume-actions .pedir {
    opacity: 1;
    pointer-events: all;
}

.dkarta-resume .resume-actions .volver:hover {
    color: #2AABF4;
}

.dkarta-resume .resume-actions .pedir:hover {
    color: #0ab724;
}

#dkarta-ui {
    position: fixed;
    z-index: 30;
}

#dkarta-ui>input:checked {}

#dkarta-ui+.lightbox-resume {
    position: fixed;
    overflow-y: auto;
    left: 0;
    z-index: 105;
    background-color: rgba(0, 0, 0, 0.9);
    top: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: start;

    transition: all .2s;
}

#dkarta-ui.dk-show {}

#dkarta-ui.dk-show .dkarta-float-resume {}

#dkarta-ui.dk-show+.lightbox-resume {
    opacity: 1;
    visibility: visible;
}

#dkarta-ui.dk-show+.lightbox-resume>* {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

#dkarta-ui.dk-hide {}

#dkarta-ui.dk-hide .dkarta-float-resume {}

#dkarta-ui.dk-hide+.lightbox-resume {
    opacity: 0;
    visibility: hidden;
}

.dkarta-notify-list {
    position: fixed;
    width: 0px;
    height: 100vh;
    padding-left: 20px;
    padding-top: 20px;
    left: 0;
    top: 0;
    gap: 10px;
    display: flex;
    flex-direction: column;
    z-index: 100;
    pointer-events: none;
}

.dkarta-notify-list .dkarta-notify {}


.qr-mockup {
    margin-top: 2em;
    display: flex;
    justify-content: center;
}

.qr-mockup .qr-mockup-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.qr-mockup figure {
    margin: 0;
    padding: 0;
}

.qr-mockup figure>* {
    width: 394px;
    max-width: 100%;
    height: auto;
}

/* El marco del celular es un SVG con fill="black" quemado en el HTML. Sobre el
   fondo oscuro del tema de contraste desaparecía, así que se repinta por CSS.
   En tema claro se deja el negro original, que ahí sí contrasta. */
.qr-mockup figure svg path {
    fill: #fff;
}
[data-tema="claro"] .qr-mockup figure svg path {
    fill: #000;
}

.qr-mockup .mockup-content {
    width: 345px;
    height: 748px;
    position: absolute;
    top: 22px;
    left: 25px;
    /* Con variables propias delante: el movil del QR no tenia control en el
       editor y su degradado solo se podia ver, no elegir. Sin elegir nada cae
       en --dk-panel-*, que es exactamente lo que pintaba antes. */
    background: linear-gradient(180deg, var(--dk-comparte-grad-1, var(--dk-panel-1)) 0%, var(--dk-comparte-grad-2, var(--dk-panel-2)) 100%);
    padding: 20px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.qr-mockup .mockup-content .mockup-icon {}

.qr-mockup .mockup-content .mockup-icon>* {
    width: 90px;
    height: auto;
    margin-bottom: 1.5em;
}

.qr-mockup .mockup-content .mockup-text {
    font: 600 1.4em / 105% Barlow;
    color: var(--dk-auto-panel, #fff);
    text-align: center;
    margin: 0 40px;
    margin-bottom: 35px;
}

.qr-mockup .mockup-content .mockup-qr {
    position: relative;
    width: 250px;
    height: 250px;
    padding: 3px;
    border-radius: 10px;
    background-color: #fff;
}

.qr-mockup .mockup-content .mockup-qr>img {
    width: 100%;
    height: auto;
}

.qr-mockup .mockup-content .mockup-social {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 30px;
}

.qr-mockup .mockup-content .mockup-social li {
    list-style: none;
}

.qr-mockup .mockup-content .mockup-social li a {
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 5px;
}

.qr-mockup .mockup-content .mockup-social li a>* {
    width: 20px;
}






.dkarta-nav {
    width: 100%;
    overflow-x: auto;
    position: fixed;
    top: 0;
    padding: 15px 40px 12px 25px;
    z-index: 100;
    box-sizing: border-box;
    max-width: 1300px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

/* width */
.dkarta-nav::-webkit-scrollbar {
    height: 5px;
}

/* Track */
.dkarta-nav::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 5%);
}

/* Handle: gris neutro, mismo criterio que el resto de barras del dkard. */
.dkarta-nav::-webkit-scrollbar-thumb {
    background: var(--dk-menu-acento-elegido, rgb(255 255 255 / 0.35));
}
.dkarta-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / 0.5);
}
[data-tema="claro"] .dkarta-nav::-webkit-scrollbar-thumb {
    background: var(--dk-menu-acento-elegido, rgb(0 0 0 / 0.28));
}
[data-tema="claro"] .dkarta-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 0.4);
}

.dkarta-nav .dkarta-nav-wrapper {
    position: relative;
    display: flex;
    width: max-content;
    min-width: 100%;
    justify-content: center;
}

.dkarta-nav .dkarta-nav-wrapper ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.dkarta-nav .dkarta-nav-wrapper ul li {}

.dkarta-nav .dkarta-nav-wrapper ul li a {
    display: flex;
    padding: 8px 18px;
    background-color: var(--dk-menu-fondo);
    text-decoration: none;
    /* Con control propio: era un blanco quemado y el editor no tenia donde
       tocarlo. Sin elegir nada, sigue siendo el blanco de siempre. */
    color: var(--dk-menu-texto, #fff);
    font: 600 0.9em/100% Barlow;
    cursor: pointer;
    /* Del color del propio botón, no un marrón fijo: era el de Veka, y en
       cualquier otra paleta el borde se veía de otro color que el relleno. */
    border: solid 2px var(--dk-menu-fondo);
    border-radius: 60px;
    /* El botón es del mismo color que el encabezado sobre el que flota; sin
       algo que lo despegue se confunde con el fondo, sobre todo cuando pasa
       por encima de una foto clara. Sombra corta y de poco radio: marca el
       borde sin verse como un bloque levantado. */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    transition: all 0.2s ease-in;
}
.dkarta-nav .dkarta-nav-wrapper ul li.icon-nav{}
.dkarta-nav .dkarta-nav-wrapper ul li.icon-nav a{
    padding: 5px 5px;
}
.dkarta-nav .dkarta-nav-wrapper ul li.icon-nav a svg{
    width: 20px;
}
.dkarta-nav .dkarta-nav-wrapper ul li.icon-nav a svg *{
    fill: white;
}

.dkarta-nav .dkarta-nav-wrapper ul li a:hover {
    background-color: var(--dk-menu-texto, #fff);
    color: var(--dk-menu-fondo);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}
.dkarta-nav .dkarta-nav-wrapper ul li.icon-nav a:hover svg *{fill:var(--dk-menu-fondo)}

.dkarta-nav .dkarta-nav-wrapper ul li a:visited {
    opacity: 0.5;
}



.contenedor-mano {
    position: fixed;
    width: 95px;
    height: 50px;
    top: 6px;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1999;
    /* Píldora blanca: el color de marca lo pone la mano, no el fondo. */
    background-color: #fff;
    border-radius: 140px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    z-index: 1036;
    animation: deslizarIzquierda 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    pointer-events: none;
}

/* Trazos y relleno de la mano con el degradado de la marca. Se pinta desde acá
   y no en los 9 atributos inline del SVG, para tener un solo punto de cambio;
   los valores que traía el lottie (gris 51 y un degradado morado) son de otra
   paleta. */
.mano-swipe [stroke] {
    stroke: url(#dk-mano-degradado);
}

.mano-swipe [fill^="url("] {
    fill: url(#dk-mano-degradado);
}

.mano-swipe {
    position: absolute;
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
}

@keyframes deslizarIzquierda {
    0% {
        transform: translateX(80px);
        /* Empieza un poco a la derecha */
        opacity: 0;
        /* Aparece gradualmente */
    }

    20% {
        opacity: 1;
        /* Ya es visible */
    }

    80% {
        transform: translateX(-100px);
        /* Termina a la izquierda */
        opacity: 1;
    }

    100% {
        transform: translateX(-100px);
        opacity: 0;
        /* Se desvanece al final */
    }
}






.contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
}

.map {
    margin-top: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.map iframe {
    display: block;
    width: 100%;
    height: 350px;
    max-width: 100%;
}

.contact-info .contact-item {
    position: relative;
    display: flex;
    /* El fondo de CADA cajita de dato, elegible desde Colores. Vacio = blanco,
       como siempre. */
    background-color: var(--dk-contacto-fondo, #ffffff);
    color: #000000;
    padding: 0.8em;
    border-radius: 10px;
    gap: 20px;
}

.contact-info .contact-item>a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.contact-info .contact-item .icon {
    display: flex;
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    /* Con control propio. Colgaba de --dk-boton, que la seccion remapeaba al
       mismo control del titulo: elegir el color del titulo movia tambien los
       iconos, y no habia forma de separarlos. */
    background-color: var(--dk-contacto-icono, var(--dk-boton));
    border-radius: 8px;
    justify-content: center;
    align-items: center;
}

.contact-info .contact-item .icon svg {
    width: 30px;
    height: 30px;
    fill: #000000;
}

.contact-info .contact-item .icon svg>path {
    fill: #fff;
}

.contact-info .contact-item .item-text {}

.contact-info .contact-item .item-text b {
    display: block;
    font: 600 1em/100% Blinker;
    margin-bottom: 5px;
}

.contact-info .contact-item .item-text p {
    margin: 0;
    font: 400 1.2em/100% Barlow;
}


.map {
    margin-top: 3em;
}

.map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 10px;
}







.dkarta-ui-options {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 8;
}

.dkarta-ui-options .options-list {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
    align-items: center;
}

.dkarta-ui-options .options-list .option-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.dkarta-ui-options .options-list .option-item:nth-child(n+2) {
    position: relative;
}

.dkarta-ui-options .options-list .option-item:nth-child(n+2)>a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}

.dkarta-ui-options .options-list .option-item .icon {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dkarta-ui-options .options-list .option-item .icon>* {
    width: 55%;
}

.dkarta-ui-options .options-list .option-item.nav-btn {
    background-color: #5ABA47;
    pointer-events: all;
}

.dkarta-ui-options .options-list .option-item.nav-btn .icon {}

.dkarta-ui-options .options-list .option-item.wa-btn {
    background-color: #14cf59;
    transition-property: opacity, transform;
}

.dkarta-ui-options .options-list .option-item.wa-btn .icon {}

.dkarta-ui-options .options-list .option-item.wa-btn:hover {
    transform: scale(0.9);
    background-color: #fff;
}

.dkarta-ui-options .options-list .option-item.wa-btn:hover .icon {
    transform: scale(1.1);
    filter: invert(74%) sepia(21%) saturate(4629%) hue-rotate(87deg) brightness(91%) contrast(87%);
}

.dkarta-ui-options .options-list .option-item.map-btn {
    width: 42px;
    height: 42px;
    transition-property: opacity, transform;
}

.dkarta-ui-options .options-list .option-item.map-btn:hover {
    background-color: #e8a27a;
    transform: scale(1.1);
    filter: invert(100%);
}

.dkarta-ui-options .options-list .option-item.map-btn .icon {}

.dkarta-ui-options .options-list .option-item.call-btn {
    width: 45px;
    height: 45px;
    transition-property: opacity, transform;
}

.dkarta-ui-options .options-list .option-item.call-btn:hover {
    background-color: #47ba7d;
    transform: scale(1.1);
    filter: invert(100%);
}

.dkarta-ui-options .options-list .option-item.call-btn .icon {}






#dkarta-guide-close {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    display: none;
}

#dkarta-guide-close:checked {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 105;
}

#dkarta-guide-close:checked~.dkarta-guide-msg {
    opacity: 1;
    visibility: visible;
}

#dkarta-guide-close:checked~.dkarta-guide-msg .guide-block {
    opacity: 1;
    transform: scale(1);
}


.dkarta-guide-msg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    pointer-events: none;
    padding: 2em;
    box-sizing: border-box;

    opacity: 0;
    transition: opacity 0.2s;
}

.dkarta-guide-msg .dkarta-guide-wrapper {}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block {
    width: 100%;
    max-width: 480px;
    border-radius: 20px;
    padding: 50px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000 url(dkarta-gradient-bg.webp);
    background-size: 105% 105%;
    transition: 0.4s;
    transform: scale(0.8);
    opacity: 0;
}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-icon {}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-icon>* {
    width: 105px;
    margin-top: -20px;
}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-text {
    font: 1.8em / 100% Barlow;
    text-align: center;
    color: #fff;
    margin-top: 1.2em;
    margin-bottom: 1.3em;
}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-thanks {
    font: 1em Barlow;
    letter-spacing: 10px;
    color: #fff;
}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer svg {}

.dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer span {
    display: block;
    margin-top: 14px;
    text-transform: uppercase;
    font: 13px Barlow;
    color: rgb(255 255 255);
}







/* Desaparecer el botón al hacer clic */
.toggle-checkbox:checked ~ .btn-mostrar-todo {
display: none !important;
}

/* Estilos del botón con reordenamiento visual */
.btn-mostrar-todo {
order: 99;
grid-column: 1 / -1;
justify-self: center;
display: block;
width: max-content;
margin: 20px 0;
padding: 9px 24px;
/* DEL COLOR DEL DKARD, no de un amarillo quemado. El respaldo era #ffed00
   —el amarillo de la plantilla de la que salio esto— asi que en un dkard que
   nunca toco este control el boton salia de un color que no era de nadie. Se
   vio en la pagina de un cliente real. */
background-color: var(--dk-catalogo-mostrar, var(--dk-boton));
border: 2px solid var(--dk-catalogo-mostrar, var(--dk-boton));
font-family: 'Barlow';
font-weight: 700;
cursor: pointer;
text-align: center;
border-radius: 40px;
transition: background-color 0.3s ease, color 0.3s ease;
/* Y la tinta, del FONDO de la pagina: es el par que usa el resto de los
   botones llenos (ver .logos-mas). Asi el texto es claro sobre un dkard
   oscuro y oscuro sobre uno claro, sin que nadie tenga que elegirlo. Con el
   negro fijo, un dkard de marca oscura se quedaba con el boton ilegible. */
color: var(--dk-catalogo-mostrar-texto, var(--dk-fondo));
text-transform: uppercase;
}

/* Al pasar el mouse el fondo se vacía y el texto toma el color del botón:
   siempre tan visible como el borde que queda. El blanco fijo que había aquí
   desaparecía sobre fondos claros — botón hueco, sin texto. */
.btn-mostrar-todo:hover {
background-color: transparent;
color: var(--dk-catalogo-mostrar, var(--dk-boton));
}

/* Mostrar/ocultar productos por categoría: cada grupo trae su propio
   checkbox + label "Mostrar todo", y el despliegue sigue siendo CSS puro
   (sin JS en el clic). Lo que ANTES estaba quemado en el selector
   (`nth-of-type(n+5)`, y cada negocio que quería otro número tenía que
   pisar la regla con CSS propio de más especificidad) ahora lo decide el
   negocio desde el admin: main.js marca con .product-card--extra las
   tarjetas que pasan del límite configurado. El CSS ya no sabe de números. */
.toggle-checkbox {
    display: none !important;
}
.product-grid .product-card--extra {
    display: none !important;
}
.toggle-checkbox:checked ~ .product-card--extra {
    display: flex !important;
}












/* Mobile first - Para dispositivos móviles muy pequeños */


/* Mobile first - Para dispositivos móviles pequeños */


/* Para tablets y dispositivos móviles grandes */


/* Para laptops y tablets grandes */


/* Para escritorios y pantallas grandes */

/* ===========================================================================
   Mensaje destacado (.hero-highlight)
   ---------------------------------------------------------------------------
   Vivía en un <style> dentro de index.html con el degradado de Veka quemado
   (#1F1209 -> #966F46). Resultó ser exactamente contraste -> boton de su
   paleta, así que acá queda en variables y cada negocio lo pinta con la suya.
   =========================================================================== */
.hero-highlight {
    width: 86%;
    max-width: 1300px;
    margin: 30px auto -10px;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(135deg, var(--dk-mensaje-1, var(--dk-contraste)) 0%, var(--dk-mensaje-2, var(--dk-boton)) 100%);
    color: var(--dk-mensaje-texto, var(--dk-auto-mensaje, #fff));
    font-family: 'Barlow';

    /* Entra con una animación de rebote 1.5s después de cargar; sin esto
       queda invisible, así que el estado inicial y el forwards importan. */
    opacity: 0;
    transform: scale(0.5);
    animation: aparecerLlamativo 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

.highlight-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.highlight-content .h-icon svg {
    /* Los íconos de la librería son de TRAZO (fill="none" +
       stroke="currentColor"). Forzar fill los rellenaba por completo y se
       veían como una mancha sólida. */
    fill: none;
    stroke: var(--dk-mensaje-icono, #fff);
    width: 60px;
    margin-bottom: 1em;
}

.highlight-content .h-title {
    font-size: 1.8em;
    /* El tono claro de la paleta: antes era "antiquewhite" fijo, que solo
       combinaba con los marrones de Veka. */
    /* El acento del negocio manda, pero solo si se lee: en echo daba 1,03:1
       sobre su propio panel, es decir, invisible. */
    color: var(--dk-mensaje-titulo, var(--dk-auto-mensaje, var(--dk-featured-acento)));
    font-weight: 700;
    line-height: 110%;
    margin-bottom: 1rem;
}

.highlight-content .h-txt {
    font-size: 1.2em;
    line-height: 110%;
}

@keyframes aparecerLlamativo {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    60% {
        opacity: 1;
        transform: scale(1.1) translateY(-10px);
        filter: drop-shadow(0 0 20px rgb(from var(--dk-degradado) r g b / 0.8));
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 10px rgb(from var(--dk-contraste) r g b / 0.4));
    }
}

/* LA SOMBRA DEL MENSAJE ES EL FINAL DE SU ANIMACION: el drop-shadow del 100%
   se queda pegado por el `forwards`. Quitarla no es un box-shadow:none — es
   darle a la seccion la MISMA entrada con el brillo a cero, para que apagar
   la sombra no se lleve tambien el rebote. La elige el dueno por bloque
   (contenido.sombra = 'no'); sin elegir, todo sigue como siempre. */
@keyframes aparecerSinBrillo {
    0% { opacity: 0; transform: scale(0.5) translateY(30px); }
    60% { opacity: 1; transform: scale(1.1) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
[data-cms-section="mensaje_destacado"].dk-sin-sombra .hero-highlight,
.dk-sin-sombra.hero-highlight {
    animation-name: aparecerSinBrillo;
}

/* SIN FONDO: el aviso deja de ser un recuadro. Se retira el degradado y todo
   lo que solo existe para sostenerlo —las esquinas redondeadas y el relleno
   lateral—, y la frase queda apoyada en el fondo de la pagina.

   Va con la entrada sin brillo aunque no se haya apagado la sombra: ese
   drop-shadow es del RECUADRO, y sin recuadro se pega al texto y al icono
   como un halo. Los dos colores del degradado se quedan guardados: volver a
   encender el fondo los devuelve tal como estaban. */
[data-cms-section="mensaje_destacado"].dk-sin-fondo .hero-highlight,
.dk-sin-fondo.hero-highlight {
    background: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    animation-name: aparecerSinBrillo;
}



/* Dkard sin ningún precio: el total no aporta nada (siempre sería 0), así que
   se oculta y el panel queda enfocado en pedir la cotización. */
body.dk-sin-precios .resume-total,
body.dk-sin-precios .f-resume-price-total {
    display: none;
}

/* Íconos de "Comparte este perfil".
   Los SVG vienen sin atributo fill, así que el navegador los pintaba negros
   sobre un botón del color de marca y quedaban casi invisibles. Van blancos
   en los dos temas, porque el botón siempre tiene fondo oscuro/saturado. */
.dkrd-share .share-icon-btn svg,
.dkrd-share .share-icon-btn svg path {
    fill: #fff;
}

/* ===========================================================================
   Productos destacados
   ---------------------------------------------------------------------------
   Reusan .product-card del catálogo (misma tarjeta, mismo botón de agregar):
   acá solo cambia la grilla, que va a dos columnas, y el encabezado, que sigue
   el tratamiento de etiqueta + título del bloque de promoción.
   =========================================================================== */
.dkrd-main .dkrd-destacados { width: 100%; margin: 3rem 0; }
.dkrd-main .dkrd-destacados .destacados-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Centrado como el resto de los encabezados de sección. */
.dkrd-main .dkrd-destacados .destacados-header {
    margin-bottom: 1.5rem;
    text-align: center;
}
.dkrd-main .dkrd-destacados .destacados-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-boton);
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}
.dkrd-main .dkrd-destacados .destacados-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    color: var(--dk-destacados-titulo, #ffffff);
    margin: 0;
    line-height: 90%;
}
.dkrd-main .dkrd-destacados .destacados-title strong,
.dkrd-main .dkrd-destacados .destacados-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-destacados .destacados-title { color: var(--dk-destacados-titulo, var(--dk-contraste)); }

/* --------------------------------------------- la herencia se corta aqui -

   `--dk-columnas` se escribe sobre el NODO de la seccion, y las variables CSS
   se heredan: destacados vive DENTRO del catalogo, asi que poner el catalogo
   en cuatro columnas se llevaba los destacados a cuatro tambien. Son dos
   decisiones distintas —una fila de tarjetas grandes no se reparte como una
   rejilla de productos— y el cliente no tenia forma de separarlas.

   `initial` en una variable la deja en el valor invalido-garantizado, y
   entonces cada `var(--dk-columnas, N)` usa SU propio N. No apaga la eleccion
   de la seccion: lo que main.js escribe va en el atributo `style`, que pesa
   mas que esta regla.

   Va en todas las secciones que leen la variable y no solo en destacados: hoy
   es el unico bloque anidado, pero el dia que otro lo este el sintoma seria el
   mismo —un ajuste que mueve un bloque que nadie toco— y no hay nada en
   pantalla que lo explique. */
.dkrd-main .dkrd-catalog,
.dkrd-main .dkrd-destacados,
.dkrd-main .dkrd-services,
.dkrd-main .dkrd-promises,
.dkrd-main .dkrd-cuadricula,
.dkrd-main .dkrd-gallery {
    --dk-columnas: initial;
}

.dkrd-main .dkrd-destacados .destacados-grid {
    display: grid;
    /* minmax(0, 1fr) y no 1fr a secas: el `1fr` pelado deja el mínimo de cada
       columna en `auto`, o sea el ancho mínimo del contenido. La tarjeta
       destacada es horizontal y su foto tiene aspect-ratio 3/4 sobre un alto
       mínimo de 420px, así que su min-content ronda los 530px — dos columnas
       de esas no caben en un contenedor de 800px y el bloque se desbordaba
       por la derecha en vez de encogerse. */
    grid-template-columns: repeat(var(--dk-columnas, 2), minmax(0, 1fr));
    gap: 1.2rem;
}

/* --- LOS DESTACADOS, DE LADO -----------------------------------------------
   Una tira que se desliza en horizontal en vez de una rejilla. Con varios
   destacados la rejilla se come media pagina antes de que nadie llegue al
   catalogo; de lado ocupa una tarjeta de alto y se recorre con el dedo.

   1,3 TARJETAS A LA VISTA, Y EL 0,3 ES EL PUNTO. Una tira que termina justo en
   el borde de la pantalla se lee como que se acabo; el trozo del siguiente
   asomando es lo que dice «hay mas» sin tener que dibujar una flecha ni un
   punto. El numero sale de dividir el ancho util entre 1,3.

   `scroll-snap` para que cada tarjeta quede encuadrada al soltar, y no a
   medio camino. Y `-webkit-overflow-scrolling` para el rebote de iOS. */
.dkrd-main .dkrd-destacados.dk-destacados-lado .destacados-grid {
    display: grid;
    grid-auto-flow: column;
    /* El `gap` entra en la cuenta: sin restarlo, 1,3 tarjetas mas su hueco se
       pasan del ancho y el trozo que asoma queda mas fino de lo pensado. */
    grid-auto-columns: calc((100% - 1.2rem) / 1.3);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* La barra se esconde: la tira ya dice que se desliza con el trozo que
       asoma, y una barra debajo de tarjetas grandes solo ensucia. */
    scrollbar-width: none;
    /* Aire para que la sombra de la primera y la ultima no queden cortadas. */
    padding-bottom: 4px;
}
.dkrd-main .dkrd-destacados.dk-destacados-lado .destacados-grid::-webkit-scrollbar {
    display: none;
}
.dkrd-main .dkrd-destacados.dk-destacados-lado .destacados-grid > .product-card {
    scroll-snap-align: start;
}


/* De dos columnas a una antes de que las tarjetas queden estrechas: a 900px de
   pantalla cada tarjeta tendría ~390px para repartir entre foto y texto, y las
   dos mitades quedan ilegibles. A una columna la tarjeta sigue siendo
   horizontal y cómoda hasta los 700px, donde ya se apila. */




/* ===========================================================================
   Contenido destacado
   ---------------------------------------------------------------------------
   Carrusel a la izquierda, texto a la derecha. Todos los colores salen de la
   paleta del negocio, así que el bloque se adapta solo a cada dkard.
   =========================================================================== */
.dkrd-main .dkrd-featured { width: 100%; margin: 4rem 0; }
.dkrd-main .dkrd-featured .featured-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    /* Arriba y no centrado: con el carrusel y el texto de altos distintos, el
       centrado dejaba el título flotando a media altura de la imagen. */
    align-items: start;
}

/* --- Carrusel --- */
.dkrd-main .dkrd-featured .featured-media { position: relative; }
.dkrd-main .dkrd-featured .featured-carousel {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    /* Marco degradado. Con border-radius, `border-image` no respeta las
       esquinas; el truco de los dos fondos si: padding-box pinta el relleno
       y border-box el degradado del marco.

       Los dos extremos caen por defecto en el mismo --dk-featured-borde de
       siempre, asi que mientras nadie elija colores se ve identico al marco
       solido anterior. Estrenar esto no le cambio la pagina a nadie. */
    border: 6px solid transparent;
    background:
        linear-gradient(var(--dk-featured-fondo), var(--dk-featured-fondo)) padding-box,
        linear-gradient(135deg,
            var(--dk-featured-borde-1, var(--dk-featured-borde)) 0%,
            var(--dk-featured-borde-2, var(--dk-featured-borde)) 100%) border-box;
}

/* Sin marco: la imagen suelta, sin cuadro de color ni borde.
   Para un PNG recortado —un producto sin fondo, un logo—, el relleno le
   devolvia justo el fondo que se le acababa de quitar. Se elige desde
   "Contenido destacado" en el editor; el `overflow: hidden` se queda para
   que el redondeo siga recortando la foto. */
.dkrd-main .dkrd-featured .featured-carousel.sin-marco {
    background: none;
    border-color: transparent;
}

/* El texto, centrado contra la imagen.
   El contenedor alinea arriba a proposito —el titulo no debe flotar a media
   altura cuando el texto es largo—, pero cuando es corto quedaba pegado al
   borde superior de una foto cuadrada. Centrar SOLO esta columna resuelve el
   caso corto sin desarmar el largo. */
.dkrd-main .dkrd-featured .featured-content {
    align-self: center;
}
.dkrd-main .dkrd-featured .featured-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
}
.dkrd-main .dkrd-featured .featured-slide.activa { opacity: 1; }
.dkrd-main .dkrd-featured .featured-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Burbuja "WOW": sube y gira mientras sube --- */
.dkrd-main .dkrd-featured .featured-wow {
    position: absolute;
    top: 8%;
    right: -4%;
    z-index: 2;
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    background: var(--dk-featured-wow, var(--dk-featured-acento));
    /* Blanco fijo y no --dk-contraste: ese color es el punto oscuro de la
       paleta, pero varios negocios lo tienen configurado claro y la palabra
       desaparecía contra su propia píldora. */
    color: #fff;
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    animation: dk-wow-flotar 3.2s ease-in-out infinite;
}
.dkrd-main .dkrd-featured .featured-wow:empty { display: none; }

@keyframes dk-wow-flotar {
    0%   { transform: translateY(0)     rotate(-8deg); }
    50%  { transform: translateY(-18px) rotate(8deg); }
    100% { transform: translateY(0)     rotate(-8deg); }
}

/* --- Texto --- */
.dkrd-main .dkrd-featured .featured-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-featured-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}
.dkrd-main .dkrd-featured .featured-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    color: var(--dk-featured-texto, #ffffff);
    margin: 0 0 1.2rem;
    line-height: 90%;
}
.dkrd-main .dkrd-featured .featured-title strong,
.dkrd-main .dkrd-featured .featured-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-featured .featured-title { color: var(--dk-featured-texto, var(--dk-contraste)); }

.dkrd-main .dkrd-featured .featured-text {
    /* Pedido explícito del cliente: un poco más grande y con más aire entre
       líneas, para que se lea mejor junto al carrusel. */
    font-size: 1.05rem;
    line-height: 130%;
    color: var(--dk-featured-texto, #fff);
    white-space: pre-line;
}
[data-tema="claro"] .dkrd-main .dkrd-featured .featured-text { color: var(--dk-featured-texto, var(--dk-contraste)); }

.dkrd-main .dkrd-featured .featured-highlight {
    /* Pedido explícito: más separación del texto de arriba y un punto más
       grande, para que la frase destacada pese más que el párrafo normal. */
    margin-top: 1.5rem;
    font-style: italic;
    font-weight: 600;
    line-height: 120%;
    font-size: 1.2em;
    color: var(--dk-featured-destacado, var(--dk-degradado));
    white-space: pre-line;
}
.dkrd-main .dkrd-featured .featured-highlight:empty { display: none; }

.dkrd-main .dkrd-featured .featured-btn {
    display: inline-block;
    margin-top: 1.8rem;
    /* Menos alto que antes (1rem → 0.7rem): con el texto e imagen ya más
       grandes, el botón quedaba pesado. */
    padding: 0.7rem 2.2rem;
    border-radius: 999px;
    background: var(--dk-featured-boton, var(--dk-featured-borde));
    color: #fff;
    font-family: 'Blinker', sans-serif;
    /* 600 en vez de 700: en mayúsculas, el peso completo se veía demasiado
       macizo al lado del resto de la tipografía. */
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* El hover era solo brightness(1.1), y sobre un color ya vivo —el naranja de
   la plantilla llega a 242 de rojo— eso choca contra el techo de 255 y no se
   ve nada. El halo sí se ve con cualquier color, porque se calcula DEL color
   del negocio en vez de estar quemado, igual que el resto de la paleta. */
.dkrd-main .dkrd-featured .featured-btn:hover,
.dkrd-main .dkrd-featured .featured-btn:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px color-mix(
        in srgb,
        var(--dk-featured-boton, var(--dk-featured-borde)) 60%,
        transparent
    );
}



/* Marcador para el producto sin foto. Con el degradado del negocio y la
   inicial, en vez del recuadro de error que dejaba una figura vacía. */
/* Figuras de contenido (Nosotros, Promoción) sin foto cargada: en vez de
   quedar en blanco —o de traer la foto de otro cliente como valor por
   defecto— se pintan con el degradado de la marca. */
.dkrd-about .about-main-image:not([data-byone]),
.dkrd-discount .discount-img:not([data-byone]) {
    background: linear-gradient(135deg, var(--dk-contraste) 0%, var(--dk-boton) 100%);
    /* `auto` y no 320px (2026-08-24): el minimo fijo le imponia alto a la
       figura aunque su contenedor ya lo definiera, y en pantallas chicas la
       estiraba de mas. Sin minimo, el degradado llena lo que el contenedor
       diga —que es lo que se queria: rellenar un hueco, no dictar su tamaño—. */
    min-height: auto;
}

.card-image-vacia {
    width: 100%;
    height: 100%;
    min-height: 180px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dk-contraste) 0%, var(--dk-boton) 100%);
}
.card-image-vacia span {
    font-family: 'Blinker', sans-serif;
    font-weight: 800;
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(255, 255, 255, .35);
    /* Decorativo: no debe leerse como contenido. */
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Productos destacados: tarjeta horizontal
   ---------------------------------------------------------------------------
   La sección lleva también la clase .dkrd-catalog, así que hereda TODA la
   estética de las tarjetas del catálogo (fondo, borde, tipografías, botón
   Añadir) sin duplicar una sola regla. Acá solo se cambia la disposición:
   imagen a la izquierda, contenido a la derecha.
   --------------------------------------------------------------------------- */
.dkrd-main .dkrd-destacados .product-grid .product-card {
    /* Fondo PROPIO, con el del catalogo de respaldo.
       Este bloque vive dentro de .dkrd-catalog en el HTML, asi que la tarjeta
       destacada venia tomando el fondo de las del catalogo y no habia forma de
       separarla. Sin elegir nada se ve exactamente igual que hasta hoy. */
    background-color: var(--dk-producto-dest-fondo, var(--dk-producto-fondo, #0000005e));
    flex-direction: row;
    align-items: stretch;
    /* Piso para cuando las dos descripciones son cortas: sin esto la fila
       entera se aplasta y la imagen queda como una franja. */
    min-height: 420px;

    /* LA TARJETA SE MIDE A SI MISMA. El bloque se puede poner de 1 a 4 por
       fila, y la mitad de esos numeros rompian el reparto mitad-y-mitad: a 4
       columnas al texto le quedaban 75px de ancho y el titulo se salia; a 1
       columna la tarjeta ocupaba 1174px de ancho y la foto —que es la mitad de
       eso, y vertical— empujaba el alto a 783px, una sola tarjeta mas alta que
       la pantalla. Y no se puede resolver con @media: el ancho que importa no
       es el de la ventana sino el de la celda, que depende de cuantas eligio
       el negocio. Declarandose contenedor, la tarjeta consulta SU ancho y las
       dos reglas de abajo se acomodan solas a cualquier combinacion. */
    container-type: inline-size;
    /* Solo actua cuando la consulta de abajo pone los dos hijos al 100%: es lo
       que los apila sin tener que tocar la direccion del flex, que la tarjeta
       no puede cambiarse a si misma desde su propia consulta de contenedor.
       A dos columnas los hijos suman 50%+50% sin margenes ni gap, asi que
       nunca envuelve por accidente. */
    flex-wrap: wrap;
}

.dkrd-main .dkrd-destacados .product-grid .product-card .card-image {
    width: 50%;
    flex-shrink: 0;
    /* Vertical 3:4 — la tarjeta destacada es grande y a dos columnas, así que
       aguanta una foto más alta que ancha, que es como mejor se ve un producto.
       Antes seguía el alto del texto (aspect-ratio: auto) y quedaba distinta en
       cada tarjeta. */
    aspect-ratio: 3 / 4;
    /* El techo del 3:4. La proporcion crece con el ancho y no para nunca: a
       una sola columna daba 781px de foto. Con el tope, la proporcion manda
       mientras la tarjeta sea de un tamaño razonable y deja de mandar cuando
       la tarjeta se vuelve un panel. */
    max-height: 460px;
    border-radius: 23px 0 0 23px;
}

/* TARJETA ANGOSTA (3 y 4 por fila, o 2 en tablet): la foto arriba y el texto
   debajo, igual que en el catalogo. Repartir mitad y mitad a este ancho deja
   una columna de texto donde no cabe ni el titulo. */
@container (max-width: 440px) {
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-image {
        width: 100%;
        /* Apaisada al apilarse: vertical se comeria la tarjeta entera. */
        aspect-ratio: 16 / 10;
        border-radius: 23px 23px 0 0;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content {
        width: 100%;
        padding: 1.2rem;
    }
}
.dkrd-main .dkrd-destacados .product-grid .product-card .card-image img,
.dkrd-main .dkrd-destacados .product-grid .product-card .card-image figure {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dkrd-main .dkrd-destacados .product-grid .product-card .card-content {
    width: 50%;
    /* Sin min-width: 0 el contenido (título, precio, botón) impone su ancho
       mínimo y empuja la tarjeta más allá de su celda. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

/* El botón Añadir baja al pie derecho de la tarjeta, como en la referencia. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

/* Etiqueta opcional (ej. "Nuevo") como badge encima del título — la misma
   idea que en el catálogo general, solo que ahí no existía la regla porque
   este bloque tiene su propio selector (.dkrd-destacados, no .dkrd-catalog). */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-etiqueta {
    align-self: flex-start;
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    /* La cadena pasa por la variable del catálogo: quien pinta la etiqueta
       allá y no ha separado la del destacado, ve las dos iguales. */
    color: var(--dk-producto-dest-etiqueta-texto, var(--dk-producto-etiqueta-texto, #fff));
    background: var(--dk-producto-dest-etiqueta, var(--dk-producto-etiqueta, var(--dk-boton)));
    border-radius: 4px;
    padding: 0.15rem 0.55rem;
    margin-bottom: 0.4rem;
}

/* "REF: código" del HTML original de los dkards — acá debajo del título. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-ref {
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    color: var(--dk-producto-dest-ref, var(--dk-producto-ref, var(--dk-boton)));
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

/* Con el doble de ancho disponible, el título y la descripción respiran. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-title {
    color: var(--dk-producto-dest-titulo, #fff);
    font-size: 1.4rem;
    line-height: 110%;
    margin-bottom: .8rem;
}
/* La descripción se queda con TODO el alto que sobre después del título, el
   precio y el botón, en vez de un alto fijo: las tarjetas de una misma fila se
   estiran a la más alta, y antes la más corta quedaba con un hueco muerto
   debajo. Sigue con scroll para que un texto larguísimo no estire la fila. La
   barra fina ya está definida más arriba para .product-description. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-description {
    color: var(--dk-producto-dest-texto, #fff);
    font-size: .95em;
    /* Base 0 y no auto: con base auto el bloque crece con su propio texto y el
       overflow nunca llega a activarse. Con base 0 se queda con el hueco que
       sobra, y min-height le garantiza un piso aunque el hueco sea poco. */
    flex: 1 1 0;
    min-height: 11.5em;
    overflow-y: auto;
    margin-bottom: .8rem;
    padding-right: 6px;
}

/* Grande, pero sin competir con el título: antes en 1.6rem pesaba casi igual. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-price {
    color: var(--dk-producto-dest-precio, var(--dk-producto-precio));
    font-size: 1.3rem;
    /* Lo separa del botón que viene abajo. */
    margin-bottom: 1rem;
    display: block;
}

/* Botón con el degradado de la marca: en una tarjeta de este tamaño el botón
   blanco del catálogo se perdía contra el fondo claro. */
/* Borde degradado en reposo y relleno al pasar el mouse. Se hace con
   background-image doble + border-box/padding-box porque `border` no acepta
   degradados: la primera capa pinta el interior, la segunda el borde. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn {
    /* Sin relleno en reposo: solo el aro degradado sobre la tarjeta.
       El truco de padding-box/border-box no sirve acá — necesita que la capa
       interior sea opaca para tapar el degradado del borde, y con un relleno
       transparente el degradado se ve entero y el botón queda relleno. Se usa
       un ::before enmascarado, que es la forma de tener borde degradado con el
       interior de verdad transparente. */
    position: relative;
    border: none;
    background: transparent;
    color: var(--dk-boton);
    /* Menos alto: con el padding anterior quedaba como un bloque, no como
       un botón. El ancho se mantiene para que siga siendo fácil de tocar. */
    padding: .5rem 1.6rem;
    font-size: 1.05rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
/* El aro. `padding` marca su grosor; la máscara recorta el centro para que
   solo quede el anillo. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    /* EL DEGRADADO SALE DEL COLOR DEL BOTON, no de la paleta general.
       La segunda parada era `--dk-degradado` —el punto claro de la paleta—,
       que no se deriva del boton: quien elegia un color distinto del de su
       paleta veia el boton arrancar en su color y terminar en un gris ajeno.
       Ahora la segunda parada es el mismo color aclarado, asi que el
       degradado acompaña la eleccion en vez de contradecirla.
       El `background` plano de arriba es el respaldo: si el navegador no
       entiende color-mix descarta la linea siguiente y queda el color liso. */
    background: var(--dk-producto-dest-boton, var(--dk-boton));
    background: linear-gradient(135deg, var(--dk-producto-dest-boton, var(--dk-boton)), color-mix(in srgb, var(--dk-producto-dest-boton, var(--dk-boton)) 70%, #fff));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Al pasar el mouse sí se rellena, que es lo que ya estaba y funcionaba. El
   aro sobra ahí: el relleno lo cubre con el mismo degradado. */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn:hover {
    background: var(--dk-producto-dest-boton, var(--dk-boton));
    background: linear-gradient(135deg, var(--dk-producto-dest-boton, var(--dk-boton)), color-mix(in srgb, var(--dk-producto-dest-boton, var(--dk-boton)) 70%, #fff));
    color: #fff;
}
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn:hover::before {
    opacity: 0;
}
/* El ícono acompaña al texto: del color de la marca en reposo, blanco al pasar
   el mouse (cuando el botón ya está relleno). */
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn svg path {
    fill: var(--dk-boton);
    transition: fill .15s;
}
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .card-action .add-btn:hover svg path {
    fill: #fff;
}




/* ===========================================================================
   Cuadrícula de íconos
   ---------------------------------------------------------------------------
   Cuatro columnas de cajas con ícono, título y texto. La caja es un velo
   translúcido —blanco sobre el tema oscuro, negro sobre el claro— en vez de un
   color propio: así se apoya en el fondo que tenga el negocio y no hay que
   elegirle un color a cada paleta.
   =========================================================================== */

.dkrd-main .dkrd-cuadricula {
    padding: 4rem 2rem;
}

.dkrd-main .dkrd-cuadricula .cuadricula-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.dkrd-main .dkrd-cuadricula .cuadricula-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.dkrd-main .dkrd-cuadricula .cuadricula-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    /* Su propia variable. Esta regla salio copiada de la de Preguntas
       frecuentes y se quedo leyendo --dk-preguntas-label: la etiqueta de la
       cuadricula cambiaba de color al tocar la de OTRA seccion, y su propio
       control solo llegaba de refilon, por el respaldo. */
    color: var(--dk-cuadricula-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
}

.dkrd-main .dkrd-cuadricula .cuadricula-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3rem;
    line-height: 1.05;
    color: var(--dk-cuadricula-encabezado, #fff);
    margin: 0;
}
.dkrd-main .dkrd-cuadricula .cuadricula-title strong,
.dkrd-main .dkrd-cuadricula .cuadricula-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-cuadricula .cuadricula-title { color: var(--dk-cuadricula-encabezado, var(--dk-contraste)); }

.dkrd-main .dkrd-cuadricula .cuadricula-grid {
    display: grid;
    /* minmax(0, 1fr): sin el mínimo en 0 una caja con una palabra larga estira
       su columna y descuadra la fila entera. */
    grid-template-columns: repeat(var(--dk-columnas, 4), minmax(0, 1fr));
    gap: 1.2rem;
}

.dkrd-main .dkrd-cuadricula .cuadricula-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    padding: 2rem 1.4rem;
    border-radius: 16px;
    background: var(--dk-cuadricula-caja, rgb(255 255 255 / 0.06));
    border: 1px solid var(--dk-cuadricula-borde, rgb(255 255 255 / 0.10));
}
[data-tema="claro"] .dkrd-main .dkrd-cuadricula .cuadricula-caja {
    background: var(--dk-cuadricula-caja, rgb(0 0 0 / 0.05));
    border-color: var(--dk-cuadricula-borde, rgb(0 0 0 / 0.08));
}

.dkrd-main .dkrd-cuadricula .cuadricula-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dk-cuadricula-icono, var(--dk-boton));
}
.dkrd-main .dkrd-cuadricula .cuadricula-icono svg { width: 34px; height: 34px; }

.dkrd-main .dkrd-cuadricula .cuadricula-caja-titulo {
    font-family: 'Blinker', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    /* UNA sola vez. Habia dos `color` en esta misma regla —la variable arriba
       y un `#fff` cuatro lineas mas abajo— y en CSS gana la ultima: el control
       "Titulo de cada caja" se guardaba bien y no cambiaba nada. */
    color: var(--dk-cuadricula-titulo, #fff);
    margin: 0;
}
[data-tema="claro"] .dkrd-main .dkrd-cuadricula .cuadricula-caja-titulo { color: var(--dk-cuadricula-titulo, var(--dk-contraste)); }

.dkrd-main .dkrd-cuadricula .cuadricula-caja-texto {
    font-family: 'Barlow', sans-serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--dk-cuadricula-texto, rgb(255 255 255 / 0.72));
    margin: 0;
}
[data-tema="claro"] .dkrd-main .dkrd-cuadricula .cuadricula-caja-texto {
    color: var(--dk-cuadricula-texto, rgb(from var(--dk-contraste) r g b / 0.75));
}





/* ===========================================================================
   PREGUNTAS FRECUENTES
   Pares de pregunta y respuesta, plegados. Mismo velo translucido que la
   cuadricula —blanco sobre el tema oscuro, negro sobre el claro— para no
   tener que elegirle un color a cada paleta.
   =========================================================================== */

.dkrd-main .dkrd-preguntas {
    padding: 4rem 2rem;
    /* Sin elegir, transparente: se ve el fondo de la pagina, que es como
       estaba antes de que esta seccion tuviera controles de color. */
    background: var(--dk-preguntas-fondo, transparent);
}

.dkrd-main .dkrd-preguntas .preguntas-wrapper {
    /* Mas angosto que la cuadricula, a proposito: esto es texto para leer, y
       una respuesta de tres lineas a 1300px de ancho obliga a barrer la
       cabeza de lado a lado en cada renglon. */
    max-width: 820px;
    margin: 0 auto;
}

.dkrd-main .dkrd-preguntas .preguntas-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.dkrd-main .dkrd-preguntas .preguntas-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-boton);
    text-transform: uppercase;
    display: block;
}

.dkrd-main .dkrd-preguntas .preguntas-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3rem;
    line-height: 1.05;
    color: var(--dk-preguntas-titulo, #fff);
    margin: 0;
}
.dkrd-main .dkrd-preguntas .preguntas-title strong,
.dkrd-main .dkrd-preguntas .preguntas-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-preguntas .preguntas-title { color: var(--dk-preguntas-titulo, var(--dk-contraste)); }

.dkrd-main .dkrd-preguntas .preguntas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.dkrd-main .dkrd-preguntas .pregunta {
    border-radius: 14px;
    background: var(--dk-pregunta-fondo, rgb(255 255 255 / 0.06));
    border: 1px solid var(--dk-pregunta-borde, rgb(255 255 255 / 0.10));
    overflow: hidden;
}
[data-tema="claro"] .dkrd-main .dkrd-preguntas .pregunta {
    background: var(--dk-pregunta-fondo, rgb(0 0 0 / 0.05));
    border-color: var(--dk-pregunta-borde, rgb(0 0 0 / 0.08));
}

.dkrd-main .dkrd-preguntas .pregunta-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.35;
    color: var(--dk-pregunta-titulo, #fff);
    /* Fuera el triangulito del navegador: la flecha la dibuja el ::after de
       abajo, que si gira al abrir. Hacen falta las dos reglas —una para
       Safari y otra para el resto—. */
    list-style: none;
}
.dkrd-main .dkrd-preguntas .pregunta-titulo::-webkit-details-marker { display: none; }
[data-tema="claro"] .dkrd-main .dkrd-preguntas .pregunta-titulo { color: var(--dk-pregunta-titulo, var(--dk-contraste)); }

/* El foco del teclado tiene que verse: el resumen es el control que abre y
   cierra, y sin esto no hay forma de saber en cual esta parado. */
.dkrd-main .dkrd-preguntas .pregunta-titulo:focus-visible {
    outline: 2px solid var(--dk-pregunta-flecha, var(--dk-boton));
    outline-offset: -2px;
}

.dkrd-main .dkrd-preguntas .pregunta-flecha {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--dk-pregunta-flecha, var(--dk-boton));
    border-bottom: 2px solid var(--dk-pregunta-flecha, var(--dk-boton));
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}
.dkrd-main .dkrd-preguntas .pregunta[open] .pregunta-flecha {
    transform: rotate(-135deg) translate(-2px, -2px);
}
/* ===========================================================================
   Reseñas
   ---------------------------------------------------------------------------
   Dos clases de tarjeta en la misma tira: la escrita (estrellas, texto, nombre)
   y la captura del chat. Comparten `.resena-caja` —fondo, borde y radio— para
   que la tira se lea como una sola cosa y no como dos bloques pegados.

   LA TIPOGRAFIA ES LA DE LA CASA, no una propia: Blinker para la etiqueta, el
   titulo y el nombre; Barlow para el texto. Copiarla de «Cuadricula de iconos»
   —que es el bloque hermano— no es pereza: un bloque nuevo con sus propios
   tamaños se lee como pegado de otra pagina, aunque cada valor por separado
   parezca razonable.

   Y LOS DOS TEMAS. El oscuro es el de fabrica y va en la regla normal; el
   claro se corrige con `[data-tema="claro"]`, que es como lo hacen todos los
   demas bloques. Sin eso, un dkard en tema claro se quedaba con el titulo
   blanco sobre fondo blanco y las tarjetas sin recuadro visible.

   Todos los velos son ALFAS, no colores: blanco translucido sobre el oscuro y
   negro translucido sobre el claro. Asi el recuadro se ve sobre cualquier
   fondo de marca sin que el dueño tenga que elegir un color.

   TODO ESTO VA EN LA ZONA BASE, antes de los @media. Es la regla de la casa y
   hay una prueba que la vigila: un ajuste de telefono escrito aqui arriba
   ganaria por orden de aparicion y no habria forma de verlo.
   =========================================================================== */
.dkrd-main .dkrd-resenas {
    width: 100%;
    padding: 4rem 2rem;
}

.dkrd-main .dkrd-resenas .resenas-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.dkrd-main .dkrd-resenas .resenas-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.dkrd-main .dkrd-resenas .resenas-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-resena-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
}

.dkrd-main .dkrd-resenas .resenas-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3rem;
    line-height: 1.05;
    color: var(--dk-resena-encabezado, #fff);
    margin: 0;
}
.dkrd-main .dkrd-resenas .resenas-title strong,
.dkrd-main .dkrd-resenas .resenas-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-title { color: var(--dk-resena-encabezado, var(--dk-contraste)); }

/* --- El resumen: la nota grande a la izquierda, el reparto a la derecha --- */

.dkrd-main .dkrd-resenas .resenas-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin-bottom: 2.2rem;
}

.dkrd-main .dkrd-resenas .resenas-nota {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dkrd-main .dkrd-resenas .resenas-promedio {
    font-family: 'Blinker', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    /* La nota grande sigue al titulo de la seccion y no lleva control propio:
       es parte del encabezado, y un control mas para el mismo color solo
       serviria para que se pudieran descuadrar entre si. */
    color: var(--dk-resena-encabezado, #fff);
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-promedio { color: var(--dk-resena-encabezado, var(--dk-contraste)); }

.dkrd-main .dkrd-resenas .resenas-cuantas {
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    color: rgb(255 255 255 / 0.72);
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-cuantas { color: rgb(from var(--dk-contraste) r g b / 0.75); }

.dkrd-main .dkrd-resenas .resenas-barras {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Ancho fijo: sin el, las barras se estiran a lo que sobre y con dos
       reseñas ocupan media pagina para decir muy poco. */
    width: min(260px, 100%);
}

.dkrd-main .dkrd-resenas .resenas-barra-fila {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

.dkrd-main .dkrd-resenas .resenas-barra-n,
.dkrd-main .dkrd-resenas .resenas-barra-c {
    /* Ancho fijo y numeros de tabla: sin esto las cinco filas bailan de un
       renglon a otro segun si el numero es 1 o 12. */
    min-width: 1.4em;
    font-family: 'Barlow', sans-serif;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.72);
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-barra-n,
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-barra-c { color: rgb(from var(--dk-contraste) r g b / 0.75); }

.dkrd-main .dkrd-resenas .resenas-barra-c { text-align: right; }

.dkrd-main .dkrd-resenas .resenas-barra {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.14);
    overflow: hidden;
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resenas-barra { background: rgb(from var(--dk-contraste) r g b / 0.12); }

.dkrd-main .dkrd-resenas .resenas-barra > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dk-resena-estrella, #f5a623);
}

/* --- La tira --- */

/* FLEX Y NO REJILLA, por la ULTIMA FILA.
   -------------------------------------------------------------------------
   Con `grid` de tres columnas y cuatro reseñas, la cuarta se queda sola
   pegada a la izquierda con dos huecos a su derecha: las pistas existen
   aunque nadie las ocupe. Se lee como un descuadre, y pasa con cualquier
   numero de columnas en cuanto las reseñas no son un multiplo exacto — o sea,
   casi siempre.

   `flex-wrap` + `justify-content: center` centra lo que sobre de la ultima
   fila y deja las anteriores igual que antes. El ancho de cada tarjeta sale
   de la misma cuenta que hacian las pistas: el todo menos los huecos, entre
   el numero de columnas. */
.dkrd-main .dkrd-resenas .resenas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    /* Arriba, no en el centro: las tarjetas tienen textos de largos muy
       distintos y estirarlas todas al mas alto deja huecos raros dentro. */
    align-items: flex-start;
}

.dkrd-main .dkrd-resenas .resenas-grid > .resena-caja {
    /* `0 1` y no `0 0`: que puedan encoger es lo que evita que una palabra
       larga desborde la fila, que es lo que el `minmax(0, 1fr)` de la rejilla
       hacia por su cuenta. */
    flex: 0 1 calc((100% - (var(--dk-columnas, 3) - 1) * 1.2rem) / var(--dk-columnas, 3));
    /* `min-width: 0` ES LA MITAD DE LA REGLA, no un adorno. Un hijo
       flexible nace con `min-width: auto`, o sea que se niega a encoger
       por debajo de lo que mide su contenido mas apretado: una palabra
       larga, o la fila de cinco estrellas. Con el ancho pedido por debajo
       de eso, la tarjeta se queda grande y la fila se parte — tres
       columnas dan UNA por renglon. Es exactamente lo que el
       `minmax(0, 1fr)` de la rejilla hacia solo, y al pasar a flex hay que
       decirlo a mano. Comprobado midiendo: sin esto, con tres columnas las
       cuatro tarjetas salian una debajo de otra. */
    min-width: 0;
}

/* EL RELLENO VA EN LA ESCRITA, NO EN `.resena-caja`, y no es un detalle: la
   captura lo quiere en cero, y `.resena-captura { padding: 0 }` pesa lo MISMO
   que `.resena-caja { padding: ... }` —tres clases las dos—. Con la misma
   especificidad decide el orden de aparicion, asi que el ajuste de telefono,
   escrito mas abajo, le ganaba y la captura salia con un marco de color
   alrededor del chat que la hacia parecer un montaje.

   Poniendolo solo donde se quiere, no hay pelea que perder. */
/* EL RECUADRO, con el mismo velo translucido que la cuadricula y las
   preguntas: blanco sobre el tema oscuro, negro sobre el claro. Antes el fondo
   nacia TRANSPARENTE y el borde salia de un `color-mix` sobre el color de
   texto heredado — o sea que en la practica no habia recuadro que ver, y las
   reseñas flotaban sueltas sobre el fondo de la pagina. */
.dkrd-main .dkrd-resenas .resena-caja {
    margin: 0;
    border-radius: 16px;
    background: var(--dk-resena-caja, rgb(255 255 255 / 0.06));
    border: 1px solid var(--dk-resena-borde, rgb(255 255 255 / 0.10));
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resena-caja {
    background: var(--dk-resena-caja, rgb(0 0 0 / 0.05));
    border-color: var(--dk-resena-borde, rgb(0 0 0 / 0.08));
}

.dkrd-main .dkrd-resenas .resena-escrita {
    padding: 1.5rem 1.4rem;
}

.dkrd-main .dkrd-resenas .resena-estrellas {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--dk-resena-estrella, #f5a623);
}

.dkrd-main .dkrd-resenas .resena-texto {
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--dk-resena-texto, rgb(255 255 255 / 0.72));
    /* Los saltos de linea que escribio el dueño se respetan: una reseña pegada
       de WhatsApp suele traerlos, y sin esto queda un ladrillo. */
    white-space: pre-line;
}

[data-tema="claro"] .dkrd-main .dkrd-resenas .resena-texto {
    color: var(--dk-resena-texto, rgb(from var(--dk-contraste) r g b / 0.75));
}

/* EL NOMBRE, EN BARLOW Y SIN NEGRITA GRUESA. Estaba en Blinker 700 —la letra
   de los titulos— y a este tamaño salia mas pesado que la propia reseña: el
   ojo iba primero a quien firma y despues a lo que dijo, que es al reves de lo
   que interesa. En Barlow 600 se lee como una firma y acompaña al texto, que
   es de la misma familia. */
.dkrd-main .dkrd-resenas .resena-nombre {
    margin: 0.9rem 0 0;
    font-family: 'Barlow', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dk-resena-nombre, #fff);
}
[data-tema="claro"] .dkrd-main .dkrd-resenas .resena-nombre { color: var(--dk-resena-nombre, var(--dk-contraste)); }

/* --- La captura del chat --- */

.dkrd-main .dkrd-resenas .resena-captura {
    /* LA FOTO A SANGRE: la captura ES la tarjeta. El relleno vive en
       `.resena-escrita` justamente para que aqui no haya nada que quitar. */
    overflow: hidden;
    cursor: zoom-in;
}

.dkrd-main .dkrd-resenas .resena-captura img {
    display: block;
    width: 100%;
    height: auto;
    /* SIN recortar y sin alto fijo: las capturas vienen de telefonos distintos
       y con proporciones distintas. Recortarlas a un cuadrado se come justo el
       mensaje que se queria enseñar. */
    transition: transform .4s ease;
}
.dkrd-main .dkrd-resenas .resena-captura:hover img { transform: scale(1.04); }

/* --- De lado, deslizando --- */

.dkrd-main .dkrd-resenas.dk-resenas-lado .resenas-grid {
    flex-wrap: nowrap;
    /* Ver el porque en la tira de videos: `safe center` centra mientras quepa
       y se aparta en cuanto hay que desplazar. */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* La barra se esconde: el trozo que asoma ya dice que se desliza. */
    scrollbar-width: none;
    /* Aire para que la sombra de la primera y la ultima no queden cortadas. */
    padding-bottom: 4px;
}
.dkrd-main .dkrd-resenas.dk-resenas-lado .resenas-grid::-webkit-scrollbar {
    display: none;
}
.dkrd-main .dkrd-resenas.dk-resenas-lado .resenas-grid > .resena-caja {
    /* Cuantas se ven a la vez lo calcula main.js: las columnas que eligio el
       dueño mas el pico del siguiente. El `gap` entra en la cuenta, o el trozo
       que asoma sale mas fino de lo pensado. */
    flex: 0 0 calc((100% - 1.2rem) / var(--dk-resenas-a-la-vista, 3.3));
    scroll-snap-align: start;
}

/* ===========================================================================
   Tira de videos
   ---------------------------------------------------------------------------
   Portadas de YouTube en fila, con su forma elegida por el dueño. El
   reproductor de verdad solo entra cuando alguien pulsa una — ver
   `portadaDeVideo` en main.js y el porque, que es de peso.

   TODO ESTO EN LA ZONA BASE, antes de los @media. Regla de la casa, con
   prueba que la vigila.
   =========================================================================== */
.dkrd-main .dkrd-videos {
    width: 100%;
    padding: 4rem 2rem;
}

.dkrd-main .dkrd-videos .videos-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.dkrd-main .dkrd-videos .videos-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.dkrd-main .dkrd-videos .videos-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-videos-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
}

.dkrd-main .dkrd-videos .videos-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 200;
    font-size: 3rem;
    line-height: 1.05;
    color: var(--dk-videos-encabezado, #fff);
    margin: 0;
}
.dkrd-main .dkrd-videos .videos-title strong,
.dkrd-main .dkrd-videos .videos-title b { font-weight: 700; }
[data-tema="claro"] .dkrd-main .dkrd-videos .videos-title { color: var(--dk-videos-encabezado, var(--dk-contraste)); }

.dkrd-main .dkrd-videos .videos-subtitle {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 60ch;
    margin: 0.7rem auto 0;
    color: var(--dk-videos-subtitulo, rgb(255 255 255 / 0.72));
}
[data-tema="claro"] .dkrd-main .dkrd-videos .videos-subtitle {
    color: var(--dk-videos-subtitulo, rgb(from var(--dk-contraste) r g b / 0.75));
}

/* --- La tira --- */

/* Lo mismo que en reseñas, y por lo mismo: con tres columnas y cuatro videos,
   el cuarto se quedaba solo a la izquierda. Ver el comentario de
   `.resenas-grid`, que es donde esta contado. */
.dkrd-main .dkrd-videos .videos-tira {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    align-items: flex-start;
}

.dkrd-main .dkrd-videos .videos-tira > .video-celda {
    flex: 0 1 calc((100% - (var(--dk-columnas, 3) - 1) * 1.2rem) / var(--dk-columnas, 3));
    /* Ver el porque en `.resena-caja`: sin esto, tres columnas dan una. */
    min-width: 0;
}

.dkrd-main .dkrd-videos .video-celda { margin: 0; }

/* LA FORMA LA PONE EL MARCO, no el iframe ni la miniatura: asi la portada y
   el reproductor ocupan exactamente lo mismo y la tira no salta de alto al
   pulsar. `ancho` es lo de fabrica; los otros dos los pide el atributo. */
.dkrd-main .dkrd-videos .video-celda-marco {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: rgb(0 0 0 / 0.35);
}
.dkrd-main .dkrd-videos[data-proporcion="vertical"] .video-celda-marco { aspect-ratio: 9 / 16; }
.dkrd-main .dkrd-videos[data-proporcion="cuadrado"] .video-celda-marco { aspect-ratio: 1 / 1; }

.dkrd-main .dkrd-videos .video-celda-marco > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- La portada --- */

.dkrd-main .dkrd-videos .video-portada,
.dkrd-main .dkrd-video .video-portada {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: block;
}

.dkrd-main .video-miniatura {
    margin: 0;
    width: 100%;
    height: 100%;
}
.dkrd-main .video-miniatura img {
    width: 100%;
    height: 100%;
    /* `cover` y no `contain`: la miniatura de YouTube es 16:9 y los marcos
       vertical y cuadrado la recortan. Con `contain` saldrian franjas negras
       justo en las dos formas que se eligen para que no las haya. */
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.dkrd-main .video-portada:hover .video-miniatura img { transform: scale(1.05); }

/* El triangulo: el unico adorno que dice «esto se reproduce». Va sobre un
   disco propio porque una portada clara se come un triangulo blanco. */
.dkrd-main .video-play {
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--dk-videos-play, var(--dk-boton));
    color: #fff;
    box-shadow: 0 4px 18px rgb(0 0 0 / 0.35);
    transition: transform .18s ease;
    pointer-events: none;
}
.dkrd-main .video-play svg { width: 28px; height: 28px; margin-left: 2px; }
.dkrd-main .video-portada:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }

.dkrd-main .dkrd-videos .video-celda-titulo {
    font-family: 'Barlow', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 600;
    margin: 0.7rem 0 0;
    color: var(--dk-videos-titulo, #fff);
}
[data-tema="claro"] .dkrd-main .dkrd-videos .video-celda-titulo { color: var(--dk-videos-titulo, var(--dk-contraste)); }

.dkrd-main .dkrd-videos .videos-pie {
    display: flex;
    justify-content: center;
    margin-top: 2.2rem;
}

/* EL BOTON, CON LA CARA DEL DE LA PORTADA Y REGLAS PROPIAS.
   -------------------------------------------------------------------------
   Poner las clases `cta-btn btn-gold` no bastaba, y el sintoma fue exacto: un
   enlace pelado con el icono de WhatsApp encima del texto. Las reglas del hero
   estan clavadas a `.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn`
   —cinco niveles— asi que fuera de ahi las clases no heredan absolutamente
   nada. Son nombres, no un componente.

   Se copian aqui en vez de agregar este bloque a esos cinco selectores: el
   boton del hero tiene sus propias variables de color (`--dk-hero-boton`) y su
   propio sitio, y encadenarlos haria que tocar uno moviera el otro. */
.dkrd-main .dkrd-videos .videos-pie .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.4rem;
    border-radius: 50px;
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: capitalize;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    background-color: var(--dk-videos-boton, var(--dk-boton));
    color: var(--dk-videos-boton-texto, #000);
    border: 2px solid var(--dk-videos-boton, var(--dk-boton));
}

.dkrd-main .dkrd-videos .videos-pie .cta-btn:hover {
    background-color: #fff;
    color: var(--dk-videos-boton, var(--dk-boton));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(255 255 255 / .25);
}

.dkrd-main .dkrd-videos .videos-pie .icon-whatsapp {
    width: 26px;
    display: inline-flex;
    flex: 0 0 auto;
}
/* `currentColor` y no un fill fijo: asi el icono sigue al texto del boton en
   reposo y en hover, sin una segunda regla que acordarse de cambiar. */
.dkrd-main .dkrd-videos .videos-pie .icon-whatsapp svg {
    width: 100%;
    height: auto;
    display: block;
    fill: currentColor;
}

/* --- De lado --- */

.dkrd-main .dkrd-videos.dk-videos-lado .videos-tira {
    flex-wrap: nowrap;
    /* `safe center` Y NO `center` A SECAS. Con pocas tarjetas —tres videos en
       una tira dimensionada para 3,3— sobra sitio a la derecha y la fila se
       veia pegada a la izquierda: el hueco del «pico» estaba reservado para un
       siguiente que no existe.

       Centrarlas arregla eso, pero `center` a secas rompe lo otro: en un
       contenedor que SI desborda, el sobrante se reparte a los dos lados y el
       principio de la tira queda fuera del area desplazable — la primera
       tarjeta se vuelve inalcanzable. `safe` es exactamente la palabra para
       esto: centra mientras quepa, y en cuanto no quepa se comporta como
       `flex-start`. */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.dkrd-main .dkrd-videos.dk-videos-lado .videos-tira::-webkit-scrollbar { display: none; }
.dkrd-main .dkrd-videos.dk-videos-lado .videos-tira > .video-celda {
    flex: 0 0 calc((100% - 1.2rem) / var(--dk-videos-a-la-vista, 3.3));
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .dkrd-main .dkrd-preguntas .pregunta-flecha { transition: none; }
}

.dkrd-main .dkrd-preguntas .pregunta-respuesta {
    padding: 0 1.4rem 1.3rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dk-pregunta-texto, rgb(255 255 255 / 0.78));
}
[data-tema="claro"] .dkrd-main .dkrd-preguntas .pregunta-respuesta {
    color: var(--dk-pregunta-texto, rgb(0 0 0 / 0.72));
}
.dkrd-main .dkrd-preguntas .pregunta-respuesta a { color: var(--dk-pregunta-flecha, var(--dk-boton)); }





/* Icono elegido para la tarjeta de servicio destacado (Tu Dkard > Colores >
   Servicio destacado). Ocupa el lugar del favicon, que es lo que iba ahi
   cuando no se podia elegir, y se pinta del color de esa misma tarjeta. */
/* Un 30% mas chico que el hueco del favicon (60px), que es el que ocupaba
   cuando no se podia elegir icono. Un dibujo de trazo a 60px se ve tosco al
   lado de un favicon, que es una imagen con detalle: a 42px pesa lo justo. */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-logo--icono {
    width: 42px;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-logo--icono svg {
    width: 100%;
    height: 100%;
    display: block;
    /* EL COLOR VA POR AQUI, NO POR UN `fill`.
       Estos iconos son de TRAZO: la libreria los dibuja con `fill="none"` y
       `stroke="currentColor"`. Rellenarlos los convertia en manchas solidas
       —la silueta se comia el dibujo de dentro y el icono dejaba de
       reconocerse— y ademas les dejaba el contorno en el #1e1e1e del body,
       que se veia como un borde gris.
       Fijando `color` se pinta el trazo, que es el dibujo de verdad, y de paso
       los dos o tres puntos que algunos iconos SI llevan rellenos a proposito
       (el agujero de «tag», las gotas de «palette») siguen su propio
       `fill="currentColor"` y salen del mismo color. */
    color: var(--dk-servicio-dest-icono, var(--dk-servicio-dest-boton));
}

/* ---------------------------------------------------------------------------
   Selector de idioma flotante
   ---------------------------------------------------------------------------
   Vive en la misma lista que WhatsApp y la red destacada, asi que hereda su
   tamano y posicion. Lo unico propio es que lleva texto en vez de icono. */
.dkarta-nav .option-item.idioma-btn .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sin relleno: la bandera tiene que llegar al borde del circulo. */
    padding: 0;
}
/* Se usa la MISMA cadena de ancestros que .option-item .icon>* (que pone
   width: 55%): con `.dkarta-nav ...` empataban en especificidad y la bandera
   salia a 33x22 en vez de 22x15. Con .dkarta-ui-options .options-list delante
   gana esta sin depender del orden del archivo. */
/* El boton del idioma es el unico RECTANGULAR de la lista, y a proposito: una
   bandera es 3:2 y meterla en un circulo obligaba a recortarla o a dejarle dos
   franjas vacias arriba y abajo. Con la misma proporcion que el dibujo, la
   bandera llena el boton entero y se lee de un vistazo.
   Ademas es mas chico que los demas: WhatsApp y la red destacada son acciones
   de contacto —lo que el visitante viene a hacer— y el idioma es un ajuste. */
.dkarta-ui-options .options-list .option-item.idioma-btn {
    width: 45px;
    height: 30px;
    /* 3:2, la proporcion del viewBox de las banderas (60x40). */
    aspect-ratio: 3 / 2;
    border-radius: 5px;
    /* Sin fondo blanco: la bandera lo tapa entero y en el unico momento en que
       se veria —mientras carga— asomaria como un parpadeo claro. */
    background-color: transparent;
    overflow: hidden;
}

.dkarta-ui-options .options-list .option-item.idioma-btn .idioma-bandera {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    /* Contorno tenue: sobre un fondo claro, el blanco de la bandera del Reino
       Unido se fundia con el fondo y se perdia la forma. */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
}

.dkarta-ui-options .options-list .option-item.idioma-btn .idioma-bandera svg {
    display: block;
    width: 100%;
    height: 100%;
    /* `fill` y no `cover`: con la misma proporcion que el viewBox no hay nada
       que recortar, y asi la bandera se ve completa y sin deformar. */
    object-fit: fill;
}


/* ==========================================================================
   COLOR POR SECCIÓN — las secciones que faltaban
   ==========================================================================
   Hasta acá, ocho bloques de la página (catálogo, quiénes somos, cuadrícula,
   contacto, descuento, galería, comparte y pie) se pintaban directamente con
   la paleta general y no había forma de separarlos.

   No se reescribe ni una sola de sus reglas: en vez de cambiar cientos de
   `var(--dk-boton)` por `var(--dk-catalogo-acento)`, cada sección redefine
   --dk-boton DENTRO de su propio bloque. Como las variables CSS heredan, todo
   lo que hay debajo de esa sección lee el valor nuevo sin enterarse.

   La cadena es siempre la misma:
       el color de la sección  →  si no lo eligió, el general (…-base)
   así que un dkard que no toque nada se ve exactamente igual que antes.
   ========================================================================== */

/* Catálogo: la etiqueta "CATÁLOGO", el REF, el botón Añadir y la nota. */
.dkrd-main .dkrd-catalog {
    --dk-boton: var(--dk-catalogo-acento, var(--dk-boton-base));
    --dk-contraste: var(--dk-catalogo-fondo, var(--dk-contraste-base));
}

/* Quiénes somos ya no remapea nada.
   Aqui se redirigian --dk-contraste, --dk-boton y --dk-header a tres
   controles cuyos rotulos ("Fondo de la seccion", "Boton", "Nombre de marca")
   no correspondian con nada de esta seccion: no hay fondo, no hay boton y el
   nombre de marca salio de la pagina. Sus textos, su etiqueta y su velo tienen
   controles propios y dedicados, que es como se cablea el resto. */

/* Cuadrícula de cajas con ícono. */
/* La cuadricula ya no remapea nada: cada pieza tiene su variable dedicada.
   Aqui se redirigian --dk-boton y --dk-contraste a dos controles cuyos
   rotulos no correspondian con lo que pintaban. */

/* Contacto ya no remapea nada.
   Aqui se redirigian --dk-boton, --dk-contraste y --dk-degradado a controles
   cuyos rotulos no correspondian con lo que pintaban: el del "fondo" acababa
   cambiando el titulo, y el del titulo movia tambien los iconos. Cada pieza
   tiene ahora su variable dedicada, que es como se cablea el resto. */

/* Bloque de descuento. */
.dkrd-main .dkrd-discount {
    --dk-boton: var(--dk-descuento-acento, var(--dk-boton-base));
    --dk-contraste: var(--dk-descuento-fondo, var(--dk-contraste-base));
}

/* Galería de fotos. */
.dkrd-main .dkrd-gallery {
    --dk-boton: var(--dk-galeria-acento, var(--dk-boton-base));
    --dk-contraste: var(--dk-galeria-fondo, var(--dk-contraste-base));
}

/* Comparte / código QR. */
.dkrd-main .dkrd-share {
    --dk-boton: var(--dk-comparte-acento, var(--dk-boton-base));
}

/* Pie de página: también es un degradado de dos puntas. */
.dkrd-footer {
    --dk-contraste: var(--dk-pie-1, var(--dk-contraste-base));
    --dk-fondo: var(--dk-pie-2, var(--dk-fondo-base));
    --dk-degradado: var(--dk-pie-acento, var(--dk-degradado-base));
}


/* "Desde" sobre el precio: es una aclaracion, no parte de la cifra. Va arriba,
   pequeño y apagado, para que el numero siga siendo lo primero que se lee. */
.price-desde {
    display: block;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.15em;
    opacity: 0.7;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* `inherit` de fabrica: sigue al precio, que es como se veia hasta hoy.
       Ampliar los controles de color NO le cambia la pagina a un dkard ya
       publicado — solo se la cambia a quien elija un color a proposito. */
    color: var(--dk-producto-desde, inherit);
}

/* El "Desde" de un destacado tiene su propio control, igual que su precio.
   Hacen falta DOS variables y no una porque applyColoresSecciones las escribe
   todas en la raiz: el `selector` de cada seccion solo lo usa el panel para
   medir. Es el ancestro de esta regla —y no el nombre— lo que decide cual
   manda aqui. */
.dkrd-main .dkrd-destacados .price-desde {
    color: var(--dk-producto-dest-desde, var(--dk-producto-desde, inherit));
}

/* La moneda, al lado de la cifra.
   En Colombia el simbolo es "$", el mismo del dolar, asi que un catalogo de
   tours o de mayoristas se lee distinto segun quien lo mire. Va pequena y
   apagada: aclara la cifra, no compite con ella. */
.price-moneda {
    /* Sube de 0.55em/600/0.65 a 0.68em/700/0.85: a ese tamaño y con esa
       opacidad «COP» casi no se leia sobre el fondo oscuro, y saber en que
       moneda esta el precio no es un detalle decorativo —un dkard lo miran
       desde tres paises—. Sigue por debajo de la cifra, que es lo que manda. */
    font-size: 0.68em;
    font-weight: 700;
    opacity: 0.85;
    margin-left: 0.25em;
    letter-spacing: 0.03em;
    vertical-align: baseline;
    color: var(--dk-producto-moneda, inherit);
}

.dkrd-main .dkrd-destacados .price-moneda {
    color: var(--dk-producto-dest-moneda, var(--dk-producto-moneda, inherit));
}

/* El precio de antes de la rebaja, encima del vigente y tachado.
   Mas pequeno y mas apagado que la cifra que se paga: lo primero que tiene que
   leerse es el precio de hoy, y el de antes solo esta ahi para dar la medida
   del descuento. Mismo tamano que "Desde", que es su vecino de arriba. */
.price-antes {
    display: block;
    /* Sube de 0.62em/500 a 0.75em/600 y de 0.7 a 0.85 de opacidad: tachado,
       chico y apagado a la vez se volvia invisible, y el precio de antes es
       justo lo que hace ver la rebaja. Sigue por debajo del precio de hoy. */
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.15em;
    /* La misma que "Desde", su vecina de arriba: tachado y a 0.62em ya se lee
       como secundario, y bajarle mas la opacidad solo lo volvia ilegible. Sin
       `color` propio hereda el del precio, asi que sirve en cualquier tema. */
    opacity: 0.85;
    text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   Rotulo bajo el logo
   ---------------------------------------------------------------------------
   Pequeno pero que se lea: va debajo de la marca, en el encabezado, y compite
   con el logo por la atencion. Por eso en mayusculas y espaciado —se distingue
   como un rotulo y no como una frase suelta— pero un punto por debajo del
   tamano del texto normal.

   `:empty { display: none }` es lo que permite estrenarlo sin cambiarle la
   pagina a los dkards que ya existen: sin texto configurado no ocupa ni un
   pixel, ni deja el hueco de una linea vacia bajo el logo.
   =========================================================================== */
.branding-container .brand-label {
    display: block;
    /* Pegado al logo: es su rotulo, no un elemento aparte. Cuanto baja lo
       elige el negocio en el editor; 0.5rem es el de siempre, asi que un dkard
       que no toque la manija se ve igual. */
    margin-top: var(--dk-logo-label-margen, 0.5rem);
    text-align: center;
    /* Barlow y no Blinker: el resto de los rotulos y textos de apoyo de la
       pagina son Barlow, y este salia con otra letra sin que nada lo
       justificara — se leia como un pegote de otra plantilla. */
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    /* El tamaño se elige en el editor. 0.68rem es el de siempre: un dkard
       que no lo toque se ve igual. */
    font-size: var(--dk-logo-label-tamano, 0.68rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--dk-logo-label, var(--dk-degradado));
}
.branding-container .brand-label:empty { display: none; }

/* ===========================================================================
   La plantilla compartida no debe enseñar contenido de nadie
   =========================================================================== */

/* El recuadro de NOTAS se esconde entero si el negocio no configuró ninguna.
   Antes la plantilla traía un <li> de ejemplo —"las notas que escribas en el
   panel aparecen aquí"— y eso salía PUBLICADO en el dkard de todo el que no
   las hubiera tocado: una instrucción para quien edita, leída por sus
   clientes. Ahora la lista nace vacía y este par de reglas la desaparecen. */
.dkrd-main .dkrd-notas .catalog-header .info-note-box:has(.note-list:empty) {
    display: none;
}

/* El nombre del negocio nace vacío porque lo llena main.js. Sin altura
   reservada, la portada daba un salto al llegar el nombre —y el salto se ve
   más en móvil, que es donde se abre casi todo—. `min-height: 1em` deja el
   hueco sin pintar nada dentro. */
.dkrd-main .dkrd-hero .hero-title:empty {
    min-height: 1em;
}

/* ===========================================================================
   Ajustes de responsive de los dkards (2026-08-24)
   ---------------------------------------------------------------------------
   Van al final y en orden DESCENDENTE (1024 -> 768 -> 550 -> 450 -> 350), y
   las dos cosas importan.

   Al final, porque con la misma especificidad gana la ultima regla del
   archivo: asi estos ajustes mandan sobre lo que ya habia, sin tener que
   subirle la especificidad a cada selector.

   Descendente, porque con `max-width` una pantalla de 350px cumple TODAS las
   condiciones —350, 450, 550, 768 y 1024— y termina aplicando la que aparezca
   de ultima. En orden ascendente, un `font-size` escrito para 350px queda
   pisado por el del bloque de 1024 y el ajuste no se ve aunque este escrito.
   De mayor a menor, cada corte afina al anterior, que es como uno espera que
   funcione al leerlo.
   =========================================================================== */

.dkrd-main .dkrd-featured .featured-wrapper {
    width: 90%;
}

.hero-highlight {
    width: 86%;
    max-width: 1300px;
    margin: 20px auto -10px;
}

/* Laptops y tablets grandes */


/* Tablets y moviles grandes */


/* Moviles pequenos */


/* Moviles muy pequenos */


/* Los mas chicos que existen */


/* ---------------------------------------------------------------------------
   Lo que los cortes grandes de arriba se llevaron por delante
   ---------------------------------------------------------------------------
   El bloque anterior entro al final del archivo para poder mandar sobre lo que
   ya habia. El efecto secundario: sus cortes de 768 y 1024 tambien pasaron a
   ganarle a refinamientos de MOVIL que vivian antes en el archivo (550, 700,
   900, 1000). Con `max-width` un telefono cumple todas esas condiciones, asi
   que aplicaba la de 1024 y el ajuste fino de 550 desaparecia.

   El caso que se veia: el catalogo tenia 2 columnas en telefono desde siempre,
   y el corte nuevo de 768 —pensado para tablet— lo dejo en 3. A 340px daban
   tarjetas de 96px, con el texto en tiras y «Precio a cotizar» partido en tres
   lineas.

   Aca se vuelven a afirmar esos valores, ya en el orden correcto. NO se
   reafirma lo que se cambio a proposito: el `column-reverse` del bloque de
   contacto es un cambio querido y se queda, aunque el archivo tuviera un
   `column` mas abajo.
   --------------------------------------------------------------------------- */









/* Y los dos cortes mas chicos vuelven a afinar encima, que es su trabajo. */


/* ---------------------------------------------------------------------------
   Mas ajustes de responsive (2026-08-24, segunda tanda)
   ---------------------------------------------------------------------------
   Al final y de mayor a menor, por lo mismo de siempre: con `max-width` un
   telefono cumple todas las condiciones y aplica la ultima escrita.

   Las otras dos reglas de esta tanda no estan aca porque ya existian y se
   editaron en su sitio: el `min-height` de las figuras sin foto (paso de
   320px a auto) y el alto de la figura de "Nosotros" en 550.
   --------------------------------------------------------------------------- */







/* El aviso de "aquí va tu código QR".
   ---------------------------------------------------------------------------
   Solo lo ve el dueño en vista previa desde su panel: para un visitante el
   bloque del teléfono ni se dibuja (ver applyCompartir en main.js). Va encima
   del hueco blanco del maqueta, que es exactamente el sitio donde va a salir
   el código, para que no haya que explicarle dónde mirar. */
.qr-mockup .mockup-content .mockup-qr .qr-pendiente {
    position: absolute;
    inset: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1rem;
    border-radius: 8px;
    border: 2px dashed #c9c2b8;
    background: #fff;
    color: #4a423a;
    text-align: center;
}
.qr-mockup .mockup-content .mockup-qr .qr-pendiente strong {
    font-size: .95rem;
    line-height: 1.2;
}
.qr-mockup .mockup-content .mockup-qr .qr-pendiente span {
    font-size: .78rem;
    line-height: 1.35;
    opacity: .8;
}

/* El distintivo flotante de reCAPTCHA.
   ---------------------------------------------------------------------------
   Google lo pone fijo abajo a la derecha, que es exactamente donde viven el
   botón de WhatsApp y el de enviar: los dos que la página existe para que
   alguien pulse. En un teléfono se montaba encima de ambos.

   Esconderlo está permitido a cambio de dejar la atribución visible en el
   flujo, y por eso existe .dkrd-recaptcha-aviso en el pie. Si alguna vez se
   quita esa línea, hay que devolver el distintivo. */
.grecaptcha-badge {
    visibility: hidden;
}

.dkrd-recaptcha-aviso {
    /* Aire arriba: iba pegado a la firma de DKARD y los dos bloques se leian
       como uno solo. Son cosas distintas —una es la marca, el otro es un aviso
       legal de un tercero— y separarlos es lo que deja ver que lo son. */
    margin: 2.25rem auto 0;
    max-width: 34rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.45;
    opacity: 0.55;

    /* COLOR PROPIO, y no heredado.
       ------------------------------------------------------------------
       No tenia ninguno, asi que lo heredaba del pie. Y el pie redefine
       `--dk-contraste` para apuntar a `--dk-pie-1`, que es SU PROPIO FONDO:
       en tema claro, la regla `[data-tema="claro"] .dkrd-footer { color:
       var(--dk-contraste) }` acababa pintando el texto del mismo color que
       el fondo de detras. Invisible del todo.

       En oscuro no llegaba a desaparecer, pero heredaba un tono demasiado
       apagado y con el 0.55 de opacidad encima quedaba ilegible.

       Se usa `--dk-contraste-base` —el token de verdad— y no `--dk-contraste`,
       que dentro del pie ya no significa lo que su nombre dice. */
    color: #fff;
}

[data-tema="claro"] .dkrd-recaptcha-aviso {
    color: var(--dk-contraste-base);
}
.dkrd-recaptcha-aviso a {
    color: inherit;
    text-decoration: underline;
}
.dkrd-recaptcha-aviso a:hover { opacity: 0.85; }

/* ---------------------------------------------------------------------------
   Ajustes responsive del dkard del cliente (26/08) — pantallas muy angostas.
   Van al final a propósito: misma especificidad que las reglas de arriba,
   así que el orden es lo que las hace ganar dentro de cada media query.
   --------------------------------------------------------------------------- */








/* Mobile first - Para dispositivos móviles muy pequeños */


/* Mobile first - Para dispositivos móviles pequeños */


/* La negrita que se pone desde el panel llega como <b>, no como <strong>:
   el boton "B" del editor usa execCommand('bold'), que escribe <b>. Todas
   las reglas de titulos de arriba pesaban solo <strong>, asi que la negrita
   del negocio se guardaba bien y no se veia: <b> quedaba en `bolder`, que
   sobre un titulo de peso 200 calcula 400 y no se nota. Cada regla de strong
   lleva ahora su gemela para b (ver los selectores dobles). */


/* ===========================================================================
   MURO DE LOGOS  (1.1.0)
   ===========================================================================
   MOSAICO CON `column-count`, no rejilla. Un logo es un PNG con transparencia
   y proporciones impredecibles: uno apaisado de 4:1 al lado de uno cuadrado.
   Una rejilla los mete a todos en la misma caja, y eso es lo que hace que la
   mitad salgan diminutos y la otra mitad recortados. En columnas cada uno
   ocupa el alto que necesita y las columnas se rellenan solas.

   Arranca oculto, como la galería: sin logos cargados, el molde de la
   plantilla saldría con su texto de relleno en la página de todos.
   =========================================================================== */

.dkrd-main .dkrd-logos {
    width: 100%;
    margin: 7rem 0;
    padding: 0 2rem;
    display: none;
}
.dkrd-main .dkrd-logos .logos-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}
.dkrd-main .dkrd-logos .logos-header {
    max-width: 1100px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.dkrd-main .dkrd-logos .logos-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--dk-logos-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}
.dkrd-main .dkrd-logos .logos-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 100%;
    margin: 0;
    color: var(--dk-logos-titulo, #ffffff);
}
.dkrd-main .dkrd-logos .logos-title>strong,
.dkrd-main .dkrd-logos .logos-title b { font-weight: 600; }
.dkrd-main .dkrd-logos .logos-description {
    font-size: 1rem;
    margin: .9rem auto 0;
    max-width: 60ch;
    color: var(--dk-logos-texto, #ffffffcc);
}

.dkrd-main .dkrd-logos .logos-muro {
    column-count: var(--dk-columnas, 5);
    column-gap: var(--dk-logos-gap, 1.6rem);
}

.dkrd-main .dkrd-logos .logos-item {
    /* `break-inside` y no `page-break-inside`: sin esto una figura se parte por
       la mitad entre dos columnas y el logo sale cortado. */
    break-inside: avoid;
    transition: transform .2s ease, border-color .2s ease;
    margin: 0 0 var(--dk-logos-gap, 1.6rem);
    padding: 0.3rem 0.4rem;
    border-radius: 14px;
    background: var(--dk-logos-fondo, rgba(255, 255, 255, .06));
    border: 1px solid var(--dk-logos-borde, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sin caja: el logo pelado sobre el fondo de la seccion. */
.dkrd-main .dkrd-logos.dk-logos-sin-caja .logos-item {
    background: none;
    border: 0;
    padding: .4rem;
}
.dkrd-main .dkrd-logos .logos-item img {
    max-width: 100%;
    height: auto;
    display: block;
    /* LA CAJA YA ERA REDONDA; LA IMAGEN NO. Un logo con fondo propio —los PNG
       sobre blanco y los JPG, que son la mayoria de los que manda un cliente—
       dibujaba sus cuatro esquinas cuadradas dentro de una caja redondeada, y
       se veia como una pegatina mal recortada.

       10 y no 14: la caja lleva 14 y un poco de relleno, asi que el redondeo
       de dentro tiene que ser MENOR o las dos curvas no se acompañan. Es la
       misma cuenta que hace el navegador al redondear una caja por dentro.
       Y vale igual en el modo «sin caja», donde es el unico redondeo que hay. */
    border-radius: 10px;
    /* Los logos vienen en mil colores y encima de un fondo de marca se ven
       sucios. En gris y a media opacidad forman un muro que se lee como uno
       solo; al pasar por encima, cada uno recupera lo suyo. */
    filter: grayscale(1);
    opacity: .72;
    transition: filter .25s ease, opacity .25s ease;
}
.dkrd-main .dkrd-logos .logos-item:hover img { filter: none; opacity: 1; }

/* El levante del hover es PARA TODOS los modos: en gris ademas se revela el
   color, pero en blanco/negro/color el raton tambien tiene que sentir que el
   logo responde. */
.dkrd-main .dkrd-logos .logos-item:hover { transform: translateY(-3px); }

/* Las otras tres formas de pintarlos, a eleccion del dueno. En blanco y en
   negro el hover no «revela» el color: seria un destello que no eligio. */
.dkrd-main .dkrd-logos.dk-logos-color .logos-item img { filter: none; opacity: 1; }
.dkrd-main .dkrd-logos.dk-logos-blanco .logos-item img,
.dkrd-main .dkrd-logos.dk-logos-blanco .logos-item:hover img { filter: brightness(0) invert(1); opacity: .92; }
.dkrd-main .dkrd-logos.dk-logos-negro .logos-item img,
.dkrd-main .dkrd-logos.dk-logos-negro .logos-item:hover img { filter: brightness(0); opacity: .92; }

/* Los que esperan detrás del botón. `display:none` y no `visibility`: tienen
   que dejar de ocupar sitio, que es el motivo entero del corte. */
.dkrd-main .dkrd-logos .logos-item.esta-oculto { display: none; }

.dkrd-main .dkrd-logos .logos-mas {
    display: block;
    /* 2,2rem y no 0,6: el muro termina en una fila de logos y el boton caia
       casi encima de ella, leyendose como parte de la ultima tarjeta en vez de
       como la accion del bloque. El hueco de abajo es el de la seccion. */
    margin: 2.2rem auto 0;
    padding: .7rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--dk-logos-boton, var(--dk-boton));
    background: none;
    color: var(--dk-logos-boton, var(--dk-boton));
    font-family: 'Blinker', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.dkrd-main .dkrd-logos .logos-mas:hover {
    background: var(--dk-logos-boton, var(--dk-boton));
    color: var(--dk-fondo, #111);
}
.dkrd-main .dkrd-logos .logos-mas[hidden] { display: none; }

/* ===========================================================================
   VIDEO  (1.1.0)
   ===========================================================================
   Texto a un lado y reproductor al otro. El marco lleva `aspect-ratio` y no
   una altura fija: con altura fija el video sale con dos franjas negras en
   cuanto la columna cambia de ancho, que es siempre.
   =========================================================================== */

.dkrd-main .dkrd-video {
    width: 100%;
    margin: 7rem 0;
    padding: 0 2rem;
    display: none;
}
/* El texto va ARRIBA del video y centrado —no superpuesto—. Se probo encima,
   sobre un velo, y no funciona: el titular compite con lo que pasa en el
   video, tapa el primer plano justo donde suele estar la accion, y en un
   video claro el velo negro se ve como una mancha. Arriba se lee como lo que
   es: el titulo que presenta el video.

   El ancho del video en escritorio lo fija el deslizador (--dk-video-ancho). */
.dkrd-main .dkrd-video .video-wrapper {
    max-width: var(--dk-video-ancho, 1000px);
    margin: 0 auto;
}
.dkrd-main .dkrd-video .video-texto {
    /* La medida de lectura no crece con el video: un subtitulo a 1300 px de
       ancho se lee peor que a 46rem, aunque el reproductor sea enorme. */
    max-width: 46rem;
    margin: 0 auto 1.8rem;
    text-align: center;
}
.dkrd-main .dkrd-video .video-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--dk-video-label, var(--dk-boton));
    text-transform: uppercase;
    display: block;
    margin-bottom: -0.1rem;
}
.dkrd-main .dkrd-video .video-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 300;
    font-size: 2.6rem;
    line-height: 105%;
    margin: 0;
    color: var(--dk-video-titulo, #ffffff);
}
.dkrd-main .dkrd-video .video-title>strong,
.dkrd-main .dkrd-video .video-title b { font-weight: 600; }
.dkrd-main .dkrd-video .video-subtitle {
    font-size: 1rem;
    margin: .5rem 0 0;
    color: var(--dk-video-texto, #ffffffcc);
}

.dkrd-main .dkrd-video .video-marco {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, .35);
}
.dkrd-main .dkrd-video .video-marco iframe,
.dkrd-main .dkrd-video .video-marco video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* ---------------------------------------------------------------------------
   EL CORTE DE PANTALLA ESTRECHA: 400px, y antes eran 350
   ---------------------------------------------------------------------------
   350 esta POR DEBAJO DEL MERCADO. El telefono mas estrecho de uso corriente
   mide 360 de ancho de ventana (Galaxy S y A), y de ahi para arriba: 375 el
   iPhone SE y el mini, 390 el 12/13/14, 393 y 412 los Android grandes. Con el
   corte en 350, las sesenta y dos reglas que hay aqui abajo -el hero a una
   columna, los titulos de producto mas chicos, los servicios en una sola fila,
   el rotulo del QR que pegaba con el codigo- no se aplicaban en ningun
   telefono real. Se escribieron y no las vio nadie.

   Subirlo a 400 SI cambia lo que ve un visitante entre 360 y 400, que es una
   parte grande de los telefonos. Ese es el punto: es la correccion que estas
   reglas venian a hacer y nunca llegaron a hacer.

   El de 300 se queda donde esta: ahi si es un extremo de verdad.
   --------------------------------------------------------------------------- */


/* =======================================================================
   LOS CORTES RESPONSIVE: 1000 / 768 / 550 / 400, DE MAYOR A MENOR
   =======================================================================
   Cuatro cortes y nada mas, los mismos cuatro que ensena el editor visual
   (su quinta vista, 1280, es "sin cortes"). Antes habia TRECE anchos
   distintos (1024, 900, 700, 640, 600, 560, 480, 450...) repartidos en 35
   bloques: cada uno era una frontera mas donde el diseno podia saltar, y
   ningun ancho de prueba cubria los demas.

   Al fusionarlos, cada regla vieja conservo todo el rango donde ya aplicaba
   y gano el tramo hasta su corte nuevo (900 ahora corta en 1000, 700 en
   768...). Las dos excepciones: lo de 1024 corta en 1000 (no hay corte
   mayor: la franja 1001-1024 pasa a verse como escritorio), y lo de 560
   corta en 550 (nada real mide 551-560).

   El orden sigue siendo la ley de siempre: de mayor a menor, porque con
   max-width dos reglas de la misma especificidad las decide el ORDEN DE
   APARICION, y el corte chico tiene que ganar. MediaQueriesEnOrdenTest lo
   vigila. AL AGREGAR UNA REGLA NUEVA: va dentro del bloque de su corte, al
   final; jamas un bloque suelto con otro ancho. Y toda la base va ANTES de
   esta zona: una base escrita despues de su media le gana el empate y la
   regla responsive queda muerta (le paso al muro de logos).

   El bloque de 300px del final NO es un quinto corte: es el ajuste de
   emergencia para plegables (Fold cerrado: 280px). Fundirlo en 400 le
   encogeria la letra a todos los telefonos normales. */

@media screen and (max-width: 1000px) {
    /* --- venia del corte de 1024px --- */
    .dkrd-main .dkrd-destacados .destacados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
        font-size: 1.1rem;
        padding: 0.2em 0.7em;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content {
        padding: 1.3rem;
    }
    .dkrd-hero .hero-card .hero-bg-figure {
        left: 0%;
        padding-left: 0%;
    }
    .dkrd-hero .hero-card {
        padding-top: 13em;
    }
    .dkrd-main .dkrd-featured .featured-wrapper {
        max-width: 800px;
        width: 90%;
    }
    .dkrd-main .dkrd-featured .featured-title {
        font-size: 2.7rem;
    }
    .dkrd-main .dkrd-featured .featured-wow {
        right: -4%;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid {
        gap: 0.8rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content {
        padding: 0.6em 0.7em;
    }
    /* Entre 551 y 768px el badge de categoría se quedaba al tamaño de
       escritorio (1.5rem) — el único ajuste anterior vivía en el
       breakpoint de 550px, sin cubrir este rango. */
    .dkrd-main .dkrd-catalog .title-badge-container .title-badge {
        font-size: 1.25rem;
        padding: 0.3rem 1.1rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
        font-size: 1.1rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
        font-size: 0.8em;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price {
        font-size: 1.1rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn {
        font-size: 1rem;
        padding: 0.2em 1.1em;
    }
    .highlight-content .h-icon svg {
        width: 40px;
    }
    .highlight-content .h-title {
        font-size: 1.6em;
    }
    .highlight-content .h-txt {
        font-size: 1em;
    }
    .dkrd-main .dkrd-featured .featured-label {
        font-size: 1.2rem;
    }
    .dkrd-main .dkrd-featured .featured-text {
        font-size: 0.95rem;
    }
    .dkrd-main .dkrd-featured .featured-highlight {
        font-size: 1em;
    }

    .dkrd-main .dkrd-destacados .destacados-grid { grid-template-columns: minmax(0, 1fr); }

    .dkrd-main .dkrd-cuadricula .cuadricula-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dkrd-main .dkrd-cuadricula .cuadricula-title { font-size: 2.2rem; }

    /* A DOS, CAMBIANDO EL NUMERO Y NO LA REJILLA. El ancho de cada tarjeta
       sale de `--dk-columnas`, asi que basta con redefinirla AQUI, sobre la
       propia tira: una variable declarada en el elemento le gana a la que
       hereda de la seccion —que es la que escribe el panel en linea—, y no
       hay que repetir la cuenta del ancho en cada corte.

       En modo tira no cambia nada: ahi manda `--dk-*-a-la-vista`, y el corte
       de 550 lo deja en una y pico. */
    .dkrd-main .dkrd-videos .videos-title { font-size: 2.2rem; }
    .dkrd-main .dkrd-videos .videos-tira { --dk-columnas: 2; }

    .dkrd-main .dkrd-resenas .resenas-title { font-size: 2.2rem; }
    .dkrd-main .dkrd-resenas .resenas-grid { --dk-columnas: 2; }

    .dkrd-main .dkrd-destacados .destacados-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* --- venia del corte de 900px --- */
    .dkrd-main .dkrd-gallery .gallery-grid { grid-template-columns: repeat(3, 1fr); }

    /* --- venia del corte de 900px --- */
    .dkrd-main .dkrd-featured .featured-wrapper { grid-template-columns: 1fr; gap: 2rem; }
    .dkrd-main .dkrd-featured .featured-title { font-size: 2.2rem; }
    .dkrd-main .dkrd-featured .featured-label { font-size: 1.1rem; }
    .dkrd-main .dkrd-featured .featured-wow { font-size: 1rem; right: 2%; }

    /* --- venia del corte de 900px --- */
    .dkrd-main .dkrd-preguntas .preguntas-title { font-size: 2.2rem; }

    /* --- venia del corte de 900px --- */
    .dkrd-main .dkrd-featured .featured-title {
        font-size: 2.2rem;
    }
    .dkrd-main .dkrd-featured .featured-label {
        font-size: 1.1rem;
    }
    .dkrd-main .dkrd-featured .featured-wow {
        right: 2%;
    }
}


@media screen and (max-width: 768px) {
    /* EL ANCHO DEL LOGO EN EL TELEFONO, aparte del de escritorio.
       -----------------------------------------------------------------------
       Un logo apaisado que se ve bien al 60 % en un monitor se queda diminuto
       en 375px, y al reves. Hasta hoy habia un solo porcentaje para los dos.

       EL RESPALDO ES EL DE ESCRITORIO, no un numero nuevo: sin
       `--dk-logo-ancho-movil` escrita -que es el caso de todos los dkards que
       ya existen- esto vale exactamente lo mismo que la regla base, y la
       pagina no se mueve ni un pixel. Los 70% del final son los de siempre,
       repetidos aqui porque `var()` solo admite UN respaldo por nivel.

       La cadena entera de selectores es la de la regla base a proposito: lleva
       cuatro clases y una mas corta perderia el empate aunque este dentro de
       una media query. */
    .dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img {
        width: var(--dk-logo-ancho-movil, var(--dk-logo-ancho, 70%));
    }

    /* LAS VARIACIONES DE LA TARJETA, HACIA ABAJO EN VEZ DE CORTADAS.
       -----------------------------------------------------------------------
       Medido en un telefono de 375px: con el catalogo a dos columnas la
       tarjeta mide 171px. Ahi, «Talla» se recortaba a 27px —o sea «Ta…»— y de
       los 160px que ocupan seis tallas solo cabian 115: la mitad de las tallas
       no llegaba a pintarse. El eje llevaba `nowrap` con puntos suspensivos y
       los valores un `overflow: hidden`, y las dos cosas juntas escondian
       justo lo que la fila viene a decir.

       Se deja que envuelva. NO se apila a la fuerza: con `flex-wrap` el eje y
       sus valores siguen compartiendo renglon cuando caben —en una tablet a
       tres columnas caben— y solo bajan cuando no. El tope de seis valores por
       eje (VALORES_EN_LA_TARJETA en main.js) sigue poniendo el techo: el peor
       caso son dos renglones de fichas, no un parrafo.

       Cuesta alto: una tarjeta con dos ejes pasa de 402 a 523px. Se acepta a
       proposito —esto es lo que el negocio quiere enseñar, y medio dato es
       peor que ninguno—, y solo les pasa a los productos con variaciones. */
    .product-card .card-content .product-variaciones { gap: 5px; }

    .product-card .card-content .pv-fila {
        flex-wrap: wrap;
        /* Por la linea base y no por el centro: al envolver, el eje queda
           arriba y centrarlo contra dos renglones de fichas lo dejaba flotando
           en mitad del bloque. */
        align-items: baseline;
        row-gap: 2px;
    }

    /* Sin recorte: aqui ya no hay a quien ceder sitio, porque las fichas se
       bajan solas. */
    .product-card .card-content .pv-eje {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .product-card .card-content .pv-valores {
        flex-wrap: wrap;
        overflow: visible;
        row-gap: 3px;
    }

    .dkarta-nav {
        padding: 0 15px 8px 15px;
        top: 10px;
    }

        .dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-text {
        font: 1.3em / 100% Barlow;
        margin-top: 0.8em;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block .guide-icon>* {
        width: 85px;
        margin-top: -10px;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block {
        max-width: 310px;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer {
        margin-top: 30px;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer svg {
        width: 17px;
        height: auto;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block .footer span {
        font: 10px Barlow;
    }

    .dkarta-guide-msg .dkarta-guide-wrapper .guide-block {
        padding: 30px 40px;
    }
    .dkrd-hero .hero-card::before {
                background: linear-gradient(0deg, var(--dk-hero-velo) 15%, var(--dk-hero-velo) 45%, transparent 80%);
}

    .dkrd-main .dkrd-featured .featured-wrapper {
        max-width: 450px;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content {
        padding: 1.3rem;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-image {
        width: 40%;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-title {
        font-size: 1.2rem;
        line-height: 105%;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-description {
        font-size: 0.85em;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-price {
        font-size: 1.2rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid {
        grid-template-columns: repeat(3, minmax(22%, 1fr));
    }
    .services-container .service-card.contratst-card[data-columnas="2"],
    .services-container[data-serv-layout] .service-card.contratst-card[data-columnas="2"] {
        grid-column: span 3;
    }
    .services-container:has(.service-card[data-columnas]),
    .services-container[data-serv-layout]:has(.service-card[data-columnas]) {
        grid-template-columns: repeat(2, 1fr);
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container {
        gap: 1rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container {
        grid-template-columns: 1fr;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card {
        order: 2;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card {
        order: 1;
    }
    .dkrd-main .dkrd-contact .contact-wrapper .contact-top-split {
        gap: 2rem;
        flex-direction: column-reverse;
    }
    .dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header {
        text-align: center;
    }

    /* En tablet y abajo el video ocupa todo el ancho disponible. */
    .dkrd-main .dkrd-video .video-wrapper { max-width: 100%; }
    .dkrd-main .dkrd-video .video-marco { border-radius: 0; }
    /* El reproductor va borde a borde en pantalla angosta, pero el TEXTO no:
       pegado al borde se lee como algo que se sale. */
    .dkrd-main .dkrd-video .video-texto { padding: 0 1.2rem; margin-bottom: 1.2rem; }
    .dkrd-main .dkrd-video .video-title,
    .dkrd-main .dkrd-logos .logos-title { font-size: 2.6rem; }
    .dkrd-main .dkrd-logos .logos-muro { column-count: 3; }

    /* --- venia del corte de 700px --- */
    /* En móvil vuelve a apilarse: 50/50 dejaría las dos mitades ilegibles. */
    .dkrd-main .dkrd-destacados .product-grid .product-card { flex-direction: column; }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-image {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 23px 23px 0 0;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content { width: 100%; padding: 1.2rem; }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-title { font-size: 1.3rem; }

    /* --- venia del corte de 700px --- */
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-image {
        width: 100%;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content {
        padding: 1.2rem;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-title {
        font-size: 1.3rem;
    }

    /* --- venia del corte de 640px --- */
    .dkrd-main .dkrd-gallery .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    /* El tamaño del título en móvil lo maneja .section-title. */

    /* --- venia del corte de 640px --- */
    .gallery-lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
    .gallery-lightbox-prev { left: 8px; }
    .gallery-lightbox-next { right: 8px; }
    .gallery-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }

    /* --- venia del corte de 600px --- */
    #dkarta-ui+.lightbox-resume {
        padding: 35px 10px;
    }

    #dkard-form-btn {
        right: 8px;
        bottom: 8px;
    }


    .dkard-form .dk-form .f-title {
        padding: 15px;
        font: 700 16px Barlow;
        margin-bottom: 30px;
    }

    .dkard-form .dk-form form .form-group label {
        font-size: 11px;
    }

    .dkard-form .dk-form form .form-group input,
    .dkard-form .dk-form form .form-group textarea,
    .dkard-form .dk-form form .form-group select {
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
    }

    .dkard-form .dk-form form .f-terms {
        /* Aqui tambien 1.35 y no 100%: con `100%` el interlineado valia 14px
           con letra de 14px, o sea que los dos renglones del aviso se pisaban.
           Y esta es la regla que manda en el telefono, que es donde se lee. */
        font: 600 14px / 1.35 Barlow;
    }

    .dkard-form .dk-form .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .dkard-form .dk-form .form-actions .f-action {
        padding: 15px;
        font: 700 16px Barlow;
    }


    .dkard-form .dk-form .form-actions .f-action.close {
        min-width: 60px;
        width: auto;
    }

    .dkard-form .dk-form .form-actions .f-action.close svg {
        width: 60px;
        height: 38px;
    }
}


@media screen and (max-width: 550px) {
    /* Los destacados de lado: en el telefono la tarjeta es vertical y muy
       alta, asi que se enseña un poco menos del siguiente para que la que se
       esta mirando quepa entera. */
    .dkrd-main .dkrd-destacados.dk-destacados-lado .destacados-grid {
        grid-auto-columns: calc((100% - 0.9rem) / 1.15);
    }

    /* LAS RESEÑAS, 1,3 EN EL TELEFONO. Es el numero que se pidio y tiene su
       razon: una entera y un tercio de la siguiente. Con 1,0 la tira parece
       una sola tarjeta y nadie desliza; con 2 no se lee ninguna.

       Se fija aqui y no se hereda de las columnas: el dueño elige 3 o 4 para
       su escritorio, y en un telefono eso serian tarjetas de cien pixeles. */
    .dkrd-main .dkrd-resenas.dk-resenas-lado .resenas-grid > .resena-caja {
        flex: 0 0 calc((100% - 0.9rem) / 1.3);
    }

    /* Los videos, 1,3 — LAS TRES FORMAS, tambien la vertical. Estuvo en 1,12
       para la vertical con el argumento de que una tarjeta 9:16 ocupa casi
       toda la pantalla de alto; la cuenta dice que no hace falta: en un
       telefono de 390 la tarjeta sale de 264 px de ancho y 470 de alto, que
       entra de sobra. Y 1,3 es lo que se pidio, igual que en las otras dos
       tiras: que el numero sea el MISMO en las tres es lo que hace que el
       gesto se sienta igual en toda la pagina. */
    .dkrd-main .dkrd-videos.dk-videos-lado .videos-tira > .video-celda {
        flex: 0 0 calc((100% - 0.9rem) / 1.3);
    }

    .dkrd-main .dkrd-videos { padding: 3rem 1rem; }
    .dkrd-main .dkrd-videos .videos-title { font-size: 1.8rem; }
    .dkrd-main .dkrd-videos .videos-tira { --dk-columnas: 1; }
    .dkrd-main .video-play { width: 46px; height: 46px; }
    .dkrd-main .video-play svg { width: 22px; height: 22px; }

    .dkrd-main .dkrd-resenas { padding: 3rem 1rem; }
    .dkrd-main .dkrd-resenas .resenas-title { font-size: 1.8rem; }
    .dkrd-main .dkrd-resenas .resenas-grid { --dk-columnas: 1; }
    .dkrd-main .dkrd-resenas .resena-escrita { padding: 1.2rem 1.1rem; }

    /* --- venia del corte de 560px --- */
    .dkrd-main .dkrd-cuadricula { padding: 3rem 1rem; }
    .dkrd-main .dkrd-cuadricula .cuadricula-grid { grid-template-columns: minmax(0, 1fr); }
    .dkrd-main .dkrd-cuadricula .cuadricula-caja { padding: 1.5rem 1.2rem; }

    /* --- venia del corte de 560px --- */
    .dkrd-main .dkrd-preguntas { padding: 3rem 1rem; }
    .dkrd-main .dkrd-preguntas .pregunta-titulo { padding: 1rem 1.1rem; font-size: 1.05rem; }
    .dkrd-main .dkrd-preguntas .pregunta-respuesta { padding: 0 1.1rem 1.1rem; }

    /* Aire encima del texto de «Quiénes somos» en móvil: ahí la foto y el
       texto se apilan, y sin esta separación el titular queda pegado al
       borde de la imagen de arriba.

       LA CLASE REPETIDA ES A PROPOSITO, no un descuido del formateador. Mas
       abajo, DENTRO DE ESTE MISMO BLOQUE, hay otra regla para el mismo
       elemento que escribe `padding: 2rem` — un atajo, o sea que reescribe
       los cuatro lados y se llevaba por delante este `padding-top`. Con la
       misma especificidad ganaba la de abajo por ser la ultima, y la de
       arriba se leia correcta sin hacer nada. Repetir `.dkrd-main` sube la
       especificidad lo justo para que mande esta, venga de donde venga la
       otra: es la misma cura que hoy hay a mano en el corte de 400px, pero
       sin tener que repetirla en cada corte nuevo.

       El dia que se fusionen los cortes de CSS, esto se puede volver una
       sola regla y las clases repetidas sobran. */
    .dkrd-main.dkrd-main.dkrd-main .dkrd-about .about-wrapper .about-content {
        padding-top: 4em;
    }
    /* Y la etiqueta («NOSOTROS»), mas discreta en telefono: en escritorio son
       1.5rem, que en 360px de ancho compiten con el titular que va debajo. */
    .dkrd-main.dkrd-main.dkrd-main .dkrd-about .about-wrapper .about-content .about-label {
        font-size: 1rem;
    }
    /* Pedido explícito: 40% más chico que el original (240px) en móvil —
       más reducción que el 30% de escritorio de arriba. */
    .dkard-firma {
        width: min(144px, 60vw);
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
    padding-right: 4px;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(48%, 1fr));
        gap: 0.45em;
    }
    .dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn {
    width: 38px;
    height: 38px;
    }

    .dkrd-main .dkrd-share .share-wrapper .social-share-row {
    gap: 0.6rem;
}

    .dkrd-main .dkrd-contact .contact-wrapper .contact-top-split {
        flex-direction: column;
    }
    .dkrd-main .dkrd-promises .promises-wrapper .promises-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.dkrd-main .dkrd-discount .discount-wrapper .discount-container {
    grid-template-columns: 1fr;
}
.dkrd-main .dkrd-services .services-wrapper .services-container,
.services-container[data-serv-layout] {
    grid-template-columns: 1fr;
}
/* En móvil todo va apilado: sin esto, el "span 2" de la tarjeta destacada
   creaba una segunda columna de 0px y las tarjetas se salían de la pantalla. */
.services-container[data-serv-layout] .service-card.contratst-card {
    grid-column: auto;
}


.dkarta-ui-options {
    right: 9px;
        bottom: 17px;
}
#dkard-form-btn .form-btn {
    height: 55px;
    width: 55px;
}


.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-value {
    font-size: 7.5rem;
}


    .qr-mockup figure>* {
        width: 280px;
    }

    .qr-mockup .mockup-content {
                width: 246px;
        height: 536px;
        top: 13px;
        left: 17px;
        border-radius: 29px;
    }

    .qr-mockup .mockup-content .mockup-qr {
        width: 190px;
        height: 190px;
    }

    .qr-mockup .mockup-content .mockup-text {
        font: 600 1.2em / 100% Barlow;
        margin: 0 20px;
        margin-bottom: 35px;
    }

    .qr-mockup .mockup-content .mockup-icon>* {
        width: 60px;
    }


    

    .dkarta-nav {
        padding: 0 10px 8px 10px;
        top: 8px;
    }

    .dkarta-nav .dkarta-nav-wrapper ul li a {
        padding: 8px 15px;
        font: 500 0.85em / 100% Barlow;
    }


    
    .contact-info {
        flex-direction: column;
        gap: 5px;
    }

    .contact-info .contact-item .item-text p {
        font: 400 1em / 100% Barlow;
    }

    .contact-info .contact-item .icon {
        width: 35px;
        min-width: 35px;
        height: 35px;
        min-height: 35px;
    }

    .contact-info .contact-item .icon svg {
        width: 20px;
        height: 20px;
    }
    .contact-info .contact-item {
        gap: 12px;
    }

    /* El ancho en celular ya NO se fuerza.
       Decía que ahí lo manda la pantalla y que dejarlo configurable era la
       forma más fácil de terminar con un logo desbordado. El desbordado lo
       impide ahora el tope en píxeles, que es una manija aparte; y mientras
       tanto el 70% fijo dejaba a un negocio con logo apaisado sin ninguna
       forma de achicarlo justo donde se ve la mayoría de su tráfico. */
    .dkrd-header .header-wrapper .branding-container .brand-logo-link .brand-img {
        height: auto;
    }

    .dkrd-hero .hero-card {
        padding: 2rem;
        padding-top: 14em;
    }

    /* En celular la foto vuelve a ocupar la tarjeta entera. El corrimiento
       del 10% en la figura está pensado para una tarjeta ancha, donde despeja
       el lado del texto; en 375px lo único que hace es comerse un borde de la
       foto. (El encuadre de la imagen ya no se desplaza tampoco en escritorio,
       así que ese `left: 0` de aquí abajo hoy repite lo que ya vale arriba;
       se deja escrito para que el bloque de móvil siga siendo legible solo.) */
    .dkrd-hero .hero-card .hero-bg-figure {
        left: 0px;
        /* En vertical el texto no va al lado sino encima, así que el hueco
           que hay que dejar es el de abajo, no el de la izquierda. */
        padding-left: 0px;
        padding-bottom: 75%;
    }
    .dkrd-hero .hero-card .hero-bg-figure img {
        left: 0px;
    }

    .dkrd-hero .hero-card .hero-info .hero-title {
        font-size: 1.1rem;
        text-align: center;
    }
    .dkrd-hero .hero-card .hero-info .hero-headline {
        font-size: 1.8rem;
        line-height: 90%;
        margin: 0;
        text-align: center;
    }
    .dkrd-hero .hero-card .hero-info .hero-description {
        font-size: 0.8rem;
        margin: 0;
        text-align: center;
    }
    .dkrd-hero .hero-card .hero-info .hero-cta-group {
        gap: 0.6rem;
        margin-top: 1.6rem;
        justify-content: center;
    }
    
    .dkrd-hero .hero-card {
    background-size: auto 55%;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content {
        padding: 0.5em 0.7em;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-ref {
    font-size: 0.65rem;}
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
    font-size: 1rem;
}
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price {
    font-size: 1rem;
}
.dkarta-ui-options .options-list .option-item {
        width: 45px;
    height: 45px;
}
.dkarta-ui-options .options-list .option-item.map-btn,
.dkarta-ui-options .options-list .option-item.call-btn {
    width: 35px;
    height: 35px;
}
.dkarta-ui-options .options-list {
    gap: 5px;
}
.dkrd-main .section-title {
    font-family: 'Blinker', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #ffffff;
    text-align: center;
    margin: 1.5rem auto 0rem;
}
.dkrd-main .dkrd-about {
    margin: 0rem auto;
}
    .dkrd-main .dkrd-about .about-wrapper {
        flex-direction: column;
    }
.dkrd-main .dkrd-about .about-wrapper .about-image-container {
    width: 88%;
    /* Alto fijo en telefono: la figura es decorativa y sin esto crecia con lo
       que hubiera dentro, empujando el texto de "Nosotros" fuera de pantalla. */
    height: 280px;
}
.dkrd-main .dkrd-about .about-wrapper .about-content {
    margin-top: -40px;
    margin-left: auto;
    padding: 2rem;
    padding-right: 1.3em;
    width: 95%;
}
    .dkrd-main .dkrd-about .about-wrapper .about-content .about-logo img {
        /* Mismo criterio que en escritorio: manda el alto, no el ancho. */
        height: 70px;
        width: auto;
        margin-top: 40px;
    }
.dkrd-main .dkrd-about .about-wrapper .about-content .about-headline {
    font-size: 1.8rem;
}
.dkrd-main .dkrd-about .about-wrapper .about-content .about-description {
    font-size: 0.8rem;
}
.dkrd-main .dkrd-about .about-wrapper .about-content .about-quote {
    font-size: 1rem;
}
.dkrd-main .dkrd-promises .promises-wrapper {
    padding: 1.4em;
}
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card {
    padding: 1rem;
}
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame {
    padding: 2rem 1rem;
}
/* En movil las dos tarjetas se apilan (una columna), asi que no tienen que
   medir lo mismo: cada una vive en su propia fila. Por eso aqui SI conserva
   un alto propio — los 450px que tenia antes de que escritorio pasara a
   igualarse con la tarjeta de al lado. Sin esto, quitar el min-height de
   escritorio le encogia la foto en el celular a 15 clientes de golpe. */
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card {
    min-height: 450px;
}
.dkrd-main .dkrd-services {
    width: 100%;
    margin: 4rem 0;
}
.dkrd-main .dkrd-contact {
    margin: 1rem 0 5em;
}
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-title {
    font-size: 2.4em;
    margin-top: 5px;
    margin-bottom: 10px;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card {
    flex-direction: column;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper {
    width: 100%;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content {
    width: 100%;
    margin-left: 0%;
    margin-top: 330px;
    padding: 1rem 2em 2em 2em;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper::after {
    /* Vertical en pantalla angosta, y con el color de la paleta: estaba
       quemado el de Insignia, así que los demás dkards cerraban en marrón. */
    background: linear-gradient(180deg,
        transparent 30%,
        color-mix(in srgb, var(--dk-servicio-dest-fondo) 72%, transparent) 62%,
        var(--dk-servicio-dest-fondo) 100%);
}
.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header {
    text-align: center;
}
.contenedor-mano {
    width: 80px;
    height: 40px;
}
.mano-swipe {
        width: 100px;
    height: 100px;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-header .qualities-label {
    font-size: 22px;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-header .promises-title {
    font-size: 2rem;
}
.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-label {
    font-family: 'Blinker', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}
.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title {
    font-size: 2.2rem;
}
.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-label {
    font-size: 1.1rem;
}
.dkrd-main .dkrd-discount .discount-wrapper .discount-header .discount-title {
    font-size: 2.2rem;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card .promise-text {
    font-size: 0.7rem;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-grid .promise-card {
    padding: 0.75rem 0.8rem;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-footer .footer-quote {
    font-size: 1rem;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-header {
    margin-bottom: 1.8rem;
}
.dkarta-nav .dkarta-nav-wrapper ul {
    gap: 3px;
}
.dkrd-main .dkrd-catalog .title-badge-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    margin-top: 3em;
}

.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn {
    gap: 5px;
    font-size: 0.8rem;
    padding: 0.25em 1em;
    border-radius: 100px;
    line-height: 107%;
}
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card {
    border-radius: 16px;
}
.dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn {
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
}
.dkrd-main .dkrd-catalog .title-badge-container .title-badge {
    font-size: 1.2rem;
}
.dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-quote-card {
    padding: 1rem 1.5em;
}
.map {
    margin-top: 1em;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
    font-size: 1rem;
    padding: 0.2em 0.8em;
}
.dkrd-main .dkrd-promises .promises-wrapper .promises-footer .btn-cta-brown {
    padding: 0.55rem 1.5rem;
    font-size: 1rem;
}
.dkrd-main .dkrd-catalog {
    padding: 2rem;
}

.dkrd-header {
    padding: 0rem 2rem;
    padding-top: 4em;
}
.dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-image {
    border-radius: 14px;
}
/* En pantalla chica bajan un poco más: la tarjeta es más angosta y el nombre
   parte en más líneas. Antes estos valores eran MAYORES que los de escritorio,
   herencia de cuando el tamaño base era 2.1rem. */
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-title {
    font-size: 1.35rem;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-title {
    font-size: 1.7rem;
}
.dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-desc {
    font-size: 0.85rem;
}

    .hero-highlight {
        padding: 1.5rem;
    }
    .highlight-content .h-icon svg {
        width: 40px;
        margin-bottom: 0.6em;
    }
    .highlight-content .h-title { font-size: 1.4em; }
    .highlight-content .h-txt { font-size: 1em; }

    .dkrd-main .dkrd-destacados .destacados-label { font-size: 1.1rem; }
    .dkrd-main .dkrd-destacados .destacados-title { font-size: 2.2rem; }
    .dkrd-main .dkrd-destacados .destacados-grid { gap: 0.45em; }

    .dkrd-hero .hero-card .hero-bg-figure img {
        width: 100%;
        /* 200% por decision del dueño (03/09/2026). La nota anterior
           argumentaba 110% para no ampliar de mas; en la practica el 110
           dejaba la foto corta dentro de la tarjeta. Si vuelve a verse solo
           el centro de las fotos en telefonos, este es el numero a bajar. */
        height: 200%;
    }
    .dkrd-main .section-title {
        margin: 1.5rem auto 1.5rem;
    }
    .dkrd-main .dkrd-cuadricula .cuadricula-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container,
    .services-container[data-serv-layout] {
        grid-template-columns: repeat(2, 1fr);
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content {
        padding: 0.9rem;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .card-image-wrapper {
        height: 220px;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card {
        min-height: auto;
        height: 300px;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content {
        margin-top: -60px;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper::after {
        /* El cierre sube al 43%: en pantalla angosta el texto empieza antes,
           y con la parada en el 48% la primera linea caia sobre la parte de
           la foto que todavia se transparenta. */
        background: linear-gradient(180deg, transparent 30%,
            color-mix(in srgb, var(--dk-servicio-dest-fondo) 99%, transparent) 43%,
            var(--dk-servicio-dest-fondo) 100%);
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
        font-size: 0.9rem;
        padding: 0.1em 0.6em;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .service-title {
        font-size: 1.25rem;
    }

    /* El del sintoma: dos columnas en telefono, no tres. */
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid {
        grid-template-columns: repeat(2, minmax(48%, 1fr));
        gap: 0.45em;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content {
        padding: 0.5em 0.7em;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
        font-size: 1rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price {
        font-size: 1rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .card-action .add-btn {
        font-size: 0.8rem;
        padding: 0.25em 1em;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
        font-size: 1rem;
        padding: 0.2em 0.8em;
    }
    .dkrd-hero .hero-card {
        padding-top: 14em;
    }
    .dkrd-hero .hero-card .hero-bg-figure {
        left: 0;
        padding-left: 0;
    }
    .highlight-content .h-icon svg {
        width: 40px;
    }
    .highlight-content .h-title {
        font-size: 1.4em;
    }
    .highlight-content .h-txt {
        font-size: 1em;
    }

    /* El formulario y el resumen flotante: menos aire adentro, que en un
       telefono el margen se lo come todo. */
    .dkard-form {
        padding: 20px;
    }
    .dkarta-resume {
        padding: 15px;
    }

        .dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .card-image-wrapper {
        width: 100%;
        height: 30vh;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
    gap: 4px;
}
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card .service-content .btn-service {
        font-size: 0.9rem;
        padding: 0.2em 0.7em;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-btn {
    font-size: 1.4rem;}
        .dkrd-main .dkrd-services .services-wrapper .services-container, .services-container[data-serv-layout] {
        grid-template-columns: repeat(2, 1fr);
    }
    .qr-mockup .mockup-content .mockup-social li a {
    width: 25px;
}

    /* EL VIDEO SI VA BORDE A BORDE en el telefono (decision del dueno): un
       reproductor con margenes desperdicia el ancho que mas falta hace. */
    .dkrd-main .dkrd-video { margin: 2.5rem 0; padding: 0; }

    /* El muro NO. Iba en la misma regla que el video y se quedo sin padding
       lateral: los logos tocaban el borde de la pantalla. 1em es el minimo
       para que se lea como un bloque y no como algo que se sale. */
    .dkrd-main .dkrd-logos { margin: 2.5rem 0; padding: 0 1em; }
    /* La separacion elegida MANDA tambien en el telefono: antes el gap y el
       margen iban fijos en 1rem aqui, asi que el deslizador de separacion no
       hacia nada en pantalla angosta —poner 0 seguia dejando 1rem—. Con la
       variable, 0 es 0 y sin elegir cae en 1rem, que es el de siempre movil. */
    .dkrd-main .dkrd-logos .logos-muro { column-count: var(--dk-columnas-movil, 2); column-gap: var(--dk-logos-gap, 1rem); }
    .dkrd-main .dkrd-logos .logos-item { margin-bottom: var(--dk-logos-gap, 1rem); padding: .3rem .4rem; }
    .dkrd-main .dkrd-video .video-title,
    .dkrd-main .dkrd-logos .logos-title { font-size: 2.1rem; }
    .dkrd-main .dkrd-logos .logos-label,
    .dkrd-main .dkrd-video .video-label { font-size: 1.2rem; }

    /* La barra del dueno en pantalla estrecha. */
    /* --- venia del corte de 480px --- */
    .dk-barra-admin { font-size: 0.78rem; padding: 0.45rem 0.7rem; }
    .dk-barra-admin-quien { max-width: 45%; }

    /* --- venia del corte de 450px --- */
    /* Los servicios, a una sola columna en pantallas pequeñas. Va el selector
       largo Y el corto: el largo gana a la regla base de .services-wrapper, y
       el `[data-serv-layout]` alcanza los repartos que el negocio elige desde
       el panel (dos, tres, uno-y-uno, destacado-ancho), que traen su propio
       grid-template-columns y si no se pisan aquí siguen partiendo la pantalla
       en dos o tres a 450px. */
    .dkrd-main .dkrd-services .services-wrapper .services-container,
    .services-container[data-serv-layout] {
        grid-template-columns: 1fr;
    }
    .btn-mostrar-todo {
        font-size: 0.9em;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content {
        padding: 0.9rem;
    }
    .dkrd-main .dkrd-destacados .destacados-wrapper {
        padding: 0;
    }
    #resume-toggle {
        bottom: 51px;
        left: 159px;
        width: 85px;
        height: 25px;
    }
    #resume-toggle:checked {
        left: -17px;
    }
    .dkarta-float-resume {
        width: 180px;
        padding: 6px 9px 10px;
    }

    /* --- venia del corte de 450px --- */
    .services-container .service-card.contratst-card[data-columnas="2"], .services-container[data-serv-layout] .service-card.contratst-card[data-columnas="2"] {
        grid-column: span 2;
    }
    .dkarta-float-resume .f-resume-total .f-resume-price-total {
    font: 600 25px / 100% Barlow;
}
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-ref {
        font-size: 0.65rem;
        font-weight: 600;
    }
   
}


@media screen and (max-width: 400px) {
    .dkrd-hero {
        width: 100%;
        padding: 1rem;
    }
    /* Por debajo de 400px la foto de portada sube de 90% a 110%: al 90 la
       figura no llegaba al borde de abajo de la tarjeta y quedaba una franja
       del fondo entre la foto y el texto. Pasarse del 100% es lo normal aquí
       —el contenedor recorta con object-fit: cover—, y el 200% del corte de
       550px enseñaba solo el centro en pantallas tan estrechas. */
    .dkrd-hero .hero-card .hero-bg-figure img {
        height: 110%;
    }
    .dkrd-main .dkrd-catalog {
        padding: 0.8rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
        font-size: 0.9rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
        font-size: 0.74em;
    }
    .dkrd-main .dkrd-about .about-wrapper .about-content {
        padding: 1rem;
        padding-right: 1em;
        /* El `padding-top` que habia aqui se retiro: el bloque de 550px ya lo
           pone con la clase repetida, que gana por especificidad tambien
           dentro de este corte. Repetirlo aqui obligaria a cambiar el numero
           en dos sitios — que es como el de arriba se quedo en 3em cuando ya
           se habia pedido otro valor. */
    }
    .dkrd-main .dkrd-promises .promises-wrapper .promises-grid {
        grid-template-columns: 1fr;
    }
    .dkarta-ui-options {
        right: 9px;
        bottom: 16px;
    }
    #dkard-form-btn .form-btn {
        height: 50px;
        width: 50px;
    }
    .dkarta-ui-options .options-list .option-item {
        width: 40px;
        height: 40px;
    }
    .dkarta-ui-options .options-list .option-item.idioma-btn {
        width: 38px;
        height: 24px;
    }
    .dkrd-main .dkrd-share {
        padding: 1.1em;
    }
    .qr-mockup figure > * {
        width: 235px;
    }
    .qr-mockup .mockup-content {
        width: 206px;
        height: 447px;
        top: 13px;
        left: 15px;
        border-radius: 24px;
    }
    .qr-mockup .mockup-content .mockup-text {
        font: 600 1.1em / 100% Barlow;
        margin: 0;
    }
    .qr-mockup .mockup-content .mockup-qr {
        width: 160px;
        height: 160px;
    }
    .dkrd-main .dkrd-discount {
        padding: 0 1.3rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card {
        padding: 0.6rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame {
        padding: 1.5rem 0.9rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-intro {
        font-family: 'Barlow', sans-serif;
        font-size: 1rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-value {
        font-size: 5.8rem;
        letter-spacing: -3px;
    }
    .dkrd-main .dkrd-gallery .gallery-title {
        font-size: 2.3rem;
    }
    .dkrd-main .dkrd-contact {
        padding: 0 0.3rem;
    }

    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-title {
        font-size: 0.9rem;
    }
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
        font-size: 0.74em;
    }

    /* Los servicios pasan a una sola columna. A este ancho, dos columnas
       dejaban tarjetas de ~150px: la foto se veia como una franja y el titulo
       salia partido en tres lineas. */
    .dkrd-main .dkrd-services .services-wrapper .services-container,
    .services-container[data-serv-layout] {
        grid-template-columns: 1fr;
    }

    /* El rotulo del QR pegaba con el codigo a este ancho. */
    .qr-mockup .mockup-content .mockup-text {
        margin-bottom: 20px;
    }

        .qr-mockup .mockup-content .mockup-icon>* {
        width: 50px;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 80%;
    margin-bottom: 2rem;
}
    .dkrd-main .dkrd-promises {
    padding: 0 1rem;
}
    .dkrd-main .dkrd-cuadricula .cuadricula-label {
    font-size: 1.1rem;
    }
        .dkrd-main .dkrd-cuadricula .cuadricula-title {
        font-size: 1.8rem;
    }
    .dkrd-main .dkrd-cuadricula .cuadricula-grid {
    gap: 0.5rem;
}
    .dkrd-main .dkrd-cuadricula .cuadricula-caja {
        padding: 1rem 0.8rem;
    }
    .dkrd-main .dkrd-cuadricula .cuadricula-caja-titulo {
    font-size: 0.95rem;
}
.dkrd-main .dkrd-cuadricula .cuadricula-caja-texto {
    font-size: 0.72rem;
    line-height: 120%;
}
    .dkrd-main .dkrd-promises .promises-wrapper .promises-header .qualities-label {
        font-size: 17px;
        margin-bottom: 10px;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-label {
    font-size: 1.1rem;
    }
        .dkrd-main .dkrd-services .services-wrapper .services-header .services-title {
        font-size: 2em;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-subtitle {
    font-size: 1rem;}
        .services-container .service-card.contratst-card[data-columnas="2"], .services-container[data-serv-layout] .service-card.contratst-card[data-columnas="2"] {
        grid-column: span 1;
    }
        .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-intro {
        font-size: 0.8rem;
    }
    .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card {
    min-height: 380px;
}
.dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-offer-card .offer-border-frame .offer-btn {
    font-size: 1.1rem;
}
    .dkrd-main .dkrd-services .services-wrapper .services-container .service-card.contratst-card .service-content .service-title {
        font-size: 1.4rem;
    }
        .dkrd-main .dkrd-discount .discount-wrapper .discount-container .discount-visual-card {
        height: 200px;
    }
    .dkrd-main .dkrd-gallery .gallery-label {
    font-size: 1.1rem;}
        .dkrd-main .dkrd-gallery .gallery-title {
        font-size: 1.8rem;
    }
    .dkrd-main .dkrd-gallery .gallery-description {
    font-size: 0.8rem;
}
.dkrd-main .dkrd-share .share-wrapper .share-title {
    font-size: 1.1rem;
}
    .dkrd-main .dkrd-share .share-wrapper .social-share-row {
        gap: 0.4rem;
    }
        .dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn {
        width: 32px;
        height: 32px;
    }
    .dkrd-main .dkrd-share .share-wrapper .social-share-row .share-icon-btn>svg {
    width: 22px;
    height: 22px;
}
 .dkarta-float-resume {
        width: 170px;
    }
    #resume-toggle {
        bottom: 51px;
        left: 149px;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-label {
    font-size: 1.2rem;
}
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-title {
        font-size: 1.9em;
    }
    .dkrd-main .dkrd-services .services-wrapper .services-header .services-subtitle {
    font-size: 0.9rem;
}
.dkrd-main .dkrd-services .services-wrapper .services-header {
    padding: 0 1.4em;
}
.dkrd-main .dkrd-preguntas .preguntas-label {
    font-size: 1.1rem;}
        .dkrd-main .dkrd-preguntas .preguntas-title {
        font-size: 2rem;
    }
    
}


@media screen and (max-width: 300px) {
        .dkrd-hero .hero-card {
        padding: 1rem;
        padding-top: 11em;
    }
    .dkrd-hero .hero-card .hero-info .hero-cta-group .cta-btn>span {
    font-size: 1.1rem;
}
    .highlight-content .h-icon svg {
        width: 30px;
    }
    .highlight-content .h-title {
        font-size: 1.2em;
    }
        .highlight-content .h-txt {
        font-size: 0.9em;
    }
        .dkrd-main .dkrd-featured .featured-wow {
        right: -7%;
    }
    .dkrd-main .dkrd-featured .featured-title {
        font-size: 2rem;
    }
        .dkrd-main .dkrd-featured .featured-text {
        font-size: 0.85rem;
    }
        .dkrd-main .dkrd-featured .featured-highlight {
        font-size: 0.9em;
    }
    .dkrd-main .dkrd-featured .featured-btn {
    padding: 0.5rem 1.6rem;
}
.dkrd-main .dkrd-notas .catalog-header .info-note-box {
    padding: 1.1rem 1.1rem;
}
.dkrd-main .dkrd-notas .catalog-header .info-note-box .note-title {
    font-size: 1.1rem}
        .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content {
        padding: 0.5em 0.5em;
    }
    .dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-etiqueta {
    font-size: 0.62rem;
}
.dkrd-main .dkrd-destacados .product-grid .product-card .card-content .product-ref {
    font-size: 0.62rem;
}
    .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-description {
        font-size: 0.64em;
    }
        .dkrd-main :is(.dkrd-catalog, .dkrd-destacados) .product-grid .product-card .card-content .product-price {
        font-size: 0.9rem;
        line-height: 110%;
    }
        .dkrd-main .dkrd-about .about-wrapper .about-content .about-logo img {
        height: 50px;
    }
        .dkrd-main .dkrd-about .about-wrapper .about-content .about-headline {
        font-size: 1.6rem;
    }
        .dkrd-main .dkrd-about .about-wrapper .about-content .about-description {
        font-size: 0.75rem;
    }
    .dkarta-resume {
    min-width: 240px;
}
.dkard-form {
    min-width: 240px;
}
.dkard-form .dk-form .f-title {
        padding: 12px;
        font: 700 13px Barlow;
    }
        .qr-mockup figure > * {
        width: 215px;
    }
        .qr-mockup .mockup-content {
        width: 188px;
        height: 408px;
        top: 12px;
        left: 14px;
        border-radius: 19px;
    }

        .contact-info .contact-item {
        gap: 10px;
    padding: 0.6em;
}
    .contact-info .contact-item .icon {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
    }
    .contact-info .contact-item .item-text b {
    font: 600 0.8em / 100% Blinker;
}
    .dkrd-main .dkrd-contact .contact-wrapper .contact-top-split .contact-info-header .contact-title {
        font-size: 2rem;
    }
    
}


/* ---------------------------------------------------------------------------
   La barra del dueño, encima de su propia página.
   ---------------------------------------------------------------------------
   Solo se pinta si el SERVIDOR dijo que quien mira puede administrar este
   dkard (ver main.js). Un visitante no la tiene ni escondida: no existe en su
   HTML. */

.dk-barra-admin {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-family: Barlow, system-ui, sans-serif;
    font-size: 0.85rem;
    color: #fff;
    /* Oscura y no del color del dkard: tiene que leerse como algo que NO es
       parte de la página, sobre cualquier paleta que el negocio haya elegido. */
    background: rgb(16 10 8 / 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.dk-barra-admin-quien {
    /* Un nombre largo se recorta en vez de empujar el botón fuera. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

.dk-barra-admin-quien strong { opacity: 1; }

.dk-barra-admin-btn {
    flex-shrink: 0;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #f2600c, #ff8a2b);
    border-radius: 99px;
}

.dk-barra-admin-btn:hover { filter: brightness(1.08); }

/* El sitio que la barra ocupa. Sin esto tapa el logo del dkard, que es lo
   primero que hay encima. */
.dk-con-barra-admin { padding-top: 42px; }

/* Y LO QUE FLOTA ARRIBA TAMBIEN SE BAJA. El padding del body solo empuja el
   contenido normal: un `position: fixed` se ancla a la ventana y se queda
   debajo de la barra. Los dos que viven pegados al borde superior son el menu
   de navegacion (top: 0) y la manita que invita a arrastrarlo (top: 6px);
   con la barra puesta, la barra los tapaba y el menu quedaba inutilizable
   justo para el dueño — la unica persona que la ve. */
.dk-con-barra-admin .dkarta-nav { top: 42px; }
.dk-con-barra-admin .contenedor-mano { top: 48px; }

/* NO SE IMPRIME. Esta página se imprime y se fotografía para el QR: una barra
   de administración en una tarjeta impresa no se puede deshacer. */
@media print {
    .dk-barra-admin { display: none !important; }
    .dk-con-barra-admin { padding-top: 0 !important; }
}


/* ==========================================================================
   ELEGIR LA COMBINACIÓN — el selector de un producto con variaciones.
   --------------------------------------------------------------------------
   UNA SOLA CAJA para las dos formas: en el teléfono es una hoja que sube desde
   abajo, y en pantalla ancha la misma caja se centra como popup. Lo único que
   cambia es dónde se ancla y qué esquinas se redondean.

   ESCRITO AL REVÉS QUE EL RESTO DE ESTA HOJA: aquí lo base es el MÓVIL y el
   escritorio va en un `min-width`, mientras el resto del archivo hace lo
   contrario. No es capricho, y conviene saber por qué antes de "arreglarlo":

     · Los `max-width` de esta hoja van de mayor a menor porque a 320px aplican
       todos a la vez y gana el último escrito (lo vigila
       MediaQueriesEnOrdenTest). Eso obliga a ponerlos todos juntos, allá
       arriba.
     · Pero un componente nuevo se escribe al final del archivo, y un `@media`
       suyo colocado allá arriba quedaría ANTES de sus propias reglas base —
       que entonces lo pisarían por orden. Las dos reglas juntas no dejan sitio
       válido para un `max-width` aquí abajo.
     · Un `min-width` no compite con ninguno de ellos: describe un tramo que
       empieza donde los otros ya no aplican. Va después de las reglas base,
       gana, y el test lo deja pasar porque no hay nada que ordenar.

   Y de paso es el orden honesto para este módulo: quien vende ropa por
   WhatsApp compra desde el teléfono.

   Se abre encima del catálogo, no en otra página, y esa es la decisión que
   sostiene todo lo demás: elegir talla no puede costar una navegación, porque
   cada navegación es una oportunidad de irse.
   ========================================================================== */
.dk-variantes {
    /* UNA SOLA PINTA PARA TODOS LOS DKARDS.
       Antes la caja tomaba --dk-header, el color de cabecera del negocio, y el
       selector salia negro en un dkard, vino en otro y azul en el tercero. Esta
       es la pantalla donde se decide la compra: mide colores, tallas y precios
       de nueve combinaciones a la vez, y para eso hace falta el mismo papel
       blanco siempre, igual que una ficha de producto en cualquier tienda.
       Lo unico que sigue siendo del negocio es el color de accion --dk-boton:
       el boton de agregar y la marca de lo elegido. */
    --dkv-fondo: #fff;
    --dkv-tinta: #14151A;
    /* Rellenos y bordes en NEGRO transparente. Sobre blanco, un blanco al 7%
       no es un relleno suave: no es nada. */
    --dkv-suave: rgba(0, 0, 0, 0.05);
    --dkv-suave-fuerte: rgba(0, 0, 0, 0.1);
    --dkv-borde: rgba(0, 0, 0, 0.14);
    --dkv-borde-fuerte: rgba(0, 0, 0, 0.4);
    /* NI SIQUIERA EL COLOR DE ACCION ES DEL NEGOCIO. Llego a serlo y se
       quito: esta ventana no se personaliza, y con el color de cada marca lo
       elegido salia rojo en un dkard, mostaza en otro y gris plomo en el que
       no habia elegido nada — justo encima de las muestras de color del
       producto, que SI son datos. Dos colores genericos y los mismos para
       todos.

       AZUL LO ELEGIDO Y VERDE LA ACCION, que no son lo mismo: el azul dice
       «esto es lo que marcaste» y el verde «con esto sigues». Con un solo
       color, la talla marcada y el boton de agregar competian.

       Los tonos 600 y 700 y no los de manual: el texto va en blanco, y sobre
       los claros se queda por debajo de 4,5:1. Asi los dos pasan de 5:1. */
    --dkv-seleccion: #2563EB;
    --dkv-accion: #15803D;

    position: fixed;
    inset: 0;
    /* Encima del visor de fotos (3100): desde el visor se puede pedir, y ese
       camino abre esta caja sobre él. */
    z-index: 3200;
    display: flex;
    /* Pegada abajo: es una hoja, y el botón queda al alcance del pulgar. */
    align-items: flex-end;
    justify-content: center;
    background: rgba(10, 8, 6, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.dk-variantes-caja {
    position: relative;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    /* 0.95rem a los lados y no 1.25. En un telefono de 375px la caja son 375
       menos el doble del relleno, y de eso la foto se lleva el 38%: a la
       descripcion le quedaban unos 200px, o sea renglones de tres palabras.
       Con 0.95 y sin el hueco que la cabecera le cedia a la ✕, la columna de
       texto pasa de ~200 a ~240px. En escritorio vuelve a 1.25 (ver el
       min-width del final): alli sobra ancho y el relleno es respiracion. */
    padding: 0.35rem 0.95rem 1.15rem;
    background: var(--dkv-fondo);
    color: var(--dkv-tinta);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
    /* Para el gesto de cerrar deslizando: el rebote al soltar sin llegar al
       umbral. Durante el arrastre lo apaga el JS, que necesita que la caja
       siga al dedo sin retraso. */
    transition: transform 0.2s ease;
    /* Que tirar de la hoja no arrastre la pagina de detras. */
    overscroll-behavior: contain;
}

/* La franja de arriba: el tirador centrado y sitio reservado para la ✕.
   Ver la nota del HTML — su razon de ser es que la cabecera deje de ceder
   2rem de ANCHO a un boton que cabe de sobra en el ALTO que ya se gasta. */
.dk-variantes-barra {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 0.15rem;
}

.dk-variantes-cerrar {
    position: absolute;
    /* Dentro de la franja de arriba, no encima de la cabecera. */
    top: 0.35rem;
    right: 0.45rem;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    color: inherit;
    background: var(--dkv-suave);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.dk-variantes-cerrar:hover { background: var(--dkv-suave-fuerte); }

/* La barra que dice "esto se puede deslizar hacia abajo". Solo en la hoja;
   en el popup de escritorio la caja no se desliza y se apaga. */
.dk-variantes-tirador {
    display: block;
    width: 36px;
    height: 4px;
    /* El margen de abajo se fue a la franja, que es quien reparte el sitio. */
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 2px;
}

.dk-variantes-cabecera {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    /* SIN HUECO PARA LA ✕: ahora la ✕ vive en la franja de arriba. En
       escritorio si lo lleva, porque alli la franja se apaga y la ✕ vuelve a
       flotar sobre esta esquina (ver el min-width del final). */
}

/* LA FOTO ES EL DATO, NO UN ADORNO. Estaba en 62px, del tamaño de un icono:
   en una pantalla donde se elige el color de una prenda, la foto es
   exactamente lo que hay que mirar, y a ese tamaño no se distinguía un rojo de
   un vino. Ahora ocupa un tercio largo de la caja y cambia al tocar un color,
   que es lo que convierte el selector en algo que se puede usar sin abrir la
   foto grande. */
.dk-variantes-foto {
    flex: 0 0 38%;
    max-width: 160px;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    background: var(--dkv-suave);
    border-radius: 12px;
    /* El cambio se ve como un cambio y no como un salto. */
    transition: opacity 0.15s ease;
}

.dk-variantes-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* LA FOTO, EN GRANDE. Un clic la abre y otro la cierra.
   ---------------------------------------------------------------------------
   Mide 160 px de lado: alcanza para saber de que color es, no para mirar el
   producto. Y es la UNICA foto de esa combinacion en toda la pagina — la
   galeria del producto no tiene la de cada variante.

   Crece en su sitio y no en una ventana aparte: abrir un visor encima de un
   modal, en un telefono, deja dos cosas que cerrar y dos formas de
   equivocarse. Aqui el mismo clic que la abre la cierra. */
.dk-variantes-foto.se-puede-ampliar {
    /* HAY QUE REACTIVAR EL CLIC A MANO. Mas arriba en este archivo hay una
       regla heredada de la plantilla original —`figure, img { pointer-events:
       none }`— que existe para que un clic sobre una foto caiga siempre en la
       tarjeta que la contiene. Su comentario ya avisa: «cualquier figura que
       SI tenga que responder al clic necesita reactivarlo». Esta es una.

       Sin esta linea el zoom parecia hecho y no lo estaba: la clase se ponia
       si se llamaba a click() desde consola —el JS despachado ignora
       pointer-events— y no pasaba nada al pulsar con el dedo. Comprobarlo por
       JS daba verde y el usuario veia que no. */
    pointer-events: auto;
    cursor: zoom-in;
}
/* LA FICHA DEL PRODUCTO, dentro del selector.
   ---------------------------------------------------------------------------
   Alto limitado y desplazamiento propio. Sin el tope, una ficha larga —de que
   esta hecho, cuanto mide, como se cuida— empuja los botones de elegir talla y
   color fuera de la pantalla, que son la razon de que este modal exista.

   El degradado de abajo es lo que dice que hay mas texto sin escribir «ver
   mas»: una barra de desplazamiento en un telefono no se ve hasta que se
   toca. Se apaga al llegar al final con `scroll-timeline` donde lo haya; donde
   no, se queda fijo y no molesta. */
.dk-variantes-ficha {
    /* CORTA A PROPOSITO. Vive entre el titulo y el precio, asi que cada linea
       de mas empuja hacia abajo el dato por el que se abrio esta caja. Tres
       lineas asoman lo suficiente para saber que hay ficha y de que va; el
       resto esta a un dedo de distancia, en su propio desplazamiento. */
    max-height: 7.5rem;
    overflow-y: auto;
    /* Aire arriba y abajo: sin el, la ficha se pega al titulo por arriba y al
       precio por abajo, y los tres se leen como un solo parrafo. */
    margin: .5rem 0 .6rem;
    padding-right: .4rem;
    color: var(--dkv-tinta);
    /* Mas pequeña que el resto: acompaña al titulo, no compite con el. */
    font-size: .8rem;
    /* 1.2 EN EL TELEFONO. Al lado de la foto la columna es angosta y el texto
       cae en renglones de tres o cuatro palabras: con 1.4 de interlineado esos
       renglones cortos quedan tan separados entre si que el parrafo se lee
       como una lista. Apretado se vuelve a leer como un parrafo, y ademas
       caben cuatro renglones en el mismo alto donde antes cabian tres.
       En escritorio vuelve a 1.4 (ver el min-width del final): alli el renglon
       es largo y necesita el aire para no perder la linea. */
    line-height: 1.2;
    opacity: .8;
    /* La barra, discreta: del color de la tinta al 25%, sobre nada. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--dkv-tinta) 25%, transparent) transparent;
    overscroll-behavior: contain;
}
.dk-variantes-ficha::-webkit-scrollbar { width: 6px; }
.dk-variantes-ficha::-webkit-scrollbar-track { background: transparent; }
.dk-variantes-ficha::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dkv-tinta) 25%, transparent);
    border-radius: 999px;
}
.dk-variantes-ficha p { margin: 0 0 .5rem; }
.dk-variantes-ficha p:last-child { margin-bottom: 0; }


.dk-variantes-datos {
    min-width: 0;
    /* BASE CERO, y no el ancho de su contenido. Sin `flex` la base es `auto`,
       o sea lo que mida el texto: con la ficha dentro, el bloque pedia mas
       sitio del que quedaba y apretaba la foto. Con base 0 se conforma con lo
       que sobra al lado de la foto, que es lo que hace falta. */
    flex: 1 1 0;
}

.dk-variantes-nombre {
    margin: 0;
    /* Un punto mas grande que antes: es el titulo de la ficha y compartia
       tamaño con el texto de al lado. */
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.dk-variantes-precio {
    margin: 0.3rem 0 0;
    /* EL DATO POR EL QUE SE ABRE ESTE MODAL. Iba a 1.15rem y del color del
       texto: del mismo tamaño que el nombre del producto y del mismo color que
       la referencia, o sea que no se distinguia de nada. Al elegir una talla
       lo que se quiere saber es cuanto cuesta ESA. */
    /* 1.35rem en el telefono y 1.6 en escritorio (ver el min-width del
       final). A 1.6 en una pantalla estrecha el precio se comia el renglon
       —"$ 1.250.000 COP" no cabia— y en vez de destacar, descuadraba. */
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    /* En el azul del modal, que es el mismo que marca lo elegido. No sale de
       la paleta del negocio a proposito: esta caja es blanca en todos los
       dkards —esa fue la decision— y un color de marca claro se perderia
       encima. Sobre blanco, este azul tiene contraste de sobra. */
    color: var(--dkv-seleccion);
}

/* El precio de antes, tachado y delante del vigente. */
.dk-variantes-precio .dk-variantes-antes {
    margin-right: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 0.65;
}

.dk-variantes-ref {
    margin: 0.15rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

/* --- Los ejes ---------------------------------------------------------- */
.dk-variantes-eje + .dk-variantes-eje { margin-top: 1rem; }

.dk-variantes-eje-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* El valor elegido, en texto normal al lado de la etiqueta: es lo que hace
   que una muestra de color diga cómo se llama sin tener que pasar el ratón,
   que en un teléfono no existe. */
.dk-variantes-eje-label b {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
}

.dk-variantes-valores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* BOTONES Y NO UN DESPLEGABLE. Con seis valores o menos, un desplegable
   esconde las opciones y cuesta un toque de más para ver lo que ya cabía en
   pantalla. De ocho en adelante esto sigue funcionando: la fila envuelve. */
.dk-variantes-valor {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: inherit;
    background: var(--dkv-suave);
    border: 1.5px solid var(--dkv-borde);
    border-radius: 9px;
    cursor: pointer;
}

.dk-variantes-valor:hover { border-color: var(--dkv-borde-fuerte); }

.dk-variantes-valor.es-activo {
    font-weight: 700;
    color: #fff;
    background: var(--dkv-seleccion);
    border-color: var(--dkv-seleccion);
}

/* AGOTADA O APAGADA SE VE, NO DESAPARECE.
   Si la talla L en rojo se esfuma, quien la buscaba concluye que el producto
   ya no existe y se va. Tachada, sabe que existe y pregunta. */
.dk-variantes-valor.es-imposible {
    text-decoration: line-through;
    opacity: 0.4;
    cursor: not-allowed;
}

/* Muestras de color: el mismo botón, redondo y con el color dentro. */
.dk-variantes-valor--color {
    position: relative;
    width: 44px;
    min-width: 0;
    padding: 0;
    background-clip: padding-box;
    border-radius: 50%;
    /* El borde queda como aro de selección; el color va en background,
       puesto desde JS con el hex que guardó el negocio. */
    border-color: var(--dkv-borde);
}

.dk-variantes-valor--color.es-activo {
    /* Aro blanco entre la muestra y el halo de color: sin el, un valor blanco
       o muy claro se funde con el halo y no se ve cual esta elegido. */
    border-color: var(--dkv-fondo);
    box-shadow: 0 0 0 3px var(--dkv-seleccion);
}

/* La raya sobre la muestra: en un color no se puede tachar el texto porque no
   hay texto. */
.dk-variantes-valor--color.es-imposible::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: linear-gradient(to top right,
        transparent 46%, rgba(0, 0, 0, 0.75) 46%,
        rgba(0, 0, 0, 0.75) 54%, transparent 54%);
}

.dk-variantes-aviso {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0.75;
}

/* --- El pie ------------------------------------------------------------ */
/* EL BOTÓN, SIEMPRE A LA VISTA. Con seis colores y cinco tallas la caja se
   llena y "Añadir" se iba fuera de la pantalla justo cuando ya se había
   elegido todo. En escritorio no hace falta y vuelve a ser estático. */
.dk-variantes-pie {
    position: sticky;
    bottom: 0;
    margin-top: 1rem;
    padding: 1rem 0 0.25rem;
    background: var(--dkv-fondo);
    border-top: 1px solid var(--dkv-borde);
}

/* LO QUE PASA POR DEBAJO SE DESVANECE, no se corta.
   ---------------------------------------------------------------------------
   El pie va pegado abajo y con fondo solido, asi que las muestras de color
   pasan por detras al desplazarse. Cortadas a filo contra la linea del borde
   parecen rotas —«el color se desborda y queda cortado detras de la
   cantidad»—; con este degradado encima se leen como lo que son: algo que
   sigue arriba.

   Va en un ::before del propio pie y no en el contenedor: asi acompaña al pie
   pegado abajo sin que nadie tenga que calcular su alto. */
.dk-variantes-pie::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.6rem;
    background: linear-gradient(to top, var(--dkv-fondo), transparent);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   SOLO LA FICHA: la misma caja, sin el sitio detras
   ---------------------------------------------------------------------------
   Lo enciende main.js cuando la pagina se abre con `?ficha=<id>` desde el
   panel. La pagina se carga entera —el modal necesita sus datos, sus colores
   y su idioma— y despues se apaga todo lo demas.

   Con `visibility` y no con `display`: apagar por display obligaria a saber
   DONDE cuelga el modal en el arbol para no apagarlo con sus padres. Asi se
   apaga todo y se vuelve a encender el modal y sus hijos, que es una regla
   que no se rompe el dia que alguien mueva la caja de sitio. */
body.dk-solo-ficha * { visibility: hidden; }
body.dk-solo-ficha #dk-variantes,
body.dk-solo-ficha #dk-variantes * { visibility: visible; }

body.dk-solo-ficha {
    overflow: hidden;
    background: transparent;
}

body.dk-solo-ficha #dk-variantes {
    /* Sin el velo oscuro: aqui no hay nada detras que velar. */
    background: transparent;
    align-items: stretch;
}

body.dk-solo-ficha .dk-variantes-caja {
    /* Lo que mida la ficha, con el marco como techo. Estirarla al 100% dejaba
       un palmo de blanco debajo del boton cuando el producto tiene dos ejes
       cortos, y eso se lee como que falta algo. */
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Y la ✕ sobra: quien cierra es el panel, con su propio boton. Dejarla
   invitaria a cerrar la ficha y quedarse mirando un marco en blanco. */
body.dk-solo-ficha .dk-variantes-cerrar { display: none; }

.dk-variantes-cantidad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.dk-variantes-cantidad-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.6;
}

.dk-variantes-stepper {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid var(--dkv-borde);
    border-radius: 9px;
}

.dk-variantes-stepper button {
    width: 44px;
    height: 40px;
    font-family: inherit;
    font-size: 1.1rem;
    color: inherit;
    background: var(--dkv-suave);
    border: 0;
    cursor: pointer;
}

.dk-variantes-stepper button:hover { background: var(--dkv-suave-fuerte); }

.dk-variantes-stepper span {
    min-width: 46px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

/* EL TOTAL VA EN EL BOTÓN. Que diga "Agregar · $59.900" es lo que evita la
   duda de qué se está agregando justo en el momento de agregarlo. */
.dk-variantes-agregar {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--dkv-accion);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.dk-variantes-agregar:hover:not(:disabled) { filter: brightness(1.1); }

.dk-variantes-agregar:disabled {
    color: var(--dkv-tinta);
    background: var(--dkv-suave-fuerte);
    cursor: default;
    opacity: 0.7;
}

body.dk-variantes-abierto { overflow: hidden; }

/* NO HAY BLOQUE DE TEMA CLARO, Y ES A PROPOSITO.
   Aqui vivian veinte reglas [data-tema="claro"] que invertian las
   transparencias blancas de la caja oscura. Ya no hacen falta: la caja es
   blanca en los dos temas —ver las variables --dkv-* del principio de este
   bloque— porque esta pantalla decide una compra y tiene que verse igual en
   todos los dkards. El unico color del negocio que queda es --dk-boton, que
   vale sobre blanco en los dos temas. */

/* --- Popup de escritorio -----------------------------------------------
   Ver la nota grande del encabezado de este bloque: es un `min-width` a
   propósito, y va DESPUÉS de las reglas base porque tiene que ganarles. */
@media (min-width: 641px) {
    .dk-variantes {
        align-items: center;
        padding: 1rem;
    }

    .dk-variantes-caja {
        max-width: 430px;
        max-height: 86vh;
        /* Vuelve el relleno holgado: aqui el ancho sobra y lo que se gana
           apretando no es sitio para el texto, es una caja apretada. */
        padding: 1.35rem 1.25rem 1.15rem;
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }

    /* La caja centrada no se desliza: la barra no significaría nada. */
    .dk-variantes-tirador { display: none; }

    /* Y sin tirador que colocar, la franja no reserva nada: la ✕ vuelve a
       flotar sobre la esquina de la caja y la cabecera vuelve a cederle el
       hueco, que aqui no le hace falta a nadie. */
    .dk-variantes-barra { min-height: 0; margin: 0; }
    .dk-variantes-cerrar { top: 0.7rem; right: 0.7rem; }
    .dk-variantes-cabecera { padding-right: 2rem; }

    /* Renglon largo, mas aire entre lineas. Ver la nota de .dk-variantes-ficha. */
    .dk-variantes-ficha { line-height: 1.4; }

    .dk-variantes-precio { font-size: 1.6rem; }

    .dk-variantes-pie {
        position: static;
        margin-top: 1.2rem;
        padding: 1rem 0 0;
        background: none;
    }
}

/* NO SE IMPRIME: es una caja emergente, no contenido de la página. */
@media print {
    .dk-variantes { display: none !important; }
}

/* LA COMBINACIÓN EN LA FILA DEL COTIZADOR: "Color: Rojo · Talla: M".
   Va DENTRO del nombre y en bloque, no como hermano suyo: la fila es un flex
   de cuatro columnas (borrar, nombre, cantidad, precio) y un quinto hijo se
   habría metido entre el nombre y la cantidad. */
.dkarta-resume .resume-items .item .item-name .item-variante {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0;
    /* El nombre del producto va en `capitalize`; las etiquetas de la
       combinación las escribió el negocio y se respetan tal cual. */
    text-transform: none;
    opacity: 0.72;
}


/* ==========================================================================
   SELECTOR DE INDICATIVO DE PAÍS

   Va al final del archivo y con `min-width`, igual que .dk-variantes y por la
   misma razón: los bloques de `max-width` de esta hoja van de mayor a menor y
   viven todos juntos más arriba (lo vigila MediaQueriesEnOrdenTest); uno
   escrito aquí abajo no tendría sitio válido. Un `min-width` describe un tramo
   que empieza donde los otros ya no llegan, va después de las reglas base y
   gana sin competir con nadie.

   Y APILADO ANTES QUE EN FILA, a propósito. En 320px —que es exactamente el
   teléfono desde el que se pide por WhatsApp— un desplegable con
   "+502 Guatemala" al lado del número deja el campo del número en nada.
   Apilados, los dos se leen enteros.
   ========================================================================== */
.dk-tel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: 2px;
}

/* min-width: 0 y no solo el flex-basis: sin él, un hijo flex se niega a
   encogerse por debajo de su contenido y la fila desborda la caja. */
.dk-tel > .dk-tel-pais,
.dk-tel > input {
    flex: 1 1 100%;
    min-width: 0;
}

/* El margen ya lo pone .dk-tel; repetido en el campo, lo descuadra 2px
   respecto del desplegable. Con el id, que es lo que le da el margen. */
.dk-tel > #resume-telefono,
.dk-tel > #lead-telefono {
    margin-top: 0;
}

/* El rótulo existe para el lector de pantalla: un <select> sin nombre se
   anuncia como "cuadro combinado" y no dice de qué. No se muestra porque al
   lado ya está el rótulo del campo ("Su WhatsApp:"), y repetirlo en pantalla
   sería ruido; no se usa display:none porque eso también lo esconde del
   lector, que es justo para quien está. */
.dk-tel-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* El desplegable del cotizador va sobre el panel oscuro, así que copia el
   dibujo de #resume-telefono en vez de quedarse con el blanco del sistema.
   Las <option> SÍ van en oscuro sobre claro: la lista desplegada la pinta el
   sistema operativo con su propio fondo, y un texto blanco ahí es invisible. */
#resume-tel-pais {
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid #fff5;
    font: 16px / 110% Barlow;
    background: #fff2;
    color: #fff;
}

#resume-tel-pais option { color: #14151A; background: #fff; }

/* 480 y no 400. Medido en la pagina real: en un telefono de 430px el panel
   del cotizador mide unos 337px por dentro, y en fila el desplegable se queda
   con 162 — lo justo para que "+502 Guatemala" salga cortado. Por debajo de
   este corte los dos van apilados, que es feo pero legible entero; el
   indicativo va PRIMERO en el texto de cada opcion para que, cuando si haya
   que cortar, lo que sobreviva sea el "+502". */
@media (min-width: 480px) {
    /* En fila: el desplegable ocupa lo suyo y el número se queda con el resto.
       El máximo evita que un país de nombre largo se coma el campo. */
    .dk-tel > .dk-tel-pais {
        flex: 0 1 auto;
        max-width: 48%;
    }

    .dk-tel > input {
        flex: 1 1 8em;
    }
}