/* =========================================================
   MOTOTRAVEL — HOME v7 · versión WordPress
   Todas las reglas van bajo .mth. El header y el footer están en chrome.css.
   Construida sobre el mockup aprobado (misma estructura,
   jerarquía y ritmo visual), en HTML responsive.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --red:#E2231A;
  --red-dark:#C11B13;
  --ink:#1D1D1F;
  --ink-2:#3C3C40;
  --gray:#6A6A70;
  --gray-2:#8E8E94;
  --line:#E4E4E6;
  --band:#F5F5F5;
  --panel:#F7F7F7;
  --dark:#1A1A1A;
  --green:#00AA6C;

  --ff-h:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --ff-b:'Open Sans','Helvetica Neue',Arial,sans-serif;

  --wrap:1200px;
  --gut:clamp(18px,3.2vw,32px);
  --r:6px;
}

/* ---------- RESET ---------- */
.mth *,.mth *::before,.mth *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.mth-home{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--ff-b);font-size:15px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.mth img,.mth svg{display:block;max-width:100%}
.mth a{color:inherit;text-decoration:none}
.mth button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mth h1,.mth h2,.mth h3,.mth h4,.mth h5{margin:0;font-family:var(--ff-h);font-weight:700;line-height:1.16;letter-spacing:-.015em}
.mth p{margin:0}
.mth ul{margin:0;padding:0;list-style:none}
.mth :focus-visible{outline:2px solid var(--red);outline-offset:3px}

.mth .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mth .section{padding-block:clamp(44px,5.2vw,68px)}

/* ---------- TIPOGRAFÍA ---------- */
.mth .h1{font-size:3.5rem;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1}
.mth .h2{font-size:2rem;text-transform:uppercase;line-height:1.24;letter-spacing:-.012em}
.mth .h2-c{font-size:2rem;text-transform:uppercase;text-align:center;letter-spacing:.005em}
.mth .h3{font-size:1.4rem;text-transform:uppercase}
.mth .body-16{font-size:.97rem;color:var(--ink-2)}
.mth .body-light{color:rgba(255,255,255,.86)}

