/* ============================================================
   delpasillo.com — HOME (reconstruida en el ALB de Enfold)
   Estructura: secciones av_section con clase custom (dp-*-sec),
   columnas .flex_column, y los componentes dentro de code/text blocks.
   Tokens y branding viven en brand.css.
   ============================================================ */

/* ─── Romper el ancho SOLO del contenedor de contenido (no el de las secciones) ─── */
.dp-home .container_wrap_first > .container { max-width: 100% !important; width: 100%; padding: 0 !important; }
.dp-home .content.av-content-full,
.dp-home .post-entry,
.dp-home .entry-content-wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* ─── Contenido de cada sección: usa el container NATIVO de Enfold (Site Width,
   centrado) = mismo ancho que header y footer. Las secciones igual son full-width
   (fondo edge-to-edge) por los wrappers de arriba. Solo damos el padding vertical. ─── */
.dp-home .avia-section.dp-hero-sec > .container { padding-top: 70px; padding-bottom: 70px; }
.dp-home .avia-section.dp-kpi-sec > .container { padding-top: 56px; padding-bottom: 56px; }
.dp-home .avia-section.dp-serv-sec > .container { padding-top: 120px; padding-bottom: 120px; }
.dp-home .avia-section.dp-contacto-sec > .container { padding-top: 120px; padding-bottom: 120px; }
/* SOLO el video es full-width. En vez de pelear con los containers anidados de
   Enfold (que difieren desktop/mobile), el reel rompe a ancho de viewport. */
.dp-home #main { overflow-x: hidden; }
.dp-home .avia-section.dp-video-sec > .container { padding: 0 !important; }
.dp-home .dp-video-reel {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Quitar el hueco entre el header fijo (90px) y el hero: Enfold reserva 116px de
   más en #main. Igualamos a la altura real del header. */
@media only screen and (min-width: 768px) {
  .dp-home #main { padding-top: 90px !important; }
}

/* ─── Gaps de columnas (Enfold default ~76px → gaps del diseño) ─── */
/* Hero: 2 columnas, gap 60px */
.dp-home .dp-hero-sec .flex_column.av_one_half { width: calc((100% - 60px) / 2) !important; margin-left: 60px !important; }
.dp-home .dp-hero-sec .flex_column.av_one_half.first { margin-left: 0 !important; }
/* KPI: 4 columnas, gap 16px */
.dp-home .dp-kpi-sec .flex_column.av_one_fourth { width: calc((100% - 48px) / 4) !important; margin-left: 16px !important; }
.dp-home .dp-kpi-sec .flex_column.av_one_fourth.first { margin-left: 0 !important; clear: both; }
/* Servicios: 3 columnas, gap 16px (filas de 3) */
.dp-home .dp-serv-sec .flex_column.av_one_third { width: calc((100% - 32px) / 3) !important; margin-left: 16px !important; margin-bottom: 16px !important; }
.dp-home .dp-serv-sec .flex_column.av_one_third.first { margin-left: 0 !important; clear: both; }
.dp-home .dp-serv-sec .flex_column.av_one_full.first { margin-left: 0 !important; }
/* Contacto: 2 columnas, gap 80px */
.dp-home .dp-contacto-sec .flex_column.av_one_half { width: calc((100% - 80px) / 2) !important; margin-left: 80px !important; }
.dp-home .dp-contacto-sec .flex_column.av_one_half.first { margin-left: 0 !important; }

/* ─── Igualar altura de tarjetas (KPIs y servicios) ─── */
/* 1) la fila de columnas es flex con stretch (columnas de igual alto) */
.dp-home .dp-kpi-sec .entry-content-wrapper,
.dp-home .dp-serv-sec .entry-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.dp-home .dp-serv-sec .flex_column.av_one_full { width: 100% !important; }
/* 2) estirar el contenido (codeblock → tarjeta) para que llene la columna.
   height:100% no resuelve contra una altura definida por flex-stretch, así que
   propagamos el alto con flex en cada nivel. */
.dp-home .dp-kpi-sec .flex_column.av_one_fourth,
.dp-home .dp-serv-sec .flex_column.av_one_third { display: flex; flex-direction: column; }
.dp-home .dp-kpi-sec .flex_column .avia_codeblock_section,
.dp-home .dp-kpi-cb,
.dp-home .dp-serv-sec .flex_column.av_one_third .avia_codeblock_section,
.dp-home .dp-serv-cb { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dp-home .dp-kpi-item,
.dp-home .dp-service-card { flex: 1; }
/* En servicios, con tarjetas de igual alto, el gráfico va al fondo */
.dp-home .dp-service-card { display: flex; flex-direction: column; }
.dp-home .dp-service-card .dp-service-chart { margin-top: auto; }

/* Enfold mete márgenes/min-height a textblocks y columnas — los neutralizamos */
.dp-home .dp-hero-sec .avia_textblock,
.dp-home .dp-serv-sec .avia_textblock { margin: 0; }
.dp-home .dp-hero-sec .flex_column,
.dp-home .dp-contacto-sec .flex_column { margin-top: 0; }
.dp-home .av_codeblock_section { margin: 0; }

/* ─── HERO ─── */
.dp-home .avia-section.dp-hero-sec > .container {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 90px);
}
.dp-home .dp-hero-sec .flex_column { display: flex; flex-direction: column; justify-content: center; }
.dp-home .dp-hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange);
}
.dp-home .dp-hero-head { margin: 24px 0 0 !important; }
.dp-home .dp-h1 {
  font-size: clamp(44px, 5vw, 76px); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.03em; color: var(--fg); margin: 0; text-transform: none;
}
.dp-home .dp-h1 em { font-style: normal; color: var(--orange); }
/* Enfold (.entry-content-wrapper h1,h2) fuerza mayúsculas + letter-spacing:1px
   en los títulos. Lo revertimos al caso/tracking del diseño. */
