/* =====================================================================
   Medrano Auto Repair — piezas nuevas de las páginas prioritarias
   Se carga DESPUÉS de assets/estilos.css (misma paleta, mismos nombres).
   Reglas de móvil: nada se sale de 390 px. Ninguna regla esconde texto.
   ===================================================================== */
:root{
  --grafito:#15191f; --grafito2:#1e232b; --grafito3:#2a313b;
  --naranja:#c14a0c; --naranja2:#a8430c; --ambar:#f0a93c;
  --hueso:#faf8f4; --papel:#fffdfa; --tinta:#171a1f; --gris:#5d646f;
  --linea:#e7e2d9; --verde:#17795a;
  --r:18px; --sombra:0 12px 30px rgba(21,25,31,.10);
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
.med-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- barra de navegación (sin teléfono: regla dura 0 teléfonos) ---- */
.nav2{background:var(--grafito);color:#fff;position:sticky;top:0;z-index:40}
.nav2 .med-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.nav2 .logo{font-weight:800;letter-spacing:.14em;font-size:.95rem;line-height:1.2}
.nav2 .logo span{display:block;color:var(--ambar);font-size:.62rem;letter-spacing:.28em}
.nav2 .menu{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav2 .menu a{color:#e8e4dc;text-decoration:none;font-size:.8rem;padding:7px 10px;border-radius:9px;border:1px solid transparent}
.nav2 .menu a:hover{border-color:#ffffff2e;background:#ffffff12}
.nav2 .menu a[aria-current="page"]{background:var(--naranja);color:#fff}
.nav2 .idioma{margin-left:auto;background:#ffffff14;color:#fff;border:1px solid #ffffff2e;border-radius:9px;
  padding:7px 12px;font:inherit;font-size:.78rem;cursor:pointer}

/* ---------- portada ---------- */
.hero2{background:var(--grafito);color:#fff;padding:30px 0 0;overflow:hidden}
.hero2 .insignia{display:inline-block;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:999px;
  padding:6px 12px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ambar)}
.hero2 h1{font-size:clamp(1.6rem,7.4vw,3.1rem);line-height:1.08;margin:14px 0 10px;letter-spacing:-.02em;max-width:26ch}
.hero2 h1 em{font-style:normal;color:var(--ambar)}
.hero2 p{color:#cfcbc2;max-width:56ch;font-size:.98rem}
.hero2 .acciones{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.hero2 .datos{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 22px;font-size:.82rem;color:#cfcbc2}
.hero2 .datos b{display:block;color:#fff}
.tira3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tira3 figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:#242a33}
.tira3 img{display:block;width:100%;height:104px;object-fit:cover}
.tira3 figcaption{position:absolute;left:0;right:0;bottom:0;background:#15191fd9;color:#f3efe7;
  font-size:.62rem;line-height:1.25;padding:5px 7px}
@media (max-width:420px){
  .tira3 img{height:88px}
  .tira3 figcaption{font-size:.58rem;padding:4px 6px}
}

/* ---------- botones ---------- */
.btn2{display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;border-radius:12px;
  padding:13px 18px;border:1.5px solid transparent;text-align:center}
.btn2-naranja{background:var(--naranja);color:#fff;box-shadow:0 10px 24px rgba(193,74,12,.28)}
.btn2-claro{background:#fff;color:var(--tinta);border-color:var(--linea)}
.btn2-borde{background:transparent;color:#fff;border-color:#ffffff4d}
.btn2.ancho{width:100%}

/* ---------- franjas y encabezados de sección ---------- */
.franja{padding:34px 0}
.franja.clara{background:var(--hueso)}
.franja.blanca{background:var(--papel)}
.franja.oscura{background:var(--grafito);color:#fff}
.ojo2{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--naranja);margin-bottom:8px}
.ojo2.claro{color:var(--ambar)}
h2.sec{font-size:clamp(1.25rem,5.4vw,2rem);line-height:1.15;margin:0 0 12px;letter-spacing:-.01em;max-width:30ch}
.sec-entrada{font-size:.95rem;color:var(--gris);max-width:62ch}
.franja.oscura .sec-entrada{color:#cfcbc2}

/* ---------- bloques destacados ---------- */
.destacado{background:linear-gradient(180deg,#fff 0%,#fff8f2 100%);border:2px solid var(--naranja);
  border-radius:var(--r);padding:22px;box-shadow:var(--sombra)}
.destacado .sello{display:inline-block;background:var(--naranja);color:#fff;border-radius:999px;
  padding:5px 11px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.destacado h2{font-size:clamp(1.3rem,6vw,2.1rem);line-height:1.1;margin:12px 0 8px}
.destacado ul{list-style:none;padding:0;margin:14px 0}
.destacado li{position:relative;padding-left:24px;margin-bottom:9px;font-size:.9rem;color:var(--tinta)}
.destacado li:before{content:"";position:absolute;left:4px;top:7px;width:9px;height:9px;border-radius:3px;background:var(--naranja)}
.destacado .pie-ficha{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.precio-caja{background:var(--grafito);color:#fff;border-radius:14px;padding:14px 16px;margin:14px 0}
.precio-caja .et{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ambar)}
.precio-caja .va{font-size:1.25rem;font-weight:800;margin:6px 0 4px}
.precio-caja .no{font-size:.8rem;color:#cfcbc2}

/* ---------- rejilla de servicios ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px;box-shadow:0 6px 18px rgba(21,25,31,.05)}
.tarjeta h3{margin:0 0 6px;font-size:1.02rem}
.tarjeta p{margin:0 0 10px;font-size:.88rem;color:var(--gris)}
.tarjeta .sello{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:4px 9px;background:#f1ede5;color:#5d646f;margin-bottom:9px;font-weight:700}
.tarjeta .sello.operando{background:#e7f4ee;color:#116249}
.tarjeta .sello.piloto{background:#fdf3e2;color:#8a5a10}
.tarjeta .sello.decision{background:#fdecec;color:#8d2d24}
.tarjeta .sello.pendiente{background:#eef1f5;color:#3d4654}
.tarjeta a.mas{font-size:.85rem;font-weight:700;color:var(--naranja);text-decoration:none}

/* ---------- pasos / por qué pedir cita ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;counter-reset:p}
.paso{background:#fff;border:1px solid var(--linea);border-left:5px solid var(--ambar);border-radius:14px;padding:16px}
.paso:before{counter-increment:p;content:counter(p);display:block;font-weight:800;color:var(--naranja);
  font-size:1.5rem;line-height:1}
.paso h3{margin:8px 0 5px;font-size:.98rem}
.paso p{margin:0;font-size:.86rem;color:var(--gris)}
.franja.oscura .paso{background:#1e232b;border-color:#2a313b;border-left-color:var(--ambar);color:#e8e4dc}
.franja.oscura .paso p{color:#b9b6ae}

/* ---------- listas de verificación ---------- */
.lista-marca{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px}
.lista-marca li{position:relative;padding-left:28px;font-size:.9rem;line-height:1.45}
.lista-marca li:before{content:"✓";position:absolute;left:4px;top:0;color:var(--verde);font-weight:800}
.lista-marca li.no:before{content:"✕";color:#a5251b}

/* ---------- dudas (acordeón) ---------- */
details.duda{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px 16px;margin-bottom:10px}
details.duda summary{cursor:pointer;font-weight:700;font-size:.94rem;color:var(--tinta)}
details.duda summary::marker{color:var(--naranja)}
details.duda p{margin:10px 0 0;font-size:.9rem;color:var(--gris)}
details.duda .estado{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8d2d24;background:#fdecec;border-radius:999px;padding:3px 9px;margin-top:8px;font-weight:700}

/* ---------- tabla de datos ---------- */
.tabla2{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff;border-radius:12px;overflow:hidden}
.tabla2 th,.tabla2 td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla2 th{background:var(--grafito);color:#fff;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.tabla2 tr:last-child td{border-bottom:none}

/* ---------- mapa ---------- */
.mapa-caja{border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:#fff}
.mapa-caja iframe{display:block;width:100%;height:300px;border:0}
.mapa-datos{padding:14px 16px;font-size:.88rem}
.mapa-datos b{display:block;font-size:1rem;margin-bottom:3px}
.mapa-nota{font-size:.78rem;color:var(--gris);margin-top:6px}
.enlaces-mapa{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.enlaces-mapa a{font-size:.82rem;font-weight:700;color:var(--naranja);text-decoration:none;border:1.5px solid var(--linea);
  border-radius:10px;padding:8px 11px;background:#fff}

/* ---------- agenda ---------- */
.agenda{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px;box-shadow:var(--sombra)}
.agenda .tramo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.agenda label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.agenda select,.agenda input,.agenda textarea{width:100%;margin-top:5px;padding:11px;border:1.5px solid var(--linea);
  border-radius:10px;font:inherit;font-size:.92rem;background:#fff;color:var(--tinta)}
.agenda .horas{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.agenda .horas button{font:inherit;font-size:.84rem;padding:9px 11px;border-radius:9px;border:1.5px solid var(--linea);
  background:#fff;cursor:pointer}
.agenda .horas button[aria-pressed="true"]{background:var(--naranja);color:#fff;border-color:var(--naranja)}
.agenda .horas button:disabled{opacity:.5;text-decoration:line-through;cursor:not-allowed}
.agenda .ok,.agenda .error{border-radius:12px;padding:12px 14px;font-size:.9rem;margin-bottom:12px;font-weight:600}
.agenda .ok{background:#e7f4ee;color:#116249}
.agenda .error{background:#fdecec;color:#8d2d24}
.agenda .aviso-mini{font-size:.78rem;color:var(--gris);margin-top:8px}
.ticket{white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;
  background:#f7f4ee;border:1px dashed var(--linea);border-radius:12px;padding:13px;margin-top:12px;color:#3a3f47}
.agenda h3{margin:0 0 12px;font-size:1.05rem}

/* ---------- barra fija del celular (sin teléfono) ---------- */
.barra-fija{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;
  background:#15191ff2;padding:9px 12px;backdrop-filter:blur(6px)}
.barra-fija a{flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:.88rem;padding:12px 8px;border-radius:11px}
.barra-fija a.b{background:var(--naranja);color:#fff}
.barra-fija a.l{background:#ffffff1a;color:#fff;border:1px solid #ffffff2e}
body{padding-bottom:76px}

/* ---------- pie ---------- */
.pie2{background:var(--grafito2);color:#c6c2b9;padding:26px 0 34px;font-size:.86rem}
.pie2 a{color:#e8e4dc}
.pie2 .col{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.pie2 h4{color:#fff;margin:0 0 8px;font-size:.9rem}
.pie2 .credito{font-size:.74rem;color:#9aa2ad;margin-top:16px;border-top:1px solid #ffffff1f;padding-top:12px}
.pie2 .fuente{font-size:.74rem;color:#9aa2ad;margin-top:10px}

/* ---------- enlaces internos entre páginas ---------- */
.sigue{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sigue a{display:block;text-decoration:none;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px}
.sigue a b{display:block;color:var(--tinta);font-size:.95rem;margin-bottom:4px}
.sigue a span{color:var(--gris);font-size:.82rem}
.sigue a:hover{border-color:var(--naranja)}

/* ---------- franja de aviso de vista previa (opcional, la pone el guion) ---- */
.ojo-aviso{background:#fff8e6;border:1px solid #f0d9a5;border-left:5px solid var(--ambar);border-radius:12px;
  padding:13px 15px;font-size:.86rem;color:#6b5320}

@media (max-width:400px){
  .hero2 h1{font-size:1.72rem}
  .destacado{padding:17px}
  .franja{padding:26px 0}
  .med-wrap{padding:0 15px}
  .tabla2{font-size:.8rem}
  .tabla2 th,.tabla2 td{padding:9px}
}

/* ---------- red de seguridad para palabras largas (URLs, correos) ----------
   Sin esto, una URL larga dentro de un texto estira el ancho de la página y el
   celular la muestra encogida (el navegador aleja la vista en vez de partir la
   palabra). Medido: la sección de fuentes llevaba el ancho a 421 px. */
p, li, td, th, summary, h1, h2, h3, figcaption, .mapa-nota, .fuente, .credito, .ticket, .ojo-aviso{
  overflow-wrap:anywhere;
}
iframe{max-width:100%}