/* Plan de nutrición personalizado — estilos propios */

/* ---------- Pasos: la animación la maneja js/plan.js ---------- */
.paso.visible{animation:none}
.card,.cuerpo{overflow:clip}
.app{transition:max-width .8s var(--ease)}
.app.ancho{max-width:1120px}

/* Perro y gato decorativos (imágenes de poemaparamascotas.com).
   Con espacio a los lados: se asoman junto al borde inferior de la tarjeta, sin taparla.
   Sin espacio: van debajo de la tarjeta. El corte inferior de la foto se difumina. */
.escena{position:relative}
.escena .card{position:relative;z-index:1}
.mascotas-deco img{display:block;width:auto;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent);
  animation:asomar .9s var(--ease) .25s backwards}
@keyframes asomar{from{opacity:0;transform:translateY(28px)}}
@media(min-width:1180px){
  /* delante de la tarjeta, montadas sobre sus esquinas inferiores; entran 26px,
     menos que el margen interior (32px), así no tapan contenido */
  .mascotas-deco{position:relative;z-index:2}
  .mascotas-deco img{position:absolute;bottom:-40px;height:270px}
  .deco-perro{right:calc(100% - 26px)}
  .deco-gato{left:calc(100% - 26px)}
}
/* en el resultado la tarjeta se ensancha: si no queda espacio lateral, pasan abajo */
@media(min-width:1180px) and (max-width:1599px){
  .app.ancho .mascotas-deco img{position:static;height:150px}
}
@media(max-width:1179px){
  .mascotas-deco img{height:140px}
}
.mascotas-deco{display:flex;justify-content:space-between;align-items:flex-start;padding:0 20px;height:0}
@media(max-width:1179px){.mascotas-deco{height:auto;margin-top:12px}}
@media(min-width:1180px) and (max-width:1599px){.app.ancho .mascotas-deco{height:auto;margin-top:12px}}
/* móvil: al centro y pequeñas */
@media(max-width:640px){.mascotas-deco{justify-content:center;gap:10px;padding:0;margin-top:10px}.mascotas-deco img{height:76px}}
@media(prefers-reduced-motion:reduce){.mascotas-deco img{animation:none}}
.escena[data-especie=perro] .deco-gato,.escena[data-especie=gato] .deco-perro{display:none}
@media print{.mascotas-deco{display:none}}

/* Cursor de patita según la especie elegida (solo con mouse; sin elegir, cursor normal).
   Azul en reposo, dorada sobre lo que se puede pulsar. */
@media(hover:hover) and (pointer:fine){
  html[data-especie=perro],html[data-especie=perro] *{cursor:url("../assets/cursor/perro.svg") 16 16,auto}
  html[data-especie=gato],html[data-especie=gato] *{cursor:url("../assets/cursor/gato.svg") 16 16,auto}
  html[data-especie=perro] :is(a,button,label,summary,select,.opcion,.pet,.tab,.check) *,
  html[data-especie=perro] :is(a,button,label,summary,select,.opcion,.pet,.tab,.check){cursor:url("../assets/cursor/perro-click.svg") 16 16,pointer}
  html[data-especie=gato] :is(a,button,label,summary,select,.opcion,.pet,.tab,.check) *,
  html[data-especie=gato] :is(a,button,label,summary,select,.opcion,.pet,.tab,.check){cursor:url("../assets/cursor/gato-click.svg") 16 16,pointer}
  html[data-especie] :is(input:not([type=checkbox]):not([type=radio]),textarea){cursor:text}
  html[data-especie] :disabled,html[data-especie] :disabled *{cursor:not-allowed}
}

/* Pregunta de meses: se despliega suavemente */
.colapsable{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .3s ease}
.colapsable.abierto{grid-template-rows:1fr;opacity:1}
.colapsable-in{overflow:hidden;min-height:0}

/* Pantalla "Estamos preparando tu plan" */
.prep{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 0 12px}
.prep h2{max-width:24ch;margin-top:22px}
.prep-ico{position:relative;width:88px;height:88px;display:grid;place-items:center}
#prepIco{width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--oro-claro);display:grid;place-items:center}
#prepIco svg{width:30px;height:30px;stroke-width:1.75}
.prep-anillo{position:absolute;inset:0;border-radius:50%;border:3px solid var(--line);border-top-color:var(--oro);animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.prep-lista{list-style:none;display:grid;gap:12px;margin-top:26px;text-align:left}
.prep-lista li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--ink-3);transition:color .3s}
.prep-lista li.hecho{color:var(--ink)}
.prep-dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;color:transparent;transition:background-color .25s,border-color .25s,color .25s}
.prep-dot svg{width:14px;height:14px;stroke-width:3}
.prep-lista li.hecho .prep-dot{background:var(--navy);border-color:var(--navy);color:var(--oro-claro);animation:check .32s var(--ease)}
@media(prefers-reduced-motion:reduce){.prep-anillo{animation:none;border-top-color:var(--line)}.prep-lista li.hecho .prep-dot{animation:none}}

