/*
 Theme Name:   Divi Child – David Páramo
 Theme URI:    https://soydavidparamo.es
 Description:  Tema hijo de Divi para soydavidparamo.es. Todo el CSS y PHP personalizado va aquí, así las actualizaciones de Divi no lo borran.
 Author:       David Páramo Reina
 Template:     Divi
 Version:      1.4.5
 Text Domain:  divi-child-dp
*/
/* v1.4.0 · Preparado para Divi 5.15. Regla de oro: los estilos se cuelgan de NUESTRAS
   clases dp-* (las pones en Divi: módulo/fila/sección > Avanzado > Clase CSS), no de
   las clases internas de Divi, que pueden cambiar entre versiones. Solo se usa
   .et_pb_button como apoyo inofensivo (si no existe, simplemente no aplica). */

/* ==========================================================================
   0. FUENTES LOCALES (Rethink Sans, woff2 en /fonts)
   Sube a /fonts los archivos indicados en fonts/README.md.
   font-display: swap = el texto se ve enseguida con la fuente del sistema
   y se cambia a Rethink Sans cuando termina de cargar (no hay texto invisible).
   ========================================================================== */
@font-face {
  font-family: "Rethink Sans";                       /* nombre que usaremos en Divi */
  src: url("fonts/rethink-sans-400.woff2") format("woff2"); /* archivo local */
  font-weight: 400;                                  /* Regular */
  font-style: normal;
  font-display: swap;                                /* evita texto invisible */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; /* subset latino (español) */
}
@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/rethink-sans-700.woff2") format("woff2");
  font-weight: 700;                                  /* Bold */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("fonts/rethink-sans-800.woff2") format("woff2");
  font-weight: 800;                                  /* ExtraBold (títulos display) */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

/* ==========================================================================
   1. VARIABLES DE MARCA (las mismas que los Colores globales de Divi)
   ========================================================================== */
:root {
  --dp-yellow: #F8F32B;                              /* amarillo dominante */
  --dp-red:    #D72638;                              /* rojo acento */
  --dp-ink:    #22181C;                              /* tinta (texto, bordes) */
  --dp-cream:  #FDFCCE;                              /* crema fondos suaves */
  --dp-ease:   cubic-bezier(.2,.8,.2,1);             /* easing de marca */
}

/* ==========================================================================
   2. TIPOGRAFÍA Y ETIQUETAS
   ========================================================================== */
.dp-giant {                                          /* texto gigante del hero */
  font-size: clamp(56px, 13.5vw, 196px);             /* fluido: 56 px móvil, 196 px desktop */
  line-height: .84;                                  /* interlineado apretado */
  letter-spacing: -.04em;                            /* letras más juntas */
  text-transform: uppercase;                         /* mayúsculas */
  overflow-wrap: normal;                             /* no parte palabras */
}
.dp-label {                                          /* etiquetas tipo [PROYECTO 01] */
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dp-label-row {                                      /* fila de etiquetas con línea */
  border-bottom: 2px solid currentColor;
  padding-bottom: 12px;
}
.dp-email {                                          /* email gigante del footer */
  font-size: clamp(19px, 5.8vw, 84px);               /* siempre cabe entero */
  overflow-wrap: anywhere;
}

/* ==========================================================================
   3. ELEMENTOS DE MARCA
   ========================================================================== */
.dp-sticker {                                        /* sticker redondo "¡Hola!" */
  position: absolute; z-index: 5;
  border-radius: 50%;
  border: 3px solid var(--dp-ink);
  transform: rotate(-14deg);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: transform 300ms var(--dp-ease);
}
.dp-sticker:hover { transform: rotate(-6deg) scale(1.04); } /* gira un poco */

.dp-ticker .card:nth-child(1) { transform: rotate(-6deg); } /* tarjetas giradas del ticker */
.dp-ticker .card:nth-child(2) { transform: rotate(-3deg); }
.dp-ticker .card:nth-child(4) { transform: rotate(3deg); }
.dp-ticker .card:nth-child(5) { transform: rotate(6deg); }

.dp-index-item { border-bottom: 2px solid var(--dp-ink); }  /* índice 001–006 */
.dp-index-item h2 { transition: color 150ms ease; }
.dp-index-item:hover h2 { color: var(--dp-red); }

/* Iconos Material Symbols como SVG (ver icons/README.md) */
.dp-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; } /* el icono hereda tamaño y color del texto */

/* ==========================================================================
   4. MICROINTERACCIONES
   ========================================================================== */
.dp-card { transition: transform 220ms var(--dp-ease), box-shadow 220ms var(--dp-ease); }
.dp-card:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 8px 8px 0 var(--dp-ink); } /* sube + sombra dura */
.dp-btn, .et_pb_button { transition: background-color 180ms var(--dp-ease), transform 100ms ease-out; }
.dp-btn:active, .et_pb_button:active { transform: scale(.97); }      /* pulsación */
.dp-arrow { display: inline-block; transition: transform 180ms var(--dp-ease); }
a:hover .dp-arrow, .dp-btn:hover .dp-arrow, .et_pb_button:hover .dp-arrow { transform: translateX(4px); } /* flecha avanza */
a:focus-visible, button:focus-visible, .dp-btn:focus-visible {
  outline: 3px solid var(--dp-yellow); box-shadow: 0 0 0 6px var(--dp-ink); /* foco visible teclado */
}
@view-transition { navigation: auto; }               /* fundido entre páginas (navegadores compatibles) */

/* ==========================================================================
   5. PÁGINA PROTEGIDA CON CONTRASEÑA
   ========================================================================== */
.post-password-form { max-width: 720px; margin: 0 auto; text-align: center; }
.post-password-form input[type=password] {
  border: 2px solid var(--dp-ink); border-radius: 999px; padding: 16px 24px; font-size: 18px;
}
.post-password-form input[type=submit] {
  background: var(--dp-red); color: #fff; border: 0; border-radius: 999px; padding: 16px 32px; font-weight: 700; cursor: pointer;
}

/* ==========================================================================
   6. IMÁGENES SIN SALTOS DE LAYOUT (CLS)
   ========================================================================== */