/* ---------- BOTONES ---------- */
.mth .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.5rem;border-radius:3px;border:1px solid transparent;
  font-family:var(--ff-b);font-size:.79rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;transition:.25s ease;white-space:nowrap;
}
.mth .btn svg{width:16px;height:16px;flex:none}
.mth .btn-red{background:var(--red);color:#fff}
.mth .btn-red:hover{background:var(--red-dark)}
.mth .btn-outline-light{border-color:rgba(255,255,255,.75);color:#fff}
.mth .btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.mth .btn-block{width:100%}
.mth .btn-sm{padding:.62rem 1.1rem;font-size:.72rem}
.mth .link-red{
  display:inline-flex;align-items:center;gap:.4rem;color:var(--red);
  font-size:.79rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;transition:gap .25s ease;
}
.mth .link-red:hover{gap:.75rem}
.mth .center{display:flex;justify-content:center;margin-top:clamp(22px,2.6vw,30px)}

/* =========================================================
   PLACEHOLDER FOTOGRÁFICO
   Cada slot indica la foto final que va en su lugar.
   Para publicar: reemplazar el <div class="ph"> por <img>.
   ========================================================= */
.mth .ph{
  position:relative;overflow:hidden;background:linear-gradient(150deg,var(--c1,#8FA5B6) 0%,var(--c2,#4E6272) 100%);
}
.mth .ph::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L58 66 L96 100 L150 44 L206 108 L252 78 L312 124 L364 92 L400 116 L400 200 L0 200 Z' fill='rgba(255,255,255,.20)'/%3E%3Cpath d='M0 148 L74 104 L128 138 L192 96 L258 142 L318 112 L400 150 L400 200 L0 200 Z' fill='rgba(0,0,0,.14)'/%3E%3Cpath d='M0 178 L96 158 L188 180 L286 156 L400 176 L400 200 L0 200 Z' fill='rgba(0,0,0,.26)'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
.mth .ph::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 9px,transparent 9px 18px);
}
.mth .ph__tag{
  position:absolute;left:0;top:0;z-index:3;max-width:min(100%,340px);
  display:flex;gap:.4rem;align-items:flex-start;
  padding:.42rem .6rem;background:rgba(20,22,24,.5);color:rgba(255,255,255,.92);
  font-family:var(--ff-b);font-size:.56rem;font-weight:600;line-height:1.4;
  letter-spacing:.035em;text-transform:uppercase;backdrop-filter:blur(2px);
}
.mth .ph__tag svg{width:11px;height:11px;flex:none;margin-top:2px;opacity:.85}
/* el brief fotográfico se ancla abajo en los bloques con titular encima */
.mth .hero .ph__tag,.mth .closing .ph__tag,.mth .tcard__media .ph__tag{top:auto;bottom:0}
.mth .hero .ph__tag,.mth .closing .ph__tag{left:auto;right:0}

/* =========================================================
   HERO
   ========================================================= */
.mth .hero{position:relative;min-height:clamp(440px,46vw,600px);display:flex;align-items:center;overflow:hidden;background:#0F1214}
.mth .hero__media{position:absolute;inset:0;z-index:0}
.mth .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .85s ease}
.mth .hero__slide.is-active{opacity:1}
.mth .hero__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,62% 60%)}
.mth .hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(9,11,13,.88) 0%,rgba(9,11,13,.76) 27%,rgba(9,11,13,.44) 52%,rgba(9,11,13,.12) 78%,rgba(9,11,13,.02) 100%),
    linear-gradient(180deg,rgba(9,11,13,.24) 0%,rgba(9,11,13,.04) 44%,rgba(9,11,13,.22) 100%);
}
.mth .hero__body{position:relative;z-index:2;width:100%;color:#fff;padding-block:clamp(38px,4vw,54px)}
.mth .hero__inner{max-width:600px}
.mth .hero h1{margin-bottom:1.15rem}
.mth .hero p{max-width:70ch;font-size:.95rem;line-height:1.7;margin-bottom:1.7rem}
.mth .hero__btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* Controles del carrusel */
.mth .hero__ctrl{
  position:absolute;left:0;right:0;bottom:clamp(18px,2.2vw,28px);z-index:3;
  display:flex;align-items:center;gap:.55rem;
}
.mth .hero__arrow{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
  border-radius:4px;color:#fff;backdrop-filter:blur(2px);
  transition:background .25s ease,border-color .25s ease;
}
.mth .hero__arrow:hover{background:var(--red);border-color:var(--red)}
.mth .hero__arrow svg{width:16px;height:16px}
.mth .hero__dots{display:flex;align-items:center;gap:.4rem;margin-left:.35rem}
.mth .hero__dot{
  width:26px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background .3s ease,width .3s ease;
}
.mth .hero__dot:hover{background:rgba(255,255,255,.7)}
.mth .hero__dot[aria-current="true"]{width:38px;background:var(--red)}

/* =========================================================
   BARRA DE CONFIANZA
   ========================================================= */
.mth .trust{background:var(--band);border-bottom:1px solid var(--line)}
.mth .trust__in{display:flex;align-items:flex-start;justify-content:center;gap:clamp(26px,6vw,92px);padding-block:1.4rem;flex-wrap:wrap}
.mth .trust__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;flex:0 1 210px}
.mth .trust__item svg{width:34px;height:34px;flex:none;color:var(--ink)}
.mth .trust__item span{font-size:.7rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;line-height:1.35}
.mth .trust__ta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}
.mth .trust__ta img{width:34px;height:34px;object-fit:contain;flex:none}
.mth .trust__ta b{display:block;font-family:var(--ff-h);font-size:.8rem;font-weight:700;line-height:1.2}
.mth .trust__ta small{display:block;font-size:.68rem;color:var(--gray);line-height:1.3}

/* =========================================================
   INTRO
   ========================================================= */
.mth .intro__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(26px,4.2vw,58px);align-items:center}
.mth .intro__img{aspect-ratio:300/200;border-radius:var(--r);overflow:hidden;background:#DDD8CF}
.mth .intro__img img{width:100%;height:100%;object-fit:cover;object-position:45% 40%}
.mth .intro h2{margin-bottom:1rem}
.mth .intro p{color:var(--ink-2);font-size:.94rem;line-height:1.75}
.mth .intro strong{font-weight:700;color:var(--ink)}

/* =========================================================
   DESTINOS
   ========================================================= */
.mth .dest__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,14px);margin-top:clamp(24px,2.8vw,34px)}
.mth .dcard{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:188/170;color:#fff}
.mth .dcard .ph,.mth .dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mth .dcard__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(10,12,14,.93) 0%,rgba(10,12,14,.46) 45%,rgba(10,12,14,.12) 72%,rgba(10,12,14,0) 100%)}
.mth .dcard__body{position:absolute;left:0;bottom:0;z-index:3;width:100%;padding:clamp(12px,1.3vw,17px)}
.mth .dcard h3{margin-bottom:.35rem;font-size:1.4rem;text-transform:uppercase;letter-spacing:-.005em}
.mth .dcard span{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;transition:gap .25s ease}
.mth .dcard:hover span{gap:.7rem}
.mth .dcard .ph,.mth .dcard img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.mth .dcard:hover .ph,.mth .dcard:hover img{transform:scale(1.05)}