/* Fórmula recomendada */
.badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--oro-700);background:var(--oro-50);border-radius:999px;padding:2px 8px;margin-bottom:5px}
.opcion.sel .badge{background:#fff}
.vacio{font-size:.9rem;color:var(--ink-2);padding:16px;background:var(--bg);border-radius:var(--r)}

/* ---------- Resultado ---------- */
.eyebrow{font-family:var(--f-head);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-700);margin-bottom:6px}
.res-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px}
.res-tit h2{font-size:1.75rem}
.res-tit .resumen{margin:14px 0 0}
.res-top .btn{flex-shrink:0}

.res-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.res-main{min-width:0}

.porque{display:flex;gap:14px;align-items:flex-start;margin-top:12px;padding:16px 18px;background:var(--oro-50);border:1px solid #efdca6;border-radius:var(--r)}
.porque h3{font-family:var(--f-head);font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.porque p{font-size:.9rem;color:var(--ink);text-wrap:pretty}

/* Pestañas de detalle */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:28px 0 20px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border:0;background:none;font-family:var(--f-head);font-size:.86rem;font-weight:700;color:var(--ink-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .25s var(--ease)}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--navy)}
.tab[aria-selected=true]{color:var(--navy);border-bottom-color:var(--oro)}
.tab:focus-visible{outline:2px solid var(--oro);outline-offset:-4px;border-radius:10px}
.panel-intro{font-size:.88rem;color:var(--ink-2);margin-bottom:12px}
.panel-intro b{color:var(--navy)}
.res-main .nota{margin-top:24px}

