/* =============================================================================
 * REDISEÑO 2026 — hoja base
 *
 * Traduce el prototipo de Claude Design (home1) a CSS real. Se carga LA ULTIMA
 * en el head, despues de carrito.css, para poder ganarle a las hojas viejas
 * sin tener que tocarlas.
 *
 * Dos partes bien separadas:
 *
 *   1. TIPOGRAFIA Y PALETA GLOBAL. Afecta todo el sitio, cabecera y pie
 *      incluidos. Es lo unico que el cliente pidio cambiar del header y del
 *      footer: la estructura y las funciones (login, registro, carrito,
 *      megamenu, buscador) no se tocan.
 *
 *   2. BLOQUES NUEVOS DE LA PORTADA Y DEL DETALLE, con prefijo .rd-. Son
 *      marcado nuevo, asi que aqui no hace falta pelear especificidad.
 *
 * El !important solo aparece en font-family y en un punado de colores de la
 * cabecera. Las hojas viejas declaran la fuente en catorce sitios distintos y
 * varias con !important; sin el, la mitad del sitio se quedaria en Brandon.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 0. LAS DOS FUENTES, Y EL RELEVO DE LAS VIEJAS
 *
 * Karla y Newsreader van servidas desde el propio dominio (assets/fonts/
 * rediseno) y no desde Google: una peticion menos a un tercero y una cosa
 * menos que se pueda caer.
 *
 * El relevo de las familias viejas NO se hace redeclarando @font-face con su
 * mismo nombre: se probó y el navegador no lo aplica. Cuando dos @font-face
 * comparten familia no se pisan, se suman como dos variantes de la misma, y
 * Chrome se queda con la primera que encaja, que es la de Brandon. Medido en
 * QA: el texto seguía saliendo en Brandon con el relevo puesto.
 *
 * Se hace abajo, en el bloque 1, con una regla de barrido.
 * -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/rediseno/karla-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/rediseno/karla-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/rediseno/newsreader-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/rediseno/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Tinta */
    --rd-ink: #3E2A20;
    --rd-ink-2: #6B5346;
    --rd-ink-3: #8A7466;
    --rd-ink-4: #A08D80;

    /* Fondos */
    --rd-bg: #F3EAE1;
    --rd-bg-soft: #FBF6F1;
    --rd-bg-warm: #F7E9E2;
    --rd-bg-warm-2: #F4EBE3;
    --rd-white: #FFFFFF;

    /* Filetes */
    --rd-line: #EFE3D9;
    --rd-line-2: #E4D8CE;
    --rd-line-3: #D8BCAE;

    /* Acento */
    --rd-accent: #B4462F;
    --rd-accent-dark: #8E3522;
    --rd-accent-line: #EFC9BB;
    --rd-accent-dot: #EFA48D;

    /* Apoyos */
    --rd-gold: #E9A93A;
    --rd-green: #59B36B;
    --rd-brown: #8B5E34;

    --rd-serif: 'Newsreader', Georgia, serif;
    --rd-sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --rd-gutter: 48px;
}

/* -----------------------------------------------------------------------------
 * 1. TIPOGRAFIA GLOBAL
 *
 * Las hojas viejas usan cuatro familias: brandon_grotesque_regularRg para el
 * cuerpo, brandon_grotesquebold para lo destacado, y mellifret y playlist para
 * los titulos con caracter. El rediseno solo trae dos: Karla para todo el
 * cuerpo y Newsreader para los titulos. El mapeo es ese.
 * -------------------------------------------------------------------------- */

/*
 * Barrido: TODO lo que no sea un icono pasa a Karla.
 *
 * La alternativa era perseguir las catorce reglas que nombran Brandon,
 * Mellifret y Playlist entre main.min.css, index.css y etapa2.css. Se hizo, y
 * el pie de pagina se quedaba igual: hay reglas como `footer ul li a` que
 * ganan a cualquier lista de clases razonable.
 *
 * El barrido se escribe con la MINIMA especificidad posible -0,0,1- y las
 * excepciones (titulares e iconos) se declaran despues con una clase o un
 * elemento mas. El primer intento excluia los iconos con `:not()` dentro del
 * propio barrido y salio al reves: cada `:not()` suma la especificidad de lo
 * que lleva dentro, la regla acabo en 0,5,1 y se comio hasta los titulares
 * serif. Medido en QA: toda la portada salia en Karla.
 */
/*
 * Las pantallas que YA tenian su propio rediseno quedan fuera del barrido.
 *
 * El carrito (.car-carrito), la landing corporativa (.corp) y la pagina de
 * gracias (.dsp-*) se entregaron antes con Jost, Inter y Fraunces, y la
 * clienta las aprobo asi. El barrido les pisaba la fuente y los rotulos del
 * carrito -"TU PEDIDO", "ENTREGA"- salian en serif con mucho espaciado. Lo
 * reporto ella el 2026-09-10.
 *
 * La exclusion va dentro de :where() porque :where() NO suma especificidad:
 * el selector entero sigue valiendo 0,0,1 y las excepciones de mas abajo
 * -titulares serif, iconos- le siguen ganando con un elemento mas. Con un
 * :not() normal, cada argumento habria sumado y la regla se habria comido
 * hasta los titulares, que es justo el error que ya se cometio una vez.
 */
body,
body :not(:where(
    .car-carrito, .car-carrito *,
    .corp, .corp *,
    [class^="dsp-"], [class^="dsp-"] *,
    [class^="icon-"], [class*=" icon-"],
    .fa, .fas, .far, .fab, .glyphicon
)) {
    font-family: var(--rd-sans) !important;
}

.font-brandonB,
b, strong {
    font-weight: 700;
}

/* Los titulos con caracter pasan a la serif del rediseno. */
/*
 * Van con `body` delante a proposito: el barrido de arriba es `body *` y
 * lleva !important, asi que un `h1` a secas empataria en especificidad y
 * ganaria el que se declarara despues. Con `body h1` no hay empate.
 */
body :is(h1, h2, h3, .h1, .h2, .h3, .font-mellifret, .font-playlist,
         .title-products-index, .title-filter):not(:where(
    .car-carrito, .car-carrito *,
    .corp, .corp *,
    [class^="dsp-"], [class^="dsp-"] *
)) {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    letter-spacing: -.01em;
}

/*
 * Los iconos quedan fuera del barrido por la lista de :where() de arriba, asi
 * que conservan la familia de simbolos que les da su propia hoja. Aqui solo se
 * repite el icomoon de los pseudoelementos, que el barrido no toca pero que
 * alguna hoja vieja declara con una especificidad rara.
 */
body [class^="icon-"]:before,
body [class*=" icon-"]:before {
    font-family: 'icomoon' !important;
}

body {
    background: var(--rd-bg);
    color: var(--rd-ink);
}

/* -----------------------------------------------------------------------------
 * 2. PALETA DE CABECERA Y PIE
 *
 * Misma estructura, colores del rediseno. Sin esto la cabecera se queda con su
 * blanco y su naranja viejos y choca con el crema del cuerpo nuevo.
 * -------------------------------------------------------------------------- */

header .sct-barrita,
.sct-barrita,
#barrita,
.barrita {
    background: var(--rd-ink) !important;
    color: var(--rd-bg-warm) !important;
    font-family: var(--rd-sans) !important;
    font-size: 13.5px;
    letter-spacing: .01em;
}
.sct-barrita a,
#barrita a,
.barrita a {
    color: var(--rd-bg-warm) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* La cabecera del sitio. El `header` a secas es necesario -en las paginas
   normales la cabecera es un <header> sin clase ni id-, pero alcanzaba
   TAMBIEN a los <header> de dentro del carrito: los rotulos de paso
   («1 TU PEDIDO», «4 FORMA DE PAGO») son <header class="car-paso-cab">, y les
   pintaba encima una banda rosada que el diseno aprobado no tiene. Se excluyen
   por clase en vez de bajar el selector porque son los unicos <header> que hay
   fuera de la cabecera, comprobado pagina por pagina. */
header:not(.car-paso-cab),
.sct-header,
.header-index {
    background: var(--rd-bg-warm);
}

/* Menu de categorias: mismas ocho entradas, tipografia y color nuevos. */
.megamenu > li > a,
.nav-categorias a,
.sct-menu a {
    font-family: var(--rd-sans) !important;
    letter-spacing: .06em;
    color: var(--rd-ink);
}
.megamenu > li > a:hover,
.nav-categorias a:hover {
    color: var(--rd-accent);
}

a {
    color: var(--rd-accent);
}
a:hover, a:focus {
    color: var(--rd-accent-dark);
}
::selection {
    background: #F6D9CE;
}

footer,
.sct-footer,
#footer {
    background: var(--rd-bg-warm);
    color: var(--rd-ink);
    font-family: var(--rd-sans) !important;
}
footer a,
.sct-footer a {
    color: var(--rd-ink);
}
footer a:hover,
.sct-footer a:hover {
    color: var(--rd-accent);
}

/* -----------------------------------------------------------------------------
 * 3. UTILES DEL REDISENO
 * -------------------------------------------------------------------------- */

.rd-wrap {
    padding-left: var(--rd-gutter);
    padding-right: var(--rd-gutter);
}

.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 15px 30px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    text-decoration: none;
}
.rd-btn--primary {
    background: var(--rd-accent);
    color: #fff;
}
.rd-btn--primary:hover,
.rd-btn--primary:focus {
    background: var(--rd-accent-dark);
    color: #fff;
}
.rd-btn--ghost {
    background: transparent;
    color: var(--rd-ink);
    border: 1px solid var(--rd-line-3);
    padding: 15px 26px;
    font-weight: 500;
}
.rd-btn--ghost:hover {
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
}
.rd-btn--ink {
    background: var(--rd-ink);
    color: #fff;
    padding: 14px 28px;
    font-size: 14px;
}
.rd-btn--ink:hover {
    background: #2C1D16;
    color: #fff;
}

.rd-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--rd-accent);
}

.rd-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rd-ink-4);
    margin-bottom: 7px;
}

.rd-field {
    width: 100%;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    color: var(--rd-ink);
    background: var(--rd-bg-soft);
}

.rd-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 20px;
}
.rd-head h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 34px;
    margin: 0;
    letter-spacing: -.01em;
}
.rd-head a {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 4. PORTADA — HERO
 * -------------------------------------------------------------------------- */

.rd-hero {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    background: var(--rd-bg-warm);
}
.rd-hero__text {
    padding: 84px 64px 84px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rd-hero__text .rd-kicker {
    margin-bottom: 22px;
}
.rd-hero h1 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 64px;
    line-height: 1.04;
    margin: 0 0 22px;
    letter-spacing: -.02em;
    text-wrap: pretty;
}
.rd-hero p {
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--rd-ink-2);
    margin: 0 0 34px;
    max-width: 430px;
    text-wrap: pretty;
}
.rd-hero__cta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.rd-hero__notes {
    display: flex;
    gap: 26px;
    margin-top: 30px;
    font-size: 13.5px;
    color: var(--rd-ink-3);
    flex-wrap: wrap;
}
.rd-hero__media {
    position: relative;
    /*
     * 640 y no 560: la clienta pidio el banner "un poquito mas alto" (punto 1
     * de Diseño WEB.docx). Sube 80px, que es lo que hacia falta para que la
     * foto respire sin empujar el resto de la portada fuera de la primera
     * pantalla en un portatil de 1440x900.
     */
    min-height: 640px;
    overflow: hidden;
}
.rd-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------------
 * HERO DE SOLO FOTO
 *
 * Los banners que sube la clienta YA traen dentro su titular, su bajada y su
 * boton. El hero de dos columnas los partia por la mitad -texto la izquierda,
 * foto recortada la derecha- y el titular dibujado se iba por el borde, que es
 * justo lo que reporto: subio la foto y el texto seguia ahi.
 *
 * Marcando "Hero · solo la foto" en el panel, el hero deja de ser una rejilla
 * de dos y pasa a ser la imagen entera.
 *
 * El object-fit vuelve a su valor inicial A PROPOSITO. La regla de arriba
 * recorta con `cover` para rellenar una columna de alto fijo; aqui no hay alto
 * que rellenar y recortar significaria comerse justo el texto que el banner
 * trae dibujado. La imagen manda su propia proporcion.
 * -------------------------------------------------------------------------- */
.rd-hero--solo-foto {
    display: block;
    background: var(--rd-bg-warm);
}
.rd-hero--solo-foto .rd-hero__media {
    position: relative;
    min-height: 0;
    overflow: hidden;
}
/* Cuando la foto viene de "Banners de la pagina" llega envuelta en un <a> -el
   que lleva el enlace y la medicion de clics- y en un <picture>. Los dos son
   ELEMENTOS EN LINEA: dejados asi, el width:100% de la imagen se mide contra
   una caja que se encoge con su contenido, y ademas la linea de texto anade
   por debajo el hueco del trazo descendente. Se pasan a bloque. */
.rd-hero--solo-foto .rd-hero__media > a,
.rd-hero--solo-foto .rd-hero__media picture {
    display: block;
    width: 100%;
}
.rd-hero--solo-foto .rd-hero__media img {
    width: 100%;
    height: auto;
    object-fit: initial;
}
/* Sin texto encima no hay nada que hacer legible: el velo solo ensuciaria la
   foto. Se apaga aqui tambien por si la casilla del velo quedo marcada. */
.rd-hero--solo-foto .rd-hero__media:after {
    display: none;
}

/* -----------------------------------------------------------------------------
 * 5. PORTADA — BUSCADOR EN TRES RESPUESTAS
 *
 * Es el filtro que ya existia (ocasion / destinatario / rango de precio), con
 * la ropa nueva. El formulario sigue apuntando al mismo sitio.
 * -------------------------------------------------------------------------- */

.rd-finder {
    padding: 0 var(--rd-gutter);
    /*
     * EL BUSCADOR YA NO SE MONTA SOBRE EL BANNER.
     *
     * Aqui habia -38px: la caja subia y tapaba los ultimos 38px de la foto. La
     * clienta lo reporto en el punto 3 de Diseño WEB.docx -"que no tape el
     * banner principal"-, y con la sombra que lleva la caja el solape se notaba
     * mucho.
     *
     * En movil ya se habia anulado por el mismo motivo (ver el bloque "EL
     * BUSCADOR NO SE COME EL BANNER" del final de la hoja); ahora vale para
     * todos los tamaños. Se deja un respiro de 28px en vez de pegarlo al borde.
     */
    margin-top: 28px;
    position: relative;
    z-index: 5;
}
.rd-finder__box {
    background: var(--rd-white);
    border: 1px solid var(--rd-line);
    border-radius: 18px;
    padding: 22px 26px;
    box-shadow: 0 18px 44px rgba(62, 42, 32, .1);
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr auto;
    gap: 18px;
    align-items: center;
}
.rd-finder__title {
    padding-right: 22px;
    border-right: 1px solid var(--rd-line);
}
.rd-finder__title strong {
    display: block;
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
}
.rd-finder__title span {
    display: block;
    font-size: 12px;
    color: var(--rd-ink-4);
    margin-top: 3px;
}
/*
 * Las hojas viejas ponen `label { position:absolute }` y `select { display:flex }`
 * para su propio buscador. Sin devolverlos a su sitio, las tres preguntas se
 * amontonan encima del titulo. El min-width:0 es para que una opcion larga no
 * infle la columna: sin el, la reticula se pasa del ancho y el boton se queda
 * en cero.
 */
.rd-finder__box > * {
    min-width: 0;
}
.rd-finder__box label {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
.rd-finder__box select.rd-field {
    display: block;
    width: 100%;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A7466' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.rd-finder__box .rd-btn {
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
 * 6. PORTADA — VENTAJAS
 * -------------------------------------------------------------------------- */

/*
 * LOS SELLOS VAN EN LA BARRA MARRON.
 *
 * Lo pidio la clienta al ver la portada: "creeria que los sellos de confianza
 * pueden verse bien en esta barrita marron, si puedes lo pruebas porfa",
 * señalando la de "Como llega tu sorpresa".
 *
 * Funciona porque los iconos que ella subio son marron -#6B4423- pero van
 * dentro de un DISCO BLANCO: el disco se queda blanco sobre el marron y el
 * dibujo se sigue leyendo igual. Lo unico que hay que aclarar es el texto.
 *
 * Se usa el mismo marron que .rd-steps -var(--rd-ink)- y no uno nuevo, para
 * que las dos barras se lean como la misma familia y no como dos marrones que
 * no acaban de casar.
 */
.rd-perks {
    padding: 54px 0 0;
}
.rd-perks__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px;
    background: var(--rd-ink);
    color: var(--rd-bg-warm);
    padding: 52px var(--rd-gutter);
}
/*
 * El titular y la bajada se aclaran. Van con el mismo color que usa la barra
 * de los pasos, que es la que ella señalo.
 */
.rd-perks__grid .rd-perk strong,
.rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
    color: var(--rd-bg-warm);
}

/* --------------------------------------------------------------------------
   SELLO GRANDE: EL ICONO ARRIBA, NO AL COSTADO

   Hasta el 14/09/2026 el icono iba a la izquierda del texto. Con cuatro
   columnas cada celda mide unos 300px, asi que el ANCHO era el techo del
   dibujo: no podia crecer sin comerse la linea de texto. Y los iconos que
   mando la clienta llevan texto dentro -«20 AÑOS», «FRESCO 100 % NATURAL»-,
   que a ese tamaño no se leia.

   Poniendolo encima y centrado, el limite deja de ser el ancho de la celda y
   el dibujo sube a 66px dentro de un disco de 112. La franja pasa de 116 a
   unos 230px de alto: es lo que cuesta, y se decidio asumirlo.
   -------------------------------------------------------------------------- */
.rd-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    min-width: 0;
}
/* EL SELECTOR LLEVA DOS CLASES A PROPOSITO.

   Mas abajo hay `.rd-perk span { display: block }` para la bajada, y el disco
   TAMBIEN es un <span>: con `.rd-perk__icon` a secas -una clase- perdia la
   especificidad contra `.rd-perk span` -clase + etiqueta- y el disco se
   quedaba en block. Con display:block el `align-items:center` no hace nada,
   asi que el dibujo se pegaba arriba a la izquierda en vez de centrarse.

   Venia de antes: con el disco de 56 y el icono de 26 se notaba poco, pero
   estaba descentrado igual. Al subir a 112 quedo a la vista. */
