/* =====================================================================================
   REVISTA · propuesta D
   Carga despues de d.css y landing.css, solo en el blog. Prefijo .db-.

   Compuesta con el reparto de una portada de revista: tira fina, mancheta con el
   menu de secciones al lado, portada mixta (foto grande con el titular encima +
   columna de destacados con miniatura), rotulo con filete y fila de piezas con su
   pie de fecha y minutos de lectura.

   Dos reglas de la casa:
   · Los titulares de la revista van en D Display EN CAJA BAJA, no en versales: es
     lo que la separa del resto de la web y la hace leer como una revista.
   · Lo que separa las cosas son filetes, no huecos.
   ===================================================================================== */

.db-h2, .db-hero__h, .db-lat__t, .db-tarj__t, .db-banda__t, .db-ap__h, .db-sig__h, .db-manch__t, .db-cita p {
    font-family: var(--f-d); font-variation-settings: "wght" 300, "wdth" 108; font-weight: 300; font-stretch: 108%;
    text-transform: none; letter-spacing: -.012em;
}

/* Rotulo de seccion, el mismo en todas partes */
.db-sec { display: block; color: var(--champ); }
.db-sec i { font-style: normal; color: var(--t7); margin: 0 6px; }

/* Rotulo + filete + accion:  ULTIMOS ARTICULOS ─────────────── VER TODOS → */
.db-rot { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(20px, 2.8vh, 32px); }
.db-rot__t { margin: 0; color: var(--w); font-weight: 400; white-space: nowrap; }
.db-rot__l { flex: 1 1 auto; height: 1px; background: var(--line); }
.db-rot__a { color: var(--t4); text-decoration: none; white-space: nowrap; transition: color .3s var(--e-expo); }
.db-rot__a i { font-style: normal; margin-left: 7px; }
.db-rot__a:hover { color: var(--w); }

/* =====================================================================================
   CABECERA DE LA REVISTA
   ===================================================================================== */
.db-cab { background: var(--k); padding-top: var(--hdr); }
.db-cab__tira { border-bottom: 1px solid var(--line); }
.db-cab__tira-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 11px; padding-bottom: 11px; color: var(--t4); }
.db-cab__tira-in p { margin: 0; }
.db-cab__tira-in i { font-style: normal; color: var(--t7); margin: 0 5px; }
.db-cab__tira-in a { color: var(--mut2); text-decoration: none; }
.db-cab__tira-in a:hover { color: var(--w); }

.db-cab__in {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px;
    padding-top: clamp(18px, 2.6vh, 30px); padding-bottom: clamp(14px, 2vh, 22px);
    border-bottom: 1px solid var(--line2);
}
.db-manch { display: block; text-decoration: none; color: var(--w); }
.db-manch__t { display: block; margin: 0; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 52px); line-height: .92; letter-spacing: .1em; }
.db-manch__s { display: block; margin-top: 7px; color: var(--t4); letter-spacing: .3em; }

.db-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.db-nav a { color: var(--mut); text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .3s var(--e-expo), border-color .3s var(--e-expo); }
.db-nav a:hover { color: var(--w); }
.db-nav a.es-activo { color: var(--w); border-bottom-color: var(--champ); }

/* =====================================================================================
   PORTADA MIXTA
   ===================================================================================== */
.db-port { background: var(--k); }

.db-hero { position: relative; }
.db-hero__a { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 54vh, 620px); overflow: hidden; text-decoration: none; color: var(--w); }
.db-hero__im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: grayscale(.3); transition: transform 1.5s var(--e-expo), filter .8s var(--e-expo); }
.db-hero__velo {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .62) 38%, rgba(5, 5, 5, .1) 76%, rgba(5, 5, 5, .3) 100%),
        linear-gradient(to right, rgba(5, 5, 5, .7) 0%, rgba(5, 5, 5, .12) 62%, transparent 88%);
}
.db-hero__txt { position: relative; z-index: 2; display: block; max-width: 660px; padding: clamp(24px, 4vh, 48px) clamp(20px, 3.4vw, 56px); }
.db-hero__h { display: block; margin-top: 12px; font-size: clamp(27px, 3.5vw, 54px); line-height: 1.04; }
.db-hero__e { display: block; margin-top: 14px; max-width: 48ch; color: var(--mut2); font-size: clamp(14.5px, 1.05vw, 17px); line-height: 1.58; }
.db-hero__a .d-btn { display: flex; width: fit-content; margin-top: clamp(18px, 2.6vh, 28px); }
@media (hover: hover) { .db-hero__a:hover .db-hero__im { transform: scale(1.025); filter: grayscale(0); } }

