/* ESTILOS DE tunegocioaldia.es · v1
   Salen TAL CUAL de la maqueta aprobada por David:
     ~/Descargas/tunegocioaldia-maqueta-inicio.html   (md5 ccaac4ce844e…)
   Las dos maquetas --portada y articulo-- comparten esta misma hoja: se comprobo
   quitando los @font-face y comparando el resto, y es identica.
   ⛔ NO se toca la paleta, ni las tipografias, ni los espaciados: es la referencia
      visual aprobada. Lo unico que cambia respecto a la maqueta son los @font-face. */
/* ═══ LAS SEIS FUENTES, AUTOALOJADAS ═══════════════════════════════════════
   En la maqueta iban INCRUSTADAS en base64 (177 KB de los cuales ~170 eran esto).
   Aqui se sirven como woff2 desde `fuentes/`, subconjunto latin, sacadas de
   @fontsource 5.3.0 con su OFL al lado -- el mismo metodo que `landing/web/fuentes/`.
   🔑 Los seis @font-face son EXACTAMENTE los seis que declaraba la maqueta: mismos
   pesos, mismos estilos, mismo `font-display:swap`. Nada de esto sale a internet. */
@font-face{font-family:'Fraunces';src:url(fuentes/fraunces-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fuentes/fraunces-latin-600-italic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fuentes/fraunces-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(fuentes/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(fuentes/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(fuentes/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --papel:#f6f3ea; --papel-2:#eee9dc; --blanco:#fffdf8;
  --tinta:#15203a; --tinta-suave:#4a536b; --linea:#dcd4c2;
  --verde:#1b7248; --verde-fondo:#dcefe2;
  --azul:#2a57a4; --azul-fondo:#dfe7f5;
  --ambar:#a5520f; --ambar-fondo:#f7e6d3;
  --radio:14px; --sombra:0 1px 0 rgba(21,32,58,.06),0 10px 30px -12px rgba(21,32,58,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  --titulo:"Fraunces",Georgia,serif;
  --texto:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:18px/1.6 var(--texto);overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
.env{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--titulo);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
.muestra{background:var(--tinta);color:#fff;font-size:13px;text-align:center;padding:6px 12px}

/* cabecera */
.cab{position:sticky;top:0;z-index:20;background:rgba(246,243,234,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.cab .env{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--titulo);font-weight:700;font-size:21px;letter-spacing:-.02em}
.marca .sello{width:30px;height:30px;border-radius:9px;background:var(--verde);display:grid;place-items:center;color:#fff}
.marca .sello svg{width:18px;height:18px}
.marca b{color:var(--verde);font-weight:700}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;font-size:15px;padding:8px 12px;border-radius:999px;color:var(--tinta-suave);transition:background-color .2s var(--ease),color .2s var(--ease)}
.nav a:active{transform:scale(.97)}
@media (hover:hover){.nav a:hover{background:var(--papel-2);color:var(--tinta)}}
@media (max-width:760px){.nav{display:none}}

/* hero */
.hero{padding:72px 0 56px}
.hero .env{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eti{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--verde)}
.eti::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.hero h1{font-size:clamp(40px,6vw,68px);margin:14px 0 18px}
.hero h1 .linea{display:block}
.hero h1 em{font-style:italic;color:var(--verde)}
.hero p.entrada{font-size:20px;color:var(--tinta-suave);max-width:34ch;margin:0 0 28px}
.botones{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:16px;padding:14px 20px;border-radius:999px;border:1.5px solid var(--tinta);transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.btn.lleno{background:var(--tinta);color:#fff}
.btn .flecha{transition:transform .25s var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover .flecha{transform:translateX(4px)}
  .btn:not(.lleno):hover{background:var(--tinta);color:#fff}
}

/* tarjeta lista de comprobación del hero */
.lista{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:26px;box-shadow:var(--sombra);transform:rotate(1.2deg)}
.lista h2{font-size:22px;margin-bottom:4px}
.lista .sub{font-size:15px;color:var(--tinta-suave);margin:0 0 16px}
.lista ul{list-style:none;margin:0;padding:0}
.lista li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px dashed var(--linea);font-size:17px}
.lista li:first-child{border-top:0}
.caja{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--linea);display:grid;place-items:center;position:relative}
.caja svg{width:15px;height:15px;color:#fff;position:relative}
.caja::before{content:"";position:absolute;inset:-2px;border-radius:7px;background:var(--verde)}
.lista .pilar{margin-left:auto;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.p-regla{background:var(--verde-fondo);color:var(--verde)}
.p-internet{background:var(--azul-fondo);color:var(--azul)}
.p-auto{background:var(--ambar-fondo);color:var(--ambar)}
.lista .pie{margin-top:14px;font-size:15px;color:var(--tinta-suave)}
.lista .pie strong{color:var(--verde)}
@media (max-width:860px){
  .hero{padding:44px 0 36px}
  .hero .env{grid-template-columns:1fr;gap:36px}
  .lista{transform:none}
}

/* secciones */
.sec{padding:64px 0}
.sec-cab{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sec-cab h2{font-size:clamp(28px,3.6vw,40px)}
.sec-cab p{margin:6px 0 0;color:var(--tinta-suave)}
.enlace{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}

.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pilar-c{position:relative;display:block;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pilar-c .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;transition:transform .35s var(--ease)}
.pilar-c .ico svg{width:24px;height:24px}
.pilar-c h3{font-size:25px;margin-bottom:8px}
.pilar-c p{margin:0 0 16px;color:var(--tinta-suave);font-size:17px}
.pilar-c .n{font-size:14px;font-weight:700}
.pilar-c:active{transform:scale(.985)}
@media (hover:hover){
  .pilar-c:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
  .pilar-c:hover .ico{transform:rotate(-8deg) scale(1.08)}
}
.c-regla .ico{background:var(--verde-fondo);color:var(--verde)} .c-regla .n{color:var(--verde)}
.c-internet .ico{background:var(--azul-fondo);color:var(--azul)} .c-internet .n{color:var(--azul)}
.c-auto .ico{background:var(--ambar-fondo);color:var(--ambar)} .c-auto .n{color:var(--ambar)}
@media (max-width:860px){.pilares{grid-template-columns:1fr}}

/* artículos */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{display:flex;flex-direction:column;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.art .portada{aspect-ratio:16/9;position:relative;overflow:hidden}
.art .portada .dib{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--ease)}
.art .portada svg{width:38%;height:auto;opacity:.9}
.art .cuerpo{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.art .pilar{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.art h3{font-size:21px}
.art p{margin:0;font-size:16px;color:var(--tinta-suave)}
.art .meta{margin-top:auto;padding-top:8px;font-size:14px;color:var(--tinta-suave)}
.art:active{transform:scale(.985)}
@media (hover:hover){
  .art:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
  .art:hover .dib{transform:scale(1.06)}
}
.art.grande{grid-column:span 2;flex-direction:row}
.art.grande .portada{aspect-ratio:auto;flex:1 1 50%;min-height:260px}
.art.grande .cuerpo{flex:1 1 50%;padding:28px}
.art.grande h3{font-size:30px}
@media (max-width:860px){
  .arts{grid-template-columns:1fr}
  .art.grande{grid-column:auto;flex-direction:column}
  .art.grande .portada{aspect-ratio:16/9;min-height:0}
  .art.grande h3{font-size:24px}
}
.f-regla{background:var(--verde-fondo);color:var(--verde)}
.f-internet{background:var(--azul-fondo);color:var(--azul)}
.f-auto{background:var(--ambar-fondo);color:var(--ambar)}

/* banda de promesa */
.banda{background:var(--tinta);color:#f3efe4;border-radius:24px;padding:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.banda h3{font-size:22px;color:#fff;margin:10px 0 6px}
.banda p{margin:0;font-size:16px;color:#c9cdd8}
.banda .num{font-family:var(--titulo);font-size:44px;line-height:1;color:#8fd6ae}
@media (max-width:860px){.banda{grid-template-columns:1fr;padding:30px}}

/* autor */
.autor{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--papel-2);border:2px dashed var(--linea);display:grid;place-items:center;font-size:12px;color:var(--tinta-suave);text-align:center;line-height:1.2}
.autor h3{font-size:22px;margin-bottom:4px}
.autor p{margin:0;color:var(--tinta-suave);font-size:16px}
.hueco{background:#fff3c4;padding:0 4px;border-radius:4px}
/* ── EL CIRCULO DE INICIALES · 25 sep 2026, decision de David (opcion C) ──────
   No hay foto, ni real ni generada: un circulo con las iniciales. Hereda el sitio
   y el tamaño de `.avatar` y de `.firma .mini`, y solo cambia lo de dentro: el
   borde deja de ser de puntos --que es lo que dice «aqui falta algo»-- y pasa a
   ser lleno, porque ya no falta nada.
   ⚠️ Cero transiciones y cero :hover a proposito: un elemento nuevo con hover
      fuera de @media (hover:hover) pone roja la calibracion 4e, y con razon. */
.inicial{border-style:solid;border-color:var(--linea);background:var(--papel-2);color:var(--tinta);
  font-family:var(--titulo);font-weight:700;letter-spacing:.02em;text-decoration:none;
  display:grid;place-items:center}
.avatar.inicial{font-size:30px}
.firma .mini.inicial{font-size:15px;flex:0 0 auto}

/* boletín */
.boletin{text-align:center;max-width:640px;margin:0 auto}
.boletin h2{font-size:clamp(28px,3.6vw,38px);margin-bottom:10px}
.boletin p{color:var(--tinta-suave);margin:0 0 22px}
.form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.form input{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 18px;border-radius:999px;border:1.5px solid var(--linea);background:var(--blanco);color:var(--tinta)}
.form input:focus{outline:2px solid var(--verde);outline-offset:2px}
@media (max-width:520px){.form{flex-direction:column}}

/* pie */
.pie-web{border-top:1px solid var(--linea);padding:40px 0 48px;margin-top:40px;font-size:15px;color:var(--tinta-suave)}
.pie-web .env{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
.pie-web nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end;align-content:start}
.pie-web nav a{text-decoration:none}
@media (hover:hover){.pie-web nav a:hover{color:var(--tinta);text-decoration:underline}}
.pie-web .aviso{grid-column:1/-1;font-size:14px;border-top:1px dashed var(--linea);padding-top:18px;margin:0}
@media (max-width:760px){.pie-web .env{grid-template-columns:1fr}.pie-web nav{justify-content:flex-start}}

/* ===== ARTÍCULO ===== */
.progreso{position:fixed;top:0;left:0;right:0;height:4px;background:var(--verde);transform-origin:0 50%;transform:scaleX(0);z-index:30}
.migas{font-size:14px;color:var(--tinta-suave);padding-top:34px}
.migas a{text-decoration:none}
.art-cab{max-width:760px;margin:0 auto;padding:18px 0 10px}
.art-cab h1{font-size:clamp(34px,5vw,54px);margin:14px 0 16px}
.art-cab .bajada{font-size:21px;color:var(--tinta-suave);margin:0 0 20px}
.firma{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tinta-suave);flex-wrap:wrap}
.firma .mini{width:40px;height:40px;border-radius:50%;background:var(--papel-2);border:2px dashed var(--linea)}
.firma strong{color:var(--tinta)}
.firma .rev{display:inline-flex;align-items:center;gap:6px;color:var(--verde);font-weight:700}
.lectura{max-width:760px;margin:0 auto;padding-bottom:30px}
.lectura p,.lectura li{font-size:19px;line-height:1.7}
.lectura h2{font-size:30px;margin:44px 0 12px}
.resumen{background:var(--verde-fondo);border-radius:var(--radio);padding:22px 24px;margin:26px 0}
.resumen h2{font-size:18px;font-family:var(--texto);font-weight:700;margin:0 0 8px;letter-spacing:0;color:var(--verde)}
.resumen p{margin:0;font-size:18px}
.norma{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--blanco);border:1px solid var(--linea);border-left:5px solid var(--azul);border-radius:10px;padding:18px 20px;margin:24px 0}
.norma svg{width:26px;height:26px;color:var(--azul)}
.norma p{margin:0;font-size:16px!important}
.norma .t{font-weight:700;color:var(--azul);font-size:13px!important;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
/* ── LA CITA Y LA LISTA NUMERADA · 25 sep 2026 ────────────────────────────────
   Las 5 guias del 25 sep traen <blockquote> (el texto de un recordatorio, una politica
   de Google citada) y <ol> (los pasos de un arreglo). Sin estilo salian con el de por
   defecto del navegador: la cita sin marcar y la lista numerada con la sangria de fabrica,
   que no casa con el resto de la pagina.
   🔑 La cita se marca con una BARRA del color de la marca y fondo de papel, no con
      comillas gigantes ni cursiva: es un mensaje literal, y en cursiva se lee como enfasis.
   ⚠️ Cero transiciones y cero :hover. El movimiento de estos bloques es el de la casa: lo
      pone `data-rev` desde `motion.js`, igual que en los demas. Un :hover fuera de
      @media (hover:hover) pondria roja la calibracion 4e, y con razon. */
.lectura blockquote{margin:24px 0;padding:16px 20px;background:var(--papel-2);
  border-left:4px solid var(--azul);border-radius:0 var(--radio) var(--radio) 0}
.lectura blockquote p{margin:0;font-size:18px}
.lectura blockquote p + p{margin-top:10px}
.lectura ol{margin:18px 0;padding-left:26px}
.lectura ol li{margin:0 0 10px}
.lectura ol li::marker{font-family:var(--titulo);font-weight:700;color:var(--azul)}

/* ── LA SECCION «FUENTES» · al final de cada guia ──────────────────────────── */
.fuentes{margin:36px 0 0;padding:20px 22px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio)}
.fuentes h2{font-size:16px!important;font-family:var(--texto);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 12px}
.fuentes ul{margin:0;padding-left:20px}
.fuentes li{font-size:15px!important;line-height:1.55;margin:0 0 8px;color:var(--tinta-suave)}
.fuentes a{color:var(--azul)}

.check{list-style:none;padding:0;margin:18px 0}
.check li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px dashed var(--linea)}
.check li:first-child{border-top:0}
.check .caja{margin-top:4px}
.anuncio{height:280px;border:2px dashed var(--linea);border-radius:12px;display:grid;place-items:center;color:#8b8472;font-size:14px;margin:34px 0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(21,32,58,.025) 12px 24px)}
.aviso-legal{background:var(--papel-2);border-radius:12px;padding:18px 20px;font-size:15px!important;color:var(--tinta-suave);margin-top:36px}
.aviso-legal strong{color:var(--tinta)}
.relac{max-width:1120px}

/* ===== MOTION =====
   Solo transform y opacity. Sin JS todo se ve (las reglas cuelgan de html.js).
   Con "reducir movimiento" no hay desplazamientos. */
.js [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.js [data-rev].visto{opacity:1;transform:none}
.js .hero h1 .linea{opacity:0;transform:translateY(.4em);animation:sube .6s var(--ease) forwards}
.js .hero h1 .linea:nth-child(2){animation-delay:.1s}
.js .hero h1 .linea:nth-child(3){animation-delay:.2s}
.js .hero .entrada,.js .hero .botones,.js .hero .eti{opacity:0;animation:aparece .6s var(--ease) forwards;animation-delay:.3s}
.js .hero .botones{animation-delay:.4s}
.js .lista{opacity:0;animation:entraLista .6s var(--ease) .25s forwards}
@keyframes sube{to{opacity:1;transform:none}}
@keyframes aparece{from{transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes entraLista{from{transform:translateY(24px) rotate(3deg)}to{opacity:1;transform:rotate(1.2deg)}}
@media (max-width:860px){@keyframes entraLista{from{transform:translateY(24px)}to{opacity:1;transform:none}}}
/* casillas: se marcan una a una */
.js .caja::before{transform:scale(0);transition:transform .35s var(--ease)}
.js .caja svg{opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.js .marcada .caja::before{transform:scale(1)}
.js .marcada .caja svg{opacity:1;transform:none}
.js .lista .pie{opacity:0;transition:opacity .5s var(--ease)}
.js .lista.completa .pie{opacity:1}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .js [data-rev]{transform:none}
  .progreso{display:none}
}

/* ===== HUECOS DE ANUNCIO =====
   Reglas AdSense: etiqueta solo "Anuncios"; nunca animados; lejos de botones y menús;
   altura reservada (CLS 0); lateral fijo solo escritorio, ≤300px de ancho, uno a la vez. */
.anuncio-caja{margin:40px 0}
.anuncio-eti{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8b8472;margin-bottom:6px;text-align:center}
.anuncio{display:grid;place-items:center;text-align:center;border:2px dashed var(--linea);border-radius:12px;color:#8b8472;font-size:14px;margin:0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(21,32,58,.025) 12px 24px)}
.franja .anuncio-caja{margin:8px 0 16px}
.fila-anuncio{grid-column:1/-1}
.fila-anuncio .anuncio-caja{margin:6px 0}
.con-lateral{display:block}
.lateral{display:none}
@media (min-width:1180px){
  .con-lateral{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:48px;justify-content:center}
  .con-lateral .lectura{margin:0}
  .lateral{display:block}
  .pegado{position:sticky;top:88px;margin-top:26px;width:300px}
}
@media (min-width:1180px){.con-lateral .art-cab{margin:0}}