.rd-perk > .rd-perk__icon {
    width: 112px;
    height: 112px;
    flex: none;
    border-radius: 50%;
    background: var(--rd-white);
    border: 1px solid var(--rd-line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Los 26px son la medida de los iconos DE RESPALDO, los cuatro trazos que
   dibuja index.php cuando la fila no tiene imagen: estan hechos sobre un
   viewBox de 24 y a ese tamaño se leen bien. */
.rd-perk__icon svg {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

/* Los que sube la clienta desde el panel se llevan el disco entero: 66 de 112,
   que deja aire suficiente para que el borde no toque el trazo. Es el tamaño
   en el que se lee el texto que llevan dentro. */
.rd-perk__icon img {
    width: 66px;
    height: 66px;
    object-fit: contain;
    display: block;
}
/* El titulo pasa a la serif de la portada -la misma variable que usan el heroe
   y los demas titulares-, para que la franja no quede con una tipografia que
   no sale en ninguna otra parte de la pagina.

   El `!important` no es por gusto: arriba de esta misma hoja hay una regla
   global -`body :not(:where(...))`- que impone `--rd-sans` con !important a
   todo el documento. Sin repetirlo aqui, el titulo salia en Karla. Es el mismo
   apaño que ya usan los otros dos titulares serif del archivo. */
.rd-perk strong {
    display: block;
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    font-weight: 500;
    color: var(--rd-ink);
    line-height: 1.25;
    letter-spacing: -.005em;
    margin-bottom: 7px;
}
.rd-perk span {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--rd-ink-2);
    text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
 * 8 bis. PORTADA — PASTILLAS DE CATEGORIA EN "LOS MAS REGALADOS"
 *
 * La activa va en marron LLENO y las demas en crema con filete: es lo que hace
 * que se lea de un vistazo cual esta puesta, que es donde fallan casi todos
 * estos filtros. El numero de al lado es cuantos productos tiene ese catalogo.
 *
 * En movil la fila se arrastra de lado y ninguna pastilla se parte en dos
 * lineas, que es justo el defecto que la clienta reporto en el menu con
 * "REGALOS CORPORATIVOS".
 * -------------------------------------------------------------------------- */

.rd-pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rd-line-2, #E4D8CE);
}
.rd-pastilla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    background: var(--rd-bg-soft, #FBF6F1);
    color: var(--rd-ink-2, #6B5346);
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.rd-pastilla:hover {
    border-color: var(--rd-brown, #8B5E34);
    color: var(--rd-ink, #3E2A20);
}
.rd-pastilla.is-activa {
    background: var(--rd-brown, #8B5E34);
    border-color: var(--rd-brown, #8B5E34);
    color: #fff;
}
.rd-pastilla__n {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: #EFE5DB;
    color: var(--rd-ink-3, #8A7466);
}
.rd-pastilla.is-activa .rd-pastilla__n {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
/* Mientras llegan las tarjetas, la rejilla se atenua en vez de dar un salto. */
.rd-pastillas--cargando + #products_container,
.rd-pastillas--cargando ~ #rd-productos-filtrado {
    opacity: .45;
    transition: opacity .15s ease;
}
.rd-pastillas__pie {
    margin: 6px 0 0;
    text-align: center;
}
.rd-pastillas__pie a {
    font-size: 14.5px;
    font-weight: 600;
}
.rd-pastillas__vacio {
    width: 100%;
    border: 1px dashed var(--rd-line-2, #E4D8CE);
    border-radius: 16px;
    padding: 46px 24px;
    text-align: center;
    color: var(--rd-ink-3, #8A7466);
}

/* -----------------------------------------------------------------------------
 * 6 bis. PORTADA — DESCUBRE NUESTROS CATALOGOS
 *
 * Punto 14 de Diseño WEB.docx. La referencia que mando la clienta -una captura
 * de enviaflores.com- tiene tres rasgos que el texto no menciona y que son los
 * que le dan el aire: la foto es VERTICAL, el nombre va DENTRO de la foto en
 * blanco, y la fila es un CARRUSEL, no una rejilla fija.
 *
 * Se resuelve con scroll-snap y no con una libreria: la fila ya se arrastra con
 * el dedo en movil y con el trackpad en escritorio sin una linea de JavaScript,
 * y las flechas solo se encienden cuando de verdad hay algo que desplazar. Si
 * el JS fallara, la seccion sigue siendo usable.
 * -------------------------------------------------------------------------- */

.rd-catalogos {
    position: relative;
    padding: 64px var(--rd-gutter) 0;
}
.rd-head--centrado {
    display: block;
    text-align: center;
}
.rd-catalogos__pista {
    /*
     * FLEX Y NO GRID, y no es preferencia.
     *
     * Esto empezo con `display:grid` + `grid-auto-flow:column` +
     * `grid-auto-columns:minmax(230px,1fr)`. Se veia bien y la caja declaraba
     * el desbordamiento correcto -scrollWidth 968 contra clientWidth 560-, pero
     * NO SE PODIA DESPLAZAR: ni las flechas, ni scrollBy(), ni asignar
     * scrollLeft a mano. Se descarto que fuera el scroll-snap y los ancestros;
     * medido en el navegador, con grid la caja no generaba area desplazable.
     * Cambiado a flex, el mismo scrollBy salta a 246 -el anclaje de la segunda
     * tarjeta- a la primera.
     */
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge viejo */
    padding-bottom: 4px;
}
/*
 * La barra de scroll nativa se esconde. En la propia maqueta la clienta marco
 * que se veia fea en la fila de ocasiones, asi que aqui no se repite.
 */
.rd-catalogos__pista::-webkit-scrollbar {
    display: none;
}
.rd-catalogo {
    position: relative;
    display: block;
    /*
     * TRES Y PICO A LA VISTA, A PROPOSITO.
     *
     * Antes era `flex: 1 0 230px`: las tarjetas crecian hasta repartirse todo
     * el ancho, asi que con cuatro catalogos cabian las cuatro, la fila no se
     * desbordaba y la flecha NUNCA aparecia. La clienta la pidio expresamente
     * -"la flechita a la derecha para que puedan ver los demas catalogos"-, y
     * una flecha que no sale no sirve de nada.
     *
     * Con 30% entran tres enteras y la cuarta asoma, que es justo lo que hace
     * el ejemplo que ella mando: se ve que la fila sigue y la flecha tiene
     * sentido. En cuanto haya mas de tres catalogos, la flecha esta ahi.
     */
    flex: 0 0 30%;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: var(--rd-bg-soft, #FBF6F1);
    text-decoration: none;
}
.rd-catalogo__img {
    display: block;
    /*
     * CUADRADA. Lo pidio la clienta: "esta parte debe ser asi tambien, con las
     * fotos cuadradas". Estaba en 3/4 -vertical-, leyendo el recorte de la
     * captura que mando; ella aclaro que las queria cuadradas.
     */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.rd-catalogo__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.rd-catalogo:hover .rd-catalogo__img img {
    transform: scale(1.04);
}
/*
 * El nombre va DENTRO de la foto, arriba a la izquierda. El degradado es lo que
 * lo hace legible sobre cualquier foto: sin el, un nombre blanco sobre una caja
 * de desayuno clara no se lee.
 */
.rd-catalogo::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 46%;
    background: linear-gradient(to bottom, rgba(38, 24, 17, .55), rgba(38, 24, 17, 0));
    pointer-events: none;
}
.rd-catalogo__name {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    z-index: 1;
    color: #fff;
    font-family: var(--rd-serif);
    font-size: 25px;
    line-height: 1.15;
    text-shadow: 0 1px 12px rgba(38, 24, 17, .45);
}
.rd-catalogos__flecha {
    position: absolute;
    top: calc(50% + 26px);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--rd-line, #E4D8CE);
    background: #fff;
    color: var(--rd-ink, #3E2A20);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
}
.rd-catalogos__flecha:hover {
    background: var(--rd-bg-soft, #FBF6F1);
}
.rd-catalogos__flecha[hidden] {
    display: none;
}
.rd-catalogos__flecha--izq { left: calc(var(--rd-gutter) - 14px); }
.rd-catalogos__flecha--der { right: calc(var(--rd-gutter) - 14px); }

/* -----------------------------------------------------------------------------
 * 7. PORTADA — REGALA POR OCASION
 * -------------------------------------------------------------------------- */

.rd-occasions {
    padding: 64px var(--rd-gutter) 0;
}
.rd-occasions__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.rd-occasion {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rd-line);
    color: var(--rd-ink);
    transition: border-color .18s ease;
}
.rd-occasion:hover {
    border-color: var(--rd-line-3);
    color: var(--rd-ink);
}
.rd-occasion__img {
    display: block;
    height: 170px;
    overflow: hidden;
    background: var(--rd-bg-warm);
}
.rd-occasion__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-occasion__name {
    display: block;
    padding: 14px 16px;
    font-size: 14.5px;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * 8. PORTADA / CATALOGO — TARJETA DE PRODUCTO
 *
 * El marcado es el de siempre (productos.php), compartido con el catalogo y
 * con el scroll infinito. Aqui solo se le cambia la ropa.
 * -------------------------------------------------------------------------- */

.rd-products {
    padding: 72px var(--rd-gutter) 0;
}

/*
 * La tarjeta blanca se dibuja con un ::before y no con un contenedor.
 *
 * El marcado no tiene donde ponerla: dentro de la columna cuelgan tres
 * hermanos sueltos (la capa de hover, la foto y los datos) y ningun envoltorio
 * comun. Meterlo obligaria a tocar productos.php, que lo comparten la portada,
 * el catalogo, el buscador y el scroll infinito. Un ::before metido por el
 * relleno de la columna hace de tarjeta sin tocar una etiqueta.
 */
.content-products-img {
    position: relative;
    padding: 0 10px 20px;
}
.content-products-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    bottom: 20px;
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    transition: box-shadow .2s ease;
}
.content-products-img:hover:before {
    box-shadow: 0 14px 34px rgba(62, 42, 32, .1);
}
.content-products-img > *{
    position: relative;
}

.content-products-foto {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--rd-bg-warm);
    position: relative;
    border-radius: 15px 15px 0 0;
}
.content-products-foto img.img-prod{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.description-products-index {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.description-products-index,
.description-products-index ul{
    text-align: left;
}
.description-products-index ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}
.title-dcpt-product a{
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    line-height: 1.25;
    color: var(--rd-ink);
    text-transform: none;
    font-weight: 400;
}
.precio-prd {
    font-size: 17px;
    font-weight: 700;
    color: var(--rd-ink);
}
.precio-antes {
    font-size: 14px;
    font-weight: 400;
    color: var(--rd-ink-4);
    text-decoration: line-through;
    margin-top: auto;
}
.precio-ahora {
    color: var(--rd-ink) !important;
}
.precio-prd:not(.precio-antes){
    margin-top: auto;
    padding-top: 14px;
}

/* El "Regalar" del diseno. Va dentro del mismo li que el precio. */
.precio-ahora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.rd-pill-regalar {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-accent);
    border: 1px solid var(--rd-accent-line);
    border-radius: 999px;
    padding: 7px 15px;
    white-space: nowrap;
}
a:hover > .rd-pill-regalar,
.content-products-img:hover .rd-pill-regalar {
    background: var(--rd-accent);
    color: #fff;
    border-color: var(--rd-accent);
}

/* -----------------------------------------------------------------------------
 * 9. PORTADA — COMO LLEGA TU SORPRESA
 * -------------------------------------------------------------------------- */

.rd-steps {
    margin: 80px 0 0;
    background: var(--rd-ink);
    color: var(--rd-bg-warm);
    padding: 66px var(--rd-gutter);
}
.rd-steps__inner {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}
.rd-steps h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 36px;
    margin: 0 0 16px;
    line-height: 1.15;
    color: var(--rd-bg-warm);
}
.rd-steps__intro {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(247, 233, 226, .72);
    margin: 0;
}
.rd-steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.rd-step__n {
    font-family: var(--rd-serif) !important;
    font-size: 15px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(247, 233, 226, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.rd-step__t {
    font-size: 16.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.rd-step__d {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(247, 233, 226, .66);
}

/* -----------------------------------------------------------------------------
 * 10. PORTADA — TESTIMONIOS
 * -------------------------------------------------------------------------- */

/*
 * LA ULTIMA SECCION NO SE PEGA AL PIE.
 *
 * Todas las secciones de la portada cierran con padding-bottom 0 y se apoyan
 * en el margen superior de la siguiente. La ultima no tiene siguiente, asi que
 * quedaba pegada al pie: al mover los testimonios al final -el orden que pidio
 * la clienta- sus tarjetas blancas quedaron cortadas por el crema del pie.
 *
 * Se resuelve por POSICION y no dandole margen a los testimonios: asi vale
 * para la que quede ultima el dia que se vuelva a reordenar, que en esta
 * portada ya ha pasado dos veces.
 */
.rd-home > section:last-child {
    padding-bottom: 80px;
}

.rd-reviews {
    padding: 72px var(--rd-gutter) 0;
}
.rd-reviews > h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 34px;
    margin: 0 0 30px;
    text-align: center;
}
.rd-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.rd-review {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    padding: 26px 24px;
}
.rd-review__stars {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
}
.rd-review__stars i {
    width: 8px;
    height: 8px;
    background: var(--rd-gold);
    border-radius: 50%;
    display: block;
}
.rd-review p {
    font-family: var(--rd-serif) !important;
    font-size: 18.5px;
    line-height: 1.55;
    margin: 0 0 18px;
    text-wrap: pretty;
}
.rd-review__who {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rd-ink-4);
}

/* -----------------------------------------------------------------------------
 * 11. PORTADA — INSTAGRAM
 * -------------------------------------------------------------------------- */

.rd-ig {
    padding: 72px 0 0;
}
.rd-ig__head {
    text-align: center;
    margin-bottom: 22px;
}
.rd-ig__head h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 6px;
}
.rd-ig__head a {
    font-size: 14px;
}
.rd-ig__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rd-ig__grid li {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.rd-ig__grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------------
 * 12. RESPONSIVE
 *
 * El prototipo trae una pantalla movil aparte. Aqui se resuelve con puntos de
 * corte sobre la misma retícula: menos codigo que mantener y el contenido es
 * el mismo.
 * -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    :root { --rd-gutter: 32px; }
    .rd-hero h1 { font-size: 52px; }
    .rd-occasions__grid { grid-template-columns: repeat(3, 1fr); }
    .rd-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .rd-hero { grid-template-columns: 1fr; }
    .rd-hero__text { padding: 56px 32px; }
    .rd-hero__media { min-height: 340px; }
    .rd-finder__box {
        grid-template-columns: 1fr 1fr;
    }
    .rd-finder__title {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--rd-line);
        padding: 0 0 14px;
    }
    .rd-finder .rd-btn { grid-column: 1 / -1; }
    .rd-perks__grid { grid-template-columns: repeat(2, 1fr); }
    .rd-steps__inner { grid-template-columns: 1fr; gap: 34px; }
    .rd-steps__list { grid-template-columns: 1fr; gap: 24px; }
    .rd-reviews__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    :root { --rd-gutter: 18px; }
    .rd-hero h1 { font-size: 38px; }
    .rd-hero p { font-size: 16px; }
    .rd-hero__text { padding: 40px 18px; }
    .rd-finder { margin-top: -24px; }
    .rd-finder__box { grid-template-columns: 1fr; padding: 18px; }
    .rd-perks__grid { grid-template-columns: 1fr; gap: 18px; }
    .rd-occasions__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rd-occasion__img { height: 130px; }
    .rd-head h2, .rd-reviews > h2 { font-size: 27px; }
    .rd-ig__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------------------
 * 13. FICHA DE PRODUCTO
 *
 * El marcado es el de siempre: la galeria con sus pestanas, el calendario, los
 * complementos y el formulario que envia al carrito no se tocaron. Lo unico
 * nuevo en la ficha es la dedicatoria y el bloque de "Suele regalarse junto
 * con"; todo lo demas de aqui es ropa.
 *
 * La galeria cambia de forma sin cambiar de marcado: el diseno pone la foto
 * grande arriba y las miniaturas debajo, y el marcado las tenia en una
 * columna a la izquierda. Con `order` y un ancho del 100% se dan la vuelta.
 * -------------------------------------------------------------------------- */

.rd-ficha {
    padding: 34px var(--rd-gutter) 0;
    background: var(--rd-bg);
}

.rd-ficha > .row {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    margin: 0;
}

/*
 * El `min-width: 0` no es opcional. Un hijo de rejilla arranca con
 * min-width:auto, o sea que NO puede encogerse por debajo del ancho minimo de
 * su contenido: en un telefono estas dos columnas se quedaban en 432px dentro
 * de una pista de 359 y el texto salia cortado por la derecha. No se veia
 * barra horizontal porque <main> lleva overflow-x:hidden, que recorta en vez
 * de dejar desplazar: por eso medir scrollWidth daba cero y la pagina estaba
 * rota igual.
 */
.rd-ficha .gallery-detail,
.rd-ficha .detail-detail {
    max-width: none;
    flex: none;
    width: auto;
    min-width: 0;
    padding: 0;
}
.rd-ficha .detail-detail > .col,
.rd-ficha .detail-detail .cam1,
.rd-ficha .detail-detail .cam2 {
    min-width: 0;
}

/* --- Galeria: foto grande arriba, miniaturas debajo --- */
.rd-ficha .gallery-detail > .row {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.rd-ficha .gallery-detail .regalb {
    order: 2;
    max-width: 100%;
    flex: none;
    width: 100%;
    padding: 0;
    margin-top: 10px;
}
.rd-ficha .gallery-detail > .row > .col-12.col-md-10 {
    order: 1;
    max-width: 100%;
    flex: none;
    width: 100%;
    padding: 0 !important;
}
.rd-ficha .gallery-detail .tab-content .tab-pane img,
.rd-ficha .gallery-detail .tab-content .gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-ficha .gallery-detail .tab-content {
    border-radius: 18px;
    overflow: hidden;
    background: var(--rd-bg-warm);
    aspect-ratio: 1 / 1;
}
.rd-ficha .gallery-detail .tab-content .tab-pane {
    height: 100%;
}

/* Las miniaturas pasan de columna a fila de cuatro. */
/*
 * La tira de miniaturas es una `.row` de Bootstrap, asi que trae los margenes
 * negativos de -15px a cada lado: se salia 23px por la derecha y la cuarta
 * miniatura quedaba cortada contra el borde de la pantalla.
 *
 * `auto-fill` en vez de cuatro columnas fijas: con cinco fotos la quinta baja
 * a una segunda fila alineada con las de arriba, en vez de dejar el hueco
 * descuadrado.
 */
.rd-ficha .gallery-detail #v-pills-tab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link {
    max-width: 100%;
    flex: none;
    width: auto;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link.active {
    border-color: var(--rd-accent);
    background: var(--rd-bg-warm);
}
.rd-ficha .gallery-detail #v-pills-tab .nav-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Columna de datos --- */
.rd-ficha .detail-detail > .col {
    padding: 6px 0 0;
}
.rd-ficha .detail-detail > .col > .font-brandonB:first-of-type,
.rd-ficha .detail-detail span.font-brandonB:first-of-type {
    display: block;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rd-accent);
    margin-bottom: 14px;
}
.rd-ficha .detail-detail > .col > .font-brandonB:first-of-type a {
    color: var(--rd-accent);
}
/*
 * El !important no es pereza: index.css le da al h1 de la ficha 12px y
 * versales desde `.detail-detail .col h1`, y ese selector pesa mas que
 * cualquier cosa razonable que se escriba aqui.
 */
.rd-ficha .detail-detail h1 {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 44px !important;
    line-height: 1.08 !important;
    margin: 0 0 12px !important;
    letter-spacing: -.015em !important;
    color: var(--rd-ink) !important;
    text-transform: none !important;
}

/*
 * Las hojas viejas ponen `label { position:absolute }` para su propio
 * formulario. La dedicatoria es un label, asi que sin esto se despega de la
 * tarjeta y se monta encima del campo de fecha.
 */
.rd-personaliza label,
.rd-dedicatoria {
    position: static !important;
    width: 100%;
    max-width: none;
}
.rd-ficha .preciodetal {
    gap: 14px;
    margin-bottom: 20px;
}
.rd-ficha .h3-prctotl {
    font-family: var(--rd-sans) !important;
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--rd-ink);
}
.rd-ficha .rd-nota-precio {
    display: block;
    font-size: 13px;
    color: var(--rd-ink-3);
    margin: -14px 0 20px;
}
.rd-ficha .h3-prctotl.price-normal {
    font-size: 18px;
    font-weight: 400;
    color: var(--rd-ink-4);
    text-decoration: line-through;
}

/* La descripcion administrada hace de parrafo y de lista "Incluye". */
.rd-ficha .detail-detail ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 20px;
    list-style: none;
    margin: 0 0 20px;
    padding: 18px 0 0;
    border-top: 1px solid var(--rd-line);
}
/*
 * La lista de "Incluye" traia un bullet.png de fondo con 23px de sangria. Se
 * quita: el punto ahora es el circulo del diseno, y si se dejan los dos cada
 * linea sale con dos vinetas.
 */
/*
 * El punto va posicionado, no como elemento flex.
 *
 * Con `display:flex` en el li, cada <span> que la clienta escribe dentro de la
 * descripcion se convertia en una columna aparte: la linea de la taza salia
 * partida en tres bloques uno al lado del otro. Con el punto absoluto y una
 * sangria, el contenido del li fluye como texto normal, que es lo que es.
 */
.rd-ficha .detail-detail ul li {
    position: relative;
    padding-left: 16px !important;
    font-size: 14.5px;
    line-height: 1.5;
    background-image: none !important;
}
.rd-ficha .detail-detail ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--rd-accent-dot);
    border-radius: 50%;
}
.rd-ficha .detail-detail p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--rd-ink-2);
}

/* --- Tarjeta "Personaliza la entrega" --- */
.rd-personaliza {
    background: var(--rd-white);
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    padding: 22px;
    margin: 18px 0 22px !important;
}
.rd-personaliza__titulo {
    font-family: var(--rd-serif) !important;
    font-size: 20px;
    margin-bottom: 16px;
}
.rd-personaliza .entrega-campo {
    margin-bottom: 12px;
}
.rd-personaliza .entrega-input,
.rd-personaliza select,
.rd-personaliza input[type="text"],
.rd-personaliza textarea {
    width: 100%;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
}
.rd-personaliza .select-detail {
    margin-top: 12px;
}
.rd-personaliza .input-group {
    margin-top: 12px !important;
    flex-wrap: nowrap;
}
.rd-personaliza .input-group .span-taza {
    background: var(--rd-bg-warm);
    border: 1px solid var(--rd-line);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.rd-personaliza .input-group .input-taza {
    border-radius: 0 10px 10px 0;
    border-left: none;
}

.rd-dedicatoria {
    display: block;
    margin: 14px 0 0;
    width: 100%;
}
/* El color va forzado: las hojas viejas pintan de naranja todos los label. */
.rd-personaliza .rd-dedicatoria .rd-dedicatoria__label {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    margin-bottom: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.rd-dedicatoria textarea {
    min-height: 76px;
    resize: vertical;
}
.rd-dedicatoria__contador,
.rd-dedicatoria__contador span {
    display: inline;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    line-height: 1.4;
}
.rd-dedicatoria__contador {
    display: block;
    margin-top: 6px;
}

/*
 * El bloque de la derecha va dentro de un `.col-xl-9`, o sea al 75% de la
 * columna. En el diseno ocupa el ancho entero: la tarjeta de personalizacion y
 * el boton se quedaban estrechos y el texto del boton se partia en tres lineas.
 */
.rd-ficha .detail-detail .cam2,
.rd-ficha .detail-detail .cam1 {
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}

/* --- Cantidad y comprar --- */
.rd-ficha .rd-compra-fila {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
    margin: 0;
}

.rd-cantidad {
    display: flex;
    align-items: center;
    border: 1px solid var(--rd-line-3);
    border-radius: 999px;
    overflow: hidden;
    flex: none;
    background: #fff;
}
.rd-cantidad__btn {
    border: none;
    background: transparent;
    padding: 13px 16px;
    font-size: 16px;
    line-height: 1;
    color: var(--rd-ink);
    text-decoration: none;
    user-select: none;
}
.rd-cantidad__btn:hover {
    color: var(--rd-accent);
}
.rd-cantidad input {
    width: 40px;
    border: none !important;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--rd-ink);
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
.rd-cantidad input::-webkit-outer-spin-button,
.rd-cantidad input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rd-compra-boton {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/*
 * El !important no es opcional: index.css declara
 * `.btn-comprar-detail { background:#796857!important; border-radius:inherit }`.
 * Sin repetirlo, el boton se queda marron y cuadrado, que es como lo vio la
 * clienta el 2026-09-10.
 */
.rd-ficha .btn-comprar-detail {
    background: var(--rd-accent) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 16px 30px !important;
    font-size: 15.5px !important;
    font-weight: 600;
    color: #fff !important;
    width: 100%;
    height: auto !important;
    gap: 10px;
    white-space: nowrap;
    /*
     * Sin esto el texto sale espaciado letra a letra -index.css le pone
     * letter-spacing al boton- y no cabe: se veia "gar al carrito", cortado.
     */
    letter-spacing: .01em !important;
    text-indent: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rd-ficha .btn-comprar-detail .icon-icon-cart,
.rd-ficha .btn-comprar-detail span {
    color: #fff !important;
}
.rd-ficha .btn-comprar-detail .icon-icon-cart {
    font-size: 18px;
    line-height: 1;
}
.rd-ficha .btn-comprar-detail:hover,
.rd-ficha .btn-comprar-detail:focus {
    background: var(--rd-accent-dark) !important;
    color: #fff !important;
}

/*
 * Los dos sellos de la zona "ficha" no llevan icono cargado, y el helper de
 * confianza pinta entonces la inicial dentro de un circulo: salian una "T" y
 * una "P" sueltas. El diseno los quiere como dos lineas de texto a secas.
 */
.rd-ficha .sct-confianza,
.rd-ficha [class*="confianza--ficha"],
.rd-ficha [class*="confianza"] {
    display: flex;
    gap: 26px;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--rd-ink-3);
    flex-wrap: wrap;
    background: none;
    border: none;
    padding: 0;
}
/*
 * BOTON Y CANTIDAD A LA MISMA ALTURA (02/10/2026).
 *
 * El boton salia de 77px y la cantidad de 44: "se ve gigante". La causa es
 * index.css, `.detail-detail span span { font-size: 30px }`, que alcanza al
 * precio de dentro del boton (#rd-total-compra) y lo infla. El precio vuelve
 * al cuerpo del texto, en negrita, y los dos controles miden 52px.
 */
.rd-ficha .btn-comprar-detail span {
    font-size: inherit !important;
}
.rd-ficha .btn-comprar-detail #rd-total-compra {
    font-weight: 700;
}
.rd-ficha .btn-comprar-detail {
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.rd-ficha .rd-cantidad {
    height: 52px;
}
.rd-ficha [class*="confianza"] [class*="icono"],
.rd-ficha [class*="confianza"] [class*="inicial"],
.rd-ficha [class*="confianza"] i,
.rd-ficha [class*="confianza"] svg,
.rd-ficha [class*="confianza"] li:before,
.rd-ficha [class*="confianza"] [class*="item"]:before {
    display: none !important;
    content: none !important;
}
.rd-ficha [class*="confianza"] > * {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
}
.rd-ficha [class*="confianza"] [class*="titulo"] {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* -----------------------------------------------------------------------------
 * 14. COMPLEMENTA TU SORPRESA
 *
 * El bloque que el diseno no traia y que aqui se conserva porque vende: son
 * dieciocho complementos con foto, precio y casilla. Solo cambia la ropa.
 * -------------------------------------------------------------------------- */

.complement-pedido {
    padding: 56px 0 0;
    background: var(--rd-bg);
}
/*
 * El carrusel llevaba las tarjetas pegadas a los dos bordes de la pantalla.
 * El aire va en el contenedor y no en las tarjetas, para que owl siga
 * calculando bien los anchos.
 */
.complement-pedido .gallery-complement {
    padding-left: var(--rd-gutter);
    padding-right: var(--rd-gutter);
}
/*
 * La .row de dentro trae los margenes negativos de Bootstrap (-15px a cada
 * lado) y se comia el aire que acabamos de poner: las tarjetas volvian a
 * tocar el borde de la pantalla.
 */
.complement-pedido .gallery-complement > .row {
    margin-left: 0;
    margin-right: 0;
}
.complement-pedido .gallery-complement > .row > * {
    padding-left: 0;
    padding-right: 0;
}

/*
 * FLECHAS DEL CARRUSEL (02/10/2026). index.css coloca .owl-nav con un `top`
 * fijo de ~455px y las flechas son el caracter ‹ › a 80px: quedaban en el
 * tercio de arriba, y la izquierda montada sobre la primera tarjeta. Ahora son
 * los mismos circulos blancos de "Descubre nuestros Catalogos", centrados en
 * la altura de la tarjeta y por fuera del carrusel, en el aire del gutter.
 */
.complement-pedido .owl-carousel .owl-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}
.complement-pedido .owl-carousel .owl-nav button.owl-prev,
.complement-pedido .owl-carousel .owl-nav button.owl-next {
    position: absolute !important;
    top: 0 !important;
    transform: translateY(-50%);
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--rd-line, #E4D8CE) !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
    color: var(--rd-ink, #3E2A20) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 3;
}
.complement-pedido .owl-carousel .owl-nav button.owl-prev { left: -54px !important; }
.complement-pedido .owl-carousel .owl-nav button.owl-next { right: -54px !important; }
/* Selector largo a proposito: index.css trae
 * `.owl-theme.owl2 .owl-nav button.owl-next span { font-size: 5em !important }`
 * y solo se le gana con mas especificidad. */
.complement-pedido .owl-theme.owl2 .owl-nav button.owl-prev span,
.complement-pedido .owl-theme.owl2 .owl-nav button.owl-next span {
    font-size: 26px !important;
    line-height: 1 !important;
    height: auto !important;
    margin-top: -3px;
    color: inherit !important;
}
.complement-pedido .owl-carousel .owl-nav button:hover {
    background: var(--rd-bg-soft, #FBF6F1) !important;
}
/* La flecha que no lleva a ningun lado (al inicio o al final) se oculta en
 * vez de verse de otro tono: dos flechas distintas parecian dos botones
 * distintos. */
.complement-pedido .owl-carousel .owl-nav button.disabled {
    visibility: hidden !important;
}

/*
 * El nombre y la medida se limitan a dos lineas y una.
 *
 * Todas las tarjetas miden lo que la mas alta -es un carrusel, y desiguales
 * quedan peor-, asi que un complemento con nombre largo estiraba a las demas
 * y dejaba un palmo de blanco debajo del precio.
 */
.complement-pedido .title-prod-cmpl {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.complement-pedido .title-prod-cmpl small {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.complement-pedido .title-complement {
    transform: none !important;
    text-align: left;
    padding: 0 var(--rd-gutter);
    margin-bottom: 22px;
}
.complement-pedido .title-complement h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
    color: var(--rd-ink) !important;
    transform: none !important;
    margin: 0 !important;
    letter-spacing: -.01em;
}

/*
 * Las tarjetas del carrusel se cortaban por abajo: se perdian el precio y el
 * boton AGREGAR.
 *
 * Owl fija a mano la altura de .owl-stage-outer con la medida que tomo al
 * arrancar, cuando las fotos todavia no ocupaban lo suyo. En el telefono
 * dejaba 305px para tarjetas de casi 400. Se le devuelve la altura al
 * contenido y se estiran los items para que todas midan igual.
 */
.complement-pedido .owl-stage-outer {
    height: auto !important;
}
.complement-pedido .owl-stage {
    display: flex;
    align-items: stretch;
}
.complement-pedido .owl-item {
    height: auto !important;
    display: flex;
}
/*
 * La tarjeta ocupa TODO el alto del item. Sin el height:100%, owl estira el
 * item hasta la altura de la tarjeta mas alta y la nuestra se quedaba en 339
 * dentro de 403: 64px de hueco muerto debajo de cada una.
 */
.complement-pedido .owl-item > .item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.complement-pedido .owl-dots {
    margin-top: 18px;
}
/*
 * La tarjeta CRECE con su contenido.
 *
 * Las hojas viejas le fijan la altura a .img-gallery y con `overflow:hidden`
 * -que pusimos aqui para redondear las esquinas- el recorte se comia el
 * precio y el boton AGREGAR: la caja media 241px y el contenido 326. Se
 * suelta la altura y el redondeo pasa a la foto, que es la unica que lo
 * necesita.
 */
/*
 * `height: 100%` y no `auto`: la altura la manda el item del carrusel, que
 * owl iguala al mas alto. Con `auto` la tarjeta se quedaba en 356 dentro de
 * un hueco de 420 y dejaba 64px en blanco debajo. El !important es para
 * ganarle a la altura fija que le pone la hoja vieja.
 */
.complement-pedido .item.img-gallery {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 14px;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    padding-bottom: 14px;
}
/*
 * La foto va a sangre, pegada a los tres bordes de arriba, como en las
 * tarjetas de producto y en las de "Suele regalarse junto con". Antes llevaba
 * un marco blanco de 9px por dentro que la dejaba flotando.
 */
.complement-pedido .item.img-gallery figure {
    border-radius: 13px 13px 0 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.complement-pedido .item.img-gallery figure img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    display: block;
    padding: 0 !important;
    margin: 0 !important;
}

/*
 * La FOTO absorbe la diferencia de altura, no el texto.
 *
 * Todas las tarjetas del carrusel miden lo que la mas alta. Si el hueco
 * sobrante se lo queda el bloque de texto, a las de nombre corto les aparece
 * un palmo de blanco entre el precio y el boton, que es lo que se veia. Con
 * la foto en flex:1 y object-fit:cover, la de al lado simplemente se ve un
 * poco mas alta y no queda ningun vacio.
 */
.complement-pedido .item.img-gallery figure {
    flex: 1;
    min-height: 150px;
}
.complement-pedido .info-complement {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 0;
    margin: 0 !important;
    text-align: left;
}
/* -----------------------------------------------------------------------------
 * Pie de la tarjeta de complemento: precio + accion en una fila
 *
 * Opcion A del lienzo de diseno, elegida por la clienta el 2026-09-10.
 * -------------------------------------------------------------------------- */

/*
 * La fila se PARTE cuando no cabe.
 *
 * En una tarjeta de 183px quedan 157 utiles: el precio pide unos 60 y la
 * pastilla 90, con 8 de aire. Con un precio de cuatro cifras o un idioma mas
 * largo no entra, y `space-between` no encoge a nadie: la pastilla se salia
 * entre 4 y 9px por la derecha. Con wrap, en ese caso baja a su linea en vez
 * de desbordar.
 */
.complement-pedido .rd-compl-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 10px;
    padding-bottom: 2px;
}
.complement-pedido .rd-compl-pie > * {
    min-width: 0;
}
.complement-pedido .rd-compl-pie .prc-compl {
    margin: 0 !important;
    white-space: nowrap;
}

/*
 * El circulo se va. La casilla SE QUEDA -es la que envia el complemento en el
 * formulario- pero sin pintar: dos controles para una sola accion, y el texto
 * quedaba centrado en el hueco del circulo en vez de en el boton.
 */
.complement-pedido .rd-compl-pie .checkmark {
    display: none !important;
}
.complement-pedido .rd-compl-pie input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.complement-pedido .rd-compl-pie .btn-agregar {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    max-width: none;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    float: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    background: transparent !important;
    border: 1px solid var(--rd-accent-line);
    border-radius: 999px;
    color: var(--rd-accent) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    flex: 0 1 auto;
    cursor: pointer;
    transition: background .15s linear, color .15s linear, border-color .15s linear;
}

/*
 * El texto va forzado a 12: sin esto el "Agregar" heredaba los 17px de
 * `.containers` y salia mas grande que el "Anadido", que se pinta con un
 * ::after que si trae su tamano.
 */
.complement-pedido .rd-compl-txt {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.2;
}

/* El check solo aparece cuando esta puesto. */
.complement-pedido .rd-compl-check {
    display: none;
    flex: none;
}

/*
 * --- Puesto ---
 *
 * Dos etiquetas y se muestra una. El primer intento escondia "Agregar" con
 * font-size:0 y sacaba "Anadido" con un ::after; en cuanto hubo que forzar el
 * tamano del texto -heredaba 17px de .containers- el truco se rompio y se leia
 * "AgregarAnadido".
 */
.complement-pedido .rd-compl-txt--on {
    display: none;
}
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-check,
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-txt--on {
    display: block;
}
.complement-pedido .rd-compl-pie input:checked ~ .rd-compl-txt--off {
    display: none;
}
.complement-pedido .rd-compl-pie .btn-agregar:has(input:checked) {
    background: var(--rd-accent) !important;
    border-color: var(--rd-accent);
    color: #fff !important;
}
/*
 * El borde de la tarjeta tambien se tine: asi se ve de lejos cuales ya
 * estan puestos sin leer boton por boton. :has() no lo entienden los
 * navegadores viejos; ahi el boton relleno sigue diciendolo.
 */
.complement-pedido .item.img-gallery:has(input:checked) {
    border-color: var(--rd-accent);
}

/* Toda la tarjeta es pulsable, no solo la pastilla. */
.complement-pedido .item.img-gallery {
    cursor: pointer;
}
.complement-pedido .item.img-gallery:hover .btn-agregar {
    border-color: var(--rd-accent);
}
/*
 * index.css le pone a esta lista `border-bottom: 1px dashed` y un
 * `min-height:50px`: por eso la tarjeta salia partida en dos por un filete
 * punteado naranja debajo del precio.
 */
.complement-pedido .info-complement ul {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 2px;
    min-height: 0 !important;
    border-bottom: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}
.complement-pedido .title-prod-cmpl small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--rd-ink-3);
    text-transform: none;
}
.complement-pedido .prc-compl {
    margin-top: 6px;
    font-size: 15px !important;
}
.complement-pedido .prc-compl span {
    font-size: 15px !important;
}

/* El filete punteado que partia la tarjeta en dos, fuera. */
.complement-pedido .item.img-gallery hr,
.complement-pedido .info-complement + hr,
.complement-pedido .item.img-gallery [class*="separador"] {
    display: none !important;
}

/*
 * El AGREGAR se salia de la tarjeta por la derecha.
 *
 * Dos reglas viejas se juntaban:
 *
 *   .containers.btn-agregar      { width: 125% !important }
 *   label.containers.btn-agregar { width: 10em; transform: scale(.8) }
 *
 * El 125% de una tarjeta de 183px son 229, y el scale(.8) lo dibujaba a 181
 * pero DESPLAZADO: el borde derecho caia 11px fuera de la tarjeta. Encima el
 * transform hace que lo que se ve y lo que mide el navegador no coincidan
 * -offsetWidth 157 y rectangulo 126-, asi que medir sin mirar la captura
 * enganaba.
 *
 * Se le quita el transform y se le da el ancho de la tarjeta menos los
 * margenes. El selector lleva `label` delante para empatar en especificidad
 * con la regla vieja y ganar por orden, que esta hoja va la ultima.
 */
/*
 * Queda por si alguna otra pantalla usa .btn-agregar fuera del pie: le quita
 * el transform:scale(.8) y el width:125% que traen las hojas viejas.
 */
.complement-pedido .btn-agregar {
    transform: none !important;
    box-sizing: border-box;
}
.complement-pedido .title-prod-cmpl {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: none;
    color: var(--rd-ink);
}
.complement-pedido .prc-compl {
    color: var(--rd-ink) !important;
    font-weight: 700;
}
.complement-pedido .btn-agregar {
    border-radius: 999px;
    color: var(--rd-accent);
    border: 1px solid var(--rd-accent-line);
}

/* -----------------------------------------------------------------------------
 * 15. SUELE REGALARSE JUNTO CON
 * -------------------------------------------------------------------------- */

.rd-relacionados {
    padding: 70px var(--rd-gutter) 0;
    background: var(--rd-bg);
}
.rd-relacionados h2 {
    font-family: var(--rd-serif) !important;
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 22px;
}
.rd-relacionados__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.rd-relacionado {
    background: #fff;
    border: 1px solid var(--rd-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    color: var(--rd-ink);
}
.rd-relacionado:hover {
    color: var(--rd-ink);
    border-color: var(--rd-line-3);
}
.rd-relacionado__img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    flex: none;
    display: block;
}
.rd-relacionado__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-relacionado__nombre {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 5px;
}
.rd-relacionado__precio {
    display: block;
    font-size: 14px;
    color: var(--rd-ink-3);
}

@media (max-width: 991px) {
    .rd-ficha > .row { grid-template-columns: 1fr; gap: 28px; }
    .rd-ficha .detail-detail h1 { font-size: 34px; }
    .rd-relacionados__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .rd-ficha .detail-detail ul { grid-template-columns: 1fr; }
    .rd-relacionados__grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
 * 16. MOVIL
 *
 * Tres cosas que en escritorio no se ven y en un telefono saltan a la vista:
 *
 *   1. La cabecera es fija y se come el titulo de la seccion a la que saltas.
 *      Se resuelve con scroll-margin-top, no con relleno: el hueco solo hace
 *      falta cuando el navegador desplaza hasta un ancla.
 *   2. Los cuerpos de texto del diseno estan pensados para una columna ancha.
 *      A 390px el nombre del producto a 20px y el precio a 17px no caben en la
 *      misma linea que el "Regalar", y la tarjeta se descuadra.
 *   3. La foto del hero es un banner apaisado con texto dentro. Recortada a
 *      560px de alto en vertical no se lee nada. Se le baja el alto y se
 *      encuadra por arriba, que es donde esos banners llevan el mensaje.
 * -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /*
     * Las pastillas de categoria se ARRASTRAN de lado, no se parten.
     *
     * En escritorio van con flex-wrap y caben; a 390px, con cuatro catalogos y
     * su numero, se partirian en dos o tres lineas y el bloque empezaria con
     * un muro de botones. Es el mismo defecto que la clienta reporto en el
     * menu con "REGALOS CORPORATIVOS".
     *
     * El relleno lateral negativo hace que la fila sangre hasta el borde de la
     * pantalla: asi se ve que hay mas a la derecha, en vez de cortarse dentro
     * del margen y parecer que ahi se acaba.
     */
    .rd-pastillas {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: calc(var(--rd-gutter) * -1);
        margin-right: calc(var(--rd-gutter) * -1);
        padding-left: var(--rd-gutter);
        padding-right: var(--rd-gutter);
    }
    .rd-pastillas::-webkit-scrollbar {
        display: none;
    }
    .rd-pastilla {
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 13px;
    }

    .rd-home section,
    .rd-ficha,
    .rd-relacionados,
    .complement-pedido {
        scroll-margin-top: 180px;
    }

    /* -------------------------------------------------------------------------
     * Hero: la foto DEBAJO del texto, no al lado
     *
     * Mismo tratamiento que el heroe de /empresas en movil, que es el que la
     * clienta pidio: la foto ocupa el fondo entero, un velo oscuro de arriba
     * abajo la apaga lo justo, y el texto se apoya en la parte baja.
     *
     * Antes se apilaba -bloque de texto y, debajo, una tira de foto de 268px-:
     * el hero medía 824px, la foto salía recortada por la mitad y el titular
     * llegaba sin imagen detrás.
     * ---------------------------------------------------------------------- */
    .rd-hero {
        position: relative;
        display: block;
        min-height: 78vh;
        background: var(--rd-ink);
    }
    .rd-hero__media {
        position: absolute;
        inset: 0;
        min-height: 0;
        aspect-ratio: auto;
    }
    .rd-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 35%;
    }
    /* El velo: sin el, el texto blanco no se lee sobre una foto clara. */
    .rd-hero__media:after {
        content: "";
        position: absolute;
        inset: 0;
        /*
         * El velo carga arriba a proposito. Los banners que hoy alimentan el
         * hero llevan su propio titular DIBUJADO DENTRO de la foto ("Feliz
         * temporada de cumpleanos..."), y con el texto nuevo encima se leian
         * los dos a la vez. Apagando la mitad de arriba, el titular pintado
         * pasa a fondo y manda el de verdad.
         *
         * Lo correcto es subir al panel una foto de hero SIN texto: el campo
         * "Hero · foto de respaldo" esta justo para eso.
         */
        background: linear-gradient(180deg,
            rgba(44, 29, 22, .72) 0%,
            rgba(44, 29, 22, .58) 30%,
            rgba(44, 29, 22, .74) 62%,
            rgba(44, 29, 22, .93) 100%);
    }
    /*
     * Velo apagado desde el panel. Sin el, el titular necesita una sombra
     * suave o desaparece en cuanto la foto tiene una zona clara. No sustituye
     * al velo: es el minimo para que el texto siga siendo legible.
     */
    .rd-hero--sin-velo .rd-hero__media:after {
        display: none;
    }

    /*
     * SOLO FOTO, EN MOVIL.
     *
     * Aqui el hero normal es una caja de 78vh con la foto de fondo ABSOLUTA y
     * el texto encima. Sin texto, esa caja no tiene contenido que le de alto:
     * con la foto sacada del flujo, el hero colapsaria a 78vh de fondo y la
     * imagen saldria recortada por arriba y por abajo.
     *
     * Asi que la foto vuelve al flujo y es ella la que pone el alto. El banner
     * se ve entero, que es de lo que se trata.
     */
    .rd-hero--solo-foto {
        position: static;
        display: block;
        min-height: 0;
        background: var(--rd-bg-warm);
    }
    .rd-hero--solo-foto .rd-hero__media {
        position: relative;
        inset: auto;
        min-height: 0;
    }
    .rd-hero--solo-foto .rd-hero__media img {
        width: 100%;
        height: auto;
        object-fit: initial;
        /* El encuadre del hero normal baja la foto un 35% para dejar ver la
           cara; aqui no se recorta nada, asi que no hay nada que encuadrar. */
        object-position: 50% 50%;
    }
    .rd-hero--solo-foto .rd-hero__media:after {
        display: none;
    }

    /*
     * EL BUSCADOR NO SE COME EL BANNER.
     *
     * .rd-finder sube 38px para montarse sobre el hero: con un hero de 78vh
     * eso es un detalle bonito. Pero un banner apaisado -el de la clienta mide
     * 2000x498- baja a 103px de alto en un telefono de 414, y esos mismos 38px
     * se comen el 37% de la foto, justo la franja de abajo donde va dibujado
     * el boton "VER REGALOS".
     *
     * ACTUALIZADO 21-09-2026: ese -38px ya no existe. La clienta pidio que el
     * buscador no tapara el banner en NINGUN tamaño (punto 3 de Diseño
     * WEB.docx), asi que la regla base pasó a +28px y el solape desaparecio de
     * raiz. Esta regla se queda solo para apretar un poco el hueco en movil,
     * donde 28px sobre un banner apaisado deja demasiado aire muerto.
     */
    .rd-hero--solo-foto + .rd-finder {
        margin-top: 14px;
    }
    .rd-hero--sin-velo .rd-hero h1,
    .rd-hero--sin-velo h1,
    .rd-hero--sin-velo p,
    .rd-hero--sin-velo .rd-kicker,
    .rd-hero--sin-velo .rd-hero__notes {
        text-shadow: 0 1px 14px rgba(44, 29, 22, .55);
    }

    .rd-hero__text {
        position: relative;
        z-index: 2;
        min-height: 78vh;
        justify-content: flex-end;
        padding: 90px 22px 28px;
    }
    .rd-hero .rd-kicker {
        color: #E8B98A;
        margin-bottom: 12px;
    }
    .rd-hero h1 {
        color: #FFFFFF;
        font-size: clamp(28px, 8.5vw, 36px);
        margin-bottom: 14px;
        overflow-wrap: break-word;
    }
    .rd-hero p {
        color: rgba(255, 255, 255, .90);
        font-size: 15.5px;
        margin-bottom: 22px;
        max-width: none;
    }
    .rd-hero__cta {
        flex-wrap: wrap;
        gap: 10px;
    }
    .rd-hero__cta .rd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .rd-hero__cta .rd-btn--ghost {
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, .45);
    }
    .rd-hero__notes {
        gap: 4px 20px;
        margin-top: 18px;
        color: rgba(255, 255, 255, .72);
        font-size: 12.5px;
    }

    /* --- Tarjeta de producto --- */
    .content-products-img {
        padding: 0 6px 14px;
    }
    .content-products-img:before {
        left: 6px;
        right: 6px;
        bottom: 14px;
        border-radius: 13px;
    }
    .content-products-foto {
        border-radius: 12px 12px 0 0;
    }
    .description-products-index {
        padding: 12px 12px 14px;
    }
    .description-products-index ul{
        gap: 5px;
    }
    .title-dcpt-product a{
        font-size: 15px !important;
        line-height: 1.25;
    }
    .precio-prd,
    .precio-prd span{
        font-size: 14px !important;
    }
    .precio-antes {
        font-size: 12px !important;
    }
    .precio-ahora {
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 8px;
    }
    .rd-pill-regalar {
        font-size: 11px;
        padding: 5px 11px;
    }

    /* --- Ocasiones --- */
    .rd-occasion__img {
        height: 112px;
    }
    .rd-occasion__name {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* --- Titulares de seccion --- */
    .rd-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 18px;
    }
    .rd-head h2,
    .rd-reviews > h2,
    .rd-relacionados h2 {
        font-size: 25px !important;
    }
    .rd-steps h2 {
        font-size: 27px !important;
    }
    .rd-ig__head h2 {
        font-size: 23px !important;
    }

    /* --- Ficha --- */
    .rd-ficha {
        padding-top: 20px;
    }

    /*
     * La tira de miniaturas estaba FUERA del flujo.
     *
     * Por debajo de 501px, index.css la deja `position:absolute; bottom:-70px`
     * -el apano del diseno viejo, cuando la galeria era una columna-. Al no
     * participar del flujo, `.gallery-detail` no crecia con ella y la tira
     * quedaba colgada del borde de abajo de la caja:
     *
     *   con 3 fotos  -> pisaba 18px de la foto grande
     *   con 5 fotos  -> como ancla por ABAJO, la segunda fila sube en vez de
     *                   bajar, y se comia 115px de la foto
     *
     * El `order: 2` del rediseno no pintaba nada: un absoluto no entra en el
     * reparto del flex.
     *
     * En `static` la tira vuelve al flujo, la caja crece con ella y las filas
     * que hagan falta caen debajo. En escritorio no cambia nada -alli la regla
     * de index.css no aplica y `.regalb` ya era `relative`-: verificado a
     * 1280px, mismos rectangulos con y sin esta regla.
     */
    .rd-ficha .gallery-detail .regalb {
        position: static;
        bottom: auto;
    }

    /*
     * index.css separaba el bloque de datos 6rem (96px) de la galeria: era el
     * hueco que le hacia sitio a la tira absoluta. Sin ella sobra, y dejaba un
     * vacio de 124px antes del nombre del producto.
     */
    .rd-ficha .detail-detail {
        margin-top: 22px;
    }
    .rd-ficha .detail-detail h1 {
        font-size: 28px !important;
    }
    .rd-ficha .h3-prctotl {
        font-size: 22px;
    }
    .rd-personaliza {
        padding: 16px;
    }

    /*
     * La fila de cantidad + comprar va `nowrap` en escritorio para que el
     * boton quede al lado de la pildora. A 390px no caben: el boton se salia
     * de la pantalla. Aqui se parte en dos lineas.
     */
    .rd-ficha .rd-compra-fila {
        flex-wrap: wrap !important;
    }
    .rd-ficha .rd-compra-boton {
        flex: 1 0 100%;
    }
    .rd-ficha .btn-comprar-detail {
        white-space: normal !important;
        padding: 14px 18px !important;
        font-size: 14.5px !important;
    }
    .rd-relacionado__nombre {
        font-size: 13.5px;
    }

    /*
     * En el telefono la tarjeta del complemento mide 183px y quedan 157
     * utiles: el precio pide unos 60 y la pastilla 113. No caben en una
     * linea, asi que el precio va arriba y la pastilla debajo a todo el
     * ancho -mas facil de acertar con el pulgar que una pildora de 113px-.
     * En escritorio la tarjeta es mas ancha y se quedan en la misma fila,
     * como en el diseno.
     */
    .complement-pedido .rd-compl-pie {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .complement-pedido .rd-compl-pie .btn-agregar {
        width: 100% !important;
        justify-content: center;
        padding: 9px 12px !important;
    }
}

/* -----------------------------------------------------------------------------
 * 17. CARRITO — código de promoción plegado
 *
 * Lo pidió la clienta el 2026-09-10: «debería estar cerrado, solo si tiene
 * código que le dé click y que se abra ese input». Y de paso el campo y el
 * botón iban pegados sin aire, con el rótulo encima en versales.
 *
 * Es la ÚNICA parte del carrito que esta hoja toca. El resto del carrito
 * queda fuera del rediseño a propósito —conserva su Jost y su maqueta—, así
 * que aquí no se hereda nada: los colores se escriben enteros.
 * -------------------------------------------------------------------------- */

.car-promo-caja {
    display: block;
}

.car-promo-abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #8B5E34;
    padding: 6px 0;
    user-select: none;
}
/* La flecha nativa del <summary>, fuera: se dibuja una propia. */
.car-promo-abrir::-webkit-details-marker { display: none; }
.car-promo-abrir::marker { content: ""; }

.car-promo-abrir::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid #D8BCAE;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}
.car-promo-caja[open] .car-promo-abrir::before {
    content: "–";
}
.car-promo-abrir:hover {
    color: #B4462F;
}

/* El rótulo de arriba sobra: el propio enlace ya dice qué es. */
.car-promo > .car-rotulo {
    display: none;
}

.car-promo-caja[open] .car-promo-fila {
    margin-top: 10px;
}

/*
 * El campo y el botón dejan de ir pegados como una sola pieza. Separados y
 * con el botón redondeado se lee como lo que es: algo opcional.
 */
.car-promo-fila {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
}
.car-promo-fila .car-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #E4D8CE !important;
    border-radius: 8px !important;
    padding: 10px 12px;
    font-size: 14px;
}
.car-promo-fila .car-boton {
    flex: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .car-promo-fila {
        max-width: none;
    }
}

/* ==========================================================================
   LAS ESTAMPAS DE FONDO SE VEIAN COMO RECUADROS BLANCOS

   Las cuatro figuras decorativas de las pantallas de cuenta -donuts, regalo,
   regalo2 y osito- son JPG, y el JPG no tiene transparencia. Sobre el crema
   del sitio, rgb(243,234,225), cada una se dibujaba dentro de su propio
   rectangulo blanco.

   multiply resuelve el blanco sin tocar los archivos: blanco por el fondo da
   el fondo, asi que el rectangulo desaparece y el trazo se queda. Se prefiere
   a redibujar los cuatro JPG como PNG porque no toca ningun binario y sigue
   sirviendo si manana cambia el color del fondo.

   Va en las seis clases, no solo en las cuatro de estas pantallas: las mismas
   estampas se usan en compra-realizada con los sufijos five y six.
   ========================================================================== */
.img-oc-one,
.img-oc-two,
.img-oc-three,
.img-oc-four,
.img-oc-five,
.img-oc-six {
    mix-blend-mode: multiply;
}


/* =============================================================================
 * PORTADA — DISEÑO WEB.DOCX, REVISIÓN DEL 27/09/2026
 *
 * Cada bloque dice qué imagen del documento de la clienta reproduce. Las
 * medidas salen de la maqueta que ella aprobó (home1/banners.html), no de
 * ojo. Todo va con clases propias (rd-slider, rd-regalados, rd-regalo,
 * rd-promos, rd-feed, rd-opiniones) para no tocar el catálogo ni la ficha,
 * que comparten otras clases de esta hoja.
 * ========================================================================== */

/* --- CABECERA (imágenes 10 a 13) ------------------------------------------
 * El fondo del menú pasa al crema de la maqueta, #FBF6EF: el de antes,
 * rgba(251,249,236), tiraba a amarillo. Y el carrito se dibuja como la
 * «carterita» que eligió la clienta (la de asa alta, imagen 10). */
.cabeceramenu.bgcrema {
    background: #FBF6EF !important;
}
.cart .icon-cart2:before {
    content: "" !important;
    display: block;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.2a1 1 0 0 1-1 .8H7.2a1 1 0 0 1-1-.8L5 8z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- BANNER: CARRUSEL (imagen 1) ------------------------------------------
 * A todo el ancho y «un poquito más alto»: los banners miden 2000x498
 * (4,02:1); aquí la caja es 3,6:1, o sea 400 px de alto a 1440 en vez de
 * 358. La foto se recorta un 5 % por cada lado, que en los banners de la
 * clienta es margen vacío: el texto dibujado no se toca.
 *
 * Las diapositivas se apilan en la misma celda de la rejilla y se funden;
 * así la caja toma la altura de la foto sin fijarla a mano. */
.rd-slider {
    position: relative;
    background: var(--rd-bg-warm);
    overflow: hidden;
}
.rd-slider__pista {
    display: grid;
}
.rd-slider__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
.rd-slider__slide.is-activa {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease, visibility 0s;
}
.rd-slider__slide a,
.rd-slider__slide picture {
    display: block;
}
.rd-slider__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 36 / 10;
    object-fit: cover;
    object-position: center;
}
.rd-slider__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--rd-ink);
    box-shadow: 0 4px 16px rgba(62, 42, 32, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.rd-slider__flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.rd-slider__flecha--izq { left: 24px; }
.rd-slider__flecha--der { right: 24px; }
.rd-slider__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.rd-slider__punto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px rgba(62, 42, 32, .15);
    cursor: pointer;
    transition: width .3s, background .3s;
}
.rd-slider__punto.is-activo {
    width: 36px;
    background: var(--rd-accent);
    box-shadow: none;
}

/* --- LOS MÁS REGALADOS POR OCASIÓN (imágenes 3 y 4) ---------------------- */
.rd-regalados {
    margin-top: 56px;
    background: #FBF6EF;
    border-top: 1px solid #F1E7DC;
    border-bottom: 1px solid #F1E7DC;
    padding: 60px var(--rd-gutter, 48px) 66px;
}
.rd-regalados__cabeza {
    text-align: center;
    margin-bottom: 30px;
}
.rd-regalados__rotulo {
    display: block;
    font-family: var(--rd-sans);
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #C08A63;
}
.rd-regalados__cabeza h2 {
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: 38px;
    letter-spacing: -.015em;
    color: var(--rd-ink);
    margin: 12px 0 0;
}
.rd-regalados__pastillas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 2px;
    max-width: 100%;
    width: max-content;
    margin: 0 auto 14px;
    scrollbar-width: thin;
}
.rd-regalados .rd-pastilla {
    flex: none;
    cursor: pointer;
    font-family: var(--rd-sans);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid #EFE3D9;
    background: #FFFFFF;
    color: #6B5346;
    transition: background .2s, color .2s, border-color .2s;
}
.rd-regalados .rd-pastilla:hover { border-color: #C08A63; }
.rd-regalados .rd-pastilla.is-activa {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #fff;
}
.rd-regalados__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 22px;
    font-family: var(--rd-sans);
    font-size: 13.5px;
    color: #8A7466;
}
.rd-regalados__pie a {
    flex: none;
    font-weight: 700;
    color: var(--rd-accent);
}
.rd-regalados__rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    transition: opacity .2s;
}
.rd-regalados__rejilla.is-cargando { opacity: .45; }
.rd-regalados__vacio {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 0;
    color: #8A7466;
}

/* La tarjeta (imagen 4, sin las estrellitas). */
.rd-regalo {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    color: var(--rd-ink);
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(62, 42, 32, .06);
    transition: transform .25s, box-shadow .25s;
}
.rd-regalo:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(62, 42, 32, .14);
}
.rd-regalo__foto {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F5EDE5;
}
.rd-regalo__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rd-regalo__marcas {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.rd-regalo__marcas .distintivos {
    position: static !important;
    margin: 0 !important;
}
.rd-regalo__top {
    background: rgba(255, 255, 255, .94);
    color: #8E3522;
    font-family: var(--rd-sans);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 6px 10px;
    border-radius: 999px;
}
.rd-regalo__dscto {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--rd-accent);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 8px 12px;
    border-radius: 0 0 0 10px;
}
.rd-regalo__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
}
.rd-regalo__nombre {
    font-family: var(--rd-serif);
    font-size: 19px;
    line-height: 1.25;
    min-height: 24px;
}
.rd-regalo__precio {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-family: var(--rd-sans);
}
.rd-regalo__ahora {
    font-size: 19px;
    font-weight: 700;
    color: var(--rd-ink);
}
.rd-regalo__antes {
    font-size: 13px;
    color: #D2A45C;
    text-decoration: line-through;
}
.rd-regalo__boton {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-family: var(--rd-sans);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rd-accent);
    border: 1.5px solid #EFC9BB;
    border-radius: 999px;
    padding: 9px 0;
    transition: background .2s, color .2s, border-color .2s;
}
.rd-regalo:hover .rd-regalo__boton {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #fff;
}
.rd-regalo__rasgos {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.rd-regalo__rasgo {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #EFDFD2;
    color: #C08A63;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
/* El nombre del rasgo aparece al pasar el mouse, como en la maqueta. */
.rd-regalo__rasgo:after {
    content: attr(data-texto);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--rd-ink);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 11px;
    line-height: 1.35;
    padding: 6px 10px;
    border-radius: 7px;
    width: max-content;
    max-width: 150px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
}
.rd-regalo__rasgo:hover:after { opacity: 1; }
.rd-regalo__rasgo:hover { border-color: #C08A63; }

/* --- BANNERS (imagen 5) ---------------------------------------------------- */
.rd-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 56px var(--rd-gutter, 48px) 0;
}
.rd-promo {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: #F5EDE5;
}
.rd-promo picture,
.rd-promo img {
    display: block;
    width: 100%;
}
.rd-promo img {
    height: auto;
    transition: transform .5s ease;
}
.rd-promo:hover img { transform: scale(1.03); }
.rd-promo--con-texto img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.rd-promo__texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 0 42px;
    background: linear-gradient(to right, rgba(255, 250, 245, .92) 0%, rgba(255, 250, 245, .78) 38%, rgba(255, 250, 245, 0) 64%);
}
.rd-promo__titulo {
    font-family: var(--rd-serif);
    font-size: 36px;
    line-height: 1.12;
    color: var(--rd-ink);
    max-width: 260px;
}
.rd-promo__boton {
    background: #FFFFFF;
    color: var(--rd-ink);
    font-family: var(--rd-sans);
    font-size: 14px;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(62, 42, 32, .14);
    transition: background .2s, color .2s;
}
.rd-promo:hover .rd-promo__boton { background: var(--rd-ink); color: #fff; }

/* --- EL FEED MÁS DULCE (imagen 8) ------------------------------------------ */
.rd-feed {
    padding: 72px 0 0;
}
.rd-feed__titulo {
    text-align: center;
    font-family: var(--rd-sans) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rd-ink);
    margin: 0 16px 26px;
}
.rd-feed__titulo a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.rd-feed__titulo a:hover { color: var(--rd-accent); }
.rd-feed__marco {
    position: relative;
}
.rd-feed__pista {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.rd-feed__pista::-webkit-scrollbar { display: none; }
.rd-feed__pista li {
    flex: 0 0 20%;
    scroll-snap-align: start;
}
.rd-feed__pista a,
.rd-feed__pista picture {
    display: block;
}
.rd-feed__pista img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.rd-feed__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(40, 30, 25, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.rd-feed__flecha[hidden] { display: none; }
.rd-feed__flecha--izq { left: 16px; }
.rd-feed__flecha--der { right: 16px; }

/* --- LO QUE DICEN NUESTROS DULCES CLIENTES (imagen 9) --------------------- */
.rd-opiniones {
    padding: 72px var(--rd-gutter, 48px) 72px;
}
.rd-opiniones h2 {
    text-align: center;
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: 38px;
    color: var(--rd-ink);
    margin: 0 0 40px;
}
.rd-opiniones__fila {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.rd-opinion {
    margin: 0;
    padding: 0 26px;
    text-align: center;
    border-left: 1px solid #D9CABD;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rd-opinion:first-child { border-left: 0; }
.rd-opinion__foto {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 26px;
}
.rd-opinion__estrellas {
    display: flex;
    gap: 4px;
    color: var(--rd-ink);
    margin-bottom: 14px;
}
.rd-opinion blockquote {
    margin: 0 0 10px;
    font-family: var(--rd-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--rd-ink);
    border: 0;
    padding: 0;
}
.rd-opinion figcaption {
    font-family: var(--rd-sans);
    font-weight: 700;
    font-size: 16px;
    color: var(--rd-ink);
}

/* --- TABLETA ---------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rd-regalados__rejilla { grid-template-columns: repeat(3, 1fr); }
    .rd-opiniones__fila { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .rd-opinion:nth-child(3) { border-left: 0; }
    .rd-feed__pista li { flex-basis: 25%; }
    .rd-promo__titulo { font-size: 28px; }
}

/* --- TELÉFONO ------------------------------------------------------------- */
@media (max-width: 767px) {
    /* La foto para teléfono de cada banner llega por <source> y trae su
       propia proporción: aquí no se recorta. */
    .rd-slider__slide img { aspect-ratio: auto; }
    .rd-slider__flecha { width: 38px; height: 38px; }
    .rd-slider__flecha--izq { left: 10px; }
    .rd-slider__flecha--der { right: 10px; }
    .rd-slider__puntos { bottom: 10px; }

    .rd-regalados { margin-top: 36px; padding: 40px 16px 44px; }
    .rd-regalados__cabeza h2 { font-size: 28px; }
    .rd-regalados__pastillas { width: auto; margin: 0 -16px 10px; padding: 5px 16px; }
    .rd-regalados__pie { flex-direction: column; gap: 6px; }
    .rd-regalados__rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rd-regalo { border-radius: 14px; }
    .rd-regalo__cuerpo { padding: 10px 10px 12px; }
    .rd-regalo__nombre { font-size: 15.5px; }
    .rd-regalo__ahora { font-size: 16px; }
    .rd-regalo__boton { margin-top: 12px; }
    .rd-regalo__rasgo { width: 30px; height: 30px; }
    .rd-regalo__dscto { font-size: 9.5px; padding: 6px 8px; }

    .rd-promos { grid-template-columns: 1fr; gap: 12px; padding: 32px 16px 0; }
    .rd-promo__texto { padding: 0 22px; gap: 12px; }
    .rd-promo__titulo { font-size: 24px; max-width: 190px; }
    .rd-promo__boton { padding: 10px 18px; font-size: 13px; }

    .rd-feed { padding-top: 48px; }
    .rd-feed__titulo { font-size: 17px !important; letter-spacing: .1em; }
    .rd-feed__titulo a { display: block; margin-top: 4px; }
    .rd-feed__pista li { flex-basis: 50%; }
    .rd-feed__flecha { width: 38px; height: 38px; }

    .rd-opiniones { padding: 48px 16px; }
    .rd-opiniones h2 { font-size: 27px; margin-bottom: 28px; }
    .rd-opiniones__fila { grid-template-columns: 1fr; row-gap: 34px; }
    .rd-opinion { border-left: 0; padding: 0 8px; }
    .rd-opinion__foto { width: 120px; height: 120px; margin-bottom: 18px; }
}


/* --- Ajustes tras revisar la portada al píxel (27/09/2026) ----------------
 * La hoja tiene dos reglas globales con !important: «todo en la sin serifa»
 * y «todos los h2 en la serifa». Aquí se ganan con más especificidad, y solo
 * dentro de los bloques nuevos. */
body .rd-regalo .rd-regalo__nombre,
body .rd-promo .rd-promo__titulo,
body .rd-regalados .rd-regalados__cabeza h2,
body .rd-opiniones > h2 {
    font-family: var(--rd-serif) !important;
}
body .rd-feed h2.rd-feed__titulo,
body .rd-feed h2.rd-feed__titulo a {
    font-family: var(--rd-sans) !important;
}

/* Las tarjetas alinean fila con fila: el nombre reserva dos líneas y la fila
   de iconos reserva su alto aunque el producto no tenga ninguno. */
.rd-regalo__nombre { min-height: 48px; }
.rd-regalo__precio { margin-top: 0; padding-top: 10px; }
.rd-regalo__rasgos { min-height: 36px; }

/* Los distintivos del panel («Nuevo», «Más vendido») caben en una línea. */
.rd-regalo__marcas .distintivo {
    white-space: nowrap;
    width: auto !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
}

/* Cuantos testimonios haya, centrados: con tres no queda una cuarta columna
   vacía. */
.rd-opiniones__fila {
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    max-width: calc(var(--n, 4) * 330px);
    margin: 0 auto;
}
@media (max-width: 767px) {
    .rd-regalo__nombre { min-height: 40px; }
    .rd-regalo__rasgos { min-height: 30px; }
    .rd-opiniones__fila { grid-template-columns: 1fr; max-width: none; }
}


/* Banner con título: la foto ocupa la derecha y el título va sobre el crema
   de la izquierda, fundido hacia la foto. Así una foto cuadrada de producto
   no queda tapada a medias por el texto. */
.rd-promo--con-texto {
    aspect-ratio: 16 / 10;
    background: #FFFAF5;
}
.rd-promo--con-texto picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
}
.rd-promo--con-texto img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.rd-promo--con-texto .rd-promo__texto {
    background: linear-gradient(to right, #FFFAF5 0%, #FFFAF5 40%, rgba(255, 250, 245, .85) 46%, rgba(255, 250, 245, 0) 62%);
}


/* El buscador tampoco se monta sobre el banner en el teléfono. Quedaba una
   regla vieja con margin-top:-24px que tapaba el borde de abajo del banner y
   sus puntos, justo lo que la clienta pidió evitar («que no tape el banner
   principal»). */
@media (max-width: 767px) {
    body .rd-home .rd-finder { margin-top: 16px !important; }
}


/* --- BANNER IGUAL A LA MAQUETA APROBADA (home1/banners.html) — 27/09/2026 --
 * Medido en la maqueta a 1440 px: caja 1440 x 497 (aspect-ratio 2.9/1),
 * flechas de 44 px a 18 px del borde con blanco al 78 %, puntos de 7 px
 * (el activo de 26 px, terracota; los demás marrón al 28 %) a 16 px del
 * borde de abajo, y la diapositiva DESLIZA en .65 s, no se funde. */
.rd-slider__pista {
    display: flex;
    width: 100%;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.rd-slider__slide,
.rd-slider__slide.is-activa {
    grid-area: auto;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: none;
}
/* La caja toma la forma de los banners que sube la clienta (2000 x 498):
   con 2,9:1 el cover les cortaba el texto dibujado por los lados. */
.rd-slider__slide img {
    aspect-ratio: 2000 / 498;
    object-fit: cover;
    object-position: center;
}
.rd-slider__flecha {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .78);
}
.rd-slider__flecha svg { width: 18px; height: 18px; }
.rd-slider__flecha:hover { background: #fff; transform: translateY(-50%); }
.rd-slider__flecha--izq { left: 18px; }
.rd-slider__flecha--der { right: 18px; }
.rd-slider__puntos { bottom: 16px; }
.rd-slider__punto {
    width: 7px;
    height: 7px;
    background: rgba(62, 42, 32, .28);
    box-shadow: none;
}
.rd-slider__punto.is-activo {
    width: 26px;
    background: var(--rd-accent);
}
@media (max-width: 767px) {
    .rd-slider__slide img { aspect-ratio: auto; }
    .rd-slider__flecha { width: 36px; height: 36px; }
    .rd-slider__flecha--izq { left: 10px; }
    .rd-slider__flecha--der { right: 10px; }
    .rd-slider__puntos { bottom: 10px; }
    /* En el teléfono cada foto trae su alto: la pista se alinea arriba. */
    .rd-slider__pista { align-items: flex-start; }
}

/* Buscador a 30 px del banner, como la maqueta (margin-top:30px). */
@media (min-width: 768px) {
    body .rd-home .rd-finder { margin-top: 30px !important; }
}

/* Respaldo sin JavaScript: el menu mide 180 px desde 1180 de ancho y el
   banner no debe quedar debajo (ver el script de index.php). */
@media (min-width: 1180px) {
    body > main.main.rd-home { margin-top: 180px !important; }
}

/* Feed: el atributo height="600" del <img> ganaba al aspect-ratio y las fotos
   salian de 288 x 600, alargadas. Cuadradas, como la maqueta. */
.rd-feed__pista img { height: auto !important; aspect-ratio: 1 / 1; }


/* --- BUSCADOR DELGADO (observaciones 01/10/2026) ---------------------------
 * Sin rótulos: el nombre del campo es la primera opción. Una sola fila baja.
 * En el teléfono va plegado: título, guiones y BUSCAR; al tocarlo se abren
 * las preguntas. */
body .rd-home .rd-finder__box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
}
.rd-finder__title { flex: none; }
.rd-finder__title strong { font-size: 19px !important; }
.rd-finder__campos {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: center;
}
.rd-finder__campos select.rd-field {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--rd-ink);
}
.rd-finder__guion,
.rd-finder__abrir { display: none; }

@media (max-width: 767px) {
    body .rd-home .rd-finder__box {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px;
    }
    .rd-finder__title {
        border-right: 0 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
    }
    .rd-finder__guion {
        display: block;
        flex: 1;
        min-width: 24px;
        border-top: 2px dashed #CBB8A6;
    }
    .rd-finder__abrir {
        display: block;
        flex: none;
        border: 0;
        border-radius: 4px;
        background: #7A5E4C;
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
        padding: 12px 18px;
        cursor: pointer;
        min-height: 44px;
    }
    .rd-finder__campos {
        display: none;
        flex-basis: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .rd-finder__box.is-abierto .rd-finder__campos { display: grid; }
    .rd-finder__box.is-abierto .rd-finder__abrir { background: var(--rd-ink); }
    .rd-finder__campos .rd-btn { width: 100%; }
}


/* --- Observaciones 01/10/2026 --------------------------------------------- */
/* Tarjeta: el precio justo debajo del nombre (había mucho aire). */
.rd-regalo__nombre { min-height: 0 !important; }
.rd-regalo__precio { margin-top: 6px !important; padding-top: 0 !important; }
.rd-regalo__boton { margin-top: 14px; }
.rd-regalo__cuerpo { padding-bottom: 14px; }

/* Feed: la tipografía de antes (serif, sin mayúsculas forzadas), icono de
   Instagram al lado, y la cuenta debajo en el mismo color y en minúscula. */
body .rd-feed h2.rd-feed__titulo,
body .rd-feed h2.rd-feed__titulo span {
    font-family: var(--rd-serif) !important;
    font-weight: 400 !important;
    font-size: 34px !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
}
.rd-feed__titulo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 16px 6px !important;
    color: var(--rd-ink);
}
/*
 * 02/10/2026, la clienta: "he alineado el logo de IG que estaba un poquito
 * mas abajo, y juntado un poco mas ambos textos".
 *
 * El icono estaba centrado con la CAJA de la linea, no con las letras: en
 * Newsreader las mayusculas van altas dentro de la linea. Medido a 1440px:
 * centro del icono 449.9, centro de las mayusculas 445.9. Sube esos 4px.
 * Y la cuenta se pega al titulo: 6px de margen + el interlineado de 40.8px
 * dejaban ~10px de aire visible; ahora la linea va a 1.05.
 */
body .rd-feed h2.rd-feed__titulo {
    line-height: 1.05 !important;
    margin-bottom: 2px !important;
}
.rd-feed__ig { flex: none; transform: translateY(-4px); }
.rd-feed__cuenta {
    display: block;
    text-align: center;
    margin: 0 0 24px;
    font-size: 15px;
    color: var(--rd-ink) !important;
    text-transform: lowercase;
    text-decoration: none;
}
.rd-feed__cuenta:hover { text-decoration: underline; }

@media (max-width: 767px) {
    /* Sin «Regalar» en el teléfono: la tarjeta entera ya es el enlace. */
    .rd-regalo__boton { display: none; }
    body .rd-feed h2.rd-feed__titulo,
    body .rd-feed h2.rd-feed__titulo span { font-size: 25px !important; }
    .rd-feed__ig { width: 24px; height: 24px; }
}

/* Teléfono: sin «Regalar», una fila de iconos vacía no deja hueco. */
@media (max-width: 767px) {
    .rd-regalo__rasgos:not(:has(.rd-regalo__rasgo)) { display: none; }
    .rd-regalo__rasgos { margin-top: 10px; }
}

/* -----------------------------------------------------------------------------
 * VISTA PREVIA DE LOS FONDOS DE LA BARRA DE SELLOS (01/10/2026)
 *
 * Solo con ?sellos=opciones (index.php pone .rd-perks--opciones). La barra
 * rota entre las cuatro opciones que eligio la clienta del lienzo de diseño:
 * A rosa empolvado, B blanco con filete, C terracota y D caramelo suave.
 * Sin el parametro nada de esto aplica y la barra sigue marron.
 * -------------------------------------------------------------------------- */
.rd-perks__opcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto 18px;
    padding: 0 var(--rd-gutter);
}
body .rd-perks .rd-perks__opcion-nombre {
    font-family: var(--rd-serif) !important;
    font-size: 26px;
    color: var(--rd-ink);
}
.rd-perks__opcion-puntos { display: flex; align-items: center; gap: 10px; }
.rd-perks__opcion-puntos button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(62, 42, 32, .25);
    cursor: pointer;
    transition: width .3s, background-color .3s;
}
.rd-perks__opcion-puntos button.is-activo { width: 34px; background: #A8432C; }

.rd-perks--opciones .rd-perks__grid { transition: background-color .7s ease; }
.rd-perks--opciones .rd-perks__grid .rd-perk strong,
.rd-perks--opciones .rd-perks__grid .rd-perk span:not(.rd-perk__icon),
.rd-perks--opciones .rd-perk > .rd-perk__icon { transition: color .7s ease, background-color .7s ease, border-color .7s ease; }

/* A · Rosa empolvado */
.rd-perks--a .rd-perks__grid { background: #F2D7CC; }
.rd-perks--a .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--a .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #5E4436; }
.rd-perks--a .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/* B · Blanco con filete */
.rd-perks--b .rd-perks__grid { background: #FFFFFF; box-shadow: inset 0 1px 0 #E4D8CE, inset 0 -1px 0 #E4D8CE; }
.rd-perks--b .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--b .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #6B5346; }
.rd-perks--b .rd-perk > .rd-perk__icon { background: #F7E9E2; border-color: #F7E9E2; }

/* C · Terracota */
.rd-perks--c .rd-perks__grid { background: #A8432C; }
.rd-perks--c .rd-perks__grid .rd-perk strong { color: #FFFFFF; }
.rd-perks--c .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #FBE9E2; }
.rd-perks--c .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/* D · Caramelo suave */
.rd-perks--d .rd-perks__grid { background: #EBCFA6; }
.rd-perks--d .rd-perks__grid .rd-perk strong { color: #3E2A20; }
.rd-perks--d .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #4F3A2D; }
.rd-perks--d .rd-perk > .rd-perk__icon { background: #FFFFFF; border-color: #FFFFFF; }

/*
 * E · Terracota sin circulo (02/10/2026). La clienta, sobre la C: "sacando
 * esos circulos y solo usando el dibujito, crecerlo un poco mas".
 *
 * Sin el disco, el dibujo queda directo sobre la terracota. Los svg del panel
 * son marron macizo (#6B4423) y sobre #A8432C casi no se ven, asi que se
 * pasan a blanco con filter: es una sola tinta, brightness(0) la lleva a
 * negro e invert(1) a blanco, sin tocar los archivos.
 *
 * Sube de 66 a 96px: el disco ya no limita, y es lo que hace falta para que
 * el texto que llevan dentro -"20 AÑOS", "FRESCO 100% NATURAL"- se lea.
 */
.rd-perks--e .rd-perks__grid { background: #A8432C; }
.rd-perks--e .rd-perks__grid .rd-perk strong { color: #FFFFFF; }
.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) { color: #FBE9E2; }
.rd-perks--e .rd-perk > .rd-perk__icon {
    width: 104px;
    height: 104px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;
}
.rd-perks--e .rd-perk__icon img {
    width: 96px;
    height: 96px;
    filter: brightness(0) invert(1);
}
.rd-perks--e .rd-perk__icon svg {
    width: 44px;
    height: 44px;
    filter: brightness(0) invert(1);
}

/*
 * Ajuste del 02/10/2026 sobre la maqueta de la clienta: "he juntado textos e
 * icono y adelgazado un poco esa parte". Medido sobre su captura y llevado a
 * 1366px: la franja baja de ~300 a ~266px de alto, el dibujo queda a 12px
 * del titulo, titulo y bajada casi pegados, y la bajada con interlineado
 * corto y un punto mas de peso, que en su maqueta se lee mas firme.
 */
.rd-perks--e .rd-perks__grid { padding-top: 46px; padding-bottom: 46px; }
.rd-perks--e .rd-perk { gap: 12px; }
.rd-perks--e .rd-perk > .rd-perk__icon { width: 100px; height: 100px; }
.rd-perks--e .rd-perk__icon img { width: 100px; height: 100px; }
.rd-perks--e .rd-perk strong { margin-bottom: 2px; }
.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
    line-height: 1.3;
    font-weight: 500;
}

@media (max-width: 767px) {
    body .rd-perks .rd-perks__opcion-nombre { font-size: 20px; }
}

/* -----------------------------------------------------------------------------
 * BUSCADOR: AJUSTES DEL 01/10/2026 (TARDE)
 *
 * 1. «El regalo perfecto» y «en tres respuestas» más juntos.
 * 2. Los nombres de los campos sin negrita y en un marrón más bajito: «jala
 *    mucho la vista».
 * 3. El mismo aire abajo que arriba: el banner queda a 30 px de la caja y la
 *    sección siguiente arrancaba a 56. Se iguala a 30.
 * -------------------------------------------------------------------------- */
body .rd-home .rd-finder__title strong { line-height: 1.05 !important; }
body .rd-home .rd-finder__title span { margin-top: 2px !important; line-height: 1.2; }

body .rd-home .rd-finder__campos select.rd-field {
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
}

@media (min-width: 768px) {
    body .rd-home .rd-finder + .rd-regalados { margin-top: 30px !important; }
}

/* La bajada con el mismo grosor que el título (01/10/2026). */
body .rd-home .rd-finder__title span { font-weight: 700 !important; }

/* -----------------------------------------------------------------------------
 * TARJETA MÁS CORTA (01/10/2026, audio de la clienta)
 *
 * Al juntar nombre y precio esperaba que la tarjeta se acortara, y casi no se
 * notaba: el cuerpo seguía en 189 px porque los iconos van en una fila propia
 * debajo del botón. En computadora los iconos pasan a la derecha del precio,
 * en la misma línea, y el cuerpo baja a unos 135 px. La foto no cambia:
 * sigue cuadrada.
 *
 * En el teléfono no: la tarjeta mide ~170 px y cuatro iconos no caben al lado
 * del precio. Allí ya se quitó «Regalar».
 * -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    body .rd-home .rd-regalo__cuerpo {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
        align-content: start;
    }
    body .rd-home .rd-regalo__nombre { grid-column: 1 / -1; grid-row: 1; }
    body .rd-home .rd-regalo__precio { grid-column: 1; grid-row: 2; }
    /*
     * 02/10/2026: los iconos VUELVEN ABAJO, debajo de «Regalar», como en el
     * diseño. La clienta: con precio en oferta y los cuatro iconos activos,
     * al lado del precio no caben. Se queda lo otro: nombre y precio juntos.
     */
    body .rd-home .rd-regalo__boton { grid-column: 1 / -1; grid-row: 3; margin-top: 12px !important; }
    body .rd-home .rd-regalo__rasgos {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 10px !important;
        min-height: 0 !important;
    }
}

/* Sin el borde negro del foco al pulsar una pastilla (01/10/2026). */
body .rd-home .rd-pastilla,
body .rd-home .rd-pastilla:focus,
body .rd-home .rd-pastilla:focus-visible,
body .rd-home .rd-pastilla:active { outline: none !important; }

/* Teléfono: el texto del icono se abre al tocarlo (index.php), no con :hover,
   que en pantallas táctiles se queda pegado. */
.rd-regalo__rasgo.is-abierto:after { opacity: 1; }
.rd-regalo__rasgo.is-abierto { border-color: #C08A63; }
@media (hover: none) {
    .rd-regalo__rasgo:hover:not(.is-abierto):after { opacity: 0; }
}

/* En el teléfono el texto no va en globito -encima tapaba el precio, debajo
   lo recortaba la tarjeta-: index.php lo escribe como una línea dentro de la
   tarjeta, bajo los iconos (.rd-regalo__rasgo-nota). */
@media (hover: none) {
    .rd-regalo__rasgo:after { display: none; }
    .rd-regalo__rasgos { flex-wrap: wrap; }
}
.rd-regalo__rasgo-nota {
    flex: 1 0 100%;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--rd-ink-2);
}

/* (02/10/2026) Quitado el globito alineado a la derecha: los iconos ya no van
   al lado del precio sino debajo, a la izquierda, como en el resto del sitio. */

/* -----------------------------------------------------------------------------
 * ADORNOS LATERALES (.cont-parallax): SIN EL RECUADRO BLANCO (02/10/2026)
 *
 * El oso, la caja de regalo, etc. de la ficha de producto -y de nosotros,
 * ocasiones, trabaja-con-nosotros- son JPG con fondo blanco, hechos para la
 * pagina blanca de antes. Sobre el beige del rediseño se veian como cajas.
 *
 * multiply deja el blanco del archivo transparente y conserva el trazo. Donde
 * el fondo sigue siendo blanco el resultado es identico, asi que no hace falta
 * acotarlo a la ficha.
 *
 * Va en el CONTENEDOR y no en el <img>: .cont-parallax lleva z-index:-1, que
 * abre su propio contexto de apilamiento, y dentro de el la imagen solo se
 * mezcla con el vacio. Probado en el img: computaba multiply y seguia blanco.
 * -------------------------------------------------------------------------- */
.cont-parallax {
    mix-blend-mode: multiply;
}

/* =============================================================================
 * CATALOGO, OBSERVACIONES DEL DOCX "DISENO WEB" (02/10/2026)
 *
 * Etapa 3 de informe/diseno-web-docx/PLAN.md. Escritorio primero: el
 * responsive no esta aprobado, solo se cuida que no se rompa.
 * ========================================================================== */

/* --- 1. Banner con aire arriba; titulo sin serif y en mayusculas ----------
 * "La imagen debe tener un poquito de margen arriba, esta muy pegada al menu."
 * El titulo, como su referencia (Cheryl's): palo seco, mayusculas, pesado.
 * El color se queda: "el color esta bien como esta actualmente". */
/* La cabecera fija mide 180px y el <main> arranca en 148 (margin-top:150 de
 * index.css, pensado para la cabecera vieja): 32px del banner quedaban debajo
 * del menu. 72 = esos 32 + 40 de aire de verdad. */
.sct-cabecera-catalogo {
    /* 03/10/2026, mockup de la clienta: menos margen arriba y abajo del
     * banner. 32px quedan bajo la cabecera fija; se ven 14. */
    padding-top: 46px !important;
    padding-bottom: 0 !important;
}
.sct-cabecera-catalogo + .sct-busqueda {
    padding-top: 16px !important;
    margin-bottom: 22px !important;
}
.sct-cabecera-catalogo .cabecera-cat-banner {
    margin-bottom: 0 !important;
}
.sct-cabecera-catalogo .cabecera-cat-info h1,
.sct-cabecera-catalogo h1.title-busqueda {
    font-family: var(--rd-sans) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(24px, 2.3vw, 34px) !important;
    line-height: 1.15 !important;
}

/* --- 2. Buscador: el campo con la forma de los de la web --------------- */
.sct-busqueda .select select#idOcasion {
    border: 1px solid var(--rd-line-2) !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: var(--rd-ink-2) !important;
    font-family: var(--rd-sans) !important;
    letter-spacing: .02em !important;
}
.sct-busqueda .select select#idOcasion:focus {
    border-color: var(--rd-accent) !important;
    outline: none;
}

/* --- 3. TARJETA CLASICA DEL CATALOGO (03/10/2026, docx imagen 18) ------
 * La clienta: "No usar este formato que tiene un recuadro blanco abajo. Usar
 * el clasico de foto y abajo nombre y debajo precio" (referencia: Cheryl's /
 * enviaflores). Sin caja: foto redondeada, nombre en palo seco y el precio
 * debajo. "Regalar" aparece sobre la foto al pasar el mouse. Aplica a todos
 * los listados que usan productos.php (catalogo, ocasion, buscador, ofertas).
 * La tarjeta de la portada no cambia. */
.content-products-img:before {
    display: none !important;
}
.content-products-foto {
    border-radius: 16px !important;
}
.description-products-index {
    padding: 12px 2px 6px !important;
}
.description-products-index ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 4px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}
.description-products-index .title-dcpt-product {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    /* Otra regla le daba flex-basis 100%: en columna eso lo estiraba a todo
     * el alto y dejaba ~45px entre nombre y precio. */
    flex: 0 0 auto !important;
}
.title-dcpt-product a {
    font-family: var(--rd-sans) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--rd-ink) !important;
}
.description-products-index .precio-prd {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    gap: .3em; /* en flex se pierde el espacio de "S/ 87" */
}
.precio-prd,
.precio-prd span {
    font-family: var(--rd-sans) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--rd-ink) !important;
}
.precio-prd.precio-antes,
.precio-prd.precio-antes span {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
    text-decoration: line-through;
}
.description-products-index .rd-regalo__boton--listado {
    display: none !important;
}

/* "Regalar" sobre la foto, al pasar el mouse (en el telefono, siempre). */
.content-products-foto .rd-pill-regalar--foto {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 8px);
    z-index: 6;
    background: #fff;
    color: var(--rd-accent);
    border-radius: 999px;
    padding: 9px 26px;
    font-family: var(--rd-sans);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(62, 42, 32, .18);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease, background .2s, color .2s;
}
.content-products-img:hover .rd-pill-regalar--foto {
    opacity: 1;
    transform: translate(-50%, 0);
}
.content-products-foto .rd-pill-regalar--foto:hover {
    background: var(--rd-accent);
    color: #fff;
}
@media (hover: none) {
    .content-products-foto .rd-pill-regalar--foto {
        opacity: 1;
        transform: translate(-50%, 0);
        padding: 7px 18px;
        font-size: 13px;
        bottom: 10px;
    }
}

/* El velo viejo de index.css (fondo claro + "VER DETALLE") no sale; el
 * enlace transparente se queda para que toda la foto lleve a la ficha. */
.content-products-img:hover {
    background: transparent !important;
}
.content-products-img .hovers-busqueda {
    background: transparent !important;
    opacity: 0 !important;
}
.content-products-img .hovers-busqueda .detal {
    display: none !important;
}
/* index.css encogia la foto al 90% al pasar el mouse. */
.content-products-img .content-products-foto img.img-prod {
    transition: transform .45s ease !important;
}
.content-products-img:hover .content-products-foto img.img-prod {
    transform: scale(1.04) !important;
}

/* =============================================================================
 * FICHA DE PRODUCTO, OBSERVACIONES DEL DOCX "DISENO WEB" (02/10/2026)
 *
 * Etapa 4 de informe/diseno-web-docx/PLAN.md, con la lectura corregida de la
 * imagen 27: lo que pide "mas chico y discreto" es la miga de pan.
 * ========================================================================== */

/* --- 1. Fondo blanco --------------------------------------------------- */
body:has(.rd-ficha),
body:has(.rd-ficha) .rd-ficha,
body:has(.rd-ficha) .complement-pedido,
body:has(.rd-ficha) .rd-relacionados {
    background: #fff !important;
}

/* --- 3. Miga de pan chica y discreta ----------------------------------- */
.rd-ficha .rd-miga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    font-family: var(--rd-sans);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rd-ink-3);
}
.rd-ficha .rd-miga a {
    color: var(--rd-ink-3) !important;
    font-size: 13px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rd-line-3);
}
.rd-ficha .rd-miga a:hover {
    color: var(--rd-ink) !important;
}
.rd-ficha .rd-miga span {
    font-size: 13px !important;
    color: var(--rd-ink-3);
}

/* --- 6. Titulo mas chico y sin serif; descripcion mas grande -----------
 * Referencia 1800flowers: palo seco, peso medio-alto, y el cuerpo a 17px con
 * interlineado amplio. */
.rd-ficha .detail-detail h1 {
    /* docx: "un poco mas chico y en una letra sin serif" (ref. 1800flowers). */
    font-family: var(--rd-sans) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em;
    color: var(--rd-ink) !important;
    margin: 0 0 10px !important;
}
.rd-ficha .rd-descripcion,
.rd-ficha .rd-descripcion p,
.rd-ficha .rd-descripcion li,
.rd-ficha .rd-descripcion span {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--rd-ink-2);
}

