:root{
    /* SISTEMA CROMÁTICO DE CONVIVENCIA ESCOLAR */
    --ink:       #2D3748; /* Carbón Profundo (Texto principal) */
    --paper:     #F6F8FA; /* Blanco Avena (Fondo principal) */
    --sage:      #82C09A; /* Verde Agua Claro (Crecimiento, Calma, PAP) */
    --sage-dk:   #5B9D76; /* Tono derivado para hover de Verde Agua */
    --sage-ink:  #3D7C5A; /* Verde con contraste AA sobre blanco (botones y textos pequeños) */
    --alert:     #C4553B; /* Terracota (alertas y faltas gravísimas) */
    --coral:     #E67E22; /* Ámbar Cálido (Calidez, Empatía, Mediación) */
    --cobalt:    #6FA4F6; /* Azul Cobalto Claro (Autoridad, Estructura) */
    --sand:      #FFF3E0; /* Tono suavizado para acentos cálidos */
    --plum:      #6FA4F6; /* Reemplazado por Azul Cobalto */
    --gray:      #5B6472; /* Gris para textos secundarios */
    --line:      #E2E8F0; /* Líneas y bordes neutros */

    --display: "Fraunces", Georgia, serif;
    --body:    "Inter", Arial, Helvetica, sans-serif;
    --mono:    "IBM Plex Mono", Menlo, Consolas, monospace;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
}

:focus-visible{
    outline:3px solid var(--sage);
    outline-offset:3px;
}

/* =====================================================
   HEADER
===================================================== */
.site-header{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:18px 60px;
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(6px);
}

.logo{
    display:flex;
    align-items:center;
    gap:14px;
}

.logo-texto{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.marca{
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    color:var(--ink);
}

.marca span{
    color:var(--sage);
}

.sub{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.03em;
    color:var(--gray);
    margin-top:2px;
}

.nav-links{
    display:flex;
    gap:32px;
    font-size:14px;
    font-weight:600;
}

.nav-links a{
    text-decoration:none;
    color:var(--ink);
    position:relative;
    padding-bottom:4px;
}

.nav-links a.active::after{ width:100%; }

.nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0;
    height:2px;
    background:var(--sage);
    transition:width .25s ease;
}

.nav-links a:hover::after{
    width:100%;
}

/* =====================================================
   HERO
===================================================== */
.hero{
    position:relative;
    text-align:center;
    max-width:820px;
    margin:0 auto;
    padding:100px 24px 60px;
    overflow:hidden;
}

.hero-web{
    position:absolute;
    inset:0;
    width:140%;
    height:100%;
    left:-20%;
    top:-10%;
    z-index:0;
    opacity:.55;
}

.web-lines path{
    fill:none;
    stroke:var(--sage);
    stroke-width:1.4;
    stroke-dasharray:4 6;
    opacity:.35;
}

.web-nodes circle{
    fill:var(--coral);
    animation:float 6s ease-in-out infinite;
}

.web-nodes circle:nth-child(2){ fill:var(--sage); animation-delay:.6s; }
.web-nodes circle:nth-child(3){ fill:var(--cobalt); animation-delay:1.2s; }
.web-nodes circle:nth-child(4){ fill:var(--sage-dk); animation-delay:1.8s; }
.web-nodes circle:nth-child(5){ fill:var(--coral); animation-delay:2.4s; }

@keyframes float{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

.eyebrow{
    position:relative;
    z-index:1;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sage-ink);
    background:rgba(130,192,154,.15);
    display:inline-block;
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:22px;
}

.hero h1{
    position:relative;
    z-index:1;
    font-family:var(--display);
    font-weight:900;
    font-size:52px;
    line-height:1.12;
    color:var(--ink);
    letter-spacing:-.01em;
}

.hero h1 span{
    color:var(--sage-dk);
    font-style:italic;
    font-weight:700;
}

.descripcion{
    position:relative;
    z-index:1;
    max-width:560px;
    margin:26px auto 0;
    color:var(--gray);
    font-size:18px;
    line-height:1.6;
}

/* BOTONES */
.botones{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:38px;
}

