/* =========================================================
   Diseño: tipos de disposición (wireframes) y principios
   ========================================================= */
.w-frame { --g: 8px; width: 100%; max-width: 620px; height: 340px; margin: 0 auto; background: #fff; border: 6px solid #1f2937; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: max-width .4s cubic-bezier(.2,0,0,1); }
.w-nav { flex: none; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #e5e7eb; }
.w-logo { width: 38px; height: 9px; border-radius: 5px; background: #1f2937; margin-right: auto; }
.w-nav i { width: 26px; height: 5px; border-radius: 3px; background: #cbd5e1; }
.w-body { flex: 1; min-height: 0; padding: var(--g); display: grid; gap: var(--g); overflow: hidden; position: relative; }
.w-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; min-height: 0; }
.w-ln { display: block; height: 5px; border-radius: 3px; background: #e2e8f0; margin: 4px 0; width: 90%; }
.w-ln.s { width: 60%; } .w-ln.m { width: 75%; } .w-ln.xs { width: 40%; } .w-ln.c { margin-left: auto; margin-right: auto; background: rgba(255,255,255,.7); }
.w-t { display: block; height: 9px; width: 55%; border-radius: 4px; background: #1f2937; margin: 4px 0 6px; }
.w-btn { display: block; width: 52px; height: 14px; border-radius: 7px; background: var(--azul); margin-top: 6px; }
.w-in { display: block; height: 14px; border: 1px solid #cbd5e1; border-radius: 4px; margin: 5px 0; }
.pad { padding: 8px; }
.w-over { position: absolute; left: 16px; bottom: 16px; padding: 10px 12px; border-radius: 6px; background: rgba(15,23,42,.55); width: 45%; }
.w-over .w-t { background: #fff; } .w-over.c { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); text-align: center; }
.w-over.c .w-t, .w-over.c .w-btn { margin-left: auto; margin-right: auto; }
/* Cada disposición */
.lay-reticula .w-body { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.w-cell { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.lay-dividida .w-body { grid-template-columns: 1fr 1fr; padding: 0; gap: 0; }
.w-half { min-height: 0; } .w-half.pad { padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.w-half .w-img { border-radius: 0; }
.lay-asimetrica .w-body { grid-template-columns: 2fr 1fr; }
.w-big { position: relative; min-height: 0; }
.lay-completa .w-body { padding: 0; } .w-full { position: relative; min-height: 0; } .w-full .w-img { border-radius: 0; filter: brightness(.75); }
.lay-horizontal .w-body { display: block; padding: var(--g) 0 var(--g) var(--g); }
.w-hscroll { display: flex; gap: 8px; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.w-hcard { flex: 0 0 38%; scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; }
.w-arrow { position: absolute; right: 10px; top: 45%; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); display: grid; place-items: center; font-weight: 700; }
.lay-tarjetas .w-body { grid-template-columns: repeat(3, 1fr); background: #f3f4f8; }
.w-card { background: #fff; border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s, box-shadow .2s; min-height: 0; }
.w-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px -6px rgba(0,0,0,.3); }
.w-card .w-img { border-radius: 0; }
.lay-revista .w-body { grid-template-columns: 1.6fr 1fr; }
.w-lead { display: grid; grid-template-rows: 1fr auto; min-height: 0; } .w-lead .w-t { width: 80%; height: 12px; }
.w-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; }
.w-mini { display: grid; grid-template-columns: 40% 1fr; gap: 6px; min-height: 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
.lay-galeria .w-body { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 4px; padding: 4px; }
.w-img.g { border-radius: 0; }
.lay-zigzag .w-body { grid-template-rows: repeat(3, 1fr); }
.w-zz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; min-height: 0; }
.w-zz .w-img { height: 100%; } .w-zz.r .w-img { order: 2; }
.lay-patron-f .w-body { display: block; }
.w-fpat { height: 100%; } .w-fpat .w-t { margin-top: 10px; }
.w-eye, .pr-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.w-eye path, .pr-path path { fill: none; stroke: #f97316; stroke-width: 1.4; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; stroke-width: 3; opacity: .85; }
.w-eye path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: eyeDraw 3s ease-in-out infinite; }
@keyframes eyeDraw { 60%, 100% { stroke-dashoffset: 0; } }
.lay-interactiva .w-body { grid-template-columns: 1.2fr 1fr; }
.w-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .w-tabs i { flex: 1; height: 16px; border-bottom: 2px solid #e5e7eb; } .w-tabs i.on { border-color: var(--azul); }
.w-slider { position: relative; height: 4px; background: #c7d2fe; border-radius: 2px; margin: 18px 0; }
.w-slider i { position: absolute; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--azul); animation: wSlide 3s ease-in-out infinite alternate; }
@keyframes wSlide { from { left: 10%; } to { left: 80%; } }
.w-chips { display: flex; gap: 6px; margin-bottom: 12px; } .w-chips i { width: 40px; height: 16px; border-radius: 8px; border: 1px solid #cbd5e1; } .w-chips i.on { background: #dbeafe; border-color: transparent; }
.w-inter-img { min-height: 0; }
.lay-animada .w-body { padding: 0; }
.w-anim { position: relative; height: 100%; overflow: hidden; background: #0f172a; }
.w-anim .w-img { position: absolute; inset: 0; border-radius: 0; opacity: 0; animation: wFade 6s infinite; }
.w-anim .a2 { animation-delay: 2s; } .w-anim .a3 { animation-delay: 4s; }
@keyframes wFade { 0% { opacity: 0; transform: scale(1.1); } 8%, 33% { opacity: .8; } 41%, 100% { opacity: 0; transform: scale(1); } }
.w-anim .a4 { animation: wUp 2s ease-out infinite alternate; }
@keyframes wUp { from { transform: translate(-50%, -30%); opacity: .4; } to { transform: translate(-50%, -50%); opacity: 1; } }
.lay-z .w-body { display: block; }
.w-zpat { height: 100%; display: flex; flex-direction: column; } .w-zmid { flex: 1; min-height: 0; margin: 8px 0; } .w-zpat > .w-btn:last-child { align-self: flex-end; }
/* Vista celular */
.lay-hero { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.lay-pick { flex-wrap: wrap; justify-content: center; border-radius: 14px; }
.lay-pick button { font-size: .76rem; padding: 7px 11px; }
.lay-stage { width: 100%; }
.lay-stage.mobile .w-frame { max-width: 220px; height: 400px; border-radius: 22px; }
.lay-stage.mobile .w-body { grid-template-columns: 1fr !important; grid-template-rows: none; grid-auto-rows: minmax(70px, 1fr); }
.lay-stage.mobile .lay-reticula .w-body, .lay-stage.mobile .lay-tarjetas .w-body, .lay-stage.mobile .lay-galeria .w-body { grid-template-columns: 1fr 1fr !important; }
.lay-stage.mobile .w-zz { grid-template-columns: 1fr; } .lay-stage.mobile .w-zz.r .w-img { order: 0; }
.lay-stage.mobile .w-hcard { flex-basis: 78%; }
.lay-stage.mobile .w-over { width: 70%; }
.lay-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.lay-item .w-frame { height: 260px; }
.lay-info p { margin: 0 0 10px; }
.lay-info .use, .lay-info .tip { font-size: .92rem; padding-left: 10px; border-left: 3px solid var(--verde); }
.lay-info .tip { border-color: var(--azul); }
.lay-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lay-pill { padding: 7px 14px; border: 1px solid #cbd5e1; border-radius: 18px; text-decoration: none; color: #1f2937; font: 500 .84rem "Roboto", sans-serif; }
.lay-pill:hover { border-color: var(--azul); color: var(--azul); }
.lay-quiz { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lq { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.lq p { margin: 0 0 10px; }
.lq-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.lq-ops button { border: 1px solid #cbd5e1; background: #fff; border-radius: 16px; padding: 6px 12px; font: 500 .82rem "Roboto", sans-serif; cursor: pointer; }
.lq-ops button.ok { background: #dcfce7; border-color: #15803d; color: #14532d; }
.lq-ops button.no { background: #fee2e2; border-color: #b91c1c; color: #7f1d1d; }
.lq-fb { margin: 8px 0 0 !important; font-size: .86rem; min-height: 1.2em; }
/* Principios */
.pr-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pr-eye-demo { position: relative; width: 100%; max-width: 620px; }
.pr-path path { stroke-dasharray: 600; stroke-dashoffset: 600; display: none; }
.pr-eye-demo[data-eye="z"] .z, .pr-eye-demo[data-eye="f"] .f { display: block; animation: eyeDraw 3.2s ease-in-out infinite; }
.pr-weight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; text-align: center; }
.pw b { display: block; font: 500 .95rem "Roboto", sans-serif; } .pw small { color: #6b7280; font-size: .82rem; }
.pw-pair { height: 90px; display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 8px; background: #f8fafc; border-radius: 8px; }
.pw-pair i { width: 34px; height: 34px; background: #cbd5e1; border-radius: 6px; }
.size i:last-child { width: 60px; height: 60px; } .color i:last-child { background: #f97316; } .contrast i:last-child { background: #111827; }
.isolation { justify-content: space-between; padding: 0 14px; } .isolation i { width: 16px; height: 16px; } .isolation i:first-child { box-shadow: 20px 0 #cbd5e1, 40px 0 #cbd5e1, 0 20px #cbd5e1, 20px 20px #cbd5e1, 40px 20px #cbd5e1; margin-top: -20px; }
.shape i:last-child { border-radius: 50% 10% 50% 10%; background: #94a3b8; transform: rotate(20deg); }
.density i:last-child { background: repeating-linear-gradient(45deg, #475569 0 3px, #cbd5e1 3px 6px); }
.pr-thirds { position: relative; max-width: 560px; border-radius: 10px; overflow: hidden; }
.pr-thirds img { width: 100%; display: block; }
.pr-grid { position: absolute; inset: 0; transition: opacity .3s; }
.pr-grid i { position: absolute; background: rgba(255,255,255,.85); }
.pr-grid i:nth-child(1) { left: 33.3%; top: 0; bottom: 0; width: 2px; } .pr-grid i:nth-child(2) { left: 66.6%; top: 0; bottom: 0; width: 2px; }
.pr-grid i:nth-child(3) { top: 33.3%; left: 0; right: 0; height: 2px; } .pr-grid i:nth-child(4) { top: 66.6%; left: 0; right: 0; height: 2px; }
.pr-dot { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 3px solid #f97316; background: rgba(249,115,22,.3); transition: opacity .3s; }
.pr-thirds.off .pr-grid, .pr-thirds.off .pr-dot { opacity: 0; }
.pr-ws { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.ws-card { width: 240px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; font-family: "Roboto", sans-serif; }
.ws-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.ws-card b { display: block; } .ws-card span { display: inline-block; background: var(--azul); color: #fff; border-radius: 16px; font-size: .8rem; }
.ws-card.tight b { margin: 2px 4px 0; } .ws-card.tight p { margin: 0 4px; font-size: .82rem; } .ws-card.tight span { margin: 2px 4px 4px; padding: 2px 8px; }
.ws-card.roomy b { margin: 16px 16px 8px; } .ws-card.roomy p { margin: 0 16px 16px; font-size: .88rem; color: #4b5563; line-height: 1.5; } .ws-card.roomy span { margin: 0 16px 16px; padding: 8px 16px; }
.pr-resp { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.pr-resp > div { display: flex; flex-direction: column; align-items: center; gap: 6px; } .pr-resp small { color: #6b7280; font-size: .8rem; }
.rp-frame { display: grid; gap: 4px; padding: 6px; border: 4px solid #1f2937; border-radius: 10px; background: #fff; }
.rp-frame i { background: #dbeafe; border-radius: 3px; height: 30px; }
.rp-frame.m { width: 80px; grid-template-columns: 1fr; } .rp-frame.t { width: 150px; grid-template-columns: 1fr 1fr; } .rp-frame.d { width: 230px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .lay-item { grid-template-columns: 1fr; }
  .pr-weight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .w-frame, .lay-item .w-frame { height: 240px; }
  .lay-reticula .w-body, .lay-tarjetas .w-body { grid-template-columns: repeat(2, 1fr); }
  .lay-galeria .w-body { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .w-eye path, .pr-path path, .w-slider i, .w-anim .w-img, .w-anim .a4 { animation: none; stroke-dashoffset: 0; }
  .w-anim .a1 { opacity: .8; }
}