/*
 * CABECERA DE LA FICHA: RITMO (02/10/2026). Miga, titulo, precio y nota
 * quedaban con huecos desiguales (14 / 10 / pegada) y una linea punteada
 * naranja cortando entre el precio y su nota. Ahora es un solo bloque con
 * escalones regulares: miga 12, titulo 8, precio 8, nota; y la separacion
 * con la descripcion la da un filete fino DEBAJO de la nota.
 */
.rd-ficha .rd-miga { margin-bottom: 12px !important; }
.rd-ficha .detail-detail h1 { margin-bottom: 8px !important; }
.rd-ficha .preciodetal {
    border-bottom: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    align-items: baseline !important;
}
.rd-ficha .preciodetal h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.rd-ficha .preciodetal .price-normal {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-3) !important;
}
.rd-ficha .rd-nota-precio {
    display: block;
    margin: 0 0 0 !important;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rd-line);
    font-size: 13px !important;
    color: var(--rd-ink-3) !important;
}
.rd-ficha .rd-descripcion { margin-top: 20px !important; }

/* Con oferta, el precio actual primero y el anterior tachado despues, en el
 * mismo orden que las tarjetas de producto. */
.rd-ficha .preciodetal .price-desc { order: 1; }
.rd-ficha .preciodetal .price-normal { order: 2; margin-left: 10px; }

