/* Web de RedMóviles (rediseño 2026-10-22): el banco de trabajo del técnico.
   Tapete antiestático gris pizarra con retícula y reglas; tapete magnético claro con casillas numeradas;
   rojo ladrillo solo para lo que se pulsa y la casilla 1; cinta ámbar para la nota de Google. */
@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; src: url(fonts/montserrat-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--pizarra: #34444f;		/* silicona del tapete */
	--pizarra-oscura: #263239;	/* bordes y reglas */
	--reticula: rgba(255, 255, 255, .085);
	--reticula-fina: rgba(255, 255, 255, .035);
	--iman: #e9edf0;		/* tapete magnético */
	--iman-reticula: rgba(29, 38, 45, .055);
	--casilla: #fff;
	--linea: #cdd5db;
	--linea-suave: #e1e6ea;
	--tinta: #1d262d;
	--tinta-suave: #4b5761;
	--rojo: #aa4039;
	--rojo-oscuro: #8b322c;
	--rojo-claro: #f8eceb;
	--cinta: #e2a63d;		/* cinta ámbar (kapton) */
	--cinta-tinta: #2b1d06;
	--blanco-tapete: #e3e9ed;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--regla: 26px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; font-family: Montserrat, system-ui, sans-serif; font-size: 16px; line-height: 1.55; color: var(--tinta); background: var(--pizarra-oscura); -webkit-tap-highlight-color: transparent; }
a { color: var(--rojo-oscuro); text-underline-offset: 3px; }
::selection { background: var(--cinta); color: var(--cinta-tinta); }
:focus-visible { outline: 3px solid var(--cinta); outline-offset: 2px; border-radius: 6px; }
svg { flex: none; }

/* ===== Tapete antiestático ===== */
.tapete {
	position: relative; min-height: 100vh; padding: var(--regla) 0 0 var(--regla); overflow: hidden; isolation: isolate;
	background-color: var(--pizarra);
	background-image:
		linear-gradient(var(--reticula) 1px, transparent 1px), linear-gradient(90deg, var(--reticula) 1px, transparent 1px),
		linear-gradient(var(--reticula-fina) 1px, transparent 1px), linear-gradient(90deg, var(--reticula-fina) 1px, transparent 1px);
	background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
	background-position: var(--regla) var(--regla);
}
.regla { position: absolute; color: rgba(255, 255, 255, .7); font: 10px/1 var(--mono); pointer-events: none; }
.regla-arriba {
	top: 0; left: var(--regla); right: 0; height: var(--regla); display: flex; white-space: nowrap;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 1px, transparent 1px 50px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 25px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 1px, transparent 1px 5px);
	background-size: 100% 12px, 100% 8px, 100% 5px; background-position: top; background-repeat: no-repeat;
}
.regla-arriba span { flex: 0 0 50px; padding: 15px 0 0 3px; font-size: 9.5px; }
.regla-izquierda {
	top: 0; left: 0; bottom: 0; width: var(--regla);
	background-image:
		repeating-linear-gradient(rgba(255, 255, 255, .7) 0 1px, transparent 1px 50px),
		repeating-linear-gradient(rgba(255, 255, 255, .45) 0 1px, transparent 1px 25px),
		repeating-linear-gradient(rgba(255, 255, 255, .28) 0 1px, transparent 1px 5px);
	background-size: 12px 100%, 8px 100%, 5px 100%; background-position: left var(--regla); background-repeat: no-repeat;
}

/* ===== Barra superior ===== */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1140px; margin: 0 auto; padding: 16px 20px 0; color: #fff; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.marca img { border-radius: 9px; background: #fff; }
.estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; font-weight: 600; color: #e9eef1; }
.luz { width: 9px; height: 9px; border-radius: 50%; background: #9aa6ae; }
.estado.abierto .luz { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); }

