/*
Theme Name: Fletes ECOROF
Theme URI: https://example.com/
Author: Fletes ECOROF
Description: Tema de una sola página para servicios de fletes, mudanzas y traslado de cargas. Incluye cotización directa por WhatsApp, galería, preguntas frecuentes y diseño adaptable.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ecorof
*/

:root {
  --green: #2fa84f;
  --green-dark: #1d7a37;
  --green-soft: #eaf7ee;
  --black: #101410;
  --ink: #182019;
  --muted: #687168;
  --line: #dfe5df;
  --white: #ffffff;
  --off-white: #f6f8f5;
  --radius: 22px;
  --shadow: 0 20px 60px rgba(13, 28, 17, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; }
.skip-link { position: fixed; top: -100px; left: 16px; background: var(--white); color: var(--black); z-index: 9999; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; transition: .3s ease; }
.site-header.scrolled { background: rgba(10, 14, 10, .93); backdrop-filter: blur(16px); box-shadow: 0 8px 30px rgba(0,0,0,.16); }
.nav-wrap { height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); line-height: .95; }
.brand-icon { width: 49px; height: 49px; border-radius: 14px; display: grid; place-items: center; background: var(--green); }
.brand-icon svg { width: 34px; fill: var(--white); }
.brand strong, .brand b { display: block; letter-spacing: .06em; }
.brand strong { font-size: .76rem; font-weight: 800; }
.brand b { font-size: 1.36rem; color: var(--green); font-weight: 950; }
.site-header .brand b { color: #6ee48a; }
.main-nav { display: flex; align-items: center; gap: 30px; color: rgba(255,255,255,.86); font-size: .94rem; font-weight: 700; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--white); }
.nav-cta { border: 1px solid rgba(255,255,255,.35); padding: 10px 18px; border-radius: 999px; }
.nav-cta:hover { background: var(--green); border-color: var(--green); }
.menu-toggle { display: none; background: transparent; border: 0; padding: 8px; }
.menu-toggle span { display:block; width: 25px; height: 2px; margin: 5px; background: var(--white); }

.hero { min-height: 820px; position: relative; display: flex; align-items: center; color: var(--white); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-image: url('assets/images/hero.webp'); background-size: cover; background-position: center 58%; transform: scale(1.015); }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,10,6,.95) 0%, rgba(5,10,6,.76) 48%, rgba(5,10,6,.16) 100%), linear-gradient(0deg, rgba(5,10,6,.78) 0%, transparent 35%); }
.hero-content { position: relative; z-index: 2; padding-top: 110px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; text-transform:uppercase; letter-spacing:.15em; font-size:.76rem; font-weight:900; color:#a9e9b7; }
.eyebrow span { width:38px; height:3px; background:var(--green); border-radius:5px; }
.eyebrow.dark { color: var(--green-dark); }
.hero h1 { max-width: 790px; font-size: clamp(3.8rem, 7.5vw, 7rem); line-height: .93; letter-spacing: -.055em; margin: 0; font-weight: 950; }
.hero h1 em { font-style: normal; color: #6ee48a; }
.hero-copy { max-width: 650px; font-size: 1.17rem; color: rgba(255,255,255,.82); margin: 28px 0 34px; }
.hero-copy strong { color: var(--white); }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn { min-height: 54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--green); color: var(--white); box-shadow: 0 13px 35px rgba(47,168,79,.28); }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { color:var(--white); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); backdrop-filter:blur(10px); }
.btn-secondary:hover { background:rgba(255,255,255,.13); }
.btn svg { width:22px; fill:currentColor; }
.hero-badges { margin-top: 64px; display: grid; grid-template-columns: repeat(3, max-content); gap: 54px; }
.hero-badges div { position:relative; }
.hero-badges div + div::before { content:""; position:absolute; width:1px; height:44px; background:rgba(255,255,255,.25); left:-27px; top:2px; }
.hero-badges strong, .hero-badges span { display:block; }
.hero-badges strong { font-size:1.05rem; }
.hero-badges span { font-size:.82rem; color:rgba(255,255,255,.58); }

