:root{
    --blanco:#FFFFFF;
    --marfil:#F5F3F0;
    --antracita:#021212;
    --vino:#3B161F;
    --f-title:'Manrope', Arial, Helvetica, sans-serif;
    --f-head:'Arimo',Arial,Helvetica,sans-serif;
    --f-body:'Arimo',Arial,Helvetica,sans-serif;
    --neutro:#70706a;
    --panel:#f5f3f0;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--blanco);
    color:var(--antracita);
    font-family:Arimo, Arial, Helvetica, sans-serif;
    font-size:17px;
    line-height:1.5;
    letter-spacing:-.1px;
  }
  /* ---- Cabecera de sitio ---- */
  /* ═══════ PORTADA | el disco de vino con la rueda ═══════ */
  .portada{
    position:relative; background:var(--marfil);
    overflow:hidden; isolation:isolate;
  }
  .portada .disco{
    position:absolute; z-index:0; pointer-events:none;
    background:var(--vino); border-radius:50%;
    display:grid; place-items:center;
  }
  .portada .disco picture{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
  .portada .disco img{width:84%; height:auto; display:block; margin:0 auto;}
  .portada-interior{position:relative; z-index:1; max-width:1120px; margin:0 auto;}
  .rotulo-tema{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:15px; text-transform:uppercase; letter-spacing:1.3px;
    color:var(--vino); margin:0 0 14px;
  }
  h1{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    line-height:.92; letter-spacing:-.5px; margin:0 0 16px;
    color:var(--antracita); font-size:clamp(56px, 15vw, 104px);
  }
  h1 span{
    display:block; font-size:.34em; letter-spacing:-.5px;
    color:var(--vino); margin-top:14px; line-height:1.05;
  }
  .bajada{font-size:clamp(17px, 2.1vw, 20px); line-height:1.55; color:#3a3a33; margin:0 0 22px;}
  .firma{font-size:13.5px; color:var(--neutro); margin:0;}
  .firma b{color:var(--antracita); font-weight:600;}
  /* — móvil y tablet: el disco va en el flujo, así nunca tapa el texto — */
  .portada{padding:0 0 44px;}
  .portada .disco{
    position:static; width:116vw; aspect-ratio:1;
    margin:-14vw -8vw 22px; transform:none;
  }
  .portada .disco img{width:80%;}
  .portada-interior{padding:0 22px;}
  @media(min-width:600px){
    .portada{padding:0 0 52px;}
    .portada .disco{width:82vw; margin:-10vw -6vw 26px 18vw;}
    .portada-interior{padding:0 26px;}
  }
  /* — escritorio: el disco a la derecha y el texto al lado — */
  @media(min-width:900px){
    .portada{padding:0 26px;}
    .portada .disco{
      position:absolute; width:min(50%, 680px); margin:0; /* 54% de la hoja, no de la ventana: dentro del carril la hoja es mas angosta (22 ago 2026) */
      top:50%; right:-6%; left:auto; transform:translateY(-50%);
    }
    .portada .disco img{width:84%;}
    .portada-interior{
      padding:86px 0 80px; min-height:min(62vw, 720px);
      display:flex; flex-direction:column; justify-content:center;
    }
    .portada-interior > *{max-width:min(46%, 500px);}
  }
  @media(min-width:1240px){
    .portada .disco{right:-2%;}
    .portada-interior > *{max-width:min(46%, 540px);}
  }
  /* ═══════ LA FICHA | tarjetas que se tocan ═══════ */
  .franja{background:var(--antracita); color:var(--marfil); padding:34px 0 38px;}
  .franja-int{max-width:1120px; margin:0 auto; padding:0 22px;}
  @media(min-width:600px){ .franja-int{padding:0 26px;} }
  .franja-tit{
    display:flex; align-items:center; gap:10px;
    margin:0 0 18px;
  }
  .franja-tit svg{width:19px; height:19px; fill:var(--marfil); flex:0 0 auto;}
  .franja-tit h2{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:20px; letter-spacing:-.5px; margin:0; color:var(--marfil);
  }
  .franja-tit span{font-size:13.5px; color:#a49a9c; letter-spacing:-.5px;}
  @media(max-width:560px){ .franja-tit span{display:none;} }
  .franja-tira{display:grid; gap:12px; grid-template-columns:repeat(2,1fr);}
  @media(min-width:560px){ .franja-tira{grid-template-columns:repeat(3,1fr);} }
  @media(min-width:1000px){ .franja-tira{grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;} .dato{padding:18px 14px 14px;} .dato .v{font-size:21px;} }
  .dato{
    appearance:none; border:0; font:inherit; text-align:left;
    background:var(--marfil); color:var(--antracita);
    padding:20px 18px 16px; border-radius:5px; cursor:pointer;
    display:flex; flex-direction:column; gap:10px;
    transition:transform .16s ease, background .16s ease;
  }
  .dato:hover{background:#fff; transform:translateY(-3px);}
  .dato:focus-visible{outline:3px solid #c98b9b; outline-offset:2px;}
  .dato[aria-expanded="true"]{background:#fff; transform:translateY(-3px);}
  .dato .redondel{
    width:44px; height:44px; border-radius:50%;
    background:var(--vino); color:var(--marfil);
    display:flex; align-items:center; justify-content:center;
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase; font-size:21px; letter-spacing:.03em;
    flex:0 0 auto;
  }
  .dato .redondel svg{width:21px; height:21px; fill:currentColor;}
  .dato .k{
    display:block; font-size:10.5px; text-transform:uppercase;
    letter-spacing:1.3px; color:var(--neutro); font-weight:700; margin-bottom:2px;
  }
  .dato .v{
    display:block; font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:23px; letter-spacing:.045em; color:var(--antracita); line-height:1.1;
  }
  .dato .mas{
    display:inline-block; margin-top:auto; padding-top:12px;
    font-size:12.5px; font-weight:700; color:var(--vino); letter-spacing:.1px;
  }
  .dato .mas{display:flex; align-items:center; gap:6px;}
  .dato .mas .fl{
    display:inline-flex; line-height:0;
    transition:transform .2s ease;
  }
  .dato .mas .fl svg{width:13px; height:13px; fill:currentColor; display:block;}
  .dato[aria-expanded="true"] .mas .fl{transform:rotate(180deg);}
  .franja-panel{display:none; margin-top:12px;}
  .franja-panel.abierto{display:block;}
  .franja-panel .caja{
    background:var(--vino); color:var(--marfil);
    border-radius:5px; padding:26px 24px;
    display:grid; gap:18px;
  }
  @media(min-width:860px){
    .franja-panel .caja{
      grid-template-columns:64px minmax(0,1fr) auto;
      align-items:center; gap:26px; padding:28px 30px;
    }
  }
  .franja-panel .grande{
    width:56px; height:56px; border-radius:50%;
    background:rgba(245,243,240,.13);
    display:flex; align-items:center; justify-content:center;
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase; font-size:26px;
  }
  .franja-panel .grande svg{width:27px; height:27px; fill:var(--marfil); color:var(--marfil);}
  .franja-panel h3{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:22px; letter-spacing:-.5px; margin:0 0 8px; color:var(--marfil);
  }
  .franja-panel p{margin:0; color:#f1e7e8; font-size:15.5px; line-height:1.5;}
  .franja-panel .ir{white-space:nowrap}
  .franja-panel .ir::after{content:" →";}
  @media(prefers-reduced-motion:reduce){ .dato, .dato .mas .fl{transition:none;} }
  /* ═══════ Migas ═══════ */
  .migas{
    max-width:1120px; margin:0 auto; padding:20px 22px 0;
    font-size:13px; color:var(--neutro);
  }
  @media(min-width:600px){ .migas{padding:20px 26px 0;} }
  .migas a{color:var(--neutro); text-decoration:none;}
  .migas a:hover{color:var(--vino);}
  .migas span{margin:0 7px; opacity:.5;}
  /* ═══════ Cuerpo ═══════ */
  .articulo{
    max-width:1120px; margin:0 auto; padding:34px 22px 90px;
    display:grid; grid-template-columns:minmax(0,1fr);
  }
  @media(min-width:600px){ .articulo{padding:38px 26px 90px;} }
  @media(min-width:960px){ .articulo{padding-top:52px;} }
  .cuerpo-articulo h2{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:clamp(26px, 3.4vw, 34px); line-height:1.1;
    letter-spacing:-.5px; margin:40px 0 14px;
  }
  .cuerpo-articulo p{margin:0 0 15px;}
  .cuerpo-articulo strong{font-weight:700;}
  .entradilla{font-size:18.5px; line-height:1.45; margin-bottom:22px;}
  .planetas{margin:26px 0 10px;}
  @media(min-width:820px){ .planetas{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .planeta{margin:0;} }
  .planeta{
    background:var(--panel); padding:26px; margin:0 0 16px; border-radius:5px;
    display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:18px; align-items:start;
  }
  .planeta .ico{grid-row:1 / span 3; width:38px; height:38px; color:var(--vino); margin-top:4px;}
  .planeta .ico svg{width:100%; height:100%; fill:currentColor;}
  .planeta h3{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:22px; letter-spacing:-.5px; margin:0 0 4px;
  }
  .planeta .funcion{
    font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
    color:var(--neutro); font-weight:700; margin:0 0 12px;
  }
  .planeta p{margin:0; line-height:1.5;}
  ul.lista{margin:2px 0 20px; padding:0; list-style:none;}
  ul.lista li{position:relative; padding:0 0 11px 22px; line-height:1.5;}
  ul.lista li::before{
    content:""; position:absolute; left:2px; top:10px;
    width:7px; height:7px; background:var(--vino); border-radius:50%;
  }
  ul.lista li:last-child{padding-bottom:0;}
  ul.lista b{font-weight:700;}
  .aviso{background:rgba(59,22,31,.055); padding:20px 22px; margin:32px 0; border-radius:5px;}
  .aviso p{margin:0;}
  .en-tu-carta{
    background:var(--antracita); color:var(--marfil);
    padding:34px 30px; margin:46px 0; border-radius:5px;
  }
  .en-tu-carta h3{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:27px; line-height:1.12; letter-spacing:-.5px;
    margin:0 0 14px; color:var(--marfil);
  }
  .en-tu-carta p{margin:0 0 20px; color:#e6e2da; font-size:16px; line-height:1.5;}
  /* El enlace de dentro del parrafo salia con el azul de fabrica del navegador sobre
     la tinta (Mafe lo cazo el 20 ago 2026). Va en marfil, subrayado fino, que sobre
     este fondo se lee y sigue pareciendo enlace. */
  .en-tu-carta p a{color:var(--marfil,#f5f3f0); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
  .en-tu-carta p a:hover{text-decoration-thickness:2px;}
  /* sello del signo en la portada */
  /* los otros once, con lamina */
  .otros-signos .lamina{display:block; width:100%; height:auto; aspect-ratio:1/1;
    object-fit:cover; border-radius:5px; background:var(--cream);}
  .otros-signos .sin-pagina{display:block; padding:0 0 14px; cursor:default;}
  .otros-signos .sin-pagina .lamina{filter:saturate(.22) brightness(1.06); opacity:.6;}
  .otros-signos .sin-pagina .nom{color:#6b6259;}
  .otros-signos{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px; margin:24px 0 8px; padding:0; list-style:none;
  }
  @media(min-width:560px){ .otros-signos{grid-template-columns:repeat(6,minmax(0,1fr));} }
  @media(min-width:900px){ .otros-signos{grid-template-columns:repeat(11,minmax(0,1fr)); gap:8px;} }
  .otros-signos a{
    display:block; padding:0 0 14px;
    background:transparent; color:var(--antracita); text-decoration:none;
    transition:transform .16s ease;
  }
  .otros-signos a:hover{background:#fff; transform:translateY(-3px);}
  .otros-signos .orden{
    display:block; font-family:Arimo, Arial, sans-serif; font-size:10.5px;
    font-weight:700; letter-spacing:1.3px; color:var(--neutro); margin-bottom:-7px;
  }
  .otros-signos .nom{display:block; margin-top:9px; font-size:12px; letter-spacing:0;
    line-height:1.06; min-height:2.12em; overflow-wrap:anywhere;
    display:block; font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:20px; letter-spacing:.045em; line-height:1.1;
  }
  @media(prefers-reduced-motion:reduce){ .otros-signos a{transition:none;} }
  .pregunta{margin:0 0 20px;}
  .pregunta h3{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:22px; letter-spacing:-.5px; margin:0 0 8px;
  }
  .pregunta p{margin:0;}
  .autora{
    margin:52px 0 0; padding:30px; background:var(--panel); border-radius:5px;
    display:flex; gap:20px; align-items:flex-start;
  }
  .autora img{flex:0 0 76px; width:76px; height:76px; border-radius:50%; object-fit:cover; display:block;}
  .autora h3{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase;
    font-size:21px; letter-spacing:-.5px; margin:0 0 8px;
  }
  .autora p{margin:0; font-size:15px; line-height:1.5; color:#4a4a44;}
  .pie{background:var(--antracita); color:#bcb8b1; padding:44px 22px; font-size:14px;}
  @media(min-width:600px){ .pie{padding:44px 26px;} }
  .pie-interior{max-width:1120px; margin:0 auto;}
  .pie .marca{
    font-family:'Manrope', Arial, sans-serif; font-weight:800; text-transform:uppercase; font-size:22px;
    color:var(--marfil); letter-spacing:.055em; margin:0 0 16px;
  }
  .pie a{color:#e6e2da; text-decoration:none; margin-right:22px; line-height:2.2;}
  .pie a:hover{color:var(--marfil);}
  .pie .legal{margin-top:22px; font-size:12.5px; color:#94908a;}
  /* 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}
  /* Reservar es la unica pastilla marfil de la barra lateral (Mafe, 27 jul 2026),
     igual que en la franja del celular: es la unica puerta que lleva al negocio y
     tiene que cantar. Texto e icono en el mismo vino oscuro de la franja de abajo,
     y el puntito del icono se queda en el vino de marca, que sobre marfil se ve. */
  #hero .rail-link.rail-reservar{background:#f5f3f0;border-color:#f5f3f0}
  #hero .rail-link.rail-reservar .cf-nm{color:#471d26!important}
  #hero .rail-link.rail-reservar .cf-emb{color:#471d26}
  #hero .rail-link.rail-reservar:hover{background:#ffffff;border-color:#ffffff}
  @keyframes mh-slide{from{transform:translateX(28%);opacity:.4}to{transform:none;opacity:1}}
  @media(max-width:900px){
    /* Hamburguesa ENCENDIDA otra vez (Mafe, 20 ago 2026). Estuvo escondida desde el
       21 jul, y con ella escondida estas páginas se quedaban en el teléfono sin
       ninguna puerta salvo la ruedita de «Mi carta», porque aquí no hay barra de
       abajo como en la carta. Se enciende siguiendo la nota que dejó la versión
       vieja: inline-flex aquí y el nombre centrado entre el botón y la pastilla,
       que es como ya lo hace la página de consultas. */
    #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. */
  }
  /* MANROPE (18 ago 2026): titular desde el 17 ago; Staatliches retirada. Como Staatliches era caps-only, la caja alta se pide por CSS. */
  .port-fund h1,.casas-hero h1,.port-signos h1,.sigue a b,.contacto-vias a b,.tabla-fund th,.aviso-cursos h3,.aviso-cursos button,.casa-ficha-num,.casa-ficha-rot,.casas-rejilla span{font-weight:800; text-transform:uppercase;}
  .port-fund h1,.casas-hero h1,.port-signos h1,.portada h1{letter-spacing:-.5px;}
  h2{letter-spacing:-.3px;}