/* Autofix v5.1 — el rincon donde guardo cosas chileras.
   No es una pagina de ventas: sin menu, sin botones grandes arriba, sin «como
   trabajamos» ni bitacora. Arriba una frase en primera persona; abajo un estante
   con las cosas guardadas; al final, chiquito, un «contame».
   El azul se queda como ancla (barra, vista de MyDay, vista de Espiga, pie).
   OJO: nada de estilo en linea en el HTML. La CSP de netlify.toml lo bloquea. */

:root{
  --tinta:#0A2540; --honda:#061626; --tarjeta:#0E2E4D; --borde:#1B4468;
  --papel:#FBF7F0; --arena:#F3ECE0; --linea:#E6DCCB; --blanco:#FFFDF9;
  --gris:#4F5B66; --claro:#B9CBDA; --tenue:#8FAEC7;
  --cian:#12BFC4; --cian-t:#07666A; --ambar:#FFA33B; --ambar-t:#8F4A05;
  --display:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
  --texto:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--ambar-t);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.03em;line-height:1.02;text-wrap:pretty}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.env{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.eti{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ambar-t);text-transform:uppercase}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:0;border-radius:12px;font-family:var(--texto);font-size:16px;font-weight:600;cursor:pointer;text-align:center;transition:transform .16s ease,background .2s ease,border-color .2s ease,color .2s ease}