/* --- 2. Intro + "Ver descripcion" -------------------------------------- */
.rd-ficha .rd-descripcion {
    position: relative;
    max-height: 9.5em;
    overflow: hidden;
    margin-top: 18px;
}
.rd-ficha .rd-descripcion:not(.is-abierta):after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.4em;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.rd-ficha .rd-descripcion.is-abierta {
    max-height: none;
}
.rd-ficha .rd-descripcion__ver {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--rd-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
/* Sin el anillo azul del navegador al pulsarlo, y el texto en terracota: una
 * regla vieja pintaba los <span> de la ficha en naranja #FFB466. */
.rd-ficha .rd-descripcion__ver,
.rd-ficha .rd-descripcion__ver:focus,
.rd-ficha .rd-descripcion__ver:active {
    outline: none !important;
    box-shadow: none !important;
}
.rd-ficha .rd-descripcion__ver span,
.rd-ficha .rd-descripcion__ver svg {
    color: var(--rd-accent) !important;
    font-size: 15px !important;
}
.rd-ficha .rd-descripcion__ver[hidden] {
    display: none;
}
.rd-ficha .rd-descripcion__ver svg {
    transition: transform .2s ease;
}
.rd-ficha .rd-descripcion__ver[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* --- 4. Boton solo "Agregar al carrito", a todo el ancho --------------- */
.rd-ficha .rd-compra-boton {
    flex: 1 1 100%;
}

/* --- 7. Sellos con icono bajo el boton --------------------------------- */
.rd-ficha .rd-sellos {
    list-style: none;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--rd-line);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}
/* .detail-detail ul li:before pinta la viñeta rosada de "Que incluye". */
.rd-ficha .rd-sellos li:before {
    display: none !important;
    content: none !important;
}
.rd-ficha .rd-sello {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 170px;
}
.rd-ficha .rd-sello__icono {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rd-bg-warm);
    color: var(--rd-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rd-ficha .rd-sello__icono svg,
.rd-ficha .rd-sello__icono img {
    width: 21px;
    height: 21px;
    display: block;
}
.rd-ficha .rd-sello__txt {
    font-family: var(--rd-sans);
    font-size: 14px !important;
    line-height: 1.35;
    color: var(--rd-ink-2) !important;
}

/* --- 5. Complementos: fotos cuadradas, titulo con bajada, clic = grande - */
.complement-pedido .title-complement h2 {
    margin-bottom: 2px !important;
}
.complement-pedido .rd-compl-bajada {
    margin: 0 0 18px;
    font-family: var(--rd-sans);
    font-size: 15px;
    color: var(--rd-ink-3);
}
.complement-pedido .item.img-gallery figure {
    aspect-ratio: 1 / 1;
    height: auto !important;
    /* Una regla anterior le daba flex:1 para llenar la tarjeta: con todas las
     * tarjetas a la altura de la mas alta, la foto salia vertical. */
    flex: none !important;
    min-height: 0 !important;
    overflow: hidden;
    cursor: zoom-in;
    margin: 0;
}
.complement-pedido .item.img-gallery figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .4s ease;
}
/* Un <div class="hovers"> vacio, de la version vieja, cubre la foto y se
 * quedaba con el clic: la foto grande no se abria nunca. Que lo deje pasar. */
.complement-pedido .item.img-gallery .hovers {
    pointer-events: none !important;
}
/* Las tarjetas se igualaban a la mas alta -la de taza personalizada, con su
 * campo de nombre- y a las demas les quedaban ~135px en blanco bajo el
 * precio. Ahora cada una mide lo que su contenido; como foto, nombre y precio
 * miden lo mismo en todas, la fila se sigue leyendo alineada. */
.complement-pedido .owl-stage {
    align-items: flex-start !important;
}
.complement-pedido .owl-item,
.complement-pedido .item.img-gallery {
    height: auto !important;
}
.complement-pedido .item.img-gallery figure:hover img {
    transform: scale(1.04);
}

/* margin:auto e inset:0 a mano: index.css pone `* { margin: 0 }` y eso le
 * quita al <dialog> el centrado que trae el navegador. */
.rd-compl-dlg {
    position: fixed;
    inset: 0;
    margin: auto !important;
    height: fit-content;
    max-height: calc(100vh - 32px);
    width: min(760px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(62, 42, 32, .28);
    overflow: hidden;
}
.rd-compl-dlg[open] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.rd-compl-dlg::backdrop {
    background: rgba(44, 29, 22, .45);
}
.rd-compl-dlg__foto {
    aspect-ratio: 1 / 1;
    background: var(--rd-bg-warm);
}
.rd-compl-dlg__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rd-compl-dlg__datos {
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--rd-sans);
}
body .rd-compl-dlg h3.rd-compl-dlg__nombre,
.rd-compl-dlg__nombre {
    margin: 0;
    font-family: var(--rd-sans) !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rd-ink);
    text-transform: none;
}
.rd-compl-dlg__desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--rd-ink-2);
}
.rd-compl-dlg__precio {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--rd-ink);
}
.rd-compl-dlg__elegir {
    margin-top: auto;
    height: 50px;
    border: 0;
    border-radius: 999px;
    background: var(--rd-accent);
    color: #fff;
    font-family: var(--rd-sans);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.rd-compl-dlg__elegir:hover {
    background: var(--rd-accent-dark);
}
.rd-compl-dlg__elegir.is-elegido {
    background: #fff;
    color: var(--rd-accent);
    box-shadow: inset 0 0 0 1.5px var(--rd-accent-line);
}
.rd-compl-dlg__cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(62, 42, 32, .15);
    font-size: 22px;
    line-height: 1;
    color: var(--rd-ink);
    cursor: pointer;
}
@media (max-width: 640px) {
    .rd-compl-dlg[open] {
        grid-template-columns: 1fr;
    }
    .rd-compl-dlg__datos {
        padding: 22px 20px 20px;
    }
}

