/* ==========================================================================
   /importoyota/ — página de la unidad Importoyota dentro del sitio del grupo
   Identidad de importoyota.com: negro #000/#100E0E, rojo de interfaz #D40C0C,
   rojo del logo #E12520, Rajdhani en mayúsculas para títulos de marca,
   radio de 4 px y Toyotas blancos recortados sobre fondo negro.
   Solo estilos propios de esta página (prefijo it-); los componentes base
   (page-hero, section-head, card, channel, nota, cta-band) vienen de sitio.css.
   ========================================================================== */
.pagina-importoyota{--it-black:#000;--it-ink:#100E0E;--it-panel:#1A1818;--it-line:#2E2B2B;--it-red-txt:#FF4A4D}

/* ---------- Encabezado ---------- */
.it-hero{background:radial-gradient(85% 90% at 82% 72%,#380404 0%,#100E0E 52%,#000 100%)}
.it-hero::before{background:radial-gradient(42% 46% at 76% 86%,rgba(212,12,12,.28),transparent 70%)}
.it-hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:40px;row-gap:0;align-items:center;padding-bottom:56px}
.it-hero .breadcrumb{grid-column:1/-1}
.it-hero .eyebrow{color:#FF6B6E}
.it-hero h1{max-width:none;margin:.5em 0 .5em}
/* Logo original de Importoyota (SVG, rojo #E12520) dentro del H1: su texto alternativo da nombre al título */
.it-logo{display:block;width:280px;height:auto;margin:0 0 22px}
.it-h1-t{display:block;font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.98;font-size:clamp(2.3rem,4.6vw,3.6rem);max-width:17ch;text-wrap:balance}
.it-h1-t em{font-style:normal;color:var(--it)}
.it-hero .lead{color:#CFCFCF;max-width:52ch}
.it-hero .actions{margin-top:28px}
/* Escritorio: los dos botones apilados con el mismo ancho (uno al lado del otro no caben con la letra de 20 px) */
@media (min-width:761px){.it-hero .actions{display:grid;grid-template-columns:minmax(0,max-content)}}
/* Botones con el lenguaje de importoyota.com: Rajdhani en mayúsculas y radio de 4 px */
.it-btn,.it-btn-wa{font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.12rem;border-radius:4px;line-height:1.2}
/* Ícono fijo y texto en un span: si no cabe en una línea, el texto se parte por dentro (el número no se corta) */
.it-btn-wa span{text-align:center}
.it-btn{background:var(--it-ui);color:#fff}
.it-btn:hover{background:#A80909}
.it-hero :focus-visible,.it-modelos :focus-visible,.it-pasos-panel :focus-visible{outline-color:#FF6B6E}
/* Dos Toyotas recortados: Prado al fondo, Hilux al frente, con el resplandor rojo del sitio de la marca */
.it-hero-media{position:relative;aspect-ratio:13/10;max-width:620px;width:100%;justify-self:end}
.it-hero-media::before{content:"";position:absolute;left:6%;right:0;bottom:4%;height:30%;background:radial-gradient(50% 50% at 50% 50%,rgba(212,12,12,.55),transparent 70%);filter:blur(22px)}
.it-hero-media img{position:absolute;height:auto}
.it-car-back{width:66%;left:0;top:6%;filter:brightness(.52) saturate(.9) drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.it-car-front{width:86%;right:-2%;bottom:2%;filter:drop-shadow(0 30px 36px rgba(0,0,0,.75))}

/* ---------- Franja roja de datos ---------- */
.it-strip{background:var(--it-ui);color:#fff}
.it-strip ul{list-style:none;margin:0;padding:18px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px}
.it-strip li{display:flex;align-items:center;gap:12px;font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;line-height:1.15}
.it-strip svg{width:26px;height:26px;flex:none}

/* ---------- Qué hace: tarjetas con el ícono a la izquierda ---------- */
.it-que .section-head .lead a{color:var(--slate-900);font-weight:700;text-underline-offset:3px}
.it-que-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.it-que .card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;row-gap:6px;align-content:start;border-top:3px solid var(--it-ui);border-radius:4px;padding:26px 28px}
.it-que .card .ico{grid-row:1/3}
.it-que .card h3,.it-que .card p{grid-column:2}
.it-que .card h3{margin:0}
.it-que .card .ico,.it-grupo .it-servicios .ico{background:var(--it-ink);border-radius:4px}
.it-que .card .ico svg,.it-grupo .it-servicios .ico svg{color:var(--it-red-txt)}

/* ---------- Modelos (sección negra) ---------- */
.it-modelos{background:radial-gradient(70% 60% at 15% 0%,#2A0606 0%,transparent 60%),var(--it-ink);color:#EDEDED}
.it-modelos h2{color:#fff}
.it-modelos .eyebrow{color:#FF6B6E}
.it-modelos .lead{color:#C2C2C2}
.it-models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.it-models li{display:flex}
.it-model{position:relative;flex:1;display:flex;flex-direction:column;background:var(--it-panel);border:1px solid var(--it-line);border-radius:4px;overflow:hidden;text-decoration:none;color:#fff;transition:border-color .2s,transform .2s}
.it-model:hover{border-color:var(--it-ui);transform:translateY(-3px)}
/* Escenario de alto fijo: el auto se ajusta dentro (flex para que el max-height en % se resuelva) */
.it-model .stage{position:relative;display:flex;align-items:center;justify-content:center;height:168px;padding:16px 14px 12px;overflow:hidden;background:radial-gradient(70% 70% at 50% 85%,#3A3636 0%,#1F1C1C 60%,#151313 100%)}
.it-model .stage::after{content:"";position:absolute;left:14%;right:14%;bottom:10px;height:16px;background:radial-gradient(50% 50% at 50% 50%,rgba(212,12,12,.45),transparent 70%);filter:blur(6px)}
.it-model .stage img{position:relative;z-index:1;display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));transition:transform .25s}
.it-model:hover .stage img{transform:scale(1.04)}
.it-model .name{display:block;border-top:3px solid var(--it-ui);padding:14px 44px 2px 18px;font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.4rem;line-height:1.1}
.it-model .gen{display:block;padding:2px 44px 0 18px;font-size:.88rem;color:#C2C2C2;line-height:1.4}
.it-model::after{content:"";display:block;height:16px;margin-top:auto}
.it-model .ext{position:absolute;right:16px;bottom:18px;width:20px;height:20px;color:var(--it-red-txt);transition:transform .2s}
.it-model:hover .ext{transform:translate(2px,-2px)}

/* ---------- Categorías ---------- */
.it-categorias{background:var(--bg-alt)}
.it-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.it-cat{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:18px;align-content:start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--it-ui);border-radius:4px;padding:22px 22px 22px 20px;transition:box-shadow .2s,transform .2s}
.it-cat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.it-cat:has(a:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.it-cat a:focus-visible{outline:none}
.it-cat .ico{grid-row:1/3;width:56px;height:56px;border-radius:4px;background:var(--it-ink);display:grid;place-items:center}
.it-cat .ico svg{width:28px;height:28px;color:var(--it-red-txt)}
/* TRD y GR se nombran con texto (sin logos de terceros) */
.it-cat .ico-txt{font-family:Rajdhani,sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.04em;color:#fff;border-bottom:3px solid var(--it-ui)}
.it-cat h3{margin:2px 0 6px;font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.4rem;line-height:1.1;color:var(--it-ink)}
.it-cat h3 a{color:inherit;text-decoration:none}
/* Toda la tarjeta es clicable: el enlace del título se extiende sobre ella */
.it-cat h3 a::after{content:"";position:absolute;inset:0;border-radius:4px}
.it-cat p{grid-column:2;margin:0;font-size:.92rem;color:var(--muted);line-height:1.5;text-wrap:pretty}
.it-cat .go{grid-column:2;align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--red-700)}
.it-cat .go svg{width:15px;height:15px;transition:transform .2s}
.it-cat:hover .go svg{transform:translate(2px,-2px)}
.it-nota{margin:32px 0 0;border-left-color:var(--it-ui);max-width:none}
.it-nota p{margin:0}

/* ---------- Contacto de Importoyota ---------- */
.it-contacto .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 56px;align-items:start}
.it-contacto .lead{margin-bottom:26px}
.it-channels .channel{border-radius:4px}
.it-channels .channel:not(.wa) .ico{background:var(--it-ink)}
.it-channels .channel:not(.wa) .ico svg{color:var(--it-red-txt)}
.it-pasos-panel{background:radial-gradient(90% 70% at 100% 100%,#380404 0%,transparent 65%),var(--it-ink);color:#EDEDED;border-radius:4px;border-top:4px solid var(--it-ui);padding:32px 32px 34px}
.it-pasos-panel h3{font-family:Rajdhani,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.6rem;line-height:1.1;color:#fff;margin:0 0 22px}
.it-pasos{list-style:none;counter-reset:paso;margin:0 0 28px;padding:0;display:grid;gap:20px}
.it-pasos li{counter-increment:paso;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:start}
.it-pasos li::before{content:counter(paso);grid-row:1/3;width:44px;height:44px;border-radius:4px;background:var(--it-ui);color:#fff;display:grid;place-items:center;font-family:Rajdhani,sans-serif;font-weight:700;font-size:1.35rem}
.it-pasos b{color:#fff;font-size:1rem;line-height:1.3;margin-top:2px}
.it-pasos span{grid-column:2;color:#C2C2C2;font-size:.92rem;line-height:1.5}
.it-pasos-panel .btn{width:100%;padding-inline:1em}
.it-grupo-nota{grid-column:1/-1;margin:0;padding-top:22px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.it-grupo-nota a{color:var(--red-700);font-weight:700;text-underline-offset:3px}

/* ---------- Parte del grupo ---------- */
.it-grupo{background:var(--bg-alt)}
.it-sub{font-size:1.2rem;color:var(--slate-900);margin:0 0 18px}
.it-marcas,.it-servicios{grid-template-columns:repeat(3,minmax(0,1fr))}
.it-marcas{margin-bottom:48px}
.it-grupo h4{font-size:1.15rem;margin:4px 0 0;color:var(--slate-900);line-height:1.25}
.it-marcas h4{font-size:1.45rem}
.it-marcas .card{border-top:4px solid var(--c)}
.it-marcas .biz{width:48px;height:48px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:0 2px 6px rgba(20,30,36,.16)}
.it-marcas .biz svg{width:24px;height:24px;color:#fff}


/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .it-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Nueve categorías en dos columnas: la última ocupa la fila completa */
  .it-cat:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:1060px){
  .it-strip ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  /* Marcas y servicios del grupo en filas: ícono | texto | enlace */
  .it-marcas,.it-servicios{grid-template-columns:minmax(0,1fr);gap:14px}
  .it-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .it-hero-media{justify-self:center;max-width:560px;margin-top:28px}
  .it-contacto .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (min-width:601px) and (max-width:980px){
  .it-grupo .card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;column-gap:20px;row-gap:4px;align-items:center;padding:22px 24px}
  .it-grupo .card > .ico,.it-grupo .card > .biz{grid-row:1/3;align-self:start}
  .it-grupo .card h4,.it-grupo .card p{grid-column:2}
  .it-grupo .card h4{margin:0}
  .it-grupo .card .more{grid-column:3;grid-row:1/3;margin:0;white-space:nowrap}
  /* Servicios sin párrafo: el título se centra con el ícono y el enlace */
  .it-servicios .card h4{grid-row:1/3;align-self:center}
}
@media (max-width:860px){
  .it-models{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .it-hero .actions .btn{flex:1 1 auto;padding-inline:1em}
  .it-logo{width:220px}
  .it-que-grid{grid-template-columns:minmax(0,1fr)}
  .it-que .card{padding:22px}
  .it-pasos-panel{padding:26px 22px 28px}
}
@media (max-width:600px){
  .it-cats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .it-model .stage{height:118px;padding:12px 8px 8px}
  .it-model .name{font-size:1.2rem;padding:12px 30px 2px 12px}
  .it-model .gen{padding:2px 30px 0 12px;font-size:.8rem}
  .it-model .ext{bottom:14px;right:10px;width:18px;height:18px}
  .it-strip li{font-size:1.05rem;gap:10px}
  .it-strip svg{width:22px;height:22px}
}
@media (max-width:400px){
  .it-cat{grid-template-columns:48px minmax(0,1fr);column-gap:14px;padding:18px 16px}
  .it-cat .ico{width:48px;height:48px}
  .it-cat .ico svg{width:24px;height:24px}
  .it-que .card{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .it-que .card .ico{grid-row:auto}
  .it-que .card h3,.it-que .card p{grid-column:1}
}
/* ---------- Escala de escritorio (pedido del CEO, 2026-10-01): solo desde 981 px ----------
   Lectura 1.1rem (22 px), datos y notas 1rem (20 px). En celular y tableta no cambia nada. */
@media (min-width:981px){
  .it-cat p,.it-pasos span{font-size:1.1rem}
  .it-pasos b{font-size:1.2rem}
  .it-cat .go,.it-model .gen,.it-grupo-nota{font-size:1rem}
}
@media (forced-colors:active){
  .it-cat .ico,.it-pasos li::before,.it-marcas .biz{forced-color-adjust:none}
}
@media (prefers-reduced-motion:reduce){
  .it-model:hover,.it-cat:hover{transform:none}
  .it-model:hover .stage img{transform:none}
}