/* ==========================================================================
   YD Logística — Sistema de diseño
   Paleta: Grafito + Naranja señal  ·  Tipografía: Archivo + Inter
   Este archivo se apoya sobre Bootstrap 5.3 (cargado antes).
   Pensado para maquetar: usa clases Bootstrap + los helpers de aquí abajo.
   ========================================================================== */

:root {
  /* --- Tokens de marca --- */
  --ydl-grafito:      #343434;   /* gris oscuro (antes casi negro) */
  --ydl-grafito-900:  #343434;   /* fondo más profundo (pie) */
  --ydl-tinta:        #2C2C2C;   /* texto principal */
  --ydl-arena:        #F3EFE9;   /* fondo cálido secciones */
  --ydl-arena-claro:  #FBF9F5;   /* fondo base página */
  --ydl-naranja:      #47b7cc;   /* acento / CTA (más claro y vivo) */
  --ydl-naranja-600:  #3996a8;   /* hover CTA */
  --ydl-gris:         #6E6E6E;   /* texto secundario */
  --ydl-linea:        #E4DDD0;   /* bordes suaves */
  --ydl-blanco:       #FFFFFF;
  --ydl-cut:          34px;      /* tamaño del bisel a 45° (esquina sup. der.) */

  /* --- Remapeo de Bootstrap --- */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ydl-tinta);
  --bs-body-bg: var(--ydl-arena-claro);
  --bs-primary: var(--ydl-naranja);
  --bs-primary-rgb: 255, 106, 43;
  --bs-border-color: var(--ydl-linea);
  --bs-border-radius: .5rem;
  --bs-link-color: var(--ydl-naranja-600);
  --bs-link-color-rgb: 235, 87, 28;
  --bs-link-hover-color: var(--ydl-grafito);
}

/* --------------------------------------------------------------------------
   Base tipográfica
   -------------------------------------------------------------------------- */
