/*
Theme Name:  Cristofersen
Theme URI:   -
Author:      Felins Solutions
Description: Tema corporativo para Cristofersen – Logística Internacional
Version:     1.0.1
Text Domain: cristofersen
Tags:        custom-menu, featured-images, full-width-template, threaded-comments
*/

/* =============================================================
   Adelle Sans EXT – self-hosted (assets/fonts/)
   Pesos: 100 (Thin), 300 (Light), 400 (Regular), 600 (Semibold),
          700 (Bold), 800 (Extrabold), 900 (Heavy)
============================================================= */
@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Thin.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Thin.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Thin.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Thin.otf')   format('opentype');
  font-weight: 100;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-ThinItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-ThinItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-ThinItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-ThinItalic.otf')   format('opentype');
  font-weight: 100;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Light.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Light.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Light.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Light.otf')   format('opentype');
  font-weight: 300;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-LightItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-LightItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-LightItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-LightItalic.otf')   format('opentype');
  font-weight: 300;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Regular.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Regular.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Regular.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Regular.otf')   format('opentype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Italic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Italic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Italic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Italic.otf')   format('opentype');
  font-weight: 400;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Semibold.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Semibold.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Semibold.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Semibold.otf')   format('opentype');
  font-weight: 600;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-SemiboldItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-SemiboldItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-SemiboldItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-SemiboldItalic.otf')   format('opentype');
  font-weight: 600;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Bold.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Bold.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Bold.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Bold.otf')   format('opentype');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-BoldItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-BoldItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-BoldItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-BoldItalic.otf')   format('opentype');
  font-weight: 700;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Extrabold.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Extrabold.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Extrabold.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Extrabold.otf')   format('opentype');
  font-weight: 800;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-ExtraboldItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-ExtraboldItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-ExtraboldItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-ExtraboldItalic.otf')   format('opentype');
  font-weight: 800;
  font-style:  italic;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-Heavy.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-Heavy.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-Heavy.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-Heavy.otf')   format('opentype');
  font-weight: 900;
  font-style:  normal;
  font-display: swap;
}

@font-face {
  font-family: 'Adelle Sans ARA';
  src: url('assets/fonts/AdelleSansEXT-HeavyItalic.woff2') format('woff2'),
       url('assets/fonts/AdelleSansEXT-HeavyItalic.woff')  format('woff'),
       url('assets/fonts/AdelleSansEXT-HeavyItalic.ttf')   format('truetype'),
       url('assets/fonts/AdelleSansEXT-HeavyItalic.otf')   format('opentype');
  font-weight: 900;
  font-style:  italic;
  font-display: swap;
}

/* =============================================================
   Font stacks – utility classes
============================================================= */
.font-adelle  { font-family: 'Adelle Sans ARA', Georgia, serif; }   /* títulos */
.font-redhat  { font-family: 'Red Hat Display', 'Roboto', sans-serif; }
.font-abeezee { font-family: 'ABeeZee', 'Roboto', sans-serif; }      /* texto común */

/* =============================================================
   Base
============================================================= */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

/* Fuente base: ABeeZee para todo el texto de cuerpo */
body {
  font-family: 'ABeeZee', 'Roboto', sans-serif;
}

/* Títulos: Adelle Sans ARA */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Adelle Sans ARA', Georgia, serif;
}

/* =============================================================
   Navbar – mobile menu overlay
============================================================= */

/* Overlay oculto por defecto */
#menu-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Panel desliza desde la izquierda */
#menu-panel {
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
#menu-overlay.open #menu-panel {
  transform: translateX(0);
}

/* Nav links con subrayado animado */
#menu-panel nav a {
  position: relative;
  display: block;
  transition: color 0.15s ease;
  font-family: 'Adelle Sans ARA', Georgia, serif;
  font-weight: 600;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1.5;
  margin-bottom: 5px;
}
#menu-panel nav li:last-child a,
#menu-panel nav a:last-child {
  margin-bottom: 0;
}
#menu-panel nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: #00b697;
  transition: width 0.2s ease;
}
#menu-panel nav a:hover              { color: #00b697; }
#menu-panel nav a:hover::after       { width: 100%; }

