/* Muestra de diseño unificado SalvaCorp (salvacorp.com · reparaciones · tienda) */
/* Letra de reserva con el mismo ancho que DM Sans. Mientras baja DM Sans el texto se escribe con Arial ajustada a su
   medida: cuando llega la letra definitiva los renglones cortan en el mismo lugar y nada se mueve (CLS). Los porcentajes
   salen de medir un texto del sitio en cada peso (DM Sans / Arial). Donde no hay Arial se usa la letra del sistema, como antes. */
@font-face { font-family: "DM Sans Reserva"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 91.2%; ascent-override: 108.8%; descent-override: 34%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Reserva"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 93.5%; ascent-override: 106.1%; descent-override: 33.2%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Reserva"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 90.3%; ascent-override: 109.9%; descent-override: 34.3%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Reserva"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 92.3%; ascent-override: 107.5%; descent-override: 33.6%; line-gap-override: 0%; }
:root {
  --marca: #017c8d; --marca-osc: #015e6b; --marca-suave: #e3f2f4;
  --ambar: #eaa92d; --coral: #e05d3f; --indigo: #3f549f;
  --tinta: #1d1f21; --tinta-2: #4a4e52; --tinta-3: #6b7075;
  --fondo: #f5f6f7; --blanco: #fff; --borde: #e3e6e8;
  --radio: 18px; --sombra: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px rgba(16,24,32,.06);
  --sombra-alta: 0 2px 4px rgba(16,24,32,.05), 0 22px 48px rgba(1,124,141,.16);
  --ancho: 1200px; --curva: cubic-bezier(.2,.7,.2,1);
  --letra: "DM Sans", "DM Sans Reserva", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--letra); color: var(--tinta); background: var(--fondo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
/* armar.py le pone width/height reales a cada imagen (para que la página no salte al cargar). Esta regla, sin peso propio,
   hace que esas medidas solo reserven la proporción: el tamaño lo sigue dando el CSS de cada componente. */
:where(img) { width: auto; height: auto; }
a { color: inherit; text-decoration: none; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { letter-spacing: -.018em; line-height: 1.08; font-weight: 700; }
h1 { font-size: clamp(38px, 5.4vw, 62px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: 21px; letter-spacing: -.015em; line-height: 1.25; }
.acento { color: var(--marca); }
.antetitulo { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--marca); margin-bottom: 14px; display: inline-flex; gap: 10px; align-items: center; }
.antetitulo::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ambar) 0 33%, var(--coral) 33% 66%, var(--indigo) 66%); }
.bajada { color: var(--tinta-2); font-size: 19px; max-width: 620px; margin-top: 18px; }
section { padding: 96px 0; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform .25s var(--curva), box-shadow .25s var(--curva), background .25s; position: relative; overflow: hidden; cursor: pointer; border: 0; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-1 { background: var(--marca); color: #fff; box-shadow: 0 6px 18px rgba(1,124,141,.28); }
.btn-1:hover { background: var(--marca-osc); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(1,124,141,.34); }
.btn-1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--curva); }
.btn-1:hover::after { transform: translateX(120%); }
.btn-2 { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--borde); }
.btn-2:hover { box-shadow: inset 0 0 0 1.5px var(--marca); color: var(--marca); transform: translateY(-2px); }
.btn .flecha { transition: transform .25s var(--curva); }
.btn:hover .flecha { transform: translateX(4px); }

/* ---------- Encabezado común ---------- */
.encabezado { position: sticky; top: 0; z-index: 50; background: rgba(245,246,247,.78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s; }
.encabezado.con-sombra { border-color: var(--borde); background: rgba(255,255,255,.86); box-shadow: 0 6px 20px rgba(16,24,32,.05); }
.encabezado .envoltura { display: flex; align-items: center; height: 84px; gap: 28px; transition: height .3s var(--curva); }
.encabezado.con-sombra .envoltura { height: 68px; }
.logo img { height: 46px; width: auto; transition: height .3s var(--curva); }
.encabezado.con-sombra .logo img { height: 40px; }
.menu { display: flex; gap: 4px; margin: 0 auto; position: relative; }
.menu > li { list-style: none; position: relative; }
.menu > li > a, .menu > li > button { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-size: 15.5px; font-weight: 500; color: var(--tinta-2); background: none; border: 0; font-family: inherit; cursor: pointer; transition: color .2s, background .2s; }
.menu > li > a:hover, .menu > li > button:hover, .menu > li.abierto > button { color: var(--tinta); background: rgba(1,124,141,.07); }
.menu > li.actual > a, .menu > li.actual > button { color: var(--marca); font-weight: 600; }
.menu > li.actual > a::after, .menu > li.actual > button::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--marca); transform: translateX(-50%); }
.menu .chev { width: 14px; height: 14px; transition: transform .3s var(--curva); }
.menu li.abierto .chev { transform: rotate(180deg); }
.panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px) scale(.98); opacity: 0; visibility: hidden; transition: opacity .22s, transform .3s var(--curva), visibility .22s; background: var(--blanco); border-radius: 22px; box-shadow: 0 24px 60px rgba(16,24,32,.16), 0 0 0 1px var(--borde); padding: 22px; display: grid; gap: 22px; }
.menu li.abierto .panel { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.panel-repa { grid-template-columns: 1.6fr 1fr; width: 820px; }
/* El panel de Mac es ancho: centrado bajo «Mac» se salía por la izquierda en pantallas de 1280. Va anclado. */
.panel-repa { left: -150px; transform: translate(0, 8px) scale(.98); }
.panel-iph { left: -230px; transform: translate(0, 8px) scale(.98); }
.menu li.abierto .panel-repa, .menu li.abierto .panel-iph { transform: translate(0, 0) scale(1); }
.panel-iph { grid-template-columns: 1.6fr 1fr; width: 760px; }
.panel-pie { margin: 12px 0 0 10px; font-size: 13.5px; color: var(--tinta-3); }
.panel-pie a { color: var(--marca); font-weight: 600; margin-right: 12px; }
.panel-pie a:hover { text-decoration: underline; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.cajon-t { display: inline-flex; align-items: center; gap: 12px; }
.cajon-t svg { width: 22px; height: 22px; color: var(--marca); }
.panel-tienda { grid-template-columns: 1.2fr 1fr; width: 640px; }
.panel h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-3); margin: 0 0 10px 10px; }
.panel .opc { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; transition: background .2s; }
.panel .opc:hover { background: var(--fondo); }
.panel .opc:hover .ico { background: var(--marca); color: #fff; transform: scale(1.06) rotate(-4deg); }
.panel .opc b { display: block; font-size: 15px; font-weight: 600; }
.panel .opc span { font-size: 13.5px; color: var(--tinta-3); line-height: 1.4; }
.ico { width: 38px; height: 38px; border-radius: 11px; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; flex: none; transition: all .3s var(--curva); }
.ico svg { width: 19px; height: 19px; }
.panel .destacado { background: linear-gradient(150deg, var(--marca) 0%, #02606e 100%); color: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; position: relative; overflow: hidden; }
.panel .destacado img { position: absolute; right: -40px; top: 10px; width: 230px; opacity: .95; transition: transform .6s var(--curva); }
.panel .destacado:hover img { transform: translateY(-6px) rotate(-2deg); }
.panel .destacado b { font-size: 19px; position: relative; }
.panel .destacado span { color: rgba(255,255,255,.82); font-size: 14px; position: relative; }
.acciones-enc { display: flex; gap: 10px; align-items: center; }
.acciones-enc .btn { padding: 11px 20px; font-size: 15px; }
.hamburguesa { display: none; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; position: relative; }
.hamburguesa i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .3s var(--curva), opacity .2s; }
.hamburguesa i:nth-child(1) { top: 15px; } .hamburguesa i:nth-child(2) { top: 21px; } .hamburguesa i:nth-child(3) { top: 27px; }
body.menu-abierto .hamburguesa i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-abierto .hamburguesa i:nth-child(2) { opacity: 0; }
body.menu-abierto .hamburguesa i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cajon { position: fixed; inset: 64px 0 0; background: var(--blanco); z-index: 49; padding: 18px 20px 120px; overflow-y: auto; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .3s var(--curva); }
body.menu-abierto .cajon { transform: none; opacity: 1; visibility: visible; }
.cajon details { border-bottom: 1px solid var(--borde); }
.cajon summary, .cajon > a { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; font-size: 20px; font-weight: 600; list-style: none; cursor: pointer; border-bottom: 1px solid var(--borde); }
.cajon details summary { border: 0; }
.cajon summary::-webkit-details-marker { display: none; }
.cajon details[open] .chev { transform: rotate(180deg); }
.cajon .chev { width: 18px; transition: transform .3s; }
.cajon details a { display: block; padding: 10px 8px; color: var(--tinta-2); font-size: 17px; }
.cajon details div { padding-bottom: 12px; }
.sitio-indicador { font-size: 12px; color: var(--tinta-3); padding: 6px 12px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); white-space: nowrap; }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 96px; position: relative; overflow: hidden; }
.hero .envoltura { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.manchas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.manchas i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: flotar 18s ease-in-out infinite alternate; }
.manchas i:nth-child(1) { width: 520px; height: 520px; background: #9fd3da; left: -160px; top: -120px; }
.manchas i:nth-child(2) { width: 440px; height: 440px; background: #f6c3b3; right: -120px; top: 40px; animation-delay: -6s; }
.manchas i:nth-child(3) { width: 380px; height: 380px; background: #c7cff0; right: 22%; bottom: -200px; animation-delay: -12s; }
@keyframes flotar { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } 100% { transform: translate(-30px,20px) scale(.96); } }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--borde); font-size: 14px; font-weight: 500; color: var(--tinta-2); margin-bottom: 24px; }
.chip .punto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: latido 2s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.hero .botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.cifras { display: flex; gap: 36px; margin-top: 44px; flex-wrap: wrap; }
.cifras b { display: block; font-size: 32px; font-weight: 700; color: var(--marca); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifras span { font-size: 14px; color: var(--tinta-3); }
.hero-visual { position: relative; aspect-ratio: 1 / .9; }
.hero-visual .tarjeta-foto { position: absolute; background: var(--blanco); border-radius: 26px; box-shadow: var(--sombra-alta); overflow: hidden; transition: transform .2s ease-out; will-change: transform; }
.hero-visual .principal { inset: 6% 12% 14% 0; display: grid; place-items: center; padding: 30px; }
.hero-visual .principal img { width: 100%; animation: levitar 6s ease-in-out infinite; }
@keyframes levitar { 50% { transform: translateY(-10px); } }
.hero-visual .mini { width: 34%; aspect-ratio: 1; padding: 16px; display: grid; place-items: center; }
.hero-visual .mini.a { right: 0; top: 0; }
.hero-visual .mini.b { right: 4%; bottom: 0; }
.burbuja { position: absolute; left: -4%; bottom: 6%; background: var(--blanco); border-radius: 16px; padding: 12px 16px; box-shadow: var(--sombra-alta); display: flex; gap: 12px; align-items: center; font-size: 14px; animation: levitar 7s ease-in-out infinite; animation-delay: -2s; }
.burbuja .estrellas { color: var(--ambar); letter-spacing: 2px; }
.burbuja b { font-size: 22px; }

/* ---------- Puertas (qué necesitás) ---------- */
.puertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.puerta { position: relative; border-radius: 26px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; color: #fff; isolation: isolate; }
.puerta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); }
.puerta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,18,22,.05) 0%, rgba(8,18,22,.35) 40%, rgba(8,18,22,.9) 100%); }
.puerta:hover img { transform: scale(1.07); }
.puerta h3 { font-size: 28px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.puerta p { color: rgba(255,255,255,.85); font-size: 16px; margin: 8px 0 18px; }
.puerta .ir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); padding: 10px 18px; border-radius: 999px; align-self: flex-start; transition: background .3s, gap .3s; }
.puerta:hover .ir { background: #fff; color: var(--marca); gap: 14px; }
.puerta .sub { position: absolute; top: 22px; left: 22px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.9); color: var(--marca); padding: 6px 12px; border-radius: 999px; }

