/* POEMA® — estilos compartidos de las calculadoras (marca, layout, formulario y resultados) */
:root{
  --navy:#182A46;--navy-800:#11203a;--navy-600:#2a3f63;--navy-100:#dfe5ee;--navy-50:#f0f3f8;
  --oro:#d2a640;--oro-claro:#f4d97a;--oro-700:#8c6a1c;--oro-50:#fcf6e4;
  --bg:#f3f5f8;--surface:#fff;--ink:#14213a;--ink-2:#566176;--ink-3:#667085;--line:#e4e8ef;--line-2:#cfd6e1;
  --error:#c4161c;
  --r-sm:10px;--r:14px;--r-lg:24px;
  --shadow:0 1px 2px rgba(20,33,58,.04),0 12px 40px -12px rgba(20,33,58,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-head:'Montserrat',system-ui,sans-serif;--f-ui:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-ui);background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:var(--navy);font-weight:700;text-underline-offset:2px}

/* Encabezado de marca */
.hero{background:radial-gradient(120% 90% at 50% 0%,#24395e 0%,var(--navy) 55%,var(--navy-800) 100%);color:#fff;text-align:center;padding:28px 16px 92px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--oro) 30%,var(--oro-claro) 50%,var(--oro) 70%,transparent);opacity:.7}
.logo{width:190px;max-width:60vw;height:auto;display:block;margin:0 auto}
.hero-tag{font-family:var(--f-head);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:14px}
.hero-sub{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:6px}

/* Textura topográfica de la marca (la misma de poemaparamascotas.com) */
/* Una sola capa fija que cubre la pantalla: la imagen no se repite, así no se ven uniones */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url("../assets/img/textura-topografica.webp") center/cover no-repeat;pointer-events:none}

.app{max-width:640px;margin:-64px auto 0;padding:0 16px 48px;position:relative}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}

/* Progreso */
.progreso{padding:22px 32px 0}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:.75rem;font-weight:600;color:var(--ink-3);margin-bottom:10px}
.prog-top b{font-family:var(--f-head);color:var(--navy);font-weight:700;letter-spacing:.02em}
.prog-barras{display:flex;gap:6px}
.seg{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.seg::after{content:"";display:block;height:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.seg.hecho::after{transform:scaleX(1)}
.seg.activo::after{background:var(--oro)}

.cuerpo{padding:28px 32px 32px}
.paso{display:none}
.paso.visible{display:block;animation:entrar .32s var(--ease)}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}}

h2{font-family:var(--f-head);font-weight:700;font-size:1.5rem;line-height:1.25;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.sub{color:var(--ink-2);font-size:.95rem;margin:8px 0 24px;text-wrap:pretty}
.bloque{margin-top:28px}
.opcional{color:var(--ink-3);font-weight:600}
.etq,.bloque>label{display:block;font-family:var(--f-head);font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:.01em}

/* Opciones */
.opciones{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.opciones.lista{grid-template-columns:1fr}
.opciones.tres{grid-template-columns:repeat(3,1fr)}
.opcion{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .2s,transform .12s var(--ease);-webkit-tap-highlight-color:transparent}
.opcion::after{content:"";position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface) center/11px no-repeat;transition:background-color .15s,border-color .15s}
.opcion.sel::after{border-color:var(--navy);background-color:var(--navy);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4d97a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media(hover:hover){.opcion:hover{border-color:var(--line-2);box-shadow:0 4px 14px -6px rgba(20,33,58,.18)}}
.opcion:active{transform:scale(.985)}
.opcion.sel{border-color:var(--navy);background:var(--navy-50);box-shadow:0 0 0 3px rgba(24,42,70,.08)}
.opcion:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.ico{width:46px;height:46px;border-radius:12px;background:var(--navy-50);color:var(--navy);display:grid;place-items:center;flex-shrink:0;transition:background-color .15s,color .15s}
.ico svg{width:24px;height:24px;stroke-width:1.75}
.opcion.sel .ico{background:var(--navy);color:var(--oro-claro)}
.opcion strong{display:block;font-family:var(--f-head);font-size:.95rem;font-weight:700;color:var(--ink)}
.opcion small{display:block;color:var(--ink-2);font-size:.82rem;margin-top:1px}
.opciones.lista .opcion{flex-direction:row;align-items:center;padding:14px 52px 14px 14px}
.opciones.lista .opcion::after,.opciones.mini .opcion::after{top:50%;margin-top:-10px}
.opciones.mini .opcion{flex-direction:row;align-items:center;padding:15px 44px 15px 16px}
.opciones.mini .opcion small{margin:0}

/* Campos */
.campo{position:relative}
input[type=text],input[type=number]{width:100%;height:56px;padding:0 18px;font:inherit;font-size:1.05rem;font-weight:600;border:1.5px solid var(--line-2);border-radius:var(--r);color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield}
input[type=number]{padding-right:64px;font-variant-numeric:tabular-nums}
input::placeholder{color:var(--ink-3);font-weight:500}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(24,42,70,.1)}
.unidad{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:700;font-size:.9rem}
.error{color:var(--error);font-size:.8rem;font-weight:600;margin-top:8px;min-height:1.25em}
.ayuda{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--ink-2);margin-top:4px}
.ayuda svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--oro-700)}