.dp-home .dp-h1,
.dp-home .dp-section-title,
.dp-home .dp-contact-title { text-transform: none !important; letter-spacing: -0.03em !important; }
.dp-home .dp-hero-sub {
  font-size: 18px; line-height: 1.6; color: var(--fg2);
  max-width: 440px; margin: 28px 0 0;
}
.dp-home .dp-hero-actions { display: flex; gap: 16px; align-items: center; margin-top: 44px; }

.dp-btn-primary {
  background: var(--orange); color: #fff !important; padding: 16px 32px;
  font-family: var(--dp-font); font-size: 15px; font-weight: 600; border: none;
  border-radius: var(--dp-radius); cursor: pointer; text-decoration: none;
  display: inline-block; transition: opacity var(--dp-transition), transform var(--dp-transition);
}
.dp-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); color: #fff !important; }
.dp-btn-ghost {
  color: var(--fg2) !important; font-size: 15px; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; transition: color var(--dp-transition);
}
.dp-btn-ghost:hover { color: var(--fg) !important; }
.dp-btn-ghost::after { content: '↓'; font-size: 16px; }

/* Stats */
.dp-home .dp-stats { margin-top: 60px !important; }
.dp-stats-row { display: flex; gap: 40px; padding-top: 40px; border-top: 1px solid var(--border); }
.dp-stat-num { font-size: 32px; font-weight: 700; color: var(--fg); letter-spacing: -0.03em; }
.dp-stat-label { font-size: 12px; color: var(--fg2); margin-top: 2px; font-weight: 500; }

/* Corredor */
.dp-home .dp-corridor-cb { display: flex; justify-content: center; }
.dp-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; height: 480px; width: 100%; }
.dp-corridor { position: relative; width: 340px; height: 400px; --mx: 50%; --my: 50%; --nx: 0; --ny: 0; }
.dp-corridor-frame {
  position: absolute; border: 3px solid var(--orange); border-radius: 2px;
  transition: border-color var(--dp-transition), opacity var(--dp-transition), transform 0.2s ease-out; will-change: transform;
}
.cf1 { inset: 0;     opacity: 1;    transform: translate(calc(var(--nx) * -3px),  calc(var(--ny) * -3px)); }
.cf2 { inset: 36px;  opacity: 0.7;  transform: translate(calc(var(--nx) * -6px),  calc(var(--ny) * -6px)); }
.cf3 { inset: 72px;  opacity: 0.45; transform: translate(calc(var(--nx) * -10px), calc(var(--ny) * -10px)); }
.cf4 { inset: 108px; opacity: 0.25; transform: translate(calc(var(--nx) * -16px), calc(var(--ny) * -16px)); }
.dp-corridor-glow {
  position: absolute; left: var(--mx); top: var(--my); width: 220px; height: 220px;
  transform: translate(-50%,-50%); background: radial-gradient(circle, var(--orange) 0%, transparent 65%);
  border-radius: 50%; filter: blur(50px); opacity: 0.55; pointer-events: none;
  transition: opacity 0.4s ease; will-change: left, top;
}
.dp-corridor-label {
  position: absolute; bottom: -36px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg2); font-weight: 500;
}

/* ─── VIDEO REEL ─── */
.dp-video-reel { width: 100%; background: #000; }
.dp-video-wrap { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; }
.dp-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-video-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 36px 48px;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%);
}
.dp-video-caption { font-size: 1.5vw; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0; line-height: 2vw; }

/* ─── KPI STRIP ─── */
.dp-home .dp-kpi-sec .flex_column { margin-top: 0; }
.dp-kpi-item {
  padding: 30px 28px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--card-shadow, 0 18px 44px -26px rgba(0,0,0,0.8));
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  transition: border-color var(--dp-transition), background var(--dp-transition), transform var(--dp-transition);
}
.dp-kpi-item:hover { transform: translateY(-5px); border-color: var(--orange); }
.dp-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg2); }
.dp-kpi-headline { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); line-height: 1.3; }
.dp-kpi-item .sparkline, .dp-kpi-item .bars { margin-top: 10px; height: 24px; opacity: 0.85; }
.sparkline, .bars { width: 100%; height: 28px; color: var(--orange); display: block; }
.bars { height: 32px; }

/* ─── SERVICIOS ─── */
.dp-section-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; display: block; }
.dp-section-title { font-size: clamp(32px, 3.5vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--fg); margin: 0; }
.dp-home .dp-serv-header { margin-bottom: 56px !important; }
.dp-service-card {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--card-shadow, 0 18px 44px -26px rgba(0,0,0,0.8));
  padding: 44px 38px; position: relative; overflow: hidden; height: 100%;
  transition: background var(--dp-transition), transform var(--dp-transition), border-color var(--dp-transition);
}
.dp-service-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.dp-service-card:hover::before { transform: scaleX(1); }
.dp-service-card:hover { background: var(--bg); transform: translateY(-6px); border-color: var(--orange); }
.dp-service-num { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; color: var(--orange); margin-bottom: 28px; display: block; }
.dp-service-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); margin-bottom: 14px; }
.dp-service-desc { font-size: 14px; color: var(--fg2); line-height: 1.65; margin: 0; }
.dp-service-chart { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dp-service-chart svg { flex: 1; height: 30px; color: var(--orange); opacity: 0.7; transition: opacity var(--dp-transition); }
.dp-service-card:hover .dp-service-chart svg { opacity: 1; }
.dp-service-chart-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg2); white-space: nowrap; }

/* ─── CONTACTO ─── */
.dp-contact-text .dp-section-tag { text-align: left; }
.dp-contact-title { font-size: clamp(32px, 3.5vw, 52px); font-weight: 700; letter-spacing: -0.03em; color: var(--fg); line-height: 1.05; margin: 0 0 24px; }
.dp-contact-sub { font-size: 16px; color: var(--fg2); line-height: 1.7; margin: 0 0 48px; }
.dp-contact-detail { display: flex; flex-direction: column; gap: 14px; }
.dp-contact-item { font-size: 14px; color: var(--fg2); display: flex; gap: 10px; align-items: baseline; }
.dp-contact-item strong { color: var(--fg); font-weight: 600; min-width: 60px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Contact Form 7 */
.dp-contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.dp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dp-form-group { display: flex; flex-direction: column; gap: 8px; }
.dp-form-group label { font-size: 12px; font-weight: 600; color: var(--fg2); text-transform: uppercase; letter-spacing: 0.1em; }
.dp-home .dp-contact-form input,
.dp-home .dp-contact-form select,
.dp-home .dp-contact-form textarea {
  background: var(--bg2) !important; border: 1px solid var(--border) !important; color: var(--fg) !important;
  font-family: var(--dp-font); font-size: 15px; padding: 14px 16px; border-radius: var(--dp-radius);
  outline: none; width: 100%; transition: border-color var(--dp-transition); resize: none;
}
.dp-contact-form input:focus, .dp-contact-form select:focus, .dp-contact-form textarea:focus { border-color: var(--orange); }
.dp-contact-form textarea { min-height: 120px; }
.dp-contact-form .wpcf7-form-control-wrap { display: block; }
.dp-contact-form input[type="submit"] {
  width: 100%; text-align: center; padding: 18px; font-size: 16px; background: var(--orange);
  color: #fff; border: none; border-radius: var(--dp-radius); font-weight: 600; cursor: pointer;
  font-family: var(--dp-font); transition: opacity var(--dp-transition), transform var(--dp-transition);
}
.dp-contact-form input[type="submit"]:hover { opacity: 0.88; transform: translateY(-1px); }
.dp-contact-form .wpcf7-not-valid-tip { color: #ff7a5c; font-size: 12px; margin-top: 6px; }
.dp-contact-form .wpcf7-response-output { margin: 6px 0 0 !important; padding: 12px 16px; border-radius: var(--dp-radius); font-size: 13px; }

/* ─── ANIMACIONES ─── */
@keyframes dpFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.dp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.dp-reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .dp-reveal { opacity: 1 !important; transform: none !important; }
  .dp-corridor-frame, .dp-corridor-glow { transition: none !important; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 990px) {
  .dp-home .avia-section.dp-hero-sec > .container { display: block; min-height: auto; padding: 60px 24px; }
  .dp-home .dp-corridor-cb { display: none; }
  .dp-home .avia-section.dp-kpi-sec > .container { padding: 40px 24px; }
  .dp-home .avia-section.dp-serv-sec > .container { padding: 80px 24px; }
  .dp-home .avia-section.dp-contacto-sec > .container { padding: 80px 24px; }
  .dp-form-row { grid-template-columns: 1fr; }
  .dp-stats-row { gap: 24px; }
  /* Columnas apiladas en mobile */
  .dp-home .dp-hero-sec .flex_column.av_one_half,
  .dp-home .dp-serv-sec .flex_column.av_one_third,
  .dp-home .dp-contacto-sec .flex_column.av_one_half { width: 100% !important; margin-left: 0 !important; }
  /* KPI: 2 columnas en mobile */
  .dp-home .dp-kpi-sec .flex_column.av_one_fourth { width: calc((100% - 16px) / 2) !important; margin-left: 16px !important; }
  .dp-home .dp-kpi-sec .flex_column.av_one_fourth:nth-child(2n+1) { margin-left: 0 !important; clear: both; }
}