/* -----------------------------------------------------------------------------
 * COMPLEMENTO = MISMA TARJETA QUE LA DE PRODUCTO (02/10/2026)
 *
 * Mismo componente que .rd-regalo de la portada y el listado: tarjeta blanca
 * de radio 20 sin borde, nombre en Newsreader en caja normal, precio en Karla
 * con el mismo formato ("S/ 3.50", "S/ 15"), y la accion debajo a todo el
 * ancho como pildora de contorno. Aqui la accion dice "Agregar" porque marca
 * el complemento; al elegirlo se rellena en terracota y dice "Elegido".
 * -------------------------------------------------------------------------- */
.complement-pedido .item.img-gallery {
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 0 rgba(62, 42, 32, .06), 0 0 0 1px var(--rd-line);
    overflow: hidden;
}
.complement-pedido .item.img-gallery:has(input:checked) {
    box-shadow: 0 0 0 1.5px var(--rd-accent);
}
.complement-pedido .item.img-gallery figure {
    border-radius: 0 !important;
}
.complement-pedido .info-complement {
    padding: 14px 16px 16px !important;
}
body .complement-pedido .title-prod-cmpl {
    font-family: var(--rd-serif) !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    color: var(--rd-ink) !important;
}
body .complement-pedido .title-prod-cmpl small {
    margin-top: 2px;
    font-family: var(--rd-sans) !important;
    font-size: 13px !important;
    color: var(--rd-ink-3) !important;
}
.complement-pedido .rd-compl-pie {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 6px !important;
}
body .complement-pedido .rd-compl-pie .prc-compl,
body .complement-pedido .rd-compl-pie .prc-compl span {
    font-family: var(--rd-sans) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--rd-ink) !important;
}
body .complement-pedido .rd-compl-pie .btn-agregar {
    width: 100% !important;
    justify-content: center !important;
    padding: 9px 0 !important;
    border: 1.5px solid var(--rd-accent-line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--rd-accent) !important;
    font-family: var(--rd-sans) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
body .complement-pedido .rd-compl-pie .btn-agregar .rd-compl-txt {
    font-size: 12.5px !important;
    color: inherit !important;
}
body .complement-pedido .item.img-gallery:hover .rd-compl-pie .btn-agregar,
body .complement-pedido .rd-compl-pie .btn-agregar:has(input:checked) {
    background: var(--rd-accent) !important;
    border-color: var(--rd-accent) !important;
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
 * FOTO DE LA FICHA ENTRE ~770 Y 991px (02/10/2026)
 *
 * Una regla anterior le pone max-width:650px a la foto, y la caja .gallery-img
 * tiene 650 de alto fijo. En esas medidas la columna mide 690-848px: la foto
 * se quedaba en 650x650 arrimada a la izquierda y se veia el fondo rosado a
 * la derecha y abajo. La foto llena siempre su caja cuadrada.
 * -------------------------------------------------------------------------- */
.rd-ficha .gallery-detail .tab-content .gallery-img {
    width: 100% !important;
    height: 100% !important;
}
.rd-ficha .gallery-detail .tab-content .gallery-img img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
 * SIN CONTORNO DE FOCO EN TODA LA WEB (02/10/2026, pedido explicito)
 *
 * El aro azul del navegador -y el box-shadow de foco de Bootstrap- salia al
 * pulsar enlaces y botones, y en las ventanas (dialog) sobre la X, porque el
 * navegador le pasa el foco al abrir. Se quita en enlaces, botones, campos de
 * seleccion y etiquetas. Los campos de texto conservan su borde de foco
 * propio (cambia el color del borde), que no es este contorno.
 * -------------------------------------------------------------------------- */
a, a:focus, a:active, a:focus-visible,
button, button:focus, button:active, button:focus-visible,
[role="button"], [role="button"]:focus, [role="button"]:focus-visible,
label:focus, label:focus-within, summary:focus, summary:focus-visible,
select:focus, select:focus-visible,
input[type="checkbox"]:focus, input[type="radio"]:focus,
.btn:focus, .btn:active, .btn:focus-visible,
dialog:focus, dialog *:focus {
    outline: none !important;
}
/* Solo el anillo de Bootstrap (.btn): otros botones usan box-shadow como
 * borde a proposito y se quedarian sin el al pulsarlos. */
.btn:focus, .btn:active:focus, .btn.focus {
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
 * FICHA: MINI FOTOS A LA IZQUIERDA EN PC (docx "Diseño WEB", producto, imagen
 * 24, 03/10/2026). "En PC las mini fotos a la izquierda. Debemos usar el
 * espacio de la pagina." Como enviaflores: columna de miniaturas a la
 * izquierda y la foto grande a su lado ocupando el resto de la columna. En el
 * telefono se quedan debajo de la foto.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* La seccion medía el 82% de la pantalla (1181 de 1440px) por una regla
     * vieja de container-fluid: a los lados quedaban 130px vacios. */
    .sct-detail-product.rd-ficha {
        width: 100% !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .rd-ficha > .row {
        grid-template-columns: 1.2fr .8fr;
        gap: 56px;
    }
    .rd-ficha .gallery-detail > .row {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .rd-ficha .gallery-detail .regalb {
        order: 0;
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        width: 92px;
    }
    .rd-ficha .gallery-detail > .row > .col-12.col-md-10 {
        grid-column: 2;
        grid-row: 1;
    }
    .rd-ficha .gallery-detail #v-pills-tab {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* -----------------------------------------------------------------------------
 * MENU: MISMA SEPARACION A LOS DOS LADOS DEL LOGO (docx, imagen 13, 03/10/2026)
 * "Algunos se ven mas separados que otros." Cada mitad es una lista con
 * space-between que reparte su sobrante por su cuenta; la derecha tiene textos
 * mas largos (455px contra 410), asi que le tocaban huecos de 33px y a la
 * izquierda de 44. Ahora el hueco es fijo e igual, y cada mitad se arrima al
 * logo. "REGALOS CORPORATIVOS" sigue en una linea.
 * -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    #navbarSupportedContent > ul.navbar-nav {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: clamp(10px, calc(4.2vw - 24px), 36px);
    }
    #navbarSupportedContent > ul.navbar-nav:first-child {
        justify-content: flex-end !important;
    }
    #navbarSupportedContent > ul.navbar-nav > li.nav-item > a.nav-link {
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------------------------
 * FLECHAS PARA PASAR FOTOS EN EL LISTADO (docx, catalogo punto 4, 03/10/2026)
 * Los mismos circulos blancos de las flechas de los carruseles. Solo en PC
 * (con raton) y al pasar sobre la tarjeta; en el telefono no se ven.
 * -------------------------------------------------------------------------- */
.content-products-foto .rd-foto-flecha {
    display: none;
}
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-foto-flecha {
        position: absolute;
        top: 50%;
        z-index: 7;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .94);
        color: var(--rd-ink);
        box-shadow: 0 4px 14px rgba(62, 42, 32, .18);
        cursor: pointer;
        opacity: 0;
        transform: translateY(-50%);
        transition: opacity .2s ease, background .2s ease;
    }
    .content-products-foto .rd-foto-flecha--izq { left: 12px; }
    .content-products-foto .rd-foto-flecha--der { right: 12px; }
    .content-products-img:hover .content-products-foto .rd-foto-flecha {
        opacity: 1;
    }
    .content-products-foto .rd-foto-flecha:hover {
        background: #fff;
    }
}


/* =============================================================================
 * OBSERVACIONES DE CATALOGO Y PRODUCTO (05/10/2026)
 *
 * Tres paginas de capturas con comentarios de la clienta. Cada bloque cita el
 * pedido. Va al final para ganar a las reglas del 02-03/10 sin tocarlas.
 * ========================================================================== */

/* --- CATALOGO 1. "Debe estar sobre fondo blanco mejor" ------------------- */
body:has(main.catalogo-full),
main.catalogo-full,
main.catalogo-full .sct-cabecera-catalogo,
main.catalogo-full .sct-busqueda,
main.catalogo-full .sct-products {
    background-color: #fff !important;
}

/* --- CATALOGO 2. Fotos en una tira: el dedo en el telefono, flechas en PC - */
/* Absoluta: con height:100% contra el aspect-ratio de la caja medía 0 de alto
 * y el navegador no la dejaba desplazar. */
.content-products-foto .rd-fotos__pista {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: inherit;
}
.content-products-foto .rd-fotos__pista::-webkit-scrollbar {
    display: none;
}
.content-products-foto .rd-fotos__foto {
    flex: 0 0 100%;
    height: 100%;
    display: block;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}
.content-products-foto .rd-fotos__foto picture {
    display: block;
    height: 100%;
}
/* Una regla vieja deja la foto en absolute: sin esto las fotos de la tira se
 * apilaban en la misma esquina y se veia la ultima, mas angosta que la caja. */
.content-products-foto .rd-fotos__foto {
    position: relative;
}
.content-products-foto .rd-fotos__foto img.img-prod {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover;
}

/* "Usar una transicion mas suave cuando aparezcan las flechas" (enviaflores):
 * aparecen con un fundido mas lento y entrando desde el borde, no de golpe. */
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-foto-flecha {
        transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
                    transform .45s cubic-bezier(.22, .61, .36, 1),
                    background .2s ease !important;
    }
    .content-products-foto .rd-foto-flecha--izq {
        transform: translate(-10px, -50%) !important;
    }
    .content-products-foto .rd-foto-flecha--der {
        transform: translate(10px, -50%) !important;
    }
    .content-products-img:hover .content-products-foto .rd-foto-flecha {
        transform: translate(0, -50%) !important;
    }
}