/* ---------- Tarjetas ---------- */
.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); position: relative; transition: transform .35s var(--curva), box-shadow .35s var(--curva); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(140deg, var(--marca), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; }
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.tarjeta:hover::after { opacity: 1; }
.tarjeta:hover .ico { background: var(--marca); color: #fff; transform: rotate(-6deg) scale(1.08); }
.tarjeta p { color: var(--tinta-2); font-size: 15.5px; }
.tarjeta .mas { margin-top: auto; padding-top: 8px; color: var(--marca); font-weight: 600; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.tarjeta .mas .flecha { transition: transform .3s var(--curva); }
.tarjeta:hover .mas .flecha { transform: translateX(5px); }
.tarjeta .urgente { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 700; color: var(--coral); background: #fdeee9; padding: 4px 10px; border-radius: 999px; }
.producto { padding: 0; }
.producto .foto { aspect-ratio: 4/3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.producto .foto img { width: 78%; transition: transform .6s var(--curva); }
.producto:hover .foto img { transform: scale(1.06) translateY(-4px); }
.producto .cuerpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.precio { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.precio small { font-size: 13px; color: var(--tinta-3); font-weight: 500; margin-left: 4px; }
.etiqueta { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--marca-suave); color: var(--marca); }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; counter-reset: paso; position: relative; }
.paso { background: var(--blanco); border-radius: var(--radio); padding: 30px; box-shadow: var(--sombra); position: relative; }
.paso::before { counter-increment: paso; content: counter(paso); width: 46px; height: 46px; border-radius: 14px; background: var(--tinta); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 19px; margin-bottom: 18px; }
.paso p { color: var(--tinta-2); margin-top: 8px; font-size: 15.5px; }
.linea-pasos { position: absolute; top: 53px; left: 8%; right: 8%; height: 2px; background: var(--borde); z-index: 0; overflow: hidden; }
.linea-pasos i { position: absolute; inset: 0; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--curva) .3s; }
.visible .linea-pasos i, .linea-pasos.visible i { transform: scaleX(1); }
.paso { z-index: 1; }

/* ---------- Franja oscura / opiniones ---------- */
.oscura { background: #0f2a2f; color: #fff; border-radius: 32px; margin: 0 24px; padding: 88px 0; position: relative; overflow: hidden; }
.oscura .antetitulo { color: #7fd0da; }
.oscura .bajada { color: rgba(255,255,255,.75); }
.oscura::before { content: ""; position: absolute; width: 600px; height: 600px; right: -200px; top: -260px; background: radial-gradient(circle, rgba(1,124,141,.55), transparent 65%); }
.opiniones { display: flex; gap: 20px; margin-top: 44px; animation: desfile 40s linear infinite; width: max-content; }
.opiniones:hover { animation-play-state: paused; }
.carril { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes desfile { to { transform: translateX(-50%); } }
.opinion { width: 360px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 24px; flex: none; }
.opinion .estrellas { color: var(--ambar); letter-spacing: 3px; }
.opinion p { color: rgba(255,255,255,.88); font-size: 15.5px; margin: 10px 0 14px; }
.opinion small { color: rgba(255,255,255,.6); }

/* ---------- Ubicación + CTA ---------- */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.mapa { border-radius: 26px; overflow: hidden; box-shadow: var(--sombra-alta); aspect-ratio: 4/3; }
.mapa img { width: 100%; height: 100%; object-fit: cover; }
.datos li { list-style: none; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.datos { padding: 0; margin-top: 24px; }
.cta { text-align: center; background: linear-gradient(140deg, var(--marca), #02505b); color: #fff; border-radius: 32px; padding: 80px 24px; position: relative; overflow: hidden; }
.cta h2 { max-width: 760px; margin: 0 auto; }
.cta p { color: rgba(255,255,255,.82); margin: 16px auto 30px; max-width: 560px; }
.cta .btn-2 { box-shadow: none; }
.cta::before, .cta::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.12); animation: girar 30s linear infinite; }
.cta::before { width: 520px; height: 520px; left: -180px; top: -260px; }
.cta::after { width: 380px; height: 380px; right: -120px; bottom: -200px; animation-direction: reverse; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Blog ---------- */
.notas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.nota { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s; }
.nota:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.nota .foto { aspect-ratio: 16/10; overflow: hidden; }
.nota .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
.nota:hover .foto img { transform: scale(1.05); }
.nota div { padding: 20px 22px 24px; }
.nota small { color: var(--marca); font-weight: 600; font-size: 13px; }
.nota h3 { font-size: 18px; margin-top: 6px; }

/* ---------- Pie común ---------- */
.pie { background: #0d1416; color: rgba(255,255,255,.72); margin-top: 96px; padding: 72px 0 28px; font-size: 15px; }
.pie .cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.pie h5 { color: #fff; font-size: 14px; margin-bottom: 14px; letter-spacing: .02em; }
.pie a { display: block; padding: 5px 0; transition: color .2s, transform .2s; }
.pie a:hover { color: #fff; transform: translateX(3px); }
.pie .logo img { filter: brightness(0) invert(1); margin-bottom: 16px; }
.pie .base { padding-right: 76px; border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 10px; }
.franja-logo { height: 4px; background: linear-gradient(90deg, var(--ambar) 0 33%, var(--coral) 33% 66%, var(--indigo) 66%); }

/* WhatsApp flotante + barra celular */
.wa-flotante { position: fixed; right: 24px; bottom: 24px; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(37,211,102,.4); z-index: 40; transition: transform .3s var(--curva); }
.wa-flotante:hover { transform: scale(1.08) rotate(-6deg); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: onda 2.4s 3; }
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.barra-cel { display: none; }

/* Aviso de muestra */
.aviso-muestra { background: var(--tinta); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; }
.aviso-muestra a { text-decoration: underline; margin: 0 6px; }
.aviso-muestra a.este { color: #7fd0da; font-weight: 700; text-decoration: none; }

/* ---------- Animaciones de entrada ---------- */
.js [data-entra] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--curva), transform .9s var(--curva), filter .9s var(--curva); transition-delay: var(--retraso, 0s); }
.js [data-entra="izq"] { transform: translateX(-36px); }
.js [data-entra="der"] { transform: translateX(36px); }
.js [data-entra="zoom"] { transform: scale(.94); }
.js [data-entra].visible { opacity: 1; transform: none; filter: none; }
.titulo-palabras .p { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.titulo-palabras .p > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--curva); transition-delay: calc(var(--i) * 70ms + .1s); }
.titulo-palabras.visible .p > span, .no-js .titulo-palabras .p > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-entra] { opacity: 1; transform: none; filter: none; }
  .titulo-palabras .p > span { transform: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 980px) {
  .menu, .acciones-enc .btn, .sitio-indicador { display: none; }
  .hamburguesa { display: block; margin-left: auto; }
  .encabezado .envoltura { height: 64px; }
  .hero .envoltura, .dos { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 64px; }
  .hero-visual { max-width: 460px; width: 100%; margin: 0 auto; }
  .puertas, .grilla, .pasos, .notas { grid-template-columns: 1fr; }
  .puerta { min-height: 300px; }
  .linea-pasos { display: none; }
  section { padding: 64px 0; }
  .oscura, .cta { border-radius: 24px; margin: 0 12px; }
  .pie .cols { grid-template-columns: 1fr 1fr; }
  .pie .cols > div:first-child { grid-column: 1 / -1; }
  .wa-flotante { display: none; }
  .barra-cel { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; padding: 8px; border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(16,24,32,.15); transform: translateY(120%); transition: transform .4s var(--curva); }
  .barra-cel.visible { transform: none; }
  .barra-cel .btn { flex: 1; justify-content: center; padding: 13px 10px; font-size: 15px; }
  .pie { padding-bottom: 100px; }
  .cifras { gap: 24px; }
  .opinion { width: 290px; }
  body { font-size: 16px; }
  .bajada { font-size: 17px; }
}

/* Selector Mac / iPhone */
.selector { display: inline-flex; background: var(--blanco); border-radius: 999px; padding: 5px; box-shadow: inset 0 0 0 1px var(--borde); position: relative; margin-top: 26px; }
.selector button { position: relative; z-index: 1; font: inherit; font-weight: 600; font-size: 16px; padding: 11px 26px; border: 0; background: none; border-radius: 999px; cursor: pointer; color: var(--tinta-2); display: inline-flex; gap: 8px; align-items: center; transition: color .3s; }
.selector button svg { width: 18px; height: 18px; }
.selector button.activo { color: #fff; }
.selector .fondo-sel { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--tinta); transition: transform .45s var(--curva), width .45s var(--curva); }
.grupo-sel { display: none; }
.grupo-sel.activo { display: grid; }
.grupo-sel.activo > * { animation: subir .6s var(--curva) both; animation-delay: calc(var(--n, 0) * 60ms); }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.precios-modelo { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.precios-modelo button { font: inherit; font-weight: 600; width: 58px; height: 58px; border-radius: 16px; border: 0; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; font-size: 18px; transition: all .25s var(--curva); }
.precios-modelo button:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.precios-modelo button.activo { background: var(--marca); color: #fff; box-shadow: 0 8px 20px rgba(1,124,141,.3); }
.cotiza { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cotiza .tarjeta b { font-size: 30px; letter-spacing: -.02em; }
@media (max-width: 980px) { .pie .cols { grid-template-columns: 1fr 1fr; } .cotiza { grid-template-columns: 1fr; } .selector button { padding: 10px 18px; } }

/* ---- Reparaciones ---- */
/* Páginas de reparación de Mac y de iPhone (fuente/paginas/mac*.html, iphone.html, etc.). Todo con prefijo r-. */
body[data-sitio="mac"] main [id], body[data-sitio="iphone"] main [id] { scroll-margin-top: 92px; }
.r-sec { padding: 80px 0; }
.r-sec.pegada { padding-top: 0; }
.r-blanca { background: var(--blanco); }
.r-centro { text-align: center; }
.r-centro .bajada { margin-left: auto; margin-right: auto; }

/* Calificación de Google (dato real: 4,8 · 277 opiniones) */
.r-calif { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--borde); font-size: 14px; color: var(--tinta-2); transition: box-shadow .25s, transform .25s var(--curva); }
.r-calif:hover { box-shadow: inset 0 0 0 1.5px var(--marca); transform: translateY(-2px); }
.r-calif b { background: var(--tinta); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 14px; }
.r-calif i { font-style: normal; color: var(--ambar); letter-spacing: 1px; }

/* Franja de urgencia */
.r-alerta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #fdeee9; color: #7a2a17; border-radius: 22px; padding: 18px 18px 18px 24px; margin-top: -40px; position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(224,93,63,.12); }
.r-alerta p { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.r-alerta .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; animation: r-alarma 1.6s infinite; }
@keyframes r-alarma { 0% { box-shadow: 0 0 0 0 rgba(224,93,63,.55); } 70% { box-shadow: 0 0 0 10px rgba(224,93,63,0); } 100% { box-shadow: 0 0 0 0 rgba(224,93,63,0); } }
.r-alerta .btn { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(224,93,63,.3); }
.r-alerta .btn:hover { transform: translateY(-2px); background: #c94a2e; }

/* Ficha: precio · plazo · garantía */
.r-ficha { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borde); border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); margin-top: 40px; }
.r-ficha.tres { grid-template-columns: repeat(3, 1fr); }
.r-ficha > div { background: var(--blanco); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 4px; }
.r-ficha small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.r-ficha b { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.r-ficha span { font-size: 14.5px; color: var(--tinta-2); line-height: 1.45; }
.r-ficha .destaca b { color: var(--marca); }

/* Nota / aviso */
.r-nota { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 22px; border-radius: 16px; background: var(--marca-suave); color: var(--tinta-2); font-size: 15.5px; max-width: 860px; }
.r-nota::before { content: "i"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--marca); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; font-family: Georgia, serif; }
.r-nota.ambar { background: #fdf3df; }
.r-nota.ambar::before { content: "!"; background: var(--ambar); font-family: var(--letra); }
.r-nota.coral { background: #fdeee9; color: #7a2a17; }
.r-nota.coral::before { content: "!"; background: var(--coral); font-family: var(--letra); }
.r-nota a { color: var(--marca); font-weight: 600; }

/* Chips de síntomas */
.r-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; }
.r-chips li { list-style: none; padding: 10px 18px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); font-weight: 500; font-size: 15.5px; transition: transform .25s var(--curva), box-shadow .25s; }
.r-chips li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--marca); }

/* Listas con tilde y cruz */
.r-lista { padding: 0; margin-top: 18px; }
.r-lista li { list-style: none; position: relative; padding: 11px 0 11px 36px; border-bottom: 1px solid var(--borde); color: var(--tinta-2); font-size: 16px; }
.r-lista li:last-child { border-bottom: 0; }
.r-lista li::before { content: ""; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: var(--marca-suave); }
.r-lista li::after { content: ""; position: absolute; left: 8px; top: 18px; width: 5px; height: 9px; border: solid var(--marca); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.r-lista.no li::before { background: #fdeee9; }
.r-lista.no li::after { content: "×"; border: 0; transform: none; left: 0; top: 11px; width: 22px; height: auto; text-align: center; color: var(--coral); font-weight: 700; font-size: 18px; line-height: 22px; }
.r-lista b { color: var(--tinta); }

/* Dos tarjetas enfrentadas (hacé / no hagas, otros / nosotros) */
.r-sino { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.r-sino > div { background: var(--blanco); border-radius: 22px; padding: 30px; box-shadow: var(--sombra); }
.r-sino h3 { display: flex; align-items: center; gap: 12px; }
.r-sino .ico.no { background: #fdeee9; color: var(--coral); }
.r-sino .gris { background: transparent; box-shadow: inset 0 0 0 1.5px var(--borde); }
.r-sino .gris .r-lista li { color: var(--tinta-3); }

/* Texto largo (lo que viene de Wix, para Google) */
.r-texto { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; align-items: start; }
.r-texto > aside { position: sticky; top: 104px; }
.r-texto > aside h2 { font-size: clamp(28px, 3.2vw, 40px); }
.r-texto > aside img { margin-top: 26px; border-radius: 22px; box-shadow: var(--sombra-alta); background: #fff; }
.r-cuerpo > p { font-size: 18px; color: var(--tinta-2); max-width: 68ch; }
.r-cuerpo > p + p { margin-top: 1em; }
.r-cuerpo > h3 { margin: 36px 0 8px; font-size: 22px; }
.r-cuerpo > h3:first-child { margin-top: 0; }
.r-destacado { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 4px solid; border-image: linear-gradient(var(--ambar), var(--coral), var(--indigo)) 1; font-size: 21px; font-weight: 600; line-height: 1.4; color: var(--tinta); max-width: 60ch; }
.r-columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.r-columnas > div { background: var(--blanco); border-radius: 22px; padding: 28px; box-shadow: var(--sombra); }
.r-columnas h3 { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.r-columnas .r-lista li { font-size: 15.5px; padding-top: 9px; padding-bottom: 9px; }
.r-columnas .r-lista li::before { top: 10px; }
.r-columnas .r-lista li::after { top: 15px; }
.r-columnas .r-lista a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(1,124,141,.35); text-underline-offset: 3px; }
.r-columnas .r-lista a:hover { color: var(--marca); }

/* Pasos de a cuatro y línea de tiempo vertical */
.grilla.r-cuatro-tarj { grid-template-columns: repeat(2, 1fr); }
.pasos.r-cuatro { grid-template-columns: repeat(4, 1fr); }
.r-tiempo { margin-top: 44px; padding: 0; position: relative; max-width: 820px; counter-reset: rt; }
.r-tiempo::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px; background: var(--borde); }
.r-tiempo li { list-style: none; position: relative; padding: 0 0 30px 76px; }
.r-tiempo li::before { counter-increment: rt; content: counter(rt); position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 15px; background: var(--blanco); box-shadow: inset 0 0 0 2px var(--marca); color: var(--marca); font-weight: 700; font-size: 19px; display: grid; place-items: center; transition: background .4s, color .4s; }
.r-tiempo li.visible::before { background: var(--marca); color: #fff; }
.r-tiempo h3 { padding-top: 10px; }
.r-tiempo p { color: var(--tinta-2); margin-top: 6px; }

/* Preguntas frecuentes: acordeón con altura animada (assets/reparaciones.js) */
.r-faq { margin-top: 40px; display: grid; gap: 12px; max-width: 880px; }
.r-faq details { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); transition: box-shadow .35s var(--curva); }
.r-faq details[open] { box-shadow: var(--sombra-alta); }
.r-faq summary { list-style: none; cursor: pointer; padding: 21px 70px 21px 26px; font-weight: 600; font-size: 17.5px; line-height: 1.4; position: relative; border-radius: 18px; transition: color .25s; background: radial-gradient(circle 21px at calc(100% - 37px) 50%, var(--marca-suave) 97%, transparent 100%) no-repeat; }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary:hover { color: var(--marca); }
.r-faq summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.r-faq summary::before, .r-faq summary::after { content: ""; position: absolute; right: 30px; top: calc(50% - 1px); width: 14px; height: 2px; border-radius: 2px; background: var(--marca); transition: transform .4s var(--curva); }
.r-faq summary::after { transform: rotate(90deg); }
.r-faq details[open] > summary::after { transform: rotate(0deg); }
.r-faq .r-resp { overflow: hidden; }
.r-faq .r-resp > div { padding: 0 26px 24px; color: var(--tinta-2); font-size: 16px; }
.r-faq .r-resp p + p { margin-top: .7em; }
.r-faq .r-resp a { color: var(--marca); font-weight: 600; }
.r-faq .r-resp ul { padding-left: 20px; margin-top: 6px; }

/* Cotizador (precio por modelo de iPhone, batería de MacBook) */
.r-cotiza { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; background: var(--blanco); border-radius: 30px; padding: 36px; box-shadow: var(--sombra-alta); margin-top: 40px; position: relative; overflow: hidden; }
.r-cotiza::before { content: ""; position: absolute; width: 420px; height: 420px; right: -160px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(1,124,141,.10), transparent 65%); pointer-events: none; }
.r-cotiza h3 { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; }
.r-gen { display: flex; flex-wrap: wrap; gap: 8px; }
.r-gen button { font: inherit; font-weight: 700; font-size: 18px; min-width: 58px; height: 58px; padding: 0 12px; border-radius: 16px; border: 0; background: var(--fondo); color: var(--tinta); cursor: pointer; transition: transform .25s var(--curva), background .25s, color .25s, box-shadow .25s; }
.r-gen button:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.r-gen button[aria-pressed="true"] { background: var(--marca); color: #fff; box-shadow: 0 8px 20px rgba(1,124,141,.3); }
.r-gen.chicos { margin-top: 10px; }
.r-gen.chicos button { height: 40px; font-size: 14.5px; font-weight: 600; border-radius: 999px; padding: 0 14px; }
.r-gen .r-etq { align-self: center; font-size: 13.5px; color: var(--tinta-3); margin-right: 4px; }
.r-var { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 18px; background: var(--fondo); margin-top: 22px; }
.r-var button { position: relative; z-index: 1; font: inherit; font-weight: 600; font-size: 15px; padding: 10px 16px; border: 0; border-radius: 12px; background: none; color: var(--tinta-2); cursor: pointer; transition: color .3s; }
.r-var button[aria-pressed="true"] { color: var(--tinta); }
.r-var .r-indic { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 12px; background: var(--blanco); box-shadow: 0 2px 8px rgba(16,24,32,.1); transition: transform .45s var(--curva), width .45s var(--curva), height .45s var(--curva); }
.r-resultado { display: flex; flex-direction: column; gap: 14px; position: relative; }
.r-modelo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.r-modelo small { display: block; font-size: 14px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; margin-top: 2px; }
.r-montos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r-monto { border-radius: 20px; padding: 20px; background: var(--fondo); position: relative; overflow: hidden; }
.r-monto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(1,124,141,.12) 50%, transparent 70%); transform: translateX(-110%); }
.r-monto.r-brilla::after { animation: r-barrido .8s var(--curva); }
@keyframes r-barrido { to { transform: translateX(110%); } }
.r-monto .ico { margin-bottom: 12px; }
.r-monto > span:not(.ico) { display: block; font-size: 14px; color: var(--tinta-3); font-weight: 500; }
.r-monto b { display: block; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.r-monto.uno { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; }
.r-incluye { font-size: 14px; color: var(--tinta-3); }
.r-resultado .btn { justify-content: center; }
.r-estado { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #e6f6ec; color: #17803d; transition: background .3s, color .3s; }
.r-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.r-estado.pedido { background: #fdf3df; color: #9a6a10; }
.r-foto-bat { aspect-ratio: 16/10; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--borde); display: grid; place-items: center; overflow: hidden; }
.r-foto-bat img { width: 82%; max-height: 92%; object-fit: contain; transition: opacity .3s, transform .5s var(--curva); }
.r-foto-bat img.r-sale { opacity: 0; transform: scale(.96); }
.r-lista-modelos { display: grid; gap: 8px; margin-top: 18px; max-height: 430px; overflow: auto; padding: 2px 6px 2px 2px; }
.r-lista-modelos button { font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--fondo); cursor: pointer; transition: background .25s, box-shadow .25s, transform .25s var(--curva); }
.r-lista-modelos button[hidden] { display: none; }
.r-lista-modelos button:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.r-lista-modelos button[aria-pressed="true"] { background: var(--marca-suave); box-shadow: inset 0 0 0 1.5px var(--marca); }
.r-lista-modelos .r-cod { flex: none; }
.r-lista-modelos span:not(.r-cod) { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.35; }
.r-lista-modelos i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.r-lista-modelos i.pedido { background: var(--ambar); }
.r-leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-3); margin-top: 12px; }
.r-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.r-leyenda span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.r-leyenda span.pedido::before { background: var(--ambar); }

/* Código de modelo (A1466) */
.r-cod { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 7px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); color: var(--tinta-2); font-variant-numeric: tabular-nums; transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--curva); }
.r-cod.stock { box-shadow: inset 0 0 0 1px #9fdcb5; color: #17803d; }
.r-cod.r-coincide { background: var(--marca); color: #fff; box-shadow: none; transform: scale(1.08); }

/* Tabla de precios completa */
.r-tabla { margin-top: 22px; max-width: 880px; }
.r-tabla > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--marca); list-style: none; padding: 8px 0; }
.r-tabla > summary::-webkit-details-marker { display: none; }
.r-tabla > summary::after { content: "↓"; transition: transform .3s var(--curva); }
.r-tabla[open] > summary::after { transform: rotate(180deg); }
.r-tabla .r-resp > div { padding: 8px 0 0; }
.r-tabla table { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); font-size: 15.5px; font-variant-numeric: tabular-nums; }
.r-tabla th, .r-tabla td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--borde); }
.r-tabla th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); background: var(--fondo); }
.r-tabla td + td, .r-tabla th + th { text-align: right; }
.r-tabla tr.grupo td { background: var(--marca-suave); color: var(--marca); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; }
.r-tabla tbody tr:not(.grupo):hover td { background: #f8fbfb; }

/* Niveles de precio cerrado (placas) y grupos (teclados) */
.r-niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.r-nivel { background: var(--blanco); border-radius: 24px; padding: 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; position: relative; transition: transform .35s var(--curva), box-shadow .35s, opacity .35s; }
.r-nivel .r-usd { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--marca); }
.r-nivel .r-usd small { font-size: 15px; font-weight: 600; color: var(--tinta-3); letter-spacing: 0; margin-left: 6px; }
.r-nivel p { color: var(--tinta-2); font-size: 15.5px; }
.r-nivel .r-cods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.r-nivel .btn { margin-top: auto; justify-content: center; padding: 13px 20px; font-size: 15px; }
.r-nivel .r-pie { font-size: 13.5px; color: var(--tinta-3); }
.r-niveles.filtrando .r-nivel { opacity: .45; }
.r-niveles.filtrando .r-nivel.r-elegida { opacity: 1; transform: translateY(-6px); box-shadow: var(--sombra-alta), inset 0 0 0 2px var(--marca); }
.r-buscar { display: flex; align-items: center; gap: 10px; max-width: 460px; margin-top: 26px; background: var(--blanco); border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: inset 0 0 0 1.5px var(--borde); transition: box-shadow .25s; }
.r-buscar:focus-within { box-shadow: inset 0 0 0 2px var(--marca), 0 8px 24px rgba(1,124,141,.12); }
.r-buscar svg { width: 18px; height: 18px; color: var(--tinta-3); flex: none; }
.r-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; background: none; padding: 8px 0; }
.r-buscar output { font-size: 13.5px; font-weight: 600; color: var(--marca); padding-right: 12px; white-space: nowrap; }
.r-ayuda { font-size: 14px; color: var(--tinta-3); margin-top: 10px; max-width: 620px; }