img { height: auto; max-width: 100%; }               /* respeta proporción con width/height explícitos */

/* ==========================================================================
   7. MÓVIL (< 767 px, mismo corte que Divi)
   ========================================================================== */
@media (max-width: 767px) {
  .dp-sticker { width: 96px; height: 96px; right: 8px; left: auto; top: -24px; transform: rotate(-10deg); }
  .dp-hover-img { display: none; }                   /* sin imágenes hover en táctil */
}

/* ==========================================================================
   8. MOVIMIENTO REDUCIDO (accesibilidad)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .dp-card:hover { transform: none; }
  /* Divi 5 ya respeta este ajuste en sus animaciones; las nuestras (data-reveal) se fuerzan visibles en la sección 9 */
}

/* ==========================================================================
   9. V3 · MICROINTERACCIONES NUEVAS (M01–M19, ver Figma "Microinteracciones V3")
   Las que necesitan JS usan divi-child/js/dp.js (vanilla, defer). Sin JS, todo
   se ve correctamente (mejora progresiva).
   ========================================================================== */

/* M01 · Header compacta: dp.js añade .is-scrolled al <body> tras 80 px de scroll.
   Pon la clase dp-header en la sección de la cabecera (Theme Builder > Header > Sección > Avanzado > Clase CSS). */
.dp-header { transition: padding 200ms var(--dp-ease), box-shadow 200ms var(--dp-ease); }
.is-scrolled .dp-header { padding-top: 12px !important; padding-bottom: 12px !important; box-shadow: 0 4px 0 var(--dp-ink); }

/* M02 · Selector de idioma ES/EN (menú de TranslatePress con clase dp-lang en el elemento) */
.dp-lang { display: inline-flex; gap: 2px; padding: 2px; border: 2px solid var(--dp-ink); border-radius: 999px; background: #fff; }
.dp-lang a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; /* área táctil 44×44 */
  border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--dp-ink); text-decoration: none;
  transition: background-color 180ms var(--dp-ease), color 180ms var(--dp-ease); }
.dp-lang .current-language a, .dp-lang a[aria-current="true"] { background: var(--dp-ink); color: var(--dp-yellow); } /* idioma activo */
.dp-lang a:hover { background: var(--dp-yellow); }

/* M03 · Botón magnético: dp.js mueve [data-magnetic] con la variable --dp-mx/--dp-my */
.dp-magnetic { transform: translate(var(--dp-mx, 0), var(--dp-my, 0)); transition: transform 250ms var(--dp-ease); }

/* M04 · Entrada del titular por palabras (dp.js envuelve cada palabra en .dp-word) */
.dp-word { display: inline-block; overflow: hidden; vertical-align: top; }
.dp-word > span { display: inline-block; transform: translateY(.4em); opacity: 0; animation: dp-rise 600ms var(--dp-ease) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes dp-rise { to { transform: none; opacity: 1; } }

/* M05 · Sticker con balanceo suave en reposo */
.dp-sticker { animation: dp-wobble 12s ease-in-out infinite; }
@keyframes dp-wobble { 0%,100% { rotate: -14deg; } 50% { rotate: -10deg; } }

/* M06 · Marquee: dp.js sube la velocidad durante el scroll (Divi Plus lee su propia duración; esto la acelera) */
.dp-marquee.is-fast * { animation-duration: calc(var(--dp-marquee-base, 30s) / 2) !important; }
.dp-marquee:hover * { animation-play-state: paused !important; } /* pausa al pasar el ratón */

/* M07 · Tarjeta con inclinación 3D (dp.js pone --dp-rx / --dp-ry en [data-tilt]) */
[data-tilt] { transform: perspective(800px) rotateX(var(--dp-rx, 0)) rotateY(var(--dp-ry, 0)) translateY(var(--dp-lift, 0)); transition: transform 220ms var(--dp-ease), box-shadow 220ms var(--dp-ease); }
[data-tilt]:hover { --dp-lift: -6px; box-shadow: 8px 8px 0 var(--dp-ink); }

/* M08 · Número del índice se rellena de rojo */
.dp-index-item .dp-index-num { transition: color 150ms ease; }
.dp-index-item:hover .dp-index-num { color: var(--dp-red); }

/* M09 · Servicio: fondo amarillo e icono girado */
.dp-service { transition: background-color 200ms var(--dp-ease); }
.dp-service .dp-icon { transition: transform 200ms var(--dp-ease); }
.dp-service:hover, .dp-service:focus-within { background-color: var(--dp-yellow) !important; }
.dp-service:hover .dp-icon, .dp-service:focus-within .dp-icon { transform: rotate(-8deg); }

/* M10 · Subrayado que se dibuja */
.dp-underline a, a.dp-underline { text-decoration: none; background: linear-gradient(var(--dp-red), var(--dp-red)) 0 100% / 0 4px no-repeat; transition: background-size 300ms var(--dp-ease); }
.dp-underline a:hover, a.dp-underline:hover, .dp-underline a:focus-visible { background-size: 100% 4px; }

/* M11 · Cursor con etiqueta (elemento creado por dp.js; solo ratón) */
.dp-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dp-ink); color: var(--dp-ink); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 "Rethink Sans", sans-serif; transition: width 150ms var(--dp-ease), height 150ms var(--dp-ease), background-color 150ms; }
.dp-cursor.is-link { width: 48px; height: 48px; background: var(--dp-yellow); mix-blend-mode: multiply; }
.dp-cursor.has-label { width: 72px; height: 72px; background: var(--dp-yellow); mix-blend-mode: normal; border: 2px solid var(--dp-ink); }
@media (pointer: coarse) { .dp-cursor { display: none; } }

/* M12 · Barra de progreso de lectura sin JS (solo navegadores con scroll-driven animations) */
.dp-progress { position: fixed; top: 0; left: 0; height: 6px; width: 100%; background: var(--dp-red); transform-origin: 0 50%; transform: scaleX(0); z-index: 100000; display: none; }
@supports (animation-timeline: scroll()) { .dp-progress { display: block; animation: dp-grow linear both; animation-timeline: scroll(root); } }
@keyframes dp-grow { to { transform: scaleX(1); } }