.btn{
    text-decoration:none;
    padding:15px 30px;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.estudiante{
    background:var(--sage-ink);
    color:#fff;
    box-shadow:0 10px 24px -8px rgba(61,124,90,.55);
}

.estudiante:hover{
    background:#326B4C;
    transform:translateY(-2px);
}

.docente{
    background:#fff;
    border:2px solid var(--coral);
    color:var(--coral);
}

.docente:hover{
    background:var(--coral);
    color:#fff;
    transform:translateY(-2px);
}

/* =====================================================
   CAPÍTULOS / CARDS
===================================================== */
.cards{
    margin:80px auto 100px;
    width:1100px;
    max-width:92%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}

.card{
    position:relative;
    background:#fff;
    border-radius:20px;
    padding:34px 30px 30px;
    text-decoration:none;
    color:var(--ink);
    border:1px solid var(--line);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 40px -18px rgba(45,55,72,.15);
    border-color:transparent;
}

.cap{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gray);
    margin-bottom:8px;
}

.icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    margin-bottom:6px;
}

.azul{
    background:rgba(111,164,246,.15);
    color:var(--cobalt);
}

.naranja{
    background:rgba(230,126,34,.12);
    color:var(--coral);
}

.verde{
    background:rgba(130,192,154,.18);
    color:var(--sage-dk);
}

.card h3{
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    margin-top:4px;
}

.card p{
    color:var(--gray);
    line-height:1.6;
    font-size:15px;
    flex-grow:1;
}

.ir{
    margin-top:14px;
    font-size:14px;
    font-weight:600;
    color:var(--sage-ink);
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.card .ir i{
    transition:transform .25s ease;
}

.card:hover .ir i{
    transform:translateX(4px);
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer{
    background:var(--ink);
    color:#DCE3EF;
    padding:56px 24px 40px;
}

.footer-inner{
    max-width:640px;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.footer-marca{
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    color:#fff;
    margin-top:8px;
}

.footer-marca span{
    color:var(--sage);
}

.footer-tagline{
    font-size:14px;
    color:#9FADC6;
    margin-bottom:18px;
}

.footer-links{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    margin-bottom:22px;
}

.footer-links a{
    text-decoration:none;
    color:#DCE3EF;
    opacity:.85;
}

.footer-links a:hover{
    opacity:1;
    color:var(--sage);
}

.dot{
    color:#4C5D80;
}

.footer-copy{
    font-family:var(--mono);
    font-size:11px;
    color:#8B98B1;
    border-top:1px solid #3A475D;
    padding-top:18px;
    width:100%;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:900px){
    .site-header{ padding:16px 24px; }

    .cards{
        grid-template-columns:1fr;
    }

    .botones{
        flex-direction:column;
        align-items:center;
    }

    .hero h1{
        font-size:36px;
    }

    .hero{
        padding:70px 20px 50px;
    }
}

/* =====================================================
   ACCESIBILIDAD — MOVIMIENTO REDUCIDO
===================================================== */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .web-nodes circle{ animation:none; }
    .btn, .card, .nav-links a::after{ transition:none; }
}

/* =====================================================
   COMPONENTES COMPARTIDOS (páginas interiores)
===================================================== */
.skip{
    position:absolute;
    left:-999px;
    top:8px;
    background:var(--ink);
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    z-index:100;
    text-decoration:none;
    font-size:14px;
}
.skip:focus{ left:12px; }

.logo{ text-decoration:none; }
.logo img{
    width:46px;
    height:46px;
    object-fit:contain;
    flex-shrink:0;
}

.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    border-radius:10px;
    width:42px;
    height:42px;
    font-size:18px;
    color:var(--ink);
    cursor:pointer;
}

/* ---------- Encabezado de página ---------- */
.page{
    max-width:1100px;
    margin:0 auto;
    padding:52px 24px 80px;
}

.page-head{ margin-bottom:30px; }
.page-head .eyebrow{ margin-bottom:16px; }

.page-head h1{
    font-family:var(--display);
    font-weight:900;
    font-size:40px;
    line-height:1.12;
    letter-spacing:-.01em;
}

.page-head h1 span{
    color:var(--sage-dk);
    font-style:italic;
    font-weight:700;
}

.page-head p{
    color:var(--gray);
    max-width:640px;
    margin-top:14px;
    font-size:17px;
    line-height:1.6;
}

/* ---------- Rejilla principal ---------- */
.app-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;
    align-items:start;
}

.side{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
}

.panel-title{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gray);
    margin-bottom:14px;
}

.topic-list{
    display:flex;
    flex-direction:column;
    gap:4px;
    list-style:none;
}

.topic{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:none;
    background:none;
    font:inherit;
    font-size:14px;
    font-weight:500;
    color:var(--ink);
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    transition:background .2s ease;
}

.topic:hover{ background:var(--paper); }

.topic i{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0;
    background:rgba(130,192,154,.18);
    color:var(--sage-ink);
}

.topic:nth-child(3n+2) i{ background:rgba(230,126,34,.12); color:var(--coral); }
.topic:nth-child(3n) i{ background:rgba(111,164,246,.15); color:#3F73C4; }

.panel-note{
    font-size:13px;
    line-height:1.6;
    color:var(--gray);
}

.panel-note strong{ color:var(--ink); }

/* ---------- Chat ---------- */
.chat-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:560px;
}

.chat-top{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 22px;
    border-bottom:1px solid var(--line);
}

.chat-top img{ width:38px; height:38px; }

.chat-top .who{ flex:1; line-height:1.25; }
.chat-top .who strong{
    display:block;
    font-family:var(--display);
    font-size:17px;
}
.chat-top .who span{
    font-family:var(--mono);
    font-size:11px;
    color:var(--gray);
}

.btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:border-color .2s ease, color .2s ease;
}
.btn-ghost:hover{ border-color:var(--sage); color:var(--sage-ink); }

.chat-log{
    flex:1;
    height:440px;
    overflow-y:auto;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    gap:18px;
    background:var(--paper);
}

.msg{
    display:flex;
    gap:12px;
    max-width:86%;
    animation:rise .3s ease both;
}

@keyframes rise{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:none; }
}

.msg.user{
    align-self:flex-end;
    flex-direction:row-reverse;
}

.msg .av{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--line);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.msg .av img{ width:24px; height:24px; }
.msg.user .av{ background:rgba(230,126,34,.12); border-color:transparent; color:var(--coral); font-size:13px; }

.bubble{
    background:#fff;
    border:1px solid var(--line);
    border-radius:4px 16px 16px 16px;
    padding:14px 16px;
    font-size:15px;
    line-height:1.6;
    overflow-wrap:anywhere;
}

.msg.user .bubble{
    background:rgba(130,192,154,.22);
    border-color:rgba(130,192,154,.35);
    border-radius:16px 4px 16px 16px;
}

.bubble h3{
    font-family:var(--display);
    font-size:18px;
    margin-bottom:6px;
}

.bubble p + p{ margin-top:8px; }

.bubble .time{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--gray);
    margin-top:8px;
}

.bubble a{ color:var(--sage-ink); font-weight:600; }

.badge{
    display:inline-block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:999px;
    margin-bottom:10px;
    background:rgba(130,192,154,.2);
    color:var(--sage-ink);
}
.badge--grave{ background:rgba(230,126,34,.14); color:#B25E12; }
.badge--gravisima{ background:rgba(196,85,59,.12); color:var(--alert); }

.crisis{
    border-left:4px solid var(--alert);
    background:rgba(196,85,59,.07);
    padding:12px 14px;
    border-radius:0 12px 12px 0;
}

.art-card{
    margin-top:12px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-left:4px solid var(--sage);
    border-radius:12px;
    background:var(--paper);
}
.art-card .cap{ margin-bottom:4px; display:block; }
.art-card strong{ display:block; font-size:14px; }
.art-card p{ font-size:13px; color:var(--gray); margin-top:4px; }

.btn-link{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:10px;
    border:none;
    background:var(--sage-ink);
    color:#fff;
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s ease;
}
.btn-link:hover{ background:#326B4C; }

.typing{ display:flex; gap:5px; padding:6px 2px; }
.typing span{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gray);
    opacity:.4;
    animation:dot 1.1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes dot{ 0%,80%,100%{ transform:none; opacity:.3; } 40%{ transform:translateY(-4px); opacity:.9; } }

.welcome{
    margin:auto;
    text-align:center;
    max-width:520px;
    padding:10px 0;
}
.welcome img{ width:76px; height:76px; margin-bottom:14px; }
.welcome h2{ font-family:var(--display); font-size:26px; }
.welcome p{ color:var(--gray); margin-top:8px; line-height:1.6; }

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 22px 0;
}
.welcome .chips{ justify-content:center; padding:18px 0 0; }

.chip{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font:inherit;
    font-size:13px;
    font-weight:500;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:border-color .2s ease, background .2s ease;
}
.chip:hover{ border-color:var(--sage); background:rgba(130,192,154,.12); }
.chip i{ color:var(--sage-ink); font-size:12px; }

.composer{
    display:flex;
    gap:10px;
    padding:16px 22px 18px;
    background:#fff;
}
.composer input{
    flex:1;
    min-width:0;
    font:inherit;
    font-size:15px;
    padding:13px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper);
    color:var(--ink);
}
.composer input:focus{
    outline:none;
    border-color:var(--sage);
    box-shadow:0 0 0 3px rgba(130,192,154,.25);
}
.composer button{
    border:none;
    width:48px;
    border-radius:12px;
    background:var(--sage-ink);
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:background .2s ease;
}
.composer button:hover{ background:#326B4C; }

.chat-foot{
    font-size:12px;
    color:var(--gray);
    text-align:center;
    padding:0 22px 16px;
    background:#fff;
    line-height:1.5;
}

/* ---------- Modal ---------- */
.modal{
    position:fixed;
    inset:0;
    z-index:60;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(45,55,72,.55);
}
.modal.open{ display:flex; }

.modal-card{
    background:#fff;
    border-radius:20px;
    width:100%;
    max-width:600px;
    max-height:88vh;
    overflow-y:auto;
    box-shadow:0 30px 60px -20px rgba(45,55,72,.4);
    animation:rise .25s ease both;
}

.modal-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:22px 26px 14px;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:#fff;
}
.modal-head h2{
    font-family:var(--display);
    font-size:20px;
    line-height:1.3;
}
.modal-close{
    border:none;
    background:var(--paper);
    width:36px;
    height:36px;
    border-radius:10px;
    font-size:15px;
    color:var(--ink);
    cursor:pointer;
    flex-shrink:0;
}
.modal-close:hover{ background:var(--line); }
.modal-body{ padding:20px 26px 28px; line-height:1.75; font-size:15px; }

/* ---------- Texto legal ---------- */
.prose{ max-width:760px; }
.prose h2{ font-family:var(--display); font-size:22px; margin:32px 0 10px; }
.prose p, .prose li{ line-height:1.75; color:var(--gray); }
.prose ul{ padding-left:22px; margin-top:8px; }
.prose a{ color:var(--sage-ink); font-weight:600; }