/* =============================================================
   Hero gradient overlay
============================================================= */
.hero-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.5) 12%, rgba(102,102,102,.12) 35%);
}

/* =============================================================
   Partner logos – infinite scroll
============================================================= */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logos-track       { animation: scroll-left 18s linear infinite; }
.logos-track:hover { animation-play-state: paused; }

/* =============================================================
   Services tabs
============================================================= */
.tab-active          { border-bottom: 4px solid var(--service-main-tab-color, #00b697); }
.service-tab-active  { background-color: var(--service-subtab-active-color, #0ead99); color: var(--service-subtab-active-text-color, #fff); }
.service-tab-inactive{ background-color: #fff; color: #15333d; }
.service-sub-panel   { background-color: var(--service-subtab-panel-bg, #a5f3e9); }
.service-sub-panel-copy { color: var(--service-subtab-panel-text-color, #000); }
.service-sub-panel-cta {
  border: 1px solid currentColor;
  color: var(--service-subtab-panel-text-color, #000);
}
.service-sub-panel-cta:hover {
  background-color: var(--service-subtab-panel-text-color, #000);
  color: var(--service-subtab-panel-bg, #a5f3e9);
}

/* =============================================================
   Sidebar – sticky on desktop
============================================================= */
@media (min-width: 1024px) {
  .sidebar-sticky {
    position: sticky;
    top: 100px;
    align-self: flex-start;
  }
}

/* =============================================================
   News card hover lift
============================================================= */
.news-card { transition: transform .2s ease, box-shadow .2s ease; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }

/* =============================================================
   "Leer más" arrow tint on hover
============================================================= */
.leer-mas:hover { color: #00b697; }
.leer-mas:hover .arrow-icon {
  filter: brightness(0) saturate(100%) invert(46%) sepia(82%) saturate(400%) hue-rotate(130deg);
}

/* =============================================================
   Image caption bar
============================================================= */
.caption-bar { width: 2px; background: #000; flex-shrink: 0; }

/* =============================================================
   Tag pill
============================================================= */
.tag-pill:hover { opacity: .85; }

/* =============================================================
   WP navigation (archive pagination)
============================================================= */
.nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 3rem;
}
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #15333d;
  color: #15333d;
  font-family: 'Roboto', sans-serif;
  font-size: .875rem;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.nav-links .current,
.nav-links a:hover {
  background: #15333d;
  color: #fff;
}

/* =============================================================
   WP nav menu reset (overridden by Tailwind classes)
============================================================= */
.wp-nav-primary ul,
.wp-nav-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.wp-nav-primary ul li a,
.wp-nav-footer ul li a {
  text-decoration: none;
}

/* CONTENEDOR INTERNO DE CF7 */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
}

/* INPUTS Y TEXTAREA */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
}

/* CHECKBOX */
.wpcf7 .wpcf7-acceptance {
  display: inline-flex;
  align-items: flex-start;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0 0;
  accent-color: #00b697;
  cursor: pointer;
}

.wpcf7 .wpcf7-list-item {
  margin: 0;
}

.wpcf7 .wpcf7-list-item-label {
  display: none;
}

/* PLACEHOLDERS */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* FOCUS */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #00b697;
  box-shadow: none;
}

/* MENSAJES DE ERROR */
.wpcf7-not-valid-tip {
  color: #ffd6d6;
  font-size: 14px;
  margin-top: 6px;
}

/* BORDE ERROR EN CAMPOS */
.wpcf7 .wpcf7-not-valid {
  border-color: #ffb3b3 !important;
}

/* RESPUESTA GENERAL DEL FORM */
.wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #00b697;
  background: rgba(0, 182, 151, 0.12);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border: 1px solid #ffb3b3;
  background: rgba(255, 80, 80, 0.12);
}

/* SPINNER */
.wpcf7-spinner {
  margin: 12px 0 0 0;
  background-color: white;
}