/* M13 · Chips del filtro de galería (Divi Plus Filterable Gallery: añadir clase dp-chips al módulo) */
.dp-chips button, .dp-chips li { min-height: 44px; border: 2px solid var(--dp-ink); border-radius: 999px; padding: 10px 18px; transition: background-color 200ms var(--dp-ease), color 200ms var(--dp-ease); }
.dp-chips .active, .dp-chips [aria-pressed="true"] { background: var(--dp-ink); color: var(--dp-yellow); }

/* M15 · Contraseña incorrecta: tiembla (dp.js añade .dp-error si la URL vuelve con el aviso de error) */
.post-password-form.dp-error { animation: dp-shake 300ms var(--dp-ease); }
@keyframes dp-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

/* M16 · Reveal al scroll (dp.js añade .is-in a [data-reveal]); sin JS se ve todo */
.dp-js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--dp-ease), transform 500ms var(--dp-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.dp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* M17 · Volver arriba */
.dp-top { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--dp-ink);
  background: var(--dp-yellow); color: var(--dp-ink); display: flex; align-items: center; justify-content: center; z-index: 999;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 200ms var(--dp-ease), transform 200ms var(--dp-ease), visibility 200ms; }
.dp-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* Reduced motion para todo lo de V3 */
@media (prefers-reduced-motion: reduce) {
  .dp-word > span { opacity: 1; transform: none; animation: none; }
  .dp-sticker { animation: none; }
  [data-tilt] { transform: none !important; }
  .dp-js [data-reveal] { opacity: 1; transform: none; }
  .dp-progress, .dp-cursor { display: none !important; }
  .post-password-form.dp-error { animation: none; }
}

/* =========================================================
   10. V3 · TRAYECTORIA (M20–M23)
   Sección con clase dp-track (contiene barra, flechas y contador).
   Dentro, la COLUMNA con clase dp-track-row y un Blurb por hito con clase dp-hito (preset "DP – Hito").
   La tarjeta de hoy (COFARES) lleva además dp-hito-hoy.
   ========================================================= */