/* Servicios de iPhone (con ancla cada uno) */
.r-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.r-servicios .tarjeta { scroll-margin-top: 100px; }
.r-servicios .tarjeta .r-acc { margin-top: auto; padding-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.r-servicios .tarjeta .r-acc a { font-weight: 600; font-size: 15px; color: var(--marca); display: inline-flex; gap: 6px; align-items: center; }
.r-servicios .tarjeta .r-acc a svg { width: 17px; height: 17px; color: #1faa53; }
.r-servicios .tarjeta .r-acc a:hover { text-decoration: underline; }
.r-servicios .tarjeta:target { animation: r-marcar 2.2s var(--curva); }
@keyframes r-marcar { 0%, 40% { box-shadow: 0 0 0 3px var(--marca), var(--sombra-alta); transform: translateY(-6px); } 100% { box-shadow: var(--sombra); transform: none; } }
.r-precio-chico { font-size: 14px; color: var(--tinta-3); }
.r-precio-chico b { color: var(--tinta); }

/* Servicios con turno (Wix: consulta, urgencia, secado, sesión) */
.r-turnos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.r-turno { background: var(--blanco); border-radius: 20px; padding: 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; transition: transform .35s var(--curva), box-shadow .35s; }
.r-turno:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.r-turno b { font-size: 24px; letter-spacing: -.02em; color: var(--marca); }
.r-turno h3 { font-size: 18px; }
.r-turno p { font-size: 14.5px; color: var(--tinta-2); }
.r-turno .mas { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 14.5px; color: var(--marca); }

/* Relacionadas y «¿Es un iPhone?» */
.r-rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.r-rel .tarjeta { padding: 22px; gap: 8px; }
.r-rel .tarjeta h3 { font-size: 18px; }
.r-rel .tarjeta p { font-size: 14.5px; }
.r-otro { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-top: 20px; padding: 22px 26px; border-radius: 24px; background: var(--tinta); color: #fff; overflow: hidden; position: relative; isolation: isolate; transition: transform .35s var(--curva); }
.r-otro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 30%, rgba(1,124,141,.65), transparent 55%); transition: opacity .4s; }
.r-otro:hover { transform: translateY(-4px); }
.r-otro img { width: 76px; height: 76px; object-fit: cover; border-radius: 18px; background: #fff; }
.r-otro b { font-size: 21px; display: block; }
.r-otro span { color: rgba(255,255,255,.75); font-size: 15px; }
.r-otro .ir { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; background: rgba(255,255,255,.14); padding: 11px 18px; border-radius: 999px; white-space: nowrap; transition: background .3s, color .3s, gap .3s; }
.r-otro:hover .ir { background: #fff; color: var(--tinta); gap: 14px; }

/* Ubicación compacta (antes del llamado final) */
.r-donde { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--borde); border-radius: 22px; overflow: hidden; margin: 0 0 24px; box-shadow: var(--sombra); }
.r-donde > div { background: var(--blanco); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--tinta-2); }
.r-donde b { display: block; color: var(--tinta); font-size: 15.5px; }
.r-donde a { color: var(--marca); font-weight: 600; }
.cta .r-chico { font-size: 14.5px; margin: 18px auto 0; color: rgba(255,255,255,.7); }
.cta .r-chico a { color: #fff; text-decoration: underline; }

/* Foto ancha con texto */
.r-banda-foto { position: relative; border-radius: 30px; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; padding: 40px; color: #fff; isolation: isolate; }
.r-banda-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.r-banda-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,18,22,.88) 0%, rgba(8,18,22,.55) 55%, rgba(8,18,22,.1) 100%); }
.r-banda-foto > div { max-width: 560px; }
.r-banda-foto p { color: rgba(255,255,255,.82); margin-top: 12px; }
.r-banda-foto .antetitulo { color: #7fd0da; }

@media (prefers-reduced-motion: reduce) {
  .r-tiempo li::before { background: var(--marca); color: #fff; }
}
@media (max-width: 980px) {
  .r-sec { padding: 56px 0; }
  .r-ficha, .r-ficha.tres { grid-template-columns: 1fr 1fr; }
  .r-ficha.tres > div:last-child { grid-column: 1 / -1; }
  .r-ficha b { font-size: 22px; }
  .r-ficha > div { padding: 18px; }
  .r-sino, .r-texto, .r-columnas, .r-niveles, .r-servicios, .r-cotiza, .pasos.r-cuatro, .grilla.r-cuatro-tarj { grid-template-columns: 1fr; }
  .r-texto { gap: 28px; grid-template-columns: minmax(0, 1fr); }
  .r-texto > * { min-width: 0; }
  .pasos.r-pasos .paso { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 20px; }
  .pasos.r-pasos .paso::before { margin: 0; grid-row: span 2; }
  .pasos.r-pasos .paso h3 { align-self: center; }
  .pasos.r-pasos .paso p { grid-column: 2; margin-top: 4px; }
  .pasos.r-pasos { gap: 12px; }
  .r-texto > aside { position: static; }
  .r-texto > aside img { max-width: 360px; }
  .r-cuerpo > p { font-size: 17px; }
  .r-cotiza { padding: 22px 18px; gap: 26px; border-radius: 24px; }
  .r-gen button { min-width: 50px; height: 50px; font-size: 17px; border-radius: 14px; }
  .r-lista-modelos { max-height: 300px; }
  .r-turnos, .r-rel { grid-template-columns: 1fr 1fr; }
  .r-donde { grid-template-columns: 1fr; }
  .r-otro { grid-template-columns: auto 1fr; padding: 18px; gap: 16px; }
  .r-otro .ir { grid-column: 1 / -1; justify-content: center; }
  .r-otro img { width: 60px; height: 60px; }
  .r-alerta { margin-top: -24px; padding: 16px; }
  .r-alerta .btn { width: 100%; justify-content: center; }
  .r-banda-foto { padding: 26px; min-height: 320px; }
  .r-faq summary { font-size: 16.5px; padding: 18px 62px 18px 20px; }
  .r-faq .r-resp > div { padding: 0 20px 20px; }
  .r-tabla th, .r-tabla td { padding: 10px 12px; font-size: 14.5px; }
}
@media (max-width: 560px) {
  .r-turnos, .r-rel { grid-template-columns: 1fr; }
  .r-montos { grid-template-columns: 1fr; }
  .r-nivel .r-usd { font-size: 38px; }
}
/* Reescritura nov-2026 (inicio, /mac, puertas por equipo, páginas de falla): solo clases nuevas */
.r-link { color: var(--marca); font-weight: 600; }
.r-link:hover { text-decoration: underline; }
.r-rel.tres { grid-template-columns: repeat(3, 1fr); }
.puertas.r-dos { grid-template-columns: 1fr 1fr; }
.puertas.r-dos .puerta { min-height: 300px; }
.grilla.r-ocho { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grilla.r-ocho .tarjeta { padding: 24px; }
.r-atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.r-atajos > a { display: flex; align-items: center; gap: 16px; background: var(--blanco); border-radius: 20px; padding: 20px 24px; box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s; }
.r-atajos > a:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.r-atajos > a > div { flex: 1; }
.r-atajos b { display: block; font-size: 17.5px; }
.r-atajos div span { color: var(--tinta-2); font-size: 15px; }
.r-atajos .flecha { color: var(--marca); font-weight: 700; transition: transform .3s var(--curva); }
.r-atajos > a:hover .flecha { transform: translateX(5px); }
.r-confianza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.r-confianza > * { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; color: #fff; transition: background .3s, transform .35s var(--curva); }
.r-confianza > a:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.r-confianza b { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.r-confianza span { color: rgba(255,255,255,.72); font-size: 15px; }
.r-confianza a span { color: #7fd0da; }
@media (max-width: 980px) {
  .r-rel.tres, .r-confianza { grid-template-columns: 1fr 1fr; }
  .r-rel.tres > :last-child { grid-column: 1 / -1; }
  .grilla.r-ocho { grid-template-columns: 1fr 1fr; }
  .puertas.r-dos, .r-atajos { grid-template-columns: 1fr; }
  .puertas.r-dos .puerta { min-height: 240px; }
}
@media (max-width: 560px) {
  .r-rel.tres, .r-confianza, .grilla.r-ocho { grid-template-columns: 1fr; }
  .r-rel.tres > :last-child { grid-column: auto; }
}
/* Páginas con buscador de modelo: batería, teclado, placa e iPhone (generadores/colocados.py) */
.r-cifras b { font-size: 27px; }
.r-foto-hero img { max-height: 100%; object-fit: contain; }
.r-monto.uno > div > span { display: block; font-size: 14px; font-weight: 500; color: var(--tinta-3); }
.r-lista-corta { max-width: 640px; }
.r-cruce { font-size: 14px; color: var(--tinta-3); margin-top: 14px; }
.r-cruce a { color: var(--marca); font-weight: 600; }
.cta .r-cta-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.r-ficha + .r-cotiza { margin-top: 24px; }
.r-cotiza .r-ayuda a { color: var(--marca); font-weight: 600; }
@media (min-width: 981px) { .r-rel.r-tres { grid-template-columns: repeat(3, 1fr); } }
/* ---- fin Reparaciones ---- */
/* ---- Blog e institucionales ---- */
/* Prefijos: bl- (blog) e in- (institucionales). Lo arman generadores/blog.py, generadores/institucionales.py y fuente/paginas/{empresas,contacto,...}.html */

/* Portada del blog y listados */
.bl-portada { padding: 56px 0 80px; }
.bl-cab h1 { font-size: clamp(36px, 5.2vw, 58px); letter-spacing: -.028em; }
.bl-cab .bajada { margin-top: 14px; }
.bl-chips { display: flex; gap: 8px; margin: 34px -24px 30px; padding: 4px 24px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 24px; }
.bl-chips::-webkit-scrollbar { display: none; }
.bl-chips a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); font-weight: 600; font-size: 15px; color: var(--tinta-2); transition: background .35s var(--curva), color .35s, box-shadow .35s, transform .25s var(--curva); }
.bl-chips a small { font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; background: var(--fondo); color: var(--tinta-3); padding: 1px 7px; border-radius: 999px; transition: background .35s, color .35s; }
.bl-chips a:hover { box-shadow: inset 0 0 0 1.5px var(--marca); color: var(--marca); transform: translateY(-2px); }
.bl-chips a.activa { background: var(--tinta); color: #fff; box-shadow: 0 8px 20px rgba(16,24,32,.18); }
.bl-chips a.activa small { background: rgba(255,255,255,.16); color: #fff; }
.bl-cuenta { font-size: 14px; color: var(--tinta-3); font-weight: 500; margin: 0 0 16px; }
.bl-zona { transition: opacity .2s ease, transform .2s ease; }
.bl-zona.bl-saliendo { opacity: 0; transform: translateY(10px); }
.bl-zona.bl-cargando { cursor: progress; }

/* Nota destacada (tipo revista) */
.bl-destacada { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--blanco); border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); margin-bottom: 44px; isolation: isolate; transition: transform .45s var(--curva), box-shadow .45s var(--curva); animation: bl-sube .7s var(--curva) both; }
.bl-destacada:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.bl-destacada .bl-foto { min-height: 100%; overflow: hidden; background: var(--marca-suave); }
.bl-destacada .bl-foto img { position: absolute; inset: 0; }
.bl-destacada .bl-foto { position: relative; }
.bl-destacada .bl-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.bl-destacada:hover .bl-foto img { transform: scale(1.05); }
.bl-destacada .bl-txt { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bl-destacada h2 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.025em; line-height: 1.12; }
.bl-destacada h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bl-destacada .bl-extracto { color: var(--tinta-2); font-size: 17px; }
.bl-sello { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 6px 12px; border-radius: 999px; background: linear-gradient(100deg, var(--coral), var(--ambar)); }
.bl-leer { display: inline-flex; gap: 8px; align-items: center; color: var(--marca); font-weight: 700; margin-top: 4px; }
.bl-leer .flecha { transition: transform .3s var(--curva); }
.bl-destacada:hover .bl-leer .flecha { transform: translateX(6px); }

/* Tarjetas del listado */
.bl-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.bl-tarjeta { position: relative; display: flex; flex-direction: column; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s var(--curva); animation: bl-sube .6s var(--curva) both; animation-delay: calc(var(--n, 0) * 45ms); }
.bl-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.bl-tarjeta .bl-foto { aspect-ratio: 1; overflow: hidden; background: linear-gradient(140deg, var(--marca-suave), #d6e4f0); }
.bl-tarjeta .bl-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.bl-tarjeta:hover .bl-foto img { transform: scale(1.05); }
.bl-txt { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.bl-tarjeta h3 { font-size: 19px; line-height: 1.28; }
.bl-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.bl-tarjeta h3 a:focus-visible { outline: none; }
.bl-tarjeta:focus-within { box-shadow: 0 0 0 3px var(--marca), var(--sombra-alta); }
.bl-extracto { color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--tinta-3); }
.bl-meta span:not(.bl-cat)::before { content: "·"; margin-right: 12px; }
.bl-cat { font-size: 12px; font-weight: 700; color: var(--marca); background: var(--marca-suave); padding: 3px 10px; border-radius: 999px; }
@keyframes bl-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Paginado */
.bl-paginas { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.bl-paginas a, .bl-paginas span { min-width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-weight: 700; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); transition: all .25s var(--curva); }
.bl-paginas a:hover { box-shadow: inset 0 0 0 1.5px var(--marca); color: var(--marca); transform: translateY(-2px); }
.bl-paginas .actual { background: var(--marca); color: #fff; box-shadow: 0 8px 20px rgba(1,124,141,.3); }
.bl-paginas span.bl-pag-flecha { opacity: .35; }

/* Perfil del autor */
.bl-perfil { display: flex; gap: 24px; align-items: center; margin-bottom: 40px; }
.bl-perfil img { width: 110px; height: 110px; border-radius: 50%; box-shadow: var(--sombra-alta); }
.bl-perfil p { color: var(--tinta-3); margin-top: 6px; }

/* Artículo */
.bl-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.bl-progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--marca), var(--indigo) 60%, var(--coral)); transform-origin: left; transform: scaleX(0); }
.bl-art-cab { max-width: calc(250px + 56px + 720px + 48px); padding-top: 52px; padding-left: calc(24px + 306px); }
.bl-migas { display: flex; gap: 8px; font-size: 14px; color: var(--tinta-3); margin-bottom: 18px; }
.bl-migas a { color: var(--marca); font-weight: 600; }
.bl-migas a:hover { text-decoration: underline; }
.bl-art-cab h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.028em; text-wrap: balance; }
.bl-autor { display: flex; gap: 14px; align-items: center; margin-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--borde); }
.bl-autor img { width: 44px; height: 44px; border-radius: 50%; background: var(--marca-suave); }
.bl-autor b { font-size: 15px; }
.bl-autor p { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; color: var(--tinta-3); }
.bl-autor p span::before { content: "·"; margin-right: 12px; }
.bl-prosa .bl-art-portada { max-width: 540px; margin: 0 auto 1.6em; }
.bl-art-portada img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--sombra-alta); }
.bl-art-grilla { display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: center; column-gap: 56px; max-width: calc(250px + 56px + 720px + 48px); margin-top: 36px; align-items: start; }
.bl-lateral { grid-column: 1; grid-row: 1; position: sticky; top: 96px; width: 100%; display: flex; flex-direction: column; gap: 22px; }
.bl-prosa { grid-column: 2; grid-row: 1; min-width: 0; }