/* Puntos: solo donde no hay flechas (telefono y tablet). */
.content-products-foto .rd-fotos__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}
.content-products-foto .rd-fotos__puntos i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0 .5px rgba(62, 42, 32, .18);
    transition: width .25s ease, background .25s ease;
}
.content-products-foto .rd-fotos__puntos i.is-activo {
    width: 16px;
    background: #fff;
}
@media (hover: hover) and (min-width: 992px) {
    .content-products-foto .rd-fotos__puntos {
        display: none;
    }
}

/* --- CATALOGO 3. Nombre y precio mas cerca de la foto -------------------- */
.content-products-img .description-products-index {
    margin-top: 0 !important;
    padding: 8px 2px 4px !important;
}
.content-products-img .description-products-index ul {
    gap: 2px !important;
}

/* --- CATALOGO 4. Precio al lado del tachado, y el S/ pegado y mas chico --- */
.description-products-index .precio-prd.precio-ahora {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 2px 9px !important;
}
.description-products-index .precio-prd .rd-precio-actual {
    display: inline-flex;
    align-items: baseline;
}
.description-products-index .precio-prd span.precio-antes,
.description-products-index .precio-prd span.precio-antes span {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--rd-ink-4) !important;
    text-decoration: line-through;
}
/* "Se puede cambiar el simbolo de soles? Siento que esta muy separado" (como
 * en su web actual: s/159.00). Va pegado al numero, en minuscula y mas chico. */