/* La columna de destacados: miniatura + texto, cosidos con filetes */
.db-lat { list-style: none; margin: 0; padding: 0; display: grid; }
.db-lat__it { display: grid; border-top: 1px solid var(--line); }
.db-lat__it:first-child { border-top: 0; }
.db-lat__a { display: grid; grid-template-columns: clamp(84px, 9vw, 112px) minmax(0, 1fr); gap: 16px; height: 100%; padding: 16px clamp(16px, 2vw, 26px); text-decoration: none; color: var(--w); transition: background-color .35s var(--e-expo); }
.db-lat__im { display: block; position: relative; overflow: hidden; background: #0d0d10; aspect-ratio: 1 / 1; }
.db-lat__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.92); transition: filter .6s var(--e-expo), transform 1s var(--e-expo); }
.db-lat__tx { display: block; align-self: center; }
.db-lat__t { display: block; margin-top: 8px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.14; }
.db-lat__f { display: block; margin-top: 9px; color: var(--t4); }
@media (hover: hover) {
    .db-lat__a:hover { background: rgba(243, 244, 245, .04); }
    .db-lat__a:hover .db-lat__t { color: var(--champ); }
    .db-lat__a:hover .db-lat__im img { filter: none; transform: scale(1.06); }
}

@media (min-width: 900px) {
    .db-port { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 440px); align-items: stretch; }
    .db-lat { border-left: 1px solid var(--line); grid-auto-rows: 1fr; }
    .db-lat__im { aspect-ratio: auto; align-self: stretch; min-height: 92px; }
}

/* =====================================================================================
   LA FILA DE PIEZAS
   ===================================================================================== */
.db-ult { background: var(--k); padding: clamp(34px, 5vh, 66px) 0 clamp(40px, 6vh, 80px); }
.db-tarj { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .db-tarj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .db-tarj { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Los tres pies, a la misma linea: la entradilla se come el hueco que sobre */
.db-tarj__it { display: grid; }
.db-tarj__it > article { display: grid; }
.db-tarj__a { display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100%; text-decoration: none; color: var(--w); }
.db-tarj__im { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #0d0d10; margin-bottom: 16px; }
.db-tarj__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) brightness(.94); transition: filter .6s var(--e-expo), transform 1.1s var(--e-expo); }
.db-tarj__t { display: block; margin-top: 10px; font-size: clamp(19px, 1.65vw, 26px); line-height: 1.1; }
.db-tarj__e { display: block; margin-top: 11px; color: var(--mut); font-size: 14.5px; line-height: 1.55; }
.db-tarj__pie { display: block; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--t4); }
.db-tarj__pie i { font-style: normal; color: var(--t7); margin: 0 5px; }
@media (hover: hover) {
    .db-tarj__a:hover .db-tarj__t { color: var(--champ); }
    .db-tarj__a:hover .db-tarj__im img { filter: none; transform: scale(1.04); }
}
.db-vacio { color: var(--mut); padding: 44px 0; }

/* =====================================================================================
   BANDA DE CIERRE
   ===================================================================================== */
.db-banda { position: relative; overflow: hidden; background: var(--k); border-top: 1px solid var(--line); }
.db-banda__im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(.45) brightness(.9); }
.db-banda__velo { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 5, 5, .88) 0%, rgba(5, 5, 5, .58) 50%, rgba(5, 5, 5, .34) 100%); }
.db-banda__in {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(20px, 3vh, 36px) 40px;
    padding-top: clamp(38px, 6vh, 86px); padding-bottom: clamp(38px, 6vh, 86px);
}
.db-banda__t { margin: 12px 0 0; max-width: 20ch; font-size: clamp(25px, 3.1vw, 48px); line-height: 1.04; color: var(--w); }
.db-banda__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* =====================================================================================
   EL ARTICULO
   ===================================================================================== */
.db-art { background: var(--k); }

