/* ============================================================================
   NUEVO ASPECTO 2026 — Secciones editoriales (portadas fieles de junio,
   rama rediseno-full). Kicker + título, tarjetas con foto y tinte, carrusel,
   bloque de orientadores con mockup, banda de cifras y tarjetas de herramientas.
   TODO bajo .rd para no afectar al resto de la web. Usa las variables de marca
   definidas en .rd (redesign-home.css) + tokens. Aditiva y reversible.
   ============================================================================ */

/* Sección + kicker */
.rd .rd-sec { padding: clamp(40px, 5vw, 72px) 0; }
.rd .rd-kicker { display: inline-flex; align-items: center; gap: 12px; font: 700 12.5px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--coral); }
.rd .rd-kicker::before { content: ''; width: 34px; height: 2px; background: var(--coral); }
.rd .rd-sec h2 { font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.04; letter-spacing: -.025em; color: var(--navy); margin: 8px 0 0; }
.rd .rd-sec .rd-lead { color: var(--muted); font-size: 15px; margin: 10px 0 0; max-width: 640px; }
.rd .rd-coral { color: var(--coral); }

/* Cabecera de sección con flechas */
.rd .rd-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd .rd-arrows { display: flex; gap: 8px; }
.rd .rd-arrow { width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
.rd .rd-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.rd .rd-arrow:disabled { opacity: .4; cursor: default; }

/* Tarjetas con foto + color (rejilla o carrusel) */
.rd .rd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 28px; }
.rd .rd-ccard { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; min-height: 308px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(13, 20, 48, .14); transition: transform .25s ease, box-shadow .25s ease; }
.rd .rd-ccard__ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: grayscale(.35) contrast(1.04); transition: transform .5s ease; }
.rd .rd-ccard__tint { position: absolute; inset: 0; z-index: -1; }
.rd .rd-ccard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(13, 20, 48, .26); }
.rd .rd-ccard:hover .rd-ccard__ph { transform: scale(1.07); }
.rd .rd-ccard__ico { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; margin-bottom: auto; }
.rd .rd-ccard__ico svg { width: 23px; height: 23px; color: #16204a; }
.rd .rd-ccard__tag { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin: 18px 0 7px; opacity: .92; }
.rd .rd-ccard__tag::before { content: ''; width: 16px; height: 2px; background: #fff; opacity: .8; }
.rd .rd-ccard h3 { font-weight: 800; font-size: 1.18rem; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.rd .rd-ccard p { font-size: 13px; color: rgba(255, 255, 255, .85); margin: 7px 0 0; }
.rd .rd-ccard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.rd .rd-ccard__meta { font-size: 12.5px; color: rgba(255, 255, 255, .9); font-weight: 700; }
.rd .rd-ccard__go { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); display: grid; place-items: center; flex: none; color: #fff; }
.rd .rd-ccard:hover .rd-ccard__go { background: rgba(255, 255, 255, .2); }
/* Tintes por bloque */
.rd .rd-t-blue .rd-ccard__tint { background: linear-gradient(180deg, rgba(37, 99, 235, .38), rgba(13, 22, 74, .93)); }
.rd .rd-t-violet .rd-ccard__tint { background: linear-gradient(180deg, rgba(124, 58, 237, .38), rgba(48, 18, 98, .93)); }
.rd .rd-t-pink .rd-ccard__tint { background: linear-gradient(180deg, rgba(219, 39, 119, .38), rgba(110, 16, 58, .93)); }
.rd .rd-t-coral .rd-ccard__tint { background: linear-gradient(180deg, rgba(236, 63, 104, .4), rgba(110, 16, 44, .93)); }
.rd .rd-t-teal .rd-ccard__tint { background: linear-gradient(180deg, rgba(14, 154, 167, .4), rgba(9, 55, 74, .93)); }
.rd .rd-t-navy .rd-ccard__tint { background: linear-gradient(180deg, rgba(40, 58, 128, .34), rgba(11, 17, 48, .95)); }
/* Paleta ampliada: más variedad de color (menos repetición). */
.rd .rd-t-indigo .rd-ccard__tint { background: linear-gradient(180deg, rgba(79, 70, 229, .4), rgba(30, 27, 75, .93)); }
.rd .rd-t-green .rd-ccard__tint { background: linear-gradient(180deg, rgba(22, 163, 74, .42), rgba(5, 46, 22, .93)); }
.rd .rd-t-amber .rd-ccard__tint { background: linear-gradient(180deg, rgba(217, 119, 6, .44), rgba(69, 26, 3, .93)); }
.rd .rd-t-cyan .rd-ccard__tint { background: linear-gradient(180deg, rgba(8, 145, 178, .42), rgba(8, 51, 68, .93)); }
.rd .rd-t-red .rd-ccard__tint { background: linear-gradient(180deg, rgba(220, 38, 38, .42), rgba(69, 10, 10, .93)); }
.rd .rd-t-fuchsia .rd-ccard__tint { background: linear-gradient(180deg, rgba(192, 38, 211, .4), rgba(74, 4, 78, .93)); }

/* Carrusel horizontal (primer card alineado con el wrap de 1200) */
.rd .rd-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-top: 22px;
  padding-top: 8px; padding-bottom: 16px;
  padding-left: max(clamp(18px, 4vw, 40px), calc((100vw - 1200px) / 2 + clamp(18px, 4vw, 40px)));
  padding-right: clamp(18px, 4vw, 40px); }
.rd .rd-track::-webkit-scrollbar { display: none; }
.rd .rd-track .rd-ccard { flex: 0 0 clamp(262px, 29vw, 322px); scroll-snap-align: start; }

/* Bloque "para orientadores" (split + mockup de panel) */
.rd .rd-pro { background: linear-gradient(180deg, #f7f8fc, #eef1fb); }
.rd .rd-pro__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.rd .rd-pro__lead { color: var(--muted); font-size: 15px; margin-top: 14px; max-width: 420px; }
.rd .rd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 22px 0 24px; }
.rd .rd-checks div { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); font-weight: 600; }
.rd .rd-checks svg { width: 18px; height: 18px; color: var(--coral); flex: none; }
.rd .rd-panel { background: #fff; border-radius: 18px; box-shadow: 0 30px 60px rgba(13, 20, 48, .16); padding: 18px; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); border: 1px solid #eef1f7; }
.rd .rd-panel__top { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid #eef1f7; font-weight: 700; color: var(--navy); font-size: 14px; }
.rd .rd-panel__top i { width: 9px; height: 9px; border-radius: 50%; background: #dfe3ef; }
.rd .rd-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rd .rd-ptile { background: #f7f8fc; border-radius: 11px; padding: 12px; }
.rd .rd-ptile b { font-weight: 800; font-size: 20px; color: var(--navy); display: block; }
.rd .rd-ptile span { font-size: 11.5px; color: var(--muted); }
.rd .rd-panel__lbl { font-size: 12px; color: var(--muted); font-weight: 700; margin: 6px 0; }
.rd .rd-pact { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f2f8; font-size: 12.5px; color: #46506e; }
.rd .rd-pact i { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--coral), var(--coral-d)); flex: none; }
.rd .rd-pact span { margin-left: auto; color: #9aa3bd; }

/* Banda de cifras (navy) */
.rd .rd-cifras-sec { padding: clamp(20px, 3vw, 40px) 0; }
.rd .rd-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: linear-gradient(120deg, #16204a, #0e1330); color: #fff; border-radius: 20px; padding: clamp(28px, 3.5vw, 44px) clamp(22px, 3vw, 40px); }
.rd .rd-stat { display: flex; gap: 14px; align-items: center; }
.rd .rd-stat__ic { width: 50px; height: 50px; border-radius: 13px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; flex: none; }
.rd .rd-stat__ic svg { width: 24px; height: 24px; }
.rd .rd-stat b { font-weight: 800; font-size: 1.9rem; line-height: 1; display: block; }
.rd .rd-stat span { font-size: 13px; color: #aeb7d6; }

/* Tarjetas de herramientas */
.rd .rd-profiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.rd .rd-pcard { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.rd .rd-pcard:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(13, 20, 48, .12); }
.rd .rd-pcard__ph { height: 140px; background-size: cover; background-position: center; position: relative; filter: grayscale(.2); }
.rd .rd-pcard__ico { position: absolute; left: 16px; bottom: -18px; width: 42px; height: 42px; border-radius: 11px; background: #fff; box-shadow: 0 8px 18px rgba(13, 20, 48, .16); display: grid; place-items: center; }
.rd .rd-pcard__ico svg { width: 22px; height: 22px; color: var(--coral); }
.rd .rd-pcard__b { padding: 26px 18px 20px; }
.rd .rd-pcard__b h4 { font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.rd .rd-pcard__b p { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.rd .rd-pcard__go { font-weight: 700; font-size: 13.5px; color: var(--coral); }

/* Rejilla de "Próximas novedades" (2 tarjetas, centradas y contenidas) */
.rd .rd-upcoming { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 24px; max-width: 820px; }

/* Subcabecera del ecosistema dentro de "Herramientas y recursos" */
.rd .rd-ecohead { margin-top: clamp(34px, 4vw, 52px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--line); }
.rd .rd-ecohead h3 { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.08; letter-spacing: -.02em; color: var(--navy); margin: 8px 0 0; }

/* Tarjetas de recurso del ecosistema (web externa con banner), en carrusel. */
.rd .rd-reslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; margin-top: 20px; }
/* Carrusel del ecosistema: va DENTRO del wrap, sin el padding de alineación. */
.rd .rd-track--eco { margin-top: 20px; padding-left: 2px; padding-right: 2px; }
.rd .rd-track--eco .rd-res { flex: 0 0 clamp(240px, 26vw, 288px); scroll-snap-align: start; }
.rd .rd-res { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.rd .rd-res:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(13, 20, 48, .13); }
.rd .rd-res__img { display: block; height: 134px; background: #f4f6fb; overflow: hidden; }
.rd .rd-res__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd .rd-res__b { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.rd .rd-res__name { font-weight: 800; font-size: 1.02rem; color: var(--navy); }
.rd .rd-res__text { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rd .rd-res__go { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--coral); }

@media (max-width: 860px) {
  .rd .rd-pro__in { grid-template-columns: 1fr; }
  .rd .rd-panel { transform: none; }
  .rd .rd-profiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) { .rd .rd-cifras { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 680px) { .rd .rd-checks { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rd .rd-profiles { grid-template-columns: 1fr; } }