.trust-strip { background: var(--black); color:var(--white); border-top:1px solid rgba(255,255,255,.07); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-grid article { display:flex; gap:15px; align-items:center; padding: 30px 28px; }
.trust-grid article + article { border-left:1px solid rgba(255,255,255,.1); }
.mini-icon { flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(47,168,79,.15); color:#6ee48a; font-size:1.2rem; font-weight:900; }
.trust-grid strong { display:block; font-size:.96rem; }
.trust-grid p { margin:2px 0 0; color:rgba(255,255,255,.56); font-size:.84rem; }

.section-heading { max-width:680px; margin-bottom:46px; }
.section-heading.centered { text-align:center; margin-inline:auto; }
.section-heading.centered .eyebrow { justify-content:center; }
.section-heading h2, .truck-copy h2, .quote-copy h2, .final-cta h2 { font-size: clamp(2.35rem, 4.2vw, 4rem); letter-spacing:-.045em; line-height:1.04; margin:0 0 18px; }
.section-heading p { color:var(--muted); margin:0; font-size:1.04rem; }
.services { background:var(--off-white); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card { background:var(--white); padding:30px; border-radius:var(--radius); border:1px solid var(--line); min-height:285px; transition:.25s ease; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.service-icon { width:58px; height:58px; border-radius:17px; display:grid; place-items:center; background:var(--green-soft); margin-bottom:34px; }
.service-icon svg { width:30px; fill:var(--green-dark); }
.service-card h3 { font-size:1.22rem; line-height:1.25; margin:0 0 12px; }
.service-card p { margin:0; color:var(--muted); font-size:.93rem; }

.split-layout { display:grid; grid-template-columns:1.08fr .92fr; gap:80px; align-items:center; }
.truck-image { position:relative; }
.truck-image img { width:100%; height:610px; object-fit:cover; border-radius:30px; box-shadow:var(--shadow); }
.capacity-card { position:absolute; right:-22px; bottom:34px; width:180px; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--white); background:var(--green); border:9px solid var(--white); box-shadow:0 16px 40px rgba(20,70,31,.28); }
.capacity-card strong { font-size:1.65rem; line-height:1; }
.capacity-card span { font-size:.72rem; margin-top:7px; text-transform:uppercase; letter-spacing:.08em; }
.truck-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; }
.feature-list { list-style:none; padding:0; margin:32px 0; display:grid; gap:20px; }
.feature-list li { display:flex; gap:14px; }
.feature-list li > span { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green-dark); font-weight:900; }
.feature-list strong, .feature-list small { display:block; }
.feature-list small { color:var(--muted); margin-top:3px; font-size:.88rem; }
.text-link { display:inline-flex; gap:12px; align-items:center; color:var(--green-dark); font-weight:900; }
.text-link span { font-size:1.5rem; transition:transform .2s ease; }
.text-link:hover span { transform:translateX(5px); }

.process-section { background:var(--black); color:var(--white); }
.process-section .section-heading h2 { color:var(--white); }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.11); border-radius:24px; overflow:hidden; }
.step { background:#131913; padding:36px 28px; min-height:265px; }
.step span { display:inline-block; color:#6ee48a; font-size:.78rem; letter-spacing:.15em; font-weight:900; margin-bottom:46px; }
.step h3 { font-size:1.16rem; margin:0 0 12px; }
.step p { color:rgba(255,255,255,.58); font-size:.9rem; margin:0; }

.gallery-section { background:var(--white); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:250px; gap:14px; }
.gallery-item { padding:0; border:0; overflow:hidden; border-radius:18px; background:#e8ece8; position:relative; }
.gallery-item::after { content:"＋"; position:absolute; right:14px; top:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:rgba(0,0,0,.5); backdrop-filter:blur(8px); opacity:0; transform:scale(.8); transition:.2s ease; }
.gallery-item:hover::after { opacity:1; transform:scale(1); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img { transform:scale(1.035); }
.gallery-wide { grid-column:span 2; }

.quote-section { background:linear-gradient(135deg,#101410 0%,#152319 100%); color:var(--white); }
.quote-shell { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.quote-copy { position:sticky; top:130px; }
.quote-copy > p:not(.eyebrow) { color:rgba(255,255,255,.62); font-size:1.03rem; }
.phone-card { display:flex; align-items:center; gap:15px; margin-top:34px; }
.phone-card > span { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--green); font-size:1.2rem; }
.phone-card small, .phone-card a { display:block; }
.phone-card small { color:rgba(255,255,255,.55); }
.phone-card a { font-size:1.18rem; font-weight:900; }
.quote-form { background:var(--white); color:var(--ink); padding:34px; border-radius:26px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.quote-form label { display:block; font-size:.86rem; font-weight:800; margin-bottom:16px; }
.quote-form input, .quote-form select, .quote-form textarea { width:100%; border:1px solid var(--line); background:#fbfcfb; color:var(--ink); border-radius:12px; padding:13px 14px; margin-top:7px; outline:none; transition:border .2s ease, box-shadow .2s ease; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(47,168,79,.12); }
.quote-form textarea { resize:vertical; min-height:120px; }
.btn-full { width:100%; border:0; }
.form-note { margin:12px 0 0; color:var(--muted); text-align:center; font-size:.78rem; }

.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.accordion { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:23px 42px 23px 0; font-weight:850; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:4px; top:17px; font-size:1.65rem; color:var(--green-dark); font-weight:400; }
details[open] summary::after { content:"−"; }
details p { margin:-8px 42px 24px 0; color:var(--muted); }

.final-cta { background:var(--green); color:var(--white); padding:58px 0; }
.final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.final-cta p { margin:0 0 4px; font-weight:800; color:rgba(255,255,255,.78); }
.final-cta h2 { margin:0; font-size:clamp(2.2rem,4vw,3.8rem); }
.btn-light { background:var(--white); color:var(--green-dark); flex:0 0 auto; }

.site-footer { background:#0a0d0a; color:rgba(255,255,255,.62); padding:70px 0 24px; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:70px; }
.footer-brand { margin-bottom:20px; }
.footer-grid p { max-width:360px; }
.footer-grid h3 { color:var(--white); font-size:.92rem; margin:0 0 18px; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-grid a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.1); margin-top:55px; padding-top:22px; font-size:.8rem; }

.floating-wa { position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:var(--white); box-shadow:0 14px 35px rgba(0,0,0,.25); z-index:800; transition:.2s ease; }
.floating-wa:hover { transform:translateY(-3px) scale(1.03); }
.floating-wa svg { width:30px; fill:currentColor; }

.lightbox { position:fixed; inset:0; z-index:2000; background:rgba(3,7,4,.94); display:none; place-items:center; padding:30px; }
.lightbox.open { display:grid; }
.lightbox img { max-width:min(1100px,95vw); max-height:88vh; border-radius:14px; box-shadow:0 25px 80px rgba(0,0,0,.5); }
.lightbox-close { position:absolute; top:18px; right:24px; border:0; background:transparent; color:var(--white); font-size:2.6rem; line-height:1; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .main-nav { position:fixed; inset:82px 0 auto 0; display:none; flex-direction:column; align-items:stretch; gap:0; background:#0b0f0b; padding:18px 20px 26px; border-top:1px solid rgba(255,255,255,.08); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:14px 8px; }
  .nav-cta { text-align:center; margin-top:8px; }
  .menu-toggle { display:block; }
  .hero { min-height:780px; }
  .hero-overlay { background:linear-gradient(90deg,rgba(5,10,6,.94),rgba(5,10,6,.61)),linear-gradient(0deg,rgba(5,10,6,.88),transparent 55%); }
  .service-grid { grid-template-columns:1fr 1fr; }
  .split-layout, .quote-shell, .faq-layout { grid-template-columns:1fr; gap:50px; }
  .truck-image img { height:540px; }
  .quote-copy { position:static; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:250px; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr; gap:35px; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 28px,1160px); }
  .section { padding:76px 0; }
  .nav-wrap { height:72px; }
  .main-nav { top:72px; }
  .brand-icon { width:42px; height:42px; }
  .brand b { font-size:1.16rem; }
  .hero { min-height:760px; align-items:flex-end; padding-bottom:50px; }
  .hero-bg { background-position:60% center; }
  .hero-content { padding-top:120px; }
  .hero h1 { font-size:clamp(3.15rem,15vw,4.8rem); }
  .hero-copy { font-size:1rem; }
  .hero-actions .btn { width:100%; }
  .hero-badges { grid-template-columns:1fr; gap:17px; margin-top:38px; }
  .hero-badges div + div::before { display:none; }
  .trust-grid { grid-template-columns:1fr; }
  .trust-grid article + article { border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .service-grid, .steps-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; }
  .truck-image img { height:420px; }
  .capacity-card { width:135px; right:-6px; bottom:18px; border-width:6px; }
  .capacity-card strong { font-size:1.3rem; }
  .step { min-height:auto; }
  .step span { margin-bottom:24px; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:260px; }
  .gallery-wide { grid-column:auto; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .quote-form { padding:22px; }
  .final-cta-inner { flex-direction:column; align-items:flex-start; }
  .btn-light { width:100%; }
  .footer-grid { grid-template-columns:1fr; gap:35px; }
  .footer-bottom { flex-direction:column; }
  .floating-wa { width:54px; height:54px; right:15px; bottom:15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}


/* Ajustes de integración con WordPress */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }