/* Apariencia para a conversa con Otero Pedrayo. Paleta: castaño #a37251 · laranxa #dc9e59 · área #efd99f · prado #ddf0c3 (o laranxa-terracota consérvase para os diálogos). */ :root{ --castano:#a37251; --laranxa:#dc9e59; --area:#efd99f; --prado:#ddf0c3; --terracota:#a8482a; --terracota-escuro:#7d3320; --tinta:#3a2c20; --tinta2:#6e5340; --liña:#e2cda0; --papel:#fffdf3; } /* Modo infantil: paleta máis luminosa e amable (azul-verde + amarelo cálido), activada pola clase do que fixa a administración. */ body.modo-neno{ --castano:#2a9d8f; --laranxa:#f4a261; --area:#ffe8b5; --prado:#cdeede; --terracota:#e76f51; --terracota-escuro:#c8553d; --tinta:#2b3a36; --tinta2:#4f6b63; --liña:#bfe3d6; --papel:#fbfff9; } /* ── Aspecto de banda deseñada do modo infantil ── */ body.modo-neno{ font-family:"Fredoka","Source Serif 4",sans-serif; background: radial-gradient(circle at 12% 18%, rgba(244,162,97,.16), transparent 38%), radial-gradient(circle at 88% 72%, rgba(42,157,143,.14), transparent 42%), var(--papel); } body.modo-neno .panel-esq h1, body.modo-neno .panel-esq h1 .t1, body.modo-neno .panel-esq h1 .t2{ font-family:"Fredoka",sans-serif; font-weight:700; font-style:normal; color:var(--terracota-escuro); } body.modo-neno .menu-paxinas a, body.modo-neno .colaboracion-nome{ font-family:"Fredoka",sans-serif; } /* Burbullas máis grandes, redondas e con bordo groso (estilo viñeta) */ body.modo-neno .burbulla{ font-size:.92rem; line-height:1.6; border-radius:18px; padding:.8rem 1rem; position:relative; } body.modo-neno .burbulla.otero{ background:#fff; border:2.5px solid var(--castano); border-bottom-left-radius:6px; box-shadow:3px 4px 0 rgba(42,157,143,.25); } body.modo-neno .burbulla.visitante{ background:var(--terracota); color:#fff; border:2.5px solid var(--terracota-escuro); border-bottom-right-radius:6px; box-shadow:-3px 4px 0 rgba(200,85,61,.3); } /* Punta do bocadillo (tail): triángulo con contorno, feito con dúas capas —a de fóra é o bordo, a de dentro o recheo da mesma cor da burbulla—. */ body.modo-neno .burbulla::before, body.modo-neno .burbulla::after{ content:""; position:absolute; width:0; height:0; bottom:8px; } /* Otero: punta cara á esquerda-abaixo. A capa de bordo (::before) sae de máis cara a fóra; a de recheo (::after) nace pegada ao corpo e tapa a liña do bordo. */ body.modo-neno .burbulla.otero::before{ left:-13px; border-width:9px 14px 9px 0; border-style:solid; border-color:transparent var(--castano) transparent transparent; } body.modo-neno .burbulla.otero::after{ left:-9px; border-width:7px 11px 7px 0; border-style:solid; border-color:transparent #fff transparent transparent; } /* Visitante: punta cara á dereita-abaixo */ body.modo-neno .burbulla.visitante::before{ right:-13px; border-width:9px 0 9px 14px; border-style:solid; border-color:transparent transparent transparent var(--terracota-escuro); } body.modo-neno .burbulla.visitante::after{ right:-9px; border-width:7px 0 7px 11px; border-style:solid; border-color:transparent transparent transparent var(--terracota); } body.modo-neno .avatar-otero{ width:46px; height:46px; border:3px solid var(--laranxa); box-shadow:0 2px 0 rgba(0,0,0,.08); } /* Iconas/chips redondiños e con man (Patrick Hand) nos pés de imaxe */ body.modo-neno .suxestion{ font-size:.8rem; border:2px solid var(--castano); border-radius:999px; font-weight:500; } body.modo-neno .suxestion:hover{ background:var(--prado); } body.modo-neno .boton-accion{ border:2px solid var(--castano); border-radius:14px; font-weight:500; } body.modo-neno .medio-pe{ font-family:"Patrick Hand","Caveat",cursive; font-size:1.2rem; color:var(--castano); } body.modo-neno .galeria-medios .medio{ border:2px solid var(--liña); border-radius:14px; transform:rotate(-1deg); } /* Entrada e botón de preguntar, redondeados e amables */ body.modo-neno .entrada input{ border:2.5px solid var(--castano); border-radius:999px; font-size:.95rem; } body.modo-neno .entrada button{ font-family:"Fredoka",sans-serif; font-weight:600; border-radius:999px; background:var(--terracota); box-shadow:0 3px 0 var(--terracota-escuro); } body.modo-neno .entrada button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--terracota-escuro); } /* Cabeceira: o logo do CCG segue en branco; engadimos un fío de cor amable */ body.modo-neno .cabeceira-ccg{ border-bottom:4px solid var(--laranxa); } *{box-sizing:border-box;} html{font-size:18px;} body{ margin:0; background:#faf2dc; background-image:radial-gradient(circle at 20% 8%, #fdf8ea 0%, #faf2dc 60%); color:var(--tinta); font-family:"Source Serif 4",Georgia,serif; line-height:1.65; } /* ── Cabeceira: banda negra co logo do CCG en branco ── */ .cabeceira-ccg{ display:flex; align-items:center; justify-content:center; position:relative; padding:.62rem 1rem; background:#141210; } .logo-ccg{display:block; height:38px; width:auto; filter:brightness(0) invert(1);} /* logo a branco */ @media (max-width:520px){ .logo-ccg{height:30px;} } /* Switch público de modo (só na política «escoller») */ .modo-switch{position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:.5rem;} .modo-switch .modo-etiqueta{color:#cdbfa3; font-size:.72rem; letter-spacing:.02em;} .modo-grupo{display:flex; gap:0; border:2px solid rgba(255,255,255,.6); border-radius:999px; overflow:hidden;} .modo-opcion{appearance:none; border:none; background:transparent; color:#f3ece0; font-family:inherit; font-size:.82rem; font-weight:500; padding:.4rem 1rem; cursor:pointer; line-height:1.3; transition:background .15s, color .15s;} .modo-opcion:hover{background:rgba(255,255,255,.12);} .modo-opcion.activo{background:var(--laranxa); color:#141210; font-weight:700; box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);} @media (max-width:560px){ .modo-switch{right:.5rem; gap:.3rem;} .modo-switch .modo-etiqueta{display:none;} .modo-opcion{font-size:.74rem; padding:.34rem .7rem;} } /* ── Taboleiro en dúas columnas: panel informativo (30 %) + conversa ── */ .taboleiro{ display:grid; grid-template-columns:30% 1fr; gap:2rem; max-width:1280px; margin:0 auto; padding:0 1.25rem; align-items:stretch; min-height:calc(100vh - 60px); /* descontar a cabeceira */ } /* Panel esquerdo, sticky */ .panel-esq{ position:sticky; top:0; align-self:start; display:flex; flex-direction:column; padding:0 .2rem 1.2rem; } .otero-medios{margin:0 0 1.2rem; padding:0;} .otero-foto{display:block; /* sangra ata o bordo DEREITO da columna (cara ao chat) e pégase á cabeceira; baixa o encadre para que se vexan o micrófono e o traxe */ width:calc(100% + 2rem); margin-right:-2rem; height:230px; object-fit:cover; object-position:center 58%; border-radius:0 0 0 14px; box-shadow:0 6px 18px rgba(60,40,20,.16); background:#e7dcc4;} .panel-esq h1{margin:.2rem 0 .8rem; font-family:"Playfair Display",serif; font-weight:700; line-height:1.2;} .panel-esq h1 .t1{display:block; white-space:nowrap; font-size:clamp(1.05rem, 1.7vw, 1.4rem); color:var(--tinta);} .panel-esq h1 .t2{display:block; font-size:clamp(.9rem, 1.3vw, 1.1rem); font-weight:500; font-style:italic; color:var(--castano);} .descricion{font-size:.9rem; color:var(--tinta2); line-height:1.6;} .descricion p{margin:.4rem 0;} .menu-paxinas{display:flex; flex-direction:column; gap:.45rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--liña);} .menu-paxinas a{ font-family:"Playfair Display",serif; font-size:1rem; color:var(--castano); text-decoration:none; } .menu-paxinas a:hover{color:var(--terracota); text-decoration:underline;} .colaboracion{margin-top:auto; padding-top:1.6rem; font-size:.78rem; color:var(--tinta2);} .colaboracion-et{display:block; margin-bottom:.55rem; font-style:italic;} .colaboracion-logos{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;} .logo-proxecto{height:92px; width:auto; display:block;} /* ambos os logos á mesma altura */ .colaboracion-nome{font-family:"Playfair Display",serif; font-size:1.05rem; color:var(--tinta);} /* Segundo nivel: «Coa colaboración de:» — logos un 30% máis pequenos */ .colaboracion-et-2{ margin-top:1.15rem; } .colaboracion-logos-2{ gap:1.1rem; } .logo-colab{ height:64px; width:auto; display:block; } /* ~70% de .logo-proxecto (92px) */ .colaboracion-nome-2{ font-size:.78rem; } .aviso-uso{margin-top:1.1rem; padding-top:.7rem; border-top:1px solid var(--liña); font-size:.68rem; line-height:1.45; color:var(--tinta2); font-style:italic; opacity:.85;} /* ── Columna da conversa: corpo do chat + carril lateral integrado ── */ .panel-chat{display:flex; align-items:stretch;} .chat-corpo{flex:1; min-width:0; display:flex; flex-direction:column; padding-top:.9rem;} .fío{flex:1; padding:0 .5rem 1.2rem .2rem; display:flex; flex-direction:column; gap:.75rem;} /* Burbullas (o laranxa-terracota consérvase nos diálogos) */ .burbulla{padding:.65rem .85rem; border-radius:12px; max-width:88%; font-size:.74rem; line-height:1.55;} .burbulla p{margin:0;} .burbulla.visitante{align-self:flex-end; background:var(--terracota); color:#fdf6ea; border-bottom-right-radius:4px;} .burbulla.otero{background:var(--papel); border:1px solid var(--liña); border-bottom-left-radius:4px;} .burbulla.otero.reserva{background:#f4ecda; font-style:italic; color:var(--tinta2);} /* Fila de Otero co seu avatar */ .fila-otero{align-self:flex-start; display:flex; gap:.55rem; align-items:flex-start; max-width:88%;} .fila-otero .burbulla{max-width:100%; align-self:auto;} .avatar-otero{flex:none; width:36px; height:36px; border-radius:50%; border:2px solid var(--laranxa); display:block; margin-top:2px;} .fontes b{font-weight:600; color:var(--castano); font-style:normal;} .escribindo{align-self:flex-start; color:var(--tinta2); font-style:italic; font-size:.72rem;} .entrada{position:sticky; bottom:0; display:flex; gap:.6rem; padding:.9rem .5rem .8rem .2rem; background:linear-gradient(to top, #faf2dc 70%, transparent);} .entrada input{flex:1; padding:.65rem .85rem; border:1px solid var(--liña); border-radius:10px; background:var(--papel); font-family:inherit; font-size:.8rem; color:var(--tinta);} .entrada input:focus{outline:2px solid var(--laranxa); outline-offset:1px;} .entrada button{padding:.65rem 1.1rem; border:none; border-radius:10px; background:var(--terracota-escuro); color:#fdf6ea; font-family:"Playfair Display",serif; font-size:.85rem; cursor:pointer;} .entrada button:hover{background:var(--terracota);} .entrada button:disabled{opacity:.5; cursor:wait;} .referencias{margin-top:.45rem;font-size:.62rem;color:var(--tinta2);} .referencias summary{cursor:pointer;list-style:none;display:inline-block;padding:.12rem .45rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:rgba(0,0,0,.03);user-select:none;} .referencias summary::-webkit-details-marker{display:none;} .referencias summary::before{content:"▸ ";} .referencias[open] summary::before{content:"▾ ";} .referencias ul{margin:.35rem 0 0;padding-left:1.1rem;} .referencias li{margin:.1rem 0;line-height:1.4;} /* Valoración da resposta (pulgar arriba/abaixo) */ .valoracion{margin-top:.45rem;display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--tinta2);} .val-etiqueta{font-style:italic;} .val-bot{padding:.05rem .4rem;border:1px solid var(--liña);border-radius:999px;background:var(--papel);cursor:pointer;font-size:.72rem;line-height:1.4;} .val-bot:hover{background:var(--area);} .val-bot:disabled{opacity:.45;cursor:default;} .val-bot.negativa:hover{background:#f3ded8;} .val-grazas{font-style:italic;color:var(--tinta2);} .burbulla.otero.rexeitada{opacity:.62;} /* Accións: multimedia */ .accion-bloque{margin-top:.55rem;} .boton-accion{display:inline-block;padding:.4rem .75rem;border:1px solid var(--liña);border-radius:10px; background:var(--papel);color:var(--tinta);cursor:pointer;font-size:.7rem;font-family:inherit;} .boton-accion:hover{background:var(--area);} .galeria-medios{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.55rem;} .galeria-medios .medio{flex:1 1 220px;max-width:480px;background:#fffdf7;border:1px solid #e7dcc4;border-radius:4px;padding:.5rem .5rem .2rem;box-shadow:0 3px 12px rgba(60,40,20,.16);transform:rotate(-.5deg);} .galeria-medios .medio:nth-child(even){transform:rotate(.6deg);} .galeria-medios img,.galeria-medios video{width:100%;height:auto;display:block;border-radius:2px;} .galeria-medios audio{width:100%;display:block;padding:.4rem 0 .2rem;} .galeria-medios .medio-ligazon{padding:.55rem;transform:none;} .galeria-medios .medio-ligazon a{word-break:break-word;} .medio-pe{font-family:"Caveat","Source Serif 4",cursive;font-size:1.05rem;line-height:1.1;color:var(--tinta2);padding:.45rem .3rem .3rem;text-align:center;} .medio-info{display:block;text-align:center;font-size:.62rem;color:var(--castano);text-decoration:none;padding:0 .3rem .35rem;} .medio-info:hover{text-decoration:underline;} .burbulla,.escribindo,.fila-otero{scroll-margin-bottom:6rem;} /* Suxestións e consentimento de memoria */ .suxestions{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;} .suxestions-et{width:100%;font-size:.62rem;color:var(--tinta2);margin-bottom:.05rem;} .suxestion{background:var(--papel);border:1px solid var(--liña);border-radius:999px;padding:.28rem .7rem;font-family:inherit;font-size:.66rem;color:var(--castano);cursor:pointer;text-align:left;line-height:1.3;} .suxestion:hover{background:var(--area);} .consentimento{margin-top:.55rem;padding:.5rem .7rem;background:#fbf4e2;border:1px dashed var(--liña);border-radius:10px;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;} .consentimento-txt{width:100%;font-size:.7rem;color:var(--tinta2);margin-bottom:.15rem;} /* ── Afondamento: chip «seguir co mesmo tema» (laranxa dos diálogos) ── */ .afondar{margin-top:.5rem;} .afondar-chip{background:var(--terracota-escuro);color:#fdf6ea;border:none;border-radius:999px;padding:.32rem .8rem;font-family:inherit;font-size:.68rem;cursor:pointer;line-height:1.3;} .afondar-chip:hover{background:var(--terracota);} /* ── Carrís laterais integrados: liña vertical sombreada a cada lado do chat ── */ .rail-zona{flex:none; width:56px;} .rail-zona.dir{ margin-left:.4rem; border-left:1px solid var(--liña); background:linear-gradient(to right, rgba(163,114,81,.08), rgba(163,114,81,0) 55%); } .rail-zona.esq{ margin-right:.4rem; border-right:1px solid var(--liña); background:linear-gradient(to left, rgba(163,114,81,.08), rgba(163,114,81,0) 55%); } .rail{ position:sticky; top:.9rem; z-index:30; display:flex; flex-direction:column; align-items:center; gap:.55rem; padding-top:.2rem; } .rail-bot{ width:44px; height:44px; border-radius:12px; border:1px solid var(--liña); background:var(--papel); color:#5b3f2a; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 4px rgba(60,40,20,.12); } .rail-bot svg{width:24px; height:24px; display:block;} .ico-memoria{width:26px; height:26px; display:block; background:currentColor; -webkit-mask:url(otero-memoria-mask.png) center/contain no-repeat; mask:url(otero-memoria-mask.png) center/contain no-repeat;} .rail-bot:hover{background:var(--area);} .rail-bot.activo{background:var(--castano); border-color:var(--castano); color:#fdf7e8;} /* Panel despregable: solapa por completo a columna do chat */ .chat-corpo{position:relative;} .panel-capa{ position:absolute; inset:0; z-index:35; background:rgba(250,242,220,.65); backdrop-filter:blur(2px); } .panel-flotante{ position:sticky; top:.8rem; width:100%; max-height:calc(100vh - 1.8rem); overflow-y:auto; background:var(--papel); border:1px solid var(--liña); border-radius:14px; padding:1rem 1.2rem .9rem; box-shadow:0 14px 40px rgba(60,40,20,.28); } .panel-cab{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--liña); padding-bottom:.5rem; margin-bottom:.4rem;} .panel-cab h2{margin:0; font-family:"Playfair Display",serif; font-size:1.05rem; color:var(--tinta);} .panel-pechar{border:none; background:none; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--tinta2); padding:.1rem .3rem;} .panel-pechar:hover{color:var(--terracota);} .paxina-corpo{font-size:.82rem; line-height:1.6; color:var(--tinta);} .paxina-corpo p{margin:.5rem 0;} .paxina-corpo img{max-width:100%; height:auto; border-radius:6px;} .paxina-corpo h2,.paxina-corpo h3{font-family:"Playfair Display",serif;} .panel-pe{font-size:.62rem; color:var(--tinta2); font-style:italic; margin:.6rem 0 0; text-align:center;} .apuntado-nota{font-size:.62rem; color:var(--castano); font-style:italic; margin:.35rem 0 0;} .panel-pe.forte{font-size:.74rem; color:var(--terracota-escuro); font-style:normal; font-weight:600;} /* Mapa de avances: constelación de nodos */ .progreso-global{font-size:.7rem;color:var(--tinta2);margin:.15rem 0 .4rem;font-style:italic;text-align:center;} .mapa-svg{width:100%;height:auto;display:block;max-width:640px;margin:0 auto;} .mapa-svg text{font-family:inherit;} .mapa-liga{stroke:#e6d6b4;stroke-width:1.5;} .mapa-liga.aberta{stroke:#cdab73;} .mapa-centro{fill:var(--castano);} .mapa-centro-t{fill:#fdf7e8;font-size:12px;font-weight:600;} .mapa-centro-pc{fill:#fdf0d6;font-size:15px;font-weight:700;} .mapa-anel-bg{fill:var(--papel);stroke:#eadfc4;stroke-width:5;} .mapa-anel{fill:none;stroke:var(--terracota);stroke-width:5;stroke-linecap:round;} .mapa-nodo{cursor:default;} .mapa-nodo.clic{cursor:pointer;} .mapa-nodo.clic:hover .mapa-anel-bg{stroke:var(--laranxa); stroke-width:6;} .mapa-nodo.clic:hover .mapa-ir{fill:var(--terracota);} .mapa-ir{fill:var(--castano); font-size:9px; font-style:italic;} .mapa-nodo.bloq{opacity:.65;} .mapa-nodo.bloq .mapa-anel{stroke:#d8c9a4;} .mapa-nodo.sel .mapa-anel-bg{stroke:var(--laranxa);} .mapa-pc{fill:var(--tinta);font-size:13px;font-weight:700;} .mapa-et{fill:var(--tinta2);font-size:10px;} .mapa-sat .mapa-anel-bg{stroke-width:3.5;} .mapa-sat .mapa-anel{stroke-width:3.5;stroke:var(--laranxa);} .mapa-sat-pc{fill:var(--tinta);font-size:9.5px;font-weight:700;} .mapa-sat-et{fill:var(--tinta2);font-size:8px;} .mapa-explorar{margin:.6rem auto 0;display:block;background:var(--terracota-escuro);color:#fdf6ea;border:none;border-radius:999px;padding:.4rem 1rem;font-family:inherit;font-size:.72rem;cursor:pointer;} .mapa-explorar:hover{background:var(--terracota);} /* O que lembro de ti */ .memoria-liña{font-size:.74rem; margin:.3rem 0; color:var(--tinta);} .memoria-liña b{color:var(--castano);} .memoria-notas{list-style:none; margin:.3rem 0; padding:0;} .memoria-notas li{display:flex; align-items:flex-start; gap:.4rem; font-size:.7rem; color:var(--tinta2); padding:.25rem 0; border-bottom:1px dashed #ece0c0;} .memoria-notas li span{flex:1;} .memoria-borrar{border:none; background:none; color:var(--terracota); cursor:pointer; font-size:.8rem; line-height:1; padding:0 .15rem;} .memoria-borrar:hover{color:var(--terracota-escuro);} .memoria-chips{display:flex; flex-wrap:wrap; gap:.3rem; margin:.35rem 0;} .memoria-chip{background:var(--area); border:1px solid var(--liña); border-radius:999px; padding:.18rem .6rem; font-size:.62rem; color:var(--tinta2);} .memoria-baleiro{font-size:.72rem; font-style:italic; color:var(--tinta2); margin:.4rem 0;} .memoria-accions{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--liña);} .memoria-bot{background:var(--papel); border:1px solid var(--liña); border-radius:999px; padding:.3rem .75rem; font-family:inherit; font-size:.66rem; color:var(--castano); cursor:pointer;} .memoria-bot:hover{background:var(--area);} .memoria-bot.perigo{color:#8c2b16;} /* ── Páxinas informativas ── */ .paxina{max-width:760px; margin:0 auto; padding:1.4rem 1.25rem 3rem;} .paxina-volver{margin:0 0 1rem;} .paxina-volver a{font-size:.85rem; color:var(--tinta2); text-decoration:none;} .paxina-volver a:hover{text-decoration:underline;} .paxina h1{font-family:"Playfair Display",serif; font-size:2rem; margin:.2rem 0 1rem;} .paxina-contido{font-size:1rem; line-height:1.7;} .paxina-contido img{max-width:100%; height:auto; border-radius:6px;} /* ── Adaptación móbil: unha soa columna ── */ @media (max-width:900px){ .taboleiro{grid-template-columns:1fr; gap:0;} .panel-esq{position:static; max-height:none; padding:1.1rem .2rem .4rem;} .colaboracion{margin-top:1rem;} .rail-zona{width:48px;} .rail-zona.esq{width:14px;} } /* ── Compartir conversa como imaxe ── */ .compartir-zona{margin-top:.5rem;} .compartir-chip{background:transparent;border:1px solid var(--liña);border-radius:999px; padding:.28rem .8rem;font-family:inherit;font-size:.66rem;color:var(--castano);cursor:pointer;} .compartir-chip:hover{background:var(--papel);border-color:var(--castano);} .compartir-capa{position:fixed;inset:0;background:rgba(40,30,20,.55);display:flex; align-items:center;justify-content:center;z-index:60;padding:1rem;} .compartir-caixa{background:var(--papel);border-radius:14px;padding:1.1rem;max-width:420px;width:100%; max-height:92vh;overflow:auto;box-shadow:0 16px 50px rgba(0,0,0,.3);text-align:center;} .compartir-previa{width:100%;height:auto;border-radius:10px;border:1px solid var(--liña);display:block;} .compartir-cargando{color:var(--tinta2);padding:2rem 0;} .compartir-botois{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.8rem;} .compartir-bot{appearance:none;border:1px solid var(--liña);background:var(--papel);color:var(--tinta); border-radius:999px;padding:.5rem 1.1rem;font-family:inherit;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-block;} .compartir-bot.principal{background:var(--terracota);color:#fdf6ea;border-color:var(--terracota);font-weight:600;} .compartir-bot.sec{color:var(--tinta2);} .compartir-bot:hover{filter:brightness(.97);} .compartir-nota{font-size:.72rem;color:var(--tinta2);margin-top:.7rem;line-height:1.4;} /* No modo neno, o chip de compartir tamén en cápsula grosa */ body.modo-neno .compartir-chip{border:2px solid var(--castano);font-weight:500;} /* ── Imaxes ampliables (lightbox) ── */ .medio-imaxe-amp{cursor:zoom-in;transition:filter .15s;} .medio-imaxe-amp:hover{filter:brightness(.93);} .lightbox-capa{position:fixed;inset:0;background:rgba(20,15,10,.86);display:flex; align-items:center;justify-content:center;flex-direction:column;z-index:80;padding:2rem;cursor:zoom-out;} .lightbox-img{max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:8px; box-shadow:0 12px 50px rgba(0,0,0,.5);background:#fff;} .lightbox-cerra{position:absolute;top:1rem;right:1.2rem;width:2.4rem;height:2.4rem; border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.1rem;cursor:pointer;} .lightbox-cerra:hover{background:rgba(255,255,255,.3);} .lightbox-pe{margin-top:.9rem;color:#f0e8da;font-size:.85rem;text-align:center;max-width:80vw;}