/* Botones */
.acciones{display:flex;gap:10px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;font-family:var(--f-head);font-weight:700;font-size:.9rem;letter-spacing:.01em;cursor:pointer;border:1.5px solid transparent;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .12s var(--ease);-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;stroke-width:2.25}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.btn-pri{flex:1;background:var(--navy);color:#fff;box-shadow:0 6px 16px -6px rgba(24,42,70,.55)}
.btn-pri:hover:not(:disabled){background:var(--navy-600)}
.btn-sec{background:var(--surface);color:var(--navy);border-color:var(--line-2)}
.btn-sec:hover{background:var(--navy-50)}
.btn-full{flex:1}
.btn:disabled{background:var(--line);color:var(--ink-3);box-shadow:none;cursor:not-allowed}

/* Resultado */
.resumen{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 22px}
.chip{background:var(--navy-50);color:var(--navy);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700}
.kpis{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:18px}
.kpi.dest{background:var(--navy);border-color:var(--navy);position:relative;overflow:hidden}
.kpi.dest::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--oro),var(--oro-claro),var(--oro))}
.kpi.dest b{display:block;font-family:var(--f-head);font-size:2.3rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.kpi.dest span{display:block;font-size:.8rem;color:var(--oro-claro);font-weight:600;margin-top:6px}
.kpi-et{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.fl{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;font-variant-numeric:tabular-nums;padding:4px 0}
.fl span{color:var(--ink-2)}.fl b{color:var(--navy)}
.estim{font-size:.76rem;color:var(--ink-2);margin-top:8px}
h3.sec{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--f-head);font-size:1rem;font-weight:700;color:var(--navy);margin:36px 0 14px}
.tag{font-family:var(--f-ui);font-size:.75rem;font-weight:700;color:var(--oro-700);background:var(--oro-50);border-radius:999px;padding:4px 10px}
.leyenda{display:flex;gap:18px;font-size:.78rem;color:var(--ink-2);font-weight:600;margin-bottom:12px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.etapas,.tabla{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.etapa{padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.etapa+.etapa{border-top:1px solid var(--line)}
.etapa.final{background:var(--oro-50)}
.et-tit{display:flex;align-items:baseline;gap:10px}
.etapa h4{font-family:var(--f-head);font-size:.88rem;font-weight:700;color:var(--ink)}
.pct{font-size:.78rem;font-weight:700;color:var(--oro-700)}
.dias{font-size:.76rem;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums;background:var(--bg);padding:4px 10px;border-radius:999px;white-space:nowrap}
.etapa.final .dias{background:#fff}
.mezcla{grid-column:1/-1;display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line)}
.ant{background:#c3ccd9}.poe{background:linear-gradient(90deg,var(--oro),#e2bb55)}
.gramos{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;font-size:.84rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gramos b{color:var(--ink);font-weight:700}
.gramos .p b{color:var(--navy)}
table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:var(--bg);padding:10px 18px}
td{padding:9px 18px;border-top:1px solid var(--line);color:var(--ink)}
th:last-child,td:last-child{text-align:right}
tr.marca td{background:var(--oro-50);color:var(--navy);font-weight:700}
.consejos{list-style:none;display:grid;gap:8px}
.consejos li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--bg);border-radius:var(--r);font-size:.9rem;color:var(--ink);text-wrap:pretty}
.ci{width:32px;height:32px;border-radius:10px;background:var(--surface);color:var(--oro-700);display:grid;place-items:center;flex-shrink:0;box-shadow:0 1px 2px rgba(20,33,58,.08)}
.ci svg{width:17px;height:17px;stroke-width:2}
.nota{font-size:.78rem;color:var(--ink-2);margin-top:20px;line-height:1.6;padding:14px 16px;border:1px dashed var(--line-2);border-radius:var(--r)}
footer{text-align:center;font-size:.75rem;color:var(--ink-3);margin-top:20px}

@media(max-width:520px){
  .hero{padding:22px 16px 84px}
  .progreso{padding:18px 20px 0}
  .cuerpo{padding:24px 20px 24px}
  h2{font-size:1.3rem}
  .kpis{grid-template-columns:1fr}
  .opciones.tres{grid-template-columns:1fr}
  .btn-sec{padding:0 18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Selección: el check aparece con un pequeño rebote */
.opcion.sel::after{animation:check .32s var(--ease)}
@keyframes check{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.etapa h3{font-family:var(--f-head);font-size:.88rem;font-weight:700;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.opcion.sel::after{animation:none}}