/* css/carta.css: TODO el CSS de la carta, sacado de index.html por
   trabajo/docs/externalizar-app.py el 2026-09-02. Se edita AQUÍ, en el mismo orden en que
   estaba, que la cascada depende del orden. index.html y sus cinco copias lo enlazan. */

/* ===== <style sin id> (index.html línea 34) ===== */
  :root{
    color-scheme:only light; /* refuerza el meta: nada de tema oscuro forzado */
    --bg:#ffffff; --soft:#ffffff;
    --text:#021212; --muted:#70706a; --line:#d9d9d6; --paper:#fbf8f1;
    /* Rol acento — el que era dorado; desde el 20 jul 2026 es el vino de marca,
       no gris. Los rótulos que Mafe aprobó en gris tienen su propia regla y no pasan por aquí. */
    --gold:#3B161F; --gold-deep:#3B161F; --accent:#3B161F;
    --label:#021212; --label-hover:#3d3d33;
    --fire:#c05a34; --earth:#6f8f4a; --air:#b8912f; --water:#4f7f96;
    --danger:#c0392b;
    --card-sh:0 10px 26px -20px rgba(38,38,32,.35); --card-sh-lift:0 14px 30px -18px rgba(38,38,32,.4);
    --soft-sh:0 1px 4px rgba(47,54,35,.05); --pop-sh:0 10px 30px rgba(0,0,0,.13);
    --ch-signband:#021212; --ch-housering:#ece5d5; --ch-transitband:#e9ece0; --ch-gold:#5c5c56; --ch-line:#ddd5c0;
    --ch-signglyph:#f5f2ee; --ch-tick5:#94908a; --ch-tick1:#d9d2c3; --ch-house:#5c5c56; --ch-axis:#1a1a1a;
    /* transitglyph a antracita (Mafe, 20 jul 2026; era el verde #4f6f66) */
    --ch-natalglyph:#33302b; --ch-natalmark:#fdfcf7; --ch-transitglyph:#021212; --ch-transitsign:#33302b; --ch-transitmark:#5c5c56; --ch-retroarc:#c0392b;
    --ch-solarband:#f5eeda; --ch-solarglyph:#5c5c56; --ch-progband:#e9ece0; --ch-progglyph:#6f7d53;
    --ch-fire:#c05a34; --ch-earth:#6f8f4a; --ch-air:#b8912f; --ch-water:#4f7f96; --ch-retro:#c0392b;
    --f-head:'Arimo',Arial,Helvetica,sans-serif; --f-title:'Manrope',Arial,Helvetica,sans-serif;
    --f-display:'Manrope',Arial,Helvetica,sans-serif;
    --f-body:'Arimo',Arial,Helvetica,sans-serif;
    /* Escala tipografica (Fase 1) — 9 pasos, sin tamaños sueltos */
    --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px;
    --fs-lg:17px; --fs-xl:23px; --fs-2xl:34px; --fs-hero:52px;
    /* Escala de espaciado (base 4) */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
    /* Icono chevron de interfaz (mask reutilizable, autocontenido) */
    --ui-chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  }
  *{box-sizing:border-box}
  /* Iconos de interfaz — familia de línea fina, autocontenida (SVG inline). Heredan color con currentColor y tamaño con em. */
  /* pointer-events:none es OBLIGATORIO. Sin esto, al tocar un boton que solo lleva
     icono el clic aterriza en el <path> del SVG y no en el boton, asi que los
     manejadores que miran e.target no se enteran. Fue el bug de las flechas del
     calendario que cazo Mafe el 23 jul 2026. No lo quites. */
  .ui-ic{width:1em;height:1em;flex:0 0 auto;vertical-align:-0.14em;display:inline-block;pointer-events:none}
  /* El espaciado del cuerpo va en PX, no en em. En em crecía con el tamaño de letra
     y se heredaba hacia abajo, así que un título de 23px acababa en -0.8px y el número
     grande del Big 3 en -1.2px, con las letras pegadas. Ahora es fijo y además coincide
     con el valor del rol cuerpo (Arimo 16 / -0.5px). Mafe lo cazó el 23 jul 2026. */
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-head);font-weight:400;line-height:1.65;letter-spacing:-.5px}
  .wrap{max-width:1000px;margin:0 auto;padding:34px 20px 70px}
  .kicker{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);text-align:center;margin:0 0 8px;font-weight:600}
  h1{font-family:var(--f-title);font-weight:500;font-size:3.25rem;text-align:center;margin:0 0 6px;color:var(--text);letter-spacing:0}
  .sub{color:var(--muted);font-size:0.8125rem;text-align:center;margin:0 0 26px;font-weight:300}
  .grid{display:grid;gap:12px;margin-bottom:12px}
  .g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  /* En celular, una sola columna, para que la fecha no se apriete ni se corte */
  @media(max-width:600px){.grid.g4{grid-template-columns:1fr}}
  .g3{grid-template-columns:repeat(auto-fit,minmax(115px,1fr))}
  label{display:block;font-family:var(--f-title);font-size:0.75rem;letter-spacing:.01em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:600}
  input,select,button{font-family:inherit;font-size:0.875rem;width:100%;height:40px;padding:0 11px;
    border:1px solid var(--line);border-radius:5px;background:#ffffff;color:var(--text);font-weight:300}
  input:focus,select:focus{outline:none;border-color:var(--gold-deep)}
  button{cursor:pointer;background:var(--label);color:#fff;border:none;font-weight:500;letter-spacing:-.5px}
  button:hover{background:var(--label-hover)}
  .chartwrap{text-align:center;margin:16px 0 4px}
  svg{width:100%;max-width:960px}
  .angles{text-align:center;font-family:var(--f-title);font-size:1.4375rem;color:var(--gold-deep);margin:6px 0 22px}
  h2{font-family:var(--f-title);font-size:0.8125rem;letter-spacing:-.01em;text-transform:uppercase;color:var(--text);font-weight:700;
    margin:30px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
  .ess{display:grid;grid-template-columns:1fr;gap:12px}
  .esscard{display:flex;gap:14px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px;transition:background .25s ease,border-color .25s ease}
  .esscard.sel{background:#eeebe7;border-color:var(--gold)}
  .esshint{text-align:center;font-size:0.75rem;color:var(--muted);font-weight:300;margin:4px 0 0}
  .baldet-inline{margin:4px 7px 8px;padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:5px;line-height:1.55}
  .baldet-inline .bd-h{font-family:var(--f-title);font-size:0.875rem;color:var(--text);margin:0 0 4px}
  .baldet-inline .bd-m{color:var(--text);font-size:0.875rem;line-height:1.6;margin:0 0 5px}
  .baldet-inline .bd-x{color:var(--muted);font-size:0.75rem;font-weight:300}
  .esscard.sel .esstext{color:var(--text)}
  .esscard.sel .esshead small{color:var(--muted)}
  .essglyph{font-size:1.625rem;color:var(--gold-deep);line-height:1;min-width:30px;text-align:center;margin-top:2px}
  .esshead{font-family:var(--f-title);font-size:1.4375rem;color:var(--text);margin:0 0 3px}
  .esshead small{font-size:0.75rem;letter-spacing:.01em;text-transform:uppercase;color:var(--muted);display:block;font-family:var(--f-title);font-weight:700;margin-bottom:3px}
  .esstext{font-size:0.875rem;line-height:1.6;color:var(--text);margin:0}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px}
  .card{background:#ffffff;border:1px solid var(--line);border-radius:5px;padding:10px 12px}
  .card .row1{display:flex;align-items:center;gap:9px}
  .glyph{font-size:1.125rem;width:22px;text-align:center;color:var(--gold-deep)}
  .nm{font-size:0.8125rem;font-weight:400}
  .pos{font-size:0.75rem;color:var(--muted);margin-top:3px}
  .badge{font-size:0.625rem;color:var(--danger);border:1px solid var(--danger);border-radius:5px;padding:1px 5px;margin-left:auto;letter-spacing:.05em}
  .hs{font-size:0.625rem;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
  .accentcard{border-color:rgba(181,72,46,.42);background:rgba(181,72,46,.06)}
  .accentcard .nm,.accentcard .pos,.accentcard .glyph{color:var(--accent)}
  /* Posiciones agrupadas - pastillas desplegables + tabla (jul 2026) */
  #data{display:block}
  .posgrp{border:1px solid var(--line);border-radius:5px;background:#fff;margin-bottom:10px;overflow:hidden}
  .posgrp-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 16px;
    font-family:var(--f-title);font-size:0.75rem;font-weight:600;color:var(--text);user-select:none}
  .posgrp-sum::-webkit-details-marker{display:none}
  .posgrp-t{flex:1}
  .posgrp-n{font-family:var(--f-head);font-size:0.75rem;font-weight:700;color:var(--gold-deep);background:var(--soft);
    border:1px solid var(--line);border-radius:999px;padding:2px 9px}
  .posgrp-ar{color:var(--muted);font-size:0.9375rem;transition:transform .2s ease}
  .posgrp[open] .posgrp-ar{transform:rotate(180deg)}
  .posgrp[open] .posgrp-sum{border-bottom:1px solid var(--line)}
  .postab{width:100%;border-collapse:collapse;font-size:1rem}
  .postab th{text-align:left;font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;color:var(--muted);padding:9px 16px 6px;border-bottom:1px solid var(--line)}
  .postab td{padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
  .postab tbody tr:last-child td{border-bottom:none}
  .postab .pt-p{font-weight:500;color:var(--text);white-space:nowrap}
  .postab .pt-g{display:inline-flex;vertical-align:-4px;margin-right:6px}
  .postab .pt-ang{font-weight:700;font-size:0.75rem;color:var(--accent);vertical-align:0}
  .postab .pt-rx{display:inline-block;font-size:0.75rem;font-weight:700;color:var(--danger);margin-left:6px;border:1px solid var(--danger);border-radius:5px;padding:0 4px}
  .postab .pt-s{color:var(--text)}
  .postab .pt-sg{font-size:1rem;margin-right:3px}
  .postab .pt-deg{color:var(--muted);font-size:0.9375rem}
  .postab .pt-h{color:var(--gold-deep);font-weight:600;white-space:nowrap;font-size:0.9375rem}
  .postab tr.retro .pt-p{color:var(--danger)}
  /* Partes arábicas y estrellas fijas (solo datos, jul 2026) */
  /* Sin tope de ancho: el texto llega hasta el borde del contenedor (Mafe, 29 jul 2026) */
  .pf-intro{font-family:var(--f-body);font-size:0.9375rem;line-height:1.55;color:var(--muted);margin:0 0 14px}
  .postab .pt-f{display:block;font-family:var(--f-title);font-size:0.6875rem;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--muted);margin-top:2px;white-space:nowrap}
  .postab td.pt-cj{color:var(--text);font-size:0.9375rem}
  .st-real{display:inline-block;font-family:var(--f-title);font-size:0.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 6px;margin-left:8px;vertical-align:1px}
  .asp{display:flex;flex-wrap:wrap;gap:7px}
  .chip{display:inline-flex;align-items:center;gap:7px;font-size:0.75rem;background:var(--soft);
    border:1px solid var(--line);border-radius:5px;padding:5px 10px;color:var(--muted)}
  .chip .g{color:var(--text)}
  .note{font-size:0.6875rem;color:var(--muted);margin-top:22px;font-weight:300;line-height:1.6}
  .notime-opt{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:0.75rem;color:var(--muted);font-weight:400;cursor:pointer;user-select:none}
  .notime-opt input{width:14px;height:14px;accent-color:var(--gold-deep);cursor:pointer;margin:0}
  #notime-note{display:none;background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--gold-deep);border-radius:5px;padding:12px 15px;margin:0 0 18px;font-size:0.78125rem;line-height:1.55;color:var(--text)}
  #notime-note b{color:var(--gold-deep)}
  body[data-view="natal"] #big3box .b3card.asc.notime{opacity:.55}
  #big3box .b3card.asc.notime{cursor:default}
  #big3box .b3card.asc.notime .b3sign{font-size:0.75rem;color:var(--muted);font-weight:400}
  .foot{text-align:center;color:var(--gold-deep);font-size:0.6875rem;letter-spacing:.24em;text-transform:uppercase;margin-top:26px}
  .results{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:5px;margin-top:4px;box-shadow:var(--pop-sh);max-height:240px;overflow-y:auto}
  .results:empty{display:none}
  .ritem{padding:8px 11px;font-size:0.8125rem;cursor:pointer;border-bottom:1px solid var(--line)}
  .ritem:last-child{border-bottom:none}
  .ritem:hover{background:var(--soft)}
  .ritem b{font-weight:500}
  .ritem span{color:var(--muted);font-size:0.75rem}
  .ritem-aviso{cursor:default;padding-top:9px;padding-bottom:9px;border-top:1px solid var(--line)}
  .ritem-aviso a{color:var(--accent);text-decoration:none;font-size:0.75rem;font-weight:400}
  .ritem-aviso a:hover{text-decoration:underline}
  .hit{cursor:pointer}
  .retrowedge{cursor:default}
  #retrotip{position:fixed;z-index:1200;display:none;pointer-events:none;max-width:240px;background:var(--text);color:var(--paper);font-family:var(--f-body);font-size:var(--fs-sm);line-height:1.45;padding:8px 12px;box-shadow:var(--pop-sh)}
  .hit:hover~*{}
  .detailbox{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin:2px 0 6px;min-height:64px;transition:border-color .15s}
  .detailbox .drow{display:flex;gap:14px;align-items:flex-start}
  .detailbox .dglyph{font-size:1.625rem;color:var(--gold-deep);line-height:1;min-width:30px;text-align:center;margin-top:2px}
  .detailbox .dhead{font-family:var(--f-title);font-size:1.4375rem;margin:0 0 3px;color:var(--text)}
  .detailbox .dhead small{display:block;font-family:var(--f-head);font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:2px}
  .detailbox .dtext{font-size:0.875rem;line-height:1.6;color:var(--text);margin:0}
  .detailbox .empty{font-size:0.8125rem;color:var(--muted);text-align:center;margin:8px 0;font-weight:300}
  .tabs{display:flex;gap:8px;justify-content:center;margin:0 0 22px;flex-wrap:wrap}
  /* La portada (el cielo estrellado) se retiró (Mafe, 18 jul): la página abre de una
     en Planetas hoy. OJO: el abanico de pestañas vive dentro de #hero (.hero-body),
     así que se apaga solo .hero-sky, sin borrar nada, por si algún día vuelve. */
  .hero-sky{display:none!important}
  #hero{position:relative;margin:0 0 44px;background:transparent;overflow:visible}
  .hero-sky{display:none}
  .hero-sky>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hero-fade{position:absolute;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--bg) 92%);pointer-events:none}
  .hero-body{position:relative;z-index:2;text-align:center;padding:8px 24px 20px;margin-top:0}
  #hero .kicker{color:var(--gold-deep);letter-spacing:.12em}
  #hero h1{color:var(--text);margin-bottom:6px}
  #hero h1 em{font-style:italic;font-weight:500}
  #hero .sub{color:var(--muted);margin-bottom:24px;font-style:italic;font-size:0.875rem}
  #hero .tabs{margin-bottom:0}
  /* Sección del hero (sin imagen, en reacomodo) */
  #hero .hero-banner{position:relative;padding:6px 24px 18px;margin:0 0 6px}
  #hero .hero-banner .kicker{color:var(--gold-deep);letter-spacing:.12em;font-weight:600;margin-bottom:8px}
  #hero .hero-banner h1{font-family:var(--f-title);font-weight:600;color:var(--text);letter-spacing:-.01em;margin:0}
  #hero .hero-banner h1 em{font-style:italic;font-weight:600;color:var(--accent)}
  .twinkle{animation:hero-twk 3s ease-in-out infinite}
  @keyframes hero-twk{0%,100%{opacity:.25}50%{opacity:1}}
  .hero-float{animation:hero-fl 7s ease-in-out infinite}
  .hero-float2{animation:hero-fl 10s ease-in-out infinite}
  @keyframes hero-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  #hero-shoot{opacity:0;animation:hero-shoot 8s linear infinite}
  @keyframes hero-shoot{0%,70%{opacity:0;transform:translate(0,0)}72%{opacity:0}74%{opacity:1}86%{opacity:1;transform:translate(-210px,132px)}88%,100%{opacity:0;transform:translate(-210px,132px)}}
  @media(prefers-reduced-motion:reduce){.twinkle,.hero-float,.hero-float2,#hero-shoot{animation:none}}
  @media(max-width:640px){.hero-body{margin-top:0}#hero h1{font-size:2.375rem}}
  #astro-box{margin-top:20px;width:min(1300px,94vw);position:relative;left:50%;transform:translateX(-50%)}
  .acg-intro{font-family:var(--f-head);font-size:0.875rem;line-height:1.6;color:var(--text);margin:0 0 14px}
  .acg-sep{border:none;border-top:1px solid var(--line);width:100%;margin:22px 0 18px}
  .acg-picktitle{font-family:var(--f-title);font-size:1.125rem;font-weight:600;color:var(--gold-deep);text-align:left;margin:0 0 14px}
  .acg-chips{display:flex;flex-wrap:wrap;gap:12px 14px;margin:8px 0 4px;align-items:flex-start}
  .acg-tok{display:flex;flex-direction:column;align-items:center;width:52px;cursor:pointer;user-select:none;text-align:center}
  .acg-tok-c{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--line);transition:transform .15s,background .15s,border-color .15s}
  .acg-tok-c svg{display:block}
  .acg-tok-n{font-family:var(--f-head);font-size:0.6875rem;margin-top:4px;line-height:1.15;color:var(--muted)}
  .acg-tok:hover .acg-tok-c{transform:scale(1.07)}
  .acg-tok.on .acg-tok-n{color:var(--text);font-weight:600}
  .acg-tok.off .acg-tok-c{opacity:.85}
  /* 18px arriba: los botones iban pegados a los nombres de los planetas (Mafe, 20 jul 2026). */
  .acg-allbtns{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 2px}
  .acg-lens{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
  .acg-lens-panel{margin:10px 0 2px;padding:12px 14px;border:1.5px solid var(--line);border-radius:5px;background:var(--soft)}
  .acg-caret{font-size:0.6875rem;transition:transform .18s}
  #acg-lens-btn[aria-expanded="true"] .acg-caret{transform:rotate(180deg)}
  .acg-lensbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--gold);background:#fff;color:var(--gold-deep);border-radius:5px;padding:7px 15px;font-family:var(--f-head);font-size:0.8125rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
  .acg-lensbtn:not(.on):hover{background:var(--soft)}
  .acg-lensbtn.on{background:var(--gold-deep);color:var(--paper)}
  .acg-allbtns button{background:var(--soft);border:1px solid var(--line);color:var(--gold-deep);border-radius:5px;padding:5px 14px;font-size:0.75rem;cursor:pointer;font-family:var(--f-head)}
  .acg-legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 2px;font-family:var(--f-head);font-size:0.75rem;color:var(--muted)}
  .acg-legend b{color:var(--gold-deep);font-weight:600}
  .acg-viewtoggle{display:inline-flex;gap:0;margin:12px 0 2px;border:1.5px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
  .acg-viewtoggle button{border:none;background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.8125rem;font-weight:600;padding:8px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .15s,color .15s}
  .acg-viewtoggle button.on{background:var(--gold-deep);color:var(--paper)}
  .acg-viewtoggle button:not(.on):hover{background:var(--soft)}
  /* Barra unificada de 4 modos del mapa - MAPA / 3D / Parans / Carta relocalizada (jul 2026) */
  .acg-modebar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px}
  .acg-modebtn{flex:1 1 auto;width:auto;height:auto;justify-content:center;border:1.5px solid var(--line);background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.78125rem;font-weight:600;padding:9px 12px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
  .acg-modebtn:not(.on):hover{background:var(--soft)}
  .acg-modebtn.on{background:var(--gold-deep);color:var(--paper);border-color:var(--gold-deep)}
  /* "Muéstrame las líneas para…" junto a Todos/Ninguno, en color de acento para diferenciarlo */
  .acg-allbtns button{flex:1 1 0}
  .acg-allbtns .acg-lenscta{flex:2 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--gold-deep);border:1px solid var(--gold-deep);color:var(--paper);white-space:nowrap}
  .acg-allbtns .acg-lenscta .acg-caret{display:inline-flex;transition:transform .2s}
  .acg-allbtns .acg-lenscta[aria-expanded="true"] .acg-caret{transform:rotate(180deg)}
  /* Móvil - el buscador de líneas baja a su fila y los 4 modos van 2x2 */
  @media(max-width:560px){
    .acg-allbtns .acg-lenscta{flex:1 1 100%;order:3}
    .acg-modebtn{flex:1 1 calc(50% - 4px)}
  }
  .acg-paranbtn{display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px 10px;border:1.5px solid var(--line);border-radius:5px;background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.8125rem;font-weight:600;padding:8px 18px;cursor:pointer;transition:background .15s,color .15s;vertical-align:top}
  .acg-paranbtn:not(.on):hover{background:var(--soft)}
  .acg-paranbtn.on{background:var(--gold-deep);color:var(--paper)}
  .acg-reportbtn{display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px 10px;border:1.5px solid var(--gold-deep);border-radius:5px;background:var(--gold-deep);color:var(--paper);font-family:var(--f-head);font-size:0.8125rem;font-weight:600;padding:8px 20px;cursor:pointer;transition:opacity .15s;vertical-align:top}
  .acg-reportbtn:hover{opacity:.9}
  #acg-report{margin:26px auto 0;max-width:1000px;font-family:var(--f-head);color:var(--text);text-align:left}
  #acg-report .rep-head h2{font-family:var(--f-head);font-size:1.4375rem;color:var(--gold-deep);margin:0 0 6px;letter-spacing:-.02em}
  #acg-report .rep-lead{font-size:0.875rem;line-height:1.6;margin:0 0 20px}
  #acg-report .rep-sec{margin:0 0 26px}
  #acg-report .rep-sec h3{font-family:var(--f-head);font-size:1.125rem;color:var(--gold-deep);margin:0 0 2px}
  #acg-report .rep-sub{font-size:0.75rem;color:var(--muted);margin:0 0 12px}
  #acg-report .rep-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
  #acg-report .rep-card{background:#fff;border:1px solid var(--line);border-radius:5px;padding:16px 18px}
  #acg-report .rep-city{font-family:var(--f-head);font-size:1.125rem;color:var(--text);margin-bottom:9px;line-height:1.2}
  #acg-report .rep-city span{display:block;font-family:var(--f-head);font-size:0.6875rem;color:var(--muted);font-weight:400;margin-top:1px}
  #acg-report .rep-lns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
  #acg-report .rep-ln{display:inline-flex;align-items:center;gap:4px;font-size:0.6875rem;color:var(--c);border:1px solid var(--c);border-radius:5px;padding:2px 8px}
  #acg-report .rep-txt{font-size:0.8125rem;line-height:1.55;margin:0}
  #acg-report .rep-gloss .rep-gcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  #acg-report .rep-gcols h4{font-family:var(--f-head);color:var(--gold-deep);margin:0 0 6px;font-size:0.875rem}
  #acg-report .rep-gcols p{font-size:0.75rem;line-height:1.5;margin:0 0 5px}
  #acg-report .rep-foot{font-size:0.75rem;color:var(--muted);font-style:italic;margin:12px 0 0}
  @media(max-width:640px){#acg-report .rep-gcols{grid-template-columns:1fr}}
  #acg-globewrap{position:relative;margin:16px auto 4px;width:100%;max-width:640px;aspect-ratio:1/1;touch-action:none;cursor:grab;overflow:hidden;border-radius:5px}
  #acg-globewrap.grabbing{cursor:grabbing}
  #acg-globewrap svg{width:100%;height:100%;display:block;overflow:visible}
  #acg-globewrap .gl-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-family:var(--f-head);font-size:0.6875rem;color:var(--muted);background:rgba(248,246,244,.82);border:1px solid var(--line);border-radius:5px;padding:4px 12px;pointer-events:none;white-space:nowrap}
  #acg-globewrap .gl-zoom{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;gap:5px}
  #acg-globewrap .gl-zoom button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--gold-deep);font-size:1.125rem;line-height:1;cursor:pointer;font-family:var(--f-head);display:flex;align-items:center;justify-content:center}
  #acg-globewrap .gl-zoom button:active{background:var(--soft)}
  #astro-info{margin:16px auto 0;max-width:640px;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:16px 18px;font-family:var(--f-head);font-size:0.875rem;line-height:1.62;color:var(--text)}
  #astro-info .ai-head{font-family:var(--f-head);font-size:1.125rem;color:var(--gold-deep);margin:0 0 6px;letter-spacing:-.02em}
  #astro-info .ai-sub{font-size:0.75rem;color:var(--muted);margin:0 0 8px}
  .acgline{cursor:pointer}
  .acghit{cursor:pointer}
  .tab{width:auto;height:auto;padding:9px 17px;background:#fff;border:1px solid var(--line);color:var(--text);border-radius:5px;font-family:var(--f-head);font-size:0.8125rem;font-weight:600;letter-spacing:-.02em;box-shadow:var(--soft-sh);transition:background .16s,color .16s,border-color .16s,transform .16s}
  .tab:hover{background:var(--soft);border-color:#c8c8c8;transform:translateY(-1px)}
  .tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(181,72,46,.28)}
  .tab.active:hover{background:#9a3d26;border-color:#9a3d26}
  .tab-main{width:auto;box-sizing:border-box;padding:9px 17px;text-align:center}
  .tab-more{background:var(--soft);border-color:var(--line);color:var(--muted);font-weight:500}
  .tab-more:hover{background:#e2dbc9;border-color:#c8c8c8}
  .moredd{position:relative}
  .more-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:9998;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:var(--pop-sh);padding:6px;min-width:186px}
  .more-item{display:block;width:100%;text-align:left;background:transparent;color:var(--text);border:none;border-radius:5px;padding:9px 12px;font-family:var(--f-head);font-size:0.8125rem;font-weight:400;letter-spacing:-.02em}
  .more-item:hover{background:var(--soft);color:var(--text)}
  .more-note{text-align:center;font-size:0.75rem;color:var(--gold-deep);margin:-14px 0 20px;font-weight:400}
  .more-note .sr-title{font-family:var(--f-title);font-size:1.4375rem;font-weight:600;color:var(--gold-deep);letter-spacing:-.02em;margin:34px 0 10px;display:block}
  .more-note .sr-body{font-family:var(--f-head);font-size:0.875rem;line-height:1.7;color:var(--text);font-weight:400;max-width:540px;margin:0 auto}
  #belowzone{transition:opacity .35s ease;margin-top:26px}
  #belowzone.dimmed{opacity:.5}
  /* === Láser de aspectos de tránsito (jul 2026) === */
  @keyframes laserDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes laserRing{0%{opacity:.85;transform:scale(.4)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}}
  @keyframes laserFade{from{opacity:0}to{opacity:1}}
  #taspects .laser-glow{stroke-width:5;stroke-linecap:round;opacity:.16;stroke-dasharray:1;stroke-dashoffset:1;filter:blur(2.5px);animation:laserDraw .4s ease-out forwards}
  #taspects .laser-core{stroke-width:1.5;stroke-linecap:round;opacity:.95;stroke-dasharray:1;stroke-dashoffset:1;animation:laserDraw .4s ease-out forwards}
  #taspects .laser-pulse{stroke-width:3;stroke-linecap:round;opacity:.85;stroke-dasharray:.13 .87;stroke-dashoffset:1;animation:laserDraw 1.15s linear .4s infinite}
  #taspects .laser-dot{opacity:0;animation:laserFade .3s ease-out .38s forwards}
  #taspects .laser-ring{stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:laserRing 1.15s ease-out .4s infinite}
  #taspects .laser-glow.laser-main{stroke-width:8;opacity:.24}
  #taspects .laser-core.laser-main{stroke-width:2.7;opacity:1}
  @media(prefers-reduced-motion:reduce){#taspects .laser-glow,#taspects .laser-core{animation:none;stroke-dashoffset:0}#taspects .laser-pulse,#taspects .laser-ring{display:none}#taspects .laser-dot{animation:none;opacity:1}}
  #chart .tpl{transition:transform .2s ease}
  #chart .tpl.tpl-focus{transform-box:fill-box;transform-origin:center;transform:scale(1.4)}
  /* === Modo "Mover el Sol" === */
  .sunmove-btn{width:auto;height:auto;padding:8px 16px;background:#fff;border:1.5px solid var(--gold);color:var(--gold-deep);border-radius:5px;font-family:var(--f-head);font-size:0.8125rem;font-weight:600;cursor:pointer}
  .sunmove-btn:hover{background:var(--soft)}
  .sunmove-btn.on{background:var(--ch-signband);border-color:var(--ch-signband);color:#fff}
  #chart.movemode{cursor:grab;touch-action:none}
  #chart.movemode svg>*{opacity:.42;transition:opacity .25s ease}
  #chart.movemode svg>#taspects,#chart.movemode svg>.tpl.moving{opacity:1}
  #chart.movemode .tpl.moving text{display:none}
  #chart.movemode .hit{pointer-events:none}
  #chart.movemode #taspects .laser-glow,#chart.movemode #taspects .laser-core{animation:none;stroke-dashoffset:0}
  #chart.movemode #taspects .laser-pulse{display:none}
  #chart.movemode #taspects .laser-ring{animation:none;opacity:.5}
  #chart.movemode #taspects .laser-dot{animation:none;opacity:1}
  .tkicker{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;margin:8px 0 18px;font-weight:600}
  .tnav{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 6px}
  .tnav button{width:44px;height:36px;padding:0;background:var(--soft);border:1px solid var(--line);color:var(--gold-deep);border-radius:5px;font-size:0.875rem;font-weight:600}
  .tnav button:hover{background:var(--label);color:#fff;border-color:var(--label)}
  .tnav select{width:auto;min-width:110px;height:36px;text-align:center}
  .tsearch{margin:24px 0 6px;padding-top:20px;border-top:1px solid var(--line)}
  .srow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
  .srow select{width:auto;min-width:130px}
  .srow #s-aspwrap{display:flex;gap:8px;flex-wrap:wrap}
  .srow button{width:auto;height:36px;padding:0 18px;background:var(--soft);border:1px solid var(--line);color:var(--gold-deep);font-weight:500}
  .srow button:hover{background:var(--label);color:#fff;border-color:var(--label)}
  .sresult{text-align:center;font-size:0.8125rem;color:var(--gold-deep);min-height:18px;margin-top:4px}
  /* === Controles de tránsito en una sola línea (jul 2026) === */
  .tline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0 8px}
  .tline-nav{margin:8px 0 4px}
  .tline-search{margin:10px 0 6px}
  .tfields{grid-template-columns:1fr 1fr 1fr auto;align-items:end}
  .tfields .tline-nav{margin:0;justify-content:flex-start}
  @media(max-width:680px){.tfields{grid-template-columns:1fr 1fr}.tfields .tline-nav{grid-column:1/-1;justify-content:center;margin-top:4px}}
  .tline .tnav{margin:0}
  .t-now-inline{width:auto;height:36px;padding:0 18px}
  .tsearch-inline{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px}
  .tsearch-lbl{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .tsearch-inline select{width:auto;min-width:120px}
  .tsearch-inline button{width:auto;height:36px;padding:0 14px;font-weight:500}
  #transit-box .tmoment{max-width:520px;margin-left:auto;margin-right:auto}
  /* === Panel de tránsitos: hereda los colores de la rueda (--ch-*) (jul 2026) === */
  #transit-box{--t-band:var(--ch-transitband,#eae8d7);--t-deep:var(--ch-transitmark,#5c5c56);--t-line:var(--line)}
  #transit-box .tkicker{color:var(--t-deep);margin:4px 0 10px}
  #transit-box .grid{margin-bottom:6px}
  #transit-box label{color:var(--muted)}
  #transit-box input,#transit-box select{border-color:var(--t-line)}
  #transit-box input:focus,#transit-box select:focus{border-color:var(--t-deep);box-shadow:0 0 0 3px rgba(86,92,99,.18)}
  #transit-box #t-now{background:var(--t-deep);color:#fff}
  /* El traje del boton VER vive abajo del todo, junto al de las flechas, para que
     la jerarquia del bloque de buscar evento se lea de un vistazo en un solo sitio. */
  #transit-box #t-now:hover{background:var(--t-deep);filter:brightness(.9)}
  #transit-box .tnav button,#transit-box .srow button,#transit-box .tsearch-inline button{background:var(--t-band);border:1px solid var(--t-line);color:var(--t-deep)}
  #transit-box .tnav button:hover,#transit-box .srow button:hover,#transit-box .tsearch-inline button:hover{background:var(--t-deep);border-color:var(--t-deep);color:#fff}
  #transit-box .tsearch{border-top-color:var(--t-line)}
  #transit-box .sresult{color:var(--t-deep)}
  #transit-box .results .ritem:hover{background:var(--t-band)}
  .tmoment{text-align:center;font-size:0.875rem;color:var(--muted);background:none;border:none;padding:0;margin:18px 0 2px}
  .tmoment b{font-weight:600}
  .tmoment:empty{display:none}
  #big3box{background:var(--soft);border:1.5px solid var(--line);border-radius:5px;padding:22px;margin:26px 0 30px}
  #big3box .angles{margin:0 0 16px}
  .big3title{font-family:var(--f-title);font-size:0.75rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text);text-align:center;margin:0 0 13px;font-weight:700}
  .big3{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
  .b3{display:flex;align-items:center;gap:9px;width:190px;box-sizing:border-box;background:var(--label);border:1px solid var(--label);border-radius:5px;padding:8px 15px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
  .b3:hover{transform:translateY(-4px);box-shadow:var(--card-sh-lift)}
  .b3.sel{box-shadow:0 0 0 2px var(--muted)}
  .b3g{width:22px;text-align:center;display:inline-flex;justify-content:center;color:#fff}
  .b3l{font-family:var(--f-title);font-size:0.625rem;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600}
  .b3v{font-size:0.875rem;color:#fff}
  .charthint{text-align:left;font-size:0.75rem;color:var(--muted);letter-spacing:.01em;margin:18px 0 0;font-weight:400}
  .chartopts{text-align:center;margin:8px 0 0}
  .ce-toggle{margin-top:10px;background:#fff;border:1px solid var(--line);color:var(--gold-deep);font-family:var(--f-head);font-size:0.8125rem;font-weight:600;padding:8px 16px;border-radius:5px;cursor:pointer;transition:background .15s,border-color .15s}
  .ce-toggle:hover{background:var(--soft);border-color:var(--gold)}
  .ce-toggle.on{background:var(--label);color:#fff;border-color:var(--label)}
  .ce-panel{margin:14px 0 4px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px}
  .ce-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;font-family:var(--f-head)}
  .ce-bar strong{font-size:0.875rem;color:var(--text)}
  .ce-click{display:inline-flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--muted);cursor:pointer}
  .ce-btn{background:#fff;border:1px solid var(--line);color:var(--gold-deep);font-family:var(--f-head);font-size:0.75rem;font-weight:600;padding:6px 13px;border-radius:5px;cursor:pointer}
  .ce-btn:hover{background:var(--soft);border-color:var(--gold)}
  .ce-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
  .ce-grp{background:#fff;border:1px solid var(--line);border-radius:5px;padding:11px 13px}
  .ce-grp h4{margin:0 0 8px;font-family:var(--f-head);font-size:0.75rem;font-weight:700;color:var(--gold-deep);letter-spacing:.01em}
  .ce-row{display:flex;align-items:center;gap:10px;padding:3px 0}
  .ce-row label{flex:1;font-size:0.75rem;color:var(--text)}
  .ce-row input[type=color]{width:30px;height:26px;border:1px solid var(--line);border-radius:5px;padding:0;background:none;cursor:pointer;flex:none}
  .ce-hit-edit{cursor:crosshair!important}
  .advopts{max-width:640px;margin:12px auto 0;border:1px solid var(--line);border-radius:5px;background:var(--soft);overflow:hidden}
  .hoypanel{max-width:none;margin:14px 0 0;background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 24px;text-align:left}
  #chartrow.split{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start;margin:16px 0 4px}
  #chartrow.split #chart{margin:0;grid-column:2;grid-row:1;background:#fff;border:1px solid var(--line);border-radius:5px;padding:18px 16px 20px;box-sizing:border-box}
  #chartrow.split #dc-col{grid-column:1;grid-row:1;align-self:start;justify-self:start;display:flex;flex-direction:column}
  #chartrow.split #daycalc{margin:0}
  #chartrow.split #dc-change{margin-top:12px}
  @media(max-width:820px){#chartrow.split{grid-template-columns:1fr;gap:14px}#chartrow.split #chart,#chartrow.split #dc-col{grid-column:auto;grid-row:auto}#chartrow.split #dc-col{align-items:stretch;justify-self:stretch}}
  /* Astrocartografía: mapa/globo a la izquierda, descripciones a la derecha */
  #chartrow.astro-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start;margin:16px 0 4px;width:min(1300px,94vw);position:relative;left:50%;transform:translateX(-50%)}
  #chartrow.astro-split #chart{margin:0;min-width:0;grid-column:1}
  #chartrow.astro-split #astro-info{margin:0;max-width:none;grid-column:2;align-self:start}
  #chartrow.astro-split #acgmap{height:min(84vh,760px)}
  @media(max-width:900px){#chartrow.astro-split{grid-template-columns:1fr;width:96vw}#chartrow.astro-split #astro-info{grid-column:1}#chartrow.astro-split #acgmap{height:min(70vh,520px)}#astro-box{width:96vw}}
  /* Puntos de cénit: el glifo del planeta en un circulito, clavado sobre su línea MC */
  .acg-zen{background:none;border:none}
  .acg-zen .acg-zen-i{display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#fff;border:1.6px solid currentColor;border-radius:50%;box-shadow:0 1px 3px rgba(38,38,32,.25);cursor:pointer}
  .acg-zen.dim{opacity:.32}
  /* Ciudades clicables del mapa: punto vino con borde blanco */
  .acg-city-w{background:none;border:none}
  .acg-city{display:block;width:9px;height:9px;border-radius:50%;background:#3B161F;border:1.5px solid #fff;box-shadow:0 1px 2px rgba(38,38,32,.4);cursor:pointer}
  /* Botón de pantalla completa del mapa: solo existe en escritorio */
  #acg-fs-btn{display:none;position:absolute;top:10px;right:10px;z-index:1300;width:auto!important;flex:none!important;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.78125rem;font-weight:600;padding:8px 11px;border-radius:5px;cursor:pointer}
  #acg-fs-btn:hover{background:var(--soft)}
  @media(min-width:901px){#chartrow.astro-split #chart{position:relative}#chartrow.astro-split #acg-fs-btn{display:inline-flex}}
  /* La animación de entrada deja un transform puesto mientras corre y eso atraparía al
     position:fixed, así que en pantalla completa se apaga en los ancestros del mapa */
  body.acg-fs #chartrow,body.acg-fs #astro-box{animation:none!important;transform:none!important}
  body.acg-fs #chart{position:fixed!important;top:0;left:0;right:0;bottom:0;z-index:4000;background:var(--paper);margin:0!important;padding:12px 16px 16px;overflow:auto}
  body.acg-fs #maqueta-header,body.acg-fs .maqueta-header{display:none}
  /* En pantalla completa los controles no desaparecen: los chips y modos flotan arriba
     y la lectura de la línea tocada abajo a la izquierda (Mafe, 28 jul 2026) */
  body.acg-fs #astro-box{display:block!important;position:fixed!important;top:8px;left:50%!important;transform:translateX(-50%)!important;width:min(86vw,1000px)!important;z-index:4050;background:rgba(251,248,241,.95);border:1px solid var(--line);border-radius:5px;padding:8px 12px 10px;margin:0!important;max-height:40vh;overflow:auto}
  body.acg-fs #astro-box .acg-intro,body.acg-fs #astro-box .acg-sep,body.acg-fs #astro-box .acg-picktitle,body.acg-fs #acg-paran-note{display:none!important}
  body.acg-fs #astro-info{position:fixed!important;left:18px;bottom:18px;width:min(380px,32vw)!important;max-height:46vh;overflow:auto;z-index:4040;margin:0!important;background:var(--paper)}
  /* La franja de controles se puede plegar a una pastilla para ver el mapa limpio (Mafe eligió C, 28 jul 2026) */
  #acg-fs-fold{display:none}
  body.acg-fs #acg-fs-fold{display:inline-flex;position:absolute;top:6px;right:8px;z-index:2;width:auto!important;flex:none!important;align-items:center;border:1.5px solid var(--line);background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.71875rem;font-weight:600;padding:5px 9px;border-radius:5px;cursor:pointer}
  body.acg-fs #astro-box{padding-right:76px}
  body.acg-fs #astro-box.acg-fold{width:auto!important;max-height:none;padding:6px 10px}
  body.acg-fs #astro-box.acg-fold > :not(#acg-fs-fold){display:none!important}
  body.acg-fs #astro-box.acg-fold #acg-fs-fold{position:static}
  body.acg-fs #acgmap{height:calc(100vh - 84px)!important}
  body.acg-fs #acg-globewrap{max-width:calc(100vh - 60px);margin:0 auto}
  body.acg-fs #acg-fs-btn{position:fixed;top:14px;right:18px;z-index:4100}
  /* La carta relocalizada de las ciudades: panel lateral fijo, grande, solo escritorio */
  #rl-side{display:none;position:fixed;top:72px;right:18px;bottom:18px;width:min(440px,42vw);z-index:4200;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:14px 16px 16px;overflow:auto;box-shadow:0 8px 30px rgba(38,38,32,.18)}
  #rl-side .rl-side-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  #rl-side .rl-side-city{font-family:var(--f-head);font-size:1.125rem;color:var(--gold-deep);letter-spacing:-.02em}
  #rl-side .rl-side-x{border:none;background:none;color:var(--muted);font-size:1.05rem;cursor:pointer;padding:2px 4px;line-height:1}
  #rl-side .rl-side-cap{font-size:0.8125rem;color:var(--muted);margin:2px 0 8px}
  #rl-side .rl-side-note{font-size:0.8125rem;color:var(--muted);margin:8px 0 0}
  #rl-side #rl-side-chart svg{width:100%;height:auto;display:block}
  @media(max-width:900px){#rl-side{display:none!important}}
  /* ===== La zona de la rueda en Transitos (Mafe, 27 jul 2026) =====
     Antes cada pieza flotaba por su lado, la frase, el "Estas viendo", la rueda y los
     botones de descarga. Mafe eligio de las propuestas la C para celular, una banda
     compacta sobre la rueda con la fecha en vino y las descargas al lado, y la B para
     escritorio, la rueda grande a la izquierda y una columna a la derecha con la fecha
     de titular, la frase, las descargas y el panel del evento. Los cajones #tcab y
     #tcola viven dentro de #chartrow y la mudanza de nodos esta al final del archivo. */
  #tcab[hidden],#tcola[hidden]{display:none!important}
  .tm-rot{display:block;font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .tm-fecha{display:block;font-family:var(--f-title);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);line-height:1.15}
  .tm-city{display:block;font-size:0.75rem;color:var(--muted);margin-top:2px}
  #tcab .tmoment{margin:0;max-width:none;text-align:left}
  #tcab #png-dl{margin:0}
  /* El orden visual no depende de quien llegue primero a la mudanza: la fecha
     siempre delante y los botones despues, lo diga el DOM o no. */
  #tcab .tmoment{order:1}
  #tcab #png-dl{order:2}
  /* La frase de tocar la rueda se queda sin su caja al mudarse, y la caja vacia que
     deja atras no tiene que ocupar sitio */
  body[data-view="transit"] #chartopts{display:none!important}
  /* La invitación a tocar la rueda va dentro del recuadro del evento (.ev-pista).
     La frase suelta solo asoma mientras NO haya recuadro, para no decirla dos veces.
     El doble selector del estilo es porque el display:none puede venir escrito con
     espacio o sin él según quién lo puso, el HTML o el JS. */
  .ev-pista{color:var(--muted);margin-top:10px}
  body[data-view="transit"] #tcola .charthint{display:none}
  body[data-view="transit"] #tcola:has(#eventpanel[style*="display:none"]) .charthint,
  body[data-view="transit"] #tcola:has(#eventpanel[style*="display: none"]) .charthint{display:block}
  @media(max-width:900px){
    body[data-view="transit"] #chartrow{display:flex;flex-direction:column}
    /* Sin caja beige (Mafe, 27 jul 2026: «rompe con todo»). Cuando la banda se
       diseñó, debajo iba la rueda suelta y el fondo la sostenía. Ahora que el
       evento vive en tarjetas blancas, ese bloque macizo era el único parche de
       color de la vista y desentonaba. La fila se queda igual de ordenada con
       puro aire, que es como respira el resto de la página. */
    body[data-view="transit"] #tcab{order:1;display:flex;align-items:center;justify-content:space-between;gap:9px;
      background:transparent;padding:0;margin:14px 2px 6px}
    body[data-view="transit"] #chart{order:2}
    /* La ventana de lectura no tenia orden propio y, como el valor de fabrica es 0,
       la columna la sacaba ANTES que todo lo demas: al tocar un planeta el texto se
       plantaba arriba del todo y la rueda quedaba enterrada debajo (Mafe, 19 ago
       2026: «la carta tiene que ir arriba y la descripcion abajo»). Aqui manda el
       orden de verdad: la banda con la fecha, la rueda, lo que acabas de tocar y,
       al final, la frase con las descargas. */
    body[data-view="transit"] #chartrow #detail{order:3;margin:14px 0 0}
    body[data-view="transit"] #tcola{order:4}
    #tcab .tm-fecha{font-size:0.9375rem;white-space:nowrap}
    #tcab .tm-city{display:none}
    /* Las descargas cierran la vista, justo antes de «Un detalle para ti»
       (Mafe, 27 jul 2026), así que bajan al final de esta columna. */
    body[data-view="transit"] #tcola{display:flex;flex-direction:column}
    #tcola #charthint{order:1}
    #tcola #eventpanel{order:2}
    #tcola #png-dl{order:3;display:flex;justify-content:center;gap:8px;margin:16px 0 0}
    /* Mientras no hay tránsito escogido lo único que acompaña a las descargas es la
       frase de tocar la rueda, que va pegada a la izquierda, y los botones centrados
       quedaban descolgados de ella (Mafe, 28 jul 2026). Con el evento abierto la
       tarjeta ocupa el ancho entero y ahí sí se quedan centrados. El doble selector
       es porque el display:none puede venir con espacio o sin él. */
    body[data-view="transit"] #tcola:has(#eventpanel[style*="display:none"]) #png-dl,
    body[data-view="transit"] #tcola:has(#eventpanel[style*="display: none"]) #png-dl{justify-content:flex-start}
    #tcola .tpl-dl{height:34px;padding:0 14px;gap:5px;font-size:0.75rem}
    #tcola .tpl-dl svg{width:14px;height:14px}
    #tcola .charthint{margin:6px 0 0}
  }
  @media(min-width:901px){
    /* CAMBIO 19 ago 2026. La rueda tiene ahora un tope de tamano y la columna de
       1fr le quedaba enorme, asi que flotaba en medio de dos huecos de blanco y
       la lectura se iba a un carril de 300 px pegado al borde derecho, muy lejos
       de ella y colgada a media altura. La rueda se queda donde siempre, a la
       izquierda, pero su columna mide ahora exactamente lo que mide ella, y la
       lectura se le pega al costado y se lleva todo el ancho que sobra. Las dos
       filas pasan a `auto 1fr` con la de abajo pegada arriba, para que la
       descripcion vaya justo debajo de la fecha. */
    body[data-view="transit"] #chartrow{display:grid;grid-template-columns:calc(var(--rueda) + 40px) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:26px;align-items:start;margin:16px 0 4px}
    body[data-view="transit"] #chart{grid-column:1;grid-row:1/4;min-width:0}
    body[data-view="transit"] #tcab{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-self:start}
    /* La ventana de lectura del planeta NO tenia sitio asignado en esta fila, asi
       que la rejilla la mandaba a inventarse una fila nueva por debajo de la rueda
       y aparecia abajo del todo, a 1.000 px de donde acababas de tocar (Mafe,
       19 ago 2026: «mira a donde se va la ventana, eso no puede pasar»). Va en la
       columna de al lado, justo debajo de la fecha, que es donde estas mirando.
       Mientras no toques nada esta en display:none y su fila no ocupa nada. */
    body[data-view="transit"] #chartrow #detail{grid-column:2;grid-row:2;align-self:start;margin:0;min-width:0}
    body[data-view="transit"] #tcola{grid-column:2;grid-row:3;min-width:0;display:flex;flex-direction:column;align-self:start}
    /* El orden del boceto sin depender de quien llegue primero a la mudanza:
       la frase, las tarjetas del evento y las descargas al pie. */
    #tcola #charthint{order:1}
    #tcola #eventpanel{order:2}
    #tcola #png-dl{order:3}
    /* La jerarquia manda (Mafe, 27 jul 2026, «la fecha y el png estan demasiado
       grandes»): el protagonista de la columna es el TITULO del evento con su fecha
       debajo en la ficha. El «Estas viendo» pasa a discreto y las descargas al
       tamano chico de siempre. El !important del titulo es para ganarle a la regla
       global que fija todos los titulos de recuadro en 1.25rem. */
    #tcab .tm-fecha{font-size:0.9375rem;margin-top:1px}
    /* En escritorio las descargas se recuestan bajo la tarjeta de descripcion.
       Iban pegadas a la derecha cuando la columna era la estrecha del costado;
       ahora que la lectura manda a la izquierda, arrancan por la izquierda como
       todo lo demas de la columna (19 ago 2026). En celular siguen en la banda. */
    #tcola #png-dl{display:flex;justify-content:flex-start;gap:8px;margin:0}
    #tcola #png-dl .tpl-dl{height:34px;padding:0 12px;font-size:0.75rem;gap:6px}
    #tcola #png-dl .tpl-dl svg{width:14px;height:14px}
    body[data-view="transit"] #tcola .evtitle{font-size:1.5rem!important;line-height:1.12!important}
    #tcola .charthint{text-align:left;margin:16px 0 0}
    #tcola .evpanel{margin-top:14px}
  }
  /* Calculador del día (a la derecha de la carta) */
  .daycalc{background:#fff;border:1px solid var(--line);border-radius:5px;padding:15px 15px 13px;text-align:left}
  .daycalc .dc-h{font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:-.05em;color:var(--gold-deep);margin-bottom:9px}
  .daycalc .dc-nav{display:flex;align-items:center;gap:5px;margin-bottom:5px}
  .daycalc .dc-date{flex:1;min-width:0;height:32px;font-family:var(--f-head);font-size:0.8125rem;color:var(--text);border:1px solid var(--line);border-radius:5px;padding:0 8px;background:#fff;letter-spacing:-.05em}
  .daycalc .dc-arrow{flex:0 0 auto;width:28px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:5px;color:var(--gold-deep);font-size:1.125rem;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
  .daycalc .dc-arrow:hover{background:var(--soft);border-color:var(--gold)}
  .daycalc .dc-today{flex:0 0 auto;height:32px;padding:0 12px;background:var(--soft);border:1px solid var(--line);border-radius:5px;color:var(--gold-deep);font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:-.05em;cursor:pointer;transition:background .15s,color .15s;width:auto}
  .daycalc .dc-today:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
  .daycalc .dc-sub{font-size:0.6875rem;color:var(--muted);margin:0 0 11px;font-style:italic;line-height:1.4;letter-spacing:-.05em}
  .daycalc .dc-list{display:flex;flex-direction:column}
  .daycalc .dc-row{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:6px 6px;margin:0 -4px;border-bottom:1px solid var(--line);font-size:0.8125rem;cursor:pointer;border-radius:5px;transition:opacity .15s,background .15s}
  .daycalc .dc-row:last-child{border-bottom:none}
  .daycalc .dc-row.dc-dim{opacity:.3}
  .daycalc .dc-row.dc-sel{background:rgba(194,161,90,0.16);border-bottom-color:transparent}
  .daycalc .dc-nm{color:var(--text)}
  /* Las posiciones van en rejilla, no en una cadena de texto: grado pegado a la derecha
     de su casilla, glifo centrado en la suya y el signo entero alineado a la izquierda,
     así las doce filas se leen en columna. El grado va más pequeño que el nombre del
     planeta a propósito, que el dato manda pero no grita (Mafe, 22 jul 2026). */
  /* La casilla del signo mide para «Capricornio», que es el nombre más largo, con aire
     de sobra para que no se recorte nunca */
  .daycalc .dc-pos{display:grid;grid-template-columns:52px 20px 84px 20px;align-items:center;
    color:var(--muted);font-size:0.6875rem;white-space:nowrap}
  /* El grado va más pequeño que el nombre del planeta, que es quien manda en la fila.
     La doble negación de id copia el truco del archivo para ganarle a la regla
     .dc-pos{font-size:0.875rem!important} del barrido de tamaños. */
  .daycalc .dc-deg:not(#sin-uso):not(#sin-uso){text-align:right;font-variant-numeric:tabular-nums;
    font-size:0.71875rem!important;font-weight:400!important;letter-spacing:0!important}
  .daycalc .dc-sg{font-size:0.875rem;display:flex;justify-content:center;align-items:center;margin:0}
  .daycalc .dc-sn{text-align:left;padding-left:7px;color:var(--text);font-size:0.75rem;
    overflow:hidden;text-overflow:ellipsis}
  .daycalc .dc-rxw{text-align:right}
  .daycalc .dc-rx{display:inline-block;font-size:0.625rem;font-weight:600;color:var(--ch-retro)}
  /* La fila de un retrógrado va ENTERA en rojo, no solo el nombre, para que salte a la
     vista de un golpe (Mafe, 22 jul 2026). El glifo del signo se tiñe desde el JS, que
     el color va quemado dentro del SVG. */
  .daycalc .dc-row.retro .dc-deg,
  .daycalc .dc-row.retro .dc-sn{color:var(--danger)}
  /* El nombre del planeta necesita !important porque otra regla del archivo pinta de
     antracita todos los .dc-nm y le ganaba */
  .daycalc .dc-row.retro .dc-nm{color:var(--danger)!important}
  @media(max-width:820px){.daycalc{max-width:420px;margin:0 auto}}
  /* ===== Planetas hoy - look app "burbujas conectadas" (solo vista hoy) ===== */
  /* En hoy el gráfico va en columna única y centrado: rueda fija arriba, debajo
     el control de fecha (centrado) y la leyenda "Posiciones del día". Así el
     círculo no baila cuando cambia el largo del texto de las otras secciones. */
  body[data-view="hoy"] #chartrow.split{display:flex!important;flex-direction:column;gap:14px;max-width:560px;margin:16px auto 4px}
  body[data-view="hoy"] #chartrow.split #chart{width:100%}
  body[data-view="hoy"] #chartrow.split #dc-col{width:100%;align-items:center}
  body[data-view="hoy"] #chartrow.split #chart{border:none!important;border-radius:5px!important;box-shadow:var(--card-sh);padding:20px 18px 22px}
  body[data-view="hoy"] .daycalc{border:none!important;border-radius:5px!important;box-shadow:var(--card-sh);padding:18px 16px 14px}
  body[data-view="hoy"] .dc-change{border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
  /* En ESCRITORIO ancho, "Posiciones del día" se pone a la derecha de la rueda
     (decisión de Mafe, 19 jul 2026). Debajo de 1180px se queda en columna, que es
     como estaba: la rueda mide 560 y la tabla pide unos 250, así que por debajo de
     ese ancho no caben una al lado de la otra sin apretar. La rueda NO cambia de
     tamaño, se queda en sus 560 y la tabla se lleva el espacio que sobra. */
  @media(min-width:1180px){
    body[data-view="hoy"] #chartrow.split{flex-direction:row;align-items:flex-start;max-width:none;gap:26px;margin:16px 0 4px}
    body[data-view="hoy"] #chartrow.split #chart{flex:0 0 560px;width:560px}
    body[data-view="hoy"] #chartrow.split #dc-col{flex:1 1 auto;width:auto;align-items:stretch}
  }
  body[data-view="hoy"] .hoypanel{background:var(--paper)!important;border:none!important;border-radius:5px!important;padding:20px 18px 22px;box-shadow:var(--card-sh)}
  body[data-view="hoy"] .hoy-topline{border-bottom:none;margin-bottom:4px;padding-bottom:0}
  body[data-view="hoy"] .hoy-tile{border:none;border-radius:5px;box-shadow:var(--card-sh)}
  body[data-view="hoy"] .hoy-aspwrap{margin-top:14px}
  body[data-view="hoy"] .hoy-aspsum{border:none;border-radius:5px;box-shadow:var(--card-sh)}
  body[data-view="hoy"] .hoy-asp{background:#fff;border:none;border-radius:5px;box-shadow:var(--card-sh)}
  body[data-view="hoy"] .hoy-msg,
  body[data-view="hoy"] .hoy-ics{background:#fff;border-top:none!important;border-radius:5px;padding:18px 18px;box-shadow:var(--card-sh);margin-top:14px}
  body[data-view="hoy"] .hoy-cta-wrap{margin-top:16px}
  body[data-view="hoy"] .hoy-icsbox{background:#fff;border:1px solid var(--line);border-radius:5px;padding:18px;box-shadow:var(--card-sh);margin-top:16px}
  .dc-change{background:transparent;border:none;border-radius:0;padding:12px 2px 2px;text-align:left;max-width:288px;box-sizing:border-box}
  /* Tracking POSITIVO en el rótulo: Staatliches viene condensada y con el -.05em de antes
     las letras se tocaban (Mafe, 22 jul 2026). Con esta fuente se abre el espaciado. */
  .dc-change .dcc-h:not(#sin-uso):not(#sin-uso){font-family:var(--f-title);font-size:0.75rem;font-weight:600;
    text-transform:uppercase;letter-spacing:1px!important;color:var(--gold-deep);margin:0 0 10px;
    display:flex;align-items:center;justify-content:space-between;gap:10px}
  .dcc-x{flex:0 0 auto;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%!important;color:var(--muted);cursor:pointer}
  .dcc-x .ui-ic{width:15px;height:15px}
  .dcc-x:hover{background:var(--soft);color:var(--text)}
  .esscard{position:relative}
  .ess-x{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%!important;color:var(--muted);cursor:pointer}
  .ess-x .ui-ic{width:15px;height:15px}
  .ess-x:hover{background:var(--soft);color:var(--text)}
  /* El cuerpo heredaba el tracking negativo global de Arimo y salía igual de apretado */
  .dc-change .dcc-body:not(#sin-uso):not(#sin-uso){display:flex;align-items:flex-start;gap:8px;
    font-size:0.8125rem;line-height:1.55;color:var(--text);margin:0;letter-spacing:0!important}
  .dc-change .dcc-ic{flex:0 0 auto;display:inline-flex;width:18px;height:18px;margin-top:1px}
  .dc-change .dcc-ic svg{width:18px;height:18px;display:block}
  .dc-change .dcc-tx{flex:1 1 auto;min-width:0}
  .dc-change .dcc-tx b{color:var(--gold-deep);font-weight:700}
  @media(max-width:820px){.dc-change{max-width:420px;margin:12px auto 0}}
  .hoy-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .hoy-eyebrow{font-family:var(--f-title);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:-.05em;color:var(--gold-deep)}
  .hoy-datebadge{display:inline-block;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;color:#fff;background:var(--label);padding:6px 14px;border-radius:999px;white-space:nowrap;letter-spacing:-.05em}
  .hoy-head{font-family:var(--f-title);font-size:1.4375rem;font-weight:600;color:var(--gold-deep);letter-spacing:-.05em;margin:0}
  .hoy-lumis{display:flex;flex-direction:column;gap:9px;margin:6px 0}
  .hoy-lumi{display:block;font-size:0.875rem;color:var(--text);line-height:1.5}
  .hoy-lumi svg{width:20px;height:20px;vertical-align:-4px;margin-right:5px}
  .hoy-intro{font-size:0.875rem;color:var(--text);line-height:1.55;margin:10px 0}
  .hoy-retro{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:2px 0 6px}
  .hoy-retro-none .hoy-retro-list{color:var(--muted);font-weight:600}
  .hoy-retro-lab{font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:-.05em;color:var(--gold-deep)}
  .hoy-retro-list{font-size:0.875rem;font-weight:700;color:var(--danger)}
  .hoy-tiles-h{font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#70706a;margin:0 0 10px}
  .hoy-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
  .hoy-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:5px;padding:16px 12px 14px;text-align:center;overflow:hidden}
  .hoy-tile.retro{--tc:var(--danger)}.hoy-tile.retro.none{--tc:var(--line)}
  .hoy-tile-ic{display:flex;align-items:center;justify-content:center;height:24px;margin:2px 0 7px}
  .hoy-tile-lab{font-family:var(--f-title);font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin-bottom:3px}
  .hoy-tile-val{font-family:var(--f-title);font-size:1rem;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.2}
  .hoy-tile-sub{display:block;font-family:var(--f-head);font-size:0.6875rem;font-weight:400;color:var(--muted);margin-top:3px;text-transform:none;letter-spacing:0}
  .hoy-tile.retro .hoy-tile-val{font-size:0.8125rem;color:var(--danger)}
  .hoy-tile.retro.none .hoy-tile-val{color:var(--muted);font-weight:600}
  @media(max-width:420px){.hoy-tiles{gap:7px}.hoy-tile{padding:13px 7px 11px}.hoy-tile-val{font-size:0.875rem}.hoy-tile.retro .hoy-tile-val{font-size:0.75rem}}
  .hoy-subt{font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:-.05em;color:var(--gold-deep);margin:18px 0 10px}
  .hoy-asps{display:flex;flex-direction:column;gap:9px}
  .hoy-asp{display:flex;gap:11px;align-items:flex-start;font-size:0.8125rem;line-height:1.45;color:var(--text);background:rgba(255,255,255,0.55);border:1px solid var(--line);border-radius:5px;padding:11px 13px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
  .hoy-asp:hover{transform:translateY(-2px);background:#fff}
  .hoy-aspg{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;padding-top:1px}
  .hoy-orb{display:inline-block;font-size:0.625rem;font-weight:600;color:var(--gold-deep);background:var(--soft);border-radius:999px;padding:1px 8px;margin-left:2px;vertical-align:1px}
  .hoy-foot{font-size:0.75rem;color:var(--muted);margin-top:0;font-style:italic}.hoy-charthead{text-align:center;margin:0 auto 14px}.hoy-chartdate{font-family:var(--f-title);font-size:1.125rem;font-weight:600;letter-spacing:-.02em;color:var(--gold-deep);margin:0}.hoy-chartsite{display:inline-block;margin-top:3px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.01em;color:var(--muted);text-decoration:none}.hoy-chartsite:hover{color:var(--gold-deep)}.hoy-aspwrap{margin-top:14px}.hoy-aspsum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:12px 15px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);transition:background .15s,border-color .15s}.hoy-aspsum:hover{background:#fff;border-color:var(--gold)}.hoy-aspsum::-webkit-details-marker{display:none}.hoy-aspsum::after{content:'';width:15px;height:15px;background-color:var(--gold-deep);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;flex:0 0 auto;transition:transform .2s}.hoy-aspwrap:not([open]) .hoy-aspsum::after{transform:rotate(-90deg)}.hoy-aspwrap .hoy-asps{margin-top:12px}.hoy-msg{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.hoy-msg-lead{font-size:0.875rem;line-height:1.6;color:var(--text);margin:0 0 14px}.hoy-tips-h{font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:-.02em;color:var(--gold-deep);margin:2px 0 10px}.hoy-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}.hoy-tips li{position:relative;padding-left:22px;font-size:0.875rem;line-height:1.5;color:var(--text)}.hoy-tips li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:999px;background:var(--gold)}.hoy-msg-close{font-family:var(--f-title);font-size:0.875rem;font-weight:600;color:var(--gold-deep);margin:16px 0 0}.hoy-ics{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.hoy-ics .hoy-ics-q{font-size:0.875rem;color:var(--text);margin:0 0 10px;font-weight:600;line-height:1.4}.hoy-ics .hoy-ics-status{font-size:0.75rem;color:var(--muted);margin-top:8px;line-height:1.4}.hoy-cta-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px}.hoy-cta{font-family:var(--f-title);font-size:0.8125rem;font-weight:600;color:#fff;background:var(--ch-signband);border:none;border-radius:5px;padding:10px 18px;cursor:pointer;letter-spacing:-.02em}.hoy-cta:hover{opacity:.9}
  .hoy-daymsg{margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:16px 18px 18px;text-align:left;box-shadow:var(--card-sh)}
  .hoy-msg-lead.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hoy-daymsg.reveal .hoy-msg-lead.clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
  .hoy-readmore{background:none;border:none;padding:2px 0 0;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:-.02em;color:var(--gold-deep);cursor:pointer}
  .hoy-readmore:hover{color:var(--gold)}
  .hoy-asp-see{display:inline-flex;align-items:center;gap:4px;margin-top:10px;background:none;border:none;padding:0;font-family:var(--f-title);font-size:0.78125rem;font-weight:600;letter-spacing:-.01em;color:var(--gold-deep);cursor:pointer}
  .hoy-asp-see:hover{color:var(--gold)}
  .hoy-asp-see .ui-ic{width:13px;height:13px}
  /* Línea de tiempo del aspecto con el planeta que camina (Idea 5) */
  .hoy-tl{position:relative;padding:22px 4px 0;margin:12px 0 2px}
  .hoy-tl-line{position:relative;height:1px;background:var(--line)}
  .hoy-tl-trail{position:absolute;left:0;top:50%;height:3px;transform:translateY(-50%);width:0;background-image:radial-gradient(circle,#b0aa9e 1.1px,transparent 1.5px);background-size:8px 3px;background-repeat:repeat-x;background-position:left center;animation:hoyWalk 2.6s ease-out forwards}
  .hoy-tl-trail.fast{animation-duration:1.7s}
  .hoy-tl-tick{position:absolute;top:50%;width:1px;height:8px;background:var(--muted);transform:translate(-50%,-50%)}
  .hoy-tl-exact{position:absolute;top:50%;width:8px;height:8px;border-radius:999px;transform:translate(-50%,-50%);z-index:2}
  .hoy-tl-elab{position:absolute;top:-18px;transform:translateX(-50%);font-family:var(--f-title);font-size:0.65625rem;font-weight:600;white-space:nowrap}
  .hoy-tl-now{position:absolute;top:50%;width:7px;height:7px;border-radius:999px;background:var(--accent);transform:translate(-50%,-50%);z-index:3}
  .hoy-tl-nowlab{position:absolute;top:11px;transform:translateX(-50%);font-family:var(--f-title);font-size:0.65625rem;font-weight:600;color:var(--accent);white-space:nowrap}
  .hoy-tl-planet{position:absolute;top:50%;left:0;line-height:1;transform:translate(-50%,-50%);z-index:5;pointer-events:none;filter:drop-shadow(0 0 2px var(--paper)) drop-shadow(0 0 4px var(--paper));animation:hoyMove 2.6s ease-out forwards}
  .hoy-tl-planet.fast{animation-duration:1.7s}
  @keyframes hoyMove{0%{left:0%;opacity:0}12%{opacity:1}100%{left:var(--stop);opacity:1}}
  @keyframes hoyWalk{0%{width:0}100%{width:var(--stop)}}
  .hoy-tl-ends{display:flex;justify-content:space-between;margin:27px 2px 0;font-size:0.6875rem;color:var(--muted)}
  /* ===== Retrógrados: nombres en rojo + desplegable con fechas y línea de tiempo ===== */
  #hoy-toptiles .hoy-tile.retro .hoy-tile-val{color:var(--danger)!important}
  #hoy-toptiles .hoy-tile.retro.none .hoy-tile-val{color:var(--muted)!important}
  .hoy-tile-rx{cursor:pointer}
  .hoy-tile-rx .hoy-rx-caret{position:absolute;top:12px;right:12px;width:14px;height:14px;background-color:var(--danger);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .22s ease;opacity:.85}
  .hoy-tile-rx[aria-expanded="true"] .hoy-rx-caret{transform:rotate(180deg)}
  .hoy-rx-detail{margin-top:16px;padding-top:2px}
  .hoy-rx-detail[hidden]{display:none}
  /* Cada retrógrado en SU PROPIA tarjeta (Mafe, 24 ago 2026): con la raya divisoria
     sola no se entendía dónde terminaba un planeta y empezaba el otro. */
  .hoy-rx-item{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:14px 16px 8px;margin:0 0 10px}
  .hoy-rx-item:last-of-type{margin-bottom:0}
  .hoy-rx-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
  .hoy-rx-nm{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-title);font-size:0.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--danger)}
  .hoy-rx-range{font-family:var(--f-head);font-size:0.75rem;color:var(--text)}
  .hoy-rx-range b{font-weight:700}
  /* ===== Buscar tránsitos desde Planetas hoy (desplegable bajo el gráfico) ===== */
  /* Caja beige (Mafe, 19 jul 2026): el buscador se lee como una sección aparte,
     no como un botón suelto en medio de la página. El marfil de la paleta lo separa
     del blanco del resto sin meter una línea más. */
  .hoy-ts{max-width:560px;margin:10px auto 36px;text-align:center;background:var(--paper);border-radius:5px;padding:26px 22px}
  /* En escritorio el buscador sale de la columna de 560px de la vista hoy (lo mueve
     colocaTsearch) y aprovecha el ancho entero. Los desplegables dejan de apretarse
     y crecen a un tamaño cómodo en vez de quedarse en el mínimo. */
  .hoy-ts.ts-ancho{max-width:none;margin-left:0;margin-right:0}
  .hoy-ts.ts-ancho .hoy-ts-panel{padding:22px 26px}
  /* OJO: hay una regla global `input,select,button{width:100%}`. En la columna
     angosta no molestaba, pero a lo ancho estiraba cada control a la fila entera.
     Por eso aquí se les devuelve el ancho automático y los reparte el flex. */
  .hoy-ts.ts-ancho .hoy-ts-row{gap:12px;flex-wrap:wrap;align-items:stretch}
  /* min-width:0 es lo que deja que los desplegables se encojan. Sin eso, un flex item
     nunca baja de lo que mide su texto ("Aspecto entre planetas" es largo) y la fila
     se partía en dos aunque hubiera sitio de sobra. */
  .hoy-ts.ts-ancho .hoy-ts-row select{width:auto;flex:1 1 190px;min-width:0}
  /* width:auto anula el 100% de celular, que si no partía la fila en dos en escritorio. */
  .hoy-ts.ts-ancho .hoy-ts-row #hoy-ts-aspwrap{flex:2 1 390px;display:flex;gap:12px;width:auto}
  .hoy-ts.ts-ancho .hoy-ts-row #hoy-ts-aspwrap[hidden]{display:none}
  .hoy-ts.ts-ancho .hoy-ts-btns button{width:auto;min-width:150px}
  /* 20px = el rol de titular de sección, el mismo de "Energía de hoy" (Mafe, 19 jul).
     Staatliches ya es una fuente de solo mayúsculas, no hace falta text-transform.
     El botón va sin caja propia porque la caja ahora la pone .hoy-ts entera. */
  .hoy-ts-toggle{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;border-radius:5px;padding:0;font-family:var(--f-title);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--label);cursor:pointer;transition:background .15s}
  .hoy-ts-toggle:hover{background:transparent;opacity:.75}
  .hoy-ts-caret{width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .2s}
  .hoy-ts-toggle[aria-expanded="true"] .hoy-ts-caret{transform:rotate(180deg)}
  .hoy-ts-panel{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:18px 16px;box-shadow:var(--card-sh)}
  .hoy-ts-panel[hidden]{display:none}
  .hoy-ts-lead{font-family:var(--f-head);font-size:0.8125rem;color:var(--muted);margin:0 0 14px;line-height:1.5}
  .hoy-ts-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  /* A lo ancho de la fila, si no en celular los dos desplegables del aspecto salían
     indentados respecto a los dos de arriba, porque el contenedor se encogía al
     tamaño de su contenido y quedaba centrado (jul 19 2026). */
  .hoy-ts-row #hoy-ts-aspwrap{display:flex;width:100%;gap:8px;flex-wrap:wrap;justify-content:center}
  .hoy-ts-row #hoy-ts-aspwrap[hidden]{display:none}
  .hoy-ts-panel select{height:38px;border:1px solid var(--line);border-radius:5px;padding:0 10px;font-family:var(--f-head);font-size:0.8125rem;background:#fff;color:var(--text);cursor:pointer}
  .hoy-ts-panel select[hidden]{display:none}
  /* IR vive en la misma fila que los desplegables, a su derecha, y dispara la
     búsqueda hacia adelante (Mafe, 24 ago 2026). Misma ropa que Anterior/Siguiente
     y la misma altura que los select para que la fila quede pareja. */
  #hoy-ts-ir{height:38px;padding:0 20px;background:#021212;border:none;border-radius:5px;color:#ffffff;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:opacity .15s}
  #hoy-ts-ir:hover{opacity:.9}
  /* Anterior a un extremo y Siguiente al otro (Mafe, 19 jul 2026). Centrados y
     pegados no se leían como dos direcciones opuestas. */
  .hoy-ts-btns{display:flex;gap:8px;justify-content:space-between;margin-top:14px}
  .hoy-ts-btns button{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 18px;background:#021212;border:none;border-radius:5px;color:#ffffff;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:opacity .15s}
  .hoy-ts-btns button:hover{opacity:.9}
  /* "Ver carta" dentro del resultado del buscador: baja a la rueda del instante
     encontrado (Mafe, 20 jul 2026). Misma ropa que Anterior y Siguiente, en chico. */
  /* Centrado bajo la fecha, corto, y con los 14px de aire que ya usa todo este
     panel (.hoy-ts-btns y .hoy-ts-result llevan el mismo margen). */
  .hoy-ts-vercarta{display:flex;align-items:center;justify-content:center;width:max-content;height:26px;padding:0 12px;margin:14px auto 0;background:#021212;border:none;border-radius:5px;color:#ffffff;font-family:var(--f-title);font-size:0.6875rem;cursor:pointer}
  .hoy-ts-vercarta:hover{opacity:.9}
  .hoy-ts-result{margin-top:14px;font-family:var(--f-head);font-size:0.84375rem;color:var(--text);line-height:1.5;letter-spacing:0}
  .hoy-ts-result:empty{display:none}
  .hoy-ts-result b{font-family:var(--f-title);font-weight:600;color:var(--label);letter-spacing:0}
  /* El nombre del aspecto va en gris, para que los dos planetas sean lo que se lee primero. */
  .hoy-ts-result .ts-asp{color:var(--muted)}
  /* Eclipses destacados: chip en el resultado del buscador y badge en la tarjeta del día */
  .hoy-ecl-emo{font-size:0.8125rem;letter-spacing:0;line-height:1}
  .hoy-ts-ecl{display:inline-flex;align-items:center;gap:6px;margin-left:8px;background:transparent;border:1px solid #d8c3c8;color:#3B161F;font-family:var(--f-title);font-size:0.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:5px!important;vertical-align:middle}
  .hoy-sky-eclipse{display:inline-flex;align-items:center;gap:7px;margin:11px 0 2px;background:transparent;border:1px solid rgba(244,240,230,.55);color:#ffffff;font-family:var(--f-title);font-size:0.65625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;padding:5px 12px;border-radius:5px!important}
  .hoy-sky-iseclipse{box-shadow:0 0 0 1px rgba(244,240,230,.3),var(--card-sh)}
  /* Grupos de aspectos por escala de tiempo (lunares, del día y semana, largo plazo) */
  .hoy-aspgrp{margin-top:22px}
  .hoy-aspgrp:first-child{margin-top:0}
  .hoy-aspgrp-t{font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#70706a;margin:0 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
  /* Cada aspecto es una línea limpia; el detalle (texto, línea de tiempo y botón) se
     despliega solo al tocarlo, que además enciende su energía en la rueda. */
  body[data-view="hoy"] .hoy-asp{display:block!important;padding:0!important;gap:0!important}
  body[data-view="hoy"] .hoy-asp-head{display:flex;align-items:center;gap:11px;padding:14px 2px}
  body[data-view="hoy"] .hoy-asp-nm{flex:1;min-width:0;font-family:'Arimo',sans-serif;font-size:0.9375rem;font-weight:400;letter-spacing:-.3px;color:#021212;line-height:1.3}
  body[data-view="hoy"] .hoy-asp.on .hoy-asp-nm{font-weight:600}
  body[data-view="hoy"] .hoy-asp-orb{flex:0 0 auto;font-family:'Arimo',sans-serif;font-size:0.78125rem;color:#88857e}
  body[data-view="hoy"] .hoy-asp-body{display:none;padding:0 2px 16px}
  body[data-view="hoy"] .hoy-asp.on .hoy-asp-body{display:block}
  body[data-view="hoy"] .hoy-asp .hoy-asp-see{margin-top:12px}
  .hoy-asp-vig{font-family:var(--f-head);font-size:0.78125rem;color:var(--muted);margin:8px 0 0}
  .hoy-asp-vig:empty{display:none}
  /* Los aspectos del día son tocables: el activo corre su energía en la rueda */
  .hoy-asp{cursor:pointer}
  /* La barra vino de la izquierda se quitó el 19 jul 2026 (Mafe). Además de sobrar,
     el radio de la tarjeta se la comía por abajo y la dejaba con la punta curva.
     El aspecto abierto ya se distingue por la negrita del nombre y por su cuerpo. */
  body[data-view="hoy"] .hoy-asp.on{box-shadow:none!important}
  /* "Ver en mi carta" apagado por ahora (Mafe, 19 jul 2026). El motor sigue vivo:
     verEnCarta y focusTransitAspect no se tocan, esto solo lo saca de la vista. */
  .hoy-asp-see{display:none!important}
  .hoy-asps-vermas{display:inline-flex;align-items:center;gap:5px;margin-top:14px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:9px 15px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;color:var(--gold-deep);cursor:pointer}
  .hoy-asps-vermas:hover{background:#fff;border-color:var(--gold)}
  .hoy-asps-vermas .ui-ic{width:13px;height:13px}
  .hoy-daymsg-tag{display:inline-block;font-family:var(--f-title);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:-.03em;color:#fff;background:var(--label);padding:5px 12px;border-radius:999px;margin-bottom:12px}
  .hoy-daymsg .hoy-msg-lead{font-size:0.875rem;line-height:1.62;color:var(--text);margin:0 0 14px}
  .hoy-daymsg .hoy-tips-h{font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:-.02em;color:var(--gold-deep);margin:2px 0 10px}
  .hoy-daymsg .hoy-tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .hoy-daymsg .hoy-tips li{position:relative;padding-left:22px;font-size:0.875rem;line-height:1.5;color:var(--text)}
  .hoy-daymsg .hoy-tips li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:999px;background:var(--gold)}
  #hoy-hero{display:none}
  body[data-view="hoy"] #hoy-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:2px 0 18px;padding:2px}
  .hoy-hero-hi{font-family:var(--f-title);font-size:1.625rem;font-weight:600;letter-spacing:-.03em;color:var(--label);margin:0 0 14px;line-height:1.15;text-transform:none}
  body[data-view="hoy"] #hoy-hero{display:block!important;margin:0 0 16px;padding:0}
  .hoy-sky{background:#021212;border-radius:5px;padding:18px 18px 20px;text-align:center;color:#ffffff;box-shadow:var(--card-sh)}
  .hoy-sky-moon{margin:2px auto 10px;width:58px;height:58px}
  .hoy-sky-date{font-size:0.6875rem;letter-spacing:.02em;text-transform:none;color:#a6a6a6;margin:0}
  .hoy-sky-title{font-family:var(--f-title);font-size:1.4375rem;font-weight:600;letter-spacing:-.02em;color:#ffffff;margin:4px 0 0;line-height:1.15}
  /* Sin la línea translúcida que cruzaba la tarjeta oscura (familia de las
     sombritas que caza Mafe, 20 jul 2026). El aire del padding se queda. */
  .hoy-sky-do{max-width:540px;margin:16px auto 0;padding-top:15px}
  .hoy-sky-do-k{display:block;font-family:var(--f-title);font-size:0.65625rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#b9b9b9;margin-bottom:7px}
  /* Rótulo "Aspecto del día", entre la fecha y el titular de la tarjeta oscura
     (jul 19 2026). Reusa el rótulo de "Mensaje del día" para que los dos pesen
     igual, solo cambia el aire de arriba y de abajo. */
  .hoy-sky-ev-k{margin-top:12px;margin-bottom:4px}
  .hoy-sky-do-t{font-size:0.875rem;line-height:1.55;color:#ffffff}
  /* En vino MACIZO, no de contorno (Mafe, 29 jul 2026: «déjalo en rojo», porque en
     transparente se perdía sobre el antracita de la tarjeta). Es el acento de marca,
     así que resalta de verdad sin traer un color de fuera. Ojo, el rojo #c0392b NO
     se usa aquí: dentro de la app ese rojo ya significa retrógrado y encenderlo en un
     botón de acción diría otra cosa. */
  .hoy-sky-cta{margin:14px 0 4px;display:flex;width:100%;align-items:center;justify-content:center;gap:7px;background:var(--accent);border:1px solid var(--accent);color:#ffffff;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;letter-spacing:-.02em;padding:12px 18px;border-radius:5px;cursor:pointer;transition:background .15s,border-color .15s}
  .hoy-sky-cta:hover{background:#4E1D29;border-color:#4E1D29}
  .hoy-sky-cta .ui-ic{width:15px;height:15px}
  .hoy-daynav{margin-top:12px;display:flex;justify-content:center}
  #daycalc .hoy-daynav{margin:0 auto 13px;justify-content:center;width:100%;max-width:none}
  #daycalc .dc-nav{width:100%;box-sizing:border-box}
  #daycalc .dc-arrow{width:30px}
  #daycalc .dc-date{flex:1 1 auto;min-width:0;width:auto;padding:0 6px}
  #daycalc .dc-today{padding:0 11px}
  .hoy-hero-sub{font-family:var(--f-head);font-size:0.8125rem;color:var(--muted);margin:5px 0 0}
  .hoy-hero-r{display:flex;align-items:center}
  .hoy-hero-r .dc-nav{display:inline-flex;align-items:center;gap:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  /* La fecha va en Arimo, no en Staatliches (Mafe, 19 jul 2026): la display es
     condensada y sus cifras se confunden entre sí, sobre todo el 1 con el 7 en un
     "19/07". Arimo las separa bien. El tracking sube a 0 por el mismo motivo. */
  .hoy-hero-r .dc-date{width:auto;min-width:118px;text-align:center;height:34px;font-family:var(--f-head);font-weight:600;font-size:0.8125rem;color:#fff;border:0;border-right:1px solid var(--line);border-radius:0;padding:0 14px;background:#021212;letter-spacing:0;cursor:pointer}
  .hoy-hero-r .dc-arrow{flex:0 0 auto;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;background:#fff;border:0;border-right:1px solid var(--line);border-radius:0;color:var(--label);cursor:pointer;transition:background .15s}
  .hoy-hero-r .dc-arrow:hover{background:#f5efe1}
  .hoy-hero-r .dc-today{flex:0 0 auto;height:34px;padding:0 15px;background:#fff;border:0;border-radius:0;color:#5c5c56;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:-.02em;cursor:pointer;transition:background .15s;width:auto}
  .hoy-hero-r .dc-today:hover{background:#f5efe1}
  #hoy-toptiles{display:none}
  body[data-view="hoy"] #hoy-toptiles{display:block;margin:0 0 18px}
  body[data-view="hoy"] #hoy-toptiles .hoy-tiles{margin:0;gap:14px}
  @media(max-width:560px){.hoy-hero-hi{font-size:1.4375rem}body[data-view="hoy"] #hoy-hero{gap:12px}}
  /* ===== Carta progresada - dashboard, a juego con la vista Planetas hoy (body[data-view="prog"]) ===== */
  .progpanel{max-width:none;margin:14px 0 0;background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 24px;text-align:left}
  body[data-view="prog"] .progpanel{background:var(--paper)!important;border:none!important;border-radius:5px!important;padding:22px 20px 26px;box-shadow:var(--card-sh)}
  .prog-eyebrow{font-family:var(--f-title);font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin:0 0 4px}
  .prog-head{font-family:var(--f-title);font-size:1.4375rem;font-weight:600;color:var(--gold-deep);letter-spacing:-.05em;margin:0 0 6px}
  .prog-sub{font-size:0.875rem;color:var(--muted);margin:0 0 4px;line-height:1.55;max-width:640px}
  /* Sin rayitas ni hueco: la regla global de #belowzone h2 le colaba al título
     un borde inferior y 54px de margen arriba (Mafe los mandó quitar, 20 jul 2026). */
  .prog-panelhead{padding-bottom:4px;margin-bottom:14px;border-bottom:none}
  #belowzone .progpanel .prog-head,.progpanel .prog-head{border-bottom:none!important;padding-bottom:0!important;margin:0 0 6px!important}
  .prog-lead{font-size:0.875rem;color:var(--text);line-height:1.64;margin:0 0 13px;max-width:680px}
  .prog-key{background:#eceae7;border:none;border-radius:5px;padding:15px 18px;margin:18px 0 6px;max-width:680px;box-shadow:var(--card-sh)}
  .prog-key-t{font-family:var(--f-title);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin:0 0 6px}
  .prog-key p{font-size:0.875rem;color:var(--text);line-height:1.62;margin:0}
  .prog-sech{font-family:var(--f-title);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:-.05em;color:var(--gold-deep);margin:26px 0 12px}
  .prog-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:12px}
  .prog-card{background:#fff;border:none;border-radius:5px;padding:16px 18px;box-shadow:var(--card-sh);transition:transform .18s ease,box-shadow .18s ease}
  .prog-card:hover{transform:translateY(-2px);box-shadow:var(--card-sh-lift)}
  .prog-card-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
  .prog-glyph{width:36px;height:36px;flex:0 0 auto;border-radius:999px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;color:var(--gold-deep)}
  .prog-card-name{font-family:var(--f-title);font-size:0.9375rem;font-weight:600;color:var(--text);letter-spacing:-.02em;line-height:1.15}
  .prog-card-role{display:block;font-family:var(--f-title);font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin-top:2px}
  .prog-card p{font-size:0.8125rem;color:var(--text);line-height:1.55;margin:0}
  .prog-foot{font-size:0.75rem;color:var(--muted);margin:22px 0 0;max-width:680px;line-height:1.55}
  /* Resumen calculado, encima de la rueda (a juego con los tiles de Planetas hoy) */
  body[data-view="prog"] .more-note{text-align:left;font-size:inherit;color:inherit;margin:0 0 16px}
  .prog-summary{background:var(--paper);border-radius:5px;padding:18px 18px 20px;box-shadow:var(--card-sh)}
  .prog-sumtop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .prog-sum-eyebrow{font-family:var(--f-title);font-size:1rem;font-weight:600;letter-spacing:-.04em;color:var(--gold-deep)}
  .prog-sum-badge{display:inline-block;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;color:#fff;background:var(--label);padding:6px 14px;border-radius:999px;white-space:nowrap;letter-spacing:-.03em}
  .prog-sumtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .prog-stile{background:#fff;border-radius:5px;padding:15px 12px 13px;text-align:center;box-shadow:var(--card-sh)}
  .prog-stile-ic{display:flex;align-items:center;justify-content:center;height:24px;margin:0 0 7px}
  .prog-stile-lab{font-family:var(--f-title);font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin-bottom:4px}
  .prog-stile-val{font-family:var(--f-title);font-size:0.9375rem;font-weight:600;letter-spacing:-.02em;color:var(--text);line-height:1.2}
  .prog-stile-sub{display:block;font-family:var(--f-head);font-size:0.6875rem;font-weight:400;color:var(--muted);margin-top:3px}
  .prog-sum-note{font-size:0.8125rem;color:var(--text);line-height:1.55;margin:14px 0 0}
  .prog-crit{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
  .prog-crit-lab{font-family:var(--f-title);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:-.03em;color:var(--gold-deep);margin:0 0 5px}
  .prog-crit p{font-size:0.8125rem;color:var(--text);line-height:1.55;margin:0 0 4px}
  @media(max-width:480px){.prog-sumtiles{gap:7px}.prog-stile{padding:12px 7px 10px}.prog-stile-val{font-size:0.8125rem}}
  @media(max-width:560px){.progpanel{padding:20px 16px 24px}body[data-view="prog"] .progpanel{padding:20px 16px 24px}.prog-head{font-size:1.3125rem}}
  /* Título y descripción bien pegaditos (Mafe, 18 jul): el rótulo pertenece a su texto */
  .advgrp{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:4px 0;flex:1 1 180px;min-width:170px}
  .advgrp-coords{flex:1 1 100%}
  .coords-adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
  /* En celular, tres columnas dejan los campos tan angostos que las coordenadas se cortan.
     Latitud y longitud comparten fila y el huso se queda con la de abajo. */
  @media(max-width:600px){
    .coords-adv-grid{grid-template-columns:1fr 1fr}
    .coords-adv-grid>div:last-child{grid-column:1/-1}
  }
  .coords-adv-grid label{font-size:0.6875rem;color:var(--muted);display:block;margin-bottom:3px}
  .advgrp-t{font-family:var(--f-title);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--gold-deep);margin-bottom:0}
  .advopts summary{list-style:none;cursor:pointer;padding:11px 16px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px}
  .advopts summary::-webkit-details-marker{display:none}
  .advopts summary::after{content:'';width:11px;height:11px;display:inline-block;background-color:var(--muted);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .18s}
  .advopts[open] summary::after{transform:rotate(180deg)}
  .advopts-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 22px;justify-content:center;padding:6px 18px 16px}
  .advopts-note{flex:1 1 100%;margin:0 0 2px;font-size:0.6875rem;color:var(--muted);font-style:italic;text-align:center;line-height:1.5}
  .coords{margin:2px 0 0;border:1px dashed var(--line);border-radius:5px;background:transparent;overflow:hidden}
  .coords summary{list-style:none;cursor:pointer;padding:10px 15px;font-size:0.75rem;font-weight:600;color:var(--gold-deep);display:flex;align-items:center;gap:8px}
  .coords summary::-webkit-details-marker{display:none}
  .coords summary::after{content:'';width:11px;height:11px;display:inline-block;margin-left:auto;background-color:var(--muted);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .18s}
  .coords[open] summary::after{transform:rotate(180deg)}
  .coords-auto{font-weight:400;color:var(--muted);font-style:italic;font-size:0.75rem}
  .coords-grid{margin:0;padding:2px 15px 14px}
  .formactions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:14px}
  .formactions #f-go{width:auto;flex:0 0 auto;min-width:210px;border-radius:5px}
  .advopts-inline{max-width:none;margin:0;flex:1 1 240px;min-width:220px}
  @media(max-width:560px){.formactions #f-go{flex:1 1 100%;width:100%}}
  .printbtn{display:inline-block;width:auto;height:auto;margin-left:16px;padding:6px 15px;font-size:0.75rem;background:#fff;color:var(--gold-deep);border:1px solid var(--line);border-radius:5px;font-weight:500;letter-spacing:0}
  .printbtn:hover{background:var(--soft);border-color:var(--gold-deep)}
  .printbtn-lg{margin-left:0;padding:11px 22px;font-size:0.875rem}
  .pagebtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}
  .reportbox{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:24px 26px;margin:14px 0 4px;line-height:1.7}
  .reportbox h3{font-family:var(--f-title);color:var(--gold-deep);margin:0 0 4px}
  .reportbox h4{font-family:var(--f-title);color:var(--gold-deep);letter-spacing:.02em;margin:20px 0 8px;font-size:0.875rem}
  .reportbox p{margin:0 0 12px;color:var(--text)}
  .reportbox .rp-sub{color:var(--muted);font-size:0.8125rem;margin:-2px 0 16px}
  .reportbox .rp-pos{color:var(--muted);font-size:0.8125rem;line-height:1.9}
  .reportbox .rp-lhi{font-family:var(--f-title);font-style:italic;font-size:1.125rem;color:var(--gold-deep);margin:8px 0 12px}
  .reportbox .rp-lead{font-style:italic;color:var(--muted);margin:0 0 16px}
  .reportbox .rp-sign{font-family:var(--f-title);font-style:italic;color:var(--gold-deep);margin-top:16px;line-height:1.5}
  .reportbox .rp-sign span{font-size:1.125rem}
  .reportbox .rp-letter{margin:0 0 22px}
  .reportbox .rp-sec{margin:0 0 6px}
  .reportbox .rp-asp{margin:0 0 12px}
  .reportbox .rp-asp-h{font-weight:600;margin:0 0 2px;color:var(--gold-deep)}
  .reportbox .rp-asp-t{margin:0;color:var(--muted);font-size:0.8125rem;white-space:pre-line}
  .reportbox .rp-sum{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
  .reportbox .rp-sum-i{flex:1 1 40%;min-width:150px;background:var(--soft,#f0ead8);border:1px solid var(--line);border-radius:5px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
  .reportbox .rp-sum-l{font-size:0.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .reportbox .rp-sum-v{font-family:var(--f-title);font-size:1.125rem;color:var(--gold-deep)}
  .optsel{width:auto;height:auto;display:inline-block;padding:3px 7px;font-size:0.75rem;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--gold-deep);letter-spacing:0;font-weight:500}
  .printhead{display:none}
  .printhead .ph-brand{font-family:var(--f-title);font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
  .printhead .ph-title{font-family:var(--f-title);font-size:1.4375rem;color:var(--text);font-weight:600;margin-top:3px}
  .printhead .ph-name{font-family:var(--f-title);font-size:0.875rem;color:var(--text);margin-top:10px;font-weight:500}
  .printhead .ph-line{font-size:0.8125rem;color:var(--muted);margin-top:3px}
  .printhead .ph-rot{font-family:var(--f-title);font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px}
  .printhead .ph-aviso{font-size:0.75rem;font-style:italic;color:var(--muted);margin-top:9px}
  .printfoot{display:none}
  @media print{
    @page{margin:1.6cm}
    #print-foot{display:block!important;position:fixed;bottom:0;left:0;right:0;text-align:center;font-family:var(--f-title);font-size:10px;letter-spacing:.08em;color:var(--muted);opacity:.85}
    #print-foot .pf-code{opacity:.5}
    html,body{background:#fbf8f1!important;color:var(--text);-webkit-print-color-adjust:exact;print-color-adjust:exact}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .wrap{max-width:none!important;padding:0!important;margin:0!important}
    /* Ocultar toda la interfaz */
    #hero,.tabs,.chartfan,.foot,.sub,#formzone,#peoplebar,#transit-box,#solar-box,#solar-hint,#syn-box,#astro-box,#chartopts,.ce-panel,.ce-toggle,#more-note,#t-moment,#hoypanel,#detail,#syn-aspects,#eventpanel,#acg-report,#reloc-box,#rl-side,#acg-fs-btn,#natal-only,.more-menu,#daycalc,#dc-change,#astro-info,.pagebtns,#charthint,#balance,#data{display:none!important}
    #page-actions{display:block!important;margin:0}
    /* ── PORTADA (página completa) ── */
    #print-head{display:flex!important;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:90vh;page-break-after:always;margin:0}
    .printhead .ph-brand{font-family:var(--f-title);font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
    .printhead .ph-title{font-family:var(--f-title);font-size:46px;font-weight:500;color:var(--text);margin:24px 0 0;letter-spacing:-.01em;line-height:1.08}
    .printhead .ph-title::after{content:"";display:block;width:54px;height:1px;background:var(--gold);margin:24px auto 0}
    .printhead .ph-name{font-family:var(--f-title);font-style:italic;font-size:23px;font-weight:400;color:var(--gold-deep);margin-top:26px}
    .printhead .ph-line{font-family:var(--f-title);font-size:13px;letter-spacing:.02em;color:var(--text);margin-top:2px}
    .printhead .ph-rot{font-family:var(--f-title);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:22px}
    .printhead .ph-aviso{font-family:var(--f-title);font-size:11px;font-style:italic;color:var(--muted);margin-top:20px}
    /* ── RUEDA (su propia página) ── */
    #chartrow{display:block!important;page-break-inside:avoid;margin:0}
    #chart{max-width:500px;margin:0 auto!important}
    /* ── REPORTE editorial estilo revista ── */
    #report{display:block!important;background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0 auto!important;max-width:640px;page-break-before:always}
    #report h3{font-family:var(--f-title);font-size:34px;font-weight:500;color:var(--text);letter-spacing:-.015em;line-height:1.12;margin:0 0 6px}
    #report .rp-sub{font-family:var(--f-title)!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 30px!important}
    #report h4{font-family:var(--f-title);font-style:italic;font-size:23px;font-weight:500;color:var(--gold-deep);margin:30px 0 9px;page-break-after:avoid;line-height:1.2}
    #report p{font-family:var(--f-head);font-size:13px;color:#33302b;line-height:1.9;margin:0 0 14px}
    #report .rp-pos{font-family:var(--f-head)!important;font-size:12px!important;color:var(--muted)!important;line-height:2.05!important}
    /* ── Cartas de bienvenida y cierre ── */
    #report .rp-letter{page-break-inside:avoid;min-height:76vh;display:flex;flex-direction:column;justify-content:center;max-width:520px;margin:0 auto}
    #report .rp-letter.rp-break{page-break-before:always}
    #report .rp-lhi{font-family:var(--f-title);font-style:italic;font-size:26px;font-weight:500;color:var(--gold-deep);margin:0 0 20px}
    #report .rp-letter p{font-family:var(--f-head);font-size:14px;line-height:2;color:#33302b;margin:0 0 14px}
    #report .rp-sign{margin-top:26px!important;font-family:var(--f-title)!important;font-style:italic;color:var(--gold-deep)!important;line-height:1.5!important}
    #report .rp-sign span{font-size:23px}
    /* ── Secciones del reporte ── */
    #report .rp-sec.rp-break{page-break-before:always}
    #report .rp-lead{font-family:var(--f-title)!important;font-style:italic;font-size:16px!important;color:var(--muted)!important;line-height:1.7!important;margin:0 0 24px!important}
    #report .rp-asp{page-break-inside:avoid;margin:0 0 16px}
    #report .rp-asp-h{font-family:var(--f-title)!important;font-size:12px!important;letter-spacing:.01em;color:var(--gold-deep)!important;margin:0 0 3px!important;line-height:1.4}
    #report .rp-asp-t{margin:0!important;font-size:12px!important;color:var(--gold-deep)!important;line-height:1.7!important;white-space:pre-line!important}
    #report .rp-sum{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 16px}
    #report .rp-sum-i{flex:1 1 44%;border:1px solid var(--line);border-radius:5px;padding:10px 14px;display:flex;flex-direction:column;gap:3px;page-break-inside:avoid}
    #report .rp-sum-l{font-family:var(--f-title)!important;font-size:10px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important;margin:0!important}
    #report .rp-sum-v{font-family:var(--f-title)!important;font-size:18px!important;color:var(--gold-deep)!important;margin:0!important}
  }
  .asttoggle{display:inline-flex;align-items:center;gap:7px;font-size:0.75rem;color:var(--muted);letter-spacing:0;text-transform:none;font-weight:400;cursor:pointer;margin:0}
  .asttoggle input{width:auto;height:auto;margin:0;accent-color:var(--label);cursor:pointer}
  #cartachip{display:flex;align-items:center;gap:12px;width:100%;height:auto;min-height:48px;text-align:left;margin:0 0 14px;padding:12px 16px;background:var(--soft);border:1px solid var(--line);border-radius:5px;cursor:pointer;font-family:var(--f-head);box-shadow:var(--soft-sh);transition:border-color .15s,box-shadow .15s}
  #cartachip:hover{border-color:var(--label);box-shadow:none}
  .cchip-dot{display:none}
  .cchip-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;overflow:hidden}
  .cchip-txt b{font-family:var(--f-title);font-weight:600;font-size:0.875rem;letter-spacing:.5px;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cchip-txt span{font-size:0.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cchip-edit-lbl{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-title);font-weight:600;font-size:0.75rem;letter-spacing:.5px;color:var(--gold-deep);flex:none}
  .cchip-edit-lbl .ui-ic{width:15px;height:15px}
  .people{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px;padding:10px 13px;background:var(--soft);border:1px solid var(--line);border-radius:5px}
  /* En celular no hay ancho para poner el rótulo al lado del texto, se montan. Van uno debajo del otro. */
  @media(max-width:600px){
    .people{flex-direction:column;align-items:flex-start;gap:8px;padding:13px}
    .people .pchips{width:100%;flex:0 0 auto}
    .people .pbtn{width:100%}
  }
  .plabel{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .pchips{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:120px}
  .pempty{font-size:0.75rem;color:var(--muted);font-weight:300}
  /* Vacío: solo la frase, sin la caja con borde que parece botón (Mafe, 20 jul 2026).
     Con !important para ganarle a la regla de la vista limpia que le pone borde a .people. */
  .people.pnone{background:transparent!important;border:none!important;padding:2px 0;margin:8px 0 4px}
  .pchip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:4px 5px 4px 12px;font-size:0.8125rem}
  .pchip-n{cursor:pointer}
  .pchip:hover{border-color:var(--label)}
  .pchip-x{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:0.8125rem;color:var(--muted);background:var(--soft);cursor:pointer;line-height:1}
  .pchip-x:hover{background:var(--danger);color:#fff}
  .pbtn{width:auto;height:34px;padding:0 14px;font-size:0.75rem;background:#fff;color:var(--gold-deep);border:1px solid var(--line);font-weight:500}
  .pbtn:hover{background:var(--label);color:#fff}
  .pbtn{color:var(--gold-deep)}
  #balance{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #balance .esshint,#balance .summary,#balance .balcol-sum,#balance .baldet-inline{grid-column:1/-1}
  .formzone{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:18px 18px 6px;margin-bottom:12px}
  /* === Franjas de sección demarcadas sobre el fondo (jul 2026) === */
  .formzone,.people,#transit-box,#solar-box{box-shadow:var(--soft-sh)}
  #transit-box{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:18px 20px 20px}
  #solar-box{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:18px 20px 20px}
  #syn-box{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:18px 20px 20px}
  .summary{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin-top:4px}
  .sumgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
  .sumstat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:14px 10px}
  .sumico{font-size:1.25rem;line-height:1;height:28px;display:flex;align-items:center;justify-content:center}
  .sumico-g svg{display:block}
  .sumlab{font-family:var(--f-title);font-size:0.625rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.3}
  .sumval{font-family:var(--f-title);font-size:0.875rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
  .summary .balcap{color:var(--muted);margin:10px 2px 0}
  @media(max-width:640px){.sumgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){#balance{grid-template-columns:1fr}}
  .baldetail{background:#fff;border:1px solid var(--line);border-radius:5px;padding:16px 18px;line-height:1.6}
  .baldetail .bd-h{font-family:var(--f-title);font-size:1.125rem;color:var(--text);margin:0 0 6px}
  .baldetail .bd-m{color:var(--text);font-size:0.875rem;line-height:1.6;margin:0 0 7px}
  .baldetail .bd-x{color:var(--muted);font-size:0.8125rem;font-weight:300}
  .balsum-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
  .balsum-row:last-child{border-bottom:none}
  .balsum-k{font-size:0.75rem;letter-spacing:0;text-transform:uppercase;color:var(--muted)}
  .balsum-v{font-size:0.8125rem;color:var(--text);text-align:right}
  .balcap{font-size:0.8125rem;color:var(--muted);margin:12px 0 2px;font-weight:300;line-height:1.6}
  .balcol{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px}
  .baltitle{font-family:var(--f-title);font-size:0.75rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text);margin-bottom:11px;font-weight:700}
  .balcol-sum{background:#021212;border-color:#021212}
  .balcol-sum .baltitle{color:var(--paper)}
  .balcol-sum .balsum-k{color:#c6c0ba}
  .balcol-sum .balsum-v{color:var(--paper)}
  .balcol-sum .balsum-row{border-bottom-color:rgba(245,242,238,.16)}
  .balcol-sum .balcap{color:#c6c0ba}
  .balrow{display:flex;align-items:center;gap:9px;margin:5px -7px;padding:4px 7px;cursor:pointer;border-radius:5px;transition:background .15s}
  .ballab{font-size:0.75rem;color:var(--muted);width:62px}
  .baltrack{flex:1;height:7px;background:#eceae7;border-radius:5px;overflow:hidden}
  .balfill{display:block;height:100%;border-radius:5px}
  .balnum{font-size:0.75rem;color:var(--text);width:14px;text-align:right}
  .domrow{display:flex;align-items:center;gap:9px;margin:8px 0;font-size:0.875rem;color:var(--text)}
  .domnote{font-size:0.75rem;color:var(--muted);margin-top:11px;line-height:1.55;font-weight:300}
  .retrostrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .rchip{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;color:var(--danger);background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.28);border-radius:5px;padding:5px 11px}
  /* En iPhone (Safari) el campo de fecha ignora el width:100% y se dibuja con su
     ancho nativo, sobresaliendo de la tarjeta del formulario (Mafe, 21 jul 2026).
     Apagar la apariencia del sistema lo obliga a respetar el ancho de su columna. */
  input[type=date]{cursor:pointer;-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
  /* iOS centra el texto de la fecha por su cuenta; que herede la alineación del campo,
     igual que Nombre y Lugar (el fechador del día conserva su centrado propio). */
  input[type=date]::-webkit-date-and-time-value{text-align:inherit}
  input[type=date]::-webkit-calendar-picker-indicator{opacity:0;display:none}
  .calpop{position:absolute;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:var(--pop-sh);padding:11px;width:266px;font-family:var(--f-head)}
  .cal-hd{padding:0 4px}
  .cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
  .cal-title{font-size:0.8125rem;color:var(--gold-deep);font-weight:500;text-transform:capitalize}
  .cal-sel{display:flex;gap:6px;align-items:center}
  .cal-sel select{height:28px;padding:0 6px;border:1px solid var(--line);border-radius:5px;font-size:0.8125rem;color:var(--gold-deep);background:var(--soft);width:auto;font-family:var(--f-head);font-weight:500;cursor:pointer}
  .cal-sel select:focus{outline:none;border-color:var(--label)}
  .cal-mon{text-transform:capitalize}
  .cal-nav{width:24px;height:30px;padding:0;border:none;background:transparent;color:var(--gold-deep);font-size:1.4375rem;cursor:pointer;line-height:1}
  .cal-nav:hover{background:transparent;color:var(--label)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .cal-wd{text-align:center;font-size:0.625rem;color:var(--muted);padding:3px 0}
  .cal-day{height:29px;padding:0;border:none;background:transparent;color:var(--text);border-radius:5px;font-size:0.75rem;cursor:pointer;width:100%}
  .cal-day:hover{background:var(--soft)}
  .cal-day.tod{box-shadow:inset 0 0 0 1px var(--label)}
  .cal-day.sel{background:var(--label);color:#fff}
  .cal-day.sel:hover{background:var(--label-hover)}
  .cal-ft{display:flex;justify-content:space-between;gap:8px;margin-top:9px}
  .cal-ft-b{flex:1;height:31px;padding:0;border:1px solid var(--line);background:#fff;color:var(--gold-deep);border-radius:5px;font-size:0.75rem;cursor:pointer;font-weight:500}
  .cal-ft-b:hover{background:var(--label);color:#fff;border-color:var(--label)}
  .cal-x{flex:0 0 36px;font-size:1.125rem;line-height:1;color:var(--muted)}
  .cal-x:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
  .cal-ok{background:var(--label);color:#fff;border-color:var(--label)}
  .cal-ok:hover{background:var(--label-hover);color:#fff;border-color:var(--label-hover)}
  .timepop{width:auto}
  .tp-row{display:flex;align-items:center;gap:6px}
  .tp-row select{width:auto;height:36px;padding:0 8px}
  .tp-sep{color:var(--gold-deep);font-weight:600}
  .rnote{flex-basis:100%;font-size:0.75rem;color:var(--muted);margin:6px 0 0;font-weight:300;line-height:1.6}
  .retrocard .nm,.retrocard .pos{color:var(--danger)}
  .evpanel{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin:8px 0 6px}
  /* Los rotulos de la ficha del evento (Mafe, 27 jul 2026), el mismo idioma de
     ESTAS VIENDO: rotulo chiquito en Staatliches gris y el dato debajo. */
  .evpanel .ev-rot{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted);margin:12px 0 2px;font-weight:600}
  .evpanel .ev-rot:first-child{margin-top:0}
  /* El digito de la casa en Arimo, que el uno de Staatliches parece numero romano */
  .evtitle .ev-num{font-family:var(--f-head);font-weight:700;font-size:0.88em;letter-spacing:0}
  /* El recuadro del evento son ahora DOS tarjetas (boceto de Mafe, 27 jul 2026): el
     contenedor #eventpanel se vuelve invisible y cada .ev-card lleva el traje. El
     doble :not con !important es para ganarle al barrido movil que le pinta fondo
     y borde a #eventpanel por id. */
  #eventpanel:not(#sin-uso):not(#sin-uso){background:transparent!important;border:none!important;padding:0!important;box-shadow:none!important}
  .evpanel .ev-card{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px 18px;margin:0 0 10px}
  .evtitle{font-family:var(--f-title);font-size:1.125rem;color:var(--gold-deep);margin:0 0 6px;font-weight:600;letter-spacing:-.03em}
  .evline{font-size:0.8125rem;color:var(--text);margin:0 0 5px;line-height:1.55}
  /* La intención única de la lunación (la lista de varias ideas quedó para otra fase) */
  .evint-one{font-size:0.8125rem;color:var(--text);margin:0;line-height:1.5}
  .evint-h{font-size:0.6875rem;letter-spacing:-.03em;text-transform:uppercase;color:var(--gold-deep);margin:13px 0 8px;font-weight:600}
  .evint{margin:0;padding-left:20px}
  .evint li{font-size:0.8125rem;color:var(--text);margin:6px 0;line-height:1.5}
  #acgmap{width:100%;height:min(82vh,720px);border-radius:5px;overflow:hidden;border:1px solid var(--line)}
  #acgmap .leaflet-container{font-family:var(--f-head);background:#eceae7}
  .acg-lab{background:none!important;border:none!important}
  #acgmap svg{width:auto!important;height:auto!important;max-width:none!important}
  #acgmap img{max-width:none!important}
  #acgframe{position:relative;margin:16px 0 4px;width:100%;display:grid;grid-template-columns:32px 1fr 32px;grid-template-rows:auto auto auto}
  #acg-top{grid-column:2;grid-row:1;margin-bottom:2px}
  #acgmap{grid-column:2;grid-row:2}
  #acg-bot{grid-column:2;grid-row:3;margin-top:2px}
  #acg-left{grid-column:1;grid-row:2}
  #acg-right{grid-column:3;grid-row:2}
  /* El 850 sitúa las cuatro canaletas por encima de las capas de Leaflet (la más alta es
     la de popups, 700) y por debajo de sus controles (1000), así que los chips de parán
     ya no se esconden bajo el mapa en móvil y los botones +/− siguen encima de todo. */
  .acg-gut{position:relative;width:100%;height:26px;overflow:visible;pointer-events:none;z-index:850}
  .acg-gut-v{position:relative;height:100%;overflow:visible;pointer-events:none;z-index:850}
  .acg-lab-chip{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1;cursor:pointer;pointer-events:auto;transition:opacity .18s ease;white-space:nowrap}
  #acg-top .acg-lab-chip{bottom:1px}
  #acg-bot .acg-lab-chip{top:1px;flex-direction:column-reverse}
  #acg-left .acg-lab-chip,#acg-right .acg-lab-chip{transform:translateY(-50%);flex-direction:row;gap:1px}
  #acg-left .acg-lab-chip{right:1px}
  #acg-right .acg-lab-chip{left:1px}
  .acg-lab-chip .acg-lab-ang{font-family:var(--f-head);font-weight:700;font-size:0.625rem;color:var(--c);margin:1px 0;letter-spacing:.02em}
  .acg-lab-chip.dim{opacity:.28}
  .acg-lab-chip.on .acg-lab-ang{text-decoration:underline}
  .acg-lab-paran{background:rgba(248,244,234,.92);border:1px solid var(--gold);border-radius:5px;padding:1px 4px;gap:0}
  .acg-lab-paran .acg-lab-x{font-family:var(--f-head);font-weight:700;font-size:0.625rem;color:#5c5c56;margin:0 1px}
  .acg-lab-paran.on{border-color:#33302b;box-shadow:0 0 0 1px #33302b}
  #reloc-box .tfield label{display:block;font-size:0.75rem;color:var(--gold-deep);margin-bottom:3px}
  .leaflet-control-attribution{font-size:0.625rem}

/* ===== <style id="tema-mafe"> (index.html línea 1196) ===== */
/* === Tema personalizado de Mafe (aplicado desde el editor #tema, jul 2026 - paleta unificada) === */
/* Radio uniforme de 5px en TODO (decisión de marca). OJO, esta regla también
   curva los separadores que solo llevan una línea abajo y produce las "curvitas"
   que Mafe ya cazó dos veces. Las excepciones viven al FINAL del archivo, en
   «tipografia-display» sección "Separadores rectos": si un separador nuevo sale
   curvado, se agrega su clase allá. Esta regla no se toca. */
*{border-radius:5px!important}
.card,.esscard,.detailbox,.reportbox,.baldetail,.balcol,.evpanel,.people,#astro-info,#big3box,.baldet-inline,.results,.more-menu,#acgmap{border-radius:5px!important}
label{font-size:0.75rem!important;letter-spacing:0!important}
small{font-size:0.625rem!important;letter-spacing:0!important}
.tab{border-radius:5px!important;font-size:0.875rem!important}
/* círculos que deben seguir redondos */
#big3box .orbit,#tema-fab,.pchip-x,#acg-globewrap .gl-zoom button{border-radius:50%!important}

/* ===== <style id="chartfan-mafe"> (index.html línea 1211) ===== */
/* === Selector de cartas en abanico 3D (wow al tocar) - jul 2026 === */
/* estrellas ocultas por ahora (reversible: borra esta línea) */
#hero-mesh,#hero-stars,#hero-cross,#hero-shoot{display:none}
/* === Selector de cartas - tarjetas planas marfil (jul 2026) === */
#hero .chartfan{position:relative;z-index:0;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:stretch;padding:28px 0 34px;margin:0}
#hero .chartfan::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;background:#021212}
#hero .chartfan .tab{
  position:relative;width:auto;min-height:0;height:100%;aspect-ratio:3/4;flex:initial;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:16px 8px!important;color:var(--tx)!important;
  background:#e7e3d8!important;border:1px solid #dcd7c8!important;border-radius:5px!important;
  box-shadow:none;overflow:visible;cursor:pointer;will-change:transform;
  --rc:rgba(74,83,52,.42);--rc2:rgba(74,83,52,.26);--gl:#5c5c56;--tx:#021212;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#hero .chartfan .tab:hover{transform:translateY(-4px);box-shadow:0 12px 24px -14px rgba(40,42,30,.5)}
/* Más cartas: otro color (verde) para diferenciarla */
#hero .chartfan > .moredd{position:relative}
#hero .chartfan > .moredd .tab-more{width:100%;background:#021212!important;border-color:#021212!important;
  --rc:rgba(233,217,176,.5);--rc2:rgba(233,217,176,.3);--gl:#fbf8f1;--tx:#f7f4ed}
/* emblema (anillo con marcas tipo carta astral) */
#hero .chartfan .cf-ico{display:none}
#hero .chartfan .cf-sub{display:none}
#hero .chartfan .cf-emb{position:relative;width:auto;height:72px;color:var(--gl);
  border:none;display:flex;align-items:center;justify-content:center}
#hero .chartfan .cf-emb::after{display:none}
#hero .chartfan .cf-emb::before{display:none}
#hero .chartfan .cf-emb svg{position:relative;width:68px;height:68px}
#hero .chartfan .cf-emb .cf-ac{fill:var(--gold)}
#hero .chartfan .cf-emb .cf-acs{stroke:var(--gold)}
#hero .chartfan .tab.active .cf-emb .cf-ac{fill:#fbf8f1}
#hero .chartfan .tab.active .cf-emb .cf-acs{stroke:#fbf8f1}
#hero .chartfan .cf-emb svg.sun{width:60px;height:60px}
#hero .chartfan .cf-nm{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);margin:0;background:#021212!important;color:#ffffff!important;box-shadow:0 5px 12px -5px rgba(40,42,30,.55)!important;font-family:var(--f-title);font-size:0.6875rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;text-align:center;padding:6px 12px;border-radius:5px!important;white-space:nowrap}
#hero .chartfan > .moredd .tab-more .cf-nm{background:#fbf8f1!important;color:#021212!important}
/* tarjeta activa — realce sutil */
#hero .chartfan .tab.active{box-shadow:0 12px 26px -12px rgba(40,42,30,.45);border-color:var(--gold)!important;transform:translateY(-2px)}
/* móvil — tira horizontal deslizable */
@media(max-width:900px){
  #hero .chartfan{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:10px;padding:10px 6px 16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  #hero .chartfan::-webkit-scrollbar{display:none}
  #hero .chartfan .tab{flex:0 0 118px;width:118px;aspect-ratio:3/4;scroll-snap-align:center}
  #hero .chartfan > .moredd{flex:0 0 118px;width:118px}
}
/* ==== NAV DE FRANJAS A LA IZQUIERDA (jul 2026) ==== */
@media(min-width:901px){
  .wrap{max-width:1180px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
  #hero{margin:0 0 20px;position:sticky;top:14px;align-self:start}
}
.rail-head{display:none}
@media(min-width:901px){.rail-head{display:block;font-family:var(--f-head);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#a6a6a6;font-weight:700;margin:2px 0 9px 4px}}
#hero .chartfan{position:static;display:flex;flex-direction:column;gap:8px;grid-template-columns:none;padding:0;margin:0;z-index:auto;align-items:stretch}
#hero .chartfan::before{display:none!important}
#hero .chartfan .tab{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:auto;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:11px 14px!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:5px!important;box-shadow:none;color:var(--text)!important}
#hero .chartfan .tab:hover{transform:none;background:var(--soft);border-color:#c8c8c8;box-shadow:none}
#hero .chartfan .tab.active{background:#021212!important;border-color:#021212!important;box-shadow:0 4px 13px -7px rgba(38,38,32,.6);transform:none}
#hero .chartfan .cf-emb{position:static;width:auto;height:auto;flex:0 0 auto;color:var(--gold-deep)}
#hero .chartfan .cf-emb svg,#hero .chartfan .cf-emb svg.sun{position:static;width:25px;height:25px}
#hero .chartfan .cf-emb .cf-ac{fill:var(--gold)}
#hero .chartfan .tab.active .cf-emb{color:#fff}
#hero .chartfan .tab.active .cf-emb .cf-ac{fill:#fff}
#hero .chartfan .tab.active .cf-emb .cf-acs{stroke:#fff}
#hero .chartfan .cf-nm{position:static;left:auto;bottom:auto;transform:none;margin:0;background:transparent!important;color:var(--text)!important;box-shadow:none!important;font-family:var(--f-head);font-size:0.875rem;font-weight:600;letter-spacing:-.01em;padding:0;border-radius:0!important;white-space:normal;text-align:left}
#hero .chartfan .tab.active .cf-nm{color:#fff!important}
#hero .chartfan .moredd{display:none!important}
#hero .chartfan .tab-soon{opacity:.55;cursor:default;border-style:dashed!important}
#hero .chartfan .tab-soon .cf-emb{color:#aaaaaa}
#hero .chartfan .tab-soon:hover{background:#fff;border-color:var(--line);transform:none}
.rail-sep{display:none}
/* "Tus cartas" y "Relaciones" pasan a la display de rótulos con espaciado 0
   (Mafe, 19 jul 2026). Sube de 11 a 13px porque Staatliches es condensada y al
   tamaño viejo se leía más pequeña todavía. */
@media(min-width:901px){.rail-sep{display:block;font-family:var(--f-title);font-size:0.8125rem;letter-spacing:0;text-transform:uppercase;color:#a6a6a6;font-weight:600;margin:14px 0 9px 4px}}
@media(max-width:900px){
  #hero{position:static;margin:0 0 6px}
  #hero .chartfan{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 2px 10px;scroll-snap-type:none}
  #hero .chartfan .tab{width:auto;flex:0 0 auto;white-space:nowrap;aspect-ratio:auto}
  #hero .chartfan .cf-nm{white-space:nowrap}
}
/* ==== PANEL LATERAL ANTRACITA (solo escritorio, jul 2026) ==== */
@media(min-width:901px){
  #hero{background:#021212;padding:12px 12px 14px;margin:26px 0 20px;border-radius:5px;position:sticky;top:var(--stick-top,14px);align-self:start;max-height:calc(100vh - var(--stick-top,14px) - 20px);overflow-y:auto}
  #hero .hero-body{padding:0}
  #hero .rail-sep{color:#a6a6a6;margin-left:6px}
  #hero .chartfan .tab{background:transparent!important;border:1px solid rgba(255,255,255,.14)!important;color:#ffffff!important}
  #hero .chartfan .tab .cf-nm{color:#ffffff!important}
  #hero .chartfan .cf-emb{color:#cdbb8b}
  #hero .chartfan .tab:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.28)!important}
  #hero .chartfan .tab.active{background:#5c5c56!important;border-color:#5c5c56!important;color:#ffffff!important;box-shadow:none}
  #hero .chartfan .tab.active .cf-nm{color:#021212!important}
  #hero .chartfan .tab.active .cf-emb{color:#021212}
  #hero .chartfan .tab.active .cf-emb .cf-ac{fill:#021212}
  #hero .chartfan .tab-soon{opacity:.5;border-style:dashed!important;border-color:rgba(255,255,255,.22)!important}
  #hero .chartfan .tab-soon .cf-emb{color:#8c8982}
  #hero .chartfan .tab-soon .cf-nm{color:#afafaf!important}
  #hero .chartfan .tab-soon:hover{background:transparent!important;border-color:rgba(255,255,255,.22)!important}
}

/* ===== <style id="big3-mafe"> (index.html línea 1311) ===== */
/* === Big 3 - minimalista cálido - jul 2026 (solo Poppins) === */
#big3box{position:relative;background:var(--paper);border:1px solid var(--line);padding:40px 26px 36px}
#big3box .angles{margin:0}
/* encabezado limpio */
#big3box .b3head{text-align:left;margin:0 0 30px}
#big3box .b3kicker{display:block;font-family:var(--f-title);font-size:0.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
#big3box .b3kicker::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin:12px auto 0;border-radius:5px}
/* tarjetas */
#big3box .big3{display:flex;justify-content:center;align-items:stretch;gap:18px;flex-wrap:wrap;margin:0}
#big3box .b3card{position:relative;flex:1 1 0;min-width:150px;max-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:30px 20px 26px;text-align:center;cursor:pointer;overflow:hidden;transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s,border-color .3s}
#big3box .b3card.sol{--c:var(--accent)}#big3box .b3card.luna{--c:var(--gold)}#big3box .b3card.asc{--c:var(--gold-deep)}
#big3box .b3card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c);opacity:.9}
#big3box .b3card:hover{transform:translateY(-5px);box-shadow:var(--card-sh-lift);border-color:var(--c)}
#big3box .b3glyph{display:flex;align-items:center;justify-content:center;height:46px;margin:0 auto 14px;color:var(--c);font-size:2.375rem;line-height:1}
#big3box .b3card.asc .b3glyph{font-family:var(--f-title);font-weight:700;font-size:1.4375rem;letter-spacing:.02em}
#big3box .pname{display:block;font-family:var(--f-title);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
#big3box .b3deg{font-family:var(--f-title);font-size:2.5rem;font-weight:700;line-height:1;color:var(--text);letter-spacing:-.03em}
#big3box .b3deg sup{font-size:1.125rem;color:var(--gold-deep);font-weight:600;top:-.7em}
#big3box .b3sign{font-family:var(--f-title);font-size:0.875rem;font-weight:500;color:var(--gold-deep);margin-top:6px;letter-spacing:.01em}
@media(prefers-reduced-motion:reduce){#big3box .b3card{transition:none}}
@media(max-width:520px){#big3box .b3card{flex:1 1 100%;max-width:280px}}

/* ===== <style id="dash-natal"> (index.html línea 1334) ===== */
  /* ===== Estilo DASHBOARD - solo vista Carta natal (body[data-view="natal"]) ===== */
  /* Lienzo cálido para que las tarjetas blancas resalten, como en el dashboard de referencia */
  /* La rueda dentro de su propia tarjeta */
  body[data-view="natal"] #chart{background:#fff;border:1px solid var(--line);border-radius:5px!important;padding:22px 18px 24px;box-sizing:border-box;max-width:600px;margin:16px auto 4px;box-shadow:var(--card-sh)}
  body[data-view="natal"] #chart svg{max-width:100%;height:auto}
  /* Big 3 como fila de tiles KPI flotando sobre el lienzo */
  /* Títulos de sección con aire de panel */
  /* Textos sueltos dentro del área natal, legibles sobre el antracita */
  body[data-view="natal"] #natal-only .esshint{color:#b9b9b9}
  body[data-view="natal"] #essence .esshint{text-align:left!important}
  /* Equilibrio, posiciones y aspectos, cada uno en su tarjeta */
  body[data-view="natal"] #data.cards{gap:12px}
  body[data-view="natal"] .esscard{border-radius:5px!important}
  /* ---- Rueda + lectura del planeta en dos columnas (escritorio) ---- */
  @media(min-width:901px){
    body[data-view="natal"] #chartrow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;margin:16px 0 4px}
    body[data-view="natal"] #chartrow #chart{grid-column:1;grid-row:1;max-width:none;width:100%;margin:0}
    body[data-view="natal"] #chartrow #detail,
    body[data-view="natal"] #chartrow #detail-empty{grid-column:2;grid-row:1;margin:0;align-self:start}
    body[data-view="natal"] #charthint{display:none}
  }
  /* Tarjeta de lectura y su estado vacío */
  body[data-view="natal"] #detail,
  body[data-view="natal"] #detail-empty{background:#fff!important;border:1px solid var(--line);border-radius:5px!important;padding:20px 22px;box-shadow:var(--card-sh)}
  #detail-empty{display:flex;align-items:center;justify-content:center;min-height:150px}
  #detail-empty .de-t{font-size:0.8125rem;line-height:1.6;color:var(--muted);margin:0;text-align:center;max-width:230px}
  /* Fuera de la vista natal el estado vacío nunca se ve; y en otras vistas el detalle va a lo ancho */
  body:not([data-view="natal"]) #detail-empty{display:none!important}
  #chartrow.split #detail,#chartrow.astro-split #detail{grid-column:1/-1}
  @media(max-width:900px){body[data-view="natal"] #detail-empty{display:none!important}}
  @media print{#detail-empty{display:none!important}}
  /* ---- La vista activa lleva su marca de "estás aquí" (24 ago 2026, elegida por
     Mafe): un rombo de vino asomado en el filo derecho de la pastilla blanca,
     mitad dentro y mitad fuera, apuntando al contenido. El filo marfil que lo
     rodea es lo que lo hace legible sobre la tinta del carril, que sin él la
     mitad de afuera se perdía. Así la activa no compite con la pastilla marfil
     de Consultas, que es la puerta al negocio. El radio 0 es para que el giro de
     45 grados dibuje un rombo de puntas vivas, no una moneda. ---- */
  #hero .chartfan .tab.active::before{content:"";position:absolute;right:-6px;top:50%;width:8px;height:8px;background:#3B161F;border:2px solid #fbf8f1;transform:translateY(-50%) rotate(45deg);border-radius:0!important;z-index:2}
  /* ---- Barra lateral en modo dashboard (esquinas redondeadas) ---- */
  @media(min-width:901px){
    #hero{border-radius:5px!important;padding:16px 13px 18px!important}
    #hero .chartfan{gap:7px}
    #hero .chartfan .tab{border-radius:5px!important;padding:12px 14px!important}
    #hero .chartfan .tab.active{border-radius:5px!important;background:#fff!important;border-color:#fff!important}
    #hero .rail-sep{margin-top:16px}
  }
  /* ---- Responsive: conservar los colores dashboard cuando el nav se va arriba (móvil/angosto) ---- */
  @media(max-width:900px){
    #hero{background:#021212!important;border-radius:5px!important;padding:8px!important;margin:0 0 14px}
    #hero .chartfan .tab{background:transparent!important;border:1px solid rgba(255,255,255,.16)!important;color:#ffffff!important;border-radius:5px!important}
    #hero .chartfan .tab .cf-nm{color:#ffffff!important}
    #hero .chartfan .cf-emb{color:#cdbb8b!important}
    #hero .chartfan .tab:hover{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.28)!important}
    #hero .chartfan .tab.active{background:#fff!important;border-color:#fff!important;border-radius:5px!important}
    #hero .chartfan .tab.active .cf-nm{color:#021212!important}
    #hero .chartfan .tab.active .cf-emb{color:#021212!important}
    #hero .chartfan .tab.active .cf-emb .cf-ac{fill:#021212!important}
    #hero .chartfan .tab-soon{border-style:dashed!important;border-color:rgba(255,255,255,.22)!important}
    #hero .chartfan .tab-soon .cf-emb{color:#8c8982!important}
    #hero .chartfan .tab-soon .cf-nm{color:#afafaf!important}
  }

/* ===== <style id="dash-motion"> (index.html línea 1398) ===== */
  /* ===== DASHBOARD GLOBAL: esquinas suaves + sombras (todas las pestañas) ===== */
  .card,.esscard,.detailbox,.reportbox,.baldetail,.balcol,.evpanel,.people,#astro-info,.baldet-inline,.results,.more-menu,#acgmap,.posgrp,.reportbox .rp-sum-i{border-radius:5px!important}
  #transit-box,#solar-box,#syn-box,#astro-box,.icalbox,#eventpanel{border-radius:5px!important}
  /* ===== MOVIMIENTO Y DINAMISMO (respeta prefers-reduced-motion) ===== */
  @media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth}
    /* Entrada de vista al cambiar de pestaña */
    @keyframes dashIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    .dash-anim{animation:dashIn .44s cubic-bezier(.2,.8,.2,1) both}
    /* Transiciones de interacción, en todo */
    #hero .chartfan .tab,button,.pbtn,.printbtn,.optsel,.chip,.pchip,.pchip-n,.acg-tok,.acg-lensbtn,.acg-paranbtn,.b3card,.esscard,.card,.detailbox,.balrow,.posgrp,.sumstat,.ritem,.cal-day,.tab,.hoy-aspsum,details summary{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background-color .2s ease,border-color .2s ease,color .15s ease}
    /* Hover dinámico */
    .chip:hover,.acg-tok:hover,.pchip:hover{transform:translateY(-2px)}
    #hero .chartfan .tab:not(.active):hover{transform:translateX(3px)}
    button:hover,.pbtn:hover,.printbtn:hover,.optsel:hover{transform:translateY(-1px)}
    button:active,.pbtn:active,.printbtn:active,.b3card:active,.esscard:active{transform:translateY(0) scale(.985)}
    /* Stagger suave de las tarjetas al entrar la vista */
    .dash-anim .b3card,.dash-anim #data>*,.dash-anim .esscard{animation:dashIn .5s cubic-bezier(.2,.8,.2,1) both}
    .dash-anim .b3card:nth-child(1),.dash-anim #data>*:nth-child(1),.dash-anim .esscard:nth-child(1){animation-delay:.05s}
    .dash-anim .b3card:nth-child(2),.dash-anim #data>*:nth-child(2),.dash-anim .esscard:nth-child(2){animation-delay:.11s}
    .dash-anim .b3card:nth-child(3),.dash-anim #data>*:nth-child(3),.dash-anim .esscard:nth-child(3){animation-delay:.17s}
    .dash-anim #data>*:nth-child(4){animation-delay:.22s}
    .dash-anim #data>*:nth-child(n+5){animation-delay:.27s}
  }

/* ===== <style id="dash-connected"> (index.html línea 1424) ===== */
  /* ===== Rueda + lectura como UNA sola tarjeta conectada (vista natal, escritorio) ===== */
  @media(min-width:901px){
    body[data-view="natal"] #chartrow{gap:0;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:var(--card-sh);overflow:hidden}
    body[data-view="natal"] #chartrow #chart{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;margin:0;padding:22px 20px;max-width:none}
    body[data-view="natal"] #chartrow #detail,
    body[data-view="natal"] #chartrow #detail-empty{background:#faf9f5!important;border:none!important;border-left:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;margin:0;padding:24px 22px;align-self:stretch;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:0}
    /* pestañita que conecta la lectura con la rueda */
    body[data-view="natal"] #chartrow #detail::before,
    body[data-view="natal"] #chartrow #detail-empty::before{content:"";position:absolute;left:-6px;top:56px;width:11px;height:11px;background:#faf9f5;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  }

/* ===== <style id="dash-big3arrow"> (index.html línea 1436) ===== */
  /* ===== Tarjeta reveladora del Big 3: aire + flechita saliendo de la tarjeta tocada ===== */
  body[data-view="natal"] #essence .esscard{position:relative;margin-top:22px}
  @media(min-width:521px){
    body[data-view="natal"] #essence .esscard::before{content:"";position:absolute;top:-8px;left:var(--arrow-x,50%);width:15px;height:15px;background:#eeebe7;border-left:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:translateX(-50%) rotate(45deg);z-index:1}
  }
  /* "Tu resumen": más presencia, menos aspecto de relleno */
  body[data-view="natal"] .summary{background:#faf7f0;border-color:#ffffff}
  body[data-view="natal"] .summary .baltitle{color:var(--gold-deep)}
  body[data-view="natal"] .summary .sumico svg{display:block}
  body[data-view="natal"] .summary .sumval{font-size:1rem;color:var(--text)}
  body[data-view="natal"] .summary .balcap{color:#43464b;font-weight:400}

/* ===== <style id="dash-grabtab"> (index.html línea 1449) ===== */
  /* ===== Colores del ítem activo del menú (escritorio) =====
     Limpieza del 20 jul 2026. Este bloque era el diseño "agarrado": el ítem
     activo se estiraba 13px con margen negativo para fundirse con el panel
     blanco, y el borde izquierdo de los recuadros se pintaba transparente.
     Esa geometría quedó superada por «hoy-marco» y se quitó tras comprobar en
     vivo, vista por vista, que sin ella no cambiaba nada. Lo único que seguía
     trabajando eran estos colores del texto y el icono del ítem activo. */
  @media(min-width:901px){
    #hero .chartfan .tab.active{color:#021212!important}
    #hero .chartfan .tab.active .cf-nm{color:#021212!important}
    #hero .chartfan .tab.active .cf-emb{color:#5c5c56!important}
    #hero .chartfan .tab.active .cf-emb .cf-ac{fill:#5c5c56!important}
  }

/* ===== <style id="dash-grabtab-movil"> (index.html línea 1464) ===== */
  /* ===== Pantalla chica: los items van arriba; la barra se pega al contenido, sin línea (jul 2026) ===== */
  @media(max-width:900px){
    #hero{margin-bottom:0!important;border-radius:5px 5px 0 0!important}
    #belowzone{margin-top:-1px!important}
  }

/* ===== <style id="hoy-marco"> (index.html línea 1471) ===== */
  /* ===== La franja de navegación antracita envuelve la zona activa en TODAS las vistas (escritorio) ===== */
  @media(min-width:901px){
    /* El antracita baja bastante más por abajo (Mafe, 19 jul 2026), para que el
       panel no se corte a ras del último bloque y entregue el paso al beige de las
       consultas sin dejar una franja blanca en medio. */
    .wrap{background:#021212!important;border-radius:0!important;padding:14px 14px 64px!important;gap:14px!important;align-items:stretch}
    /* El antracita llega de borde a borde (Mafe, 19 jul 2026). El contenido sigue
       centrado en sus 1180, pero el color se derrama a los lados con una sombra
       gigante recortada solo en horizontal, así no hace falta tocar el HTML ni
       pintar el body entero. El radio se quita porque a pantalla completa una
       esquina redondeada a mitad de la franja se ve como un error. */
    .wrap{box-shadow:0 0 0 100vmax #021212;clip-path:inset(0 -100vmax)}
    #hero{background:transparent!important;border:none!important;border-radius:0!important;padding:4px 2px!important;box-shadow:none!important;position:static!important;max-height:none!important;overflow:visible!important;margin:0!important}
    #hero .chartfan .tab.active{width:100%!important;margin-right:0!important;border-radius:5px!important;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)!important}
    /* Aire abajo (Mafe, 19 jul 2026): el padding inferior estaba en cero y el último
       bloque de cada vista quedaba pegado al borde del recuadro blanco, cortado a ras. */
    #belowzone{background:#ffffff;border-radius:5px!important;padding:18px 18px 44px!important;margin:0!important}
    /* El border-left-color:transparent que iba aquí era del diseño "agarrado" ya
       superado; dejaba los recuadros sin su línea izquierda (Mafe, 20 jul 2026). */
    body[data-view="hoy"] .hoypanel{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:8px 0 0!important;margin-top:8px!important}
  }

/* ===== <style id="ig-rail-css"> (index.html línea 1494) ===== */
  /* OJO: este bloque NO puede llamarse "ig-rail" a secas. El script del final
     pregunta por getElementById('ig-rail') para no montar el carril dos veces,
     y con el estilo usurpando ese nombre se encontraba a SÍ MISMO y se retiraba
     sin construir nada. Fue el bug del estreno, cazado el 1 ago 2026. */
  /* ===== El carril de Instagram (la propuesta D que eligió Mafe, 1 ago 2026) =====
     Vive como TERCERA columna de .wrap, en el hueco oscuro a la derecha del panel
     blanco, y lo construye el script del final SOLO si el puente /api/instagram
     devuelve posts. Sin cuenta de Behold o sin posts, ni existe en el DOM.
     Solo escritorio ancho (1440px+): en celular la mayoría llega DESDE Instagram,
     así que ahí no aporta y no se enseña. El ancho de .wrap crece justo lo que
     mide el carril, para no robarle ni un píxel al contenido de siempre. */
  #ig-rail{display:none}
  @media(min-width:1440px){
    body.ig-on .wrap{max-width:1420px;grid-template-columns:200px minmax(0,1fr) 226px}
    body.ig-on #ig-rail{display:block;grid-column:3;grid-row:1;min-width:0}
    #ig-rail .igr-in{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px;padding:4px 2px}
    #ig-rail .igr-rot{font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#bcb8b1}
    #ig-rail .igr-t{font-family:var(--f-title);font-size:1.25rem;font-weight:600;letter-spacing:.055em;line-height:1.1;color:#fbf8f1;margin-top:2px}
    #ig-rail .igr-post{display:block;text-decoration:none}
    /* 4:5 vertical, el formato real de los posts de Instagram (Mafe, 1 ago 2026),
       para que la miniatura no recorte la pieza. */
    #ig-rail .igr-post img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
    #ig-rail .igr-f{font-family:var(--f-head);font-size:0.78rem;letter-spacing:0;color:#a9a59e;margin-top:5px}
    #ig-rail .igr-btn{display:block;text-align:center;text-decoration:none;font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:.055em;color:#fbf8f1;border:1px solid #fbf8f1;padding:10px 12px}
    #ig-rail .igr-btn:hover{background:#fbf8f1;color:#021212}
    /* Los videos NO van aquí. Estuvieron dos días colgando del carril y el 2 ago
       2026 Mafe los quiso antes del quiz de servicios también en escritorio, así
       que viven solo en la tarjeta #yt-movil y el carril se queda con Instagram.
       Si algún día vuelven, ojo con no enseñarlos en los dos sitios a la vez. */
  }
  /* ===== La tarjeta de Instagram para celular y escritorio angosto (Mafe, 1 ago 2026) =====
     El mismo feed, como tarjeta antracita con rejilla de 2x2, colgada por el script
     justo encima del quiz «Tengo dudas sobre qué servicio escoger» (sitio que eligió
     Mafe). Vive donde el carril no cabe: por debajo de 1440px. En pantalla ancha se
     esconde para no enseñar el feed dos veces. */
  /* Piel común de las dos tarjetas. La de Instagram solo sale donde no cabe el
     carril; la de videos sale SIEMPRE, también en escritorio ancho, porque Mafe
     los quiere antes del quiz de servicios en todas las pantallas (2 ago 2026). */
  #ig-movil{display:none}
  #ig-movil,#yt-movil{background:#021212;border-radius:5px;padding:22px 16px 16px;margin:0 0 22px}
  #ig-movil .igm-rot,#yt-movil .igm-rot{font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#bcb8b1}
  #ig-movil .igm-t,#yt-movil .igm-t{font-family:var(--f-title);font-size:1.25rem;font-weight:600;letter-spacing:.055em;line-height:1.1;color:#fbf8f1;margin:2px 0 14px}
  #ig-movil .igm-btn,#yt-movil .igm-btn{display:block;text-align:center;text-decoration:none;font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:.055em;color:#fbf8f1;border:1px solid #fbf8f1;padding:10px 12px;margin-top:14px}
  #ig-movil .igm-btn:hover,#yt-movil .igm-btn:hover{background:#fbf8f1;color:#021212}
  /* La tira de videos: deslizable a la derecha, en 16:9 y con el título debajo,
     que los títulos de sus videos venden solos. En escritorio los tres caben a la
     vez y la tira deja de deslizarse sola. */
  #yt-movil .ytm-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #yt-movil .ytm-grid::-webkit-scrollbar{display:none}
  #yt-movil .ytm-grid a{display:block;flex:0 0 78%;scroll-snap-align:start;text-decoration:none}
  #yt-movil .ytm-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
  #yt-movil .ytm-vt{font-family:var(--f-head);font-size:0.8125rem;letter-spacing:0;line-height:1.35;color:#e7e1d4;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  @media(min-width:760px){
    #yt-movil{padding:26px 22px 20px}
    #yt-movil .ytm-grid a{flex:1 1 0;scroll-snap-align:none}
    #yt-movil .ytm-vt{font-size:0.875rem}
  }
  @media(max-width:1439px){
    #ig-movil{display:block}
    /* Tira deslizable hacia la derecha, como el carrusel de consultas: Mafe la
       prefirió sobre la rejilla de 2x2 (1 ago 2026). Cada post ocupa poco más de
       media pantalla, así el borde del siguiente asoma y se entiende solo que ahí
       se puede deslizar. */
    #ig-movil .igm-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    #ig-movil .igm-grid::-webkit-scrollbar{display:none}
    #ig-movil .igm-grid a{display:block;flex:0 0 58%;scroll-snap-align:start}
    #ig-movil .igm-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
  }

/* ===== <style id="ajustes-jul12b"> (index.html línea 1564) ===== */
  /* Reporte y PDF: por venir, se ocultan por ahora */
  .pagebtns{display:none!important}
  /* Formulario (nombre, fecha, hora, lugar) en tarjeta antracita, igual en todas las secciones */
  .formzone{background:#021212!important;border-color:#021212!important;box-shadow:none!important}
  .formzone label,
  .formzone .advgrp-t,
  .formzone .coords-adv-grid label{color:#ffffff!important}
  .formzone .asttoggle{color:#c9c9c9!important}
  .formzone .advopts-note,
  .formzone .coords-auto{color:#afafaf!important}
  /* Los dos botones de la caja de datos van en antracita con filo blanco (Mafe, 22 jul
     2026): el gris apagado y el azulado de antes no eran de la paleta y desentonaban. */
  .formzone .formactions #f-go{background:#021212!important;border:1px solid #ffffff!important;color:#ffffff!important}
  .formzone .formactions #f-go:hover{background:#3d3d33!important}
  /* Antes iba con blanco translúcido (fondo al 6% y borde al 16%) y se leía como
     transparencia rara sobre el antracita (Mafe, 20 jul 2026). Mismos tonos pero
     sólidos: el panel queda plano. */
  .formzone .advopts{background:#021212!important;border:1px solid #ffffff!important}
  .formzone .advopts summary{color:#ffffff!important}
  .formzone .advopts summary::after{background-color:#ffffff!important}
  /* Astrocartografía: mapa y controles llenan la columna de contenido, el mapa a todo el ancho */
  @media(min-width:901px){
    #astro-box{width:auto!important;left:auto!important;transform:none!important}
    #chartrow.astro-split{width:auto!important;left:auto!important;transform:none!important;grid-template-columns:1fr!important}
    #chartrow.astro-split #astro-info{grid-column:1!important;max-width:none!important;margin-top:14px!important}
  }
  /* En celular, mismo reajuste: sin el truco de ancho completo, todo pegado y en una columna */
  @media(max-width:900px){
    #astro-box{width:auto!important;left:auto!important;transform:none!important}
    #chartrow.astro-split{width:auto!important;left:auto!important;transform:none!important;grid-template-columns:1fr!important}
    #chartrow.astro-split #astro-info{grid-column:1!important;max-width:none!important;margin-top:14px!important}
  }

/* ===== <style id="natal-limpio"> (index.html línea 1598) ===== */
  /* ===== Vista natal - rediagramación limpia — crema - antracita - negro - mucho aire (jul 2026) =====
     Reemplaza el look "dashboard" oscuro por uno editorial y aireado, como la muestra aprobada.
     Solo body[data-view="natal"]. No toca contenido, JS ni las otras vistas. La rueda sigue siendo la del index. */
  /* -- lienzo: fuera el panel antracita, todo respira sobre la crema del belowzone -- */
  body[data-view="natal"] #natal-only{background:transparent!important;border-radius:0!important;padding:6px 0 30px!important;margin-top:8px!important}
  /* -- títulos de sección: antracita sobre crema, mayúscula fina espaciada, hairline debajo -- */
  body[data-view="natal"] #natal-only h2{font-family:var(--f-title)!important;font-size:0.75rem!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--muted)!important;text-align:left!important;border-bottom:1px solid var(--line);padding-bottom:12px;margin:54px 0 16px!important}
  body[data-view="natal"] #natal-only .esshint{color:var(--muted)!important}
  /* ===== Big 3 - de tiles KPI a tres columnas con aire ===== */
  body[data-view="natal"] #big3box{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:12px 0 10px!important}
  body[data-view="natal"] #big3box .b3head{text-align:left!important;margin:0 0 6px!important}
  body[data-view="natal"] #big3box .b3kicker{color:var(--muted)!important;font-weight:500!important;letter-spacing:.24em!important}
  body[data-view="natal"] #big3box .b3kicker::after{display:none!important}
  body[data-view="natal"] #big3box .big3{display:flex!important;gap:0!important;flex-wrap:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0!important}
  body[data-view="natal"] #big3box .b3card{flex:1 1 0!important;min-width:0!important;max-width:none!important;background:transparent!important;border:none!important;border-left:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:34px 12px 30px!important;display:flex;flex-direction:column;align-items:center;transform:none!important;overflow:visible}
  body[data-view="natal"] #big3box .b3card:first-child{border-left:none!important}
  body[data-view="natal"] #big3box .b3card::before{display:none!important}
  body[data-view="natal"] #big3box .b3card:hover{transform:none!important;box-shadow:none!important;border-color:var(--line)!important}
  body[data-view="natal"] #big3box .b3card:hover .b3glyph{background:var(--label-hover)!important}
  body[data-view="natal"] #big3box .b3card.sel{transform:none!important;box-shadow:none!important}
  body[data-view="natal"] #big3box .b3card.sel .b3glyph{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--text)}
  /* disco relleno en antracita (el gris del hover), glifo en crema — como astro-charts adaptado a la marca */
  body[data-view="natal"] #big3box .b3glyph{order:1;display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:var(--text)!important;border:none!important;border-radius:50%!important;margin:0 auto 16px!important;font-size:1.4375rem!important;color:#ffffff!important;font-variant-emoji:text}
  body[data-view="natal"] #big3box .b3card.asc .b3glyph{font-family:var(--f-title);font-weight:600;font-size:1rem!important;letter-spacing:.02em;color:#ffffff!important}
  body[data-view="natal"] #big3box .pname{order:2;color:var(--muted)!important;font-size:0.6875rem!important;font-weight:500!important;letter-spacing:.2em!important;margin-bottom:12px!important}
  body[data-view="natal"] #big3box .b3sign{order:3;font-family:var(--f-title)!important;font-size:1.25rem!important;font-weight:400!important;color:var(--text)!important;margin:0!important}
  body[data-view="natal"] #big3box .b3deg{order:4;font-family:var(--f-title)!important;font-size:0.75rem!important;font-weight:400!important;color:var(--muted)!important;letter-spacing:.06em!important;line-height:1.2!important;margin-top:5px!important}
  body[data-view="natal"] #big3box .b3deg sup{font-size:0.5625rem!important;color:var(--muted)!important;font-weight:400!important;top:-.5em}
  @media(max-width:560px){
    body[data-view="natal"] #big3box .big3{flex-wrap:wrap}
    body[data-view="natal"] #big3box .b3card{flex:1 1 100%!important;border-left:none!important;border-top:1px solid var(--line)!important}
    body[data-view="natal"] #big3box .b3card:first-child{border-top:none!important}
  }
  /* la tarjeta reveladora bajo el Big 3: flechita en hairline sobre panel suave */
  body[data-view="natal"] #essence .esscard::before{background:#f5efe1!important;border-color:var(--line)!important}
  /* ===== Rueda: panel crema suave, sin tarjeta pesada ni sombra ===== */
  body[data-view="natal"] #chart{background:#f5efe1!important;border:1px solid var(--line)!important;box-shadow:none!important}
  @media(min-width:901px){
    body[data-view="natal"] #chartrow{background:#ffffff!important;border:1px solid var(--line)!important;box-shadow:none!important}
    body[data-view="natal"] #chartrow #detail,
    body[data-view="natal"] #chartrow #detail-empty{background:#fbf8f1!important}
    body[data-view="natal"] #chartrow #detail::before,
    body[data-view="natal"] #chartrow #detail-empty::before{background:#fbf8f1!important;border-color:var(--line)!important}
  }
  body[data-view="natal"] #detail,
  body[data-view="natal"] #detail-empty{box-shadow:none!important}
  /* ===== Equilibrio, posiciones y aspectos: fuera las tarjetas blancas, aire sobre crema ===== */
  body[data-view="natal"] #balance,
  body[data-view="natal"] #asp{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
  body[data-view="natal"] #data .posgrp,
  body[data-view="natal"] #partes .posgrp,
  body[data-view="natal"] #estrellas .posgrp{background:transparent!important;border:none!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important}
  /* ===== Aspectos - de chips apretados a filas limpias (como astro-charts) ===== */
  #asp .asprow{display:flex;align-items:baseline;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);border-radius:0!important}
  #asp .asprow:last-child{border-bottom:none}
  #asp .asp-g{flex:none;width:20px;text-align:center;font-size:0.9375rem;font-variant-emoji:text;line-height:1}
  #asp .asp-tx{flex:1;font-family:var(--f-body);font-size:0.9375rem;color:var(--text);letter-spacing:normal}
  #asp .asp-tx b{font-weight:500}
  #asp .asp-tx i{font-style:italic;color:var(--muted);font-weight:400}
  #asp .asp-orb{flex:none;font-family:var(--f-title);font-size:0.75rem;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
  body[data-view="natal"] #asp{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;display:block}
  /* ===== Fase lunar - panel suave con icono de fase (nos faltaba) ===== */
  .mphbox:empty{display:none}
  .mphbox{background:#f3ecdc;border-radius:4px;padding:22px 24px;margin:30px 0 4px}
  .mphbox .mph-label{font-family:var(--f-title);font-size:0.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
  .mphbox .mph-body{display:flex;align-items:center;gap:20px}
  .mphbox .mph-ic{flex:none;display:block}
  .mphbox .mph-name{font-family:var(--f-title);font-size:1.1875rem;font-weight:400;color:var(--text);line-height:1.15}
  .mphbox .mph-meta{font-family:var(--f-title);font-size:0.75rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin:5px 0 9px}
  .mphbox .mph-desc{font-family:var(--f-body);font-size:0.875rem;line-height:1.55;color:var(--text);margin:0}
  @media(max-width:520px){.mphbox .mph-body{gap:14px}}
  /* ===== Tus casas - lista ordenada (como astro-charts) ===== */
  #houses .hrow{display:flex;align-items:center;gap:16px;padding:13px 2px;border-bottom:1px solid var(--line);border-radius:0!important;cursor:pointer}
  #houses .hrow:last-child{border-bottom:none}
  #houses .hrow:hover{background:rgba(0,0,0,.015)}
  /* Números en Arimo, no en Staatliches: en Staatliches el 1 parece una I y el
     11 se leía como número romano (queja del lanzamiento, 24 jul 2026) */
  #houses .h-num{flex:none;width:34px;font-family:var(--f-head);font-size:0.875rem;font-weight:500;font-style:italic;color:var(--muted);text-align:center;letter-spacing:.02em}
  #houses .h-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
  #houses .h-name{font-family:var(--f-body);font-size:0.9375rem;color:var(--text)}
  #houses .h-cusp{font-family:var(--f-title);font-size:0.75rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
  #houses .h-ang{color:var(--accent);font-weight:500}
  #houses .h-occ{flex:none;display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}
  /* Cabecera de la lista de casas, en el rol rótulo del sistema */
  #houses .hhead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 2px 8px;border-bottom:1px solid var(--line)}
  #houses .hhead span{font-family:var(--f-title);font-size:0.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  #houses .h-empty{font-family:var(--f-title);font-size:0.75rem;letter-spacing:0;text-transform:uppercase;color:#8c9199}
  /* ===== Patrones de la carta ===== */
  .patbox .patrow{display:flex;align-items:flex-start;gap:18px;padding:18px 2px;border-bottom:1px solid var(--line)}
  .patbox .patrow:last-child{border-bottom:none}
  .patbox .pat-ic{flex:none;margin-top:2px}
  .patbox .pat-tx{flex:1;min-width:0}
  .patbox .pat-h{display:flex;align-items:baseline;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:6px}
  .patbox .pat-name{font-family:var(--f-title);font-size:1rem;font-weight:400;color:var(--text)}
  .patbox .pat-mem{font-family:var(--f-title);font-size:0.78125rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);text-align:left}
  .patbox .pat-mem::before{content:"-";margin-right:9px;color:var(--line)}
  .patbox .pat-desc{font-family:var(--f-body);font-size:0.875rem;line-height:1.55;color:var(--text);margin:0}
  .patbox .pat-empty{font-family:var(--f-body);font-size:0.875rem;line-height:1.55;color:var(--muted);margin:0}
  /* ===== Ver más - los paneles de lectura no se desproporcionan con textos largos ===== */
  #detail.clamped .dtext,#astro-info.clamped .ai-body{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent)}
  .readmore{display:inline-block;margin-top:12px;background:none;border:none;padding:5px 0;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:var(--accent);cursor:pointer}
  .readmore:hover{color:var(--text)}
  /* ===== Datos curiosos ===== */
  #curios .curow{display:flex;align-items:flex-start;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line)}
  #curios .curow:last-child{border-bottom:none}
  #curios .cur-ic{flex:none;margin-top:1px}
  #curios .cur-tx{flex:1;min-width:0}
  /* Mismo tamaño y aire que .pat-name (T-cuadrada y compañía): en celular estos
     títulos quedaban en 15px con el tracking apretado del body y no casaban con
     ninguna otra fuente de la página (Mafe, 21 jul 2026). */
  #curios .cur-h{font-family:var(--f-title);font-size:1rem;font-weight:500;color:var(--text);margin-bottom:4px;letter-spacing:.5px}
  #curios .cur-d{font-family:var(--f-body);font-size:0.875rem;line-height:1.55;color:var(--muted);margin:0}
  /* ===== Bloque de compra (reporte PDF) ===== */
  #cta-report{background:var(--text);border-radius:5px;padding:38px 34px;margin:52px 0 4px;color:#ffffff}
  #cta-report .cta-k{font-family:var(--f-title);font-size:0.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#b9b9b9}
  #cta-report .cta-h{font-family:var(--f-title);font-size:1.625rem;font-weight:300;line-height:1.2;letter-spacing:-.01em;color:#ffffff;margin:14px 0 12px}
  #cta-report .cta-p{font-family:var(--f-body);font-size:0.9375rem;line-height:1.6;color:#d4d4d4;margin:0 0 26px}
  #cta-report .cta-btn{display:inline-flex;align-items:center;gap:12px;background:#fbf8f1;color:var(--text);border:none;border-radius:4px;padding:15px 26px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;cursor:default}
  #cta-report .cta-soon{font-size:0.5625rem;font-weight:600;letter-spacing:0;color:#8c9199;border:1px solid var(--line);border-radius:20px;padding:3px 9px}
  @media(max-width:520px){#cta-report{padding:30px 22px}#cta-report .cta-h{font-size:1.375rem}}
  /* ===== El equilibrio - barras finas, sin tarjetas, monocromo (astro-charts) ===== */
  body[data-view="natal"] #balance{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:14px;align-items:start;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;margin-top:6px}
  body[data-view="natal"] #balance .esshint{grid-column:1/-1;color:var(--muted)!important}
  body[data-view="natal"] #balance .balcol{grid-column:auto!important;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
  body[data-view="natal"] #balance .baltitle{font-family:var(--f-title)!important;font-size:0.6875rem!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--muted)!important;border-bottom:1px solid var(--line);border-radius:0!important;padding-bottom:10px;margin-bottom:6px}
  body[data-view="natal"] #balance .balrow{margin:0!important;padding:11px 2px!important;border-radius:0!important;border-bottom:1px solid var(--line);gap:14px}
  body[data-view="natal"] #balance .balrow:hover{background:transparent!important}
  body[data-view="natal"] #balance .balrow.sel{background:transparent!important}
  body[data-view="natal"] #balance .balrow.sel .ballab{color:var(--accent)}
  body[data-view="natal"] #balance .ballab{font-family:var(--f-body)!important;font-size:0.875rem!important;color:var(--text)!important;min-width:62px}
  body[data-view="natal"] #balance .baltrack{height:2px!important;background:var(--line)!important;border-radius:0!important}
  body[data-view="natal"] #balance .balfill{border-radius:0!important;height:2px!important}
  body[data-view="natal"] #balance .balnum{font-family:var(--f-title)!important;font-size:0.8125rem!important;font-weight:400!important;color:var(--muted)!important;min-width:14px;text-align:right}
  body[data-view="natal"] #balance .balnum-mx{color:var(--accent)!important}
  /* Tu resumen - sin tarjetas KPI blancas, aire sobre crema */
  body[data-view="natal"] #balance .summary{grid-column:1/-1;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-top:8px;border-top:1px solid var(--line);padding-top:22px!important}
  body[data-view="natal"] #balance .summary .baltitle{border-bottom:none;padding-bottom:0}
  body[data-view="natal"] #balance .sumstat{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:8px 6px!important}
  body[data-view="natal"] #balance .sumico svg,body[data-view="natal"] #balance .sumico{color:var(--text)}
  body[data-view="natal"] #balance .sumval{color:var(--text)!important;font-weight:500!important}
  body[data-view="natal"] #balance .baldetail,body[data-view="natal"] #balance .baldet-inline{background:transparent!important;border:none!important;border-top:1px solid var(--line)!important;box-shadow:none!important;border-radius:0!important;padding:16px 2px 4px!important}
  @media(max-width:640px){body[data-view="natal"] #balance{grid-template-columns:1fr;gap:28px}}
  /* círculos que el radio global aplanaba: vuelven a ser redondos */
  .acg-tok-c,.syn-gly,.syn-leg-dot,.syn-who-dot,.syn-group-dot,.syn-map-dot,.syn-dot,.prog-glyph{border-radius:50%!important}
  /* strokes de iconos, finos y parejos como astro-charts */
  #curios .cur-ic svg [stroke]{stroke-width:1.2}
  /* ===== Fase lunar y patrones también en Planetas hoy ===== */
  body:not([data-view="hoy"]) .hoy-extra{display:none!important}
  #hoy-moon{margin:22px 0 4px}
  /* Misma caja que "Energía de hoy", para que las dos secciones pesen igual y se
     vea dónde empieza y termina cada una (Mafe, 19 jul 2026). */
  #hoy-patterns{margin:0 0 18px;background:var(--paper);border-radius:5px;padding:20px 18px 22px}
  .patbox .mph-label{font-family:var(--f-title);font-size:0.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  body[data-view="hoy"] .patbox .patrow,body[data-view="hoy"] .mphbox{max-width:none}

/* ===== <style id="tipografia"> (index.html línea 1754) ===== */
  /* ===== Sistema de tipografía - 4 roles (fuente única, dado por Mafe jul 2026) ===== */
  .rotulo{font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#70706a}
  .titulo{font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:.5px;line-height:1.15;color:#021212}
  .meta{font-family:'Arimo',sans-serif;font-size:0.9375rem;font-weight:500;letter-spacing:-.5px;color:#70706a}
  .cuerpo{font-family:'Arimo',sans-serif;font-size:1rem;font-weight:400;letter-spacing:-.5px;line-height:1.2;color:#021212}
  /* Sobre fondo oscuro (antracita): mismos roles, colores claros */
  .oscuro .rotulo,.rotulo.oscuro{color:#b9b9b9}
  .oscuro .titulo,.titulo.oscuro{color:#ffffff}
  .oscuro .meta,.meta.oscuro{color:#c6c0ba}
  .oscuro .cuerpo,.cuerpo.oscuro{color:#ffffff}
  /* ===== Componentes de la carta apuntando a los 4 roles ===== */
  /* rótulos (etiquetas) */
  body[data-view="natal"] #natal-only h2,
  .mphbox .mph-label,.patbox .mph-label,
  body[data-view="natal"] #big3box .b3kicker,
  body[data-view="natal"] #big3box .pname,
  body[data-view="natal"] #balance .baltitle,
  body[data-view="natal"] #balance .sumlab{font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:uppercase!important;color:#70706a!important}
  body[data-view="natal"] #natal-only h2{border-bottom:1px solid var(--line);border-radius:0!important;padding-bottom:12px;margin:54px 0 16px!important}
  /* metas (datos secundarios) */
  .mphbox .mph-meta,#houses .h-cusp,.patbox .pat-mem,
  body[data-view="natal"] #balance .balnum,
  #asp .asp-orb,body[data-view="natal"] #big3box .b3deg{font-family:'Arimo',sans-serif!important;font-size:0.9375rem!important;font-weight:500!important;letter-spacing:-.5px!important;text-transform:none!important;color:#70706a!important;line-height:1.2!important}
  /* cuerpo (texto + nombres de item) */
  .mphbox .mph-desc,.patbox .pat-desc,#curios .cur-d,.patbox .pat-empty,
  #houses .h-name,#asp .asp-tx,body[data-view="natal"] #balance .ballab{font-family:'Arimo',sans-serif!important;font-size:1rem!important;font-weight:400!important;letter-spacing:-.5px!important;line-height:1.35!important;color:#021212!important}
  .patbox .pat-name,#curios .cur-h,#houses .h-name{font-weight:600!important}
  /* títulos grandes */
  .mphbox .mph-name{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-size:1.25rem!important;font-weight:600!important;letter-spacing:.5px!important;line-height:1.15!important;color:#021212!important}
  /* CTA sobre fondo oscuro (antracita) */
  #cta-report .cta-k{font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#b9b9b9}
  #cta-report .cta-h{font-family:'Manrope',Arial,Helvetica,sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:.5px;line-height:1.15;color:#ffffff}
  #cta-report .cta-p{font-family:'Arimo',sans-serif;font-size:1rem;font-weight:400;letter-spacing:-.5px;line-height:1.2;color:#ffffff}

/* ===== <style id="estilo-ligero"> (index.html línea 1789) ===== */
  /* ===== Estilo ligero GLOBAL (jul 2026) - delicado, simple, casi monocromático, SIN sombras =====
     Aplica a TODAS las vistas. La nav antracita, el formulario oscuro, el héroe del día,
     el CTA y la rueda quedan como están (decisiones aprobadas). */
  /* 1 - fuera las sombras, de raíz */
  :root{--card-sh:none!important;--card-sh-lift:none!important;--soft-sh:none!important;--pop-sh:none!important}
  .detailbox,.evpanel,#astro-info,.reportbox,.hoy-asp,.hoy-aspsum,.card,.esscard,.baldetail,.balcol,.people,.results,.posgrp,.syn-card,.icalbox,#eventpanel,.progpanel,#transit-box,#solar-box,#syn-box,.daycalc,.dc-change{box-shadow:none!important}
  body[data-view="hoy"] .hoy-aspsum,body[data-view="hoy"] .hoy-asp{box-shadow:none!important}
  /* 2 - tarjetas planas: línea fina sobre la crema, nada de bloques blancos pesados */
  /* .results queda fuera: es la lista de ciudades, flota sobre el formulario y necesita
     fondo propio, si no se lee el botón de abajo a través de ella */
  .card,.esscard,.detailbox,.evpanel,.baldetail,.people,.posgrp,.icalbox,#eventpanel,.progpanel,#transit-box,#solar-box,#syn-box,#astro-info,.reportbox,.syn-card,.daycalc,.hoy-aspsum,.hoy-asp{background:transparent!important;border:1px solid var(--line)!important}
  body[data-view="hoy"] .hoy-asp{border:none!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
  body[data-view="hoy"] .hoy-asps .hoy-asp:last-child{border-bottom:none!important}
  /* 3 - sin saltos de hover con peso */
  .card:hover,.detailbox:hover,.evpanel:hover,#astro-info:hover,.hoy-asp:hover,.esscard:hover{transform:none!important;box-shadow:none!important;background:transparent!important}
  #hero .chartfan .tab:hover{transform:none!important;box-shadow:none!important}
  #hero .chartfan .tab.active{box-shadow:none!important}
  /* 4 - títulos de sección de TODAS las vistas al rol rótulo */
  #belowzone h2{font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:uppercase!important;color:#70706a!important;border-bottom:1px solid var(--line);padding-bottom:12px;margin:54px 0 16px!important;text-align:left!important}
  /* 5 - bordes y esquinas discretos, trazo parejo */
  .chip,.pchip,.rchip{background:transparent!important;box-shadow:none!important;border:1px solid var(--line)!important}
  .tab.active{box-shadow:none!important}
  .cal-day.tod{box-shadow:inset 0 0 0 1px var(--muted)!important}
  /* 5b - tiles del día (Sol/Luna/Retrógrados) al estilo del Big 3: columnas con disco antracita */
  #hoy-toptiles .hoy-tiles{display:flex!important;gap:0!important;grid-template-columns:none!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0!important}
  .hoy-tile{flex:1;background:transparent!important;border:none!important;border-left:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:26px 14px 22px!important}
  .hoy-tile:first-child{border-left:none!important}
  .hoy-tile-ic{width:48px!important;height:48px!important;background:var(--text)!important;border-radius:50%!important;margin:0 auto 12px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .hoy-tile-lab{font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:uppercase!important;color:#70706a!important;margin-bottom:8px!important}
  .hoy-tile-val{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-size:1.25rem!important;font-weight:600!important;letter-spacing:.5px!important;color:#021212!important;line-height:1.15!important}
  .hoy-tile-sub{font-family:'Arimo',sans-serif!important;font-size:0.9375rem!important;font-weight:500!important;letter-spacing:-.5px!important;color:#70706a!important;margin-top:6px!important;text-transform:lowercase}
  .hoy-tile.retro .hoy-tile-val{font-size:1rem!important}
  @media(max-width:560px){#hoy-toptiles .hoy-tiles{flex-wrap:wrap}.hoy-tile{flex:1 1 100%;border-left:none!important;border-top:1px solid var(--line)!important}.hoy-tile:first-child{border-top:none!important}}
  /* 7 - afinado de auditoría (jul 2026): trazo parejo 1px, radios 4-5px, cero sombras */
  /* grupos de Posiciones: línea recta continua, sin radio, en TODAS las vistas */
  .posgrp{background:transparent!important;border:none!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
  .posgrp-sum,.postab,.postab th,.postab td{border-radius:0!important}
  .posgrp-n{border-radius:4px!important;border-color:var(--line)!important}
  .acg-tok-c,.acg-lens-panel,.acg-viewtoggle,.acg-modebtn,.acg-paranbtn,.acg-reportbtn,.sunmove-btn{border-width:1px!important}
  .hoy-hero-r .dc-nav{border-radius:5px!important}
  .syn-card:hover{transform:none!important}
  .syn-gly{border-width:1px!important}
  #hero .chartfan .cf-nm{box-shadow:none!important}
  /* Sin rayita bajo el header (Mafe, 21 jul 2026): la franja antracita ya separa sola. */
  #maqueta-header{box-shadow:none!important;border-bottom:none}
  /* Esquinas RECTAS en las dos franjas (Mafe, 21 jul 2026). El archivo tiene un reset
     global *{border-radius:5px!important} que se las redondeaba, y una franja de header
     va a filo con el borde de la pantalla. */
  #maqueta-header,#maqueta-header .mh-top,#maqueta-header .mh-top-in,
  #maqueta-header .mh-nav,#maqueta-header .mh-nav-in{border-radius:0!important}
  #cta-report .cta-soon{border-radius:4px!important}
  #daycalc .dc-row.dc-sel,.daycalc .dc-row.dc-sel{background:rgba(86,92,99,.12)!important}
  #daycalc .dc-row.dc-dim{opacity:.45}
  /* ===== 8 - TIPOGRAFÍA GLOBAL: los 4 roles en TODAS las vistas (jul 2026) ===== */
  /* rótulo — etiquetas de sección y kickers */
  .hoy-aspsum,.daycalc .dc-h,.esshead small,.detailbox .dhead small,#astro-info .ai-sub,.advgrp-t,.hoy-sky-do-k,.syn-names,.posgrp-sum .posgrp-t{font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:uppercase!important;color:#70706a!important;line-height:1.3!important}
  .hoy-sky-do-k{color:#b9b9b9!important}
  .advgrp-t{color:#ffffff!important}
  /* título — encabezados de lectura */
  .hoy-head,.esshead,.detailbox .dhead,#astro-info .ai-head,.syn-h,.baldetail .bd-h,.prog-head,.syn-leg-n,.evtitle,.hoy-chartdate,.syn-allh{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-size:1.25rem!important;font-weight:600!important;letter-spacing:.5px!important;line-height:1.15!important;color:#021212!important}
  /* En el titular del evento ("Mercurio está retrógrado en tu casa 10") solo
     "casa 10" va en gris; el resto queda en antracita y la lectura
     ("Es la casa de...") en negro (Mafe, 21 jul 2026) */
  .evtitle .evcasa{color:#70706a!important}
  /* El número de la casa NO va en Staatliches: en esa fuente el 1 es una barra
     igual a la I y "Casa 11" se leía "CASA II" como números romanos (queja real
     del lanzamiento, 24 jul 2026). El número va en Arimo negrita color vino,
     como el número grande de la izquierda de la tarjeta */
  .detailbox .dhead .dh-num{font-family:'Arimo',Arial,sans-serif!important;font-weight:700!important;font-size:1.125rem!important;letter-spacing:0!important;color:#3B161F!important}
  /* meta — datos secundarios */
  .hoy-orb,.detailbox .dhead .dsub,.dc-pos,.pt-deg,.cchip-meta,.baldet-inline .bd-x,.rnote,.balcap{font-family:'Arimo',sans-serif!important;font-size:0.9375rem!important;font-weight:500!important;letter-spacing:-.5px!important;text-transform:none!important;color:#70706a!important}
  .hoy-orb{font-size:0.8125rem!important}
  /* cuerpo — texto corrido y nombres de item */
  .hoy-asptxt,.detailbox .dtext,.esstext,#astro-info .ai-body,.baldetail .bd-m,.evpanel,.hoy-daymsg,.dc-nm,.pt-n,.syn-card p,.progpanel p{font-family:'Arimo',sans-serif!important;font-size:1rem!important;font-weight:400!important;letter-spacing:-.5px!important;line-height:1.35!important;color:#021212!important}
  .hoy-asptxt b,.pt-n b,.dc-nm b{font-weight:600!important}
  /* Los subtítulos del panel de progresada son <p> y el rodillo de arriba los volvía cuerpo.
     Son rótulos y van en negrita (Mafe, jul 17). */
  .progpanel .prog-eyebrow,.progpanel .prog-sech,.progpanel .prog-key-t{font-family:var(--f-title)!important;font-size:0.75rem!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:-.03em!important;line-height:1.3!important;color:#5c5c56!important}
  /* 10 - paneles de control desplegables (tránsitos y solar): pantalla limpia por defecto */
  /* El botón del desplegable ya dice el nombre del panel; el rótulo interno lo
     repetía justo debajo y confundía (Mafe, 21 jul 2026). Fuera el de adentro. */
  #transit-box>.tkicker,#solar-box>.tkicker{display:none!important}
  .panel-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:1px solid var(--line);border-radius:5px;padding:12px 16px;margin:10px 0 12px;cursor:pointer;font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#70706a}
  .panel-toggle:hover{border-color:var(--muted)}
  .panel-toggle .pt-ch{font-size:0.875rem;line-height:1;color:var(--muted)}
  .panel-collapsed{display:none!important}
  /* ===== La cabecera y su contenido son UNA tarjeta (Mafe, 27 jul 2026) =====
     Abiertos, el boton plegable y la caja se veian como dos tarjetas sueltas con un
     hueco en medio, «como algo ajeno». Ahora al abrir se sueldan: la cabecera pierde
     su borde de abajo y sus esquinas de abajo, la caja pierde su borde de arriba y
     sus esquinas de arriba, y el margen que los separaba se va. El !important de los
     radios es para ganarle a la regla global *{border-radius:5px!important}. */
  .panel-toggle[aria-expanded="true"]{margin-bottom:0!important;border-bottom:none;border-radius:5px 5px 0 0!important}
  #transit-box:not(.panel-collapsed),#solar-box:not(.panel-collapsed),#lunas-box:not(.panel-collapsed){
    margin-top:0!important;border-top:none!important;border-radius:0 0 5px 5px!important}
  #transit-box:not(.panel-collapsed){padding-top:4px}
  /* ===== El interior del momento, ordenado (Mafe, 27 jul 2026, «se siente muy
     desordenado») ===== En celular cada pieza iba por su lado: campos a la izquierda,
     flechas centradas, buscador centrado. Ahora todo cuelga de la misma columna.
     El lugar va a lo ancho, que una ciudad no cabe en media pantalla, y el buscador
     de eventos es una seccion con su rotulo alineado como FECHA y HORA, el selector
     a lo ancho y Anterior y Siguiente a partes iguales. */
  @media(max-width:680px){
    .tfields>div:nth-child(3){grid-column:1/-1}
    .tline-search{margin-top:20px}
    .tsearch-inline{justify-content:flex-start}
    .tsearch-inline .tsearch-lbl:first-child{flex:0 0 100%;text-align:left}
    #s-type{flex:1 1 100%;width:100%;min-width:0}
    #s-planet,#s-aspwrap select{flex:1;min-width:0}
    #s-ver{flex:1 1 100%}
    #s-prev,#s-next{flex:1 1 40%}
  }
  body:not([data-view="transit"]) #toggle-transit-box{display:none!important}
  body:not([data-view="solar"]) #toggle-solar-box{display:none!important}
  /* La hoja de las doce lunas vive SOLO en Tránsitos (Mafe, 22 jul 2026): sin esto se
     colaba también en Mi carta, porque el bloque cuelga fuera de #natal-only. */
  body:not([data-view="transit"]) #lunas-box,
  body:not([data-view="transit"]) #toggle-lunas-box{display:none!important}
  /* El párrafo heredaba el max-width de 660px de .ical-note y dejaba un hueco muerto
     a la derecha del recuadro, que mide 767 (Mafe lo cazó, 22 jul 2026). */
  #lunas-box .ical-note{max-width:none}
  /* Barra y recuadro se funden en UNA sola pieza cuando el panel está abierto: la barra
     pierde el redondeo de abajo y su margen, y el recuadro pierde el de arriba, así deja
     de leerse como dos bloques sueltos (Mafe, 22 jul 2026). Plegado, la barra recupera
     sus esquinas porque la regla cuelga del aria-expanded. */
  /* Los !important y el doble id no son capricho: hay que ganarle al reset global
     *{border-radius:5px!important} de la línea 961 y al #belowzone>*{margin-top:44px
     !important}, que si no dejan la barra y el recuadro separados y con esquinas. */
  #belowzone>#toggle-lunas-box[aria-expanded="true"]{margin-bottom:0!important;
    border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:0}
  #belowzone>#toggle-lunas-box[aria-expanded="true"]+#lunas-box{margin-top:0!important;
    border-top-left-radius:0!important;border-top-right-radius:0!important}
  .panel-toggle .pt-gift{width:15px;height:15px;margin-right:9px;vertical-align:-.2em}
  /* Círculo de espera, el indeterminado de Material: el aro gira mientras su trazo se
     estira y se encoge, que es lo que lo hace ver vivo y no un reloj de arena. */
  @keyframes lun-rot{to{transform:rotate(360deg)}}
  @keyframes lun-dash{
    0%{stroke-dasharray:14,124;stroke-dashoffset:0}
    50%{stroke-dasharray:90,124;stroke-dashoffset:-30}
    100%{stroke-dasharray:90,124;stroke-dashoffset:-116}}
  #lunas-box .lun-load{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 0 4px;color:var(--muted);text-align:left}
  #lunas-box .lun-msg{transition:opacity .22s ease}
  /* Puerta de correo */
  #lun-gate{margin:14px 0 2px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:5px;background:#fff}
  /* Staatliches viene condensada de fábrica y aquí se veía con las letras pegadas: se le
     abre el tracking a 1px, que es lo que toca hacer con esta fuente (Mafe, 22 jul 2026),
     nunca cambiarla por otra. */
  #lun-gate .lun-gate-t{font-family:var(--f-title);font-size:1.1875rem;letter-spacing:1px;color:#2B2E33;margin:0 0 7px;line-height:1.25}
  #lun-gate .lun-gate-n{font-size:0.8125rem;line-height:1.5;color:#70706a;margin:0 0 13px}
  #lun-gate .lun-gate-row{display:flex;gap:9px;flex-wrap:wrap}
  #lun-gate input{flex:1 1 220px;min-width:0;height:40px;padding:0 12px;font-family:var(--f-body);font-size:0.875rem;
    border:1px solid var(--line);border-radius:5px;background:#fff;color:#2B2E33}
  #lun-gate input:focus{outline:none;border-color:#3B161F;box-shadow:0 0 0 3px rgba(94,38,50,.14)}
  #lun-gate button{flex:0 0 auto;height:40px;padding:0 18px}
  /* El !important es para ganarle a .icalbox p{font-size:0.9375rem!important}, que le fija el
     tamaño a todos los párrafos de este recuadro por heredar esa clase. */
  #lun-gate .lun-gate-p{font-size:0.5625rem!important;line-height:1.55;color:#9a9790;margin:11px 0 0}
  #lun-gate .lun-gate-p a{color:#3B161F;text-decoration:underline;text-underline-offset:2px}
  /* Casilla de permiso: va vacía a propósito, porque el permiso tiene que ser algo que
     la persona hace a propósito y no algo que se da por hecho (Mafe, 22 jul 2026). */
  /* text-transform en none porque el archivo pone en mayúsculas TODAS las etiquetas, y
     esta es una frase, no un rótulo de campo, así que gritaba. */
  #lun-gate .lun-gate-ok{display:flex;align-items:flex-start;gap:9px;margin:13px 0 0;cursor:pointer;
    font-size:0.78125rem!important;line-height:1.45;color:#4a4a46;text-transform:none;letter-spacing:0}
  #lun-gate .lun-gate-ok input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:#3B161F;cursor:pointer}
  #lun-gate .lun-gate-err{font-size:0.78125rem;color:#3B161F;margin:10px 0 0}
  #lun-gate .lun-gate-err:empty{display:none}
  #lunas-box .lun-spin{width:21px;height:21px;flex:0 0 auto;color:#3B161F;animation:lun-rot 1.9s linear infinite}
  #lunas-box .lun-spin circle{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;animation:lun-dash 1.5s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){
    #lunas-box .lun-spin,#lunas-box .lun-spin circle{animation-duration:6s}}
  /* Sin línea bajo el título: llevaba un border-bottom blanco al 16% que sobre el
     antracita se leía como una sombra o transparencia rara (la cazó Mafe, 20 jul
     2026). La tarjeta va plana. */
  .fz-collapse{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;padding:2px 2px 12px;margin:0 0 14px;cursor:pointer;font-family:'Arimo',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0;text-transform:uppercase;color:#ffffff}
  .fz-collapse .pt-ch{font-size:0.875rem;line-height:1;color:#afafaf}
  /* descripciones bajo cada grupo de opciones avanzadas (fondo oscuro del form) */
  .advgrp-d{font-family:'Arimo',sans-serif;font-size:0.8125rem;font-weight:400;letter-spacing:-.3px;line-height:1.4;color:#afafaf;margin:0 0 8px}
  /* líneas de aspecto más vivas (toggle opt-vivid) */
  body.asp-vivid #chart .aspln{opacity:.92!important}
  /* descargar la rueda en PNG: debajo de la carta, solo donde hay rueda propia */
  #png-dl{display:none;margin:12px 0 0;justify-content:flex-end;gap:10px}
  /* En celular la rueda va centrada, sus botones también */
  @media(max-width:900px){#png-dl{justify-content:center}}
  body[data-view="natal"] #png-dl,
  body[data-view="transit"] #png-dl,
  body[data-view="solar"] #png-dl,
  body[data-view="prog"] #png-dl,
  body[data-view="hoy"] #png-dl,
  body[data-view="sinastria"] #png-dl,
  body[data-view="astro"].reloc-on #png-dl{display:flex}
  body[data-view="astro"].rl-side-open #png-dl{display:flex}
  .tpl-dl{display:inline-flex;align-items:center;gap:8px;width:auto;height:auto;border-radius:6px;padding:11px 20px;cursor:pointer;font-family:var(--f-title);font-size:0.8125rem;font-weight:600;letter-spacing:.01em;transition:opacity .15s,border-color .15s}
  .tpl-dl-png{background:#021212;color:#ffffff;border:1px solid #021212}
  .tpl-dl-pdf{background:#fff;color:#021212;border:1px solid var(--line)}
  .tpl-dl:hover{opacity:.88}
  .tpl-dl-pdf:hover{border-color:var(--muted)}
  .tpl-dl svg{width:17px;height:17px;flex:0 0 auto}
  .tpl-dl-down{display:none;width:15px;height:15px}
  .tpl-dl[disabled]{opacity:.5;cursor:default}
  body.dl-busy .tpl-dl{pointer-events:none}
  /* Panel de guardado en celular: la descarga directa no funciona dentro del
     navegador de Instagram (queja real del lanzamiento, 24 jul 2026), así que
     en pantallas táctiles el PNG se muestra en grande y la persona lo guarda
     dejando el dedo apretado, el gesto que funciona en todos los navegadores */
  #dl-overlay,.dlov-wrap{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;background:rgba(38,38,32,.62);padding:20px}
  #dl-overlay.on,.dlov-wrap.on{display:flex}
  #dl-overlay .dlov-card,.dlov-wrap .dlov-card{background:#fbf8f1;max-width:430px;width:100%;max-height:92vh;overflow:auto;padding:18px 18px 16px;text-align:center}
  #dl-overlay .dlov-k,.dlov-wrap .dlov-k{font-family:var(--f-title);font-size:1rem;letter-spacing:.5px;color:#021212;margin:0 0 7px}
  #dl-overlay .dlov-hint,.dlov-wrap .dlov-hint{font-family:var(--f-head);font-size:0.90625rem;line-height:1.5;color:#021212;margin:0 0 13px;text-align:left}
  #dl-overlay .dlov-img{display:block;width:100%;height:auto;margin:0 auto 14px;border:1px solid rgba(38,38,32,.14)}
  #dl-overlay .dlov-hint{text-align:center}
  #dl-overlay .dlov-x,.dlov-wrap .dlov-x{font-family:var(--f-title);font-size:0.9375rem;letter-spacing:1px;background:#3B161F;color:#ffffff;border:none;padding:10px 24px;cursor:pointer}
  /* La salida discreta del panel del siguiente paso. Sin caja, para que no compita
     con el botón de borgoña, que es el que lleva a los tránsitos. */
  #dl-siguiente .dlov-luego{display:block;margin:12px auto 0;background:none;border:none;padding:4px 8px;cursor:pointer;font-family:var(--f-head);font-size:0.84375rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
  /* 11 - esquinas cuidadas: la rejilla del formulario no puede reventar su columna,
     y el contenedor crema siempre deja aire para que ningún panel toque su esquina redondeada */
  .grid>*{min-width:0}
  .grid input,.grid select{min-width:0}
  .formzone{border-radius:5px!important}
  @media(max-width:900px){#belowzone{padding:12px!important}}
  /* 9 - accesibilidad: foco visible al navegar con teclado (no afecta clic ni táctil) */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px;border-radius:3px}
  #hero .chartfan .tab:focus-visible{outline-color:#ffffff!important}
  /* 6 - astrocartografía al mismo tono */
  .acg-tok{border:none!important;background:transparent!important}
  .acg-tok-c{background:transparent!important;box-shadow:none!important}
  .acg-tok:hover .acg-tok-c{transform:none!important}
  .acg-tok.on .acg-tok-c{box-shadow:none!important}
  /* Sin línea bajo el título (la sombrita, la cazó Mafe el 20 jul 2026). */
  .acg-picktitle{font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:0!important;text-transform:uppercase!important;color:#70706a!important;margin:34px 0 16px!important}
  .acg-lensbtn{background:transparent!important;border-width:1px!important;box-shadow:none!important}
  .acg-lab-paran.on{box-shadow:none!important;border:1px solid #33302b!important}
  /* créditos del mapa (Leaflet/OSM): fuera el azul de fábrica */
  .leaflet-container a,.leaflet-control-attribution,.leaflet-control-attribution a{color:#70706a!important}
  .maplibregl-ctrl-attrib a{color:#70706a!important}

/* ===== <style sin id> (index.html línea 2188) ===== */
  #maqueta-header{position:sticky;top:0;z-index:9999;font-family:var(--f-title);
    box-shadow:0 3px 16px rgba(30,30,25,.12)}
  #maqueta-header .mh-top{background:#f5f3f0}
  #maqueta-header .mh-top-in{max-width:1032px;margin:0 auto;padding:27px 26px;min-height:93px;box-sizing:border-box;
    display:flex;align-items:center;justify-content:space-between;gap:20px}
  /* IGUAL QUE EL RESTO DEL SITIO (Mafe, 21 ago 2026, «que TODO fuera igual»). La carta
     llevaba el nombre a 2.5rem en peso fino y sin caja alta, o sea distinto a las otras
     55 paginas. Ahora usa la misma medida que /maqueta.css. */
  #maqueta-header .mh-logo{font-family:var(--f-title);font-size:1.5rem;font-weight:800;text-transform:uppercase;
    color:#021212;letter-spacing:-.3px!important;white-space:nowrap;text-decoration:none;line-height:1.1;margin-right:auto}
  #maqueta-header .mh-logo .mh-demafe{font-weight:500}
  #maqueta-header .mh-tag{display:none!important}
  #maqueta-header .mh-logo .mh-quien{font-style:normal;display:inline-block;
    transform:skewX(-9deg);transform-origin:bottom left;margin-left:.12em;
    color:inherit;opacity:.62}
  #maqueta-header .mh-search{display:none;align-items:center;gap:0;width:min(320px,42vw)}
  #maqueta-header .mh-search input{height:40px;border:none;border-radius:5px 0 0 5px;background:#e7e4dc;
    color:#021212;font-size:0.8125rem;padding:0 14px;width:100%;outline:none}
  #maqueta-header .mh-search input::placeholder{color:#9a978d}
  #maqueta-header .mh-search button{height:40px;width:46px;flex:0 0 46px;border:none;border-radius:0 5px 5px 0;
    background:#021212;color:#f0eee8;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
  #maqueta-header .mh-nav{background:#021212;display:none}
  #maqueta-header .mh-tag{font-family:var(--f-title);font-size:1.1875rem;font-weight:400;
    letter-spacing:0;color:#3B161F;white-space:nowrap;margin-left:14px;margin-right:auto;line-height:.8}
  @media(max-width:900px){#maqueta-header .mh-tag{display:none}}
  /* Links al sitio dentro de la barra lateral, debajo de las vistas de la carta. */
  /* Mismo recuadro que las pestañas de la barra (Mafe, 22 jul 2026): filo blanco al 14%,
     radio 5, relleno 12/14 y letra de 14 en 600. Copiado de .tab.tab-main leyendo sus
     valores en el navegador, para que no queden dos cajas parecidas pero distintas.
     El sangrado de 51px alinea el texto con el de las pestañas, que llevan icono delante. */
  #hero .rail-link{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;
    font-family:var(--f-body);font-size:0.875rem;font-weight:600;color:#ffffff;
    text-decoration:none;text-align:left;padding:12px 14px;
    background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:5px;
    transition:background .15s,border-color .15s}
  #hero .rail-link:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
  /* El rótulo y el icono heredarían el antracita de .chartfan .cf-nm, que sobre este
     fondo oscuro no se ve. Las reglas que los aclaran solo apuntan a .tab, así que aquí
     se repiten para .rail-link, con el mismo dorado de los iconos de la barra. */
  #hero .rail-link .cf-nm{color:#ffffff!important;background:transparent!important;
    box-shadow:none!important;font-family:var(--f-body);font-size:0.875rem;font-weight:600}
  #hero .rail-link .cf-emb{color:#cdbb8b}
  /* La pastilla marfil de la barra lateral. Es la fila que canta, la unica puerta
     que lleva al negocio, igual que en la franja del celular. La llevaba «Reservar
     consulta» (Mafe, 27 jul 2026) y desde el 19 ago 2026 la lleva «Consultas», que
     al apagarse la otra se quedo sola. Texto e icono en el mismo vino oscuro de la
     franja de abajo. Las dos clases comparten regla a proposito, para que la fila
     apagada vuelva bien pintada el dia que se encienda. */
  #hero .rail-link.rail-destacado,
  #hero .rail-link.rail-reservar{background:#fbf8f1;border-color:#fbf8f1}
  #hero .rail-link.rail-destacado .cf-nm,
  #hero .rail-link.rail-reservar .cf-nm{color:#2C1017!important}
  #hero .rail-link.rail-destacado .cf-emb,
  #hero .rail-link.rail-reservar .cf-emb{color:#2C1017}
  #hero .rail-link.rail-destacado:hover,
  #hero .rail-link.rail-reservar:hover{background:#ffffff;border-color:#ffffff}
  #maqueta-header .mh-nav-in{max-width:1032px;margin:0 auto;padding:44px 26px;min-height:124px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  #maqueta-header .mh-nav-in a{color:#fff;text-decoration:none;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:0.875rem;font-weight:700;
    letter-spacing:normal;text-transform:uppercase;white-space:nowrap;transition:opacity .15s}
  #maqueta-header .mh-nav-in a:hover{opacity:.7}
  #maqueta-header .mh-nav-in a.active{border-bottom:2px solid #f7f4ed;padding-bottom:2px}
  #maqueta-header .mh-cart{display:inline-flex;align-items:center;gap:6px;color:#ffffff;font-family:var(--f-head)}
  #maqueta-header .mh-cart svg{display:block}
  #maqueta-header .mh-right{display:flex;align-items:center;gap:10px;min-width:0}
  #maqueta-header .mh-entrar{flex:0 0 auto;font-family:var(--f-title);font-size:0.9375rem;font-weight:600;letter-spacing:.5px;color:#021212;text-decoration:none;padding:0 8px;white-space:nowrap;border-radius:0!important}
  #maqueta-header .mh-entrar:hover{text-decoration:underline;text-underline-offset:4px}
  /* En celular la cabecera es oscura y la puerta ya está en el menú de la hamburguesa */
  @media(max-width:900px){#maqueta-header .mh-entrar{display:none}}
  /* APAGADA por Mafe el 24 ago 2026: fuera el círculo de la derecha en todas las
     cabeceras. El markup y el JS se quedan por si algún día vuelve: para revivirla,
     devolver display:flex. En celular ya estaba apagada desde el 27 jul (la barra
     de abajo la sustituye). */
  #maqueta-header .mh-carta{position:relative;display:none}
  #maqueta-header .mh-carta-btn{display:flex;align-items:center;height:38px;flex:0 0 auto;border:none;border-radius:999px!important;background:#3B161F;color:#ffffff;cursor:pointer;padding:0;overflow:hidden}
  #maqueta-header .mh-carta-lbl{max-width:0;opacity:0;white-space:nowrap;font-family:var(--f-title);font-size:0.9375rem;font-weight:600;letter-spacing:1px;margin:0;transition:max-width .28s ease,opacity .2s ease,margin .28s ease}
  #maqueta-header .mh-carta-ic{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center}
  #maqueta-header .mh-carta-ic svg{display:block}
  #maqueta-header .mh-carta.open .mh-carta-lbl{max-width:96px!important;opacity:1!important;margin-left:16px!important}
  @media(hover:hover){#maqueta-header .mh-carta:hover .mh-carta-lbl{max-width:96px!important;opacity:1!important;margin-left:16px!important}}
  #maqueta-header .mh-carta-drop{position:absolute;top:calc(100% + 9px);right:0;z-index:10001;
    min-width:216px;background:#fff;border:1px solid rgba(38,38,32,.12);border-radius:5px!important;
    box-shadow:0 16px 38px rgba(30,30,25,.24);padding:7px;
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
    transition:opacity .18s ease,transform .2s ease,visibility .2s}
  #maqueta-header .mh-carta.open .mh-carta-drop{opacity:1;visibility:visible;transform:none}
  #maqueta-header .mh-carta-drop::before{content:"Tus cartas";display:block;font-family:var(--f-head);
    font-size:0.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9a978d;padding:8px 12px 7px}
  #maqueta-header .mh-cv{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;
    border:none;border-radius:5px!important;color:#021212;font-family:var(--f-title);font-size:1rem;
    font-weight:600;letter-spacing:1px;line-height:1.2;padding:11px 13px;cursor:pointer;white-space:nowrap}
  #maqueta-header .mh-cv:hover{background:#f4efe6}
  #maqueta-header .mh-cv.active{background:#3B161F;color:#ffffff}
  #maqueta-header .mh-cv-dot{flex:0 0 auto;width:6px;height:6px;border-radius:999px!important;background:#3B161F}
  #maqueta-header .mh-cv.active .mh-cv-dot{background:#fbf8f1}
  #maqueta-header .mh-cv-head{font-family:var(--f-head);font-size:0.625rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:#9a978d;padding:14px 12px 7px;
    margin-top:6px;border-top:1px solid rgba(38,38,32,.1)}
  #maqueta-header .mh-cv-out{text-decoration:none}
  #maqueta-header .mh-cv-out .mh-cv-dot{background:transparent;box-shadow:inset 0 0 0 1.5px #3B161F}
  @media(max-width:720px){
    #maqueta-header .mh-top-in{flex-direction:column;gap:12px}
    #maqueta-header .mh-search{width:100%}
    #maqueta-header .mh-nav-in{gap:16px;padding:10px 16px}
  }
  /* En escritorio la hamburguesa NO sale (Mafe, 22 ago 2026): el panel que abre (.mh-menu)
     está apagado por encima de 900 px y el botón quedaba ahí sin hacer nada. La enciende
     solo el bloque de celular de más abajo. */
  #maqueta-header .mh-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;background:none;border:none;cursor:pointer;color:#021212;padding:0}
  #maqueta-header .mh-burger-bars{display:block;position:relative;width:23px;height:15px}
  #maqueta-header .mh-burger-bars span{position:absolute;left:0;width:100%;height:2px;background:#021212;border-radius:5px;transition:transform .25s ease,opacity .2s ease;transform-origin:center}
  #maqueta-header .mh-burger-bars span:nth-child(1){top:0}
  #maqueta-header .mh-burger-bars span:nth-child(2){top:6.5px}
  #maqueta-header .mh-burger-bars span:nth-child(3){top:13px}
  #maqueta-header .mh-burger[aria-expanded="true"] .mh-burger-bars span:nth-child(1){top:6.5px;transform:rotate(45deg)}
  #maqueta-header .mh-burger[aria-expanded="true"] .mh-burger-bars span:nth-child(2){opacity:0}
  #maqueta-header .mh-burger[aria-expanded="true"] .mh-burger-bars span:nth-child(3){top:6.5px;transform:rotate(-45deg)}
  #maqueta-header .mh-menu{position:fixed;inset:0;z-index:10000;background:rgba(18,18,16,.55)}
  #maqueta-header .mh-menu[hidden]{display:none}
  #maqueta-header .mh-menu-close{position:absolute;top:12px;left:8px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#fff;cursor:pointer;padding:0}
  #maqueta-header .mh-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(82vw,430px);background:#021212;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:8px;padding-bottom:46px;animation:mh-slide .26s ease}
  /* La fila de «Iniciar sesión»: icono de persona a la izquierda del texto, el resto
     igual que cualquier fila del menú (Mafe, 22 ago 2026). */
  #maqueta-header .mh-wx-item.mh-wx-sesion{justify-content:flex-start;gap:12px}
  #maqueta-header .mh-wx-sesion svg{width:22px;height:22px;flex:0 0 22px;display:block}
  @keyframes mh-slide{from{transform:translateX(28%);opacity:.4}to{transform:none;opacity:1}}
  #maqueta-header .mh-menu-title{display:block;text-align:center;color:#fff;font-family:var(--f-title);font-size:1rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:30px 16px 24px}
  #maqueta-header .mh-wx-list{border-top:1px solid rgba(255,255,255,.85)}
  #maqueta-header .mh-wx-item,#maqueta-header .mh-menu-view{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.85);border-radius:0!important;color:#fff;font-family:var(--f-title);font-size:0.84375rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;line-height:1.35;padding:17px 20px 17px 34px;cursor:pointer}
  #maqueta-header .mh-wx-item:active,#maqueta-header .mh-menu-view:active{background:rgba(255,255,255,.08)}
  #maqueta-header .mh-wx-item.current,#maqueta-header .mh-menu-view.active{background:#fbf8f1;color:#021212}
  #maqueta-header .mh-wx-arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;transition:transform .2s ease}
  #maqueta-header .mh-wx-arrow svg{display:block;fill:currentColor}
  #maqueta-header .mh-wx-exp.open .mh-wx-arrow{transform:rotate(180deg)}
  #maqueta-header .mh-wx-sub{display:none}
  #maqueta-header .mh-wx-exp.open .mh-wx-sub{display:block}
  #maqueta-header .mh-wx-exp.open>.mh-wx-toggle{border-bottom-color:rgba(255,255,255,.3)}
  #maqueta-header .mh-wx-sub .mh-wx-item{font-weight:500;font-size:0.78125rem;padding:14px 20px 14px 48px;border-bottom-color:rgba(255,255,255,.3)}
  #maqueta-header .mh-wx-sub .mh-wx-item:last-child{border-bottom-color:rgba(255,255,255,.85)}
  #maqueta-header .mh-wx-head{color:#a6a6a6;font-family:var(--f-head);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:26px 20px 10px 34px}
  @media(max-width:900px){
    #maqueta-header .mh-search{display:none}
    #maqueta-header .mh-nav{display:none}
    #maqueta-header .mh-top{background:#021212}
    #maqueta-header .mh-top-in{flex-direction:row;align-items:center;gap:12px;padding:14px 16px}
    #maqueta-header .mh-logo{color:#ffffff;font-size:1.8125rem;letter-spacing:.02em;
      flex:1 1 auto;text-align:left}
    /* La hamburguesa, ENCENDIDA solo en celular (Mafe, 22 ago 2026). En escritorio va
       apagada (regla base más arriba) porque el panel .mh-menu no existe por encima de
       900 px y el botón salía vacío. Para apagarla también aquí: display:none. */
    #maqueta-header .mh-burger{display:inline-flex;flex:0 0 40px;width:40px;height:40px;color:#ffffff}
    #maqueta-header .mh-burger-bars{width:28px;height:17px}
    #maqueta-header .mh-burger-bars span{height:2.6px;background:#fbf8f1}
    #maqueta-header .mh-burger-bars span:nth-child(2){top:7.2px}
    #maqueta-header .mh-burger-bars span:nth-child(3){top:14.4px}
    #hero{display:none!important}
    /* En celular la ruedita vino es la ÚNICA puerta a la carta (la hamburguesa
       está escondida), y sola no dice nada: una clienta del lanzamiento no
       encontraba dónde ver su carta (24 jul 2026). El pill va siempre abierto
       con su etiqueta "Mi carta" a la vista; el toque sigue abriendo la lista. */
    #maqueta-header .mh-carta-lbl{max-width:96px;opacity:1;margin-left:16px}
  }
  @media(min-width:901px){
    #maqueta-header .mh-menu{display:none!important}
  }

/* ===== <style id="cinta-evento"> (index.html línea 2505) ===== */
  /* La zona pinta el fondo y la equis vive fuera del botón grande, que un botón
     dentro de otro botón es HTML inválido y en celular se pelean por el toque. */
  .evcinta-zona{display:none;align-items:stretch;background:var(--accent);color:#fff;border-radius:0!important}
  .evcinta-zona.on{display:flex}
  /* Los !important de los radios son para ganarle al reset global *{border-radius:5px
     !important} de más arriba, que si no le redondea las esquinas a una franja que va
     a filo de pantalla y le corta el círculo al glifo. Es el mismo caso del header. */
  .evcinta{display:flex;flex:1;min-width:0;align-items:center;gap:11px;text-align:left;
    background:transparent;color:#fff;border:none;padding:11px 4px 11px 15px;
    font-family:var(--f-head);letter-spacing:-.5px;border-radius:0!important}
  .evcinta-glifo{width:26px;height:26px;flex:none;border-radius:50%!important;border:1px solid rgba(255,255,255,.45);
    display:flex;align-items:center;justify-content:center}
  .evcinta-glifo svg{width:15px;height:15px;display:block}
  .evcinta-txt{flex:1;min-width:0}
  /* UNA LÍNEA CADA UNO, y esto no es cosmética (Mafe lo cazó en una captura el 29 jul
     2026, con «Venus se estaciona retrógrado en Escorpio, el 3 de octubre»). La franja
     no crece de alto aunque el contenido pida más, así que un título de dos líneas
     empujaba el subtítulo fuera y lo dejaba partido por la mitad. En vez de pelearse
     con la altura, el texto se reparte: el evento arriba y el cuándo al principio del
     subtítulo, que es donde sobra sitio. Si aun así no cabe, se recorta con puntos
     suspensivos, que es feo pero legible, y nunca corta una letra por la mitad.
     Los !important son para ganarle a las reglas de tipografía de más abajo. */
  .evcinta-tit{display:block;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    font-family:var(--f-title);font-size:0.9375rem;letter-spacing:.02em;line-height:1.3;font-weight:400}
  .evcinta-sub{display:block;font-size:0.75rem;opacity:.82;line-height:1.35;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .evcinta-fl{width:16px;height:16px;flex:none;opacity:.9}
  .evcinta-x{width:38px;flex:none;background:transparent;color:#fff;opacity:.55;
    border:none;padding:0;display:flex;align-items:center;justify-content:center;border-radius:0!important}
  .evcinta-x svg{width:11px;height:11px}
  .evcinta-x:hover{opacity:1}
  @media(max-width:420px){.evcinta{padding:10px 2px 10px 12px;gap:9px}.evcinta-tit{font-size:0.875rem}.evcinta-x{width:34px}}
  /* El movimiento elegido: la cinta se queda quieta y solo se mueven la flecha,
     que da dos empujoncitos, y el anillo del glifo. */
  @keyframes evcinta-empuja{0%,72%,100%{transform:translateX(0)}80%{transform:translateX(4px)}88%{transform:translateX(0)}94%{transform:translateX(3px)}}
  @keyframes evcinta-anillo{0%,70%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}80%{box-shadow:0 0 0 5px rgba(255,255,255,.18)}92%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
  .evcinta-zona.on .evcinta-fl{animation:evcinta-empuja 4.5s ease-in-out infinite}
  .evcinta-zona.on .evcinta-glifo{animation:evcinta-anillo 4.5s ease-in-out infinite}
  /* Obligatorio: a quien tiene el sistema en «menos movimiento» esto le marea de verdad. */
  @media(prefers-reduced-motion:reduce){
    .evcinta-zona.on .evcinta-fl,.evcinta-zona.on .evcinta-glifo{animation:none}
  }

/* ===== <style id="hero-eclipse-css"> (index.html línea 2583) ===== */
  #hero-eclipse{position:relative;overflow:hidden;border-radius:0!important}
  #hero-eclipse video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0!important}
  /* El velo es tinta plana translúcida, nada de degradados, que están prohibidos.
     Sin él, el blanco del texto no aguanta sobre el cielo lila del video. */
  /* El radius 0 del velo no es adorno: el reset global *{border-radius:5px!important}
     le curvaba las esquinas y por ahí asomaba el video sin oscurecer, la esquinita
     que Mafe cazó el 24 ago 2026. */
  .hecl-velo{position:absolute;inset:0;background:rgba(2,18,18,.38);border-radius:0!important}
  .hecl-in{position:relative;max-width:1140px;margin:0 auto;padding:96px 22px 34px;color:#fff}
  .hecl-k{font-family:var(--f-title);font-size:0.71875rem;font-weight:700;letter-spacing:.17em;
    text-transform:uppercase;background:var(--accent);color:#fff;display:inline-block;
    padding:6px 13px;border-radius:5px;margin:0}
  /* El text-transform:none y el !important del tamaño le ganan a las reglas globales
     de tipografía de la carta, que uppercasean los h2 y los encogen en celular. */
  .hecl-tit{font-family:var(--f-title);font-weight:600;font-size:clamp(30px,5.4vw,54px)!important;
    letter-spacing:-.02em;line-height:1.05;margin:14px 0 18px;color:#fff;border:none;padding:0;
    text-transform:none!important}
  .hecl-pie{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
  .hecl-reloj{display:grid;grid-template-columns:repeat(4,minmax(64px,86px));gap:8px}
  .hecl-caja{background:rgba(2,18,18,.48);padding:10px 4px 9px;text-align:center;border-radius:5px}
  .hecl-n{display:block;font-family:var(--f-title);font-size:clamp(24px,3.4vw,34px);line-height:1;
    color:#fff;font-variant-numeric:tabular-nums}
  .hecl-u{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:#e6e2da;margin-top:5px}
  .hecl-cta{display:inline-block;background:var(--paper,#FBF8F1);color:var(--ink,#021212);
    font-family:var(--f-title);font-weight:700;font-size:0.9375rem;padding:13px 22px;
    border-radius:5px;text-decoration:none}
  /* La línea de «En tu hora local cae el...» la quitó Mafe el 24 ago 2026, el hero
     llevaba demasiado. El elemento se queda en el HTML escondido porque el motor de
     la cuenta atrás rellena [data-ca2-pie] en todas las cajas y sin él se rompe. */
  .hecl-cuando{display:none}
  .hecl-mas{margin:6px 0 0;font-size:0.875rem}
  .hecl-mas a{color:#fff;font-weight:700;text-decoration:none;
    border-bottom:2px solid rgba(251,248,241,.5);padding-bottom:2px;border-radius:0!important}
  /* Mientras el hero está puesto, la cinta del header se calla, que anuncia lo mismo */
  html.con-hero-eclipse .evcinta-zona{display:none!important}
  @media(max-width:560px){
    .hecl-in{padding:72px 16px 26px}
    .hecl-pie{gap:14px}
    .hecl-reloj{width:100%;grid-template-columns:repeat(4,1fr)}
    .hecl-cta{width:100%;text-align:center}
  }

/* ===== <style sin id> (index.html línea 2838) ===== */
    /* .formzone es la tarjeta antracita, así que el título va en la variante de
       fondo oscuro del rol: beige marfil, no el antracita del fondo claro, que
       ahí dentro quedaría invisible. */
    .formzone .pagetitle{font-family:var(--f-title);font-size:1.25rem;font-weight:600;
      letter-spacing:.5px;line-height:1.15;color:#fbf8f1;
      text-align:left;margin:0 0 18px}
    @media(max-width:900px){.formzone .pagetitle{margin:0 0 14px}}
  

/* ===== <style sin id> (index.html línea 2934) ===== */
      .icalbox{margin-top:28px;padding:16px 18px 18px;background:var(--t-band,#eef2ef);border:1px solid var(--t-line,#e2e3de);border-radius:5px}
      .icalbox .ical-note{font-size:0.8125rem;color:#70706a;line-height:1.5;margin:4px 0 8px;max-width:660px}
      .ical-more{margin:0 0 12px}
      .ical-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:0.75rem;font-weight:600;color:var(--gold-deep)}
      .ical-more>summary::-webkit-details-marker{display:none}
      .ical-more>summary::after{content:'';width:11px;height:11px;display:inline-block;background-color:currentColor;-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .18s}
      .ical-more[open]>summary::after{transform:rotate(180deg)}
      .ical-more-body{margin-top:8px}
      .ical-more-body p{font-size:0.8125rem;color:#70706a;line-height:1.5;margin:0 0 8px;max-width:660px}
      .ical-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
      .ical-when{display:flex;gap:8px;align-items:center;flex:0 0 auto}
      #ical-month{width:auto;min-width:130px;flex:0 0 auto}
      #ical-year{width:82px;flex:0 0 auto}
      .ical-tip{font-size:0.75rem;color:#85827b;margin:8px 0 0;line-height:1.45}
      #ical-status{text-align:left;margin-top:8px}
    

/* ===== <style sin id> (index.html línea 2984) ===== */
    /* Título de la sección, arriba de todo, con la ropa de los títulos de la carta */
    .syn-top-title{font-family:var(--f-title);font-size:1.5rem;font-weight:600;letter-spacing:.5px;line-height:1.1;color:var(--text);margin:0 0 12px;border-bottom:none!important;padding-bottom:0!important}
    .syn-intro{font-size:0.875rem;line-height:1.55;color:var(--muted);margin:2px 0 12px}
    #syn-picker{gap:8px}
    /* Todo el formulario de sinastría va en un desplegable para que no ocupe
       tanto espacio (Mafe, 20 jul 2026). El título hace de fila que abre y cierra,
       con la misma ropa del tkicker y el chevron del desplegable de coordenadas. */
    /* El rótulo va a la izquierda y con la misma ropa que el nombre del chip de
       Persona A: Staatliches 16, peso 600 (Mafe, 20 jul 2026). */
    /* Persona B va en su propio recuadro, la misma tarjeta que Persona A
       (Mafe, 21 jul 2026): antes era texto suelto y no se entendía. */
    /* El recuadro de Persona B va del color del anillo externo de la rueda, que
       es donde viven sus planetas (Mafe, 21 jul 2026). Si ella recolorea el
       anillo con su editor, la tarjeta lo sigue. */
    #syn-det>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--f-title);font-size:1rem;letter-spacing:.5px;text-transform:uppercase;color:var(--label);font-weight:600;min-height:48px;padding:12px 16px;background:var(--ch-transitband,#e9ece0);border:1px solid var(--line);border-radius:5px;box-shadow:var(--soft-sh)}
    /* Nombre arriba y datos de nacimiento debajo, el mismo par de líneas que la
       tarjeta de Persona A (Mafe, 21 jul 2026) */
    .synd-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;overflow:hidden}
    .synd-txt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .synd-meta{font-family:var(--f-head);font-size:0.75rem;font-weight:400;color:#70706a;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    body[data-view="sinastria"] #cchip-name::before{content:'Persona A: '}
    #syn-det>summary::-webkit-details-marker{display:none}
    #syn-det>summary::after{content:'';width:11px;height:11px;background-color:var(--muted);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .18s}
    #syn-det[open]>summary::after{transform:rotate(180deg)}
    #syn-det[open]>summary{margin-bottom:6px}
    /* Menos cajas que parecen botones dentro del recuadro (Mafe, 20 jul 2026):
       el desplegable de coordenadas va como texto fino, sin borde punteado, y
       los dos botones reales comparten una fila. */
    #syn-box .coords{border:none;background:transparent}
    #syn-box .coords summary{padding:9px 2px;width:max-content}
    #syn-box .coords-grid{padding:2px 2px 12px}
    #syn-box .formactions{align-items:center}
    #syn-box .formactions #syn-go{width:auto;flex:0 0 auto;min-width:230px;border-radius:5px}
    @media(max-width:560px){#syn-box .formactions #syn-go{flex:1 1 100%;width:100%}}
    #syn-aspects{margin-top:26px}
    .syn-h{font-family:var(--f-head);font-size:1.4375rem;letter-spacing:-.02em;color:var(--text);margin:6px 0 6px;text-align:center}
    .syn-lead{max-width:600px;margin:0 auto 18px;text-align:center;font-size:0.875rem;line-height:1.6;color:var(--muted)}
    .syn-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 26px;max-width:720px}
    .syn-leg{display:flex;align-items:center;gap:11px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:10px 16px 10px 13px}
    .syn-leg-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
    .syn-leg-n{font-family:var(--f-head);font-size:1.4375rem;font-weight:700;color:var(--text);line-height:1}
    /* Dos columnas iguales: la tarjeta de cada persona va del mismo tamaño,
       ninguna más grande que la otra (Mafe, 21 jul 2026) */
    .syn-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:-2px auto 4px;max-width:640px}
    .syn-who-chip{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:8px 15px 8px 12px}
    .syn-who-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.1)}
    .syn-who-tx{display:flex;flex-direction:column;line-height:1.2}
    .syn-who-nm{font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--text)}
    .syn-who-rol{font-size:0.6875rem;color:var(--muted);letter-spacing:.01em}
    .syn-leg-lb{display:flex;flex-direction:column;line-height:1.25}
    .syn-leg-lb b{font-size:0.8125rem;font-weight:700;color:var(--text)}
    .syn-leg-lb small{font-size:0.6875rem;color:var(--muted)}
    .syn-group{margin:0 0 26px}
    /* Sin las rayitas finas: ni bajo el título del grupo ni sobre el pie de las
       tarjetas (Mafe las mandó quitar, 20 jul 2026). */
    .syn-group-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--text);margin:0 0 14px}
    .syn-group-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
    .syn-group-n{font-size:0.75rem;font-weight:700;color:#fff;background:var(--gold-deep);border-radius:5px;padding:2px 10px;line-height:1.5}
    .syn-group-sub{font-weight:400;font-size:0.8125rem;color:var(--muted)}
    /* Bandas de la propuesta C (Mafe, 20 jul 2026) */
    .synb-list{display:flex;flex-direction:column;gap:16px}
    /* El fondo lo decide el tipo de lazo (Mafe, 20 jul 2026): fluye en blanco,
       reta en rojo suave de vino, mezcla en marfil. */
    .synb{display:grid;grid-template-columns:72px 1fr 52px;gap:20px;align-items:center;border-radius:5px;padding:22px 20px}
    .synb-flow{background:#fff;border:1px solid var(--line)}
    .synb-ten{background:#f6e9e9}
    .synb-fus{background:var(--paper)}
    .synb-conn{display:flex;flex-direction:column;align-items:center;gap:7px}
    .synb-g{display:inline-flex}
    .synb-sym{width:30px;height:30px;border-radius:50%!important;background:var(--gold-deep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:0.875rem}
    .synb-ten .synb-sym{background:#021212}
    .synb-fus .synb-sym{background:#b4b2a9;color:#021212}
    .synb-body{min-width:0}
    /* Espaciado de +0.5 pedido por Mafe (21 jul 2026): con el negativo las
       letras de "Conjunción - muy fuerte" quedaban muy pegadas */
    .synb-eyebrow{font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep);margin:0 0 4px}
    .synb-title{font-family:var(--f-title);font-size:1.3125rem;font-weight:400;letter-spacing:.2px;line-height:1.15;margin:0;text-wrap:balance}
    .synb-text{font-size:0.84375rem;line-height:1.65;color:#4a4e54;margin:8px 0 0}
    .synb-side{display:flex;flex-direction:column;align-items:center;gap:10px}
    .synb-num{font-family:var(--f-title);font-size:1.625rem;color:var(--line)}
    .synb-ten .synb-num{color:#d8b9b9}
    .synb-vert{font-family:var(--f-title);font-size:0.875rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-deep);writing-mode:vertical-rl}
    @media(max-width:640px){.synb{grid-template-columns:52px 1fr;gap:14px;padding:16px 14px}.synb-side{display:none}}
    .syn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:12px}
    .syn-card{position:relative;overflow:hidden;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:14px 15px 12px 18px;transition:transform .15s ease,box-shadow .15s ease}
    .syn-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
    .syn-card:hover{transform:translateY(-2px);box-shadow:var(--card-sh-lift)}
    .syn-flow::before{background:#021212}.syn-fus::before{background:#b4b2a9}.syn-ten::before{background:#3B161F}
    .syn-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
    .syn-pair{display:flex;align-items:center;gap:9px}
    .syn-gly{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
    .syn-aspj{font-size:0.75rem;font-weight:600;line-height:1;flex:0 0 auto}
    .syn-pill{font-size:0.6875rem;font-weight:700;padding:3px 11px;border-radius:5px;white-space:nowrap}
    .syn-pill-flow{background:rgba(125,150,143,.18);color:#4f6b63}
    .syn-pill-fus{background:rgba(111,108,67,.16);color:#5c5a34}
    .syn-pill-ten{background:rgba(192,57,43,.12);color:#b03a2e}
    .syn-names{font-family:var(--f-head);font-size:0.8125rem;font-weight:700;margin:0 0 6px;line-height:1.35}
    .syn-text{font-size:0.875rem;line-height:1.6;color:var(--text);margin:0 0 11px}
    .syn-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:4px}
    .syn-nat{font-size:0.625rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-deep)}
    .syn-str{display:flex;align-items:center;gap:6px;font-size:0.6875rem;color:var(--muted)}
    .syn-dots{letter-spacing:.15em;color:var(--gold);font-size:0.625rem}
    .syn-thermo{display:flex;gap:3px;height:7px;max-width:560px;margin:8px auto 9px;box-shadow:none}
    .syn-thermo-seg{border-radius:5px;min-width:7px}
    .syn-thermo-lbl{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin:0 0 14px;font-size:0.71875rem;color:var(--muted)}
    .syn-thermo-lbl i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
    .syn-verdict{text-align:center;max-width:520px;margin:0 auto 24px;font-size:0.875rem;line-height:1.55;color:var(--text)}
    .syn-map-who{display:flex;justify-content:space-between;align-items:center;max-width:600px;margin:0 auto 2px;padding:0 8px}
    .syn-map-av{display:flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--text)}
    .syn-map-av-r{flex-direction:row-reverse;text-align:right}
    .syn-map-av small{display:block;font-family:var(--f-head);font-size:0.6875rem;font-weight:400;color:var(--muted)}
    .syn-map-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
    .syn-map-wrap{max-width:620px;margin:0 auto}
    .syn-mapsvg{display:block}
    .syn-thr path:first-child{transition:stroke-width .12s ease}
    .syn-thr:hover path:first-child{stroke-width:6}
    .syn-maplbl{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin:4px 0 16px;font-size:0.75rem;color:var(--muted)}
    .syn-maplbl span{display:flex;align-items:center;gap:6px}
    .syn-maplbl i{width:18px;height:4px;border-radius:5px;display:inline-block}
    .syn-maplbl-h{font-style:italic}
    .syn-map-det{background:var(--paper);border:none;border-radius:5px;padding:18px 20px;max-width:600px;margin:0 auto 30px;min-height:64px;display:flex;flex-direction:column;justify-content:center}
    .syn-map-hint{margin:0;text-align:center;font-size:0.8125rem;color:var(--muted)}
    .syn-map-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
    .syn-map-t{font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--text)}
    .syn-map-pill{font-size:0.6875rem;font-weight:700;border-radius:5px;padding:3px 11px;white-space:nowrap;background:transparent;border:1px solid currentColor}
    .syn-map-dots{letter-spacing:.1em;font-size:0.625rem;opacity:.85}
    .syn-map-x{margin:0 0 8px;font-size:0.875rem;line-height:1.6;color:var(--text)}
    .syn-map-sub{margin:0;font-size:0.6875rem;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-deep)}
    .syn-allh{font-family:var(--f-head);font-size:1.125rem;font-weight:700;text-align:left;color:var(--text);margin:6px 0 18px}
    .syn-empty{text-align:center;color:var(--muted);font-size:0.875rem;padding:14px}
    .syn-base{display:none;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 2px;padding:10px 14px;background:var(--soft);border:1px solid var(--line);border-radius:5px}
    .syn-base-lbl{font-family:var(--f-head);font-size:0.8125rem;font-weight:600;color:var(--text)}
    .syn-base-hint{flex-basis:100%;font-size:0.75rem;color:var(--muted);margin:0}
    .syn-seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
    .syn-seg button{display:inline-flex;align-items:center;border:none;background:#fff;color:var(--gold-deep);font-family:var(--f-head);font-size:0.8125rem;font-weight:600;padding:7px 16px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
    .syn-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
  

/* ===== <style id="footer-css"> (index.html línea 3406) ===== */
  #maqueta-footer{font-family:var(--f-title);margin-top:44px}
  #maqueta-footer .mf-top{background:#D6CEC4}
  #maqueta-footer .mf-top-in{max-width:1200px;margin:0 auto;padding:46px 26px 40px}
  #maqueta-footer .mf-brand{font-family:var(--f-title);font-size:1rem;font-weight:700;letter-spacing:.05em;color:#021212;margin:0 0 32px}
  #maqueta-footer .mf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  #maqueta-footer .mf-col h4{font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#3B161F;margin:0 0 15px}
  #maqueta-footer .mf-col a{display:block;width:max-content;max-width:100%;font-family:var(--f-head);font-size:0.875rem;color:#021212;text-decoration:none;margin:0 0 11px;line-height:1.4;transition:color .15s}
  #maqueta-footer .mf-col a:hover{color:#3B161F}
  #maqueta-footer .mf-bottom{background:#021212}
  #maqueta-footer .mf-bottom-in{max-width:1200px;margin:0 auto;padding:20px 26px}
  #maqueta-footer .mf-c1{font-family:var(--f-head);font-size:0.75rem;color:#FBF8F1;line-height:1.55;margin:0}
  #maqueta-footer .mf-c1 b{color:#ffffff;font-weight:700;font-family:var(--f-title)}
  #maqueta-footer .mf-c2{font-family:var(--f-head);font-size:0.6875rem;color:#D6CEC4;line-height:1.5;margin:5px 0 0}
  /* En el telefono el pie medía 827 px, más de una pantalla entera, porque por debajo
     de 430 px caía a una sola columna y los doce enlaces quedaban en fila india (Mafe
     lo cazó el 21 ago 2026). Se queda en DOS columnas hasta el celular más estrecho, y
     de paso se aprietan los aires, que en pantalla chica sobran. */
  @media(max-width:760px){
    #maqueta-footer .mf-top-in{padding:32px 20px 26px}
    #maqueta-footer .mf-brand{margin:0 0 22px}
    #maqueta-footer .mf-cols{grid-template-columns:repeat(2,1fr);gap:22px 16px}
    #maqueta-footer .mf-col h4{margin:0 0 11px}
    #maqueta-footer .mf-col a{margin:0 0 9px}
    #maqueta-footer .mf-bottom-in{padding:16px 20px}
  }

/* ===== <style id="limpieza-movil"> (index.html línea 3433) ===== */
  /* ===== LIMPIEZA DE CELULAR (jul 17 2026) =====
     Todo lo de aquí vive solo bajo 900px. El escritorio no se toca hasta que Mafe lo pida.
     Va al final del head a propósito, gana por orden de fuente. */
  /* El botón de los aspectos se escribe siempre en el HTML pero solo se ve en celular */
  .hoy-verasp{display:none}
  /* CTA a la carta natal desde la portada. En escritorio el rail ya lo resuelve, así que
     solo existe en celular, donde el rail vive escondido en la hamburguesa. Único botón
     en vino tinto, el acento de marca trabajando de acento. */
  #hoy-cta-natal{display:none;width:100%;height:48px;background:#3B161F;border:none;border-radius:5px;color:#ffffff;font-family:var(--f-title);font-size:0.9375rem;font-weight:600;letter-spacing:-.02em;cursor:pointer}
  /* La nota de sinastría que manda el resto de conexiones al reporte (elemento nuevo, va en las dos versiones) */
  .syn-rest-note{font-family:'Arimo',sans-serif;font-size:0.9375rem;font-weight:500;letter-spacing:-.5px;color:#70706a;margin:18px 0 0;text-align:left}
  /* Por defecto (escritorio) la lista de aspectos va entera y sin botón */
  #asp .asp-more{display:contents}
  #asp .asp-vermas{display:none}
  /* Las casas pasaron de romano a número normal en las dos versiones (Mafe, jul 17).
     La itálica era para el romano, con cifras se lee mejor recta. */
  #houses .h-num{font-style:normal}
  @media(max-width:900px){
    /* 1 - La rueda a todo el ancho. Se comían 100px entre tres márgenes encadenados
       (.wrap 20 + #belowzone 12 + #chart 18, por lado). Se recuperan para el dibujo. */
    .wrap{padding-left:12px;padding-right:12px}
    #belowzone{padding-left:6px!important;padding-right:6px!important}
    body[data-view="hoy"] #chart,
    body[data-view="natal"] #chart,
    body[data-view="transit"] #chart,
    body[data-view="solar"] #chart,
    body[data-view="prog"] #chart,
    body[data-view="sinastria"] #chart{padding-left:0!important;padding-right:0!important}
    #chart svg{max-width:100%}
    /* 2 - La línea de la fecha, centrada. El max-width:200px de #daycalc .hoy-daynav
       la dejaba anclada a la izquierda, se suelta para poder centrarla. */
    /* Una sola línea (Mafe, 19 jul 2026): la fecha, sus flechas, "Hoy" y las dos
       descargas caben en los 339px de celular si se aprietan los paddings. Se quita
       el wrap para que no se parta en dos aunque queden pocos píxeles de holgura. */
    #daycalc .hoy-daynav{max-width:none;justify-content:center;flex-wrap:nowrap;gap:5px}
    #daycalc .dc-nav{width:auto;flex-wrap:nowrap;gap:4px}
    .dc-h{text-align:left}
    /* PNG y PDF comparten la línea de la fecha, a su mismo alto. En celular no van
       con texto sino solo con iconos, para no recargar la vista: el iconito de archivo
       (imagen o documento) y una flechita de descarga. */
    #daycalc .hoy-daynav #png-dl{display:flex;margin:0;gap:5px;flex:0 0 auto}
    .dl-inline .tpl-dl{height:34px;padding:0 8px;gap:4px;font-size:0.75rem;border-radius:8px}
    .dl-inline .tpl-dl .tpl-dl-txt{display:none}
    .dl-inline .tpl-dl .tpl-dl-file{display:inline-block;width:16px;height:16px}
    .dl-inline .tpl-dl .tpl-dl-down{display:inline-block}
    /* min-width bajo y flex:0 1 auto para que la fecha ceda sitio a las descargas
       en vez de empujarlas a una segunda línea. */
    .hoy-hero-r .dc-date{font-size:0.75rem;padding:0 4px;min-width:88px;flex:0 1 auto}
    .hoy-hero-r .dc-today{padding:0 8px}
    .hoy-hero-r .dc-arrow{width:26px;flex:0 0 auto}
    /* 3 - Los aspectos del día, más limpios: sin la orbe, y el texto debajo de los glifos
       para que arranque pegado al margen izquierdo en vez de sangrado */
    .hoy-orb{display:none!important}
    .hoy-asp{flex-direction:column;gap:7px}
    .hoy-aspg{display:flex;align-items:center;gap:5px}
    /* 4 - Big 3 en filas (opción B). Cada planeta una fila con su disco a la izquierda,
       en vez de tres bloques de pantalla completa. El disco cruza las dos filas de texto. */
    #hoy-toptiles .hoy-tiles{flex-direction:column}
    .hoy-tile{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      grid-template-rows:auto auto;
      column-gap:12px;
      align-items:center;
      text-align:left!important;
      /* Sin sangría a la izquierda: el disco arranca en el mismo borde que el título de la
         sección y que las líneas, en vez de dejar una banda vacía (Mafe, 29 jul 2026). */
      padding:11px 12px 11px 0!important;
    }
    .hoy-tile-ic{grid-column:1;grid-row:1/3;width:36px!important;height:36px!important;margin:0!important}
    .hoy-tile-lab{grid-column:2;grid-row:1;align-self:end}
    .hoy-tile-val{grid-column:2;grid-row:2;align-self:start;font-size:1rem!important}
    .hoy-tile.retro .hoy-tile-val{font-size:1rem!important}
    .hoy-tile-sub{margin-top:1px!important}
    /* 5 - El recuadro del día se queda solo con la pregunta y sus viñetas. El párrafo repetía
       lo que ya dice el hero antracita, y el rótulo "Energía de hoy" chocaba con la pregunta.
       Se ocultan por CSS, no se quitan del JS, porque el escritorio los conserva. */
    .hoy-daymsg .hoy-msg-lead,
    .hoy-daymsg .hoy-readmore,
    .hoy-daymsg .hoy-daymsg-tag{display:none!important}
    .hoy-daymsg .hoy-tips-h{margin-top:0}
    /* 6 - La rueda vive dentro del recuadro del día, con su leyenda debajo */
    .hoy-daymsg{padding:24px 14px 22px!important}
    /* La rueda se sale del padding del recuadro para no perder ancho de dibujo */
    .hoy-daymsg #chart{margin:6px -8px 0!important;border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important}
    .hoy-chartley{text-align:center;font-family:var(--f-head);font-size:0.75rem;color:var(--muted);margin-top:6px}
    .hoy-verasp{display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;margin-top:16px;padding:9px 15px;background:transparent;border:1px solid var(--line);border-radius:5px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
    .hoy-verasp .ui-ic{width:14px;height:14px}
    /* El recuadro ya enmarca la rueda, la fila de la fecha no necesita su propia caja */
    body[data-view="hoy"] .daycalc{box-shadow:none!important;background:transparent!important;padding:0!important}
    /* La cabecera y la cinta del evento ya se quedan con 133px fijos arriba, así que
       los 34px de relleno del contenedor eran blanco de más antes del primer bloque.
       En escritorio ya van 14px, el celular se alinea en 16. */
    .wrap{padding-top:16px!important}
    /* 7 - AIRE. Era el problema de fondo del celular: bloques de 200 a 1200px de alto
       separados por hilos de 14 a 18px, así todo se leía como un muro. Se abre la
       respiración entre secciones y también dentro de cada una. */
    #belowzone>*{margin-top:44px!important;margin-bottom:0!important}
    #belowzone>*:first-child{margin-top:0!important}
    /* El saludo es el primer elemento VISIBLE de la vista hoy (los anteriores están
       ocultos), así que el aire de 44px de arriba se le quita a mano */
    body[data-view="hoy"] #hoy-hero{margin-top:0!important}
    /* Misma historia con la tarjeta del nombre, que es lo primero que se ve en carta
       natal, tránsitos, solar y progresada (delante solo va un título oculto). Con los
       44px heredados quedaba un vacío enorme entre el header y la tarjeta, que Mafe
       cazó el 28 jul 2026. Sin ese margen el aire lo pone el padre y basta. */
    #belowzone>#cartachip{margin-top:0!important}
    /* Y el mismo caso una vez más, el de quien llega por primera vez. Ahí el chip del
       nombre está oculto porque todavía no hay carta, así que lo primero que se ve es
       el formulario y arrancaba con los 44px heredados pegados a la cabecera, o sea
       89px de blanco muerto justo donde va la promesa. Cuando el chip sí se ve, el
       formulario va detrás de él y entonces esos 44px son los correctos, y por eso la
       regla mira el chip en vez de anular el margen a secas. Van los dos selectores
       porque el chip nace oculto desde el HTML con «display:none» pegado y en cambio
       el JS lo reescribe con «display: none» separado, así que hace falta cazar las
       dos formas o la regla falla justo en la primera carga, que es la que importa. */
    #belowzone>#cartachip[style*="display:none"]+#formzone,
    #belowzone>#cartachip[style*="display: none"]+#formzone{margin-top:0!important}
    /* La fecha y el buscador de tránsitos van pegados, como un solo grupo de controles.
       El aire grande va después del buscador, antes de las posiciones del día. */
    #daycalc .hoy-daynav{margin-bottom:12px!important}
    .dc-h{margin-bottom:16px!important}
    /* Cada planeta con sitio para respirar */
    #daycalc .dc-row{padding-top:9px!important;padding-bottom:9px!important}
    /* El recuadro del día, menos apretado por dentro */
    .hoy-daymsg .hoy-tips{gap:15px}
    .hoy-daymsg .hoy-tips-h{margin-bottom:15px}
    .hoy-chartley{margin-top:14px}
    /* El panel de aspectos y su título, sueltos */
    body[data-view="hoy"] .hoypanel{padding:26px 16px 28px}
    .hoy-aspwrap{margin-top:22px!important}
    body[data-view="hoy"] .hoy-asp{padding-top:18px;padding-bottom:18px}
    /* ===== VISTA CARTA NATAL ===== */
    /* 8 - Big 3 en filas, el mismo patrón que los planetas de hoy. Cada uno era un bloque
       de pantalla completa. El disco cruza las dos filas de texto y el grado va a la derecha. */
    body[data-view="natal"] #big3box .big3{flex-direction:column}
    body[data-view="natal"] #big3box .b3card{
      display:grid!important;
      grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-rows:auto auto;
      column-gap:13px;
      align-items:center;
      text-align:left!important;
      padding:12px 12px!important;
    }
    body[data-view="natal"] #big3box .b3glyph{grid-column:1;grid-row:1/3;width:38px!important;height:38px!important;margin:0!important}
    body[data-view="natal"] #big3box .b3card.asc .b3glyph{font-size:0.75rem!important}
    body[data-view="natal"] #big3box .pname{grid-column:2;grid-row:1;align-self:end;margin-bottom:0!important}
    body[data-view="natal"] #big3box .b3sign{grid-column:2;grid-row:2;align-self:start;font-size:1rem!important}
    body[data-view="natal"] #big3box .b3deg{grid-column:3;grid-row:1/3;justify-self:end;margin:0!important}
    /* 9 - El detalle del elemento, a una sola línea. El nombre sobraba, acabas de tocarlo
       en la fila de arriba, y el conteo queda en negrita. */
    #balance .baldet-inline .bd-el{display:none}
    #balance .baldet-inline .bd-c{font-weight:600}
    #balance .baldet-inline .bd-h{display:inline}
    #balance .baldet-inline .bd-h::after{content:' - '}
    #balance .baldet-inline .bd-m{display:inline;margin:0}
    #balance .baldet-inline .bd-x{display:block;margin-top:10px}
    /* 10 - Todo el texto de lectura, alineado a la izquierda. Los botones y la leyenda de
       la rueda se quedan centrados, que ahí el centrado sí es lo suyo. */
    .hoy-sky,
    .hoy-sky-date,
    .hoy-sky-title,
    .hoy-sky-do,
    .hoy-sky-do-k,
    .hoy-sky-do-t,
    .hoy-sky-moon{text-align:left!important}
    .hoy-sky-moon{margin-left:0!important;margin-right:auto!important}
    /* El mensaje del día venía con tope de ancho y márgenes automáticos, que lo centraban
       dentro del recuadro y dejaban un hueco a su izquierda. En celular ocupa el ancho
       entero, como el resto del texto (Mafe, 29 jul 2026). */
    .hoy-sky-do{max-width:none!important;margin-left:0!important;margin-right:0!important}
    .charthint,
    #solar-hint.charthint,
    #t-moment,
    .de-t,
    .advopts-note,
    .esshint,
    .tkicker,
    .hoy-foot,
    .more-note{text-align:left!important}
    /* El resumen de la Revolución Solar tenía el texto a la izquierda pero el bloque
       centrado con tope de 540, así que le quedaba un hueco de 254 píxeles al lado.
       Ocupa el ancho entero, como el resto (Mafe, 29 jul 2026). */
    .more-note .sr-body{max-width:none!important;margin-left:0!important;margin-right:0!important}
    /* La lectura del Big 3 (Quién eres - Sol en…) iba centrada de arriba abajo */
    .esscard,
    .esscard .esshead,
    .esscard .esstext{text-align:left!important}
    /* 13 - La instrucción de la rueda va pegada a la rueda, que es de lo que habla.
       Estaba a 123px de ella y con interlineado de 1.65, muy suelto para 12px. */
    #charthint{line-height:1.4!important;margin-top:0!important;margin-bottom:0!important}
    /* La instrucción, el "Estás viendo" y la rueda son un solo grupo, van juntos */
    body:not([data-view="hoy"]) #belowzone>#chartrow{margin-top:14px!important}
    #belowzone>#t-moment{margin-top:12px!important}
    /* El bloque de la instrucción heredaba el aire general de 44px y quedaba
       descolgado del panel del momento (Mafe, 21 jul 2026). Se pega al grupo
       y la letra baja a 9px, que es una nota al pie, no un texto de lectura. */
    #belowzone>#chartopts{margin-top:12px!important}
    .charthint{font-size:0.5625rem!important}
    /* 14 - La caja con los datos de la persona, en antracita como el formulario.
       El recuadro de Persona B en sinastría va igual, que son pareja (21 jul 2026) */
    #cartachip{background:#021212!important;border-color:#021212!important}
    #syn-det>summary{background:var(--ch-transitband,#e9ece0)!important;border-color:var(--ch-transitband,#e9ece0)!important;color:#021212!important}
    #syn-det>summary::after{background-color:#021212!important}
    /* Las tarjetas de Persona A y Persona B son pareja: van pegaditas, sin el
       aire grande de sección entre ellas (Mafe, 21 jul 2026) */
    #belowzone>#syn-box{margin-top:12px!important}
    /* Menos aire alrededor del título SINASTRÍA: ni tan lejos del encabezado
       ni tan lejos de la tarjeta de Persona A (Mafe, 21 jul 2026) */
    body[data-view="sinastria"] .wrap{padding-top:10px}
    body[data-view="sinastria"] #belowzone>#cartachip{margin-top:0!important}
    #cartachip #cchip-name{color:#ffffff!important}
    #cartachip #cchip-meta{color:#afafaf!important}
    #cartachip .cchip-edit-lbl{color:#ffffff!important}
    /* 15 - El panel del momento, pegado a los datos de la persona */
    #belowzone>#toggle-transit-box,
    #belowzone>#toggle-solar-box{margin-top:20px!important}
    /* 16 - Los botones de descarga, más discretos */
    #png-dl .tpl-dl{height:36px;padding:0 14px;font-size:0.75rem}
    #png-dl .tpl-dl svg{width:15px;height:15px}
    /* 17 - Todo texto cae en uno de los 4 roles del sistema (12 rótulo - 15 meta ·
       16 cuerpo - 20 título). Había 9 tamaños distintos en pantalla; estos cinco
       eran los intrusos. */
    #houses .hhead span{font-size:0.75rem}
    .cta-soon{font-size:0.75rem!important}
    .retrostrip .rchip{font-size:0.9375rem}
    #cartachip #cchip-name{font-size:1rem}
    #cartachip #cchip-meta{font-size:0.75rem}
    /* …y los de la vista hoy, que tenía 9 (10, 11, 13, 14 y 23 de intrusos) */
    #daycalc .dc-rx{font-size:0.75rem!important}
    .hoy-sky-date{font-size:0.75rem!important}
    .hoy-tl-elab,.hoy-tl-nowlab,.hoy-tl-ends span{font-size:0.75rem!important}
    .hoy-asp-see{font-size:0.75rem!important}
    .hoy-tile .hoy-tile-ic{font-size:0.75rem!important}
    .hoy-aspg>span{font-size:0.9375rem!important}
    .hoy-sky-do-t{font-size:1rem!important}
    .hoy-daymsg .hoy-tips-h{font-size:1rem!important}
    .hoy-tips li{font-size:1rem!important}
    .hoy-hero-hi{font-size:1.25rem!important}
    .hoy-sky-title{font-size:1.25rem!important}
    /* …y los del panel de calendario y el "Estás viendo" de tránsitos */
    .hoy-cta{font-size:0.75rem!important}
    #ical-box .tkicker{font-size:0.75rem!important}
    #t-moment,#t-moment b{font-size:0.9375rem!important}
    .icalbox .ical-note,.icalbox p,.icalbox li{font-size:0.9375rem!important}
    .icalbox button{font-size:0.75rem!important}
    /* …y los de solar, progresada y sinastría */
    .tkicker{font-size:0.75rem!important}
    .sr-title{font-size:1.25rem!important}
    .sr-body,.syn-intro,.syn-intro b,.syn-empty{font-size:1rem!important}
    #pg-go,#syn-go,#sr-go{font-size:0.75rem!important}
    .prog-sum-badge{font-size:0.75rem!important}
    .prog-stile-lab{font-size:0.75rem!important}
    .prog-stile-val{font-size:1rem!important}
    .prog-stile-sub{font-size:0.75rem!important}
    /* 18 - ASTROCARTOGRAFÍA. El mapa quedaba en 293px: 36 se los comía la página y 64
       los canales laterales de las etiquetas. A sangre completa y con canales de 20px
       el mapa pasa a ~353px. Las etiquetas siguen en su canal, solo más pegadas. */
    #acgframe{margin-left:-18px;margin-right:-18px;width:calc(100% + 36px);grid-template-columns:20px 1fr 20px}
    #acgmap{border-left:none;border-right:none;border-radius:0!important}
    /* tamaños al sistema: la intro a cuerpo y los nombres de planeta a rótulo */
    .acg-intro,.acg-intro b{font-size:1rem!important}
    .acg-tok-n{font-size:0.75rem!important}
    .acg-modebtn{font-size:0.75rem!important}
    .acg-lab-ang{font-size:0.75rem!important}
    #astro-info,#astro-info div{font-size:1rem}
    /* Las etiquetas laterales crecen HACIA el mapa; ancladas hacia fuera se salían
       de la pantalla al estrechar los canales */
    #acg-left .acg-lab-chip{right:auto;left:0}
    #acg-right .acg-lab-chip{left:auto;right:0;flex-direction:row-reverse}
    /* Opción D (Mafe): el selector de planetas se pliega bajo su título. Los 13 chips y
       Todos/Ninguno viven dentro; a la vista quedan el buscador de líneas y los modos. */
    .acg-picktitle{
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      border:1px solid var(--line);border-radius:5px;padding:12px 14px;margin:0 0 8px;cursor:pointer;
      font-family:var(--f-title)!important;font-size:0.875rem!important;font-weight:600!important;
      letter-spacing:-.5px!important;text-transform:none!important;color:var(--text)!important;
    }
    .acg-picktitle::after{content:'';width:13px;height:13px;flex:none;background-color:var(--muted);-webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;transition:transform .18s}
    #astro-box.pick-open .acg-picktitle::after{transform:rotate(180deg)}
    #astro-box:not(.pick-open) #acg-chips,
    #astro-box:not(.pick-open) #acg-all,
    #astro-box:not(.pick-open) #acg-none{display:none}
    /* El botón de las líneas: antracita de marca (estaba gris) y a media altura */
    .acg-lenscta{background:#021212!important;border-color:#021212!important;color:#ffffff!important;height:38px!important;font-size:0.75rem!important;padding:0 14px!important;flex:1 1 100%}
    /* Los modos: Mapa, 3D y Parans comparten fila; Carta relocalizada entera con su nombre */
    #acg-view-flat,#acg-view-globe,#acg-paran-btn{flex:1 1 28%}
    #acg-reloc-btn{flex:1 1 100%}
    .prog-sum-note{font-size:0.9375rem!important}
    .prog-card-role{font-size:0.75rem!important}
    .prog-card-h .prog-glyph,.prog-glyph,.prog-glyph span{font-size:0.9375rem!important}
    /* 23 - El CTA de la portada, visible solo en la vista hoy y pegado al hero */
    /* El botón vino grande de "Ver mi carta natal" se retiró: ahora la entrada a la
       carta vive en el header (mini rueda → "Mi carta"), en todas las vistas. */
    /* 20 - Sinastría sin el recuadro que bordeaba todo el bloque */
    #syn-box{border:none!important;background:transparent!important;padding:0!important;box-shadow:none!important}
    /* 21 - Las conexiones de sinastría en filas (opción A de Mafe): fuera las tarjetas,
       hairlines como Tus aspectos, discos antracita como el Big 3, y el vino tinto
       reservado para el aspecto y lo que reta */
    #syn-aspects .syn-card{background:transparent!important;border:none!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;padding:14px 2px!important;margin:0!important}
    #syn-aspects .syn-card::before{display:none!important}
    .syn-gly{background:#021212!important;border:none!important}
    .syn-gly svg *{fill:#fbf8f1}
    .syn-aspj{color:#3B161F!important;font-style:italic}
    .syn-pill{background:transparent!important;border:none!important;padding:0!important;font-family:'Arimo',sans-serif!important;font-size:0.75rem!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--muted)!important}
    .syn-pill-ten{color:#3B161F!important}
    .syn-names b{color:#021212!important}
    .syn-dots{color:#b4b2a9}
    /* 22 - Las tarjetas de contenido de la progresada (Cómo vas siendo…), al mismo
       lenguaje: filas con hairline, disco antracita, sin sombras ni saltos de hover */
    .prog-card{background:transparent!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid var(--line);padding:16px 2px!important;transition:none!important}
    .prog-card:hover{transform:none!important;box-shadow:none!important}
    .prog-cards,.prog-grid{gap:0!important}
    .prog-glyph{background:var(--text)!important;color:#ffffff!important}
    .prog-glyph svg *{fill:#fbf8f1}
    .prog-glyph span{color:#ffffff!important}
    .prog-card p{font-size:1rem!important;line-height:1.5!important}
    .prog-card-name{font-size:1rem!important}
    /* 19 - La carta progresada, al molde de las demás. Sus tiles eran el KPI viejo que la
       natal ya abandonó (tarjetas blancas centradas con sombra) y sus títulos iban en el
       registro retirado. Mismo patrón de filas: disco antracita, rótulo, valor. */
    .prog-sum-eyebrow{font-family:var(--f-title)!important;font-size:1.25rem!important;font-weight:600!important;letter-spacing:.5px!important;text-transform:none!important;color:var(--text)!important}
    .prog-head{font-size:1.25rem!important;letter-spacing:.5px!important;color:var(--text)!important}
    .prog-sumtiles{display:flex!important;flex-direction:column;gap:0!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .prog-stile{
      display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;
      column-gap:13px;align-items:center;text-align:left!important;
      background:transparent!important;box-shadow:none!important;border-radius:0!important;
      padding:12px 10px!important;border-top:1px solid var(--line);
    }
    .prog-stile:first-child{border-top:none}
    .prog-stile-ic{grid-column:1;grid-row:1/4;width:38px!important;height:38px!important;margin:0!important;background:var(--text)!important;border-radius:50%!important}
    .prog-stile-ic svg *{fill:#fbf8f1}
    .prog-stile-ic span{color:#ffffff!important}
    .prog-stile-lab{grid-column:2;grid-row:1;align-self:end;font-family:'Arimo',sans-serif!important;font-weight:600!important;letter-spacing:.02em!important;color:var(--muted)!important;margin:0!important}
    .prog-stile-val{grid-column:2;grid-row:2}
    .prog-stile-sub{grid-column:2;grid-row:3;margin-top:1px!important}
    /* …y los del formulario (se ven en todas las vistas al editar los datos) */
    .formactions #f-go{font-size:1rem!important}
    .advopts-note{font-size:0.75rem!important}
    .advgrp-d{font-size:0.9375rem!important}
    .plabel{font-size:0.75rem!important}
    .chartwrap .note{font-size:0.75rem!important}
    /* 12 - La lista de aspectos se pliega. Eran 24 filas seguidas, 1117px de muro. */
    #asp .asp-more{display:none}
    #asp .asp-more.abierto{display:contents}
    #asp .asp-vermas{display:inline-flex;align-items:center;gap:5px;width:auto;height:auto;margin-top:16px;padding:9px 15px;background:transparent;border:1px solid var(--line);border-radius:5px;font-family:var(--f-title);font-size:0.75rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
    #asp .asp-vermas .ui-ic{width:14px;height:14px}
    #asp .asp-vermas.oculto{display:none}
    /* 11 - Los títulos de sección son títulos, no etiquetas. Pasan del rol rótulo
       (Arimo 12 mayúscula) al rol título del sistema, Poppins 20 negrita.
       Lleva el body[data-view] para ganarle a la regla de natal-limpio, que es más
       específica que un #belowzone h2 pelado. */
    body[data-view="natal"] #natal-only h2,
    body[data-view="natal"] #belowzone h2,
    body[data-view="hoy"] #belowzone h2,
    body[data-view="transit"] #belowzone h2,
    body[data-view="solar"] #belowzone h2,
    body[data-view="prog"] #belowzone h2,
    body[data-view="sinastria"] #belowzone h2,
    body[data-view="astro"] #belowzone h2,
    body[data-view="natal"] #big3box .b3kicker,
    body[data-view="hoy"] #big3box .b3kicker,
    .mphbox .mph-label,
    .patbox .mph-label,
    .daycalc .dc-h,
    #belowzone h2{
      font-family:var(--f-title)!important;
      font-size:1.25rem!important;
      font-weight:600!important;
      letter-spacing:.5px!important;
      line-height:1.15!important;
      text-transform:none!important;
      color:var(--text)!important;
    }
  }

/* ===== <style sin id> (index.html línea 3822) ===== */
  /* ===== Preguntas antes de calcular ===== */
  /* El relleno de abajo era de 8px porque debajo venia la franja beige de
   servicios y el cambio de color ya hacia de separador. Desde el 23 jul 2026
   esta seccion cierra la pagina y va pegada al pie, asi que necesita aire propio. */
  .preg{background:var(--bg);padding:56px 20px 60px}
  .preg-in{max-width:1032px;margin:0 auto}
  .preg-k{font-family:var(--f-title);font-size:1rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold-deep);margin:0 0 36px;font-weight:400}
  /* Desplegables normales y corrientes (Mafe, 24 ago 2026). Los «billetes» torcidos
     del 1 ago se retiraron: ahora cada pregunta es una fila blanca con su borde, la
     pregunta a la izquierda y el chevron a la derecha, que gira al abrir. La
     respuesta cae dentro de la misma caja.
     Sigue con <details>/<summary> nativo y CERO JavaScript a propósito: el motivo de
     que esta sección exista es que los rastreadores de IA no ejecutan JS, así que
     el texto de las respuestas tiene que seguir viviendo en el HTML plano y
     leerse con un curl aunque esté plegado. */
  .preg-lista{margin:0 0 34px}
  .preg-item{margin:0 0 10px;background:#fff;border:1px solid var(--line)}
  .preg-item[open]{border-color:#bcb8b1}
  .preg-tic{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:16px 20px;color:var(--text)}
  .preg-tic::-webkit-details-marker{display:none}
  .preg-tic::after{content:"";flex:0 0 14px;width:14px;height:14px;background-color:currentColor;
    -webkit-mask:var(--ui-chevron) center/contain no-repeat;mask:var(--ui-chevron) center/contain no-repeat;
    transition:transform .2s ease;opacity:.7}
  .preg-item[open] .preg-tic::after{transform:rotate(180deg)}
  .preg-tic:hover{background:var(--paper)}
  .preg-tic:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
  /* Piezas del billete viejo, apagadas por si quedara alguna en el HTML */
  .tic-banda,.tic-meta,.tic-ast,.tic-cta{display:none}
  /* La pregunta. El !important es porque la regla de #belowzone h2 y la global de h2
     pelean por estos títulos. */
  .preg .preg-q{font-family:var(--f-title)!important;font-size:1.0625rem!important;
    font-weight:700!important;letter-spacing:0!important;line-height:1.35!important;
    text-transform:none!important;color:var(--text)!important;
    margin:0!important;padding:0!important;border-bottom:none!important;
    text-align:left!important}
  /* Las caras de colores del billete ya no van: todas las filas iguales */
  .tic-marfil,.tic-vino,.tic-arena,.tic-tinta{background:transparent;color:var(--text)}
  /* La respuesta, dentro de la misma caja */
  .preg-resp{padding:2px 20px 18px}
  /* El rol «cuerpo» del sistema va a line-height 1.2, que sirve para fichas de una
     o dos líneas pero no para leer un párrafo de 150 palabras. Aquí se sube a 1.62
     y el resto del rol (Arimo 16/400/-0.5px) se respeta tal cual. */
  .preg-a{font-family:var(--f-head);font-size:1rem;font-weight:400;
    letter-spacing:-.5px;line-height:1.62;color:var(--text);margin:0}
  .preg-a a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
  .preg-firma{font-family:var(--f-head);font-size:0.9375rem;font-weight:500;
    letter-spacing:-.5px;line-height:1.6;color:var(--muted);margin:8px 0 0}
  .preg-firma a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
  @media(max-width:900px){
    .preg{padding:40px 12px 44px}
    .preg-k{margin:0 0 26px}
    .preg-tic{padding:14px 16px}
    .preg .preg-q{font-size:1rem!important}
    .preg-resp{padding:0 16px 16px}
  }
  @media(prefers-reduced-motion:reduce){
    .preg-tic::after{transition:none}
  }

/* ===== <style sin id> (index.html línea 4045) ===== */
  #rsv-ov{position:fixed;inset:0;z-index:12000;display:none;overflow-y:auto;background:rgba(38,38,32,.62);padding:22px 14px}
  #rsv-ov.on{display:block}
  #rsv-ov *{box-sizing:border-box}
  #rsv-ov{--rsv-chip:#F3EEE4;--rsv-chip-alto:#EAE3D5;--rsv-tenue:#A29A8C;letter-spacing:-.5px}
  #rsv-ov .rsv-card{position:relative;background:var(--bg);max-width:560px;margin:0 auto;padding:26px 20px 30px;font-family:var(--f-body)}
  @media(min-width:560px){#rsv-ov .rsv-card{padding:32px 28px 36px}}
  .rsv-card button{width:auto;height:auto;border:none;font-family:inherit;color:inherit;background:none;font-weight:400;letter-spacing:-.5px}
  #rsv-ov .rsv-x{position:absolute;top:12px;right:12px;width:36px;height:36px;background:var(--rsv-chip);font-size:var(--fs-md);cursor:pointer;line-height:1}
  #rsv-ov .rsv-x:hover{background:var(--rsv-chip-alto)}
  #rsv-ov .rsv-rot{font-family:var(--f-title);font-size:var(--fs-2xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 7px;font-weight:400}
  #rsv-ov .rsv-nom{font-family:var(--f-title);font-size:var(--fs-xl);font-weight:400;letter-spacing:.4px;line-height:1.05;margin:0 0 9px;text-transform:none;text-align:left;color:var(--text)}
  #rsv-ov .rsv-meta{font-size:var(--fs-md);color:var(--rsv-tenue);margin:0}
  #rsv-ov .rsv-meta b{color:var(--text);font-weight:700}
  #rsv-ov .rsv-avisograb{font-size:var(--fs-sm);color:var(--rsv-tenue);margin:14px 0 0}
  #rsv-ov .rsv-estado{font-size:var(--fs-md);color:var(--rsv-tenue);margin:26px 0 0}
  #rsv-ov .rsv-estado a{color:var(--accent)}
  #rsv-ov .rsv-zonacal{margin:26px 0 0}
  #rsv-ov .rsv-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px}
  #rsv-ov .rsv-pastilla{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--text);color:var(--bg);padding:9px 16px 9px 13px;font-size:var(--fs-md);cursor:pointer;transition:opacity .14s}
  #rsv-ov .rsv-pastilla:hover{opacity:.85}
  #rsv-ov .rsv-flechas{display:flex;gap:6px}
  #rsv-ov .rsv-flechas button{width:38px;height:38px;background:var(--text);color:var(--bg);font-size:var(--fs-md);cursor:pointer;line-height:1;transition:opacity .14s}
  #rsv-ov .rsv-flechas button:disabled{opacity:.35;cursor:default}
  #rsv-ov .rsv-flechas button:not(:disabled):hover{opacity:.85}
  #rsv-ov .rsv-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0 0 8px}
  #rsv-ov .rsv-cab span{font-size:var(--fs-xs);text-align:center;color:var(--rsv-tenue)}
  #rsv-ov .rsv-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  #rsv-ov .rsv-dia{aspect-ratio:1;border:2px solid transparent;background:var(--rsv-chip);font-size:var(--fs-md);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .14s,transform .1s;padding:0}
  #rsv-ov .rsv-dia:hover{background:var(--rsv-chip-alto)}
  #rsv-ov .rsv-dia:active{transform:scale(.94)}
  #rsv-ov .rsv-dia[disabled]{background:none;color:var(--rsv-tenue);opacity:.5;cursor:default;transform:none}
  #rsv-ov .rsv-dia.rsv-fuera{visibility:hidden}
  #rsv-ov .rsv-dia.rsv-hoy{background:none;border-color:var(--text)}
  #rsv-ov .rsv-dia[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FBF8F1;font-weight:700}
  #rsv-ov .rsv-panel{background:var(--paper);margin:18px 0 0;padding:20px 18px 22px}
  #rsv-ov .rsv-panelcab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 18px}
  #rsv-ov .rsv-dd{font-family:var(--f-title);font-size:var(--fs-2xl);letter-spacing:.02em;line-height:1;color:var(--text)}
  #rsv-ov .rsv-sem{font-size:var(--fs-md);color:var(--rsv-tenue);margin-left:9px}
  #rsv-ov .rsv-zona{font-size:var(--fs-xs);color:var(--rsv-tenue);text-align:right;margin:0}
  #rsv-ov .rsv-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px}
  #rsv-ov .rsv-hora{background:var(--bg);border:2px solid transparent;padding:14px 4px;font-size:var(--fs-md);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .14s,transform .1s;text-align:center}
  #rsv-ov .rsv-hora:hover{background:var(--rsv-chip)}
  #rsv-ov .rsv-hora:active{transform:scale(.96)}
  #rsv-ov .rsv-hora[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#FBF8F1;font-weight:700}
  #rsv-ov .rsv-resumen{font-size:var(--fs-md);margin:22px 0 12px;min-height:1.4em;color:var(--text)}
  #rsv-ov .rsv-resumen b{color:var(--accent)}
  #rsv-ov .rsv-cta{display:block;width:100%;font-family:var(--f-title);font-size:var(--fs-md);letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#FBF8F1;padding:18px;cursor:pointer;transition:opacity .16s,transform .1s;text-align:center;font-weight:400}
  #rsv-ov .rsv-cta:hover{background:var(--accent)}
  #rsv-ov .rsv-cta:active{transform:scale(.99)}
  #rsv-ov .rsv-cta[disabled]{opacity:.28;cursor:default;transform:none}
  #rsv-ov .rsv-fina{font-size:var(--fs-xs);color:var(--rsv-tenue);margin:11px 0 0}
  #rsv-ov .rsv-otras{margin:26px 0 0}
  #rsv-ov .rsv-otras>summary{list-style:none;cursor:pointer;font-size:var(--fs-md);color:var(--accent);text-decoration:underline;padding:6px 0}
  #rsv-ov .rsv-otras>summary::-webkit-details-marker{display:none}
  #rsv-ov .rsv-grupos{display:flex;gap:5px;background:var(--rsv-chip);padding:4px;margin:14px 0 12px}
  #rsv-ov .rsv-grupos button{flex:1;padding:11px 6px;font-size:var(--fs-md);cursor:pointer;transition:background .16s;text-align:center}
  #rsv-ov .rsv-grupos button[aria-pressed="true"]{background:var(--bg);font-weight:700}
  #rsv-ov .rsv-lista{display:flex;flex-direction:column;gap:8px}
  #rsv-ov .rsv-serv{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:var(--rsv-chip);padding:15px 17px;cursor:pointer;transition:background .14s;text-decoration:none;color:var(--text)}
  #rsv-ov .rsv-serv:hover{background:var(--rsv-chip-alto)}
  #rsv-ov .rsv-serv .rsv-snom{font-size:var(--fs-md);line-height:1.25}
  #rsv-ov .rsv-serv .rsv-snom small{display:block;color:var(--rsv-tenue);font-size:var(--fs-sm);margin-top:3px}
  #rsv-ov .rsv-serv .rsv-spre{font-family:var(--f-title);font-size:var(--fs-lg);letter-spacing:.02em;flex:0 0 auto;font-variant-numeric:tabular-nums}
  /* Lo que trae cada consulta y, arriba de la lista, la diferencia entre los dos
     grupos. La fila deja de ir centrada porque ahora el nombre tiene tres líneas y
     el precio se veía flotando a media altura. */
  #rsv-ov .rsv-serv{align-items:flex-start}
  #rsv-ov .rsv-serv .rsv-sque{display:block;color:var(--rsv-tenue);font-size:var(--fs-sm);line-height:1.45;margin-top:6px}
  #rsv-ov .rsv-modo{font-size:var(--fs-sm);line-height:1.5;color:var(--rsv-tenue);margin:0 0 12px}
  #rsv-ov .rsv-aviso{background:var(--paper);padding:12px 14px;margin:0 0 16px;font-size:var(--fs-sm);line-height:1.5;color:var(--text)}
  #rsv-ov .rsv-aviso[hidden]{display:none}
  /* ---- paso 2, los datos ---- */
  #rsv-ov .rsv-datos{margin:22px 0 0}
  #rsv-ov .rsv-cuando{background:var(--paper);padding:14px 16px;margin:0 0 22px;font-size:var(--fs-md);color:var(--text)}
  #rsv-ov .rsv-cuando b{color:var(--accent)}
  #rsv-ov .rsv-cambiar{display:inline-block;margin:-12px 0 22px;font-size:var(--fs-sm);color:var(--accent);text-decoration:underline;cursor:pointer;background:none;padding:0}
  #rsv-ov .rsv-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #rsv-ov .rsv-campo{display:flex;flex-direction:column;gap:5px}
  #rsv-ov .rsv-campo.rsv-ancho{grid-column:1/-1}
  /* Los rótulos subieron de 11 a 13 px y del gris claro al gris de texto (Mafe,
     2 ago 2026, "no se lee bien"). Staatliches viene condensada, así que a 11 px
     y en mayúsculas se leía a duras penas, y el #A29A8C sobre blanco además no
     llegaba al contraste mínimo que ella misma pide para todo texto. */
  #rsv-ov .rsv-campo label{font-family:var(--f-title);font-size:var(--fs-base);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:400;display:block}
  #rsv-ov .rsv-campo input{width:100%;height:46px;padding:0 13px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--fs-md);font-weight:400}
  #rsv-ov .rsv-campo textarea{width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--fs-md);font-weight:400;line-height:1.5;resize:vertical}
  #rsv-ov .rsv-campo input:focus,#rsv-ov .rsv-campo textarea:focus{outline:none;border-color:var(--accent)}
  #rsv-ov .rsv-campo[hidden]{display:none}
  /* Los cuatro niveles no caben en una fila en pantalla estrecha, así que se reparten. */
  #rsv-ov .rsv-nivel{flex-wrap:wrap}
  #rsv-ov .rsv-nivel button{flex:1 1 42%}
  #rsv-ov .rsv-pista{font-size:var(--fs-xs);color:var(--rsv-tenue);margin:0}
  #rsv-ov .rsv-siono{display:flex;gap:6px}
  #rsv-ov .rsv-siono button{flex:1;padding:12px 8px;background:var(--rsv-chip);font-size:var(--fs-md);cursor:pointer;transition:background .14s;text-align:center}
  #rsv-ov .rsv-siono button[aria-pressed="true"]{background:var(--accent);color:#FBF8F1;font-weight:700}
  /* La hora de nacimiento, armada a mano para que el AM/PM se vea sin leer nada.
     OJO al width:auto de los desplegables: la regla global `input,select,button`
     del index les pone width:100% y sin esto cada uno se lleva su propia fila. */
  /* OJO AL NOMBRE: esta fila NO se puede llamar `rsv-hora`, que esa clase ya es la de
     los botones de hora de la cita (se pusieron en flex y sin padding por reusarla, y
     el calendario se vio roto en producción). De ahí `rsv-nachora`, la hora de nacimiento.
     El padding:0 es obligatorio: una regla del index le mete 14px arriba y abajo a esta
     caja y la fila crecía a 78 px con los controles de 46 flotando en el medio. */
  #rsv-ov .rsv-nachora{display:flex;align-items:center;gap:6px;padding:0}
  #rsv-ov .rsv-nachora select{width:auto;flex:0 0 auto;height:46px;padding:0 8px;border:1px solid var(--line);
    background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--fs-md);font-weight:400}
  #rsv-ov .rsv-nachora select:focus{outline:none;border-color:var(--accent)}
  #rsv-ov .rsv-nachora-sep{color:var(--rsv-tenue);font-size:var(--fs-md)}
  #rsv-ov .rsv-ampm{flex:1 1 auto;margin-left:2px}
  #rsv-ov .rsv-ampm button{height:46px;padding:0 6px}
  /* Este label es una frase que se lee, no un rótulo, así que se sale del label global
     del index, que va en Staatliches y en mayúsculas. */
  #rsv-ov .rsv-check{display:flex;gap:11px;align-items:flex-start;margin:20px 0 0;cursor:pointer;font-family:var(--f-body);font-size:var(--fs-sm);line-height:1.5;color:var(--text);text-transform:none;letter-spacing:-.5px;font-weight:400}
  #rsv-ov .rsv-check input{width:20px;height:20px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
  #rsv-ov .rsv-check a{color:var(--accent)}
  #rsv-ov .rsv-error{font-size:var(--fs-sm);color:var(--danger);margin:14px 0 0;min-height:1.3em}
  @media(max-width:460px){#rsv-ov .rsv-campos{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){#rsv-ov *{transition:none!important}}

/* ===== <style sin id> (index.html línea 4967) ===== */
  /* ===== Carrusel de consultas ===== */
  /* La sección va en beige de borde a borde (Mafe, 19 jul 2026). El fondo lo pone
     la sección entera y el contenido se centra por dentro, para que no quede una
     franja blanca entre el antracita de arriba y las tarjetas. */
  /* ===== Carril del blog (2 ago 2026) =====
     Mismo molde que el carrusel de servicios, con dos diferencias a propósito.
     Va sobre el fondo de la página y no sobre el beige, para que se lea como una
     sección distinta de la de los servicios y no como un bloque enorme, y la
     tarjeta lleva la pintura arriba a todo lo ancho, igual que en el blog. */
  .blg{padding:40px 20px 6px}
  .blg-head,.blg-wrap{max-width:1140px;margin-left:auto;margin-right:auto}
  .blg-head{margin-bottom:20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  /* Las dos rayas van RECTAS, con las puntas en seco. El global *{border-radius:5px
     !important} de más arriba les curva los extremos y quedan como un recuadro a
     medio dibujar, que es justo lo que Mafe prohibió el 1 ago 2026 y volvió a cazar
     aquí el 2 ago. Por eso los dos border-radius:0!important, uno por raya. */
  .blg-t{font-family:var(--f-title);font-size:1.25rem;font-weight:600;letter-spacing:.5px;color:var(--text);margin:0;border-radius:0!important}
  .blg-todo{margin-left:auto;font-family:var(--f-head);font-size:0.8125rem;color:var(--label);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap;border-radius:0!important}
  .blg-wrap{position:relative}
  .blg-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .blg-track::-webkit-scrollbar{display:none}
  .blg-track:focus-visible{outline:2px solid var(--label);outline-offset:3px}
  .blg-card{flex:0 0 264px;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:inherit}
  .blg-img{width:100%;height:158px;object-fit:cover;border-radius:5px;display:block;margin:0 0 12px;background:var(--paper)}
  .blg-tema{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
  .blg-nm{font-family:var(--f-title);font-size:1rem;font-weight:600;line-height:1.22;letter-spacing:0;color:var(--text);margin:0}
  .blg-card:hover .blg-nm{color:var(--label-hover)}
  .blg-prev{left:-14px}
  .blg-prev::before{transform:rotate(135deg);margin-left:3px}
  .blg-next{right:-14px}
  .blg-next::before{transform:rotate(-45deg);margin-right:3px}
  @media(max-width:900px){
    .blg{padding:30px 16px 2px}
    .blg-prev,.blg-next{display:none}
    .blg-track{gap:12px;scroll-padding-left:16px}
    .blg-card{flex-basis:216px}
    .blg-img{height:132px}
    .blg-nm{font-size:0.9375rem}
  }
  @media(prefers-reduced-motion:reduce){.blg-track{scroll-behavior:auto}}
  .svc{background:var(--paper);padding:46px 20px 46px}
  /* El footer trae 44px de margen propio, que dejaban una franja blanca entre el
     beige y el pie. Se anula solo cuando el footer viene después de esta sección
     (van el style y el script en medio, por eso el selector es ~ y no +), y el aire
     se recupera dentro del beige. */
  #servicios ~ #maqueta-footer{margin-top:0}
  .svc-head,.svc-wrap{max-width:1140px;margin-left:auto;margin-right:auto}
  .svc-head{margin-bottom:22px}
  /* Sin la raya gris de abajo, que la cuela la regla global de h2 (Mafe, 24 ago 2026) */
  .svc-t{font-family:var(--f-title);font-size:1.25rem;font-weight:600;letter-spacing:.5px;color:var(--text);margin:0;border-bottom:none;padding-bottom:0}
  .svc-wrap{position:relative}
  /* El carril se desplaza a mano o con las flechas, y cada tarjeta se enclava sola. */
  .svc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .svc-track::-webkit-scrollbar{display:none}
  .svc-track:focus-visible{outline:2px solid var(--label);outline-offset:3px}
  /* Tarjetas en blanco ahora que el fondo de la sección es beige, si no se perdían
     contra él (antes eran beige sobre blanco, ahora es al revés). */
  .svc-card{flex:0 0 216px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:5px;padding:22px 16px 18px}
  .svc-img{width:104px;height:104px;border-radius:50%;object-fit:cover;margin-bottom:14px;background:#fff}
  .svc-nm{font-family:var(--f-title);font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.2;color:var(--text);margin:0 0 6px}
  .svc-mode{font-family:var(--f-head);font-size:0.78125rem;line-height:1.4;color:var(--muted);margin:0 0 12px;min-height:2.8em}
  .svc-meta{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-head);font-size:0.8125rem;color:var(--text);margin:0 0 16px}
  .svc-sep{color:#bcb8b1;user-select:none}
  .svc-btn{margin-top:auto;display:inline-block;width:100%;box-sizing:border-box;padding:10px 14px;background:var(--label);color:#ffffff;border-radius:5px;font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:0;text-decoration:none;transition:background .15s}
  .svc-btn:hover{background:var(--label-hover)}
  .svc-nav{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--card-sh);cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
  .svc-nav::before{content:"";width:9px;height:9px;border-right:1.5px solid var(--label);border-bottom:1.5px solid var(--label)}
  .svc-prev{left:-14px}
  .svc-prev::before{transform:rotate(135deg);margin-left:3px}
  .svc-next{right:-14px}
  .svc-next::before{transform:rotate(-45deg);margin-right:3px}
  .svc-nav[hidden]{display:none}
  @media(max-width:900px){
    .svc{padding:34px 16px 4px}
    .svc-nav{display:none}
    .svc-track{gap:12px;scroll-padding-left:16px}
    .svc-card{flex-basis:172px;padding:18px 13px 15px}
    .svc-img{width:84px;height:84px}
    .svc-nm{font-size:0.9375rem}
  }
  @media(prefers-reduced-motion:reduce){.svc-track{scroll-behavior:auto}}
  /* ===== EL MURO DE PAGO (9 ago 2026): la pastilla de la opción A ==============
     Solo se pinta cuando el servidor niega los bancos de pago (window.__muroTextos),
     o sea nunca mientras el interruptor MURO_TEXTOS esté apagado. La maqueta madre
     es PROPUESTAS-MURO.html, elegida por Mafe el 1 ago. La pastilla lleva su radio
     propio con !important porque el global de 5px la dejaría cuadrada. */
  /* El corte va alto a propósito (Mafe, 9 ago: "hay que esconder más texto"),
     se leen tres o cuatro líneas del arranque y ahí cae el velo. */
  .muro-corte{position:relative;overflow:hidden;max-height:190px}
  .muro-velo{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(251,248,241,0),var(--paper) 78%)}
  .muro-sello{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:7px;background:#3B161F;color:#fff;
    font-family:var(--f-title);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    padding:9px 17px;border-radius:99px!important;white-space:nowrap;border:0;cursor:pointer;
    box-shadow:0 4px 14px -6px rgba(59,22,31,.6);pointer-events:auto}
  .muro-sello svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;flex:0 0 auto}
  .muro-sello .muro-chev{transition:transform .25s ease}
  .muro-sello[aria-expanded="true"] .muro-chev{transform:rotate(180deg)}
  .muro-despliega{max-height:0;overflow:hidden;transition:max-height .32s ease}
  .muro-despliega.on{max-height:360px}
  .muro-dentro{padding:16px 0 4px}
  .muro-dentro p{margin:0 0 14px}
  .muro-boton{display:inline-block;font-family:var(--f-title);font-size:13px;letter-spacing:.08em;
    text-transform:uppercase;padding:11px 20px;background:#3B161F;color:#fff;text-decoration:none}
  .muro-salida{font-size:.84375rem;color:var(--muted);margin:10px 0 0}
  .muro-prox{font-family:var(--f-title);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    color:#3B161F;margin:0!important;text-align:center}
  @media(prefers-reduced-motion:reduce){.muro-despliega,.muro-sello .muro-chev{transition:none}}
  h2,
  .posgrp[open] .posgrp-sum, .postab th, .postab td,
  .ritem, .ritem-aviso, .acg-sep, .tsearch,
  .daycalc .dc-row, .hoy-topline, .hoy-msg, .hoy-ics, .hoy-aspgrp-t,
  .prog-crit, .prog-sumtiles, .balsum-row,
  #houses .hhead, .patbox .patrow, #curios .curow,
  #maqueta-header .mh-nav-in a.active, #maqueta-header .mh-cv-head, #maqueta-header .mh-wx-list,
  #tema-editor .te-grp,
  #chartrow #detail, #chartrow #detail-empty{border-radius:0!important}
  @media(max-width:560px){
    #big3box .b3card, .hoy-tile{border-radius:0!important}
  }

/* ===== <style sin id> (index.html línea 9515) ===== */
  #tema-fab{position:fixed;right:18px;bottom:18px;z-index:99998;width:52px;height:52px;border-radius:50%;
    border:none;background:#474730;color:#fff;font-size:1.4375rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);display:none}
  #tema-editor{position:fixed;top:0;right:0;z-index:99999;width:330px;max-width:92vw;height:100vh;overflow-y:auto;
    background:#fbf8f0;border-left:1px solid var(--line);box-shadow:-8px 0 30px rgba(0,0,0,.14);
    font-family:var(--f-head);color:#33302b;padding:18px 18px 40px;display:none}
  #tema-editor.open{display:block}
  #tema-editor h3{font-family:var(--f-title);font-size:1.125rem;margin:0 0 2px}
  #tema-editor .te-sub{font-size:0.75rem;color:#85827b;margin:0 0 14px;line-height:1.4}
  #tema-editor .te-grp{font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase;color:#6f6c43;font-weight:700;
    margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
  #tema-editor .te-row{display:flex;align-items:center;gap:9px;margin:7px 0}
  #tema-editor .te-row label{flex:1;font-size:0.8125rem;color:#33302b;margin:0;text-transform:none;letter-spacing:0}
  #tema-editor input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;flex:0 0 auto}
  #tema-editor input[type=text]{width:78px;height:30px;font-size:0.75rem;font-family:monospace;text-align:center;
    border:1px solid var(--line);border-radius:5px;padding:0 4px;flex:0 0 auto;text-transform:uppercase}
  #tema-editor select{width:100%;height:34px;font-size:0.8125rem;border:1px solid var(--line);border-radius:5px;background:#fff;padding:0 8px;margin-top:3px}
  #tema-editor .te-slider{margin:11px 0}
  #tema-editor .te-slh{display:flex;justify-content:space-between;align-items:baseline;font-size:0.8125rem;margin-bottom:4px}
  #tema-editor .te-slh b{color:#6f6c43;font-family:monospace;font-size:0.75rem}
  #tema-editor input[type=range]{width:100%;accent-color:#6f6c43;cursor:pointer}
  #tema-editor .te-fld{margin:9px 0}
  #tema-editor .te-fld > span{font-size:0.75rem;color:#85827b}
  #tema-editor .te-btns{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
  #tema-editor button.te-b{flex:1;min-width:120px;height:38px;border-radius:5px;font-size:0.8125rem;font-weight:600;cursor:pointer;border:1px solid #d2bf81}
  #tema-editor .te-copy{background:#474730;color:#fff;border-color:#474730}
  #tema-editor .te-reset{background:#fff;color:#6f6c43}
  #tema-editor .te-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.4375rem;color:#85827b;cursor:pointer;line-height:1}
  #tema-editor .te-msg{font-size:0.75rem;color:#6f8f4a;font-weight:600;margin-top:8px;min-height:16px;text-align:center}

/* ===== <style sin id> (index.html línea 9721) ===== */
  body.te-picking{cursor:crosshair}
  body.te-picking #tema-editor,body.te-picking #tema-editor *,body.te-picking #te-insp,body.te-picking #te-insp *,body.te-picking #tema-fab{cursor:default}
  body.te-picking [data-te-hover]{outline:2px dashed #b03060 !important;outline-offset:1px}
  [data-te-sel]{outline:2px solid #b03060 !important;outline-offset:1px}
  #te-insp{position:fixed;left:16px;bottom:16px;z-index:100000;width:300px;max-width:92vw;max-height:88vh;overflow-y:auto;
    background:#fbf8f0;border:1px solid var(--line);border-radius:5px;box-shadow:var(--pop-sh);
    font-family:var(--f-head);color:#33302b;padding:14px 14px 16px;display:none}
  #te-insp.open{display:block}
  #te-insp h4{font-family:var(--f-title);font-size:0.875rem;margin:0 0 2px}
  #te-insp .ti-tag{font-size:0.6875rem;color:#6f6c43;font-family:monospace;margin:0 0 10px;word-break:break-all}
  #te-insp .ti-none{font-size:0.75rem;color:#85827b}
  #te-insp textarea{width:100%;min-height:50px;font-family:inherit;font-size:0.8125rem;border:1px solid var(--line);border-radius:5px;padding:6px;resize:vertical;margin-bottom:6px}
  #te-insp .ti-row{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:0.75rem}
  #te-insp .ti-row > span{flex:1;color:#33302b}
  #te-insp input[type=color]{width:30px;height:26px;border:1px solid var(--line);border-radius:5px;padding:0;background:#fff;cursor:pointer;flex:0 0 auto}
  #te-insp input[type=range]{flex:1.5;accent-color:#6f6c43;cursor:pointer}
  #te-insp .ti-val{width:42px;text-align:right;font-family:monospace;font-size:0.6875rem;color:#6f6c43;flex:0 0 auto}
  #te-insp .ti-btns{display:flex;gap:6px;margin-top:12px}
  #te-insp .ti-btns button{flex:1;height:32px;border-radius:5px;font-size:0.75rem;cursor:pointer;border:1px solid #d2bf81;background:#fff;color:#6f6c43}
  #te-insp .ti-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.125rem;color:#85827b;cursor:pointer;line-height:1}
  #te-insp .ti-scope{display:flex;gap:6px;margin-bottom:10px}
  #te-insp .ti-scope button{flex:1;height:30px;border-radius:5px;font-size:0.75rem;cursor:pointer;border:1px solid #d2bf81;background:#fff;color:#6f6c43}
  #te-insp .ti-scope button.on{background:#6f6c43;color:#fff;border-color:#6f6c43;font-weight:600}
  #te-insp .ti-tag b{color:#b03060}
  #te-insp .ti-note{font-size:0.6875rem;color:#85827b;margin:0 0 8px;line-height:1.4}
  #te-pickbtn{width:100%;height:38px;border-radius:5px;font-size:0.8125rem;font-weight:600;cursor:pointer;border:1px solid #474730;background:#474730;color:#fff;margin-bottom:4px}
  #te-pickbtn.on{background:#b03060;border-color:#b03060}
  .te-grp.te-pickgrp{margin-top:6px}

/* ===== <style id="puerta-correo"> (index.html línea 10634) ===== */
  /* ===== Puerta de correo, debajo de los botones de descarga (30 jul 2026) =====
     Copia los valores de #lun-gate, la puerta de las lunas que ya estaba
     aprobada, para que las dos se vean como la misma casa. No se inventa
     ningún color ni ninguna medida nueva. */
  /* Fondo marfil y no blanco: la puerta de las lunas es blanca porque vive
     dentro de una caja marfil, y esta vive sobre la página, que es blanca, así
     que se invertiría y quedaría invisible. Mismo token, al revés. */
  #dl-gate{margin:14px 0 2px;padding:16px 16px 14px;border:1px solid var(--line);
    border-radius:5px;background:var(--paper)}
  #dl-gate input{background:#fff}
  /* Staatliches viene condensada de fábrica y con las letras pegadas se lee mal,
     así que se le abre el tracking a 1px, que es lo que toca con esta fuente
     (Mafe, 22 jul 2026), nunca cambiarla por otra. */
  #dl-gate .dl-gate-t{font-family:var(--f-title);font-size:1.1875rem;letter-spacing:1px;
    color:var(--text);margin:0 0 7px;line-height:1.25;text-transform:none}
  #dl-gate .dl-gate-n{font-size:0.8125rem;line-height:1.5;color:var(--muted);margin:0 0 13px}
  #dl-gate .dl-gate-row{display:flex;gap:9px;flex-wrap:wrap}
  /* La base va en 170px y no en 220 como la puerta de las lunas, porque el
     botón de aquí es más corto y con 220 la suma se pasaba por 4 píxeles en
     una pantalla de 390, así que el botón caía a su propia línea. Medido. */
  #dl-gate input{flex:1 1 170px;min-width:0;height:40px;padding:0 12px;
    font-family:var(--f-body);font-size:0.875rem;border:1px solid var(--line);
    border-radius:5px;background:#fff;color:var(--text)}
  #dl-gate input::placeholder{color:#a8a5a0}
  #dl-gate input:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(94,38,50,.14)}
  /* El width:auto es obligatorio: la regla global "input, select, button" del
     archivo les pone width:100% a todos los botones, y sin esto el botón se
     lleva la fila entera y el campo del correo se le cae debajo.
     El letter-spacing NO se toca, porque el archivo lo fija en 0.5px con
     !important para todos los botones y esa es su decisión de marca. */
  #dl-gate button{flex:0 0 auto;width:auto;height:40px;padding:0 18px;
    font-family:var(--f-body);font-size:0.875rem;font-weight:500;border-radius:5px;
    border:1px solid var(--accent);background:var(--accent);color:#fbf8f1;cursor:pointer}
  #dl-gate button:hover{background:#4d1f29;border-color:#4d1f29}
  #dl-gate button:disabled{opacity:.6;cursor:default}
  #dl-gate .dl-gate-err{font-size:0.78125rem;color:var(--accent);margin:10px 0 0}
  #dl-gate .dl-gate-err:empty{display:none}
  #dl-gate .dl-gate-p{font-size:0.5625rem;line-height:1.55;color:#9a9790;margin:11px 0 0}
  #dl-gate .dl-gate-p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  #dl-gate .dl-gate-done{display:flex;align-items:flex-start;gap:9px}
  #dl-gate .dl-gate-done svg{width:19px;height:19px;flex:0 0 auto;color:var(--accent);margin-top:1px}
  #dl-gate .dl-gate-done p{margin:0;font-size:0.875rem;line-height:1.5;color:var(--text)}

/* ===== <style id="tipografia-display"> (index.html línea 10679) ===== */
  /* ===== Staatliches en rótulos y títulos (aprobado por Mafe, 19 jul 2026) =====
     Se carga desde Google Fonts, junto a Poppins y Arimo, en el <link> de arriba.
     Licencia SIL Open Font License, uso comercial y web sin pagar ni renovar.
     Sustituye a Sailors Slant, que era de pago y no se podía publicar.
     Staatliches lleva su propio nombre, NO suplanta a 'Poppins'. Suplantarla
     arrastraba también botones, KPIs y logo, y tumbaba la jerarquía.
     Rótulo pasa de 12 a 16. El título se queda en 20, solo cambia de fuente. */
  /* --- Rol RÓTULO - Staatliches 16 - +0.5px --- */
  .rotulo,
  .hoy-tiles-h,.hoy-aspgrp-t,.hoy-tile-lab,
  #cta-report .cta-k,
  #belowzone h2,
  .panel-toggle,.fz-collapse,.syn-pill,
  .hoy-aspsum,.daycalc .dc-h,.esshead small,.detailbox .dhead small,
  #astro-info .ai-sub,.advgrp-t,.hoy-sky-do-k,.syn-names,.posgrp-sum .posgrp-t,
  body[data-view="natal"] #natal-only h2,
  .mphbox .mph-label,.patbox .mph-label,
  body[data-view="natal"] #big3box .b3kicker,
  body[data-view="natal"] #big3box .pname,
  body[data-view="natal"] #balance .baltitle,
  body[data-view="natal"] #balance .sumlab{
    font-family:'Manrope',Arial,Helvetica,sans-serif!important;
    font-size:1rem!important;
    letter-spacing:.5px!important;
  }
  /* --- Rol TÍTULO - Staatliches, se queda en su tamaño de siempre - +0.5px --- */
  .titulo,
  .mphbox .mph-name,
  #cta-report .cta-h,
  .acg-picktitle,.hoy-chartdate,.evtitle,.prog-sum-eyebrow,
  .hoy-hero-hi,.hoy-sky-title,.sr-title,
  .hoy-head,.esshead,.detailbox .dhead,#astro-info .ai-head,.syn-h,
  .baldetail .bd-h,.prog-head,.syn-leg-n,.syn-allh{
    font-family:'Manrope',Arial,Helvetica,sans-serif!important;
    letter-spacing:.5px!important;
  }
  /* En celular el h2 de sección y el eyebrow de progresada son TÍTULO, no rótulo
     (decisión de Mafe del 17 jul). Se les devuelve su tamaño, que la regla
     de rótulo de arriba se los había bajado a 16. */
  /* --- Espaciado de los demás textos que pasaron a Staatliches ---
     Estos tenían tracking negativo, calibrado para Poppins, que es ancha.
     Staatliches viene apretada de fábrica y con esos valores las palabras
     se pegaban ("Mercurio, Neptuno y Plutón" iba casi sin separación).
     Se les da el mismo +0.5px que a rótulos y titulares. */
  .mh-logo,.mh-cv,
  .hoy-tile-val,.hoy-tile-ic,.hoy-tips-h,.hoy-cta,.hoy-verasp,.hoy-asp-see,
  .hoy-ts-toggle,.hoy-tl-elab,.hoy-tl-nowlab,.dc-today,
  .pat-name,.plabel,.tkicker,.tpl-dl-txt,
  .prog-card-name,.prog-card-role,.prog-eyebrow,.prog-key-t,.prog-sech,
  .mf-c1 b,
  /* estos tres los pisa .progpanel con más especificidad, hay que repetirlo */
  .progpanel .prog-eyebrow,.progpanel .prog-sech,.progpanel .prog-key-t{
    letter-spacing:.5px!important;
  }
  /* Las insignias redondas "AC" y "MC" son de dos letras dentro de un círculo,
     ahí el aire extra las descentra. Se quedan en cero. */
  .prog-glyph,.prog-glyph span{letter-spacing:0!important}
  /* ===== Energía de hoy - un desplegable por grupo (jul 19 2026) =====
     Antes los tres grupos vivían dentro de un solo desplegable que decía
     "Aspectos entre los planetas de hoy (12)". Ese envoltorio se quitó y
     ahora cada grupo se abre y se cierra por su cuenta. El chevron es el
     mismo --ui-chevron que ya usa el resto de la interfaz. */
  summary.hoy-aspgrp-t{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    /* Recto. Este summary solo lleva borde abajo, y el border-radius:5px que la
       regla global `*` le pone a todo curvaba esa línea en las puntas (la curvita
       que cazó Mafe el 19 jul 2026). Un separador tiene que ser recto. */
    border-radius:0!important;
  }
  summary.hoy-aspgrp-t::-webkit-details-marker{display:none}
  summary.hoy-aspgrp-t::after{
    content:'';
    width:14px;height:14px;flex:0 0 auto;
    background-color:#70706a;
    -webkit-mask:var(--ui-chevron) center/contain no-repeat;
    mask:var(--ui-chevron) center/contain no-repeat;
    transition:transform .2s;
  }
  .hoy-aspgrp-plg:not([open]) summary.hoy-aspgrp-t::after{transform:rotate(-90deg)}
  .hoy-aspgrp-plg:not([open]) summary.hoy-aspgrp-t{margin-bottom:0}
  @media(max-width:900px){
    body[data-view="natal"] #natal-only h2,
    body[data-view="natal"] #belowzone h2,
    body[data-view="hoy"] #belowzone h2,
    body[data-view="transit"] #belowzone h2,
    body[data-view="solar"] #belowzone h2,
    body[data-view="prog"] #belowzone h2,
    body[data-view="sinastria"] #belowzone h2,
    body[data-view="astro"] #belowzone h2,
    body[data-view="natal"] #big3box .b3kicker,
    body[data-view="hoy"] #big3box .b3kicker,
    .mphbox .mph-label,.patbox .mph-label,.daycalc .dc-h,
    #belowzone h2,
    .prog-sum-eyebrow{
      font-family:'Manrope',Arial,Helvetica,sans-serif!important;
      font-size:1.25rem!important;
      letter-spacing:.5px!important;
    }
  }
  /* ===== Tracking único de botones (jul 2026, decisión de Mafe) =====
     TODOS los botones van a -0.5px. Va al final y con !important a propósito,
     porque decenas de reglas anteriores le fijan su propio letter-spacing
     (.tab, .panel-toggle, .hoy-cta, .printbtn, .syn-pill, .readmore...).
     Se apunta a <button> y NADA más. Cuidado al tocar esto, los selectores
     de rótulo (.rotulo, .plabel, .hoy-tile-lab, .pat-name, .tkicker) comparten
     regla con estos botones pero NO son botones, y su tracking positivo es
     parte del sistema tipográfico aprobado.
     La doble negación de id no amplía el alcance (sigue siendo solo <button>,
     y ningún elemento tiene id "sin-uso"). Solo sube la especificidad a 2-0-1
     para ganarle a las reglas .clase{...!important} de más arriba, que si no
     dejaban 27 botones en +0.5px. */
  /* ABIERTO a +0.5px (Mafe, 22 jul 2026, comparando las dos versiones lado a lado).
     Staatliches viene condensada y en negativo los botones de dos palabras se leían
     pegados, «PLANETAS HOY» parecía una sola. Esto revierte el barrido del 20 jul, que
     los había cerrado a -0.5. Cada botón se ensancha entre 11 y 16 px. */
  button:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
  /* "Buscar tránsitos" es un botón pero funciona de título de sección, así que
     lleva el mismo aire que "Patrones del cielo de hoy" (Mafe, 20 jul 2026). */
  button.hoy-ts-toggle:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
  /* Las vistas del desplegable "Mi carta" son <button> y el rodillo de arriba las
     dejaba en -0.5; llevan el espaciado de 1 que pidió Mafe (21 jul 2026) */
  button.mh-cv:not(#sin-uso):not(#sin-uso){letter-spacing:1px!important}
  /* Excepciones al tracking de arriba. Van aquí, juntas, para que se vea de un
     vistazo qué botones se salen de la regla y por qué. Llevan la misma doble
     negación más una clase, para ganarle a la regla general por especificidad.
     Anterior y Siguiente del buscador de tránsitos: en Staatliches a 13px el
     -0.5px los apretaba demasiado (lo cazó Mafe el 19 jul). */
  .hoy-ts-btns button:not(#sin-uso):not(#sin-uso){letter-spacing:0!important}
  /* Botón "Hoy" del control de fecha: va pegado a las cifras de la fecha, y ahí el
     tracking negativo se notaba de más (Mafe, 19 jul 2026). */
  .dc-today:not(#sin-uso):not(#sin-uso){letter-spacing:0!important}
  /* Cabeceras de panel plegable ("Datos de nacimiento", "Momento del tránsito",
     "Lugar y año de tu revolución solar"). Están hechas con <button> por el
     plegado, pero de rol son RÓTULOS de sección, no botones de acción, así que
     el -0.5px no les toca (Mafe, 19 jul 2026). */
  .panel-toggle:not(#sin-uso):not(#sin-uso),
  .fz-collapse:not(#sin-uso):not(#sin-uso){letter-spacing:0!important}
  /* "Quiero mi reporte". Su CSS ya pedía cero, pero la regla general de botones
     de arriba se lo pisaba y lo dejaba apretado (Mafe, 19 jul 2026). Va en
     Staatliches y en mayúsculas, donde el tracking negativo pega más fuerte. */
  .cta-btn:not(#sin-uso):not(#sin-uso){letter-spacing:0!important}
  /* ===== Separadores rectos (jul 2026) =====
     La regla global `*{border-radius:5px!important}` se la aplica a TODO, incluidos
     los elementos que solo llevan una línea abajo para separar. En esos, el radio
     curva las puntas de la línea y se ve una "curvita" rara (Mafe la cazó en los
     títulos de grupo de Energía de hoy). Una línea de separación va recta.
     Si aparece otra curvita en un separador nuevo, se añade su clase aquí. */
  /* #cartachip salió de esta lista el 20 jul 2026: Mafe lo quiere redondo otra vez. */
  .dc-row,.svc-t,#maqueta-header,.hoy-sky-do,.acg-sep{border-radius:0!important}
  /* ===== La rueda natal a lo ancho, la lectura debajo (jul 19 2026) =====
     El panel de "toca un planeta" vivía en una segunda columna de 340px y le
     dejaba a la rueda solo 520px, la mitad de los 902 que usa la de tránsitos.
     Mafe la quiere del mismo tamaño, así que la fila pasa a una sola columna:
     la rueda arriba ocupando todo el ancho y la lectura debajo.
     Solo escritorio. En celular ya iba apilada. */
  @media(min-width:901px){
    body[data-view="natal"] #chartrow{grid-template-columns:minmax(0,1fr)!important}
    body[data-view="natal"] #chartrow #chart{grid-column:1!important;grid-row:1!important}
    body[data-view="natal"] #chartrow #detail,
    body[data-view="natal"] #chartrow #detail-empty{grid-column:1!important;grid-row:2!important}
    /* La línea que unía las dos piezas era vertical porque estaban lado a lado.
       Ahora que van apiladas, separa por arriba. */
    body[data-view="natal"] #chartrow #detail-empty{
      border-left:none!important;
      border-top:1px solid var(--line)!important;
      align-self:stretch;
    }
    /* Lo mismo para la ventana LLENA: su borde izquierdo viejo quedaba pegado al
       borde de la tarjeta blanca y se veía una doble línea (Mafe, 20 jul 2026). */
    body[data-view="natal"] #chartrow #detail{
      border-left:none!important;
      border-top:1px solid var(--line)!important;
    }
    /* Y el piquito que apuntaba a la rueda deja de salir por el costado y sube
       al borde de arriba, centrado bajo la rueda. */
    body[data-view="natal"] #chartrow #detail-empty::before{
      left:50%!important;top:-6px!important;margin-left:-5.5px;
      border-left:1px solid var(--line)!important;
      border-bottom:none!important;
      border-top:1px solid var(--line)!important;
      transform:rotate(45deg)!important;
    }
    /* Apilada ya no hace falta el alto mínimo que la igualaba con la rueda. */
    body[data-view="natal"] #chartrow #detail-empty{min-height:0}
  }
  /* ===== Barra "Tus cartas" - escritorio (jul 19 2026) =====
     Esta barra se quedó fuera del barrido de tamaños y tenía tres medidas
     sueltas, ninguna del sistema: rótulo 11, frase de ayuda 12 y botón 12.
     Se manda a los roles de siempre, igual que el resto de la carta.
     Solo escritorio. En celular ya está calibrada en «limpieza-movil». */
  @media(min-width:901px){
    /* Es el rótulo de una sección, como «Tus Big 3» o «Tus elementos». */
    .people .plabel{
      font-family:'Manrope',Arial,Helvetica,sans-serif;
      font-size:1rem;letter-spacing:.5px;font-weight:400;
    }
    /* Dato secundario que solo se ve cuando aún no hay cartas guardadas.
       El peso 300 no estaba cargado en Arimo, así que caía en falso claro. */
    .people .pempty{
      font-family:'Arimo',sans-serif;
      font-size:0.9375rem;font-weight:500;letter-spacing:-.5px;
    }
    /* Los nombres de las cartas guardadas, mismo rol meta. */
    .people .pchip{font-size:0.9375rem;letter-spacing:-.5px}
    /* Botón de acción, a la par de «Ver mi carta» y «Ver reporte». */
    .people .pbtn{font-size:0.875rem;height:40px;padding:0 18px}
  }
  /* ===== Barrido de tamaños - ESCRITORIO (20 jul 2026, lo pidió Mafe) =====
     El barrido del 17 jul dejó el celular en los 4 roles (12 rótulo - 15 meta ·
     16 cuerpo - 20 título) pero el escritorio quedó sin barrer: hoy tenía 12
     tamaños distintos y natal 8. Aquí se promueve el MISMO criterio que Mafe
     aprobó en «limpieza-movil» sección 17, más los intrusos propios de
     escritorio. El ° en superíndice del Big 3 no se toca, es diseño del tile. */
  @media(min-width:901px){
    /* — intrusos que ya tenían regla aprobada en celular — */
    #houses .hhead span{font-size:0.75rem!important}
    .cta-soon{font-size:0.75rem!important}
    .retrostrip .rchip{font-size:0.9375rem!important}
    #cartachip #cchip-name{font-size:1rem!important}
    #daycalc .dc-rx{font-size:0.75rem!important}
    .hoy-sky-date{font-size:0.75rem!important}
    .hoy-tl-elab,.hoy-tl-nowlab,.hoy-tl-ends span{font-size:0.75rem!important}
    .hoy-asp-see{font-size:0.75rem!important}
    .hoy-tile .hoy-tile-ic{font-size:0.75rem!important}
    .hoy-aspg>span{font-size:0.9375rem!important}
    .hoy-sky-do-t{font-size:1rem!important}
    .hoy-daymsg .hoy-tips-h,.hoy-tips-h{font-size:1rem!important}
    .hoy-tips li{font-size:1rem!important}
    .hoy-hero-hi{font-size:1.25rem!important}
    .hoy-sky-title{font-size:1.25rem!important}
    .hoy-cta{font-size:0.75rem!important}
    #ical-box .tkicker,.tkicker{font-size:0.75rem!important}
    #t-moment,#t-moment b{font-size:0.9375rem!important}
    .icalbox .ical-note,.icalbox p,.icalbox li{font-size:0.9375rem!important}
    .icalbox button{font-size:0.75rem!important}
    .sr-title{font-size:1.25rem!important}
    .sr-body,.syn-intro,.syn-intro b,.syn-empty{font-size:1rem!important}
    #pg-go,#syn-go,#sr-go{font-size:0.75rem!important}
    .prog-sum-badge,.prog-stile-lab,.prog-stile-sub{font-size:0.75rem!important}
    .prog-stile-val{font-size:1rem!important}
    .acg-intro,.acg-intro b{font-size:1rem!important}
    .acg-tok-n,.acg-modebtn,.acg-lab-ang{font-size:0.75rem!important}
    /* — intrusos solo de escritorio (el celular los esconde o ya los tenía bien) — */
    .tpl-dl-txt{font-size:0.75rem!important}
    #detail-empty .de-t{font-size:0.9375rem!important}
    .hoy-asp-orb,body[data-view="hoy"] .hoy-asp-orb{font-size:0.75rem!important}
    .hoy-ts-lead,.hoy-ts-result,.hoy-ts-result b{font-size:0.9375rem!important}
    .hoy-ts-btns button{font-size:0.75rem!important}
    #astro-info,#astro-info div{font-size:1rem!important}
    .prog-sum-note{font-size:0.9375rem!important}
    .prog-crit-lab{font-size:0.75rem!important}
    .prog-crit p{font-size:1rem!important}
    .prog-card-role{font-size:0.75rem!important}
  }
  /* ===== Ajustes de lectura (jul 19 2026, los cazó Mafe) =====
     Van al final para ganarle a las reglas de rótulo de más arriba. */
  /* 0 - "El día de hoy tenemos:" es título de sección, como "Patrones del cielo
     de hoy", no rótulo. Mismo tamaño de título (Mafe, 20 jul 2026). */
  .hoy-tiles-h{font-size:1.25rem!important}
  /* 1 - El dato de la ficha al tocar un punto de la rueda ("Casa 7 - 2° 05'").
     Estaba de rótulo, en Staatliches, y ahí las cifras y el símbolo de grado
     no se leen. Es un dato secundario, así que va al rol META, en Arimo. */
  .detailbox .dhead small{
    font-family:'Arimo',sans-serif!important;
    font-size:0.9375rem!important;font-weight:500!important;
    letter-spacing:-.5px!important;text-transform:none!important;
    color:#70706a!important;
  }
  /* 2 - La cabecera del detalle de elementos ("Fuego - 4 puntos"). Staatliches
     ya viene condensada de fábrica y el -0.8px la dejaba apretada. Va a cero. */
  .baldet-inline .bd-h,
  .baldet-inline .bd-el,
  .baldet-inline .bd-c,
  .baldetail .bd-h{letter-spacing:0!important}
  /* 3 - Las descripciones de elementos y del resumen pasan al rol CUERPO, el
     mismo de la fase lunar ("Naciste con la luna llena…"). Estaban en meta,
     un punto más chicas y con más peso, y no empastaban. El color se respeta
     tal como está en cada sitio, aquí solo se iguala la fuente. */
  .baldet-inline .bd-x,
  .baldetail .bd-x,
  .balcap{
    font-family:'Arimo',sans-serif!important;
    font-size:1rem!important;font-weight:400!important;
    letter-spacing:-.5px!important;line-height:1.35!important;
  }
  /* 4 - El chip con los datos de la persona ("Mafe - 15 junio 1990...") va
     oscuro también en escritorio, igual que ya lo aprobó Mafe en celular.
     Los colores son EXACTAMENTE los de «limpieza-movil», no se inventan otros.
     Y vuelve a sus 5px de radio, por eso ya no está en la lista de
     separadores rectos de arriba (Mafe, 20 jul 2026). */
  @media(min-width:901px){
    #cartachip{background:#021212!important;border-color:#021212!important}
    #cartachip #cchip-name{color:#ffffff!important}
    #cartachip #cchip-meta{color:#afafaf!important}
    #cartachip .cchip-edit-lbl{color:#ffffff!important}
  }
  /* 4b - Las viñetas de datos de la ventana de lectura (decisión de Mafe,
     20 jul 2026): tres datos en lista, punto en vino, mismo peso que llevaba
     la frase en negrita. */
  .dtext .dt-datos{margin:0 0 12px;padding-left:20px}
  .dtext .dt-datos li{font-weight:600;margin:0 0 6px}
  .dtext .dt-datos li::marker{color:#3B161F}
  /* 5 - "Toca Sol, Luna o Ascendente para leer qué te define" va con la misma
     ropa que "Toca cualquier planeta, signo o eje" (.charthint): Arimo 12,
     gris, alineado a la izquierda, justo debajo del rótulo TUS BIG 3
     (Mafe, 20 jul 2026). El id sube la especificidad para ganarle a las
     reglas de Staatliches y a la capa del editor tipográfico. */
  #esshint:not(#sin-uso):not(#sin-uso){
    font-family:'Arimo',Arial,sans-serif!important;
    font-size:0.75rem!important;font-weight:400!important;
    letter-spacing:-.5px!important;text-transform:none!important;
    color:#70706a!important;text-align:left!important;
  }
  /* 6 - El bloque de buscar evento, con UNA sola jerarquía (Mafe, 27 jul 2026:
     «demasiados colores, qué feo, homogenízalo»). Antes había tres rellenos
     oscuros de tres tonos distintos peleándose, el Ahora gris, el Ver gris y
     Anterior y Siguiente en antracita macizo. Ahora manda uno solo: VER va
     relleno en antracita, que es la acción, y las dos flechas pasan a contorno
     fino, que solo sirven para moverse una vez que ya estás viendo algo. */
  #transit-box #s-ver{width:100%;height:40px;padding:0 18px;background:#021212;border:1px solid #021212;
    border-radius:5px;color:#ffffff;font-family:var(--f-title);font-size:0.875rem;font-weight:600;
    letter-spacing:.02em;cursor:pointer}
  #transit-box #s-ver:hover{opacity:.9}
  #transit-box #s-prev,#transit-box #s-next{display:inline-flex;align-items:center;justify-content:center;gap:5px;
    height:36px;padding:0 14px;background:transparent;border:1px solid var(--line);border-radius:5px;
    color:var(--muted);font-family:var(--f-title);font-size:0.75rem;cursor:pointer}
  #transit-box #s-prev:hover,#transit-box #s-next:hover{background:transparent;border-color:var(--muted);color:var(--text)}
  #transit-box #s-prev .ui-ic,#transit-box #s-next .ui-ic{width:13px;height:13px}
  /* El resultado deja de ser un renglón en negrita a media página y pasa a ser
     una línea discreta, que la ficha de arriba ya cuenta el evento entero. */
  #transit-box .sresult{text-align:left;font-size:0.75rem;color:var(--muted);margin-top:10px;line-height:1.45}
  #transit-box .sresult b{font-weight:600;color:var(--text)}
  /* Y la fila de arriba entra en la misma familia: las flechas y el «Ahora» eran
     otros dos tonos sueltos, el beige verdoso y un gris que no está en la paleta.
     Todo lo que no es LA acción va en contorno fino, así el único bloque de color
     de la vista es el VER y el ojo sabe siempre dónde tocar. */
  #transit-box .tnav button{background:transparent;border:1px solid var(--line);color:var(--muted)}
  #transit-box .tnav button:hover{background:transparent;border-color:var(--muted);color:var(--text)}
  #transit-box #t-now{background:transparent;border:1px solid var(--line);color:var(--muted);
    font-family:var(--f-title);font-size:0.8125rem}
  #transit-box #t-now:hover{background:transparent;border-color:var(--muted);color:var(--text);filter:none}
  #s-prev:not(#sin-uso):not(#sin-uso),
  #s-next:not(#sin-uso):not(#sin-uso){letter-spacing:0!important}
  /* 7 - Flechita en las filas de aspectos de Energía de hoy: se tocan para ver
     el aspecto moverse en la rueda, pero nada lo anunciaba (Mafe, 20 jul 2026).
     Cerrada apunta a la derecha; abierta baja y se pinta de vino. */
  body[data-view="hoy"] .hoy-asp-head::after{
    content:'';width:14px;height:14px;flex:0 0 auto;
    background-color:#70706a;
    -webkit-mask:var(--ui-chevron) center/contain no-repeat;
    mask:var(--ui-chevron) center/contain no-repeat;
    transform:rotate(-90deg);transition:transform .18s;
  }
  body[data-view="hoy"] .hoy-asp.on .hoy-asp-head::after{
    background-color:#3B161F;transform:rotate(0deg);
  }

/* ===== <style id="editor-tipografico-jul20"> (index.html línea 11042) ===== */
  /* ===== Ajuste fino del editor tipográfico (Mafe, 20 jul 2026) =====
     67 cambios que Mafe fijó fila por fila en su editor visual (artifact
     "Inventario tipográfico"), viendo cada muestra con las fuentes reales.
     El inventario se levantó con los valores computados de ESCRITORIO, por eso
     toda la capa va en min-width:901px; el celular conserva su calibración
     aprobada de «limpieza-movil». Cada regla lleva SOLO las propiedades que
     ella cambió; lo demás sigue saliendo de las capas de arriba.
     La doble negación :not(#sin-uso) es el mismo truco de «tipografia-display»:
     no amplía el alcance, solo sube la especificidad para ganarle a las reglas
     !important anteriores. Esta capa va de última a propósito. */
  @media(min-width:901px){
    /* — Arimo 12: datos y ayudas pequeñas — */
    .hoy-sky-date:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important;line-height:1.4!important}
    .dc-rx:not(#sin-uso):not(#sin-uso){line-height:1.7!important}
    .hoy-asp-orb:not(#sin-uso):not(#sin-uso){letter-spacing:-.7px!important}
    #cchip-meta:not(#sin-uso):not(#sin-uso){font-weight:400!important}
    .charthint:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important}
    .ical-more>summary:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important}
    #ical-go:not(#sin-uso):not(#sin-uso),
    #pg-go:not(#sin-uso):not(#sin-uso),
    #syn-go:not(#sin-uso):not(#sin-uso){font-weight:400!important}
    .prog-stile-sub:not(#sin-uso):not(#sin-uso),
    .coords-auto:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important}
    .acg-tok-n:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important}
    .acg-lab-ang:not(#sin-uso):not(#sin-uso){letter-spacing:.3px!important}
    /* — Staatliches 12: fuera el bold falso (solo existe el peso 400; con 600/700
       el navegador lo engordaba artificialmente) y aire de +0.5 — */
    .hoy-tile-ic:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    #dc-today:not(#sin-uso):not(#sin-uso),
    #cta-report-btn:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    .tpl-dl-txt:not(#sin-uso):not(#sin-uso),
    .cchip-edit-lbl:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    .hoy-tl-elab:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    #maqueta-footer .mf-col h4:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    .mf-c1 b:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    .esshint:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    .postab th:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    #houses .hhead span:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    .h-empty:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.3px!important}
    .tkicker:not(#sin-uso):not(#sin-uso),
    .acg-picktitle:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    label:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    .prog-sum-badge:not(#sin-uso):not(#sin-uso),
    .prog-stile-lab:not(#sin-uso):not(#sin-uso){font-weight:300!important;letter-spacing:.5px!important}
    .prog-eyebrow:not(#sin-uso):not(#sin-uso),
    .prog-sech:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    .prog-card-role:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    /* — 12.5 y 13 bajan al rol de 12 — */
    .svc-mode:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important}
    /* A 16 con espaciado de 1 también en escritorio (Mafe, 21 jul 2026) */
    .mh-cv:not(#sin-uso):not(#sin-uso){font-size:1rem!important;font-weight:300!important;letter-spacing:1px!important}
    .svc-meta:not(#sin-uso):not(#sin-uso),
    .svc-meta span:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important}
    .rail-sep:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important;letter-spacing:.5px!important}
    /* — 14: pestañas del rail, botones del carrusel, chevrones — */
    #hero .chartfan .cf-nm:not(#sin-uso):not(#sin-uso){letter-spacing:-.8px!important}
    .svc-btn:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    .pt-ch:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    /* — Arimo 15: los datos secundarios se compactan — */
    .hoy-tile-sub:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important}
    .dc-pos:not(#sin-uso):not(#sin-uso),
    .pt-deg:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    .hoy-ts-lead:not(#sin-uso):not(#sin-uso),
    .ical-note:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important}
    .pat-mem:not(#sin-uso):not(#sin-uso),
    .mph-meta:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important}
    body[data-view="natal"] #big3box .b3deg:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important}
    .hoy-asp-nm:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.5px!important}
    #detail-empty .de-t:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important;letter-spacing:-.7px!important}
    .pt-h:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;font-weight:700!important;letter-spacing:-.5px!important}
    .rchip:not(#sin-uso):not(#sin-uso),
    #t-moment:not(#sin-uso):not(#sin-uso),
    #t-moment b:not(#sin-uso):not(#sin-uso){font-size:0.90625rem!important;letter-spacing:-.5px!important}
    .rnote:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;font-weight:300!important}
    #asp .asp-g:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important}
    .icalbox p b:not(#sin-uso):not(#sin-uso),
    .ical-note b:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.7px!important}
    .prog-sum-note:not(#sin-uso):not(#sin-uso){font-size:0.75rem!important;letter-spacing:-.5px!important}
    /* — Staatliches 15 → 14 — */
    .posgrp-ar:not(#sin-uso):not(#sin-uso),
    .cur-h:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:.5px!important}
    .h-num:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    .prog-card-name:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    /* — Arimo 16 (rol cuerpo) → 14 en escritorio. La fila del editor agrupaba
       las 71 apariciones del combo, no solo los tres selectores de muestra,
       así que baja el grupo cuerpo completo de «estilo-ligero». — */
    .dc-nm:not(#sin-uso):not(#sin-uso),
    .hoy-asptxt:not(#sin-uso):not(#sin-uso),
    .mph-desc:not(#sin-uso):not(#sin-uso),
    .detailbox .dtext:not(#sin-uso):not(#sin-uso),
    .esstext:not(#sin-uso):not(#sin-uso),
    #astro-info .ai-body:not(#sin-uso):not(#sin-uso),
    .baldetail .bd-m:not(#sin-uso):not(#sin-uso),
    .evpanel:not(#sin-uso):not(#sin-uso),
    .hoy-daymsg:not(#sin-uso):not(#sin-uso),
    .pt-n:not(#sin-uso):not(#sin-uso),
    .syn-card p:not(#sin-uso):not(#sin-uso),
    .progpanel p:not(#sin-uso):not(#sin-uso),
    .baldet-inline .bd-x:not(#sin-uso):not(#sin-uso),
    .baldetail .bd-x:not(#sin-uso):not(#sin-uso),
    .balcap:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    .hoy-sky-do-t:not(#sin-uso):not(#sin-uso),
    .syn-intro:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    .pt-p:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.5px!important}
    .pt-s:not(#sin-uso):not(#sin-uso),
    .syn-empty:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.5px!important}
    .h-name:not(#sin-uso):not(#sin-uso){letter-spacing:-.8px!important}
    #asp .asp-tx b:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;font-weight:400!important}
    #cta-report .cta-p:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important}
    .acg-intro:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.5px!important}
    .acg-intro b:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;font-weight:600!important}
    #astro-info:not(#sin-uso):not(#sin-uso),
    #astro-info div:not(#sin-uso):not(#sin-uso){font-size:0.875rem!important;letter-spacing:-.5px!important}
    /* — Staatliches 16 y 20: pesos reales y aire uniforme de +0.5 — */
    .hoy-tile-val:not(#sin-uso):not(#sin-uso),
    .prog-head:not(#sin-uso):not(#sin-uso){font-weight:300!important}
    .svc-nm:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    .mf-brand:not(#sin-uso):not(#sin-uso){font-weight:600!important;letter-spacing:.5px!important}
    body[data-view="natal"] #big3box .b3card.asc .b3glyph:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    .sumval:not(#sin-uso):not(#sin-uso){font-weight:600!important;letter-spacing:.5px!important}
    .panel-toggle:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    .prog-stile-val:not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
    body[data-view="natal"] #big3box .b3sign:not(#sin-uso):not(#sin-uso){font-weight:600!important}
  }

/* ===== <style id="letras-evento-mafe"> (index.html línea 11168) ===== */
  /* ===== Letras del panel de eventos, valores dictados por Mafe con el editor
     (21 jul 2026, captura). Va al final a propósito para ganarle a los roles
     tipográficos globales. El editor con el que se eligieron ya se retiró. ===== */
  .evtitle{font-family:'Manrope',Arial,Helvetica,sans-serif!important;font-size:1.25rem!important;font-weight:600!important;letter-spacing:-0.08px!important;margin-top:0!important;color:#021212!important}
  .evtitle .evcasa{color:#70706a!important}
  /* El texto del evento es CUERPO, no rótulo (Mafe lo cazó el 27 jul 2026 comparándolo
     con las descripciones de las consultas). El barrido de tamaños de móvil lo había
     metido en el saco de los textos chicos, a 12px, que es el tamaño de un rótulo, y
     por eso se leía más apretado que el resto de la página. Ahora va al mismo rol que
     la descripción de un servicio, 14px en celular y 16px en pantalla grande. */
  .evline{font-family:'Arimo',sans-serif!important;font-size:0.875rem!important;line-height:1.35!important;letter-spacing:0!important;color:#4a4a44!important}
  @media(min-width:901px){.evline{font-size:1rem!important}}
  /* La invitación a tocar la rueda es una nota al pie, no una frase de la lectura
     (Mafe, 27 jul 2026), así que se queda un escalón por debajo del cuerpo y toma
     aire por arriba. Va con !important porque la regla de .evline también lo lleva. */
  .evpanel .ev-pista{font-size:0.75rem!important;line-height:1.35!important;margin-top:12px!important;color:#70706a!important}
  .evint-h{font-family:'Arimo',sans-serif!important;font-size:0.6875rem!important;letter-spacing:0!important;color:#3B161F!important;margin-top:20px!important}
  /* La afirmación de cierre y la idea para intenciones van en cursiva (Mafe, 27 jul
     2026): no son la lectura del evento, son una frase para decirse en voz alta, y
     la cursiva avisa de ese cambio de registro sin necesidad de explicarlo. */
  .evint-one{font-family:'Arimo',sans-serif!important;font-size:0.875rem!important;font-style:italic!important;line-height:1.4!important;letter-spacing:0!important;color:#021212!important}

/* ===== <style id="espaciado-staatliches"> (index.html línea 11387) ===== */
/* ===== GUARDIA DEL ESPACIADO EN STAATLICHES (Mafe, 23 jul 2026) =====
   Staatliches viene APRETADA de fábrica. El 19 jul 2026 Mafe comparó -0.5, 0 y +0.5
   en COMPARA-espaciado.html y eligió +0.5px para rótulo y título. Aun así quedaban
   textos en Staatliches SIN espaciado propio, que por herencia se comían el valor
   negativo del body y salían con las letras pegadas. Aquí se les pone el +0.5px
   que les toca. Si creas un texto nuevo en Staatliches, dale +0.5px desde el
   primer momento y NUNCA un valor negativo, que ese se calibró para Poppins. */
.b3head:not(#sin-uso),
#angles:not(#sin-uso),
#angles .big3:not(#sin-uso),
#angles .b3card:not(#sin-uso),
.posgrp-sum:not(#sin-uso),
.hoy-rx-nm:not(#sin-uso),
.prog-crit-lab:not(#sin-uso),
#astro-info .ai-head:not(#sin-uso),
#astro-info .ai-sub:not(#sin-uso),
.sumval:not(#sin-uso),
.prog-sum-badge:not(#sin-uso),
.prog-stile-val:not(#sin-uso){letter-spacing:.5px!important}
/* El "En automático" del desplegable de coordenadas tenía su propia regla con -0.5px */
.coords-auto:not(#sin-uso):not(#sin-uso):not(#sin-uso){letter-spacing:.5px!important}
/* Excepciones a propósito, NO tocar: los grados sueltos del Big 3 y las insignias
   redondas AC/MC de la progresada, donde el aire extra descentra el número. */
#big3box .b3deg:not(#sin-uso),.prog-glyph:not(#sin-uso){letter-spacing:0!important}

/* ===== <style id="solarserv-estilo"> (index.html línea 11414) ===== */
/* ===== Bloque de consultas de la revolucion solar (Mafe, 23 jul 2026) =====
   Solo se ve en la vista solar. Fuera de ahi no existe. */
#solarserv{display:none}
/* Va como SECCION APARTE, no como un trozo mas del panel de la rueda (Mafe, 23 jul 2026).
   Se sale de los 18px de padding lateral de #belowzone con margenes negativos, para
   que la franja beige llegue de borde a borde del panel, igual que hace el carrusel
   de consultas del final de la pagina. */
body[data-view="natal"] #solarserv,
body[data-view="transit"] #solarserv,
body[data-view="solar"] #solarserv,
body[data-view="astro"] #solarserv{display:block;background:var(--paper);
  margin:48px -18px -44px;padding:38px 24px 42px;border-radius:0 0 5px 5px}
/* OJO CON EL ESPACIADO. Staatliches viene apretada de fabrica y todo lo que va en
   ella lleva +0.5px, nunca negativo. Ver el bloque espaciado-staatliches del final. */
/* OJO DE ESPECIFICIDAD: hay una regla global para los h2 de #belowzone que los deja
   en 16px y gris (rol rotulo). Un .ss-titulo pelado NO le gana, hay que repetir el
   body[data-view="solar"] y el #belowzone. Mismo tamano que el nombre de la tarjeta,
   20px, que es lo que pidio Mafe el 23 jul 2026, y con aire de sobra hasta las fotos. */
body[data-view="natal"] #belowzone #solarserv .ss-titulo,
body[data-view="transit"] #belowzone #solarserv .ss-titulo,
body[data-view="astro"] #belowzone #solarserv .ss-titulo,
body[data-view="solar"] #belowzone #solarserv .ss-titulo{font-family:var(--f-title)!important;font-size:1.25rem!important;font-weight:400!important;letter-spacing:.5px!important;line-height:1.2!important;color:var(--text)!important;text-transform:none!important;margin:0 0 30px!important;border-bottom:none!important;padding-bottom:0!important}
.ss-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Cuando la vista solo tiene una o dos consultas, las tarjetas no se estiran
   a media pagina, se quedan de su tamano y la fila se centra. */
.ss-cards.ss-1{grid-template-columns:minmax(0,320px);justify-content:center}
.ss-cards.ss-2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
.ss-card{background:#fff;padding:0 0 24px;display:flex;flex-direction:column;overflow:hidden;border-radius:5px}
/* La pre-revolucion va en beige para que se lea de una que es otro tipo de servicio,
   no una variante de la lectura del ano. */
.ss-card.ss-otro{background:#f7f2e6}
.ss-card>*:not(.ss-foto){margin-left:24px;margin-right:24px}
/* Cuadrada desde el 20 ago 2026: las ilustraciones de spazio spazio son ruedas
   centradas y en 4/3 se les cortaban el borde de arriba y el de abajo. */
.ss-foto{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block;margin:0 0 20px;border-radius:5px 5px 0 0}
.ss-modo{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--f-title);font-size:0.75rem;font-weight:400;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep);border:1px solid #e0cfd2;border-radius:5px;padding:4px 10px;margin:0 0 14px}
.ss-modo-grab{color:#55554f;border-color:#ddd9d0}
.ss-card.ss-otro .ss-modo{border-color:#e6d3d6;background:#fffdf8}
/* Iconos de Google Material Symbols, licencia Apache 2.0. */
.ss-ic{width:1.05em;height:1.05em;flex:none;fill:currentColor;vertical-align:-.16em;pointer-events:none}
.ss-nm{font-family:var(--f-title);font-size:1.25rem;font-weight:400;letter-spacing:.5px;line-height:1.2;color:var(--text);margin:0 0 11px}
.ss-tx{font-family:var(--f-head);font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:-.5px;color:#4a4a44;margin:0 0 12px}
.ss-nota{font-family:var(--f-head);font-size:0.8125rem;font-weight:400;line-height:1.4;letter-spacing:-.3px;color:var(--muted);margin:0 0 20px}
.ss-pie{margin-top:auto}
.ss-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--f-head);font-size:0.9375rem;font-weight:400;letter-spacing:-.5px;color:var(--text);margin:0 0 15px}
.ss-precio{font-family:var(--f-title);font-size:1rem;letter-spacing:.5px}
.ss-btn{display:inline-block;width:100%;box-sizing:border-box;text-align:center;padding:11px 14px;background:var(--label);color:#fff;border-radius:5px;font-family:var(--f-title);font-size:1rem;font-weight:400;letter-spacing:.5px;text-decoration:none;transition:background .15s}
.ss-btn:hover{background:var(--label-hover)}
@media(max-width:900px){
  body[data-view="natal"] #solarserv,
  body[data-view="transit"] #solarserv,
  body[data-view="astro"] #solarserv,
  body[data-view="solar"] #solarserv{margin:32px -14px -44px;padding:28px 16px 32px}
  /* Una debajo de otra en celular (Mafe, 27 jul 2026). La regla de una columna ya
     estaba, pero .ss-2 y .ss-1 le ganaban por llevar dos clases, así que las vistas
     con dos consultas seguían partiendo la pantalla en dos y el texto salía en
     columnas de tres palabras. */
  .ss-cards,.ss-cards.ss-1,.ss-cards.ss-2{grid-template-columns:1fr;gap:18px}
  /* En celular la letra se baja a la escala de las tarjetas del carrusel de abajo,
     que es la referencia que ya tenias (nombre 15, modo 12.5, meta 13). A 20/16/15
     las mias se veian enormes al lado de las tuyas (Mafe, 23 jul 2026). */
  body[data-view="natal"] #belowzone #solarserv .ss-titulo,
  body[data-view="transit"] #belowzone #solarserv .ss-titulo,
  body[data-view="astro"] #belowzone #solarserv .ss-titulo,
  body[data-view="solar"] #belowzone #solarserv .ss-titulo{font-size:1.125rem!important;margin-bottom:16px!important}
  .ss-nm{font-size:1rem;margin-bottom:8px}
  .ss-tx{font-size:0.875rem;line-height:1.45;margin-bottom:10px}
  .ss-nota{font-size:0.78125rem;line-height:1.4;margin-bottom:16px}
  .ss-meta{font-size:0.8125rem;margin-bottom:12px}
  .ss-precio{font-size:0.875rem}
  .ss-modo{font-size:0.6875rem;padding:3px 9px;margin-bottom:12px}
  .ss-btn{font-size:0.875rem;padding:10px 14px}
  .ss-card{padding-bottom:20px}
  .ss-card>*:not(.ss-foto){margin-left:18px;margin-right:18px}
  .ss-foto{margin-bottom:16px}
}

/* ===== <style id="qz-estilo"> (index.html línea 11493) ===== */
/* ===== Quiz de servicios (Mafe, 23 jul 2026) ===== */
.qz{max-width:1140px;margin:0 auto 34px;background:#fff;border-radius:5px;padding:30px 28px 32px}
.qz-head{margin-bottom:22px}
/* Staatliches va apretada de fabrica, siempre +0.5px, nunca negativo. */
.qz-t{font-family:var(--f-title);font-size:1.25rem;font-weight:400;letter-spacing:.5px;line-height:1.2;color:var(--text);margin:0 0 7px;border-bottom:none!important;padding-bottom:0!important}
.qz-sub{font-family:var(--f-head);font-size:1rem;font-weight:400;letter-spacing:-.5px;line-height:1.45;color:var(--muted);margin:0}
.qz-paso{font-family:var(--f-title);font-size:0.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px;display:block}
.qz-preg{font-family:var(--f-head);font-size:1rem;font-weight:700;letter-spacing:-.5px;line-height:1.4;color:var(--text);margin:0 0 16px}
.qz-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
/* OJO: hay una regla global button{width:100%;height:40px} en la linea 68 que
   recortaba las opciones de dos lineas. Hay que devolverle el alto automatico. */
.qz-op b{font-weight:700}
/* El resto de la frase va en gris y sin peso, para que la cabeza en negrita sea lo
   que se lee de un barrido y el detalle solo si hace falta (Mafe, 27 jul 2026). */
.qz-op .qz-op-r{color:var(--muted);font-weight:400}
.qz-op:hover .qz-op-r,.qz-op.on .qz-op-r{color:inherit;opacity:.75}
.qz-op{display:block;width:100%;height:auto;min-height:0;text-align:left;background:var(--paper);border:1px solid transparent;border-radius:5px;padding:15px 17px;cursor:pointer;
  font-family:var(--f-head);font-size:1rem;font-weight:400;letter-spacing:-.5px;line-height:1.4;color:var(--text);transition:background .15s,border-color .15s}
.qz-op:hover,.qz-op:focus-visible{background:#f4eee1;border-color:var(--gold-deep)}
.qz-atras{margin-top:16px;width:auto;height:auto;background:none;border:none;padding:0;cursor:pointer;font-family:var(--f-head);font-size:0.9375rem;letter-spacing:-.5px;color:var(--muted);text-decoration:underline}
.qz-atras:hover{color:var(--text)}
/* OJO: la regla global button:not(#sin-uso):not(#sin-uso){letter-spacing:.5px} de la
   linea ~7601 les mete +0.5px a TODOS los botones, porque casi todos son rotulos en
   Staatliches. Las opciones del quiz son la excepcion, son texto de lectura en Arimo
   dentro de un <button>, asi que les toca el -0.5px del rol cuerpo. Sin esto se veian
   con las letras abiertas y desentonaban con el texto de las tarjetas (Mafe, 23 jul 2026). */
.qz .qz-op:not(#sin-uso):not(#sin-uso),
.qz .qz-atras:not(#sin-uso):not(#sin-uso){letter-spacing:-.5px!important}
/* ---- resultado ---- */
.qz-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:26px;align-items:start}
.qz-res-k{font-family:var(--f-title);font-size:0.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep);margin:0 0 6px;display:block}
.qz-res-nm{font-family:var(--f-title);font-size:1.25rem;font-weight:400;letter-spacing:.5px;line-height:1.2;color:var(--text);margin:0 0 10px}
.qz-res-por{font-family:var(--f-head);font-size:1rem;font-weight:400;letter-spacing:-.5px;line-height:1.5;color:#4a4a44;margin:0 0 14px}
.qz-ficha{background:var(--paper);border-radius:5px;padding:18px 20px 20px}
.qz-ficha-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-head);font-size:0.9375rem;letter-spacing:-.5px;color:var(--text);margin:0 0 8px}
.qz-ficha-fila:last-of-type{margin-bottom:16px}
.qz-ficha-fila b{font-family:var(--f-title);font-size:1rem;font-weight:400;letter-spacing:.5px}
.qz-ic{width:1.05em;height:1.05em;flex:none;fill:currentColor;vertical-align:-.16em;pointer-events:none}
.qz-modo{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-title);font-size:0.75rem;font-weight:400;letter-spacing:.5px;text-transform:uppercase;color:var(--gold-deep);border:1px solid #e0cfd2;border-radius:5px;padding:4px 10px;margin:0 0 12px}
.qz-btn{display:block;width:100%;box-sizing:border-box;text-align:center;padding:12px 14px;background:var(--label);color:#fff;border-radius:5px;
  font-family:var(--f-title);font-size:1rem;font-weight:400;letter-spacing:.5px;text-decoration:none;transition:background .15s}
.qz-btn:hover{background:var(--label-hover)}
.qz-tambien{margin:18px 0 0;font-family:var(--f-head);font-size:0.9375rem;letter-spacing:-.5px;line-height:1.5;color:var(--muted)}
.qz-tambien a{color:var(--gold-deep);text-decoration:underline}
@media(max-width:820px){
  .qz{padding:24px 18px 26px;margin-bottom:26px}
  .qz-ops{grid-template-columns:1fr}
  .qz-res{grid-template-columns:1fr;gap:18px}
  /* Misma bajada de escala que en las tarjetas de arriba. */
  .qz-t{font-size:1.125rem}
  .qz-sub{font-size:0.875rem}
  .qz-preg{font-size:0.9375rem;margin-bottom:14px}
  .qz-op{font-size:0.9375rem;padding:13px 15px}
  .qz-res-nm{font-size:1.125rem}
  .qz-res-por{font-size:0.875rem}
  .qz-ficha-fila{font-size:0.875rem}
  .qz-ficha-fila b{font-size:0.9375rem}
  .qz-btn{font-size:0.875rem}
  .qz-tambien{font-size:0.84375rem}
}

/* ===== <style id="navbaja-mafe"> (index.html línea 11945) ===== */
  #navbaja,#navtodas,#navtodas-velo,#navreserva{display:none}
  @media(max-width:900px){
    /* Vino tinto de marca (Mafe, 27 jul 2026). La pastilla del header se va en
       celular, asi que el vino que tenia arriba se muda aqui abajo. */
    /* El !important en el radio es obligatorio. El index trae un
       `*{border-radius:5px!important}` global que le curvaba las esquinas de arriba
       a la franja y dejaba ver el fondo por los picos (Mafe, 27 jul 2026). La franja
       va de filo recto y de lado a lado. */
    /* Las columnas se reparten solas, que la barra tiene cuatro puertas y una quinta
       que aparece solo cuando estas dentro de una vista que no es Hoy ni Mi carta. */
    /* Vino mas oscuro que el de marca, solo para esta franja (Mafe, 27 jul 2026).
       El #3B161F sigue siendo el acento de todo lo demas, esto es una variante
       oscura del mismo tono para que la barra pese contra el contenido claro. */
    /* ===== Barra elastica (Mafe, 27 jul 2026, foto de su iPhone) =====
       Con las letras en rem, el texto crece con el ajuste de letra del telefono, y las
       columnas de 1fr no saben encoger por debajo del ancho de su palabra, asi que
       RESERVAR empujaba la fila y se salia por el borde derecho. minmax(0,1fr) les da
       permiso de encoger, y la letra se escala con el ancho del aparato con un techo,
       para que en cualquier telefono quepa la fila entera. */
    #navbaja{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
      position:fixed;left:0;right:0;bottom:0;z-index:9500;
      background:#2C1017;border-radius:0!important;column-gap:6px;
      border-top:1px solid rgba(255,255,255,.14);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
    #navbaja .nb-b[hidden]{display:none}
    /* height:auto es obligatorio. El index tiene un `input,select,button{height:40px}`
       global y sin esto aplasta los botones y el texto se sale por debajo. */
    /* Marfil pleno, no translucido. A 10px sobre vino, un blanco al 72 por ciento
       se lee gris sucio (Mafe, 27 jul 2026: "me cuesta ver los iconos y las letras"). */
    .nb-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
      min-width:0;background:none;border:none;height:auto;padding:5px 0 4px;cursor:pointer;color:#f2e4e6;
      font-family:var(--f-title);font-size:clamp(0.625rem,3.2vw,0.78125rem);letter-spacing:.03em;line-height:1;text-align:center;
      text-decoration:none;border-radius:5px;margin:0}
    .nb-b svg{width:22px;height:22px;flex:0 0 auto;pointer-events:none;
      fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
    .nb-b svg .relleno{fill:currentColor;stroke:none}
    /* La vista donde estas parada se marca con el marfil pleno y un fondo apenas
       levantado. El bloque marfil solido NO se usa aqui, que ese es de Reservar. */
    .nb-b.on{color:#ffffff;background:rgba(255,255,255,.15)}
    .nb-b.on svg{stroke-width:1.2}
    /* La etiqueta reserva dos lineas SIEMPRE, aunque use una, para que la franja no
       cambie de alto cuando la ranura camaleonica pasa de "Todas" a un nombre largo. */
    .nb-b span{display:flex;align-items:center;justify-content:center;text-align:center;
      min-height:21px;width:100%}
    /* Astrocartografia y Revolucion solar van con su nombre entero (Mafe, 27 jul
       2026), asi que en la ranura camaleonica bajan de cuerpo y se parten en dos
       lineas por el guion blando que lleva el texto. */
    .nb-b.nb-largo{font-size:clamp(0.5rem,2.6vw,0.625rem);letter-spacing:0}
    .nb-b.nb-largo span{line-height:1.12;hyphens:manual;white-space:pre-line}
    /* Reservar es la unica puerta que saca de la herramienta y lleva al negocio, y
       de 808 personas solo once la tocaron, asi que es la que tiene que cantar.
       Es el unico bloque marfil solido de la franja (Mafe, 27 jul 2026). */
    .nb-b.nb-reservar{color:#2C1017;background:#fbf8f1;margin:0;padding:5px 0 5px}
    .nb-b.nb-reservar svg{stroke-width:1.2}
    /* La pastilla vino del header se quita en celular, que la barra ya la sustituye
       y decian las dos lo mismo (Mafe, 27 jul 2026). En computadora sigue viva. */
    #maqueta-header .mh-carta{display:none!important}
    /* El contenido necesita sitio para que la barra no le tape el final. La franja
       mide 73 con la etiqueta de dos lineas reservada, asi que van 80. */
    body{padding-bottom:86px}
    /* Mientras el cartelito de cookies esta abajo, la barra se aparta y no pelean */
    body:has(#ck-bar.ck-visible) #navbaja{display:none}
    /* Hoja de las ocho, sube desde abajo al tocar "Todas" */
    #navtodas-velo{display:block;position:fixed;inset:0;z-index:9600;background:rgba(38,38,32,.42);
      opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
    #navtodas,#navreserva{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9700;
      background:var(--paper);border-top:1px solid var(--line);
      border-radius:14px 14px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom));
      transform:translateY(102%);transition:transform .22s ease;max-height:80vh;overflow-y:auto}
    body.navtodas-abierta #navtodas-velo,body.navreserva-abierta #navtodas-velo{opacity:1;visibility:visible}
    body.navtodas-abierta #navtodas{transform:none}
    body.navreserva-abierta #navreserva{transform:none}
    /* ===== Panel de reservar (Mafe, 27 jul 2026) =====
       Mismo gesto y mismo aspecto que la hoja de las ocho vistas, para que la persona
       reconozca el patron. Antes este boton la echaba a Wix sin contarle que hay.
       Los estilos del contenido (filas, botones, equis, titulo) ya no viven aqui:
       se mudaron fuera de esta media query el 27 jul 2026, cuando el panel estreno
       su version de escritorio. Aqui solo queda su postura de hoja que sube desde
       abajo, que es lo unico que es de celular de verdad. */
    .nt-rej{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .nt-b{display:block;text-align:left;background:#ffffff;border:1px solid var(--line);
      border-radius:5px;height:auto;padding:12px 12px 13px;cursor:pointer;color:var(--text)}
    .nt-b svg{width:21px;height:21px;color:var(--gold-deep);display:block;margin-bottom:5px;pointer-events:none;
      fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
    .nt-b svg .relleno{fill:currentColor;stroke:none}
    .nt-b .nt-nm{font-family:var(--f-title);font-size:0.9375rem;letter-spacing:.2px;line-height:1.12;margin:0 0 4px}
    /* El tracking va en em y no en px para que sea el mismo apriete que el resto de
       la app, donde el cuerpo en Arimo lleva -0.5px sobre 16px (Mafe, 27 jul 2026,
       señalando el "luna gibosa creciente" de Planetas hoy). */
    .nt-b .nt-ln{font-family:var(--f-head);font-size:0.825rem;line-height:1.34;
      letter-spacing:-.031em;color:var(--muted);margin:0}
    .nt-b.on{background:var(--antracita,#021212);background:#021212;border-color:#021212}
    .nt-b.on svg{color:#fff}
    .nt-b.on .cf-ac{fill:#fff}
    .nt-b.on .cf-acs{stroke:#fff}
    .nt-b.on .nt-nm{color:#fff}
    .nt-b.on .nt-ln{color:#b5b3ab}
    /* ===== El gris del toque, arreglado (Mafe, 27 jul 2026) =====
       Arriba del todo hay una regla global, «button:hover{background:var(--label-hover)}»,
       que pesa más que la clase de estas tarjetas, así que al tocarlas se ponían de ese
       antracita apagado que no es de la marca. Y en el móvil el hover se queda pegado
       después del toque, o sea que la tarjeta se quedaba gris hasta que tocabas otra
       cosa. Aquí se le devuelve el mando a la marca, con el beige marfil de fondo y el
       vino en el borde, y se apaga el destello gris que pone el teléfono por su cuenta. */
    #navtodas .nt-b,#navtodas .nt-cerrar,#navbaja .nb-b{-webkit-tap-highlight-color:transparent}
    #navtodas .nt-b:hover,#navtodas .nt-b:focus-visible{background:var(--paper);border-color:var(--gold-deep)}
    #navtodas .nt-b:active{background:var(--paper);border-color:var(--gold-deep);transform:scale(.985)}
    /* La que ya está abierta se queda oscura, que si no parecía que se apagaba al tocarla */
    #navtodas .nt-b.on:hover,#navtodas .nt-b.on:focus-visible,#navtodas .nt-b.on:active{background:#3d3d33;border-color:#3d3d33}
    #navtodas .nt-cerrar:hover,#navtodas .nt-cerrar:focus-visible,#navtodas .nt-cerrar:active{background:var(--paper);color:var(--text)}
    /* La franja de abajo tenía el mismo problema, que es vino y se le ponía encima el gris */
    #navbaja .nb-b:hover,#navbaja .nb-b:focus-visible{background:rgba(255,255,255,.10)}
    #navbaja .nb-b:active{background:rgba(255,255,255,.18)}
    #navbaja .nb-b.on:hover,#navbaja .nb-b.on:focus-visible{background:rgba(255,255,255,.20)}
    #navbaja .nb-b.nb-reservar:hover,#navbaja .nb-b.nb-reservar:focus-visible,#navbaja .nb-b.nb-reservar:active{background:#ffffff;color:#2C1017}
  }
  /* ===== Panel de reservar: el contenido, compartido (Mafe, 27 jul 2026) =====
     Estas reglas estaban dentro de la media query de celular y se mudaron aqui el dia
     que el panel estreno su version de escritorio. El contenido (filas, botones, equis,
     titulo) es identico en los dos mundos, solo cambia la postura: hoja que sube desde
     abajo en el telefono, cajon que entra por la derecha en la computadora. La hoja de
     las ocho vistas sigue siendo solo de celular, pero comparte equis, asa, titulo y
     boton de cerrar, y en escritorio esta apagada por el display:none de arriba, asi
     que estas reglas no la tocan. */
  /* Sin frase debajo del titulo (Mafe, 27 jul 2026), asi que el titulo lleva el aire
     que llevaba la frase y el panel entra antes en la lista. */
  #navreserva .nt-t{margin-bottom:14px}
  .nr-grupo{font-family:var(--f-title);font-size:0.6875rem;letter-spacing:.14em;color:var(--gold-deep);margin:15px 0 7px}
  .nr-grupo:first-child{margin-top:0}
  /* La fila entera es el enlace, asi que se puede tocar en cualquier punto, y aun asi
     lleva su «Reservar» a la vista para que se vea que ahi se reserva (Mafe, 27 jul 2026). */
  .nr-fila{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:5px;
    padding:11px 12px 10px;margin-bottom:14px;text-decoration:none;color:var(--text);
    overflow:hidden;-webkit-tap-highlight-color:transparent}
  /* 14 y no 7 de separacion (Mafe, 27 jul por la tarde, «estan muy pegadas y cansa la
     vista»). Con el zocalo las tarjetas se tocaban visualmente y el ojo no descansaba. */
  .nr-fila:hover,.nr-fila:focus-visible{background:var(--paper);border-color:var(--gold-deep)}
  .nr-fila:active{background:var(--paper);border-color:var(--gold-deep);transform:scale(.99)}
  /* El boton sube a la misma linea del nombre y la fecha baja a cerrar la tarjeta
     (Mafe, 27 jul 2026). Asi el nombre y la accion viajan juntos, que es como se lee
     una tarjeta de verdad, y la fecha remata en vez de quedarse colgada en medio. */
  /* El rotulo de la consulta comodin. Va DENTRO de la tarjeta y no encima, para que
     se entienda que habla de ella y no del grupo entero (Mafe, 27 jul 2026). */
  .nr-flag{display:block;font-family:var(--f-title);font-size:0.625rem;letter-spacing:.07em;
    color:var(--gold-deep);margin:0 0 7px}
  .nr-fila.destacada{border-color:var(--gold-deep)}
  .nr-top{display:flex;align-items:flex-start;gap:9px}
  /* Sin redondel y en gris (Mafe, 27 jul 2026). Con el circulo en vino claro el icono
     competia con el boton, y en esta marca el vino es el acento unico, asi que se lo
     queda entero el boton. El icono se vuelve una senal callada, de las que se leen
     sin mirarlas. El dibujo sale del propio catalogo QZ_SVC por modalidad. */
  .nr-ic{flex:0 0 auto;width:19px;color:var(--muted);display:flex;align-items:center;
    justify-content:center;margin-top:2px}
  .nr-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2;
    stroke-linecap:round;stroke-linejoin:round}
  .nr-tx{flex:1;min-width:0}
  .nr-nm{display:block;font-family:var(--f-title);font-size:0.9375rem;letter-spacing:.2px;line-height:1.14}
  /* La palabra «grabada» del nombre va en gris (Mafe, 27 jul 2026), asi el nombre de la
     consulta pesa y el formato acompana sin gritar, igual que las negritas del quiz. */
  .nr-nm .nr-nm-gr{color:var(--muted)}
  /* La modalidad viaja pegada al nombre, en gris y en la fuente de cuerpo (Mafe, 27 jul
     2026 por la tarde, «tiene que ser más visible»). Con esto los rotulos de grupo
     sobran y se fueron: cada tarjeta dice lo suyo. Va con punto medio y no con guion,
     que Pre-Revolución ya carga un guion propio y se confundirian. */
  .nr-mod{font-family:var(--f-head);font-size:0.6875rem;font-weight:400;letter-spacing:-.02em;color:var(--muted);white-space:nowrap}
  .nr-meta{display:block;font-family:var(--f-head);font-size:0.75rem;line-height:1.3;letter-spacing:-.031em;color:var(--muted);margin-top:3px}
  .nr-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    background:var(--gold-deep);color:#fff;border-radius:4px;padding:7px 12px;
    font-family:var(--f-title);font-size:0.75rem;letter-spacing:.07em}
  .nr-cta svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .nr-cta svg .relleno{fill:currentColor;stroke:none}
  .nr-fila:hover .nr-cta,.nr-fila:focus-visible .nr-cta,.nr-fila:active .nr-cta{background:#2C1017}
  /* La proxima fecha libre nace escondida y solo sale cuando el Wix la manda de verdad,
     que es mejor un hueco vacio que una promesa que no se puede cumplir. Cuando llega,
     vive en un zocalo de papel que remata la tarjeta de lado a lado (el que eligio Mafe
     el 27 jul por la tarde entre las tres versiones). Fuera la rayita de antes: aqui el
     cambio de fondo hace todo el trabajo. El overflow:hidden de .nr-fila recorta las
     esquinas del zocalo contra el radio de la tarjeta. */
  .nr-disp{display:none;align-items:baseline;gap:7px;font-family:var(--f-head);font-size:0.6875rem;
    line-height:1.3;letter-spacing:-.02em;color:var(--muted);background:var(--paper);
    margin:10px -12px -10px;padding:8px 12px 9px}
  /* La fecha en display (la F2 que eligio Mafe): el rotulo se queda chiquito en gris
     y el dia pasa a la Staatliches en vino, como un titular. */
  .nr-disp .nr-disp-f{font-family:var(--f-title);font-size:0.875rem;letter-spacing:.05em;
    color:var(--gold-deep);white-space:nowrap}
  .nr-fila.con-fecha .nr-disp{display:flex}
  /* Mientras se le pregunta a Wix, la linea dice que se esta consultando. Va en
     gris de apoyo y sin la fecha en display, para que no compita con nada. */
  .nr-fila.nr-buscando .nr-disp{display:flex;color:var(--muted)}
  .nr-chips{display:flex;gap:7px;margin:0 0 13px}
  .nr-chip{flex:1;height:auto;text-align:center;font-family:var(--f-title);font-size:0.75rem;
    letter-spacing:.06em;padding:9px 6px;border:1px solid var(--gold-deep);border-radius:4px;
    color:var(--gold-deep);background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nr-chip.on{background:var(--gold-deep);color:#fff}
  .nr-fila.nr-oculta{display:none!important}
  .nr-duda{display:block;width:100%;height:auto;margin-top:13px;background:var(--gold-deep);color:#fff;
    border:none;border-radius:5px;padding:12px;font-family:var(--f-title);font-size:0.875rem;
    letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nr-duda:hover,.nr-duda:focus-visible,.nr-duda:active{background:#2C1017}
  /* El atributo hidden por si solo no basta, porque el display:block de estas reglas le
     gana y el boton seguia viendose dentro del cuestionario (cazado el 27 jul 2026). */
  .nr-duda[hidden],.nr-volver[hidden],#nr-quiz[hidden],#nr-lista[hidden],.nr-sub[hidden],#nr-chips[hidden]{display:none!important}
  .nr-volver{display:block;width:100%;height:auto;margin-top:13px;background:none;
    border:1px solid var(--gold-deep);color:var(--gold-deep);border-radius:5px;padding:11px;
    font-family:var(--f-title);font-size:0.8125rem;letter-spacing:.06em;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .nr-volver:hover,.nr-volver:focus-visible,.nr-volver:active{background:var(--paper)}
  /* Mismo traje que el boton de volver, en contorno, para que la fila que canta siga
     siendo «no se cual escoger» y esta se lea como la salida tranquila. */
  .nr-todas{display:block;width:100%;box-sizing:border-box;margin-top:10px;background:none;
    border:1px solid var(--gold-deep);color:var(--gold-deep);border-radius:5px;padding:11px;
    font-family:var(--f-title);font-size:0.8125rem;letter-spacing:.06em;text-align:center;
    text-decoration:none;-webkit-tap-highlight-color:transparent}
  .nr-todas:hover,.nr-todas:focus-visible,.nr-todas:active{background:var(--paper)}
  .nr-todas[hidden]{display:none!important}
  /* El cuestionario se muda aqui dentro, no se duplica. Se le quita su cabecera propia
     porque el titulo del panel ya dice donde estas. */
  #nr-quiz .qz{margin:0}
  #nr-quiz .qz-head{display:none}
  #navreserva .nt-cerrar{-webkit-tap-highlight-color:transparent}
  #navreserva .nt-cerrar:hover,#navreserva .nt-cerrar:focus-visible,#navreserva .nt-cerrar:active{background:var(--paper);color:var(--text)}
  /* ===== La equis que faltaba (Mafe, 27 jul 2026, probandolo en su telefono) =====
     El panel de reservar mide mas que la pantalla, asi que el boton de CERRAR de abajo
     quedaba fuera de la vista y la persona se quedaba encerrada. Esta equis va pegada
     arriba y no se mueve al desplazar, porque es sticky dentro del panel que hace el
     scroll. En escritorio cumple el mismo papel. */
  .hoja-x{position:sticky;top:0;z-index:3;display:block;margin:-4px -4px 0 auto;
    width:38px;height:38px;padding:0;border:none;background:var(--paper);
    color:var(--muted);font-family:var(--f-head);font-size:1.125rem;line-height:1;
    border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hoja-x:hover,.hoja-x:focus-visible,.hoja-x:active{background:#efe9dd;color:var(--text)}
  .nt-asa{width:38px;height:4px;border-radius:2px;background:var(--line);margin:-30px auto 13px;
    position:relative;touch-action:none}
  /* La rayita mide 4 pixeles y ningun dedo acierta ahi. Esta zona invisible de
     alrededor es la que de verdad recibe el gesto de arrastrar. */
  .nt-asa::before{content:'';position:absolute;left:-40px;right:-40px;top:-18px;bottom:-16px}
  .nt-t{font-family:var(--f-title);font-size:1.1875rem;letter-spacing:.3px;color:var(--text);margin:0 0 13px;line-height:1.12}
  .nt-cerrar{display:block;width:100%;height:auto;margin-top:12px;background:none;border:1px solid var(--line);
    border-radius:5px;padding:12px;font-family:var(--f-title);font-size:0.9375rem;letter-spacing:.06em;
    color:var(--muted);cursor:pointer}
  /* ===== El cajon de escritorio (Mafe, 27 jul 2026) =====
     En computadora «Reservar consulta» vivia en la barra lateral y echaba a la persona
     a Wix de un salto, sin contarle que hay, el mismo pecado que ya se le quito al
     boton de celular. Ahora abre este mismo panel como un cajon pegado al borde
     derecho, con el velo de siempre por detras. El radio a cero lleva !important por
     el `*{border-radius:5px!important}` global del index, igual que la franja de
     celular. El velo se reusa tal cual, solo que aqui unicamente lo enciende el
     panel de reservar, que la hoja de las ocho es cosa del telefono. */
  @media(min-width:901px){
    /* Por encima del header, que es sticky con z-index 9999 y en la primera prueba
       se comia el titulo y la equis del cajon (cazado el 27 jul 2026). En celular se
       quedan los 9600/9700 de siempre, que alli la hoja sube desde abajo y no chocan. */
    #navtodas-velo{display:block;position:fixed;inset:0;z-index:10100;background:rgba(38,38,32,.42);
      opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
    body.navreserva-abierta #navtodas-velo{opacity:1;visibility:visible}
    #navreserva{display:block;position:fixed;top:0;right:0;bottom:0;left:auto;width:440px;z-index:10200;
      background:var(--paper);border-left:1px solid var(--line);border-radius:0!important;
      padding:18px 22px 26px;transform:translateX(103%);transition:transform .22s ease;overflow-y:auto}
    body.navreserva-abierta #navreserva{transform:none}
    /* El asa es un gesto de dedo, en escritorio no pinta nada, y el titulo sube a la
       fila de la equis para no dejar un renglon vacio de 38 pixeles. */
    #navreserva .nt-asa{display:none}
    #navreserva .nt-t{margin:-32px 44px 14px 0}
  }
  @media print{#navbaja,#navtodas,#navreserva,#navtodas-velo{display:none!important}body{padding-bottom:0}}

/* ===== <style id="manrope-carta"> (index.html línea 12213) ===== */
/* ===== MANROPE EN LA CARTA (Mafe, 17 ago 2026; aplicado el 18 ago) =====
   Staatliches queda retirada. Todo lo que iba en ella pasa a Manrope, la titular
   de la marca desde el 17 ago 2026 (igual que consultas.html). Este bloque va al
   FINAL del archivo a propósito, para ganarle a las reglas sueltas de arriba, y
   corrige las tres cosas que cambian de fuente a fuente:
   1. Staatliches era caps-only y todo salía en mayúsculas sin pedirlo. Manrope
      tiene minúsculas, así que la caja alta se pide aquí, en los dos roles.
   2. Staatliches tenía un solo grosor (400). Manrope tiene pesos reales: 800 en
      el rol título (ExtraBold, la titular), 700 en el rol rótulo.
   3. Staatliches era condensada y por eso el rótulo se había subido a 16 px y
      todo llevaba +0.5px. Manrope es ancha: el rótulo vuelve a 12 px, y el
      título a peso 800 en caja alta lleva tracking negativo, como en consultas.
   El bloque «espaciado-staatliches» y las reglas «Rol RÓTULO/TÍTULO» de arriba
   se quedan por historia, pero lo que manda es esto.
   ORDEN: primero el rol rótulo y después el rol título, a propósito, para que un
   h2 que cae en los dos (los de #belowzone que son título, como .prog-head) se
   quede con el título. */
/* --- Rol RÓTULO: Manrope 700, 12 px, caja alta, un pelo de aire --- */
.rotulo:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.plabel:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.advopts summary:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.acg-picktitle:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.kicker:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tkicker:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tsearch-lbl:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.big3title:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.b3l:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tm-rot:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tiles-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-aspgrp-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tile-lab:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-eyebrow:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-retro-lab:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-subt:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-sky-do-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-aspsum:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-chartsite:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#cta-report .cta-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#belowzone h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.panel-toggle:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.fz-collapse:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.syn-pill:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.daycalc .dc-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.dc-change .dcc-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.esshead small:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.detailbox .dhead small:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#astro-info .ai-sub:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.advgrp-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.syn-names:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.posgrp-sum .posgrp-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.postab th:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.mphbox .mph-label:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.patbox .mph-label:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.rail-sep:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.qz-paso:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.qz-res-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.preg-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#cielo-agosto .ca-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.cuenta-atras .ca2-k:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#maqueta-footer .mf-col h4:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #natal-only h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #big3box .b3kicker:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #big3box .pname:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #balance .baltitle:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #balance .sumlab:not(#sin-uso):not(#sin-uso):not(#sin-uso){
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;
  font-size:.75rem!important;
  font-weight:700!important;
  letter-spacing:.5px!important;
  text-transform:uppercase!important;
}
/* --- Rol TÍTULO: Manrope 800, caja alta, tracking negativo --- */
h1:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#hero .hero-banner h1:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.titulo:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.mphbox .mph-name:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#cta-report .cta-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-chartdate:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.evtitle:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-sum-eyebrow:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-hero-hi:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-sky-title:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.sr-title:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-head:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.esshead:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.detailbox .dhead:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#astro-info .ai-head:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.syn-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.baldetail .bd-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.baldet-inline .bd-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-head:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.syn-leg-n:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.syn-allh:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.pat-name:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tips-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-msg-close:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tile-val:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.angles:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tm-fecha:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#acg-report .rep-head h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#acg-report .rep-city:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#rl-side .rl-side-city:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h2.blg-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h3.blg-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h2.svc-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h3.svc-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h3.qz-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.qz-res-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
h2.preg-q:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#cielo-agosto .ca-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.cuenta-atras .ca2-ev:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.cuenta-atras .ca2-n:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#solarserv .ss-titulo:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nt-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#maqueta-footer .mf-brand:not(#sin-uso):not(#sin-uso):not(#sin-uso),
body[data-view="natal"] #big3box .b3sign:not(#sin-uso):not(#sin-uso):not(#sin-uso){
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.5px!important;
  text-transform:uppercase!important;
  line-height:1.1!important;
}
/* El h1 de la portada y el titular del cielo del mes bajan de tamaño, que Manrope
   en 800 y caja alta es mucho más ancha que Staatliches y a 52 px se parten.
   El h1 además es fluido en el móvil: «ASTROCARTOGRAFÍA» a 40 px mide 401 px y a
   375 de viewport solo hay 301, así que desbordaba la página entera a 438 px. */
h1.pagetitle:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:clamp(1.4rem,7.5vw,2.5rem)!important;letter-spacing:-1px!important}
#cielo-agosto .ca-h:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:2.5rem!important;letter-spacing:-1px!important}
.cuenta-atras .ca2-ev:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:1.75rem!important}
/* Los valores de las fichas KPI (Leo, Escorpio, «Saturno, Neptuno y Plutón») son
   título en peso pero se quedan en su tamaño y sin caja alta forzada, que en la
   ficha estrecha «SATURNO, NEPTUNO Y PLUTÓN» a 800 no cabe. */
.hoy-tile-val:not(#sin-uso):not(#sin-uso):not(#sin-uso){text-transform:none!important;letter-spacing:-.3px!important}
/* --- El logo de la cabecera: la titular en 800 y caja alta, más chico que los 40 px
   de Staatliches, que a ese tamaño Manrope no cabe en el móvil. --- */
#maqueta-header .mh-logo:not(#sin-uso):not(#sin-uso):not(#sin-uso){
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;
  font-size:1.5rem!important;font-weight:800!important;letter-spacing:-.3px!important;
  text-transform:uppercase!important;line-height:1!important;
}
#maqueta-header .mh-cv:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important;letter-spacing:.2px!important}
/* --- Botones y chips que iban en Staatliches a 400: peso real, sin caja forzada. --- */
.hoy-cta:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-readmore:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-asp-see:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-ts-toggle:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.daycalc .dc-today:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tpl-dl-txt:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.st-real:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.svc-btn:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-chip:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nt-cerrar:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-duda:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#solarserv .ss-btn:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.cchip-edit-lbl:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important;letter-spacing:0!important}
/* --- La barra baja del móvil y sus dos hojas (navbaja, navtodas, navreserva): iban
   en Staatliches a 400. En Manrope, peso real: 700 en botones y rótulos, 800 en los
   títulos de hoja, los nombres de servicio y la fecha de disponibilidad. --- */
#navbaja .nb-b:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navtodas .nt-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navtodas .nt-cerrar:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-grupo:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-flag:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-cta:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-volver:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
#navtodas .nt-t:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#navreserva .nr-disp .nr-disp-f:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:800!important;letter-spacing:-.3px!important}
#navtodas .nt-t:not(#sin-uso):not(#sin-uso):not(#sin-uso){text-transform:uppercase!important;letter-spacing:-.5px!important;line-height:1.1!important}
/* --- Sueltos que quedaban en 300/400 tras el barrido del 18 ago 2026 --- */
/* «En automático» del desplegable de coordenadas: cursiva de dato secundario, en 600 */
.coords-auto:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:600!important}
.evcinta-tit:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.sumval:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#maqueta-footer .mf-c1 b:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
/* Rótulos chicos de las casas, del blog, de las preguntas y de las tarjetas solares */
.hh-casa:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hh-occ:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.h-empty:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.blg-tema:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tic-meta:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.tic-abre:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#solarserv .ss-modo:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
/* Los que arriba llevaban «font-weight:300» para quitarle a Staatliches el bold falso.
   Manrope no carga el 300, así que caían al 400 y salían flojos: rótulo real, 700. */
label:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#houses .hhead span:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tile-ic:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#cta-report-btn:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tl-elab:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.hoy-tl-nowlab:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-sum-badge:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-stile-lab:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-eyebrow:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-sech:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-card-role:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-crit-lab:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
/* Valores y nombres de las fichas de la progresada, en la titular */
.prog-stile-val:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.prog-card-name:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:800!important;letter-spacing:-.3px!important}
/* Sueltos del segundo barrido (18 ago): el «Ciérrala» de las preguntas, la fórmula
   chica de la tabla de posiciones y el nombre en el chip de la carta */
.tic-cierra:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
.postab .pt-f:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:600!important}
#cartachip #cchip-name:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#syn-det>summary .synd-txt b:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important;letter-spacing:0!important}
/* Título de las curiosidades y de las tarjetas solares, y el precio, en la titular */
.cur-h:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#solarserv .ss-nm:not(#sin-uso):not(#sin-uso):not(#sin-uso),
#solarserv .ss-precio:not(#sin-uso):not(#sin-uso):not(#sin-uso){
  font-family:'Manrope',Arial,Helvetica,sans-serif!important;
  font-weight:800!important;letter-spacing:-.5px!important;text-transform:uppercase!important;line-height:1.1!important}
/* Los h2 de #belowzone que son título recuperan su tamaño, que la regla de rótulo
   de arriba se lo bajaba a 12 px: la cabecera de la progresada y la del reporte
   de astrocartografía. */
#belowzone .prog-head:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso),
#belowzone .syn-h:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso),
#belowzone .syn-top-title:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso),
#belowzone #acg-report .rep-head h2:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso){
  font-size:1.4375rem!important;font-weight:800!important;letter-spacing:-.5px!important;
  text-transform:uppercase!important;line-height:1.1!important}
#belowzone .syn-top-title:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:1.5rem!important}
@media(max-width:900px){#belowzone .prog-head:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:1.25rem!important}}
/* Las cinco conexiones de la sinastría (bloque synb): número, título y veredicto en la
   titular con peso real, la etiqueta en rótulo. */
.synb-title:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.synb-num:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:800!important;letter-spacing:-.5px!important}
.synb-title:not(#sin-uso):not(#sin-uso):not(#sin-uso){text-transform:uppercase!important;line-height:1.1!important}
.synb-eyebrow:not(#sin-uso):not(#sin-uso):not(#sin-uso),
.synb-vert:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-weight:700!important}
/* El título del bloque de consultas de la solar es TÍTULO de 20 px (Mafe, 23 jul 2026),
   no rótulo: la regla de «#belowzone h2» de arriba se lo bajaba a 12. */
#belowzone #solarserv .ss-titulo:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:1.25rem!important;font-weight:800!important;letter-spacing:-.5px!important;text-transform:uppercase!important;line-height:1.1!important}
/* --- En celular, los títulos de sección son TÍTULO, no rótulo (decisión de Mafe del
   17 jul 2026, ver el bloque de max-width:900px de arriba). La regla de rótulo de este
   bloque se los bajaba a 12 px: aquí se les devuelve el rol título, en Manrope. --- */
@media(max-width:900px){
  body[data-view] #natal-only h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  body[data-view] #belowzone h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  #belowzone h2:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  body[data-view] #big3box .b3kicker:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  .mphbox .mph-label:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  .patbox .mph-label:not(#sin-uso):not(#sin-uso):not(#sin-uso),
  .daycalc .dc-h:not(#sin-uso):not(#sin-uso):not(#sin-uso){
    font-size:1.25rem!important;
    font-weight:800!important;
    letter-spacing:-.5px!important;
    line-height:1.1!important;
    text-transform:uppercase!important;
    color:var(--text)!important;
  }
  /* El logo baja un punto en el móvil, que en la franja de 375 el nombre largo se sale */
  #maqueta-header .mh-logo:not(#sin-uso):not(#sin-uso):not(#sin-uso){font-size:1.25rem!important}
}
/* ===== EL LIENZO VA DE BORDE A BORDE, COMO EN /consultas (Mafe, 18 ago 2026) =====
   Ella lo vio comparando las dos páginas: en /consultas el carril de la
   izquierda arranca pegado al borde y la hoja se estira, mientras que aquí el
   conjunto tenía un tope de 1180 px (1420 con la columna de Instagram) y se
   centraba, así que en una pantalla ancha el carril flotaba hacia el centro. Le
   gustó lo de /consultas y pidió igualarlo. Fuera el tope, y los mismos 26 px
   de margen lateral que lleva .cb-lienzo allá. El fondo de tinta ya llegaba de
   borde a borde por la sombra recortada, eso no cambia. */
@media(min-width:901px){
  .wrap{max-width:none!important;padding-left:26px!important;padding-right:26px!important}
}
/* ===== LA RUEDA DE PLANETAS HOY, MUCHO MÁS GRANDE (Mafe, 18 ago 2026) =====
   Estaba clavada en 560 px desde el 19 jul, cuando el lienzo tenía tope y no
   había sitio para más. Ahora que el lienzo va de borde a borde, la rueda se
   lleva el ancho que sobra y «Posiciones del día» se queda a su derecha con un
   ancho fijo. El SVG ya escala solo con su caja (svg{width:100%}), así que basta
   con soltar la caja. Tope de 1100 para que en una pantalla de 27" no se pase. */
@media(min-width:1180px){
  body[data-view="hoy"] #chartrow.split #chart{flex:1 1 0!important;width:auto!important;min-width:0;max-width:1100px}
  body[data-view="hoy"] #chartrow.split #chart svg{max-width:none}
  body[data-view="hoy"] #chartrow.split #dc-col{flex:0 0 380px!important;width:380px!important}
}
/* ===== LA RUEDA SIEMPRE ENTRA EN LA PANTALLA (Mafe, 18 ago 2026) =====
   Al soltar el lienzo, en carta natal, tránsitos y revolución solar la rueda
   creció con su caja y ya no cabía en una pantalla completa. La regla vale para
   TODAS las vistas: la rueda es un cuadrado que mide lo que le deje su caja o
   la altura de la ventana menos la cabecera, lo que sea menor. Así en una
   pantalla ancha y baja no se pasa, y en una alta sigue creciendo. Va centrada
   dentro de su caja para cuando la que manda es la altura.
   AJUSTE 19 ago 2026: con solo el tope de altura la rueda seguia saliendo
   enorme en una pantalla grande (Mafe la vio asi en natal, progresada,
   revolucion solar y astrocartografia). Ahora manda tambien un tope duro de
   tamano. La medida buena es la que ya tenia Transitos, que es la que a Mafe le
   gusta, y la usan TODAS las vistas por igual, la relocalizada de
   astrocartografia incluida. Ojo, es el mismo tope para todas a proposito: como
   la rueda de transitos se dibuja en un lienzo un 30% mas grande (lleva el
   anillo de fuera), a igual caja la circunferencia negra sale del mismo tamano
   en natal que en transitos, que es lo que se compara a ojo. */
/* ===== TODAS LAS RUEDAS EN EL MISMO SITIO (Mafe, 19 ago 2026) =====
   Ella lo pidio con estas palabras, «que el centro de la rueda de carta natal,
   transitos, revolucion solar, sinastria y carta progresada este siempre en el
   mismo lugar, y que al pinchar cada etiqueta la rueda no suba y baje 20 veces».
   Medido antes de tocar nada, en pantalla de 1600x900: de lado cuatro vistas
   coincidian en 907 px y transitos se iba a 623, y de arriba abajo la rueda
   empezaba en 265 px en carta natal y en 764 en progresada, medio salto de
   pantalla. De las dos formas posibles Mafe eligio la B, rueda pegada a la
   izquierda en las cinco y la lectura siempre a su derecha.
   Aqui va la mitad de lado: misma columna de rueda para las cinco, con el ancho
   exacto de la rueda, y la lectura en la columna de al lado. La mitad de arriba
   abajo la hace la mudanza del final del archivo, que baja debajo de la rueda
   todo lo que hoy se le pone encima y mide distinto en cada vista. */
@media screen and (min-width:901px){
  body[data-view="natal"] #chartrow,
  body[data-view="solar"] #chartrow,
  body[data-view="prog"] #chartrow,
  body[data-view="sinastria"] #chartrow{
    display:grid!important;
    grid-template-columns:calc(var(--rueda) + 40px) minmax(0,1fr)!important;
    margin:16px 0 4px;
  }
  /* Los mismos 20 px de aire a cada lado de la rueda en las cinco vistas, que si
     una los lleva y otra no, la rueda sale de distinto tamano al cambiar de
     pestana aunque la columna mida igual. */
  body[data-view="natal"] #chartrow>#chart,
  body[data-view="transit"] #chartrow>#chart,
  body[data-view="solar"] #chartrow>#chart,
  body[data-view="prog"] #chartrow>#chart,
  body[data-view="sinastria"] #chartrow>#chart{padding:22px 20px!important;box-sizing:border-box!important}
  /* Todo lo que no sea la rueda cae en la columna de la derecha, en el orden en
     que viene en el HTML. Asi ninguna caja suelta se cuela en la columna de la
     rueda y la desplaza. */
  body[data-view="natal"] #chartrow>*,
  body[data-view="solar"] #chartrow>*,
  body[data-view="prog"] #chartrow>*,
  body[data-view="sinastria"] #chartrow>*{grid-column:2!important;grid-row:auto!important}
  body[data-view="natal"] #chartrow>#chart,
  body[data-view="solar"] #chartrow>#chart,
  body[data-view="prog"] #chartrow>#chart,
  body[data-view="sinastria"] #chartrow>#chart{grid-column:1!important;grid-row:1/-1!important;min-width:0;margin:0}
  body[data-view="solar"] #chartrow>#detail,
  body[data-view="prog"] #chartrow>#detail,
  body[data-view="sinastria"] #chartrow>#detail{align-self:start;margin:0 0 0 26px}
  /* Con nombre y apellido, que la regla vieja de la columna unica los nombraba por
     su id y ganaba por peso aunque estuviera mas arriba en el archivo. */
  body[data-view="natal"] #chartrow>#detail,
  body[data-view="natal"] #chartrow>#detail-empty{grid-column:2!important;grid-row:1!important;align-self:stretch!important;margin:0!important}
  /* Carta natal vuelve a las dos columnas de tarjeta unida que tenia antes del
     19 jul, cuando se apilo porque a la rueda solo le quedaban 520 px. Con la
     rueda ya en su medida fija ese motivo desaparecio, asi que se le devuelve la
     raya vertical entre las dos piezas y el piquito que sale por el costado. */
  body[data-view="natal"] #chartrow #detail,
  body[data-view="natal"] #chartrow #detail-empty{
    border-top:none!important;
    border-left:1px solid var(--line)!important;
  }
  body[data-view="natal"] #chartrow #detail-empty::before{
    left:-6px!important;top:56px!important;margin-left:0!important;
    border-left:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
    border-top:none!important;
  }
}
/* ===== Y LA MITAD DE ARRIBA ABAJO (Mafe, 19 ago 2026) =====
   La rueda empezaba a una altura distinta en cada vista porque encima de ella se
   le apilaban cosas que miden distinto: el resumen del ano en revolucion solar
   (114 px), el resumen del Sol y la Luna progresados (380), el formulario de la
   otra persona en sinastria (333) y los botones de buscar fecha (40). Medido, la
   rueda salia a 265 px en carta natal y a 764 en progresada.
   La zona pasa a columna flexible y se le da orden: arriba solo el chip con el
   nombre y su formulario de editar, que miden igual en las cinco vistas, luego la
   rueda, y por debajo todo lo demas en el mismo orden que ya traia. Asi no hay
   que mover ni un nodo del HTML y la rueda arranca siempre a la misma altura.
   AMPLIADO al celular el 19 ago 2026, que Mafe lo pidio igual en los dos: alli el
   salto era todavia mayor, la rueda arrancaba a 262 px en carta natal y a 1.111
   en progresada, o sea que en progresada habia que bajar una pantalla entera
   antes de ver la carta. Vale para cualquier ancho, y en celular las tres piezas
   caen una debajo de otra igual que antes, solo que en este orden. */
@media screen{
  body[data-view="natal"] #belowzone,
  body[data-view="transit"] #belowzone,
  body[data-view="solar"] #belowzone,
  body[data-view="prog"] #belowzone,
  body[data-view="sinastria"] #belowzone{display:flex;flex-direction:column}
  body[data-view="natal"] #belowzone>*,
  body[data-view="transit"] #belowzone>*,
  body[data-view="solar"] #belowzone>*,
  body[data-view="prog"] #belowzone>*,
  body[data-view="sinastria"] #belowzone>*{order:3}
  /* El chip y el formulario de datos van juntos y siempre arriba: si el formulario
     se fuera abajo, al pulsar «Editar» se abriria a 800 px de donde tocaste. */
  body[data-view="natal"] #belowzone>#cartachip,
  body[data-view="transit"] #belowzone>#cartachip,
  body[data-view="solar"] #belowzone>#cartachip,
  body[data-view="prog"] #belowzone>#cartachip,
  body[data-view="sinastria"] #belowzone>#cartachip,
  body[data-view="natal"] #belowzone>#formzone,
  body[data-view="transit"] #belowzone>#formzone,
  body[data-view="solar"] #belowzone>#formzone,
  body[data-view="prog"] #belowzone>#formzone,
  body[data-view="sinastria"] #belowzone>#formzone,
  body[data-view="sinastria"] #belowzone>#peoplebar{order:1}
  body[data-view="natal"] #belowzone>#chartrow,
  body[data-view="transit"] #belowzone>#chartrow,
  body[data-view="solar"] #belowzone>#chartrow,
  body[data-view="prog"] #belowzone>#chartrow,
  body[data-view="sinastria"] #belowzone>#chartrow{order:2}
}
@media screen and (min-width:901px){
  /* La caja de la rueda de transitos traia los 16 px de margen de arriba de
     .chartwrap y bajaba la rueda ese pelo respecto de las otras cuatro. */
  body[data-view="transit"] #chartrow>#chart{margin:0!important}
}
@media screen and (max-width:900px){
  /* En celular la cuenta es la misma pero con otras dos piezas de por medio.
     Una, carta natal es la unica que lleva tarjeta blanca alrededor de la rueda y
     sus 22 px de arriba la bajaban ese pelo, asi que se les da a las cinco.
     Dos, la banda con la fecha de transitos vivia ENCIMA de la rueda desde el 27
     jul y era lo unico que quedaba empujandola, 56 px. Baja con el resto. */
  body[data-view="natal"] #chartrow>#chart,
  body[data-view="transit"] #chartrow>#chart,
  body[data-view="solar"] #chartrow>#chart,
  body[data-view="prog"] #chartrow>#chart,
  body[data-view="sinastria"] #chartrow>#chart{padding-top:22px!important;margin-top:16px!important}
  body[data-view="transit"] #tcab{order:3!important;margin:14px 2px 0!important}
  body[data-view="transit"] #chartrow #detail{order:4!important}
  body[data-view="transit"] #tcola{order:5!important}
}
/* Solo pantalla: en la impresion manda el bloque de @media print, que le da a la
   rueda su propia pagina con 500 px. Si esta regla entrara ahi, el 100vh de la
   hoja le cambiaria el tamano al PDF. */
/* OJO, el selector es de hijo directo a proposito. Dentro de #chart no vive solo
   la rueda: en astrocartografia el boton de «Pantalla completa» tambien va ahi
   dentro y su iconito es un svg. Con `#chart svg` el icono se comia la regla y
   salia dibujado a 730 px encima del mapa (Mafe lo cazo el 19 ago 2026). */
@media screen and (min-width:901px){
  /* La medida de la rueda vive en una sola variable, que la usan tanto el SVG como
     el ancho de la columna que lo aloja. Si se cambia el tamano, se cambia aqui. */
  :root{--rueda:min(780px, calc(100vh - 170px))}
  #chart>svg,#reloc-chart>svg{
    display:block;
    width:min(100%, var(--rueda))!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin-left:auto;
    margin-right:auto;
  }
}

/* ===== <style id="rotulos-y-remates"> (index.html línea 13906) ===== */
/* ===== RÓTULOS Y REMATES (Mafe, 20 ago 2026) =====
   Tres cosas que ella cazó mirando la página entera.
   1. LOS RÓTULOS NO VAN ESPACIADOS. El tracking abierto de plantilla («E C L I P S E S»)
      queda fuera. Todo rótulo lleva el mismo espaciado que el título que acompaña,
      que es el -0.5px del cuerpo. Los rótulos enunciantes que se sentaban ENCIMA de
      un título ya no se estilan aquí porque se borraron del HTML: esa maña no vuelve.
   2. EL PIE ES UN RECTÁNGULO. La regla global de radio le curvaba las esquinas a las
      dos franjas y la de abajo quedaba con una muesca a la izquierda.
   3. EL QUIZ ES UN DESPLEGABLE y vive debajo del carrusel de servicios. */
/* 1. Rótulos, con el espaciado del título */
.blg-tema:not(#sin-uso),
.nr-todas:not(#sin-uso),
.ca2-u:not(#sin-uso),
.rail-sep:not(#sin-uso):not(#sin-uso):not(#sin-uso):not(#sin-uso),
#maqueta-header .mh-cv-head:not(#sin-uso),
#maqueta-footer .mf-brand:not(#sin-uso),
#maqueta-footer .mf-col h4:not(#sin-uso){letter-spacing:-.5px!important}
/* 2. LAS FRANJAS A SANGRE, RECTAS. Toda sección que va de borde a borde termina en
      esquina recta: una franja de color a todo el ancho con las puntas redondeadas
      se lee como una tarjeta gigante mal puesta, y en pantalla ancha se nota mucho.
      La regla global de radio se las curvaba a las cuatro. Los paneles que flotan
      (#navtodas, #calpop, #navbaja) NO entran aquí, que ahí el radio es la forma
      del panel. Si mañana nace otra franja a sangre, nace recta sola, porque esto
      va por «hija directa del body» y no por una lista de nombres. */
body>section:not(#sin-uso),
#navtodas-velo:not(#sin-uso),
#rsv-ov:not(#sin-uso){border-radius:0!important}
/* 3. El pie, rectángulo entero */
#maqueta-footer:not(#sin-uso),
#maqueta-footer .mf-top:not(#sin-uso),
#maqueta-footer .mf-top-in:not(#sin-uso),
#maqueta-footer .mf-bottom:not(#sin-uso),
#maqueta-footer .mf-bottom-in:not(#sin-uso){border-radius:0!important}
/* 4. El quiz desplegable. Sin la flechita gris del navegador, que no es de la marca. */
details.qz>summary{list-style:none;cursor:pointer;display:block;position:relative;padding-right:96px}
details.qz>summary::-webkit-details-marker{display:none}
details.qz>summary::marker{content:''}
details.qz>summary{margin-bottom:0}
details.qz[open]>summary{margin-bottom:22px}
details.qz>summary::after{content:'Ábrelo';position:absolute;right:0;top:2px;
  font-family:var(--f-title);font-size:0.875rem;font-weight:600;letter-spacing:-.5px;
  color:var(--gold-deep,#3B161F);border-bottom:1px solid currentColor;border-radius:0!important}
details.qz[open]>summary::after{content:'Ciérralo'}
@media(max-width:560px){
  details.qz>summary{padding-right:0}
  details.qz>summary::after{position:static;display:inline-block;margin-top:10px}
}