@font-face{font-family:Lato;src:url(fuentes/Lato-Regular.ttf);font-weight:400}
@font-face{font-family:Lato;src:url(fuentes/Lato-Bold.ttf);font-weight:700}
@font-face{font-family:Montserrat;src:url("fuentes/Montserrat-Italic[wght].ttf");font-weight:100 900;font-style:italic}
:root{--navy:#1B1A5E;--slate:#5F666D}
*{box-sizing:border-box}body{margin:0;font:18px Lato,sans-serif;color:var(--navy);background:#fff}
header,main,footer{max-width:640px;margin:0 auto;padding:12px 16px}
h1,h2{font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;margin:.3em 0}h1{font-size:1.7rem}h2{font-size:1.2rem}
header p,footer p{color:var(--navy);margin:.2em 0}footer{border-top:1px solid var(--slate);font-size:.85rem}
button,select{display:block;width:100%;min-height:52px;margin:8px 0;font:inherit;border:2px solid var(--navy);border-radius:8px;background:#fff;color:var(--navy);padding:8px 12px;text-align:left}
button.p,a.btn{background:var(--navy);color:#fff;text-align:center;text-decoration:none;display:block;padding:14px;border-radius:8px;margin:8px 0}
.res{border:2px solid var(--navy);border-radius:8px;padding:12px;margin:10px 0}.res b{font-size:1.4rem}.pesado{font-size:.9rem;border-top:1px solid var(--slate);margin-top:10px;padding-top:8px}
small,.nota{color:var(--slate);font-size:.85rem}
label.q{display:block;font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;font-size:1.2rem;margin:.3em 0}
button .cod{display:block;margin-top:2px}button.atras{border:0;background:none;text-decoration:underline;width:auto;min-height:44px;padding:8px 0;font-weight:700}
.elec{padding-left:20px;margin:6px 0}.aviso{border-left:4px solid var(--navy);padding:6px 10px;margin:10px 0}
/* V2 visual (T049): tarjetas con imagen (T090: se quitó el banner viejo y su .marca; la cabecera es la del marco) */
header,main,footer{max-width:760px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:10px 0}
button.card{margin:0;padding:8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}button.card:hover,button.card:focus{background:#f2f2f7}
button.card .t{font-weight:700;line-height:1.2}button.card.ancha{margin:8px 0}
.fig{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}.sinimg{display:flex;align-items:center;justify-content:center;background:#eef0f2;color:var(--slate);font-size:.8rem}
button.card.ancha .fig{max-width:240px}
.foto{display:block;width:100%;max-width:320px;margin:0 auto 8px;aspect-ratio:4/3;object-fit:contain}.res .sinimg{max-width:320px;margin:0 auto 8px;aspect-ratio:4/3}
.tipo{font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;font-size:1.3rem;margin:.2em 0}
.paso{margin:.3em 0 0;font-weight:700;color:var(--slate);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.ruta{margin:.1em 0;color:var(--slate);font-size:.9rem}
/* Ronda 4 (T049, P2 de Ariadna): jerarquía, foco visible, imagen pendiente discreta */
h1{font-size:1.3rem}h2,label.q{font-size:1.5rem}.tipo{font-size:1.05rem}
.res b{font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;font-size:2rem}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}[tabindex="-1"]:focus{outline:none}
.pend{display:block;margin:0 0 6px}
.linea{margin:.4em 0 .25em;font-weight:700;font-size:.95rem}
/* T060: inicio y selector de supresores (solo clases nuevas) */
a.inicio{display:inline-block;min-height:44px;line-height:44px;color:var(--navy);font-weight:700;text-decoration:underline}
a.tarjeta-enlace{display:block;border:2px solid var(--navy);border-radius:8px;padding:16px;margin:12px 0;color:var(--navy);text-decoration:none;min-height:52px}
a.tarjeta-enlace:hover,a.tarjeta-enlace:focus{background:#f2f2f7}
a.tarjeta-enlace .t{display:block;font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;font-size:1.3rem}
a.tarjeta-enlace .d{display:block;margin-top:4px}
.opc{display:flex;align-items:flex-start;gap:10px;min-height:52px;margin:8px 0;padding:8px 12px;border:2px solid var(--navy);border-radius:8px}
.opc input{width:24px;height:24px;margin-top:2px;flex:none}
.guia{border-left:4px solid var(--navy);padding:6px 10px;margin:10px 0;font-size:.95rem}
table.tg,table.car{width:100%;border-collapse:collapse;margin:8px 0;font-size:.92rem}
table.tg td,table.car td,table.car th{border-top:1px solid var(--slate);padding:6px 4px;vertical-align:top;text-align:left}
table.tg td:first-child{font-weight:700;white-space:nowrap}
table.car th{font-weight:700;width:38%}
table.car small{display:block}
.mod{border:2px solid var(--navy);border-radius:8px;padding:12px;margin:12px 0}
.mod h3{font-family:Montserrat,sans-serif;font-style:italic;font-weight:900;font-size:1.4rem;margin:0}
.mod ul{padding-left:20px;margin:4px 0}.mod .lleva{font-weight:700;margin:8px 0}
.mod .dif{border-left:4px solid var(--slate);padding:4px 8px;margin:8px 0;font-size:.9rem}
/* T060 r2 (P2 de Ariadna): presentación */
h1.g{font-size:1.5rem}
#app button:not(.card) .t{display:block;font-weight:700}#app button:not(.card) .d{display:block}
.mod .lleva{border:2px solid var(--navy);border-radius:6px;padding:4px 8px;display:block}.mod .lleva.opcion{border-style:dashed}
.mod .imax{margin:.4em 0}.mod .fq{display:block}
details.mas{margin:8px 0}details.mas summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;text-decoration:underline}
.cmpw{overflow-x:auto}table.cmp th[scope=col]{text-align:left;border-bottom:2px solid var(--navy);padding:6px 4px}table.cmp th[scope=row]{width:auto;min-width:96px;position:sticky;left:0;background:#fff;z-index:1}table.cmp th.oculto{position:sticky;left:0;background:#fff;font-size:0}table.cmp td{min-width:96px}h3.cmpt{margin:14px 0 4px}

p.desliza{font-size:.85em;margin:2px 0 4px;color:#555}
/* T060 r6: foto de referencia por serie en tarjetas y comparativa */
.mod figure.foto{margin:8px 0;text-align:center}.mod figure.foto img{width:150px;height:auto;max-width:45%;display:block;margin:0 auto}
.mod figure.foto figcaption{font-size:.8rem;color:#555;margin-top:4px}
table.cmp th figure.mini{margin:0 0 4px}table.cmp th figure.mini img{width:56px;height:auto;display:block}

.mod .pdfs{margin:6px 0;font-size:.95rem;line-height:1.8}.mod .pdfs a,.cmp th a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* T077: la figura mini de la comparativa no hereda el 100 % y 4/3 de .foto (alineaba mal los nombres); botón de la ficha Serie M */
table.cmp th figure.mini{width:auto;aspect-ratio:auto}
.mod a.ficha-m{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;margin:10px 0;padding:10px 14px;border:2px solid var(--navy);border-radius:8px;background:#fff;color:var(--navy);font-weight:700;font-size:1.15rem;text-align:center;text-decoration:none}
.mod a.ficha-m .d{font-weight:400;font-size:.8rem;color:var(--slate)}
.mod a.ficha-m:hover,.mod a.ficha-m:focus{background:#f2f2f7}

/* T090 · Perfil público temporal («por confirmar»): dirección A «Marco sobrio» + portada navy de B solo en escritorio.
   marco-oisa.css es copia sin cambios del de la calculadora (../calculadora-precios/marco/marco-oisa.css, T084): el original
   manda; si cambia allá, se vuelve a copiar aquí tal cual y no se edita en esta carpeta. */
:root{--fondo:#F4F5F7;--borde:#D5D8DD;--sombra:0 1px 2px rgba(27,26,94,.06),0 4px 14px rgba(27,26,94,.07);
}
/* Rótulo de la cabecera «Asesoría OISA» (confirmado por Christopher el 2026-10-20): va escrito en el <span class="marca-rotulo"> de las tres páginas. */
body{background:var(--fondo)}
/* marco dentro de las páginas del selector: anula el ancho de 760 de header,main,footer */
header.marco,footer.pie{max-width:none;padding:0;margin:0}
header.marco .marca{flex:1 1 auto;margin:0}
header.marco .header-inner{display:flex;align-items:center;gap:16px;max-width:1080px;padding-bottom:6px}
.cab-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
.cab-wa .pie-icono{stroke:#fff}
.cab-wa:hover{background:#2A2980}
/* portada: título grande, foto de producto a la derecha */
.portada{background:#fff;border-bottom:1px solid var(--borde)}
.portada-in{max-width:1080px;margin:0 auto;padding:28px 24px 24px;display:flex;align-items:center;gap:24px}
.portada-txt{flex:1}
.portada h1,.portada h1.g{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:.1em 0 .2em}
.portada p{color:#404850;font-size:1.1rem;margin:0}
.portada a.inicio{min-height:44px;line-height:44px;font-size:.95rem}
.portada-foto{width:220px;max-width:34%;aspect-ratio:4/3;object-fit:contain}
main{max-width:1080px;padding:24px}
/* pasos y preguntas */
.paso{display:inline-block;background:#E9EAF3;color:var(--navy);border-radius:999px;padding:4px 12px;font-size:.78rem}
h2,label.q{font-size:clamp(1.4rem,3vw,1.9rem)}
/* tarjetas */
button,select,.opc,.res,.mod,a.tarjeta-enlace{border:1px solid var(--borde);border-radius:12px;background:#fff;box-shadow:var(--sombra)}
button:hover,a.tarjeta-enlace:hover,button.card:hover{border-color:var(--navy);background:#fff}
.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
button.card{padding:12px 12px 16px}
button.card .fig{border-radius:8px;background:#F8F9FA}
button.card .t{font-size:1.05rem;margin-top:6px}
button.atras{box-shadow:none}
a.tarjeta-enlace{padding:20px 22px;margin:16px 0;display:flex;flex-direction:column;justify-content:center;min-height:110px}
a.tarjeta-enlace .t{font-size:1.5rem}
/* llamada a cotizar */
a.btn,button.p{background:var(--navy);border-radius:999px;padding:16px 20px;font-weight:700;font-size:1.05rem;box-shadow:var(--sombra)}
.res b{font-size:2.4rem}
/* pie */
footer.pie{background:#fff}
.pie-nota{flex:1 1 100%;margin:0 0 8px;color:#404850;font-size:.9rem}
.pie .ver{max-width:1220px;margin:0 auto;padding:0 24px 12px;color:var(--slate);font-size:.8rem}
/* WhatsApp flotante: solo celular, como barra inferior */
.wa-flota{display:none}
button.card{min-width:0}.portada h1{overflow-wrap:anywhere}html,body{overflow-x:hidden}
button.card.ancha .fig{max-width:none}
/* escritorio (≥801 px): portada navy de la dirección B, foto en recuadro blanco */
@media(min-width:801px){
  header.marco{border-bottom:0}
  .portada{background:var(--navy);color:#fff;border-bottom:0}
  .portada-in{padding:36px 24px;gap:32px}
  .portada h1,.portada h1.g{color:#fff;font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:.1em 0 .25em}
  .portada p{color:#DADBEA;font-size:1.15rem}
  .portada a.inicio{color:#fff}
  .portada a.inicio:focus-visible{outline-color:#fff}
  .portada-foto{width:300px;max-width:38%;background:#fff;border-radius:12px;padding:10px}
}
@media(max-width:800px){
  .cab-wa span{display:none}.cab-wa{padding:0}
  header.marco .header-inner{padding-bottom:8px}
  .portada-in{padding:18px 16px 16px;gap:12px}
  .portada-foto{width:96px}
  main{padding:16px 16px 88px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  small,.nota{font-size:.9rem}
  /* resultado de molde: la foto no empuja el código fuera de la primera pantalla */
  .res .foto,.res .sinimg{max-width:140px}
  .wa-flota{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:12px;right:12px;max-width:480px;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom));min-height:54px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(27,26,94,.3);z-index:10}
  .wa-flota .pie-icono{stroke:#fff;width:22px;height:22px}
  .wa-flota span::before{content:"¿Dudas? Escríbenos por "}
  /* si la pantalla ya trae su botón de cotizar (resultado), la barra fija sobra */
  body:has(#app a.btn) .wa-flota{display:none}
  html{scroll-padding-bottom:84px} /* T090 P2-1 de Talos: el foco no queda bajo la barra fija */
  footer.pie{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* T099 · 1) tabla comparativa Citel: columnas M, MS y MP del mismo ancho (el texto largo se parte dentro de su celda);
   2) nombre «Selector de moldes Thermoweld» en 2 líneas como máximo a 320 px (el texto no cambia). */
table.cmp{table-layout:fixed;width:100%;min-width:480px}
table.cmp th.oculto{width:24%}
table.cmp th[scope=col]:not(.oculto){width:25.333%}
table.cmp th,table.cmp td{overflow-wrap:anywhere;min-width:0}
@media(max-width:360px){
  .marca{gap:8px}
  .marca img{height:38px}
  header.marco .header-inner{gap:8px;padding-left:10px;padding-right:10px}
  .app-name{font-size:14px}
}