/* Réplica visual de la plantilla en la Home. No es el tablero interactivo de la app. */
.tablet-screen{min-height:0}
.template-board{position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:1.52;background:#f8fafc;overflow:hidden;color:#172033;font-family:Arial,Helvetica,sans-serif}
.tb-output{position:relative;height:18%;min-height:0;flex-shrink:0;display:flex;align-items:center;gap:1%;background:#fff;border-bottom:1px solid #cfd8df;padding:1.2%;overflow:hidden}
.tb-morph{color:#475569;font-weight:700;font-size:clamp(6px,.8vw,10px);white-space:nowrap}
.tb-placeholder{color:#94a3b8;font-style:italic;font-size:clamp(6px,.85vw,12px);white-space:nowrap}
.tb-placeholder[hidden]{display:none}
.tb-tokens{display:flex;align-items:center;gap:1%;height:100%;min-width:0}
.tb-token{height:95%;min-width:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:clamp(5px,.65vw,9px);font-weight:900;white-space:nowrap}
.tb-token img{width:auto;height:70%;max-width:100%;object-fit:contain}
.tb-output-actions{height:100%;margin-left:auto;display:flex;align-items:center;gap:3px;flex:0 0 auto;color:#64748b}
/* En pantallas estrechas, la zona de frase ocupa el espacio libre y mantiene
   Borrar / Quitar / Hablar pegados al extremo derecho de cada tablet. */
@media(max-width:520px){
  .tb-output{width:100%;box-sizing:border-box;padding-right:clamp(102px,33%,132px)}
  .tb-placeholder{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tb-tokens{flex:1 1 0;overflow:hidden}
  .tb-output-actions{position:absolute;top:0;right:1.2%;height:100%;margin-left:0}
}
.tb-action{height:min(100%,clamp(28px,5vw,60px));aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1.5px solid #e2e8f0;border-radius:6px;background:#f8fafc}
.tb-action svg{width:36%;height:36%;flex:0 0 auto}
.tb-action-speak{aspect-ratio:1.42;gap:5%;border-color:#4f6ef7;background:#4f6ef7;color:#fff;font-size:clamp(7px,.9vw,13px);font-weight:800;line-height:1}
.tb-action-speak svg{width:22%;height:35%}
.tb-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:1.1%;padding:1.1%;background:#f8fafc}
/* Solo en las vistas explicativas: 7 columnas, sin la penúltima fila de
   pictogramas. La última fila de pictogramas y las carpetas permanecen.
   El teclado ocupa exactamente la casilla de «Divertido». El editor de la
   demostración de montaje sigue usando la plantilla completa de 8 columnas. */
.template-board .tb-grid>.tb-card:nth-child(8n):nth-child(-n+48),
.template-board .tb-grid>.tb-card:nth-child(n+33):nth-child(-n+40),
.template-board .tb-grid>.tb-card:nth-child(47){display:none}
.template-board .tb-grid>.tb-keyboard{grid-row:5;grid-column:7}
.tb-card{min-width:0;min-height:0;position:relative;border:2px solid var(--tb-border);border-radius:5px;background:var(--tb-bg);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .28s,transform .28s,filter .28s}
.tb-card-body{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.tb-card-label{display:flex;align-items:center;justify-content:center;flex:0 0 29%;min-height:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1;font-size:clamp(4px,.5vw,7px);font-weight:900;padding:0 1px}
.tb-card-art{flex:1 1 0;min-width:0;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;font-size:clamp(7px,1vw,14px)}
.tb-card-art img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box;object-fit:contain;padding:3px 4px}
.tb-orange{--tb-bg:#ffe8cc;--tb-border:#e65c00}.tb-green{--tb-bg:#d9ffd9;--tb-border:#009900}.tb-blue{--tb-bg:#d9ecff;--tb-border:#0052cc}.tb-purple{--tb-bg:#f8e0fb;--tb-border:#ae3ec9}.tb-yellow{--tb-bg:#ffffcc;--tb-border:#d9a300}.tb-grey{--tb-bg:#f1f3f5;--tb-border:#495057}
.tb-keyboard{--tb-bg:#dbeafe;--tb-border:#1d4ed8}.tb-keyboard .tb-card-art{font-size:clamp(13px,2vw,25px);color:#1d4ed8}
.tb-folder{--tb-bg:#fff;--tb-border:#111;border:0;overflow:visible;background:transparent;border-radius:0;padding-top:7%;}
.tb-folder-tab{position:absolute;top:0;left:4%;width:44%;height:13%;background:var(--tb-border);border-radius:4px 4px 0 0}
.tb-folder .tb-card-body{border:2px solid var(--tb-border);border-radius:0 5px 5px 5px;background:var(--tb-bg)}
.tb-bottom{height:7%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 2.5%;background:#090b0f;color:#91a0b3}
.tb-bottom-group{display:flex;align-items:center;gap:clamp(4px,1vw,14px)}
.tb-bottom-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}
.tb-bottom svg{display:block;width:clamp(10px,1.5vw,21px);height:clamp(10px,1.5vw,21px);fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
/* La barra señala la herramienta usada en cada demostración, sin tocar la app real. */
.feature-voice .tb-bottom-group:last-child svg:first-child{color:#fbbf24;background:rgba(245,158,11,.24);border-radius:3px;box-shadow:0 0 0 3px rgba(245,158,11,.23);filter:drop-shadow(0 0 5px rgba(251,191,36,.95));stroke-width:2.8}
.feature-flow .tb-bottom-group:last-child svg:nth-child(2){color:#fb7185;background:rgba(244,63,94,.2);border-radius:3px;box-shadow:0 0 0 3px rgba(244,63,94,.23);filter:drop-shadow(0 0 5px rgba(251,113,133,.95));stroke-width:2.8}
.nav-collaborate:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:520px){.site-header .nav-about{display:none}.site-header .nav-collaborate{font-size:12px}}
.tb-glow{z-index:3;box-shadow:0 0 0 3px #ffe163,0 0 18px 7px rgba(255,212,59,.82)!important;filter:saturate(1.2)}
.tablet-main .tb-glow{animation:tb-pulse 3s ease-in-out infinite}@keyframes tb-pulse{50%{box-shadow:0 0 0 5px #ffe163,0 0 24px 10px rgba(255,212,59,.9)}}
.tb-overlay[hidden]{display:none!important}
.tb-overlay{position:absolute;z-index:5;inset:18% 0 0;display:flex;align-items:flex-end;background:rgba(7,15,29,.5);animation:tb-overlay-in .35s both}
.tb-overlay-panel{height:90%;width:100%;display:flex;flex-direction:column;background:#f8fafc;box-shadow:0 -5px 20px rgba(0,0,0,.18);border-radius:12px 12px 0 0;overflow:hidden}
.tb-overlay-title{height:15%;min-height:0;display:flex;align-items:center;padding:0 4%;background:#fff;border-bottom:1px solid #d7e0e6;font-size:clamp(8px,1vw,14px);font-weight:900}
.tb-overlay-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2.2%;padding:2.5%;overflow:hidden}
.tb-overlay-grid .tb-card{border-radius:8px}
.tb-overlay-grid .tb-card-label{font-size:clamp(6px,.85vw,12px)}
.tb-overlay-grid .tb-folder{--tb-bg:#ecfff0;--tb-border:#22c55e;border:0;border-radius:0}
.tb-overlay-grid .tb-folder[data-label="verduras"]{--tb-bg:#f0fbd7;--tb-border:#84cc16}
.tb-overlay-grid .tb-folder .tb-card-label{background:var(--tb-border);color:#fff;order:2;min-height:22%;padding:2px}
.tb-overlay-grid .tb-folder .tb-card-art{order:1}
.tb-subfolder[hidden]{display:none!important}
.tb-subfolder{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;padding:4%;background:rgba(8,15,30,.65);backdrop-filter:blur(2px);animation:tb-overlay-in .35s both}
.tb-subfolder-panel{width:100%;height:78%;min-height:0;display:flex;flex-direction:column;padding:3%;border:1px solid rgba(255,255,255,.55);border-radius:18px;background:rgba(255,255,255,.19);box-shadow:0 16px 35px rgba(0,0,0,.3)}
.tb-subfolder-header{height:14%;min-height:0;flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;color:#fff;font-size:clamp(8px,1vw,14px);font-weight:900}
.tb-subfolder-close{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#223048;font-size:16px;line-height:1}
.tb-subfolder-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3%;padding:2%}
.tb-subfolder-grid .tb-card{--tb-bg:#fffde8;--tb-border:#f3b712;border-radius:11px;border-width:3px;box-shadow:0 5px 10px rgba(0,0,0,.15)}
.tb-subfolder-grid .tb-card-label{order:2;flex:0 0 22%;font-size:clamp(6px,.75vw,11px);line-height:1.1}
.tb-subfolder-grid .tb-card-art{order:1}
.tb-subfolder-grid .tb-card-art img{padding:4px}
@keyframes tb-overlay-in{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}}
.board-demo{padding:16px;border:1px solid #d9ebe3;border-radius:28px;background:#fff;box-shadow:0 25px 45px rgba(40,116,82,.09)}
.board-demo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin-bottom:12px}
.board-demo-header .folder-path,.board-demo-header .live-dot{font-size:12px;text-align:right}
.board-demo .template-board{border:8px solid #263940;border-radius:18px;box-shadow:0 12px 24px rgba(18,54,51,.12)}
.spoken-phrase{display:flex;align-items:center;justify-content:center;gap:12px;min-height:62px;margin-bottom:14px;border-radius:13px;background:#edf8f1;color:#1a674b;font-size:18px}
.spoken-mic{font-size:25px}.spoken-wave{height:25px;display:flex;align-items:center;gap:3px}.spoken-wave i{display:block;width:3px;height:8px;background:#38aa7a;border-radius:3px;animation:wave 1.2s ease-in-out infinite}.spoken-wave i:nth-child(2),.spoken-wave i:nth-child(4){height:18px;animation-delay:.18s}.spoken-wave i:nth-child(3){height:25px;animation-delay:.34s}
.flow-speaker{min-height:72px;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:10px 14px;border:1px solid #cfe5f2;border-radius:15px;background:#ebf6fc}
.flow-speaker-icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border:2px solid #b5dce9;border-radius:50%;background:#fff}
.flow-speaker-icon img{width:42px;height:42px;object-fit:contain}
.flow-speaker-bubble{display:flex;flex-direction:column;min-width:0;gap:2px;color:#173d52}.flow-speaker-bubble small{font-size:10px;letter-spacing:.12em;font-weight:900;color:#427b91}.flow-speaker-bubble strong{font-size:18px;white-space:nowrap}
.flow-speaker .spoken-wave{margin-left:auto;flex:0 0 auto}.flow-speaker .spoken-wave i{background:#318fba;animation-play-state:paused}.flow-speaker.is-speaking .spoken-wave i{animation-play-state:running}.flow-speaker.is-speaking .flow-speaker-icon{animation:speaker-pulse 1.2s ease-in-out infinite}
@keyframes speaker-pulse{50%{box-shadow:0 0 0 6px rgba(78,167,208,.2)}}
@media(max-width:520px){.tablet .template-board{aspect-ratio:1.42}.tb-card{border-width:1px;border-radius:3px}.tb-folder .tb-card-body{border-width:1px;border-radius:0 3px 3px 3px}.tb-card-label{font-size:4px}.tb-overlay-grid .tb-card-label{font-size:6px}.board-demo{padding:10px;border-radius:18px}.board-demo .template-board{aspect-ratio:1.1;border-width:5px;border-radius:12px}.board-demo-header .demo-label{font-size:9px}.board-demo-header .folder-path,.board-demo-header .live-dot{font-size:10px}.spoken-phrase{font-size:16px}.flow-speaker{padding:8px;gap:8px}.flow-speaker-icon{width:40px;height:40px;flex-basis:40px}.flow-speaker-icon img{width:34px;height:34px}.flow-speaker-bubble strong{font-size:14px}.flow-speaker .spoken-wave{gap:2px}.flow-speaker .spoken-wave i{width:2px}.tb-subfolder-panel{height:88%;padding:3%}.tb-subfolder-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3%}.tb-subfolder-grid .tb-card{border-width:2px;border-radius:7px}.tb-subfolder-grid .tb-card-label{font-size:6px}}
@media(prefers-reduced-motion:reduce){.tb-glow,.tb-card,.tb-overlay,.tb-subfolder,.spoken-wave i,.flow-speaker-icon{animation:none!important;transition:none!important}.tb-glow{transform:none}}

/* La tablet del hero necesita margen para su marco y casillas más altas. */
.hero-visual{padding-left:36px;padding-right:36px}
.hero-visual .tablet{width:min(100%,610px);transform:rotate(-2deg)}
.tablet .template-board{aspect-ratio:1.42}
@media(max-width:1050px){.hero-visual .tablet{transform:rotate(-1deg)}}
@media(max-width:520px){.hero-visual{padding-left:12px;padding-right:12px}.hero-visual .tablet{transform:none}}

/* Dos demostraciones independientes de conjugación, con la plantilla real como fondo. */
.conjugation{padding-top:105px;padding-bottom:115px;background:linear-gradient(145deg,#eef8f5,#f4f8ff)}
.conjugation-heading{max-width:790px;margin:0 auto 42px;text-align:center}
.conjugation-heading h2{font-size:clamp(40px,4.8vw,62px);margin:0 0 18px}
.conjugation-heading h2 span{color:#16875f}
.conjugation-heading p{max-width:690px;margin:0 auto;color:var(--muted);font-size:18px}
.conjugation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.conjugation-demo{min-width:0;padding:20px}
.conjugation-demo-copy{min-height:145px}
.conjugation-mode{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:#e4f5eb;color:#12633f;font-size:11px;font-weight:950;letter-spacing:.08em}
.conjugation-mode-semi{background:#e8ebff;color:#3c50a4}
.conjugation-demo h3{font-size:24px;letter-spacing:-.04em;margin:0 0 8px}
.conjugation-demo p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.conjugation-demo .board-demo-header{margin-top:18px}
.conjugation-demo .template-board{aspect-ratio:1.42}
.tb-conjug-chooser[hidden]{display:none!important}
.tb-conjug-chooser{position:absolute;z-index:9;inset:0;display:grid;place-items:center;padding:4%;background:rgba(15,23,42,.62);backdrop-filter:blur(3px);animation:tb-overlay-in .35s both}
.tb-conjug-panel{width:min(92%,410px);padding:3%;border:1px solid rgba(255,255,255,.55);border-radius:13px;background:linear-gradient(145deg,rgba(71,78,92,.9),rgba(42,48,62,.88));box-shadow:0 16px 35px rgba(0,0,0,.3);color:#fff}
.tb-conjug-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3%;font-size:clamp(8px,1vw,14px)}
.tb-conjug-header span{padding:3px 8px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.8em;font-weight:900}
.tb-conjug-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5%}
.tb-conjug-option{min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px;border:2px solid #e2e8f0;border-radius:8px;background:rgba(255,255,255,.94);color:#0f172a;text-align:center;transition:background .3s,border-color .3s,box-shadow .3s}
.tb-conjug-option:first-child{grid-column:1/-1;min-height:45px;flex-direction:row}
.tb-conjug-option img{width:30px;height:30px;object-fit:contain}
.tb-conjug-option span{display:flex;flex-direction:column;gap:1px}
.tb-conjug-option small{font-size:clamp(5px,.55vw,8px);font-weight:900;color:#64748b}
.tb-conjug-option strong{font-size:clamp(9px,1vw,15px);line-height:1}
.tb-conjug-option.is-selected{border-color:#22c55e;background:#e9ffe9;box-shadow:0 0 0 3px rgba(34,197,94,.45)}
.tb-conjug-panel>small{display:block;margin-top:4%;font-size:clamp(6px,.65vw,9px);text-align:center;color:#eef2ff}
@media(max-width:900px){.conjugation-grid{grid-template-columns:1fr;max-width:680px;margin:auto}.conjugation-demo-copy{min-height:0}}
@media(max-width:520px){.conjugation{padding-top:75px;padding-bottom:80px}.conjugation-heading{margin-bottom:26px}.conjugation-heading h2{font-size:clamp(38px,10vw,50px)}.conjugation-heading p{font-size:16px}.conjugation-demo{padding:10px}.conjugation-demo h3{font-size:21px}.conjugation-demo .board-demo-header{flex-wrap:wrap}.tb-conjug-option{min-height:45px}.tb-conjug-option:first-child{min-height:36px}.tb-conjug-option img{width:23px;height:23px}.tb-conjug-option strong{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tb-conjug-chooser,.tb-conjug-option{animation:none!important;transition:none!important}}

/* Controles de género y número: mismos iconos y estado azul que en la app. */
.feature-morph{background:#fff}
.morph-demo .template-board{aspect-ratio:1.42}
.morph-demo .tb-output{gap:.7%}
.tb-morph-controls{height:100%;flex:0 0 auto;display:flex;align-items:center;gap:4px;padding-right:5px;margin-right:2px;border-right:1.5px solid #e2e8f0}
.tb-morph-btn{width:clamp(38px,3.3vw,56px);height:clamp(40px,5vw,59px);max-height:100%;padding:3px 2px;border:1.5px solid #cbd5e1;border-radius:9px;background:linear-gradient(180deg,#fff,#f1f5f9);color:#475569;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:850 clamp(6px,.7vw,9px)/1.1 Arial,Helvetica,sans-serif;cursor:pointer;box-shadow:0 3px 0 #cbd5e1;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.tb-morph-btn svg{width:clamp(18px,2.2vw,30px);height:clamp(18px,2.2vw,30px);flex:0 0 auto}
.tb-morph-btn.active{background:linear-gradient(180deg,#6366f1,#4f46e5);border-color:#4338ca;color:#fff;box-shadow:0 3px 0 #3730a3,0 0 0 3px rgba(99,102,241,.18)}
.tb-morph-btn:focus-visible{outline:3px solid #e5a612;outline-offset:2px}
.morph-demo .tb-placeholder{overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.morph-demo .template-board{aspect-ratio:1.1}.tb-morph-controls{gap:2px;padding-right:3px;margin-right:0}.tb-morph-btn{width:38px;height:40px;border-radius:6px;font-size:6px}.tb-morph-btn svg{width:20px;height:20px}.morph-demo .tb-output-actions{font-size:6px}.morph-demo .tb-token{min-width:27px;font-size:5px}}
@media(prefers-reduced-motion:reduce){.tb-morph-btn{transition:none!important}}

/* Profundidad discreta al recorrer la Home; la app de /comunicador/ no cambia. */
.board-demo[data-scroll-tilt]{perspective:1200px}
.board-demo[data-scroll-tilt] > .template-board{transform:rotateX(var(--scroll-tilt-x,0deg)) rotateY(var(--scroll-tilt-y,0deg)) translateY(var(--scroll-lift,0px));transform-origin:center center;backface-visibility:hidden;transition:transform .16s ease-out}
@media(prefers-reduced-motion:reduce){.board-demo[data-scroll-tilt] > .template-board{transform:none!important;transition:none!important}}