.rd-soles,
.description-products-index .precio-prd span.rd-soles,
body .complement-pedido .prc-compl span.rd-soles {
    font-size: .72em !important;
    font-weight: 600 !important;
    text-transform: lowercase;
    letter-spacing: 0;
    margin-right: 1px;
}
.description-products-index .precio-prd span.precio-antes span.rd-soles {
    font-size: 11px !important;
}

/* --- CATALOGO 5. Iconos al pasar el mouse, como en la portada ------------- */
.description-products-index .rd-tarjeta-rasgos {
    margin-top: 10px;
}
@media (hover: hover) and (min-width: 992px) {
    .description-products-index .rd-tarjeta-rasgos {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .35s ease, transform .35s ease;
    }
    .content-products-img:hover .description-products-index .rd-tarjeta-rasgos {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 991.98px) {
    .description-products-index .rd-tarjeta-rasgos {
        margin-top: 6px;
        gap: 6px;
    }
    .description-products-index .rd-tarjeta-rasgos .rd-regalo__rasgo {
        width: 28px;
        height: 28px;
    }
    .description-products-index .rd-tarjeta-rasgos .rd-regalo__rasgo svg {
        width: 15px;
        height: 15px;
    }
}

/* --- CATALOGO 6. Banner en el telefono ------------------------------------
 * "En responsive el banner no se ve bien" (referencia: 1800flowers). A todo
 * el ancho y bajo, con el titulo pegado debajo y el texto chico. La foto que
 * se ve es el "Banner movil" de la categoria (panel, Categorias); si fuera
 * cuadrada, se recorta al centro para no ocupar la pantalla entera. */
@media (max-width: 767.98px) {
    .sct-cabecera-catalogo {
        padding-top: 22px !important;
    }
    .sct-cabecera-catalogo .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .sct-cabecera-catalogo .cabecera-cat-fila {
        row-gap: 0 !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-banner {
        margin: 0 !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-banner-col img {
        width: 100%;
        height: auto;
        max-height: 58vw;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
    }
    .sct-cabecera-catalogo .cabecera-cat-info--separada {
        border-top: 0 !important;
        margin-top: 0 !important;
        padding-top: 12px !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-info h1,
    .sct-cabecera-catalogo h1.title-busqueda {
        font-size: 21px !important;
        letter-spacing: .05em !important;
        margin: 0 0 4px !important;
    }
    .sct-cabecera-catalogo .cabecera-cat-texto,
    .sct-cabecera-catalogo .cabecera-cat-texto p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }
    .sct-cabecera-catalogo + .sct-busqueda {
        padding-top: 12px !important;
        margin-bottom: 14px !important;
    }
}

/* --- FICHA 1. El texto mas arriba, la lista en una columna ---------------- */
.rd-ficha .rd-descripcion {
    margin-top: 14px !important;
}
.rd-ficha .detail-detail .rd-descripcion ul {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
}

/* --- FICHA 2. Caja de fecha y hora como la maqueta ------------------------ */
.rd-personaliza .entrega-titulo {
    margin-top: 0 !important;
}

/* --- FICHA 3. Complementos: mas cerca del producto, mas anchos ----------- */
.complement-pedido {
    padding-top: 8px !important;
}
.complement-pedido > .container-fluid {
    width: 100% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.complement-pedido .title-complement {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.complement-pedido .title-complement h2 {
    margin: 0 !important;
}
.complement-pedido .rd-compl-bajada {
    margin: 0 0 16px !important;
    line-height: 1.3;
}
/* Por debajo de 1200 el carrusel iba de borde a borde de la pantalla. */
@media (max-width: 1199.98px) {
    .complement-pedido .gallery-complement {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
/* 56px a cada lado es el sitio de las flechas, que solo salen desde 1200. */
@media (min-width: 1200px) {
    .complement-pedido .title-complement {
        padding-left: 56px !important;
    }
    .complement-pedido .gallery-complement {
        padding-left: 56px !important;
        padding-right: 56px !important;
    }
}

/* --- FICHA 4. Tarjeta de complemento sin bordes, Agregar al final --------
 * "Hay que usar este formato, sin bordes, con el boton agregar debajo del
 * nombre a personalizar". Foto, nombre, medida y precio centrados; el campo
 * de la taza (si lo lleva) y debajo "Agregar". */
.complement-pedido .item.img-gallery,
.complement-pedido .item.img-gallery:has(input:checked) {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
.complement-pedido .item.img-gallery figure {
    border-radius: 14px !important;
}
.complement-pedido .info-complement {
    padding: 12px 4px 4px !important;
    text-align: center;
}
.complement-pedido .info-complement ul,
.complement-pedido .info-complement li {
    text-align: center !important;
}
body .complement-pedido .title-prod-cmpl {
    cursor: zoom-in;
}
.complement-pedido .rd-compl-pie {
    align-items: center !important;
}
.complement-pedido .rd-compl-pie .prc-compl {
    align-self: center !important;
}
.complement-pedido .rd-compl-taza {
    width: 100%;
    margin: 0 !important;
    flex-wrap: nowrap;
}
.complement-pedido .rd-compl-taza .span-taza {
    background: var(--rd-bg-soft);
    border: 1px solid var(--rd-line-2);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    padding: 0 10px;
}
.complement-pedido .rd-compl-taza .input-taza {
    height: 36px;
    border: 1px solid var(--rd-line-2);
    border-left: 0;
    border-radius: 0 999px 999px 0 !important;
    font-family: var(--rd-sans);
    font-size: 12.5px;
    color: var(--rd-ink);
    box-shadow: none !important;
}
/* En el telefono el :hover se queda pegado tras un toque y la pastilla
 * parecia elegida sin estarlo: el relleno al pasar el mouse, solo con mouse. */
@media (hover: none) {
    body .complement-pedido .item.img-gallery:hover .rd-compl-pie .btn-agregar:not(:has(input:checked)) {
        background: transparent !important;
        border-color: var(--rd-accent-line) !important;
        color: var(--rd-accent) !important;
    }
}

/* Cada tarjeta traia 64px de margen abajo (index.css, 4rem): con "Suele
 * regalarse junto con" debajo quedaban 130px de vacio entre las dos. */
.complement-pedido .owl-item .item.img-gallery {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Centrado de verdad: la lista es flex y encogia cada linea a su texto. */
.complement-pedido .info-complement ul {
    align-items: stretch !important;
    padding: 0 !important;
}
body .complement-pedido .title-prod-cmpl {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Nombre + una linea de medida: los que no traen medida (Empanada) no
     * suben el precio y el boton respecto de sus vecinos. */
    min-height: 44px !important;
}
body .complement-pedido .title-prod-cmpl small {
    display: block;
    margin: 2px 0 0 !important;
    padding: 0 !important;
}
.complement-pedido .info-complement,
.complement-pedido .item.img-gallery:hover .info-complement {
    background: transparent !important;
}
.complement-pedido .rd-compl-pie {
    padding-bottom: 0 !important;
}
/* El velo crema de la version vieja (div.hovers) cubria media tarjeta al
 * pasar el mouse; sin bordes se notaba como una mancha. */
.complement-pedido .item.img-gallery .hovers {
    display: none !important;
}
/* El s/ de la ficha toma el color del precio, no el naranja de la hoja vieja. */
.rd-ficha .preciodetal .rd-soles,
.rd-relacionado__precio .rd-soles {
    color: inherit !important;
}

/* --- FICHA 5. "Suele regalarse junto con" mas arriba ---------------------- */
.rd-relacionados {
    padding-top: 28px !important;
}
.rd-relacionados h2 {
    margin-bottom: 16px !important;
}

/* =============================================================================
 * OBSERVACIONES DE LA FICHA EN EL TELEFONO (05/10/2026, segunda tanda)
 * La clienta revisando desde su celular. Ver informe/catalogo-ficha-0510.
 * ========================================================================== */
@media (max-width: 767.98px) {
    /* "La foto principal debe verse en todo el ancho, como mi web actual":
     * de borde a borde de la pantalla, sin esquinas redondeadas. La seccion
     * mide el 92% con 4% de margen a cada lado (container-fluid viejo). Desde
     * 768 la galeria ya es una columna y no se toca. */
    .rd-ficha .gallery-detail .tab-content {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: -4vw !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }
}
@media (max-width: 991.98px) {

    /* "Las 5 fotos deben poder verse en una sola linea": cinco columnas fijas.
     * Con menos fotos quedan del mismo tamano, alineadas a la izquierda. */
    .rd-ficha .gallery-detail #v-pills-tab {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    /* "Quitar ese resaltado de la foto": sin borde rojo en la activa, y las
     * demas sin el velo blanco que las dejaba al 40%. */
    .rd-ficha .gallery-detail #v-pills-tab .nav-link,
    .rd-ficha .gallery-detail #v-pills-tab .nav-link.active {
        border-color: transparent !important;
        border-width: 0 !important;
        opacity: 1 !important;
    }

    /* "Aqui hay que acortar la distancia entre los textos y la foto": eran
     * 56px entre las miniaturas y la miga (hueco de la rejilla + margenes). */
    .rd-ficha > .row {
        row-gap: 0 !important;
        gap: 0 !important;
    }
    .rd-ficha .detail-detail {
        margin-top: 18px !important;
    }
    .rd-ficha .detail-detail > .col {
        padding-top: 0 !important;
    }
}

/* --- Sellos bajo "Agregar al carrito" ---------------------------------------
 * "Estos iconos pueden ser sin fondo y mas pequenos? Como este (Magia.pe).
 * Incluso tienen una rayita que los separa." Y "en responsive que se vea en
 * una linea, no en 2". Icono de trazo sin circulo, en una fila centrada, con
 * una linea vertical entre sello y sello. Vale para PC y telefono. */
/* La regla de la lista "Que incluye" (.detail-detail ul) le ganaba y la
 * dejaba en rejilla, que bajo 600px es de una columna: dos lineas. */
.rd-ficha .detail-detail ul.rd-sellos {
    display: flex !important;
    grid-template-columns: none !important;
}
.rd-ficha .rd-sellos {
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 0 !important;
}
.rd-ficha .rd-sello {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: 7px !important;
    padding: 0 18px;
}
.rd-ficha .rd-sello + .rd-sello {
    border-left: 1px solid var(--rd-line-2);
}
.rd-ficha .rd-sello__icono {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--rd-ink-2) !important;
}
.rd-ficha .rd-sello__icono svg,
.rd-ficha .rd-sello__icono img {
    width: 20px !important;
    height: 20px !important;
}
.rd-ficha .rd-sello__txt {
    font-size: 13.5px !important;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .rd-ficha .rd-sello {
        padding: 0 12px;
        gap: 6px !important;
    }
    .rd-ficha .rd-sello__txt {
        font-size: 12.5px !important;
    }
    .rd-ficha .rd-sello__icono svg,
    .rd-ficha .rd-sello__icono img {
        width: 18px !important;
        height: 18px !important;
    }
}

/*
 * FICHA EN MOVIL: PRECIO PEGADO AL NOMBRE (07/10/2026, pedido de la clienta).
 * Entre nombre y precio sumaban 8px de margen mas el interlineado de 33px del
 * precio; debajo del precio, ~40px: 14 de margen del bloque mas 10 de margen
 * y 10 de relleno del primer parrafo, que viene pegado del editor.
 */
@media (max-width: 767px) {
  .rd-ficha .detail-detail h1 { margin-bottom: 2px !important; }
  .rd-ficha .detail-detail .preciodetal { line-height: 1.15 !important; margin-bottom: 0 !important; }
  .rd-ficha .detail-detail .rd-descripcion { margin-top: 10px !important; }
  .rd-ficha .detail-detail .rd-descripcion > p:first-child { margin-top: 0 !important; padding-top: 0 !important; }
}

/*
 * FICHA EN MOVIL: "Hazlo extra especial" a 3px del borde (07/10/2026). La fila
 * del titulo trae el margin:-15px de .row y el .container-fluid no tiene
 * relleno que lo compense; las tarjetas de debajo si van a 16px.
 */
@media (max-width: 767px) {
  .complement-pedido > .container-fluid > .row:has(> .title-complement) { margin-left: 0 !important; margin-right: 0 !important; }
  .complement-pedido .title-complement { padding-left: 16px !important; padding-right: 16px !important; }
}

/*
 * FICHA: el nombre a personalizar (y el globo) fuera de la caja de fecha y hora
 * (07/10/2026). Mismo aspecto que los campos de la caja, y la esquina derecha
 * redondeada como la izquierda: Bootstrap y las hojas viejas la dejaban recta.
 */
.rd-personaliza-extra:not(:has(*)) { display: none; } /* sin globo ni nombre: solo queda espacio en blanco */
.rd-personaliza-extra { margin: 0 0 22px; }
.rd-personaliza-extra .select-detail { margin-top: 0; }
.rd-personaliza-extra .input-group { margin-top: 0 !important; flex-wrap: nowrap; }
.rd-personaliza-extra .input-group .span-taza {
    background: var(--rd-bg-warm);
    border: 1px solid var(--rd-line) !important;
    border-right: none !important;
    border-radius: 10px 0 0 10px !important;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.rd-personaliza-extra .input-group .input-taza {
    height: auto;
    border: 1px solid var(--rd-line) !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    padding: 11px 12px;
    font-size: 14px;
    font-family: var(--rd-sans);
    background: var(--rd-bg-soft);
    color: var(--rd-ink);
    box-shadow: none !important;
}

/*
 * PRECIO TACHADO CON UNA SOLA RAYA (07/10/2026). Con text-decoration, el "S/"
 * mas chico y el numero se tachan cada uno a su altura (Safari en iPhone) y
 * salen dos rayas: "deberia ser una sola raya que tache todo". Se apaga el
 * tachado del texto y se dibuja una linea encima de toda la caja.
 */
.precio-antes,
.precio-prd.precio-antes,
.description-products-index .precio-prd span.precio-antes,
.rd-ficha .h3-prctotl.price-normal,
.rd-regalo__antes,
.car-linea-antes {
    text-decoration: none !important;
    position: relative;
}
.precio-antes *,
.rd-ficha .h3-prctotl.price-normal *,
.rd-regalo__antes *,
.car-linea-antes * {
    text-decoration: none !important;
}
.precio-antes::after,
.precio-prd.precio-antes::after,
.description-products-index .precio-prd span.precio-antes::after,
.rd-ficha .h3-prctotl.price-normal::after,
.rd-regalo__antes::after,
.car-linea-antes::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 55%;
    border-top: 1px solid currentColor;
    pointer-events: none;
}

/*
 * DESCRIPCION SIN LA RAYA ENCIMA DE "INCLUYE" (07/10/2026): "esta raya en la
 * descripcion, se puede quitar mejor? asi sube un poco mas el texto". Era el
 * borde superior de la lista mas 18px de relleno. Los sellos (.rd-sellos)
 * conservan su filete.
 */
.rd-ficha .detail-detail ul:not(.rd-sellos) {
    border-top: 0 !important;
    padding-top: 4px !important;
}


/* =============================================================================
 * PORTADA — OBSERVACIONES DEL 07/10/2026
 *
 * Cinco puntos del correo de la clienta. Van al final de la hoja a proposito:
 * cada uno pisa reglas que ya existian mas arriba (la variante E de los
 * sellos, la rejilla de testimonios, la franja de los pasos), y asi se gana
 * por orden sin subir la especificidad mas de lo necesario.
 * ========================================================================== */

/* --- 1. DESCUBRE NUESTROS CATALOGOS ---------------------------------------
 * "habria que poner sobre un fondo mas claro sutilmente como para marcar la
 * diferencia con lo que hay debajo que es Instagram". Toda la seccion va
 * sobre el crema claro de las tarjetas (--rd-bg-soft) y cierra con su propio
 * aire abajo, asi la banda se lee como un bloque y el feed arranca despues.
 */
.rd-catalogos {
    background: var(--rd-bg-soft, #FBF6F1);
    margin-top: 48px;
    padding-top: 44px;
    padding-bottom: 48px;
}
.rd-catalogos .rd-catalogos__flecha {
    top: calc(50% + 18px);
}

/* --- 4. LA BARRA DE SELLOS, MAS DELGADA EN LA PC ---------------------------
 * "En PC hay que adelgazar un poco mas esta barra". Se quita aire arriba y
 * abajo y el dibujo baja de 100 a 84 px: el texto de dentro ("20 AÑOS",
 * "FRESCO 100% NATURAL") se sigue leyendo a ese tamaño. Pasa de 266 a unos
 * 210 px de alto.
 */
.rd-perks.rd-perks--e .rd-perks__grid {
    padding-top: 30px;
    padding-bottom: 30px;
}
.rd-perks.rd-perks--e .rd-perk {
    gap: 8px;
}
.rd-perks.rd-perks--e .rd-perk > .rd-perk__icon,
.rd-perks.rd-perks--e .rd-perk__icon img {
    width: 84px;
    height: 84px;
}
.rd-perks.rd-perks--e .rd-perk strong {
    font-size: 19px;
}

/* --- 5. TESTIMONIOS: UNA FILA QUE PASA ------------------------------------
 * "tal vez 2 por pagina y que vayan pasando". La rejilla pasa a ser una pista
 * con desplazamiento horizontal, como el feed: cuatro a la vista en la PC
 * (o los que haya, si son menos) y dos en el telefono. index.php pone las
 * flechas y el avance automatico.
 *
 * Y "sobre un fondo un poquito mas claro, como para marcar una diferencia con
 * lo que esta arriba": el mismo crema claro de los catalogos.
 */
.rd-opiniones {
    background: var(--rd-bg-soft, #FBF6F1);
    margin-top: 56px;
}
.rd-opiniones__marco {
    position: relative;
    max-width: calc(var(--n, 4) * 330px);
    margin: 0 auto;
}
.rd-opiniones .rd-opiniones__fila {
    display: flex;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.rd-opiniones .rd-opiniones__fila::-webkit-scrollbar {
    display: none;
}
.rd-opiniones .rd-opiniones__fila .rd-opinion {
    flex: 0 0 calc(100% / var(--n, 4));
    min-width: 0;
    scroll-snap-align: start;
}
.rd-opinion__enlace {
    display: block;
    border-radius: 50%;
    margin-bottom: 26px;
}
.rd-opinion__enlace .rd-opinion__foto {
    margin-bottom: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}
.rd-opinion__enlace:hover .rd-opinion__foto,
.rd-opinion__enlace:focus-visible .rd-opinion__foto {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(62, 42, 32, .18);
}
.rd-opiniones__flecha {
    position: absolute;
    top: 75px;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rd-line-2, #E4D8CE);
    background: #fff;
    color: var(--rd-ink, #3E2A20);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(62, 42, 32, .14);
}
.rd-opiniones__flecha[hidden] { display: none; }
.rd-opiniones__flecha--izq { left: -6px; }
.rd-opiniones__flecha--der { right: -6px; }

/* --- 6. COMO COMPRAR, MAS DELGADO EN LA PC ---------------------------------
 * "En PC podria ser un poco mas delgado". Menos aire arriba y abajo, el
 * titulo un punto mas chico y los numeros mas cerca de su titulo.
 */
.rd-steps {
    padding-top: 44px;
    padding-bottom: 44px;
}
body .rd-steps h2 {
    font-size: 31px !important;
    margin-bottom: 10px;
}
.rd-steps .rd-steps__intro {
    font-size: 15px;
    line-height: 1.6;
}
.rd-steps .rd-step__n {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
}
.rd-steps .rd-step__t {
    margin-bottom: 4px;
}

/* --- TELEFONO ------------------------------------------------------------- */

@media (max-width: 767px) {

    /* 1. "En responsive, Desayunos se lee cortado". La tarjeta media 112 px
       con el nombre a 25 px: "Desayunos" no entraba. Dos tarjetas y media a
       la vista y el nombre a 17 px, que es lo que deja entero el mas largo. */
    /* El margen izquierdo va en la fila y no en la seccion: puesto en la
       seccion, el titulo centrado quedaba 8 px corrido a la derecha. */
    .rd-catalogos {
        margin-top: 32px;
        padding: 30px 0;
    }
    .rd-catalogos .rd-catalogo {
        flex-basis: 40%;
        border-radius: 12px;
    }
    .rd-catalogos .rd-catalogo__name {
        top: 10px;
        left: 11px;
        right: 8px;
        font-size: 17px;
        overflow-wrap: normal;
        word-break: normal;
    }
    .rd-catalogos .rd-catalogos__pista {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        gap: 10px;
    }

    /* 2. "bajar un poquito el FEED MAS..." Con la banda clara de los
       catalogos cerrando arriba, el feed arranca con su propio aire. */
    .rd-feed {
        padding-top: 34px;
    }

    /* 3. "esta parte es muy larga ... puede ser 2 arriba y 2 abajo". Pasaba
       de 840 px a unos 400: dos columnas, el dibujo a 60 px, y la bajada mas
       chica pero entera. */
    .rd-perks.rd-perks--e {
        padding-top: 32px;
    }
    .rd-perks.rd-perks--e .rd-perks__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 14px;
        padding: 28px 14px;
    }
    .rd-perks.rd-perks--e .rd-perk {
        gap: 6px;
    }
    .rd-perks.rd-perks--e .rd-perk > .rd-perk__icon,
    .rd-perks.rd-perks--e .rd-perk__icon img {
        width: 60px;
        height: 60px;
    }
    .rd-perks.rd-perks--e .rd-perk strong {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 3px;
    }
    .rd-perks.rd-perks--e .rd-perks__grid .rd-perk span:not(.rd-perk__icon) {
        font-size: 12px;
        line-height: 1.35;
    }

    /* 5. Dos testimonios a la vista. */
    .rd-opiniones {
        margin-top: 36px;
        padding: 38px 12px 40px;
    }
    .rd-opiniones__marco {
        max-width: none;
    }
    .rd-opiniones .rd-opiniones__fila .rd-opinion {
        flex-basis: 50%;
        padding: 0 10px;
        border-left: 1px solid #D9CABD;
    }
    .rd-opiniones .rd-opiniones__fila .rd-opinion:first-child {
        border-left: 0;
    }
    .rd-opiniones .rd-opinion__foto {
        width: 104px;
        height: 104px;
    }
    .rd-opinion__enlace {
        margin-bottom: 14px;
    }
    .rd-opiniones .rd-opinion__estrellas {
        margin-bottom: 8px;
    }
    .rd-opiniones .rd-opinion__estrellas svg {
        width: 14px;
        height: 14px;
    }
    .rd-opiniones .rd-opinion blockquote {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .rd-opiniones .rd-opinion figcaption {
        font-size: 13px;
    }
    .rd-opiniones__flecha {
        top: 52px;
        width: 34px;
        height: 34px;
    }
    .rd-opiniones__flecha--izq { left: -4px; }
    .rd-opiniones__flecha--der { right: -4px; }

    /* 6. "En responsive lo siento muy largo". Como en la opcion que ella
       dibujo: el numero al lado del titulo, en la misma linea, y la
       explicacion debajo. Pasa de 777 a unos 480 px. */
    .rd-steps {
        margin-top: 48px;
        padding: 34px 18px 34px;
    }
    body .rd-steps h2 {
        font-size: 25px !important;
        margin-bottom: 6px;
    }
    .rd-steps .rd-steps__inner {
        gap: 20px;
    }
    .rd-steps .rd-steps__intro {
        font-size: 14px;
    }
    .rd-steps .rd-steps__list {
        gap: 16px;
    }
    .rd-steps .rd-step {
        display: grid;
        grid-template-columns: 30px 1fr;
        column-gap: 12px;
        align-items: center;
    }
    .rd-steps .rd-step__n {
        width: 30px;
        height: 30px;
        margin: 0;
        font-size: 13px;
    }
    .rd-steps .rd-step__t {
        margin: 0;
        font-size: 15.5px;
    }
    .rd-steps .rd-step__d {
        grid-column: 1 / -1;
        margin-top: 6px;
        font-size: 13.5px;
    }
}