/* M20 · Track horizontal: la columna pasa a fila con scroll y "imán" en cada tarjeta */
.dp-track-row { display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 16px 40px; cursor: grab; scrollbar-width: thin; }
.dp-track-row.is-drag { cursor: grabbing; scroll-snap-type: none; }       /* dp.js mientras arrastras */
.dp-track-row > * { flex: 0 0 340px; margin: 0 !important; scroll-snap-align: start; }
.dp-track-row > .dp-hito-hoy { flex-basis: 510px; }                                       /* COFARES, tarjeta roja grande */
.dp-track-bar { height: 6px; background: var(--dp-red, #D72638); transform-origin: left; transform: scaleX(var(--dp-p, 0)); width: 240px; } /* progreso */
/* M22 · Hito: se endereza y crece la sombra al pasar el ratón o con foco de teclado */
.dp-hito { border: 4px solid #22181C; box-shadow: 12px 12px 0 #22181C; transform: rotate(var(--dp-rot, -2deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.dp-hito:nth-child(even) { --dp-rot: 2deg; }
.dp-hito:hover, .dp-hito:focus-within { transform: rotate(0) translateY(-6px); box-shadow: 18px 18px 0 #22181C; }
/* M23 · "2015 → HOY": la flecha entra deslizando cuando el título se revela (usa data-reveal de M16) */
.dp-years .dp-arrow-in { display: inline-block; transform: translateX(-40px); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1) .2s, opacity .6s .2s; }
.dp-years.is-in .dp-arrow-in { transform: none; opacity: 1; }
/* M21 · Contadores: módulo nativo "Contador numérico" de Divi (cuenta solo al entrar en pantalla), sin CSS extra */
/* =========================================================
   11. M24 · CARRUSEL DE TRAYECTORIA EN MÓVIL (opción A elegida)
   Misma sección dp-track y columna dp-track-row; en móvil se ve 1 tarjeta grande y asoma la siguiente.
   Elementos que añades con un módulo Código debajo de la fila:
   <div class="dp-carousel-nav"><button data-track="-1" aria-label="Anterior">…</button>
   <span class="dp-count" aria-live="polite">01 / 10</span><button data-track="1" aria-label="Siguiente">…</button></div>
   <div class="dp-track-bar"></div><p class="dp-hint">Desliza para ver las 10 etapas</p>
   ========================================================= */
@media (max-width: 767px) {
  .dp-track-row { gap: 16px; padding: 8px 0 24px; cursor: auto; }
  .dp-track-row > *,
  .dp-track-row > .dp-hito-hoy { flex: 0 0 calc(100% - 50px); }   /* 1 card + 40 px de la siguiente asomando */
  .dp-hito { --dp-rot: 0deg; box-shadow: 8px 8px 0 #22181C; }  /* sin giro en móvil: más legible */
}
.dp-carousel-nav { display: flex; align-items: center; gap: 12px; }
.dp-carousel-nav button { width: 48px; height: 48px; border-radius: 999px; border: 2px solid #22181C; background: #F8F32B; color: #22181C; display: grid; place-items: center; } /* táctil 48 px */
.dp-count { font: 800 32px/1 "Rethink Sans", sans-serif; color: #F8F32B; font-variant-numeric: tabular-nums; }
.dp-track-bar { width: 100%; }                               /* en móvil la barra ocupa todo el ancho */
.dp-hint { display: flex; align-items: center; gap: 8px; color: #FDFCCE; font-weight: 700; font-size: 14px; animation: dp-nudge 1.2s ease-in-out 2; } /* se mueve 2 veces */
.dp-hint.is-off { opacity: 0; transition: opacity .3s; }     /* dp.js lo oculta tras el primer swipe */
@keyframes dp-nudge { 50% { transform: translateX(8px); } }
@media (min-width: 768px) { .dp-hint { display: none; } }    /* en tablet/desktop no hace falta */
@media (prefers-reduced-motion: reduce) { .dp-hint { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .dp-hito, .dp-years .dp-arrow-in { transition: none; transform: none; opacity: 1; }
  .dp-track-row { scroll-behavior: auto; }
}
/* ==========================================================================
   12. LAYOUTS JSON V3 (añadido para los layouts generados en /build/divi-json)
   Pegar al final de divi-child/style.css (sube la versión a 1.4.1).
   Solo clases dp-*; colores = variables de marca. Amarillo base, rojo y tinta
   como contraste; violeta/naranja NO se usan aquí (solo micro-acentos manuales).
   ========================================================================== */
body { font-family: "Rethink Sans", system-ui, sans-serif; color: var(--dp-ink); background: var(--dp-yellow); }
.dp-row-wide { max-width: none !important; width: 100% !important; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dp-icon { width: 1em; height: 1em; fill: currentColor; }

/* Header */
.dp-logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; color: var(--dp-ink); text-decoration: none; }
.dp-logo-mark { width: 20px; height: auto; }
.dp-nav a { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--dp-ink); }
.dp-nav a::before { content: "["; } .dp-nav a::after { content: "]"; }
.dp-nav .dp-lang a::before, .dp-nav .dp-lang a::after { content: none; }

/* Botones (además del preset DP – Botón) */
.dp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 28px; border: 3px solid var(--dp-ink); border-radius: 999px; background: var(--dp-ink); color: #fff; font-weight: 700; box-shadow: 6px 6px 0 var(--dp-ink); }
.dp-btn:hover { background: var(--dp-red); color: var(--dp-yellow); }
.dp-btn--ghost { background: transparent; color: var(--dp-ink); }
.dp-cv { background: var(--dp-ink); color: var(--dp-yellow); }
@media (max-width: 767px) { .dp-cv { width: 100%; justify-content: center; } }

/* Marquee sin plugin (CSS puro, se para con reduced-motion y con hover) */
.dp-mq { overflow: hidden; transform: rotate(var(--dp-rot, -2deg)); }
.dp-mq-track { display: flex; width: max-content; animation: dp-mq var(--dp-marquee-base, 30s) linear infinite; }
.dp-mq-track > span { display: inline-flex; align-items: center; gap: .4em; padding-right: .4em; font: 800 clamp(40px, 5.6vw, 80px)/1 "Rethink Sans", sans-serif; color: var(--dp-yellow); white-space: nowrap; text-transform: uppercase; }
.dp-mq-sep { color: var(--dp-red); display: inline-flex; }
@keyframes dp-mq { to { transform: translateX(-50%); } }
.dp-marquee:hover .dp-mq-track { animation-play-state: paused; }
@media (max-width: 767px) { .dp-mq-track { --dp-marquee-base: 20s; } }

/* Hero */
.dp-hero-sub { font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; line-height: 1.05; }
.dp-body-lg { font-size: clamp(16px, 1.25vw, 18px); max-width: 52ch; }
.dp-hero .dp-sticker { position: absolute; right: 0; top: -32px; }

/* Ticker de tarjetas destacadas */
.dp-ticker { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 4vw 40px; }
.dp-ticker .card { flex: 0 0 min(360px, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 3px solid var(--dp-ink); border-radius: 24px; background: var(--dp-yellow); color: var(--dp-ink); text-decoration: none; }
.card-img { display: block; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--dp-cream) center / cover no-repeat; border: 2px solid var(--dp-ink); }
.card-title { font-weight: 700; font-size: 24px; }

/* Índice */
.dp-index-item { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 16px; padding: 16px 0; color: var(--dp-ink); text-decoration: none; }
.dp-index-item h2 { font-size: clamp(40px, 7.2vw, 104px); font-weight: 800; line-height: 1; margin: 0; }
.dp-index-num { color: var(--dp-red); font-size: 14px; }

/* Trayectoria */
.dp-lead { font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: var(--dp-cream); max-width: 40ch; }
.dp-lead-dark { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; max-width: 48ch; }
.dp-stat { border: 3px solid var(--dp-ink); border-radius: 24px; padding: 24px; background: var(--dp-yellow); box-shadow: 8px 8px 0 var(--dp-ink); }
.dp-stat--amarillo { background: var(--dp-ink); color: var(--dp-yellow); }
.dp-stat-num { font: 800 clamp(48px, 8.3vw, 120px)/1 "Rethink Sans", sans-serif; margin: 0; }
.dp-stat-label { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.dp-hito { background: var(--dp-cream); border-radius: 24px; padding: 28px; }
.dp-hito-hoy { background: var(--dp-ink); color: var(--dp-yellow); }
.dp-hito-year { font: 800 clamp(64px, 6.7vw, 96px)/1 "Rethink Sans", sans-serif; color: var(--dp-red); margin: 0 0 16px; }
.dp-hito-hoy .dp-hito-year { color: var(--dp-yellow); font-size: clamp(88px, 9.7vw, 140px); }
.dp-hito-meta { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.dp-hito-meta .dp-icon { font-size: 40px; }
.dp-hito-co { font-size: clamp(28px, 2.4vw, 34px); font-weight: 800; margin: 8px 0; }
.dp-hito-hoy .dp-hito-co { font-size: clamp(34px, 3.2vw, 46px); }
.dp-hito-role { font-size: clamp(16px, 1.5vw, 22px); }
.dp-hito-now { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; margin-top: 16px; }
.dp-drag-hint { color: var(--dp-cream); font-weight: 700; margin-left: 8px; }
@media (max-width: 767px) { .dp-drag-hint { display: none; } }
.dp-chips-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 32px 0; }
.dp-chips-list li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--dp-ink); border-radius: 999px; background: var(--dp-yellow); font-weight: 700; font-size: 16px; }
@media (max-width: 767px) { .dp-chips-list { display: none; } }

/* Servicios */
.dp-service-card { height: 100%; padding: 28px; border: 3px solid var(--dp-ink); border-radius: 24px; background: #fff; box-shadow: 8px 8px 0 var(--dp-ink); }
.dp-service:nth-child(odd) .dp-service-card { transform: rotate(-1.5deg); } .dp-service:nth-child(even) .dp-service-card { transform: rotate(1.5deg); }
.dp-service-card .dp-icon { font-size: 36px; color: var(--dp-red); }
.dp-service-card h3 { font-size: 24px; font-weight: 700; } .dp-service-card p { font-size: 14px; color: #6B6B6B; }
.dp-service-card--dark { background: var(--dp-ink); color: var(--dp-cream); } .dp-service-card--dark p, .dp-service-card--dark .dp-icon { color: var(--dp-cream); }

/* CTA */
.dp-cta-title { color: var(--dp-yellow); font-size: clamp(56px, 16vw, 234px); }
.dp-sticker--cta { display: inline-flex; gap: 8px; align-items: center; padding: 16px 28px; background: var(--dp-yellow); border: 3px solid var(--dp-ink); border-radius: 999px; font: 700 clamp(24px, 3.2vw, 46px)/1 "Rethink Sans", sans-serif; transform: rotate(-8deg); }
.dp-cta-mail { color: var(--dp-yellow); font-weight: 700; }

/* Footer */
.dp-footer, .dp-footer a { color: var(--dp-yellow); }
.dp-email { font-weight: 800; text-decoration: none; }
.dp-foot-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; border: 0; }
.dp-legal { font-size: 13px; opacity: .8; }

/* Portfolio */
.dp-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-filter button { min-height: 44px; padding: 0 16px; border: 2px solid var(--dp-ink); border-radius: 999px; background: transparent; font: 14px "Rethink Sans", sans-serif; cursor: pointer; }
.dp-filter button[aria-pressed="true"] { background: var(--dp-ink); color: var(--dp-yellow); }
.dp-pcard { display: flex; flex-direction: column; gap: 8px; color: var(--dp-ink); text-decoration: none; }
.dp-pcard h3 { font-size: 32px; font-weight: 700; margin: 0; } .dp-pcard p { font-size: 14px; color: #6B6B6B; }
.dp-pcard .card-img { aspect-ratio: 4 / 3; background-color: var(--dp-ink); }
.dp-lock { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; }
.dp-grid .is-hidden, .dp-pcard.is-hidden { display: none !important; }

/* Caso */
.dp-case-title { font-size: clamp(44px, 8.3vw, 120px); font-weight: 800; line-height: .95; letter-spacing: -.03em; }
.dp-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px; border: 3px solid var(--dp-ink); border-radius: 24px; background: #fff; }
.dp-meta dt { color: var(--dp-red); } .dp-meta dd { margin: 4px 0 0; font-weight: 700; font-size: 20px; }
@media (max-width: 767px) { .dp-meta { grid-template-columns: 1fr 1fr; } }
.dp-note { font-size: 14px; color: #6B6B6B; }
.dp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.dp-facts > div { padding: 24px; border: 3px solid var(--dp-ink); border-radius: 24px; background: #fff; }
.dp-facts .dp-icon { font-size: 32px; color: var(--dp-red); } .dp-facts h3 { font-size: 20px; font-weight: 700; } .dp-facts p { font-size: 16px; }
@media (max-width: 767px) { .dp-facts { grid-template-columns: 1fr; } }
.dp-kpi { font: 800 20px/1.3 "Rethink Sans", sans-serif; } .dp-kpi span { display: block; font-weight: 400; font-size: 16px; }
.dp-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; color: var(--dp-yellow); }
.dp-kpi-num { font: 800 40px/1 "Rethink Sans", sans-serif; margin: 0 0 8px; }
@media (max-width: 980px) { .dp-kpis { grid-template-columns: repeat(2, 1fr); } }
.dp-next { color: var(--dp-ink); text-decoration: none; font-size: clamp(48px, 9.7vw, 140px); }

/* Contacto */
.dp-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; }
.dp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dp-red); box-shadow: 0 0 0 4px rgba(215, 38, 56, .2); }
.dp-contact-info { padding: 28px; border: 3px solid var(--dp-ink); border-radius: 24px; background: #fff; box-shadow: 8px 8px 0 var(--dp-ink); }
.dp-form input, .dp-form textarea { border: 3px solid var(--dp-ink) !important; border-radius: 16px !important; background: #fff !important; font: 18px "Rethink Sans", sans-serif !important; padding: 16px !important; }

@media (prefers-reduced-motion: reduce) {
  .dp-mq-track { animation: none; }
  .dp-service-card, .dp-sticker--cta { transform: none !important; }
}

/* ===== §13 · Sobre mí + Próximamente (v1.4.2) ===== */
.dp-about-card { background: var(--dp-ink); color: var(--dp-yellow); border: 3px solid var(--dp-ink); border-radius: 24px; padding: 32px; box-shadow: 8px 8px 0 var(--dp-ink); }
.dp-about-card .dp-label { color: var(--dp-yellow); }
.dp-facts-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 18px; }
.dp-facts-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; padding: 0; }
.dp-facts-list .dp-icon { width: 28px; height: 28px; flex: none; }
/* stickers en línea (píldora): anulan la posición absoluta del sticker redondo */
.dp-sticker--violet, .dp-sticker--orange { position: static; display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dp-sticker--violet { background: #5448C8; color: #fff; border-color: #5448C8; transform: rotate(-4deg); margin-top: 20px; } /* único acento violeta */
.dp-sticker--orange { background: #EAC435; color: var(--dp-ink); transform: rotate(-3deg); }                             /* único acento naranja */
.dp-sticker--orange .dp-icon { width: 20px; height: 20px; }
.dp-tools { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.dp-tools li { background: #fff; border: 3px solid var(--dp-ink); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 16px; transition: background-color 180ms var(--dp-ease); }
.dp-tools li:hover { background: var(--dp-yellow); }
.dp-cv-card { background: #fff; border: 3px solid var(--dp-ink); border-radius: 24px; padding: 32px; box-shadow: 8px 8px 0 var(--dp-ink); margin-bottom: 16px; }
.dp-cv-card .dp-icon { width: 40px; height: 40px; }
.dp-cv-card p { color: #6B6B6B; font-size: 16px; }
.dp-soon-title { font-size: clamp(56px, 10.4vw, 150px); word-break: break-word; hyphens: auto; }
@media (max-width: 767px) {
  .dp-about-card, .dp-cv-card { padding: 24px; }
  .dp-facts-list li { font-size: 17px; }
  .dp-tools li { font-size: 14px; }
}

/* =========================================================
   1.4.3 · Header + Footer pixel-perfect Figma V3 (4234:4 / 4234:136, móvil 4234:782 / 4234:893)
   ========================================================= */
html, body, #page-container, #et-boc, .et-l--body { background-color: var(--dp-yellow); }
#page-container { padding-bottom: 0 !important; }
.et-l--footer, .et-l--footer > .et_builder_inner_content { background: var(--dp-red); margin: 0; }
body #main-footer, body #footer-bottom { display: none; }

/* Header: 1440×90, fondo amarillo, borde inferior 2px tinta, padding 20/120 */
.et-l--header .dp-header.et_pb_section { background: var(--dp-yellow) !important; border-bottom: 2px solid var(--dp-ink); padding: 20px 0 !important; }
.dp-header .dp-header-row.et_pb_row { width: calc(100% - 240px) !important; max-width: 1200px !important; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: nowrap; }
.dp-header .dp-header-row > .et_pb_column { width: auto !important; margin: 0 !important; flex: 0 0 auto; background: transparent !important; }
.dp-header .dp-header-row > .et_pb_column:nth-child(2) { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.dp-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--dp-ink); text-decoration: none; font: 700 20px/1.3 "Rethink Sans", sans-serif; white-space: nowrap; }
.dp-logo-mark { width: 26px; height: 36px; flex: none; }
/* Menú: sin caja blanca, una línea, 14px/1.5, tracking 1.12px, gap 28px */
.dp-nav, .dp-nav .et_pb_menu__wrap, .dp-nav .et_pb_menu_inner_container, .dp-header .et_pb_menu { background: transparent !important; padding: 0 !important; border: 0 !important; }
.dp-nav .et-menu-nav, .dp-nav .et-menu { display: flex !important; align-items: center; gap: 28px; flex-wrap: nowrap !important; margin: 0; padding: 0 !important; }
.dp-nav .et-menu > li { padding: 0 !important; margin: 0 !important; }
.dp-nav .et-menu > li > a { padding: 0 !important; font: 400 14px/1.5 "Rethink Sans", sans-serif !important; letter-spacing: 1.12px !important; text-transform: uppercase; color: var(--dp-ink) !important; white-space: nowrap; }
.dp-nav .et-menu > li.current-menu-item > a, .dp-nav .et-menu > li > a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.dp-nav .et-menu > li.dp-lang { margin-left: 0 !important; }
.dp-lang { gap: 2px; padding: 2px; border: 2px solid var(--dp-ink); background: #fff; }
.dp-lang a { min-width: 44px; height: 40px; min-height: 40px; font: 700 14px/normal "Rethink Sans", sans-serif; letter-spacing: 0; }
/* Botón Hablemos: tinta, texto blanco 16px bold, padding 16/32, alto 48, radio 999 */
.dp-header .et_pb_button.dp-btn--header, .dp-btn--header { display: inline-flex !important; align-items: center; min-height: 48px; padding: 16px 32px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--dp-ink) !important; color: #fff !important;
  font: 700 16px/1 "Rethink Sans", sans-serif !important; letter-spacing: 0 !important; box-shadow: none !important; text-decoration: none; }
.dp-btn--header::after, .dp-btn--header::before { display: none !important; }
.dp-header .et_pb_button.dp-btn--header:hover { background: var(--dp-red) !important; color: var(--dp-yellow) !important; padding: 16px 32px !important; }

/* Footer: 1440×449, fondo rojo, padding 80/120, gap 40 */
.et-l--footer .dp-footer.et_pb_section { background: var(--dp-red) !important; padding: 80px 0 !important; margin: 0 !important; }
.dp-footer .et_pb_row { width: calc(100% - 240px) !important; max-width: 1200px !important; padding: 0 !important; }
.dp-footer .et_pb_column { display: flex; flex-direction: column; gap: 40px; background: transparent !important; }
.dp-footer .et_pb_module { margin: 0 !important; }
.dp-footer, .dp-footer p, .dp-footer a, .dp-footer .dp-label { color: var(--dp-yellow) !important; }
.dp-footer p { padding: 0; margin: 0; font: 400 14px/1.5 "Rethink Sans", sans-serif; letter-spacing: 1.12px; }
.dp-footer .dp-label-row { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--dp-yellow); }
.dp-footer .dp-email { display: block; font: 800 84px/.88 "Rethink Sans", sans-serif !important; letter-spacing: -3.36px !important; text-transform: uppercase; white-space: nowrap; }
.dp-footer .dp-email.dp-underline { background-image: linear-gradient(var(--dp-ink), var(--dp-ink)); }
.dp-footer .dp-foot-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border: 0; border-top: 2px solid var(--dp-yellow); font-size: 14px; }
.dp-footer .dp-legal { font-size: 12px; letter-spacing: 1.12px; opacity: .8; margin-top: -24px; }

/* Móvil (≤980 Divi tablet → aplica layout 390 de Figma) */
@media (max-width: 980px) {
  .dp-header .et_pb_column:nth-child(2) .et-menu-nav { display: none !important; }
  .dp-header .dp-header-row.et_pb_row { width: calc(100% - 40px) !important; gap: 8px; }
  .et-l--header .dp-header.et_pb_section { padding: 14px 0 !important; }
  .dp-header .et_pb_column:nth-child(3) { display: none; }
  .dp-header .mobile_menu_bar, .dp-header .et_mobile_nav_menu .mobile_nav { width: 48px; height: 48px; border-radius: 999px; background: var(--dp-ink); display: flex; align-items: center; justify-content: center; }
  .dp-header .mobile_menu_bar:before { color: var(--dp-yellow) !important; font-size: 24px; }
  .et-l--footer .dp-footer.et_pb_section { padding: 48px 0 !important; }
  .dp-footer .et_pb_row { width: calc(100% - 40px) !important; }
  .dp-footer .et_pb_column { gap: 24px; }
  .dp-footer .dp-email { font-size: clamp(19px, 5.3vw, 84px) !important; letter-spacing: -.04em !important; }
  .dp-footer .dp-foot-meta { flex-direction: column; gap: 0; }
  .dp-footer .dp-legal { margin-top: -12px; }
}
@media (min-width: 981px) and (max-width: 1340px) { .dp-footer .dp-email { font-size: 5.8vw !important; letter-spacing: -.04em !important; } }

/* =========================================================
   §14 · Sobre mí · fotos (v1.4.4) — Figma 4268:3 (desktop) / 4268:10 (móvil)
   Módulos Imagen con clase "dp-photo dp-photo-1" (4:5) y "dp-photo dp-photo-2" (1:1)
   en la columna 1_3 (clase dp-about-side), encima de la tarjeta En corto.
   ========================================================= */
.dp-about-side { display: flex; flex-direction: column; }
.dp-photo.et_pb_image, .dp-photo { position: relative; margin: 0 !important; line-height: 0; }
.dp-photo .et_pb_image_wrap, .dp-photo img { display: block; width: 100%; height: 100%; }
.dp-photo .et_pb_image_wrap { border: 3px solid var(--dp-ink); border-radius: 24px; overflow: hidden;
  box-shadow: 8px 8px 0 var(--dp-ink); background: #D4D4CF; }
.dp-photo img { object-fit: cover; }
.dp-photo-1 { width: 59%; aspect-ratio: 4 / 5; transform: rotate(-3deg); margin: 22px 0 0 8px !important; z-index: 1; }
.dp-photo-1 .et_pb_image_wrap { aspect-ratio: 4 / 5; }
.dp-photo-2 { width: 47%; aspect-ratio: 1 / 1; transform: rotate(4deg); align-self: flex-end; margin: -126px 0 40px 0 !important; z-index: 2; }
.dp-photo-2 .et_pb_image_wrap { aspect-ratio: 1 / 1; }
.dp-photo { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.dp-photo-1:hover { transform: rotate(-1deg) translateY(-4px); }
.dp-photo-2:hover { transform: rotate(2deg) translateY(-4px); }
@media (max-width: 980px) {
  .dp-photo-1 { width: 58%; margin: 16px 0 0 6px !important; }
  .dp-photo-2 { width: 48%; margin: -96px 0 32px 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .dp-photo { transition: none; } }
/* §14b · Tarjeta En corto como banda horizontal en desktop (edición de David, Figma 4264:412: 1200×178, padding 35, gap 20) */
.dp-about-facts-row.et_pb_row { padding-top: 40px !important; }
@media (min-width: 981px) {
  .dp-about-wide .dp-about-card { display: grid; grid-template-columns: 1fr auto; row-gap: 20px; padding: 35px; }
  .dp-about-wide .dp-about-card .dp-label { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .dp-about-wide .dp-about-card .dp-sticker { grid-column: 2; grid-row: 1; margin: 0; }
  .dp-about-wide .dp-facts-list { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; }
}

/* =========================================================
   §15 · Inicio pixel-perfect Figma V3 (4234:3, 1440) + fixes Divi 5 (v1.4.5)
   Divi 5: columnas .et_flex_column (flex, --flex-direction:column, gap=--module-gutter); módulos .et_flex_module.
   ========================================================= */
.dp-label-row--3 { display: flex; justify-content: space-between; }
/* Etiquetas [ ]: Regular 14 / 1.5 / 1.12px, pb 12, línea 2px */
.dp-label-row { padding-bottom: 12px; border-bottom: 2px solid currentColor; font: 400 14px/1.5 "Rethink Sans", sans-serif; letter-spacing: 1.12px; margin: 0; }
.dp-label { font: 400 14px/1.5 "Rethink Sans", sans-serif; letter-spacing: 1.12px; }
/* Secciones: padding 112/120, gap 40 */
.dp-track.et_pb_section, .dp-cta.et_pb_section { padding: 112px 0 !important; }
.et_pb_section .et_pb_row { max-width: 1200px; }
/* Marquee: banda roja, py 24, ExtraBold 80 / .88 / -3.2px amarillo, giro -2° */
.dp-marquee .dp-mq { background: var(--dp-red); padding: 24px 0; }
.dp-mq-track > span { font: 800 80px/.88 "Rethink Sans", sans-serif; letter-spacing: -3.2px; }
.dp-mq-sep { color: var(--dp-yellow); }
/* Hero: py 64, gap 40/48 */
.dp-hero.et_pb_section { padding: 64px 0 96px !important; overflow: hidden; }
.dp-hero h1.dp-giant { font: 800 231px/.84 "Rethink Sans", sans-serif; letter-spacing: -11.55px; color: var(--dp-ink); margin: 40px 0 48px; word-break: normal; }
.dp-hero-sub { font: 800 48px/1.1 "Rethink Sans", sans-serif; color: var(--dp-ink); margin: 0; }
.dp-body-lg { font: 400 18px/1.6 "Rethink Sans", sans-serif; color: var(--dp-ink); max-width: 590px; }
.dp-hero .et_pb_button.dp-btn { min-height: 0; padding: 16px 32px !important; border: 2px solid var(--dp-ink) !important; border-radius: 999px !important; background: var(--dp-ink) !important; color: #fff !important; font: 700 16px/1 "Rethink Sans", sans-serif !important; box-shadow: none !important; }
.dp-hero .et_pb_button.dp-btn--ghost { background: transparent !important; color: var(--dp-ink) !important; }
.dp-hero .et_pb_button::after { display: none !important; }
.dp-hero .dp-lcp { background: #fff; border: 2px solid var(--dp-ink); border-radius: 24px; padding: 64px; }
.dp-hero .dp-sticker { width: 120px; height: 120px; padding: 10px; border: 3px solid var(--dp-ink); border-radius: 60px; background: var(--dp-red); color: var(--dp-yellow); font: 700 20px/1.3 "Rethink Sans", sans-serif; transform: rotate(-12deg); right: -20px; top: -30px; }
/* Proyectos destacados: fondo tinta, H2 96 / .88 / -3.84 amarillo, tarjetas 300×400 r20 p20 */
.dp-ticker { gap: 32px; padding: 24px 0 40px; overflow-x: auto; }
.dp-ticker .card { flex: 0 0 300px !important; width: 300px; height: 400px; padding: 20px; gap: 8px; border: 0; border-radius: 20px; box-shadow: none;
  display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.dp-ticker .card.dp-card--rojo { background: var(--dp-red); color: #fff; }
.dp-ticker .card.dp-card--amarillo { background: var(--dp-yellow); color: var(--dp-ink); }
.dp-ticker .card-ph { font: 400 14px/1.5 "Rethink Sans", sans-serif; letter-spacing: 1.12px; }
.dp-ticker .card-title { font: 700 24px/1.3 "Rethink Sans", sans-serif; }
.dp-ticker .card:nth-child(3) { transform: none; }
/* Índice: filas py 22, gap 32, borde 2px; título ExtraBold 104 / .95 / -4.16px; FIX letra-por-línea en Divi 5 */
.dp-index, .dp-index-item, .dp-index-item h2 { min-width: 0; width: 100%; word-break: normal !important; overflow-wrap: normal !important; }
.dp-index-item { display: flex !important; flex-direction: row !important; align-items: center; gap: 32px; padding: 22px 0; border-bottom: 2px solid var(--dp-ink); }
.dp-index-item .dp-index-num { flex: 0 0 auto; font: 400 14px/1.5 "Rethink Sans", sans-serif; letter-spacing: 1.12px; color: var(--dp-red); }
.dp-index-item h2 { flex: 1 1 auto; width: auto; font: 800 104px/.95 "Rethink Sans", sans-serif !important; letter-spacing: -4.16px; white-space: nowrap; color: var(--dp-ink); padding: 0; }
.dp-index-item .dp-label { flex: 0 0 auto; white-space: nowrap; }
/* Trayectoria: FIX tarjetas estrechas en Divi 5 (la columna es flex en columna) */
.et_pb_column.dp-track-row, .et_flex_column.dp-track-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; gap: 32px; overflow-x: auto; }
.dp-track-row > .et_pb_module, .dp-track-row > .dp-hito { flex: 0 0 340px !important; width: 340px !important; min-width: 340px; max-width: none; margin: 0 !important; word-break: normal; }
.dp-track-row > .dp-hito-hoy { flex-basis: 510px !important; width: 510px !important; min-width: 510px; }
.dp-hito { padding: 28px; border-radius: 0; }
.dp-hito-hoy { background: var(--dp-red); color: var(--dp-yellow); }
.dp-hito-hoy .dp-hito-year { font-size: 140px; letter-spacing: -7px; }
.dp-hito-year { font-size: 96px; letter-spacing: -4.8px; }
.dp-hito-co { font-size: 34px; } .dp-hito-hoy .dp-hito-co { font-size: 46px; }
.dp-hito-role { font-size: 22px; } .dp-hito-meta { font-size: 20px; }
.dp-hito-now { background: var(--dp-ink); padding: 14px; border-radius: 999px; font-size: 20px; }
.dp-years { font: 800 220px/1 "Rethink Sans", sans-serif; letter-spacing: -11px; color: var(--dp-yellow); }
.dp-lead { font: 700 28px/normal "Rethink Sans", sans-serif; color: var(--dp-cream); }
.dp-stat { border-radius: 0; border: 3px solid var(--dp-ink); box-shadow: 6px 6px 0 var(--dp-ink); padding: 24px; }
.dp-stat-num { font-size: 120px; } .dp-stat-label { font-size: 14px; letter-spacing: 0; }
.dp-chips-list li { padding: 12px 18px; font-size: 16px; }
/* Servicios: tarjetas borde 4, sombra 14px, r16, p28, gap 12, giro ±1.5° */
.dp-service-card { border: 4px solid var(--dp-ink); border-radius: 16px; padding: 28px; box-shadow: 14px 14px 0 var(--dp-ink); display: flex; flex-direction: column; gap: 12px; }
.dp-service:nth-child(2) .dp-service-card { background: var(--dp-yellow); }
.dp-service-card .dp-label { color: var(--dp-red); }
.dp-service-card--dark .dp-label { color: var(--dp-cream); }
/* CTA: título 234 / .88 / -9.36px amarillo; sticker -8°, 46px, px38 py20, sombra 6px */
.dp-cta-title { font: 800 234px/.88 "Rethink Sans", sans-serif; letter-spacing: -9.36px; color: var(--dp-yellow); }
.dp-sticker--cta { padding: 20px 38px; font-size: 46px; box-shadow: 6px 6px 0 var(--dp-ink); transform: rotate(-8deg); color: var(--dp-ink); }
.dp-cta .dp-label-row { border-bottom-color: var(--dp-ink); }
.dp-cta-mail { font: 700 16px/1 "Rethink Sans", sans-serif; }
/* Escalado proporcional < 1440 (diseño 1440 → px exactos en ≥1440) */
@media (max-width: 1439px) {
  .dp-hero h1.dp-giant { font-size: 16vw; letter-spacing: -.05em; }
  .dp-index-item h2 { font-size: 7.2vw !important; letter-spacing: -.04em; }
  .dp-years { font-size: 15.3vw; } .dp-cta-title { font-size: 16.25vw; }
  .dp-hero-sub { font-size: clamp(28px, 3.33vw, 48px); }
}
@media (max-width: 767px) {
  .dp-index-item { gap: 16px; } .dp-index-item h2 { white-space: normal; }
  .dp-track-row > .et_pb_module, .dp-track-row > .dp-hito-hoy { flex-basis: calc(100% - 50px) !important; width: calc(100% - 50px) !important; min-width: 0; }
  .dp-mq-track > span { font-size: 40px; letter-spacing: -1.6px; }
}