/* Tabla de contenidos */
.bl-indice { background: var(--blanco); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--borde); padding: 16px 18px; font-size: 14px; }
.bl-indice summary { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.bl-indice summary::-webkit-details-marker { display: none; }
.bl-indice summary::after { content: "+"; font-size: 18px; color: var(--marca); transition: transform .3s var(--curva); }
.bl-indice[open] summary::after { transform: rotate(45deg); }
.bl-indice ol { list-style: none; padding: 0; margin-top: 10px; counter-reset: ind; }
.bl-indice li { counter-increment: ind; }
.bl-indice a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; line-height: 1.35; color: var(--tinta-2); transition: background .2s, color .2s; }
.bl-indice a::before { content: counter(ind, decimal-leading-zero); font-size: 11px; font-weight: 700; color: var(--tinta-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.bl-indice a:hover { background: var(--fondo); color: var(--tinta); }
.bl-indice a.activo { background: var(--marca-suave); color: var(--marca); font-weight: 600; }
.bl-indice a.activo::before { color: var(--marca); }

/* Texto del post: columna de lectura */
.bl-prosa { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.72; color: #24282b; font-optical-sizing: auto; }
.bl-prosa > * + * { margin-top: 1.05em; }
.bl-prosa h2, .bl-prosa h3, .bl-prosa h4 { font-family: var(--letra); color: var(--tinta); scroll-margin-top: 96px; clear: both; }
.bl-prosa h2 { font-size: clamp(25px, 2.6vw, 31px); line-height: 1.2; margin-top: 1.9em; }
.bl-prosa h3 { font-size: clamp(21px, 2.1vw, 24px); line-height: 1.25; margin-top: 1.7em; }
.bl-prosa h4 { font-size: 20px; margin-top: 1.5em; }
.bl-prosa > :first-child { margin-top: 0; }
.bl-prosa h2 + *, .bl-prosa h3 + *, .bl-prosa h4 + * { margin-top: .55em; }
.bl-prosa a { color: var(--marca); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s; }
.bl-prosa a:hover { color: var(--marca-osc); }
.bl-prosa strong { font-weight: 600; color: var(--tinta); }
.bl-prosa ul, .bl-prosa ol { padding-left: 1.25em; }
.bl-prosa li + li { margin-top: .5em; }
.bl-prosa li::marker { color: var(--marca); font-weight: 700; }
.bl-prosa li p + p { margin-top: .4em; }
.bl-prosa blockquote { margin: 1.5em 0; padding: 18px 24px 18px 26px; border-left: 4px solid var(--marca); background: var(--marca-suave); border-radius: 0 18px 18px 0; font-size: 1.08em; font-style: italic; color: var(--tinta); }
.bl-prosa blockquote > * + * { margin-top: .6em; }
.bl-prosa hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--borde) 15%, var(--borde) 85%, transparent); margin: 2.2em 0; clear: both; }
.bl-prosa::after { content: ""; display: block; clear: both; }
.bl-prosa .blog-img { margin: 1.7em auto; max-width: 100%; }
.bl-prosa .blog-img img { width: 100%; height: auto; object-fit: cover; border-radius: 16px; }
.bl-prosa .blog-img figcaption { font-family: var(--letra); font-size: 14px; line-height: 1.45; color: var(--tinta-3); text-align: center; margin-top: 10px; }
.bl-prosa .blog-img-left { margin-left: 0; }
.bl-prosa .blog-img-right { margin-right: 0; }
.bl-prosa .blog-img-flota { width: 44%; margin-top: .35em; margin-bottom: 1em; }
.bl-prosa .blog-img-flota.blog-img-left { float: left; margin-right: 28px; }
.bl-prosa .blog-img-flota.blog-img-right { float: right; margin-left: 28px; }
.bl-prosa a:has(> img) { display: block; text-decoration: none; }
.bl-prosa .blog-galeria { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; margin: 1.7em 0; }
.bl-prosa .blog-galeria .blog-img { margin: 0; }
.bl-prosa .blog-galeria img { aspect-ratio: 3 / 4 !important; }
.bl-prosa .blog-boton { text-align: center; margin: 1.6em auto; }
.bl-prosa .blog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: var(--marca); color: #fff; font-family: var(--letra); font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none; box-shadow: 0 6px 18px rgba(1,124,141,.28); transition: transform .25s var(--curva), background .25s; }
.bl-prosa .blog-btn:hover { background: var(--marca-osc); color: #fff; transform: translateY(-2px); }

/* Compartir */
.bl-compartir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-compartir > span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-right: 4px; }
.bl-compartir a, .bl-compartir button { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--tinta-2); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--borde); transition: all .25s var(--curva); }
.bl-compartir svg { width: 19px; height: 19px; }
.bl-compartir a:hover, .bl-compartir button:hover { background: var(--marca); color: #fff; box-shadow: none; transform: translateY(-2px); }
.bl-copiar em { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--tinta); color: #fff; padding: 4px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.bl-copiar.copiado em { opacity: 1; transform: translate(-50%, 0); }
.bl-compartir-lado { padding: 4px 2px; }
.bl-compartir-lado > span { flex-basis: 100%; }

/* Pie del post */
.bl-art-pie { max-width: calc(250px + 56px + 720px + 48px); padding-left: calc(24px + 306px); margin-top: 48px; }
.bl-pie-fila { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin-bottom: 22px; }
.bl-pie-cats, .bl-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-pie-cats a { font-size: 13px; font-weight: 700; color: var(--marca); background: var(--marca-suave); padding: 6px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.bl-pie-cats a:hover { background: var(--marca); color: #fff; }
.bl-etiquetas a { font-size: 13px; font-weight: 600; color: var(--tinta-2); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--borde); background: var(--blanco); }
.bl-etiquetas a:hover { color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }
.bl-pie-fila:not(:has(*)) { display: none; }
.bl-cta-post { display: flex; gap: 22px; align-items: flex-start; margin-top: 40px; padding: 36px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(1,124,141,.6), transparent 55%), #0f2a2f; position: relative; overflow: hidden; }
.bl-cta-post .ico { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.1); color: #7fd0da; }
.bl-cta-post .ico svg { width: 26px; height: 26px; }
.bl-cta-post .antetitulo { color: #7fd0da; margin-bottom: 8px; }
.bl-cta-post h2 { font-size: clamp(24px, 2.6vw, 30px); }
.bl-cta-post p { color: rgba(255,255,255,.82); margin-top: 8px; }
.bl-cta-post .bl-cta-nota { font-size: 15px; color: rgba(255,255,255,.62); }
.bl-cta-post .botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bl-cta-post .btn-2 { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.bl-cta-post .btn-2:hover { background: #fff; color: var(--marca); }
.bl-recientes { padding: 88px 0 0; }
.bl-rec-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.bl-rec-cab h2 { font-size: clamp(26px, 3vw, 36px); }
.bl-rec-cab a { color: var(--marca); font-weight: 700; white-space: nowrap; }
.bl-rec-cab a .flecha { display: inline-block; transition: transform .3s var(--curva); }
.bl-rec-cab a:hover .flecha { transform: translateX(4px); }
.bl-portada + .envoltura .cta { margin-top: 8px; }

/* Inicio: 3 notas reales */
.notas.notas-blog .nota { position: relative; }
.notas.notas-blog .nota .foto { aspect-ratio: 1; padding: 0; }
.notas.notas-blog .nota small { color: var(--tinta-3); font-weight: 500; }
.notas-blog-pie { margin-top: 28px; }

@media (max-width: 1100px) {
  .bl-art-cab, .bl-art-pie { max-width: calc(720px + 48px); padding-left: 24px; }
  .bl-art-grilla { grid-template-columns: minmax(0, 1fr); max-width: calc(720px + 48px); }
  .bl-lateral { position: static; grid-column: 1; grid-row: auto; max-width: none; justify-self: stretch; margin-bottom: 28px; }
  .bl-prosa { grid-column: 1; grid-row: auto; }
  .bl-compartir-lado { display: none; }
}
@media (max-width: 980px) {
  .bl-grilla { grid-template-columns: repeat(2, 1fr); }
  .bl-destacada { grid-template-columns: 1fr; }
  .bl-destacada .bl-foto { aspect-ratio: 3 / 2; min-height: 0; }
  .bl-destacada .bl-txt { padding: 26px 24px 30px; }
}
@media (max-width: 640px) {
  .bl-portada { padding: 36px 0 56px; }
  .bl-chips { margin: 24px -24px 22px; }
  .bl-grilla { grid-template-columns: 1fr; gap: 12px; }
  .bl-tarjeta { flex-direction: row; align-items: stretch; border-radius: 16px; }
  .bl-tarjeta .bl-foto { width: 112px; flex: none; aspect-ratio: auto; min-height: 112px; }
  .bl-tarjeta .bl-txt { padding: 14px 16px; gap: 6px; justify-content: center; }
  .bl-tarjeta h3 { font-size: 16.5px; }
  .bl-tarjeta .bl-extracto { display: none; }
  .bl-meta { font-size: 12px; gap: 4px 8px; }
  .bl-meta span:not(.bl-cat)::before { margin-right: 8px; }
  .bl-destacada { border-radius: 22px; margin-bottom: 30px; }
  .bl-destacada .bl-extracto { font-size: 15.5px; }
  .bl-paginas { margin-top: 32px; }
  .bl-art-cab { padding-top: 32px; }
  .bl-prosa { font-size: 18.5px; line-height: 1.68; }
  .bl-prosa .blog-img-flota { float: none !important; width: auto; margin: 1.4em auto !important; }
  .bl-prosa .blog-galeria { gap: 6px; }
  .bl-prosa blockquote { padding: 14px 18px; }
  .bl-cta-post { flex-direction: column; padding: 28px 22px; gap: 14px; }
  .bl-cta-post .botones .btn { flex: 1 1 auto; justify-content: center; }
  .bl-recientes { padding-top: 64px; }
  .bl-perfil { flex-direction: column; align-items: flex-start; }
  .notas.notas-blog .nota { display: grid; grid-template-columns: 112px 1fr; }
  .notas.notas-blog .nota .foto { aspect-ratio: auto; height: 100%; min-height: 112px; }
  .notas.notas-blog .nota div:not(.foto) { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; }
  .notas.notas-blog .nota h3 { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-zona.bl-saliendo { opacity: 1; transform: none; }
}

/* ======== Institucionales (in-) ======== */
.in-cab { position: relative; overflow: hidden; padding: 64px 0 40px; }
.in-cab h1 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -.028em; }
.in-cab .bajada { max-width: 680px; }
.in-migas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--tinta-3); margin-bottom: 22px; }
.in-migas a { color: var(--marca); font-weight: 600; }
.in-migas a:hover { text-decoration: underline; }
.in-cab-foto { padding: 88px 0 72px; color: #fff; background: #0f2a2f; isolation: isolate; }
.in-cab-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.in-cab-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,30,34,.92) 20%, rgba(10,30,34,.55) 70%, rgba(1,124,141,.35)); }
.in-cab-foto .antetitulo { color: #7fd0da; }
.in-cab-foto .bajada { color: rgba(255,255,255,.82); }
.in-cab-legal { padding-bottom: 12px; }
.in-sec { padding: 48px 0 72px; }
.in-lectura { max-width: calc(760px + 48px); }
.in-nota { font-size: 14px; color: var(--tinta-3); margin-top: 18px; text-align: center; }

/* Lista de servicios (book-online) */
.in-reservas { display: grid; gap: 16px; }
.in-reserva { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; background: var(--blanco); border-radius: 22px; padding: 22px 26px; box-shadow: var(--sombra); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.in-reserva:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.in-reserva-ico { width: 96px; height: 96px; border-radius: 22px; background: var(--fondo); display: grid; place-items: center; overflow: hidden; }
.in-reserva-ico img { width: 84px; height: 84px; object-fit: contain; transition: transform .5s var(--curva); }
.in-reserva:hover .in-reserva-ico img { transform: scale(1.08) rotate(-3deg); }
.in-reserva h2 { font-size: 22px; letter-spacing: -.015em; line-height: 1.25; }
.in-reserva h2 a:hover { color: var(--marca); }
.in-reserva-txt > p { color: var(--tinta-2); margin-top: 4px; }
.in-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 12px; }
.in-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); background: var(--fondo); padding: 6px 12px; border-radius: 999px; }
.in-chips svg { width: 15px; height: 15px; color: var(--marca); }
.in-reserva-acc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.in-mas { color: var(--marca); font-weight: 600; font-size: 15px; }
.in-mas .flecha { display: inline-block; transition: transform .3s var(--curva); }
.in-mas:hover .flecha { transform: translateX(4px); }