/* ===== Portada, sobre el tapete ===== */
.portada { position: relative; max-width: 1140px; margin: 0 auto; padding: 34px 20px 6px; color: #fff; }
.plantilla { position: absolute; z-index: -1; right: 10px; top: 232px; width: 280px; display: none; }
.pl-lineas { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.4; }
.pl-textos { fill: rgba(255, 255, 255, .55); font: 10px var(--mono); text-anchor: middle; }
.portada h1 { margin: 0; max-width: 13ch; font-size: clamp(2.35rem, 9.5vw, 5rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.portada-sub { margin: 14px 0 0; font-size: clamp(1.05rem, 3.6vw, 1.3rem); color: var(--blanco-tapete); font-weight: 500; }
.etiqueta-pieza {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 14px 9px 12px; transform: rotate(-1.5deg);
	background: var(--cinta); color: var(--cinta-tinta); text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 3px;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
}
.etiqueta-nota { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.etiqueta-pieza svg { width: 18px; height: 18px; fill: var(--cinta-tinta); margin-right: 4px; }

/* ===== Tapete magnético con casillas numeradas ===== */
.iman {
	max-width: 1140px; margin: 30px auto 0; padding: 12px; display: grid; gap: 12px; grid-template-columns: 1fr;
	background-color: var(--iman); border-radius: 20px;
	background-image: linear-gradient(var(--iman-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--iman-reticula) 1px, transparent 1px);
	background-size: 24px 24px;
	box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6) inset, 0 0 0 5px var(--iman) inset, 0 0 0 6px #c3ccd2 inset;
}
.casilla { position: relative; min-width: 0; padding: 18px 18px 20px; background: var(--casilla); border: 1.5px solid var(--linea); border-radius: 16px; }
.casilla-cab { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding-right: 30px; }
.casilla-cab h2 { margin: 0; font-size: 23px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; }
.casilla-n { flex: none; font: 800 30px/1 Montserrat, system-ui, sans-serif; color: #9aa6ae; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.casilla-ven { border: 2px solid var(--rojo); }
.casilla-ven .casilla-n { color: var(--rojo); }
.casilla-intro { margin: 0 0 14px; color: var(--tinta-suave); }

/* El tornillo de cada casilla (se asienta al aparecer; con movimiento reducido ya está puesto) */
.tornillo { position: absolute; bottom: 10px; right: 10px; width: 18px; height: 18px; pointer-events: none; }
.t-cabeza { fill: #c9d1d6; }
.t-cruz { fill: #56616a; }
.con-tornillos .casilla .tornillo { transform: rotate(-220deg) scale(.35); opacity: 0; }
.con-tornillos .casilla.asentada .tornillo { transform: none; opacity: 1; transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .25s ease-out; }

/* 1 · Ven */
.ven-cuerpo { display: grid; gap: 16px; }
.direccion { margin: 0; font-size: 18px; line-height: 1.4; }
.zona { margin: 6px 0 14px; color: var(--tinta-suave); }
.horario { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.horario caption { text-align: left; font-weight: 800; padding-bottom: 6px; }
.horario th, .horario td { padding: 6px 8px; border-top: 1px solid var(--linea-suave); text-align: left; font-weight: 500; }
.horario td { text-align: right; font-variant-numeric: tabular-nums; }
.horario tr.hoy th, .horario tr.hoy td { background: var(--rojo-claro); color: var(--rojo-oscuro); font-weight: 700; }
.horario tr.hoy th { border-radius: 8px 0 0 8px; }
.horario tr.hoy td { border-radius: 0 8px 8px 0; }
.ven-mapa { position: relative; }
.ven-mapa::before, .ven-mapa::after { content: ""; position: absolute; z-index: 1; top: -9px; width: 64px; height: 20px; background: var(--cinta); opacity: .9; border-radius: 2px; box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .4); pointer-events: none; }
.ven-mapa::before { left: 18px; transform: rotate(-7deg); }
.ven-mapa::after { right: 18px; transform: rotate(6deg); }
.ven-mapa iframe { display: block; width: 100%; height: 260px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--iman); }
.fachada { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px; font: 700 17px/1.2 Montserrat, system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 0; touch-action: manipulation; transition: background-color .15s ease-out, transform .1s ease-out; }
.boton svg { width: 22px; height: 22px; fill: currentColor; }
.boton:active { transform: translateY(1px); }
.boton-principal { background: var(--rojo); color: #fff; box-shadow: 0 8px 18px -10px rgba(139, 50, 44, .9); }
.boton-secundario { background: #fff; color: var(--tinta); border: 1.5px solid #b9c3ca; font-size: 15px; overflow-wrap: anywhere; }
@media (hover: hover) {
	.boton-principal:hover { background: var(--rojo-oscuro); }
	.boton-secundario:hover { border-color: var(--tinta-suave); }
	.etiqueta-pieza:hover { transform: rotate(-1.5deg) translateY(-1px); }
}
.casilla-ven .boton-principal { width: 100%; }
.correo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--tinta-suave); font-size: 15px; overflow-wrap: break-word; }
.correo span { min-width: 0; }
.correo svg { width: 20px; height: 20px; fill: var(--tinta-suave); }
.correo { text-decoration: none; }
.correo u { text-underline-offset: 3px; }

/* 2 · Escríbenos */
.escribe-vias { display: grid; gap: 6px; justify-items: start; }
.escribe-vias .boton { width: 100%; }
.formulario { margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--linea-suave); display: grid; gap: 6px; }
.formulario h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.formulario label { font-size: 15px; font-weight: 600; margin-top: 6px; }
.formulario input[type=text], .formulario textarea { width: 100%; min-height: 48px; padding: 11px 13px; font: 16px/1.4 Montserrat, system-ui, sans-serif; color: var(--tinta); background: #fbfcfc; border: 1.5px solid #b9c3ca; border-radius: 10px; }
.formulario textarea { resize: vertical; }
.formulario input[type=text]:focus, .formulario textarea:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(170, 64, 57, .18); background: #fff; }
.formulario ::placeholder { color: #69757e; }
.casilla-acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; margin: 10px 0 8px !important; }
.casilla-acepto input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--rojo); flex: none; }
.formulario .boton { width: 100%; }
.nota { margin: 4px 0 0; font-size: 14px; color: var(--tinta-suave); text-align: center; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { margin: 0 0 6px; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.aviso-ok { background: #e7f4ea; color: #14532d; }
.aviso-error { background: #fdeceb; color: #7f1d1d; }

/* 3 · Qué reparamos: bandejas de piezas con compartimentos */
.bandejas { display: grid; gap: 18px; }
.bandeja h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 800; }
.bandeja ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linea); }
.bandeja li { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; font-weight: 600; line-height: 1.3; }
.bandeja li:nth-child(odd) { border-right: 1px solid var(--linea); }
.bandeja li:nth-child(even) { padding-left: 12px; }

/* 4 · Además */
.ademas { margin: 0; display: grid; }
.ademas div { padding: 11px 0; border-top: 1px solid var(--linea-suave); }
.ademas div:first-child { border-top: 0; padding-top: 0; }
.ademas dt { font-weight: 800; }
.ademas dd { margin: 2px 0 0; color: var(--tinta-suave); }

/* 5 · Llámanos */
.telefono { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 28px; font-weight: 800; color: var(--tinta); text-decoration: none; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.telefono svg { width: 26px; height: 26px; fill: var(--rojo); }
.resena { margin: 12px 0 0; color: var(--tinta-suave); font-size: 15px; }

/* Pie, sobre el tapete */
.pie { max-width: 1140px; margin: 0 auto; padding: 30px 20px 120px; color: #cfd8de; font-size: 14px; text-align: center; }
.pie p { margin: 4px 0; }
.pie a { color: #fff; }

/* Atajos fijos abajo en el móvil */
.atajos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); background: #1c252b; border-top: 1px solid rgba(255, 255, 255, .1); padding-bottom: env(safe-area-inset-bottom); }
.atajos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; touch-action: manipulation; }
.atajos a:first-child { background: var(--rojo); }
.atajos svg { width: 22px; height: 22px; fill: currentColor; }

/* Móvil estrecho: reglas más finas */
@media (max-width: 599px) {
	:root { --regla: 18px; }
	.regla-arriba span { visibility: hidden; }
	.barra { padding: 12px 14px 0; }
	.portada { padding: 18px 16px 2px; }
	.portada h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
	.portada-sub { margin-top: 10px; }
	.etiqueta-pieza { margin-top: 16px; padding: 7px 12px 7px 10px; }
	.etiqueta-nota { font-size: 19px; }
	.estado { padding: 5px 11px; font-size: 13px; }
	.barra { row-gap: 8px; }
	.iman { margin: 18px 8px 0; padding: 8px; border-radius: 18px; }
	.casilla-cab { margin-bottom: 8px; }
	.direccion { font-size: 17px; }
	.zona { margin-bottom: 12px; font-size: 15px; }
	.casilla { padding: 16px 14px 18px; }
	.pie { padding-left: 14px; padding-right: 14px; }
}

/* Ordenador: casillas en rejilla, sin atajos abajo */
@media (min-width: 900px) {
	.portada { padding-top: 56px; }
	.portada h1 { max-width: 16ch; font-size: clamp(3.6rem, 6.4vw, 5.6rem); }
	.iman { margin-top: 40px; padding: 18px; gap: 16px; grid-template-columns: 1fr 1fr; grid-template-areas: "ven ven" "escribe repara" "escribe ademas" "llama llama"; align-items: start; border-radius: 24px; }
	.casilla { padding: 24px 24px 26px; }
	.casilla-ven { grid-area: ven; }
	.ven-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; }
	.ven-mapa iframe { height: 100%; min-height: 360px; }
	.casilla-ven .boton-principal { width: auto; }
	.casilla-escribe { grid-area: escribe; align-self: stretch; }
	.casilla-repara { grid-area: repara; }
	.casilla-ademas { grid-area: ademas; }
	.casilla-llama { grid-area: llama; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 32px; }
	.casilla-llama .casilla-cab { margin: 0; }
	.casilla-llama .resena { margin: 0; }
	.escribe-vias .boton { width: auto; }
	.atajos { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); grid-template-columns: repeat(3, auto); border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); padding-bottom: 0; }
	.atajos a { flex-direction: row; gap: 8px; min-height: 48px; padding: 0 20px; font-size: 15px; }
	.atajos svg { width: 20px; height: 20px; }
	.pie { padding-bottom: 96px; }
}

@media (min-width: 1180px) {
	.plantilla { display: block; }
}
@media (min-width: 900px) {
	/* En el ordenador, la barra de contacto aparece al dejar atrás la casilla «Ven a la tienda» */
	.atajos { opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s ease-out, transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s; }
	.atajos.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s ease-out, transform .35s cubic-bezier(.16, 1, .3, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.atajos { transition: none !important; }
	.boton, .etiqueta-pieza { transition: none; }
}

/* ===== Páginas legales (mismo tapete) ===== */
.legal { max-width: 760px; margin: 28px auto 0; padding: 28px 24px 34px; background: var(--casilla); border-radius: 18px; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); }
.legal h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 6vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; }
.legal h2 { margin: 26px 0 6px; font-size: 18px; }
.legal p { margin: 0 0 10px; }
.legal small { color: var(--tinta-suave); }
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none; }
.volver svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pie-legal { padding-bottom: 40px; }