/* Aviso legal: antes de ver el plan y dentro del resultado */
.legal-paso{display:flex;gap:8px;align-items:flex-start;margin:-10px 0 20px;font-size:.78rem;line-height:1.5;color:var(--ink-2)}
.legal-paso svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--ink-3)}
.legal-paso a{font-weight:600}
.aviso{display:flex;gap:14px;align-items:flex-start;margin-top:12px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.aviso .ci{background:var(--bg);color:var(--ink-2);box-shadow:none}
.aviso h3{font-family:var(--f-head);font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.aviso p{font-size:.8rem;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.aviso p+p{margin-top:6px}
.aviso a{font-weight:600}

/* Varias mascotas: una pestaña por mascota */
.familia{background:var(--bg);border-radius:var(--r);padding:12px;margin-bottom:28px}
.pets{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pets::-webkit-scrollbar{display:none}
.pet{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1.5px solid transparent;border-radius:999px;background:var(--surface);cursor:pointer;white-space:nowrap;text-align:left;transition:border-color .2s,background-color .2s,transform .12s var(--ease)}
.pet:hover{border-color:var(--line-2)}
.pet:active{transform:scale(.97)}
.pet[aria-selected=true]{border-color:var(--navy);box-shadow:0 2px 8px -2px rgba(24,42,70,.2)}
.pet[aria-selected=true] .ci{background:var(--navy);color:var(--oro-claro)}
.pet:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.pet .ci{width:32px;height:32px;border-radius:50%;box-shadow:none;background:var(--navy-50);color:var(--navy)}
.pet-txt{display:flex;flex-direction:column;line-height:1.25}
.pet-txt b{font-family:var(--f-head);font-size:.86rem;color:var(--ink)}
.pet-txt span{font-size:.76rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.familia-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:10px;padding:0 6px 2px}
.familia-total{font-size:.82rem;color:var(--ink-2);line-height:1.6}
.familia-total b{color:var(--navy)}
.link-btn{border:0;background:none;padding:4px 0;font:inherit;font-size:.8rem;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link-btn:hover{color:var(--error)}

/* Columna "¿Qué sigue?" */
.res-side{display:grid;gap:12px;position:sticky;top:16px}
.res-side .eyebrow{margin:0 0 -2px 2px}
.res-side .cta{padding:18px}
.res-side .cta-fila>input,.res-side .cta-fila>select,.res-side .cta-fila>.btn{flex:1 1 100%}
.res-side .cta-sep .btn{flex:1 1 0}
.redes{display:flex;align-items:center;gap:8px;padding:4px 2px}
.redes-et{font-family:var(--f-head);font-size:.8rem;font-weight:700;color:var(--navy);margin-right:auto}
.redes .red{width:44px;padding:0;justify-content:center}
.res-pie{display:flex;justify-content:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}

/* Cómo repartir la porción en el día */
.dia-top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:6px}
.dia-top .panel-intro{margin:0;flex:1 1 260px;color:var(--ink)}
.comidas{display:inline-flex;gap:2px;padding:4px;background:var(--bg);border-radius:999px}
.comidas[hidden]{display:none}
.comidas button{height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font-family:var(--f-head);font-size:.8rem;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.comidas button:hover{color:var(--navy)}
.comidas button[aria-checked=true]{background:var(--surface);color:var(--navy);box-shadow:0 1px 3px rgba(20,33,58,.16)}
.comidas button:focus-visible{outline:2px solid var(--oro);outline-offset:1px}
.dia-nota-horario{font-size:.78rem;color:var(--ink-3);margin:10px 0 12px}
.horario{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.horario li{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r)}
.h-hora{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.h-hora svg{width:14px;height:14px;color:var(--oro-700)}
.h-g{font-family:var(--f-head);font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.h-g small{font-size:.8rem;font-weight:700;color:var(--ink-2);margin-left:3px;letter-spacing:0}
.h-n{font-size:.74rem;color:var(--ink-3)}
.dia-notas{list-style:none;display:grid;gap:10px;margin-top:18px}
.dia-notas li{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink);text-wrap:pretty}
.dia-notas svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--oro-700)}
.dia-fuente{font-size:.76rem;color:var(--ink-3);margin-top:14px}
.por-comida{grid-column:1/-1;font-size:.8rem;color:var(--ink-2);padding-top:8px;border-top:1px dashed var(--line-2)}

@media(max-width:900px){
  .res-grid{grid-template-columns:1fr}
  .res-side{position:static}
}
@media(max-width:520px){
  .res-top{flex-direction:column}
  .res-top .btn{width:100%}
  .res-tit h2{font-size:1.4rem}
  .tab{padding:12px 8px;font-size:.8rem}
  .tab svg{display:none}
}

/* Impresión / PDF: solo el plan, con todas las pestañas abiertas */
@media print{
  body{background:#fff}
  .hero{-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:16px}
  .hero::after,.progreso,.res-top .btn,.res-side,.res-pie,.familia-pie .link-btn,.tabs,footer{display:none!important}
  .app,.app.ancho{margin:0;padding:0;max-width:none}
  .card{box-shadow:none;border-radius:0}
  .cuerpo{padding:24px 0;overflow:visible;height:auto!important}
  .res-grid{display:block}
  .panel{display:block!important;margin-top:20px}
  .kpi.dest,.etapa.final,tr.marca td,.porque,.pet[aria-selected=true] .ci{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .etapa,.tabla,.consejos li{break-inside:avoid}
}

/* Paso 1: foto de la mascota en vez del ícono */
.ico-foto{width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--navy-50);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--line);transition:box-shadow .2s}
.ico-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.15);transform-origin:50% 20%;transition:transform .35s var(--ease)}
.opcion:hover .ico-foto img{transform:scale(1.24)}
.opcion.sel .ico-foto{background:var(--navy-50);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--oro)}
@media(max-width:520px){.ico-foto{width:60px;height:60px}}
.ico-foto img[src$="gato.webp"]{object-position:50% 0;transform:scale(1.02);transform-origin:50% 0}
.opcion:hover .ico-foto img[src$="gato.webp"]{transform:scale(1.1)}

/* Fotos decorativas: solo aparecen cuando ya se eligió especie */
.escena:not([data-especie]) .mascotas-deco{display:none}
/* móvil: la foto se monta un poco sobre el borde inferior de la tarjeta
   (14px, menos que su margen interior de 24px, así no tapa el botón) */
@media(max-width:640px){.mascotas-deco{position:relative;z-index:2;margin-top:-14px}}

/* Paso peso: "¿No sabes su peso exacto?" — rangos de la guía con ícono que crece según el peso */
.no-se{margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.no-se-tit{display:flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:700;font-size:.88rem;color:var(--navy);margin:0 0 12px}
.no-se-tit svg{width:18px;height:18px;color:var(--oro-700);flex-shrink:0}
.rangos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.rango{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:12px 8px 10px;min-height:88px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .2s,transform .12s var(--ease)}
.rango:hover{border-color:var(--line-2);box-shadow:0 4px 14px -6px rgba(20,33,58,.18)}
.rango:active{transform:scale(.97)}
.rango[aria-checked=true]{border-color:var(--navy);background:var(--navy-50);box-shadow:0 0 0 3px rgba(24,42,70,.08)}
.r-ico{display:grid;place-items:end center;height:30px;color:var(--ink-3);transition:color .15s}
.r-ico svg{width:var(--s);height:var(--s)}
.rango[aria-checked=true] .r-ico{color:var(--oro-700)}
.r-kg{font-family:var(--f-head);font-weight:700;font-size:.88rem;white-space:nowrap}
.r-kg small{font-weight:600;color:var(--ink-3)}
@media(max-width:520px){.rangos{grid-template-columns:repeat(3,1fr)}.rango{min-height:80px;padding:10px 4px 8px}.r-kg{font-size:.8rem}}

/* Resultado: enlace para corregir "¿Ya come POEMA®?" */
.cambiar-trans{display:inline-block;margin-top:10px}
.cambiar-trans:hover{color:var(--navy)}
@media print{.cambiar-trans{display:none}}