/* =========================================================
   PRÓXIMAS SALIDAS
   ========================================================= */
.mth .tours__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(24px,2.8vw,34px)}
.mth .tcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:.3s ease}
.mth .tcard:hover{box-shadow:0 16px 34px -22px rgba(0,0,0,.4);transform:translateY(-3px)}
.mth .tcard__media{position:relative;aspect-ratio:250/98}
.mth .tcard__media .ph,.mth .tcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mth .tcard__badge{
  position:absolute;left:0;top:14px;z-index:4;background:var(--red);color:#fff;
  padding:.42rem .8rem;border-radius:0 3px 3px 0;
  font-size:.67rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.mth .tcard__body{padding:clamp(14px,1.5vw,19px);display:flex;flex-direction:column;gap:.55rem;flex:1}
.mth .tcard h3{font-size:1.4rem;text-transform:uppercase;letter-spacing:-.005em}
.mth .tcard__sub{font-size:.85rem;color:var(--gray)}
.mth .tcard__meta{display:flex;flex-wrap:wrap;gap:.4rem .95rem;padding-block:.35rem .2rem;font-size:.76rem;color:var(--ink-2)}
.mth .tcard__meta li{display:flex;align-items:center;gap:.35rem}
.mth .tcard__meta svg{width:14px;height:14px;color:var(--gray-2);flex:none}
.mth .tcard .btn{margin-top:auto}
.mth .tours__note{margin-top:1.4rem;text-align:center;font-size:.73rem;line-height:1.6;color:var(--gray-2);max-width:74ch;margin-inline:auto}

/* =========================================================
   ARRIENDO
   ========================================================= */
.mth .rental__panel{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,3vw,40px);
}
.mth .rental__img{aspect-ratio:260/170;display:flex;align-items:center;justify-content:center}
.mth .rental__img img{width:100%;height:100%;object-fit:contain}
.mth .rental h2{margin-bottom:.9rem}
.mth .rental p{color:var(--ink-2);font-size:.94rem;max-width:46ch}
.mth .rental .btn{margin-top:1.5rem}

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.mth .testi__grid{display:grid;grid-template-columns:minmax(150px,.5fr) repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch;margin-top:clamp(24px,2.8vw,34px)}
.mth .ta{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.6rem;padding:.5rem}
.mth .ta img{width:46px;height:46px;object-fit:contain}
.mth .ta b{font-family:var(--ff-h);font-size:.95rem;font-weight:700;line-height:1.25;display:block}
.mth .ta small{display:block;font-size:.78rem;color:var(--gray)}
.mth .ta__dots{display:flex;gap:.3rem;margin-top:.15rem}
.mth .ta__dots i{width:15px;height:15px;border-radius:50%;background:var(--green);display:block}
.mth .quote{border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,1.5vw,19px);display:flex;flex-direction:column;gap:.6rem;background:#fff}
.mth .quote__mark{font-family:Georgia,serif;font-size:1.6rem;line-height:.5;color:var(--gray-2);height:.85rem}
.mth .quote p{font-size:.83rem;line-height:1.58;color:var(--ink-2)}
.mth .quote cite{margin-top:auto;font-style:normal;font-size:.78rem;color:var(--ink);font-weight:600}
.mth .quote cite small{display:block;font-weight:400;color:var(--gray-2);font-size:.74rem}

/* =========================================================
   CIERRE
   ========================================================= */
.mth .closing{position:relative;overflow:hidden;color:#fff;min-height:clamp(280px,26vw,340px);display:flex;align-items:center}
.mth .closing__media{position:absolute;inset:0;z-index:0}
.mth .closing__media img{width:100%;height:100%;object-fit:cover;object-position:52% 48%}
.mth .closing__scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(90deg,rgba(9,11,13,.86) 0%,rgba(9,11,13,.72) 30%,rgba(9,11,13,.42) 55%,rgba(9,11,13,.12) 80%,rgba(9,11,13,.03) 100%),
    linear-gradient(180deg,rgba(9,11,13,.20) 0%,rgba(9,11,13,.04) 45%,rgba(9,11,13,.22) 100%)}
.mth .closing__body{position:relative;z-index:2;width:100%;padding-block:clamp(36px,4vw,52px)}
.mth .closing h2{margin-bottom:.95rem}
.mth .closing p{max-width:42ch;font-size:.93rem;line-height:1.7;margin-bottom:1.6rem}
.mth .closing__btns{display:flex;flex-wrap:wrap;gap:.7rem}

/* =========================================================
   ALIADOS
   ========================================================= */