.db-ap { position: relative; display: flex; align-items: flex-end; min-height: min(72vh, 640px); overflow: hidden; background: var(--k); }
.db-ap__im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: grayscale(.35); }
.db-ap__velo {
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, var(--k) 0%, rgba(5, 5, 5, .9) 26%, rgba(5, 5, 5, .34) 62%, rgba(5, 5, 5, .58) 100%),
        linear-gradient(to right, rgba(5, 5, 5, .68) 0%, rgba(5, 5, 5, .12) 58%, transparent 86%);
}
.db-ap__txt { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--hdr) + 32px); padding-bottom: clamp(24px, 3.6vh, 46px); }
.db-ap__migas { color: var(--t4); margin: 0 0 14px; }
.db-ap__migas a { color: var(--mut2); text-decoration: none; }
.db-ap__migas a:hover { color: var(--w); }
.db-ap__migas i { font-style: normal; margin: 0 8px; color: var(--t7); }
.db-ap__h { font-size: clamp(30px, 4.2vw, 68px); line-height: 1.02; color: var(--w); margin: 0; max-width: 19ch; }
.db-ap__e { margin: 16px 0 0; max-width: 54ch; color: var(--mut2); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; }

/* --- cornisa | columna de texto | margen --- */
.db-art__in { padding-top: clamp(26px, 4vh, 48px); padding-bottom: clamp(34px, 5vh, 70px); border-top: 1px solid var(--line2); }

.db-corn { margin-bottom: clamp(22px, 3vh, 34px); padding-bottom: clamp(18px, 2.4vh, 26px); border-bottom: 1px solid var(--line); }
.db-corn__datos { display: grid; grid-template-columns: auto auto; gap: 6px 14px; justify-content: start; margin: 0; }
.db-corn__datos dt { color: var(--t7); }
.db-corn__datos dd { margin: 0; color: var(--mut2); }
.db-corn__idx { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.db-corn__idxt { color: var(--t7); margin: 0 0 10px; }
.db-corn__idx ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.db-corn__idx a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; color: var(--mut); text-decoration: none; line-height: 1.4; }
.db-corn__idx a:hover { color: var(--w); }
.db-corn__idx i { font-style: normal; color: var(--champ); }

.db-cuerpo { display: grid; grid-template-columns: [texto] minmax(0, 1fr); }
.db-cuerpo > * { grid-column: texto; }

.db-p { color: var(--mut2); font-size: clamp(16px, 1.05vw, 17.5px); line-height: 1.64; margin: 0 0 .8em; }
.db-p b { color: var(--w); font-weight: 600; }
.db-p a { color: var(--champ); text-decoration: none; border-bottom: 1px solid rgba(216, 185, 142, .4); }

@media (min-width: 620px) {
    .db-cuerpo > .db-p:first-child::first-letter {
        float: left; margin: .04em .08em 0 0; padding-right: .06em;
        font-family: var(--f-d); font-variation-settings: "wght" 300, "wdth" 108; font-weight: 300;
        font-size: 3.4em; line-height: .82; color: var(--w);
    }
}

/* Ladillo numerado con su filete encima: es lo que marca el ritmo de la pieza */
.db-h {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline;
    font-family: var(--f-d); font-variation-settings: "wght" 400, "wdth" 112; font-weight: 400; font-stretch: 112%;
    text-transform: uppercase; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.2; letter-spacing: .12em;
    color: var(--w); margin: clamp(26px, 3.4vh, 40px) 0 clamp(12px, 1.6vh, 16px);
    padding-top: clamp(14px, 1.8vh, 20px); border-top: 1px solid var(--line);
}
.db-h i { font-size: 11px; letter-spacing: .14em; color: var(--champ); }

.db-lista { list-style: none; margin: 0 0 .9em; padding: 0; display: grid; gap: 9px; }
.db-lista li { position: relative; padding-left: 22px; color: var(--mut2); font-size: clamp(15.5px, 1vw, 17px); line-height: 1.55; }
.db-lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--champ); }
.db-lista b { color: var(--w); font-weight: 600; }

.db-cita { margin: clamp(22px, 3vh, 34px) 0; padding: clamp(14px, 1.8vh, 20px) 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.db-cita p { margin: 0; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.12; color: var(--w); }

.db-foto { margin: clamp(22px, 3vh, 34px) 0; }
.db-foto img { display: block; width: 100%; height: auto; filter: grayscale(.4); }
.db-foto figcaption { margin-top: 9px; color: var(--t7); border-top: 1px solid var(--line); padding-top: 8px; }

@media (min-width: 1040px) {
    .db-art__in { display: grid; grid-template-columns: clamp(160px, 15vw, 210px) minmax(0, 1fr); column-gap: clamp(28px, 3.4vw, 64px); align-items: start; }
    .db-corn { position: sticky; top: calc(var(--hdr) + 24px); margin: 0; padding: 0 clamp(18px, 2vw, 34px) 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
    .db-cuerpo { grid-template-columns: [texto] minmax(0, 620px) [margen] minmax(0, 1fr); column-gap: clamp(26px, 3vw, 56px); }
    .db-foto, .db-cita { grid-column: texto / -1; }
    .db-foto { margin-block: clamp(26px, 3.4vh, 40px); }
}

/* --- cierre del articulo --- */
.db-rel { padding: clamp(30px, 4.4vh, 56px) 0 clamp(36px, 5vh, 64px); border-top: 1px solid var(--line2); background: var(--k); }
.db-rel .dts-rejilla { padding-left: 0; padding-right: 0; justify-content: start; }

.db-sig { display: block; position: relative; border-top: 1px solid var(--line2); text-decoration: none; color: var(--w); background: var(--k); }
.db-sig__in { display: block; margin-left: 0; margin-right: 0; padding-top: clamp(26px, 3.6vh, 46px); padding-bottom: clamp(26px, 3.6vh, 46px); }
.db-sig__h { display: block; margin-top: 12px; font-size: clamp(22px, 2.8vw, 44px); line-height: 1.04; max-width: 20ch; }
.db-sig__e { display: block; margin-top: 12px; max-width: 56ch; color: var(--mut); font-size: 14.5px; line-height: 1.5; }
.db-sig .d-btn { display: flex; width: fit-content; margin-top: clamp(16px, 2.4vh, 26px); }
.db-sig__im { display: none; }
@media (hover: hover) { .db-sig:hover .db-sig__h { color: var(--champ); } }

@media (min-width: 880px) {
    .db-sig { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 420px); align-items: stretch; }
    .db-sig__im { display: block; position: relative; overflow: hidden; }
    .db-sig__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.85); transition: transform 1.2s var(--e-expo), filter .7s var(--e-expo); }
    .db-sig:hover .db-sig__im img { transform: scale(1.04); filter: grayscale(.2) brightness(.95); }
}

/* =====================================================================================
   MOVIL
   ===================================================================================== */
@media (max-width: 767px) {
    .db-cab__tira-in p { display: none; }
    .db-cab__tira-in { justify-content: flex-end; }
    .db-cab__in { align-items: flex-start; }
    .db-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; width: 100%;
              margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); gap: 20px; }
    .db-nav::-webkit-scrollbar { display: none; }
    .db-nav a { flex: 0 0 auto; }
    .db-foto { margin-inline: calc(var(--gut) * -1); }
    .db-foto figcaption { margin-inline: var(--gut); }
    .db-banda__in { flex-direction: column; align-items: flex-start; }

    /* Las dos llamadas en una linea, con el mismo trato que las de las fichas: rotulo
       centrado, flecha sin su circulo —dentro del circulo abria un hueco en medio de la
       capsula— y reparto a partir de lo que mide cada rotulo, que «Reservar valoracion»
       es tres caracteres mas largo que «Ver tratamientos». Si de verdad no caben, el
       segundo baja de linea en vez de que el rotulo se salga de la capsula. */
    .db-banda__ctas { flex-wrap: wrap; width: 100%; gap: 8px; }
    .db-banda__ctas .d-btn { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 6px; min-height: 54px; padding: 0 12px; font-size: 11px; letter-spacing: .03em; }
    .db-banda__ctas .d-btn .d-btn__o,
    .db-banda__ctas .d-btn:hover .d-btn__o { width: auto; height: auto; background: none; }
    .db-banda__ctas .d-btn__o .material-symbols-outlined { font-size: 17px; }
}

/* Los dos rotulos suman 35 caracteres: a 11px dejan de caber en una linea justo por
   debajo de 410 px, asi que ahi baja un punto el tamano, y por debajo de 360 px se
   quita ademas la flecha. Es la misma escalera que las capsulas de las fichas. */
@media (max-width: 409px) {
    .db-banda__ctas .d-btn { font-size: 10px; letter-spacing: .02em; padding: 0 10px; gap: 5px; }
    .db-banda__ctas .d-btn__o .material-symbols-outlined { font-size: 15px; }
}
@media (max-width: 359px) {
    .db-banda__ctas { gap: 6px; }
    .db-banda__ctas .d-btn { font-size: 9.5px; letter-spacing: 0; padding: 0 8px; gap: 0; }
    .db-banda__ctas .d-btn__o { display: none; }
}