.boton:hover{text-decoration:none}
.boton:active{transform:translateY(1px)}
.boton--p{background:var(--ambar);color:var(--tinta)}.boton--p:hover{background:#F09024;color:var(--tinta)}
.boton--f{background:transparent;color:var(--tinta);border:1.5px solid #8A7C66}.boton--f:hover{border-color:var(--tinta);color:var(--tinta)}

/* Foco: tinta sobre lo claro, ambar sobre lo oscuro (hallazgo 8cda3d46). */
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
:where(.barra,.pie,.panel,.cosa__vista--espiga) :where(a,button,input,textarea):focus-visible{outline-color:var(--ambar)}

/* barra: solo la marca y una nota, sin menu */
.barra{background:var(--honda)}
.barra .env{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.marca{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--papel)}
.marca:hover{text-decoration:none}
.marca__simbolo{fill:var(--papel)}
.marca__simbolo .pieza{fill:var(--ambar);transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.marca:hover .pieza{transform:translate(1.5px,-1.5px) rotate(-8deg)}
.marca span{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.035em;color:var(--papel)}
.barra__nota{font-family:var(--mono);font-size:13px;color:var(--tenue)}

/* ---------- ARRIBA: una frase ---------- */
.heroe{position:relative;overflow:hidden}
.heroe::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 380px at 82% 60%,rgba(255,163,59,.12),transparent 64%);pointer-events:none}
.heroe__reja{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center;padding-top:72px;padding-bottom:40px}
.heroe__caja{display:flex;flex-direction:column;gap:18px;max-width:660px}
.heroe h1{font-size:clamp(42px,6.2vw,82px);font-weight:800}
.heroe p{margin:0;font-size:19px;color:var(--gris);max-width:520px}

.escena{position:relative;width:100%;max-width:260px;justify-self:center;aspect-ratio:1/1}
.escena__svg{width:100%;height:100%;overflow:visible;display:block}
.escena__bloque{fill:var(--tinta)}
.escena__hueco{fill:none;stroke:var(--ambar);stroke-width:.5;stroke-dasharray:1.6 1.4;opacity:0}
.escena__pieza{fill:var(--ambar);transform-box:fill-box;transform-origin:center bottom}
.escena__chispa{fill:none;stroke:var(--ambar);stroke-width:1.1;stroke-linecap:round;opacity:0}
@keyframes cae{
  0%,6%{transform:translateY(-34px) rotate(-14deg);opacity:0}
  14%{opacity:1}
  22%{transform:translateY(0) rotate(0) scaleY(.9) scaleX(1.06)}
  28%{transform:translateY(-2px) scaleY(1.02) scaleX(.99)}
  33%,84%{transform:none;opacity:1}
  92%,100%{transform:translateY(-34px) rotate(-14deg);opacity:0}
}
@keyframes chispa{0%,20%{opacity:0}23%{opacity:1}34%,100%{opacity:0}}
@keyframes hueco{0%,6%{opacity:.9}14%,88%{opacity:0}94%,100%{opacity:.9}}
.escena__pieza{animation:cae 9s cubic-bezier(.3,.7,.3,1) infinite}
.escena__chispa{animation:chispa 9s ease-out infinite}
.escena__hueco{animation:hueco 9s ease infinite}

/* ---------- EL ESTANTE ---------- */
.sec{padding:40px 0 88px}
.sec__cab{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.sec__cab h2{font-size:clamp(28px,3.4vw,40px);font-weight:800}

.estante{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.cosa{background:var(--blanco);border:1px solid var(--linea);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.cosa__vista{background:var(--arena);padding:26px;min-height:320px;display:flex;align-items:center;justify-content:center}
.cosa__vista .panel{width:100%;max-width:440px}
.cosa__texto{flex:1;display:flex;flex-direction:column;gap:10px;padding:26px 30px 30px}
.cosa__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chapa-tipo{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cian-t);background:#E3F3F2;border-radius:999px;padding:5px 11px}
.estado{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:#17744C}
/* sin latido: un punto que late es de tablero de producto, no de rincon */
.punto{width:8px;height:8px;border-radius:50%;background:#1FA56A;flex:0 0 auto}
.cosa h3{font-size:clamp(30px,3.2vw,40px);font-weight:800}
.cosa p{margin:0;color:var(--gris)}
.cosa__nota{font-family:var(--mono);font-size:13px}
.cosa__texto .boton{align-self:flex-start;margin-top:auto}
.cosa__texto p + .boton{margin-top:10px}

/* la vista de Espiga: la espiga se mece */
.cosa__vista--espiga{background:var(--tinta);flex-direction:column;gap:18px}
.espiga{width:80px;height:120px;overflow:visible;transform-origin:50% 100%;animation:mece 4.5s ease-in-out infinite}
.espiga__tallo{fill:none;stroke:var(--ambar);stroke-width:3;stroke-linecap:round}
.espiga__grano{fill:var(--ambar)}
@keyframes mece{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.espiga__lema{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--ambar);text-align:center}

/* ---------- PANEL: MyDay trabajando ---------- */
.panel{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;overflow:hidden;box-shadow:0 24px 48px rgba(10,37,64,.2);position:relative}
@keyframes barrido{0%{transform:translateY(-100%)}100%{transform:translateY(520px)}}
.panel__barrido{position:absolute;left:0;right:0;height:110px;background:linear-gradient(180deg,transparent,rgba(18,191,196,.07),transparent);animation:barrido 6s linear infinite;pointer-events:none}
.panel__cab{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(146,182,214,.14);font-family:var(--mono);font-size:12px;color:#C9DCEA}
.panel__cuenta{color:var(--cian)}
.ciclo{height:3px;background:rgba(146,182,214,.12)}
.ciclo i{display:block;height:100%;width:0;background:var(--ambar)}
@keyframes correr{to{width:100%}}
.ciclo.corre i{animation:correr var(--dur,3200ms) linear forwards}
.panel__lista{position:relative;padding:14px 18px;display:flex;flex-direction:column;gap:10px;min-height:236px}
.tarea{background:#10395F;border-left:3px solid var(--cian);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;transition:background .45s,border-color .45s,opacity .45s}
.tarea__q{font-size:15px;font-weight:600;color:#fff;line-height:1.35}
.tarea__m{font-family:var(--mono);font-size:12px;color:var(--tenue)}
@keyframes entra{from{opacity:0;transform:translateY(-9px) scale(.985)}}
.tarea[data-estado="entrando"]{animation:entra .5s cubic-bezier(.2,.7,.3,1) both}
.tarea[data-estado="cerrada"]{background:#0B2E4E;border-left-color:#2E5B7F}
.tarea[data-estado="cerrada"] .tarea__q{color:#9FB9CE;text-decoration:line-through}
.chapa{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(18,191,196,.14);color:#7FE3E6;opacity:0;transform:scale(.9)}
.chapa.puesta{opacity:1;transform:none;transition:opacity .4s,transform .4s cubic-bezier(.2,1.4,.4,1)}

/* ---------- entradas: solo si animar.js corrio (pone .anima en <html>) ---------- */
.anima .sube{opacity:0;transform:translateY(14px)}
.anima .visible .sube{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.anima .visible .sube:nth-child(2){transition-delay:.08s}

/* ---------- AL FINAL, CHIQUITO: contame ---------- */
.contame{background:var(--arena);border-top:1px solid var(--linea)}
.contame__reja{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;padding-top:60px;padding-bottom:64px}
.contame__texto{display:flex;flex-direction:column;gap:12px}
.contame h2{font-size:clamp(26px,3vw,36px);font-weight:800}
.contame__texto p{margin:0;color:var(--gris);max-width:440px}
.form{background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:600;color:var(--tinta)}
.campo input,.campo textarea{width:100%;background:#fff;color:var(--tinta);border:1px solid #8A7C66;border-radius:10px;padding:12px 14px;font-family:var(--texto);font-size:16px;line-height:1.5}
.campo textarea{resize:vertical;min-height:72px}
.campo input::placeholder,.campo textarea::placeholder{color:#6F665C}
.campo input:focus,.campo textarea:focus{border-color:var(--tinta)}
.form .boton{align-self:flex-start}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{margin:0;border-radius:9px;padding:12px 14px;font-size:15px;line-height:1.5}
.aviso[hidden]{display:none!important}
.aviso--bien{background:#E3F3F2;color:#07514F;border:1px solid #9FD6D3}
.aviso--mal{background:#FBE6E3;color:#8A2318;border:1px solid #E9ADA5}

.pie{background:#04121F}
.pie .env{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px;font-family:var(--mono);font-size:12px;color:#7B9CBA;flex-wrap:wrap}

/* ---------- angosto ---------- */
@media(max-width:900px){
  .heroe__reja{grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:24px}
  .escena{max-width:170px;justify-self:start;margin-left:8px}
  .estante{grid-template-columns:1fr}
  .contame__reja{grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:52px}
  .sec{padding:32px 0 64px}
}
@media(max-width:700px){
  /* Solo los lados: `padding:0 20px` le borraba el aire al heroe (hallazgo 8fd74c62). */
  .env{padding-left:20px;padding-right:20px}
  .cosa__vista{padding:18px;min-height:0}
  .cosa__texto{padding:22px 20px 24px}
  .cosa__texto .boton,.form .boton{align-self:stretch}
  .pie .env{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:520px){
  .barra__nota{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .ciclo i{width:100%}
  .escena__pieza{opacity:1;transform:none}
}