/* Datos de contacto */
.in-contacto { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.in-contacto li, .in-horario { display: flex; gap: 14px; align-items: flex-start; background: var(--blanco); border-radius: 18px; padding: 20px; box-shadow: var(--sombra); }
.in-contacto h3, .in-horario h3 { font-size: 16px; }
.in-contacto p, .in-horario p { color: var(--tinta-2); font-size: 15px; margin-top: 2px; }
.in-contacto a { color: var(--marca); font-weight: 600; }
.in-redes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.in-contacto .ico svg, .in-horario .ico svg { width: 19px; height: 19px; }

/* Página de cada servicio */
.in-serv-cab { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; }
.in-serv-cab > img { width: 150px; height: 150px; object-fit: contain; background: var(--blanco); border-radius: 34px; padding: 14px; box-shadow: var(--sombra-alta); }
.in-serv-cab h1 { font-size: clamp(32px, 4.4vw, 52px); }
.in-serv-cab .bajada { margin-top: 10px; }
.in-serv-cab .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.in-bloque { background: var(--blanco); border-radius: 22px; padding: 30px 32px; box-shadow: var(--sombra); }
.in-bloque + .in-bloque { margin-top: 18px; }
.in-bloque h2 { font-size: 22px; margin-bottom: 12px; }
.in-bloque p { color: var(--tinta-2); }
.in-bloque p + *, .in-bloque ul + * { margin-top: 12px; }
.in-bloque ul { padding-left: 1.2em; color: var(--tinta-2); margin-top: 6px; }
.in-bloque li + li { margin-top: 4px; }
.in-bloque li::marker { color: var(--marca); }
.in-bloque hr { border: 0; height: 1px; background: var(--borde); margin: 16px 0; }

/* Franja «¿Cómo te ayudamos?» */
.in-franja { padding: 72px 0 24px; }
.in-servs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 36px; }
.in-serv { background: var(--blanco); border-radius: 20px; padding: 22px 20px 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.in-serv:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.in-serv-ico { position: relative; width: 88px; height: 88px; margin-bottom: 6px; }
.in-serv-ico img { width: 88px; height: 88px; object-fit: contain; transition: transform .5s var(--curva); }
.in-serv:hover .in-serv-ico img { transform: translateY(-4px) scale(1.05); }
.in-sin-costo { position: absolute; left: 60px; top: 2px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--indigo); padding: 3px 8px; border-radius: 999px; }
.in-serv h3 { font-size: 18px; }
.in-serv p { color: var(--tinta-2); font-size: 14.5px; line-height: 1.45; }
.in-serv .mas { margin-top: auto; padding-top: 6px; color: var(--marca); font-weight: 600; font-size: 14.5px; }
.in-serv .mas .flecha { display: inline-block; transition: transform .3s var(--curva); }
.in-serv:hover .mas .flecha { transform: translateX(4px); }

/* Legales */
.in-legal { background: var(--blanco); border-radius: 24px; padding: 40px 44px; box-shadow: var(--sombra); font-size: 17px; color: var(--tinta-2); }
.in-legal > * + * { margin-top: 12px; }
.in-legal h2 { font-size: 26px; color: var(--tinta); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--borde); }
.in-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.in-legal h3 { font-size: 18px; color: var(--tinta); margin-top: 24px; }
.in-legal h2 + *, .in-legal h3 + * { margin-top: 8px; }
.in-legal ul { padding-left: 1.2em; }
.in-legal li + li { margin-top: 6px; }
.in-legal li::marker { color: var(--marca); }
.in-legal a { color: var(--marca); font-weight: 600; }
.in-otras { margin-top: 22px; font-size: 15px; color: var(--tinta-3); text-align: center; }
.in-otras a { color: var(--marca); font-weight: 600; }