.mth .allies{padding-block:clamp(34px,3.8vw,50px)}
.mth .allies h2{text-align:center;font-size:2rem;letter-spacing:.005em;text-transform:uppercase;margin-bottom:clamp(18px,2vw,26px)}
.mth .allies__row{display:grid;grid-template-columns:repeat(5,1fr);align-items:center}
.mth .ally{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:.6rem 1rem;border-right:1px solid var(--line);min-height:84px}
.mth .ally:last-child{border-right:0}
/* caja única: todos los logos se miden contra el mismo alto y ancho máximo */
.mth .ally img{
  height:var(--lh,26px);width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);opacity:.82;transition:.3s ease;
}
.mth .ally:hover img{filter:none;opacity:1}
.mth .ally b{font-family:var(--ff-h);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}
.mth .ally i{font-style:normal;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .mth .dest__grid{grid-template-columns:repeat(2,1fr)}
  .mth .tours__grid{grid-template-columns:1fr 1fr}
  .mth .tours__grid .tcard:last-child{grid-column:span 2}
  .mth .testi__grid{grid-template-columns:1fr 1fr}
  .mth .ta{grid-column:span 2;flex-direction:row;justify-content:flex-start;text-align:left;gap:1rem;padding:0 0 .3rem}
  .mth .ta__dots{margin-left:auto}
  .mth .intro__grid,.mth .rental__panel{grid-template-columns:1fr}
  .mth .hero__body{padding-bottom:76px}
  .mth .intro__img{aspect-ratio:16/8}
  .mth .rental__img{aspect-ratio:16/9}
}
@media (max-width:640px){
  body.mth-home{font-size:15px}
  .mth .h1{font-size:2.4rem}
  .mth .h2,.mth .h2-c,.mth .allies h2{font-size:1.6rem}
  .mth .trust__in{gap:1.1rem .6rem}
  .mth .trust__item{flex:1 1 28%}
  .mth .dest__grid,.mth .tours__grid,.mth .testi__grid{grid-template-columns:1fr}
  .mth .tours__grid .tcard:last-child{grid-column:auto}
  .mth .ta{grid-column:auto}
  .mth .allies__row{grid-template-columns:repeat(2,1fr)}
  .mth .ally{border-right:0;border-bottom:1px solid var(--line)}
  .mth .hero__btns .btn,.mth .closing__btns .btn{flex:1 1 100%}
  .mth .hero .ph__tag{display:none}
  .mth .hero__ctrl{justify-content:center}
  .mth .hero__body{padding-bottom:78px}
  .mth .closing__media img{object-position:62% 55%}
  .mth .closing__scrim{background:linear-gradient(180deg,rgba(9,11,13,.72) 0%,rgba(9,11,13,.60) 50%,rgba(9,11,13,.78) 100%)}
  .mth .hero__media img{object-position:var(--pos-m,72% 58%)}
  .mth .hero__scrim{background:linear-gradient(180deg,rgba(9,11,13,.74) 0%,rgba(9,11,13,.62) 50%,rgba(9,11,13,.80) 100%)}
}
@media (prefers-reduced-motion:reduce){.mth *{transition-duration:.01ms!important}html{scroll-behavior:auto}}

/* =========================================================
   WORDPRESS
   ========================================================= */
/* Enlace "saltar al contenido" (accesibilidad) */
.mth-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#fff;color:#1D1D1F;padding:.7rem 1rem;font:700 .8rem/1 'Open Sans',Arial,sans-serif;border:2px solid #E2231A}
.mth-skip:focus{left:12px;top:12px}
/* Testimonios: sin el margen por defecto de <blockquote>, las tarjetas ocupan toda la columna */
.mth .quote{margin:0}
/* Próximas salidas con tours del sitio */
.mth a.tcard__media{display:block;color:inherit;overflow:hidden}
.mth a.tcard__media img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.mth .tcard:hover a.tcard__media img{transform:scale(1.04)}
.mth .tcard h3 a{color:inherit;transition:color .25s ease}
.mth .tcard h3 a:hover{color:var(--red)}
.mth .tcard__more{font-size:.74rem;color:var(--gray);margin-top:-.2rem}
@media (max-width:1180px){
  .mth .tours__grid--n2 .tcard:last-child,.mth .tours__grid--n4 .tcard:last-child,
  .mth .tours__grid--n6 .tcard:last-child,.mth .tours__grid--n8 .tcard:last-child{grid-column:auto}
}
@media (max-width:640px){ .mth .tours__grid .tcard:last-child{grid-column:auto} }
/* Nota interna de datos por confirmar */
.mth .tours__note{padding:.7rem 1rem;border:1px dashed var(--line);border-radius:var(--r);background:#FFFBEA}