body {
  font-family: var(--bs-body-font-family);
  color: var(--ydl-tinta);
  background-color: var(--ydl-arena-claro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Archivo', var(--bs-body-font-family);
  font-weight: 800;
  color: var(--ydl-grafito);
  letter-spacing: -.02em;
  line-height: 1.08;
}

.display-1, .display-2, .display-3 { letter-spacing: -.035em; }

p { line-height: 1.7; }

.lead { font-size: 1.2rem; color: var(--ydl-gris); font-weight: 400; }

a { text-underline-offset: .2em; color:#47b7cc;}

::selection { background: var(--ydl-naranja); color: #fff; }

/* Etiqueta superior de sección (eyebrow) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ydl-naranja-600);
  margin-bottom: 1rem;
}
/* Marcador = flecha sólida de la 'D' del logo YDL (esquina trasera biselada) */
.eyebrow::before {
  content: "";
  width: 20px;
  height: 15px;
  display: inline-block;
  background: no-repeat center/contain url("../img/ydl-arrow.svg");
}

/* Texto marcado en naranja dentro de titulares */
.text-signal { color: var(--ydl-naranja); }

/* --------------------------------------------------------------------------
   Secciones y ritmo vertical
   -------------------------------------------------------------------------- */
.section        { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--arena { background: var(--ydl-arena); }
.section--dark  { background: var(--ydl-grafito); color: #EDEDED; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: #B9B4AC; }

.section-title { font-size: clamp(1.9rem, 4vw, 3rem); }

.hentry {padding-top:.75rem;padding-bottom:0;}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn { font-weight: 600; letter-spacing: .01em; border-radius: .5rem; padding: .7rem 1.4rem; }

.btn-cta {
  background: var(--ydl-naranja);
  border: 2px solid var(--ydl-naranja);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(255, 90, 31, .6);
}
.btn-cta:hover, .btn-cta:focus-visible {
  background: var(--ydl-naranja-600);
  border-color: var(--ydl-naranja-600);
  color: #fff;
  transform: translateY(-1px);
}

.btn-ghost-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
}
.btn-ghost-light:hover { background: #fff; color: var(--ydl-grafito); border-color:#fff; }

.btn-outline-ink {
  background: transparent;
  border: 2px solid var(--ydl-grafito);
  color: var(--ydl-grafito);
}
.btn-outline-ink:hover { background: var(--ydl-grafito); color: #fff; }

.btn-dark-ink {
  background: var(--ydl-grafito);
  border: 2px solid var(--ydl-grafito);
  color: #fff;
}
.btn-dark-ink:hover { background: #fff; color: var(--ydl-naranja); }

.btn { transition: transform .15s ease, background-color .15s ease, color .15s ease; }

/* --------------------------------------------------------------------------
   Cabecera / navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(251, 249, 245, .9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ydl-linea);
}
.site-header .navbar-brand { font-family:'Archivo'; font-weight: 600; font-size: 1rem; color: var(--ydl-grafito); letter-spacing:-.02em; line-height:1;}
.site-header .navbar-brand .brand-dot { color: var(--ydl-naranja); }
.site-header .nav-link { font-weight: 600; color: var(--ydl-grafito); padding-inline: .9rem; }
.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header .current-menu-item > a { color: var(--ydl-naranja-600); }
.site-header .nav-link.active { position: relative; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ydl-grafito);
  color: #fff;
  overflow: hidden;
}
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { width:100%; height:100%; object-fit: cover; opacity:1; }
.hero::after { /* velo para legibilidad */
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(17,17,17,.75) 0%, rgba(17,17,17,.75) 45%, rgba(17,17,17,.1) 100%);
}
.hero__inner { position: relative; z-index:2; }
.hero h1 { color:#fff; font-size: clamp(2.4rem, 6vw, 4.4rem); }
.hero .lead { color:#CFCAC2; }
.hero__rule { width:64px; height:4px; background:var(--ydl-naranja); border:0; opacity:1; margin: 1.5rem 0; }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.card {
  border:1px solid var(--ydl-linea); border-radius: .75rem;
  -webkit-mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
          mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
}

.service-card {
  background:#fff;
  border:1px solid var(--ydl-linea);
  border-radius: .9rem;
  padding: 2rem;
  height:100%;
  /* Esquina superior derecha biselada a 45° (resto de esquinas redondas) */
  -webkit-mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
          mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  /* filter:drop-shadow en vez de box-shadow para que la sombra siga el bisel */
  filter: drop-shadow(0 16px 20px rgba(20,20,20,.20));
  border-color: #D9CFBE;
}
.service-card .service-card__icon {
  width:54px; height:54px; border-radius:.7rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--ydl-arena); color: var(--ydl-naranja-600);
  font-size:1.6rem; margin-bottom:1.1rem;
}
.service-card h3 { font-size:1.3rem; }
.service-card p { color: var(--ydl-gris); margin-bottom:0; }

/* Lista con checks naranjas */
.list-checks { list-style:none; padding-left:0; margin:0; }
.list-checks li { position:relative; padding-left:1.9rem; margin-bottom:.7rem; }
.list-checks li::before {
  content:"\F26E"; /* bi-check-lg */
  font-family:"bootstrap-icons"; position:absolute; left:0; top:.05em;
  color:var(--ydl-naranja); font-weight:700;
}

/* Cifra destacada */
.stat__num { font-family:'Archivo'; font-weight:800; font-size: clamp(2.2rem,5vw,3.2rem); color:var(--ydl-grafito); line-height:1; }
.stat__label { color:var(--ydl-gris); font-weight:500; margin-top:.4rem; }
.section--dark .stat__num { color:#fff; }
.section--dark .stat__label { color:#B9B4AC; }

/* --------------------------------------------------------------------------
   Banda CTA
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--ydl-naranja);
  color:#fff;
  padding: clamp(2rem,5vw,3.5rem);
  position:relative; overflow:hidden;
  /* Esquina superior derecha biselada a 45°: lenguaje del logo YDL */
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
}
.cta-band > * { position:relative; z-index:2; }
.cta-band h2 { color:#fff; }

/* --------------------------------------------------------------------------
   FAQ (acordeón Bootstrap re-estilizado)
   -------------------------------------------------------------------------- */
.faq .accordion-item { border:1px solid var(--ydl-linea); border-radius:.7rem !important; margin-bottom:.85rem; overflow:hidden; background:#fff; }
.faq .accordion-button { font-family:'Archivo'; font-weight:700; color:var(--ydl-grafito); font-size:1.08rem; }
.faq .accordion-button:not(.collapsed){ color:var(--ydl-naranja-600); background:#fff; box-shadow:none; }
.faq .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(255,106,43,.25); }
.faq .accordion-body{ color:var(--ydl-gris); }

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  border:1px solid var(--ydl-linea); border-radius:.55rem; padding:.75rem .9rem; background:#fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ydl-naranja);
  box-shadow: 0 0 0 .2rem rgba(255,106,43,.18);
}
.form-label { font-weight:600; color:var(--ydl-grafito); margin-bottom:.35rem; }
.ydl-form-note { font-size:.85rem; color:var(--ydl-gris); }
/* honeypot: oculto para humanos */
.ydl-hp { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

.ydl-alert-ok  { background:#EAF7EE; border:1px solid #BBE4C6; color:#1E5631; border-radius:.6rem; padding:1rem 1.2rem; }
.ydl-alert-err { background:#FDECEA; border:1px solid #F5C2BC; color:#8A2018; border-radius:.6rem; padding:1rem 1.2rem; }

/* Tarjeta de datos de contacto */
.contact-info-item { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.4rem; }
.contact-info-item .bi { color:var(--ydl-naranja-600); font-size:1.3rem; line-height:1.5; }

/* --------------------------------------------------------------------------
   WhatsApp flotante + clic para llamar
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); color:#fff; }

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ydl-grafito-900); color:#B9B4AC; }
.site-footer a { color:#D8D3CB; text-decoration:none; }
.site-footer a:hover { color:var(--ydl-naranja); }
.site-footer h5 { color:#fff; font-size:1rem; letter-spacing:.02em; margin-bottom:1rem; }
.site-footer .footer-brand { font-family:'Archivo'; font-weight:800; font-size:1.4rem; color:#fff; }
.site-footer .footer-brand .brand-dot{ color:var(--ydl-naranja); }
.site-footer .footer-bottom { border-top:1px solid rgba(255,255,255,.08); }

/* --------------------------------------------------------------------------
   Utilidades varias
   -------------------------------------------------------------------------- */
.bg-arena { background: var(--ydl-arena) !important; }
.text-gris { color: var(--ydl-gris) !important; }
.rounded-xl { border-radius: 1rem !important; }
.shadow-soft { box-shadow: 0 24px 50px -30px rgba(26,26,26,.35) !important; }
.img-cover { width:100%; height:100%; object-fit:cover; }
.ratio-media > img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Esquina superior derecha biselada a 45°, manteniendo el resto redondeadas.
   Úsala en imágenes o bloques:  <img class="corner-cut" ...>
   o  <div class="ratio ratio-16x9 corner-cut"><img ...></div>
   Ajusta el tamaño del bisel con la variable --ydl-cut (global o por elemento). */
.corner-cut {
  border-radius: .9rem;
  -webkit-mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
          mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
}
img.corner-cut { display:block; width:100%; height:auto; }

/* Placeholder visible para las imágenes que buscarás luego (ya biselado) */
.img-placeholder {
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: #fff;
  color:#9A8F7D; font-size:.9rem; font-weight:600; border-radius:.75rem; padding:0; min-height:220px;
  border:none;
  -webkit-mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
          mask: linear-gradient(225deg, transparent var(--ydl-cut), #000 0);
}

@media (max-width: 991.98px){
  .hero::after { background: linear-gradient(180deg, rgba(17,17,17,.82), rgba(17,17,17,.92)); }
}