@import './avatar-camera.css';

.videollamada-section{padding:90px 0;background:var(--secondary);color:var(--ink);border-top:1px solid var(--border)}
.videollamada-section .section-heading{max-width:700px;margin-bottom:40px}
.videollamada-section .eyebrow{color:var(--ink)}
.videollamada-section .section-heading h2{margin-bottom:24px}
.videollamada-section .section-heading>p:last-child{color:var(--ink);max-width:570px;margin-inline:auto;font-size:14px}
.videollamada-room{padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius)}
.videollamada-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.videollamada-tile{position:relative;min-width:0;margin:0;height:360px;overflow:hidden;background:var(--sage);border:1px solid var(--wine);border-radius:2px}
.videollamada-tile img,.videollamada-tile video{width:100%;height:100%;object-fit:cover}
.videollamada-tile img{object-position:center 55%}
.videollamada-tile video{transform:scaleX(-1)}
.videollamada-tile figcaption{position:absolute;z-index:1;inset:auto 0 0;padding:28px 20px 17px;background:linear-gradient(transparent,var(--secondary) 45%);font-size:12px;letter-spacing:.09em;color:var(--ink)}
.videollamada-tile figcaption span{display:block;font-size:10px;letter-spacing:0;color:var(--ink);margin-top:3px}
.videollamada-local figcaption{background:var(--wine);color:var(--ink);padding:15px 20px;border-top:1px solid var(--border)}
.videollamada-local figcaption span{color:var(--ink)}
.videollamada-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 30px 80px;background:var(--sage)}
.videollamada-placeholder>span{font-size:50px;color:var(--accent);line-height:1;margin-bottom:18px}
.videollamada-placeholder strong{font-family:var(--font-display);font-weight:400;font-size:30px}
.videollamada-placeholder p{max-width:240px;font-size:13px;margin:12px 0 0;color:var(--muted)}
.videollamada-avatar{margin-top:18px}
.videollamada-avatar .avatar-panel{--avatar-bg:var(--surface);--avatar-surface:var(--wine);--avatar-line:var(--border);--avatar-text:var(--ink);--avatar-muted:var(--muted);--avatar-accent:var(--accent)}
.videollamada-avatar .avatar-panel__activate{color:var(--bg)}
.videollamada-avatar .avatar-panel__stop{background:var(--wine);color:var(--ink);border:1px solid var(--border)}
.videollamada-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.videollamada-controls .button{min-height:48px;font-size:12px;padding-inline:17px;background:var(--accent);border-color:var(--accent);color:var(--bg)}
.videollamada-controls .button-outline{background:var(--wine);border-color:var(--accent);color:var(--ink)}
.videollamada-controls .button-outline[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.videollamada-controls .button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.videollamada-controls button:disabled{cursor:default;opacity:.55;transform:none}
.videollamada-controls button:focus-visible,.videollamada-status:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.videollamada-status{min-height:24px;margin:19px 0 0;font-size:13px;text-align:center;color:var(--ink)}
.videollamada-note{max-width:710px;margin:12px auto 0;font-size:11px;text-align:center;line-height:1.7;color:var(--muted)}
@media(max-width:760px){.videollamada-section{padding:55px 0}.videollamada-room{padding:16px}.videollamada-tiles{grid-template-columns:1fr;gap:15px}.videollamada-tile{height:290px}.videollamada-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.videollamada-controls .button{width:100%;padding-inline:8px}.videollamada-status,.videollamada-note{text-align:left}}
@media(max-width:400px){.videollamada-controls{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.videollamada-controls .button{transition:none}}