/* ---------- Pie: líneas de ayuda ---------- */
.footer-help{
    font-size:13px;
    color:#DCE3EF;
    margin-bottom:18px;
    padding:10px 18px;
    border:1px solid #3A475D;
    border-radius:12px;
    line-height:1.6;
}
.footer-help a{ color:#fff; font-weight:600; }

/* =====================================================
   APOYO EMOCIONAL
===================================================== */
.mood-card{ text-align:center; }

.mascot{
    --mood:var(--coral);
    position:relative;
    width:104px;
    height:104px;
    margin:6px auto 14px;
    border-radius:50%;
    background:var(--mood);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:52px;
    box-shadow:0 0 0 10px color-mix(in srgb, var(--mood) 18%, transparent);
    transition:background .4s ease, box-shadow .4s ease;
}
.mascot[data-mood="ira"]{ --mood:var(--alert); }
.mascot[data-mood="miedo"]{ --mood:#6B7A90; }
.mascot[data-mood="felicidad"]{ --mood:var(--coral); }
.mascot[data-mood="tristeza"]{ --mood:var(--cobalt); }
.mascot[data-mood="asco"]{ --mood:var(--sage-dk); }
.mascot[data-mood="sorpresa"]{ --mood:#E0A93B; }

.mascot.anim-felicidad{ animation:bounce 1s ease-in-out infinite alternate; }
.mascot.anim-tristeza{ animation:sway 2.4s ease-in-out infinite; }
.mascot.anim-ira{ animation:shake .3s ease-in-out infinite alternate; }
.mascot.anim-miedo{ animation:tremble .18s ease-in-out infinite; }

@keyframes bounce{ from{ transform:translateY(0); } to{ transform:translateY(-8px); } }
@keyframes sway{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(3px) rotate(-2deg); } }
@keyframes shake{ from{ transform:translateX(-3px); } to{ transform:translateX(3px); } }
@keyframes tremble{ 0%{ transform:translate(1px,1px); } 50%{ transform:translate(-1px,-1px); } 100%{ transform:translate(-1px,1px); } }

.tear{
    position:absolute;
    width:8px;
    height:12px;
    top:52%;
    background:#8EC5FF;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity:0;
}
.tear.l{ left:30%; }
.tear.r{ right:30%; animation-delay:.7s; }
.anim-tristeza .tear{ animation:tear 1.6s infinite ease-in; }
@keyframes tear{
    0%{ opacity:0; transform:translateY(0) scale(.6); }
    40%{ opacity:1; }
    100%{ opacity:0; transform:translateY(30px) scale(1); }
}

.mood-card h3{ font-family:var(--display); font-size:22px; }
.mood-card p{ font-size:13.5px; color:var(--gray); line-height:1.55; margin-top:6px; }

.wheel{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
.wheel button{
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:10px 4px 8px;
    cursor:pointer;
    font:inherit;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    transition:border-color .2s ease, background .2s ease;
}
.wheel button:hover{ background:var(--paper); }
.wheel button[aria-pressed="true"]{ border-color:var(--sage-ink); background:rgba(130,192,154,.14); }
.wheel .face{ font-size:26px; line-height:1.2; }
.wheel .name{ font-size:12px; font-weight:600; }

.subs{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    display:none;
}
.subs.show{ display:block; }
.subs-list{ display:flex; flex-wrap:wrap; gap:6px; max-height:150px; overflow-y:auto; }
.subs-list button{
    border:1px solid var(--line);
    background:#fff;
    font:inherit;
    font-size:12px;
    padding:5px 10px;
    border-radius:999px;
    cursor:pointer;
}
.subs-list button:hover{ border-color:var(--sage); background:rgba(130,192,154,.12); }

.tool-row{ display:flex; flex-direction:column; gap:8px; }
.tool{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    font:inherit;
    font-size:14px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    color:var(--ink);
    transition:border-color .2s ease;
}
.tool:hover{ border-color:var(--sage); }
.tool i{ width:20px; text-align:center; color:var(--sage-ink); }
.tool--alert i{ color:var(--alert); }
.tool--alert:hover{ border-color:var(--alert); }

.breath{
    width:150px;
    height:150px;
    border-radius:50%;
    margin:20px auto;
    background:var(--cobalt);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--display);
    font-weight:700;
    font-size:20px;
    animation:breath 10s ease-in-out infinite;
}
@keyframes breath{
    0%,100%{ transform:scale(.7); }
    40%{ transform:scale(1.1); }
}

.help-block{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:12px;
}
.help-block h3{ font-size:15px; }
.help-block p{ font-size:13px; color:var(--gray); margin:2px 0 8px; }
.help-block .call{
    display:inline-block;
    padding:7px 14px;
    margin-right:6px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    border:1px solid var(--line);
}
.help-block .call--main{ background:var(--alert); border-color:var(--alert); color:#fff; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.field input, .field select{
    width:100%;
    font:inherit;
    font-size:14px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(130,192,154,.25); }

/* =====================================================
   RESPONSIVE (páginas interiores)
===================================================== */
@media (max-width:900px){
    .nav-toggle{ display:block; }
    .nav-links{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        gap:0;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:8px 24px 16px;
    }
    .nav-links.open{ display:flex; }
    .nav-links a{ padding:12px 0; }
    .nav-links a::after{ display:none; }
    .nav-links a.active{ color:var(--sage-ink); }

    .page{ padding:36px 18px 60px; }
    .page-head h1{ font-size:30px; }
    .app-grid{ grid-template-columns:1fr; }
    .chat-log{ height:420px; }
    .msg{ max-width:94%; }
}

@media (prefers-reduced-motion: reduce){
    .msg, .modal-card{ animation:none; }
    .typing span, .mascot, .tear, .breath{ animation:none !important; }
}

/* Robustez de layout */
.app-grid > *{ min-width:0; }
.chat-top .who{ min-width:0; }
.bubble{ min-width:0; }
.chat-card{ min-width:0; }