/* Contacto */
.in-contacto-grilla { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.in-sec-contacto { margin-top: -48px; position: relative; padding-top: 0; }
.in-tarjeta-form { background: var(--blanco); border-radius: 26px; padding: 34px; box-shadow: 0 2px 4px rgba(16,24,32,.05), 0 30px 60px rgba(16,24,32,.12); }
.in-form-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.in-campo { display: flex; flex-direction: column; gap: 6px; }
.in-campo.in-ancho { grid-column: 1 / -1; }
.in-campo label { font-size: 14px; font-weight: 600; color: var(--tinta); }
.in-campo input, .in-campo select, .in-campo textarea { font: inherit; font-size: 16px; color: var(--tinta); background: var(--fondo); border: 1.5px solid transparent; border-radius: 14px; padding: 12px 14px; width: 100%; transition: border-color .2s, background .2s, box-shadow .2s; }
.in-campo textarea { resize: vertical; min-height: 130px; }
.in-campo select { appearance: none; -webkit-appearance: none; color: var(--tinta-3); background: var(--fondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4e52' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; padding-right: 40px; }
.in-campo select.elegido { color: var(--tinta); }
.in-campo input:focus, .in-campo select:focus, .in-campo textarea:focus { outline: none; border-color: var(--marca); background: #fff; box-shadow: 0 0 0 4px rgba(1,124,141,.12); }
.in-campo input::placeholder, .in-campo textarea::placeholder { color: #9aa0a5; }
.in-form-pie { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.in-form-pie p { font-size: 13.5px; color: var(--tinta-3); flex: 1 1 220px; }
.in-enviado { margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: #e8f7ee; color: #17663a; font-weight: 600; font-size: 15px; }
.in-lado { padding-top: 64px; }
.in-lado h2 { font-size: 24px; margin: 4px 0 16px; }
.in-lado .in-contacto { grid-template-columns: 1fr; gap: 12px; }
.in-horario { margin-top: 12px; }
.in-mapa { border-radius: 26px; overflow: hidden; box-shadow: var(--sombra-alta); background: var(--marca-suave); aspect-ratio: 16 / 7; }
.in-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
#contacto .in-mapa { aspect-ratio: 4 / 3.4; }

/* Empresas */
.in-emp-hero h1 { font-size: clamp(36px, 4.6vw, 56px); }
.in-emp-foto { position: relative; }
.in-emp-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: 28px; box-shadow: var(--sombra-alta); }
.in-emp-foto .burbuja { left: -22px; bottom: 28px; }
.in-nota-hero { font-size: 14px; color: var(--tinta-3); margin-top: 14px; }
.in-cinta { background: var(--tinta); color: #fff; text-align: center; padding: 26px 24px; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em; }
.in-cinta strong { color: #7fd0da; }
.in-aviso { margin-top: 28px; padding: 18px 22px; border-radius: 16px; background: var(--marca-suave); color: var(--tinta-2); font-size: 15.5px; border-left: 4px solid var(--marca); }
.in-aviso-osc { background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); border-left-color: #7fd0da; }
.in-emp-fallas { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: center; }
.in-fallas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.in-fallas li { display: flex; align-items: center; gap: 14px; background: var(--blanco); border-radius: 16px; padding: 14px 16px; box-shadow: var(--sombra); font-weight: 600; transition: transform .3s var(--curva); }
.in-fallas li:hover { transform: translateX(4px); }
.in-frase { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.015em; margin-top: 30px; color: #7fd0da; }
.in-dos-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.in-dos-listas > div { border-radius: 22px; padding: 28px; }
.in-lista-mal { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.in-lista-bien { background: rgba(1,124,141,.28); border: 1px solid rgba(127,208,218,.35); }
.in-dos-listas h3 { font-size: 20px; margin-bottom: 14px; }
.in-dos-listas ul { list-style: none; padding: 0; }
.in-dos-listas li { position: relative; padding-left: 30px; color: rgba(255,255,255,.84); font-size: 15.5px; }
.in-dos-listas li + li { margin-top: 10px; }
.in-dos-listas li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.in-lista-mal li::before { content: "✕"; background: rgba(224,93,63,.2); color: #f39a85; }
.in-lista-bien li::before { content: "✓"; background: rgba(127,208,218,.25); color: #a9e6ee; }
.pasos.in-pasos-4 { grid-template-columns: repeat(4, 1fr); }
.in-medida { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.in-medida .tarjeta { border-top: 4px solid var(--marca); }
.in-medida .tarjeta:nth-child(2) { border-top-color: var(--indigo); }
.in-medida .tarjeta:nth-child(3) { border-top-color: var(--coral); }
.in-tres-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.in-col { background: var(--blanco); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.in-col h3 { font-size: 18px; margin-bottom: 10px; }
.in-col ul { padding-left: 1.1em; color: var(--tinta-2); font-size: 15px; }
.in-col li + li { margin-top: 4px; }
.in-col li::marker { color: var(--marca); }
.in-col-ia { background: linear-gradient(150deg, var(--indigo), #2b3b78); color: #fff; }
.in-col-ia p { color: rgba(255,255,255,.85); font-size: 15.5px; }
.in-mdm { background: var(--blanco); border-radius: 32px; padding: 52px; box-shadow: var(--sombra); }
.in-mdm-sub { font-size: 19px; color: var(--tinta-2); margin-top: 12px; }
.in-mdm .dos p { color: var(--tinta-2); }
.in-resuelve { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin: 40px 0 16px; }
.in-cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.in-cuatro > div { background: var(--fondo); border-radius: 20px; padding: 22px; }
.in-cuatro h4 { font-size: 17px; margin: 14px 0 6px; line-height: 1.25; }
.in-cuatro p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
.in-mdm-nota { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--borde); transition: box-shadow .25s, transform .25s var(--curva); }
.in-mdm-nota small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--marca); white-space: nowrap; }
.in-mdm-nota b { flex: 1; font-size: 16px; }
.in-mdm-nota .flecha { color: var(--marca); transition: transform .3s var(--curva); }
.in-mdm-nota:hover { box-shadow: inset 0 0 0 1.5px var(--marca); }
.in-mdm-nota:hover .flecha { transform: translateX(5px); }
.in-quien .tarjeta h3 { font-size: 19px; }
.in-cta-botones { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.in-btn-borde { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.in-btn-borde:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.in-llegar { font-size: 15px; color: var(--tinta-2); margin-top: 20px; }

@media (max-width: 980px) {
  .in-servs { grid-template-columns: repeat(2, 1fr); }
  .in-contacto { grid-template-columns: 1fr 1fr; }
  .in-contacto-grilla, .in-emp-fallas, .in-dos-listas { grid-template-columns: 1fr; }
  .pasos.in-pasos-4, .in-medida, .in-tres-col, .in-cuatro { grid-template-columns: 1fr 1fr; }
  .in-mdm { padding: 32px 24px; border-radius: 26px; }
  .in-emp-foto .burbuja { left: 12px; bottom: 12px; }
  .in-sec-contacto { margin-top: -28px; }
  .in-lado { padding-top: 12px; }
  .in-mapa { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .in-cab { padding: 40px 0 28px; }
  .in-cab-foto { padding: 56px 0 72px; }
  .in-reserva { grid-template-columns: 64px 1fr; gap: 14px 16px; padding: 18px; }
  .in-reserva-ico { width: 64px; height: 64px; border-radius: 16px; }
  .in-reserva-ico img { width: 56px; height: 56px; }
  .in-reserva h2 { font-size: 19px; }
  .in-reserva { align-items: start; }
  .in-reserva-acc { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .in-reserva-acc .btn { white-space: nowrap; padding: 13px 20px; }
  .in-mas { white-space: nowrap; }
  .in-contacto, .in-servs, .pasos.in-pasos-4, .in-medida, .in-tres-col, .in-cuatro { grid-template-columns: 1fr; }
  .in-fallas li { padding: 12px; gap: 10px; font-size: 14.5px; }
  .in-serv { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .in-serv-ico { width: 64px; height: 64px; margin: 0; }
  .in-serv-ico img { width: 64px; height: 64px; }
  .in-sin-costo { left: 30px; top: -6px; }
  .in-serv > div:first-child + h3 { flex: 1; }
  .in-serv p, .in-serv .mas { flex-basis: 100%; }
  .in-serv-cab { grid-template-columns: 1fr; gap: 20px; }
  .in-serv-cab > img { width: 104px; height: 104px; border-radius: 26px; }
  .in-bloque { padding: 24px 22px; }
  .in-legal { padding: 28px 22px; font-size: 16px; }
  .in-tarjeta-form { padding: 24px 20px; border-radius: 22px; }
  .in-form-grilla { grid-template-columns: 1fr; }
  .in-form-pie .btn { width: 100%; justify-content: center; }
  .in-cinta { padding: 20px 18px; }
  .in-mdm-nota { flex-wrap: wrap; }
  .in-mdm-nota small { flex-basis: 100%; }
}
/* Reescritura con GUIA.md: turnos, contacto, garantía y empresas */
.in-para { color: var(--tinta-3); font-size: 15.5px; }
.in-reserva-txt > p.in-precio, .in-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; color: var(--tinta); }
.in-precio b { font-size: 22px; font-weight: 700; color: var(--marca); letter-spacing: -.01em; }
.in-precio span { font-size: 15px; color: var(--tinta-2); font-weight: 600; }
.in-precio em { font-style: normal; font-size: 14.5px; color: var(--tinta-3); }
.in-precio i { flex-basis: 100%; height: 0; }
.in-reserva .btn { white-space: nowrap; }
.in-cab-foto .botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.in-sec-contacto { margin-top: -36px; }
.in-form h2 { font-size: 24px; }
.in-form-bajada { color: var(--tinta-2); font-size: 15.5px; margin: 6px 0 22px; }
.in-campo label small { font-weight: 500; color: var(--tinta-3); font-size: 13px; }
.in-redes-linea { font-size: 14.5px; color: var(--tinta-3); margin-top: 14px; }
.in-redes-linea a { color: var(--marca); font-weight: 600; }
.in-plazos { grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
.in-plazos .tarjeta { padding: 22px; }
.in-plazos .tarjeta h3 { font-size: 17px; margin-top: 2px; }
.in-plazos .tarjeta p { font-size: 14.5px; }
.in-plazos .tarjeta a { color: var(--marca); font-weight: 600; }
.in-plazo { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--marca); line-height: 1.1; margin-top: 14px; }
.in-legal ol { padding-left: 1.3em; }
.in-legal ol li + li { margin-top: 6px; }
.in-legal ol li::marker { color: var(--marca); font-weight: 700; }
.in-emp-cifras b { font-size: 26px; }
.in-emp-quien { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; margin-top: 28px; color: var(--tinta-2); font-size: 17px; }
.in-emp-quien a { color: var(--marca); font-weight: 600; }
.in-emp-factura { display: flex; gap: 22px; align-items: flex-start; background: var(--blanco); border-radius: 26px; padding: 34px 36px; box-shadow: var(--sombra); border-left: 5px solid var(--marca); }
.in-emp-factura h2 { font-size: clamp(22px, 2.4vw, 28px); }
.in-emp-factura p { color: var(--tinta-2); margin-top: 8px; max-width: 760px; }
.cta .in-cta-chico { font-size: 14.5px; margin: 20px auto 0; color: rgba(255,255,255,.72); }
.cta .in-cta-chico a { color: #fff; text-decoration: underline; }
@media (max-width: 980px) {
  .in-emp-quien { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .in-plazos { grid-template-columns: 1fr; }
  .in-emp-factura { flex-direction: column; padding: 24px 22px; gap: 14px; }
  .in-emp-cifras b { font-size: 22px; }
  .in-precio b { font-size: 20px; }
  .in-cab-foto .botones .btn { flex: 1 1 auto; justify-content: center; }
}
/* ---- fin Blog e institucionales ---- */

/* ---- Tienda ---- */
/* Lo usa generadores/tienda.py (/tienda y sus secciones). Todo con prefijo t- para no pisar otros bloques. */
.t-migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--tinta-3); padding-top: 18px; }
.t-migas a:hover { color: var(--marca); }
.t-migas i { font-style: normal; opacity: .45; }
.t-migas span { color: var(--tinta-2); font-weight: 600; }
.hero.t-hero { padding: 36px 0 64px; }
.t-hero .hero-visual .principal.t-foto-real { padding: 0; }
.t-hero .hero-visual .principal.t-foto-real img { height: 100%; object-fit: cover; object-position: 50% 40%; animation: none; }
.t-hero-nota { font-size: 14px; color: var(--tinta-3); margin-top: 14px; max-width: 560px; }
section.t-arriba { padding-top: 40px; }
section.t-gris { background: #eceff1; }
.t-angosta { max-width: 880px; }
.t-grilla-prod { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-top: 30px; align-items: stretch; }
.t-grilla-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 26px; }
.t-grilla-info { grid-template-columns: repeat(var(--cols, 3), 1fr); }
[data-cat][hidden], [data-grupo][hidden], .t-cod[hidden], .t-vacio[hidden], .t-elegido[hidden] { display: none !important; }

/* Filtros y pesos/dólares: pastilla que se desliza */
.t-barra { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; margin-top: 28px; }
.t-filtros, .t-moneda { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.t-filtros::-webkit-scrollbar { display: none; }
.t-filtros button, .t-moneda button { position: relative; z-index: 1; flex: none; font: inherit; font-size: 15px; font-weight: 600; padding: 9px 16px; border: 0; background: none; border-radius: 999px; color: var(--tinta-2); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; transition: color .3s; white-space: nowrap; }
.t-filtros button:hover, .t-moneda button:hover { color: var(--tinta); }
.t-filtros button.activo, .t-moneda button.activo { color: #fff; }
.t-filtros button:focus-visible, .t-moneda button:focus-visible, .t-cod:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.t-pastilla { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 999px; background: var(--tinta); transition: transform .45s var(--curva), width .45s var(--curva); }
.t-moneda .t-pastilla { background: var(--marca); }
.t-cuenta { font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--fondo); color: var(--tinta-3); transition: background .3s, color .3s; }
.t-filtros button.activo .t-cuenta { background: rgba(255,255,255,.18); color: #fff; }
.t-sale { opacity: 0 !important; transform: scale(.96) !important; transition: opacity .18s ease, transform .18s ease !important; }
.t-entra { animation: t-subir .5s var(--curva) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes t-subir { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes t-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Tarjetas de producto */
.t-prod .cuerpo { gap: 10px; }
.t-gal { aspect-ratio: 1 / 1; position: relative; display: block; background: #fff; border-bottom: 1px solid var(--borde); }
.t-acc .t-gal { aspect-ratio: 4 / 3; }
.t-gal-pista { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.t-gal-pista::-webkit-scrollbar { display: none; }
.t-gal-foto { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; }
.t-gal .t-gal-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.t-gal.t-real .t-gal-foto img { object-fit: cover; object-position: 50% 40%; padding: 0; }
.t-gal-puntos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.t-gal-puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.18); cursor: pointer; transition: width .3s var(--curva), background .3s; }
.t-gal-puntos button.on { width: 22px; background: var(--marca); box-shadow: none; }
.t-nota-foto { position: absolute; right: 10px; top: 10px; font-size: 11.5px; font-weight: 600; color: var(--tinta-2); background: rgba(255,255,255,.88); padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.t-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.t-etq-nuevo { background: #fdeee9; color: var(--coral); }
.t-specs { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.35; }
.t-specs b { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin-bottom: 2px; }
.t-specs-1 { grid-template-columns: 1fr; }
.tarjeta .t-estado { font-size: 13.5px; font-weight: 600; color: #11703a; }
.tarjeta .t-para { font-size: 15px; }
.t-precio { display: grid; gap: 10px; border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 4px; }
.t-monto { display: grid; }
.t-monto > div { grid-area: 1 / 1; transition: opacity .35s var(--curva), transform .45s var(--curva); }
.t-usd, .ver-usd .t-ars { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ver-usd .t-ars { transform: translateY(-8px); }
.ver-usd .t-usd { opacity: 1; transform: none; pointer-events: auto; }
.t-monto b { display: flex; align-items: baseline; gap: 6px; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.t-monto b small { font-size: 15px; font-weight: 600; color: var(--tinta-3); }
.t-final { display: block; margin-top: 4px; font-size: 15.5px; color: var(--tinta); }
.t-final strong { color: var(--marca); font-size: 17px; font-variant-numeric: tabular-nums; }
.t-medio { display: block; font-size: 13px; color: var(--tinta-3); }
.t-cuotas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; background: var(--fondo); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; color: var(--tinta-2); }
.t-cuotas b { font-size: 18px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.t-cuotas small { font-size: 12.5px; color: var(--tinta-3); }
.t-garantia { display: flex; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--marca); line-height: 1.4; }
.t-tilde, .t-lista li::before { flex: none; width: 10px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-top: .35em; }
.t-acciones { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.t-acciones .btn { justify-content: center; }
.t-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; line-height: 1.4; }
.t-dl dt { color: var(--tinta-3); font-weight: 600; white-space: nowrap; }
.t-dl dd { margin: 0; color: var(--tinta-2); }
.t-pie-tarjeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); }
.t-btn-chico { padding: 10px 16px; font-size: 14.5px; }
.t-consultar { font-size: 16px; color: var(--marca); }

/* Portada: secciones y vidriera */
.t-seccion .foto img { width: 66%; }
.t-seccion h3 { font-size: 20px; }
.t-dato { align-self: flex-start; font-size: 13.5px; font-weight: 700; color: var(--marca); background: var(--marca-suave); padding: 4px 11px; border-radius: 999px; }
.t-mini .foto { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--borde); }
.t-mini .foto img { width: 70%; }
.t-mini .foto.t-real img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.t-mini .cuerpo { padding: 16px 18px 18px; gap: 6px; }
.t-mini h3 { font-size: 16px; line-height: 1.3; }
.t-mini .precio { font-size: 19px; }
.t-mini .mas { font-size: 14px; }
.t-final-mini { font-size: 12.5px; color: var(--tinta-3); line-height: 1.4; }
.t-nw { white-space: nowrap; }
.t-final-mini b { color: var(--tinta-2); }

/* Avisos, notas, tablas, preguntas */
.t-aviso { margin-top: 26px; padding: 16px 20px; border-radius: 16px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde); font-size: 15.5px; color: var(--tinta-2); }
.t-link { color: var(--marca); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.t-nota-precios { font-size: 13px; color: var(--tinta-3); margin-top: 22px; max-width: 860px; }
.t-falta { display: inline-block; background: #fff4dc; color: #8a5a00; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.t-vacio { margin-top: 24px; padding: 26px; border-radius: 20px; border: 1.5px dashed var(--borde); background: var(--blanco); display: grid; gap: 14px; justify-items: start; animation: t-pop .4s var(--curva); }
.t-tabla-caja { margin-top: 30px; overflow-x: auto; border-radius: 20px; background: var(--blanco); box-shadow: var(--sombra); }
.t-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.t-tabla th, .t-tabla td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.t-tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.t-tabla tr:last-child td { border-bottom: 0; }
.t-tabla td { transition: background .3s, color .3s; }
.t-compara td:first-child { font-weight: 600; }
.t-compara th:nth-child(2), .t-compara td:nth-child(2) { background: var(--marca-suave); }
.t-si { color: #11703a; font-weight: 700; }
.t-no { color: #b23a3a; font-weight: 700; }
.t-num { text-align: right !important; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-tabla-iph tr.t-marcada td { background: var(--marca-suave); color: var(--marca); font-weight: 700; }
.t-info h3 { font-size: 19px; }

/* Cómo comprar: entrega y pago */
.t-envios { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; margin-top: 24px; }
.t-envio-caja { background: var(--blanco); border-radius: var(--radio); padding: 26px 28px; box-shadow: var(--sombra); }
.t-envio-caja h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; margin-bottom: 6px; }
.t-envio-lista, .t-pago-lista { list-style: none; padding: 0; }
.t-envio-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--borde); font-weight: 600; }
.t-envio-lista li:last-child { border-bottom: 0; }
.t-envio-lista small { display: block; font-size: 13px; font-weight: 400; color: var(--tinta-3); }
.t-envio-lista b { text-align: right; flex: 0 1 46%; }
.t-pago-lista li { padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: 15.5px; color: var(--tinta-2); }
.t-pago-lista li:last-child { border-bottom: 0; }
.t-pago-lista b { color: var(--tinta); }
.t-cta-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; position: relative; z-index: 1; }
.cta .t-btn-borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.cta .t-btn-borde:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Repuestos */
.t-rep .btn { align-self: flex-start; margin-top: auto; }
.t-cerrados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.t-destacados .t-mini .foto { aspect-ratio: 16 / 10; }
.t-ver-todos { margin-top: 24px; }
.t-aviso.t-entrega { margin: 0 0 64px; }
.t-cerrado { flex-direction: row; align-items: center; gap: 16px; padding: 22px; }
.t-cerrado h3 { font-size: 18px; }
.t-cerrado p { font-size: 14.5px; }
.t-cerrado .flecha { margin-left: auto; color: var(--marca); font-weight: 700; transition: transform .3s var(--curva); }
.t-cerrado:hover .flecha { transform: translateX(5px); }

/* Ofertas por modelo: buscador, stock, selector */
.t-buscador { position: sticky; top: 64px; z-index: 20; display: grid; gap: 4px; margin: 26px -24px 0; padding: 12px 24px 10px; background: rgba(245,246,247,.9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.t-buscador .t-barra { margin-top: 8px; }
.t-buscar { display: flex; align-items: center; gap: 10px; background: var(--blanco); border-radius: 999px; padding: 0 18px; min-height: 54px; box-shadow: inset 0 0 0 1.5px var(--borde), 0 6px 20px rgba(16,24,32,.06); transition: box-shadow .25s; }
.t-buscar:focus-within { box-shadow: inset 0 0 0 1.5px var(--marca), 0 0 0 4px rgba(1,124,141,.14); }
.t-buscar svg { width: 21px; height: 21px; color: var(--tinta-3); flex: none; }
.t-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--tinta); padding: 14px 0; }
.t-ayuda { font-size: 13.5px; color: var(--tinta-3); margin-top: 6px; }
.t-resultado { font-size: 14px; color: var(--tinta-3); min-height: 1.2em; margin-top: 10px; }
.t-interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--tinta-2); cursor: pointer; user-select: none; }
.t-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-interruptor span { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--borde); transition: background .3s; flex: none; }
.t-interruptor span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .3s var(--curva); }
.t-interruptor input:checked + span { background: #22a35a; }
.t-interruptor input:checked + span::after { transform: translateX(18px); }
.t-interruptor input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.t-grupo-h { font-size: 22px; margin: 38px 0 0; }
.t-grupo .t-grilla-prod { margin-top: 16px; }
.t-bat .cuerpo { gap: 10px; }
.t-bat h3 { font-size: 19px; }
.t-bat-foto { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--borde); }
.t-bat-foto img { width: 84%; max-height: 86%; object-fit: contain; }
.t-codigo { position: absolute; left: 12px; top: 12px; background: var(--tinta); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; letter-spacing: .02em; }
.t-stock { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; background: #e6f6ec; color: #11703a; font-weight: 700; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; }
.t-stock i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.t-stock.t-pedido { background: #fff4dc; color: #8a5a00; }
.t-stock.t-pedido i { background: var(--ambar); animation: none; }
.t-bat-foto .t-nota-foto { top: auto; bottom: 10px; }
.t-stock.t-en-linea { position: static; margin-top: 8px; }
.t-cod-bat { font-size: 13.5px; font-weight: 600; color: var(--tinta-3); margin-top: -4px; }
.t-precio-oferta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.t-precio-oferta b { font-size: 30px; letter-spacing: -.02em; color: var(--marca); line-height: 1.1; }
.t-precio-oferta span { font-size: 14px; color: var(--tinta-2); }
.t-precio-2 { font-size: 14px; color: var(--tinta-2); }
.t-lista { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--tinta-2); }
.t-lista li { display: flex; gap: 10px; }
.t-lista li::before { content: ""; color: var(--marca); }
.t-chips-cod { display: flex; flex-wrap: wrap; gap: 6px; }
.t-chip-cod { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--fondo); color: var(--tinta-2); }
.t-chip-cod.t-ok { background: #e6f6ec; color: #11703a; }
.t-resaltada { box-shadow: 0 0 0 2.5px var(--marca), var(--sombra-alta); }
.t-selector { margin-top: 30px; display: grid; gap: 14px; background: var(--blanco); border-radius: 22px; padding: 22px; box-shadow: var(--sombra); }
.t-codigos { display: flex; flex-wrap: wrap; gap: 8px; }
.t-cod { font: inherit; font-size: 14.5px; font-weight: 600; padding: 8px 13px; border: 0; border-radius: 12px; background: var(--fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .25s, color .25s, transform .25s var(--curva), box-shadow .25s; }
.t-cod:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.t-cod i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); }
.t-cod[data-stock="1"] i { background: #22c55e; }
.t-cod.activo { background: var(--marca); color: #fff; box-shadow: 0 8px 20px rgba(1,124,141,.28); }
.t-leyenda { display: flex; gap: 18px; font-size: 13px; color: var(--tinta-3); }
.t-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.t-leyenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); }
.t-leyenda i.t-ok { background: #22c55e; }
.t-elegido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-radius: 16px; background: var(--marca-suave); }
.t-elegido.t-pop { animation: t-pop .45s var(--curva); }
.t-elegido-txt small { display: block; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.t-elegido-txt b { display: block; font-size: 30px; letter-spacing: -.02em; line-height: 1.15; }
.t-elegido-txt > span { display: block; font-size: 14px; color: var(--tinta-2); }
.t-colocado { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding: 18px 22px; border-radius: 18px; background: var(--blanco); box-shadow: inset 4px 0 0 var(--marca), var(--sombra); font-size: 15.5px; color: var(--tinta-2); transition: transform .3s var(--curva), box-shadow .3s; }
.t-colocado b { color: var(--tinta); }
.t-colocado .flecha { margin-left: auto; color: var(--marca); font-weight: 700; font-size: 20px; transition: transform .3s var(--curva); }
.t-colocado:hover { transform: translateY(-3px); box-shadow: inset 4px 0 0 var(--marca), var(--sombra-alta); }
.t-colocado:hover .flecha { transform: translateX(5px); }

@media (max-width: 980px) {
  .t-grilla-info { grid-template-columns: repeat(2, 1fr); }
  .t-secciones > :first-child, .t-secciones > :last-child { grid-column: auto; flex-direction: column; }
  .t-secciones > :first-child .foto, .t-secciones > :last-child .foto { flex: none; aspect-ratio: 4 / 3; }
  .t-envios, .t-cerrados { grid-template-columns: 1fr; }
  .t-hero .hero-visual { max-width: 330px; }
  .hero.t-hero { padding: 24px 0 48px; }
  section.t-arriba { padding-top: 28px; }
}
@media (max-width: 640px) {
  .t-grilla-info { grid-template-columns: 1fr; }
  .t-grilla-mini { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .t-secciones .t-seccion, .t-secciones > :first-child, .t-secciones > :last-child { flex-direction: row; }
  .t-secciones .t-seccion .foto { flex: 0 0 36%; aspect-ratio: auto; min-height: 150px; }
  .t-seccion .foto img { width: 86%; }
  .t-seccion .cuerpo { padding: 16px 16px 18px; gap: 6px; }
  .t-seccion h3 { font-size: 17px; }
  .t-seccion p { font-size: 14px; }
  .t-mini .cuerpo { padding: 12px 13px 14px; }
  .t-mini h3 { font-size: 14.5px; }
  .t-mini .precio { font-size: 17px; }
  .t-mini .etiqueta { font-size: 11px; }
  .t-monto b { font-size: 25px; }
  .t-tabla { font-size: 14px; }
  .t-tabla th, .t-tabla td { padding: 12px 14px; }
  .t-compara { min-width: 600px; }
  .t-buscador { margin: 20px -24px 0; padding: 10px 24px 8px; }
  .t-buscador .t-ayuda { display: none; }
  .t-barra { gap: 10px; }
  .t-elegido-txt b { font-size: 26px; }
  .t-colocado { align-items: flex-start; }
}

/* ---- Opiniones de Google e Instagram (inicio, /mac, /iphone) ---- */
.op-sec, .ig-sec { padding: 80px 0; }
.op-sec.pegada { padding-top: 0; }
.ig-sec { padding-top: 0; }
.op-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.op-nota { display: inline-flex; align-items: center; gap: 10px; background: var(--blanco); border-radius: 999px; padding: 10px 18px 10px 10px; box-shadow: var(--sombra); font-size: 15px; color: var(--tinta-2); transition: transform .3s var(--curva), box-shadow .3s; }
.op-nota:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.op-nota b { background: var(--tinta); color: #fff; border-radius: 999px; padding: 4px 11px; font-size: 15px; }
.op-est { display: inline-flex; gap: 2px; color: #f5a623; }
.op-est svg { width: 16px; height: 16px; }
.op-carril { margin-top: 36px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.op-carril::-webkit-scrollbar { display: none; }
.op-cinta { display: flex; width: max-content; padding: 8px 0 28px; animation: desfile 90s linear infinite; }
.op-carril:hover .op-cinta, .op-carril:focus-within .op-cinta { animation-play-state: paused; }
.op { margin: 0; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.op-cinta .op { width: 350px; flex: none; margin-right: 20px; }
.op blockquote { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.55; flex: 1; }
.op figcaption { display: flex; flex-direction: column; font-size: 13.5px; color: var(--tinta-3); }
.op figcaption b { color: var(--tinta); font-size: 15px; font-weight: 600; }
.op-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.op-pie { margin-top: 8px; }
.op-tres + .op-pie { margin-top: 28px; }
.ig-grilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 36px; }
.ig-grilla a { position: relative; display: block; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--sombra); background: #e6ebee; }
.ig-grilla img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--curva); }
.ig-grilla span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(1,124,141,.72); color: #fff; opacity: 0; transition: opacity .3s; }
.ig-grilla span svg { width: 34px; height: 34px; transform: scale(.8); transition: transform .4s var(--curva); }
.ig-grilla a:hover img, .ig-grilla a:focus-visible img { transform: scale(1.06); }
.ig-grilla a:hover span, .ig-grilla a:focus-visible span { opacity: 1; }
.ig-grilla a:hover span svg, .ig-grilla a:focus-visible span svg { transform: scale(1); }
.pie-redes { display: flex; gap: 10px; margin-top: 18px; }
.pie .pie-redes a:hover { transform: translateY(-2px); }
.pie .pie-redes a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); padding: 0; transition: background .25s, color .25s, transform .3s var(--curva); }
.pie .pie-redes a:hover { background: var(--marca); color: #fff; transform: translateY(-2px); }
.pie-redes svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .op-cinta { padding-left: 24px; }
  .op-copia { display: none; }
}
@media (max-width: 980px) {
  .op-sec, .ig-sec { padding: 56px 0; }
  .ig-sec { padding-top: 0; }
  .op-tres { grid-template-columns: 1fr; }
  .ig-grilla { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .op-cinta .op { width: 290px; }
}

/* ---- Banner del inicio (reparaciones que van pasando) ---- */
.bn .envoltura { align-items: center; }
.bn-textos { display: grid; }
.bn-texto { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--curva), transform .6s var(--curva), visibility .5s; }
.bn-texto.activo { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; }
.bn-tit { font-size: clamp(36px, 5vw, 58px); font-weight: 700; letter-spacing: -.018em; line-height: 1.08; color: var(--tinta); margin: 0; text-wrap: balance; }
.bn-texto .bajada { min-height: 3.2em; }
.bn-texto .botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.bn-pistas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.bn-pistas button { position: relative; overflow: hidden; font: inherit; font-size: 14px; font-weight: 600; color: var(--tinta-2); padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--borde); cursor: pointer; transition: color .25s, background .25s, box-shadow .25s; }
.bn-pistas button:hover { color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.bn-pistas button.activo { color: #fff; background: var(--tinta); box-shadow: none; }
.bn-pistas button span { position: relative; z-index: 1; }
.bn-pistas button i { position: absolute; inset: 0; background: var(--marca); transform: scaleX(0); transform-origin: left; }
.bn-pistas button.activo i { animation: bn-avance 3.5s linear forwards; }
.bn.pausa .bn-pistas button.activo i { animation-play-state: paused; }
@keyframes bn-avance { to { transform: scaleX(1); } }
.bn-visual { position: relative; }
.bn-marco { position: relative; aspect-ratio: 5 / 4.4; border-radius: 30px; overflow: hidden; background: #0f2a2f; box-shadow: var(--sombra-alta); }
.bn-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--curva), transform 4.5s linear; }
.bn-foto.activo { opacity: 1; transform: scale(1); }
.bn-visual .burbuja { left: -18px; bottom: 26px; text-decoration: none; color: inherit; }
.bn .cifras { margin-top: 34px; }
@media (max-width: 980px) {
  .bn .envoltura { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .bn-visual { order: -1; }
  .bn-marco { aspect-ratio: 16 / 10; border-radius: 22px; }
  .bn-visual .burbuja { left: 12px; bottom: 12px; padding: 8px 12px; }
  .bn-pistas { flex-wrap: nowrap; overflow-x: auto; margin: 22px -24px 0; padding: 0 24px 4px; scrollbar-width: none; }
  .bn-pistas::-webkit-scrollbar { display: none; }
  .bn-pistas button { flex: none; }
  .bn-texto .bajada { min-height: 4.8em; }
}
@media (prefers-reduced-motion: reduce) { .bn-foto { transform: none; } .bn-pistas button.activo i { animation: none; transform: scaleX(1); } }

/* ---- Tienda: buscador de repuestos por modelo ---- */
.t-rb { background: var(--blanco); border-radius: 26px; box-shadow: var(--sombra); padding: 26px; margin-top: 34px; }
.t-rb-campo { display: flex; align-items: center; gap: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--borde); padding: 8px 14px; transition: box-shadow .25s; }
.t-rb-campo:focus-within { box-shadow: inset 0 0 0 2px var(--marca); }
.t-rb-campo input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 19px; font-weight: 600; background: none; padding: 8px 0; min-width: 0; text-transform: uppercase; }
.t-rb-campo input::placeholder { font-weight: 400; text-transform: none; color: var(--tinta-3); }
.t-rb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.t-rb-chips button { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 0; background: var(--fondo); color: var(--tinta-2); cursor: pointer; transition: all .2s; }
.t-rb-chips button:hover { background: var(--marca-suave); color: var(--marca); }
.t-rb-chips button.activo { background: var(--tinta); color: #fff; }
.t-rb-res { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 18px; display: grid; gap: 10px; }
.t-rb-vacio { color: var(--tinta-3); font-size: 15.5px; }
.t-rb-tit { font-size: 20px; margin-bottom: 4px; }
.t-rb-fila { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--fondo); }
.t-rb-info b { display: block; font-size: 16px; } .t-rb-info small { color: var(--tinta-3); font-size: 13.5px; }
.t-rb-precio { text-align: right; display: grid; gap: 4px; justify-items: end; } .t-rb-precio b { font-size: 20px; letter-spacing: -.02em; }
.t-sello { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.t-sello.si { background: #e3f6ea; color: #17803d; } .t-sello.no { background: #fdf1dc; color: #9a6a0c; }
.t-grilla-cuatro { grid-template-columns: repeat(4, 1fr); }
.t-rep-precio .precio { font-size: 24px; margin: 2px 0; }
@media (max-width: 980px) {
  .t-rb { padding: 18px; border-radius: 20px; }
  .t-rb-fila { grid-template-columns: auto 1fr; }
  .t-rb-precio { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .t-rb-fila .btn { grid-column: 1 / -1; justify-content: center; }
  .t-grilla-cuatro { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .t-grilla-cuatro { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .encabezado .envoltura { height: 68px; } .logo img, .encabezado.con-sombra .logo img { height: 40px; } .cajon { inset: 68px 0 0; } }

/* ---- Tienda: dónde está el modelo (dibujo de la base) ---- */
.t-donde { display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: 40px; align-items: center; }
.t-donde-fig { margin: 0; }
.t-donde-fig svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(16,24,32,.12)); }
.t-donde-fig figcaption { font-size: 13.5px; color: var(--tinta-3); margin-top: 10px; text-align: center; }
.td-onda { transform-box: fill-box; transform-origin: center; animation: td-onda 2.2s ease-out infinite; }
@keyframes td-onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
@media (max-width: 980px) { .t-donde { grid-template-columns: 1fr; gap: 18px; } .t-donde-fig { max-width: 420px; } }
@media (prefers-reduced-motion: reduce) { .td-onda { animation: none; opacity: 0; } }

.t-etq-pedido { background: #fdf1dc; color: #9a6a0c; }

/* ---- Tablas de modelos (lo mismo que los buscadores, legible sin JavaScript: Google y asistentes de IA) ---- */
.r-tabla-modelos { max-width: none; }
.r-tabla-modelos .r-resp > div { overflow-x: auto; }
.r-tabla-modelos table { min-width: 560px; }
.r-tabla-modelos caption { caption-side: bottom; padding: 12px 6px 0; text-align: left; font-size: 13.5px; color: var(--tinta-3); }
.r-tabla-modelos td:nth-child(2), .r-tabla-modelos th:nth-child(2) { text-align: left; }
.r-tabla-modelos td:first-child { font-weight: 700; white-space: nowrap; }

/* ---- Ingreso (/ingreso: formulario por pasos que arma el mensaje de WhatsApp) ---- */
.in-cab-ingreso { padding-bottom: 72px; }
.ig-sec-form { margin-top: -48px; padding-top: 0; position: relative; }
.ig-ancho { max-width: 820px; }
.ig-form { position: relative; }
.ig-form [hidden] { display: none !important; }
body:has(#ingreso) .barra-cel { display: none; }   /* en el formulario la barra fija taparía los botones de «Seguir» */
.ig-pasos { list-style: none; display: none; gap: 8px; padding: 0; margin: 0 0 26px; }
.ig-js .ig-pasos { display: flex; }
.ig-pasos li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--fondo); color: var(--tinta-3); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .3s, color .3s; }
.ig-pasos li span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blanco); font-size: 13px; transition: background .3s, color .3s; }
.ig-pasos li.activo { background: var(--marca-suave); color: var(--marca); }
.ig-pasos li.activo span, .ig-pasos li.hecho span { background: var(--marca); color: #fff; }
.ig-pasos li.hecho { color: var(--tinta-2); }
.ig-paso + .ig-paso { margin-top: 34px; }
.ig-js .ig-paso { display: none; margin-top: 0; }
.ig-js .ig-paso.activo { display: block; animation: ig-entra .45s var(--curva) both; }
.ig-js .ig-paso.activo.ig-desde-izq { animation-name: ig-entra-izq; }
@keyframes ig-entra { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes ig-entra-izq { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.ig-grupo { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.ig-grupo legend { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); margin-bottom: 14px; padding: 0; }
.ig-grupo legend small, .ig-form .in-campo label small { font-weight: 500; font-size: 13.5px; color: var(--tinta-3); margin-left: 6px; }
.ig-fichas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ig-ficha { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 118px; padding: 18px 16px; border-radius: 20px; background: var(--fondo); cursor: pointer; box-shadow: inset 0 0 0 1.5px transparent; transition: transform .25s var(--curva), background .25s, box-shadow .25s; }
.ig-ficha b { font-size: 16px; line-height: 1.25; font-weight: 600; }
.ig-ficha input, .ig-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ig-ficha:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.ig-ficha:has(input:checked) { background: var(--marca); color: #fff; box-shadow: 0 10px 24px rgba(1,124,141,.3); }
.ig-ficha:has(input:checked) .ico { background: rgba(255,255,255,.18); color: #fff; }
.ig-ficha:has(input:focus-visible), .ig-chips label:has(input:focus-visible) span { outline: 3px solid rgba(1,124,141,.35); outline-offset: 2px; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ig-chips label { position: relative; cursor: pointer; }
.ig-chips span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--fondo); font-weight: 600; font-size: 15.5px; color: var(--tinta); box-shadow: inset 0 0 0 1.5px transparent; transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--curva); }
.ig-chips label:hover span { box-shadow: inset 0 0 0 1.5px var(--marca); }
.ig-chips input:checked + span { background: var(--marca); color: #fff; }
.ig-chips input:checked + span::before { content: "✓"; margin-right: 8px; font-weight: 700; }
#ig-fallas:not([hidden]) { animation: ig-aparece .4s var(--curva) both; }
@keyframes ig-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ig-mojo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fdf0ec; color: var(--tinta-2); font-size: 15px; }
.ig-mojo .ico { background: rgba(224,93,63,.14); color: var(--coral); width: 34px; height: 34px; }
.ig-mojo a { color: var(--coral); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ig-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.ig-nav .btn { border: 0; cursor: pointer; font-family: inherit; }
.ig-nav .btn-2 { margin-right: auto; }
.ig-form:not(.ig-js) .ig-nav [data-ir] { display: none; }
.ig-ayuda { font-size: 13px; color: var(--tinta-3); }
.ig-error { font-size: 14px; font-weight: 600; color: var(--coral); margin-top: 8px; }
.ig-form .con-error input, .ig-form .con-error textarea { border-color: var(--coral); }
.ig-extras { margin: 24px 0 0; }
.ig-extras legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ig-check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border-radius: 14px; cursor: pointer; font-size: 15.5px; transition: background .2s; }
.ig-check:hover, .ig-check:has(input:checked) { background: var(--fondo); }
.ig-check input { width: 20px; height: 20px; flex: none; accent-color: var(--marca); }
.ig-previa { margin-top: 22px; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: #e7f6e9; }
.ig-previa-t { display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #2f7d47; margin-bottom: 6px; }
.ig-previa p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; color: var(--tinta); }
.ig-form:not(.ig-js) .ig-previa { display: none; }
.ig-enviado { margin-top: 16px; font-weight: 600; color: var(--marca); }
.ig-privado { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--borde); font-size: 13.5px; color: var(--tinta-3); }
.cta .cta-otro { display: block; margin-top: 18px; color: rgba(255,255,255,.85); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.cta .cta-otro:hover { color: #fff; }
@media (max-width: 720px) {
  .ig-fichas { grid-template-columns: 1fr 1fr; }
  .ig-ficha { min-height: 104px; padding: 16px 14px; }
  .ig-pasos li { flex-direction: column; gap: 6px; padding: 10px 6px; font-size: 12.5px; text-align: center; }
  .ig-nav .btn { flex: 1; justify-content: center; padding-left: 16px; padding-right: 16px; }
  .ig-nav .btn-2 { flex: 0 0 auto; }
  .ig-chips span { min-height: 46px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-js .ig-paso.activo, #ig-fallas:not([hidden]) { animation: none; }
  .ig-ficha, .ig-chips span { transition: none; }
}