/* =========================================================
   MASCOTAS CONECTADAS — pages.css — hero, urgencia, perfil, formularios, toast, misc
   ========================================================= */
/* ---------- Hero (base) ---------- */
.hero{position:relative;padding:2.5rem 0 2rem}
@media(min-width:900px){.hero{padding:4rem 0 3rem}}
.hero h1{max-width:12ch}
.hero-sub{margin-top:1rem;font-size:1.1rem;color:var(--ink-2);max-width:48ch}
.hero-copy{max-width:640px}
.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;margin-top:1.25rem;font-size:.9rem;color:var(--ink-2)}
.hero-trust span{display:inline-flex;align-items:center;gap:.4rem}
.hero-trust svg{width:16px;height:16px;color:var(--ok)}

/* ---------- Bloque profesionales ---------- */
.pro-cta{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.pro-cta{grid-template-columns:1fr 1fr;gap:4rem}}
.pro-cta ul{list-style:none;padding:0;margin:1.25rem 0;display:grid;gap:.55rem}
.pro-cta li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.pro-cta li svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:.15rem}
.pro-cta .highlight{background:var(--accent-100);color:var(--accent-600);font-weight:700;padding:.75rem 1rem;border-radius:12px;display:inline-block;margin-bottom:1.25rem}
.pro-cta-visual{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--navy-100)}
.pro-cta-visual img{width:100%;height:100%;object-fit:cover}

/* ---------- Info / etiquetas de perfil (reutilizadas en varias páginas) ---------- */
.info-list{display:grid;gap:.5rem;font-size:.95rem}
.info-list div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.info-list dt{color:var(--ink-3)}.info-list dd{margin:0;font-weight:600;text-align:right;color:var(--navy)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{padding:.45rem .8rem;border-radius:10px;background:var(--bg-soft);font-size:.9rem;font-weight:600;color:var(--navy)}

/* ---------- Formularios (registro, consulta, denuncia, opinión) ---------- */
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-weight:600;font-size:.92rem}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:border-color var(--t),box-shadow var(--t);outline:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);box-shadow:0 0 0 4px var(--navy-100)}
.field textarea{min-height:130px;resize:vertical}
.field .err{font-size:.82rem;color:#C0392B;display:none}
.field.invalid input,.field.invalid textarea{border-color:#C0392B}
.field.invalid .err{display:block}

/* Toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:.8rem 1.15rem;border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t);z-index:90;max-width:calc(100% - 2rem)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.page-enter{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.empty{padding:3rem 1rem;text-align:center;color:var(--ink-2)}

/* Home: "Cómo funciona" en una línea y algo más grande */
.how-home .section-head{max-width:none}
.how-home h2{font-size:clamp(1.7rem,3.6vw,2.5rem);white-space:nowrap}
@media(max-width:700px){.how-home h2{white-space:normal}}

/* Carrusel de reseñas (no altera las tarjetas) */
.carousel-nav{display:flex;gap:.5rem}
.carousel-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--navy);transition:border-color var(--t),background var(--t)}
.carousel-btn:hover{border-color:var(--navy);background:var(--bg-soft)}
.carousel-btn svg{width:18px;height:18px}
.review-carousel{overflow:hidden}
.review-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.review-track::-webkit-scrollbar{display:none}
.review-track .review-card{flex:0 0 calc((100% - 2rem) / 3);scroll-snap-align:start}
@media(max-width:1059px){.review-track .review-card{flex-basis:calc((100% - 1rem) / 2)}}
@media(max-width:759px){.review-track .review-card{flex-basis:88%}}

/* Hero: dos vídeos a la derecha */
.hero-duo{background:#FAF8F4;overflow:hidden;padding-bottom:2.5rem}
.hero-duo-grid{display:grid;gap:2.5rem;align-items:center;position:relative;z-index:1}
@media(min-width:1000px){.hero-duo-grid{grid-template-columns:1fr 1fr;gap:3rem}.hero-duo .hero-copy{max-width:600px}}
/* Fondo decorativo del hero: formas orgánicas muy suaves + una huella grande casi invisible, siempre detrás del contenido */
.hero-bg-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hbd-blob{position:absolute;border-radius:50%;background:#E7F3F1}
.hbd-1{width:30rem;height:30rem;top:-14rem;right:-9rem}
.hbd-3{width:11rem;height:11rem;top:38%;left:-4rem;opacity:.55}
.hbd-paw{position:absolute;width:15rem;height:15rem;bottom:-1.5rem;right:9%;color:#0B2545;opacity:.05;transform:rotate(-12deg)}
@media(max-width:640px){.hbd-1{width:16rem;height:16rem;top:-6rem;right:-5rem}.hbd-3{display:none}.hbd-paw{width:8rem;height:8rem}}
/* Integración con "Servicios principales": el tono cálido del hero se funde de a poco en vez de cortar en seco.
   Las huellas que marcan la costura viven DENTRO de la sección de servicios (no del hero), así ninguna de las
   dos secciones las recorta con su propio overflow — antes se cortaba justo en el límite entre ambas. */
.services-blend{position:relative;background:linear-gradient(180deg,#FAF8F4 0%,#FFFFFF 260px)}
.seam-paw{position:absolute;top:-3.2rem;right:11%;width:6.5rem;height:6.5rem;color:#E7F3F1;opacity:1;pointer-events:none;z-index:0;transform:rotate(-14deg)}
.seam-paw-left{position:absolute;top:-2.6rem;left:6%;width:7.5rem;height:7.5rem;color:#0B2545;opacity:.06;pointer-events:none;z-index:0;transform:rotate(16deg)}
@media(max-width:640px){.services-blend{background:linear-gradient(180deg,#FAF8F4 0%,#FFFFFF 140px)}.seam-paw{width:4.5rem;height:4.5rem;top:-1.8rem;right:6%}.seam-paw-left{width:5rem;height:5rem;top:-1.5rem;left:4%}}
.services-blend .wrap{position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-600);margin-bottom:.9rem}
.hero-duo h1{max-width:14ch;font-size:clamp(2rem,4.6vw,3rem)}
.hero-duo h1 em{font-style:normal;color:var(--accent)}
.hero-duo .searchbar{margin-top:1.25rem}
.urgent-bar{display:flex;align-items:center;gap:.9rem;margin-top:1rem;padding:.85rem 1rem;border-radius:14px;background:var(--accent-100);color:var(--ink);border:1px solid #F6C7AE;transition:background var(--t),transform var(--t)}
.urgent-bar:hover{background:#FCE0D0;transform:translateY(-1px)}
.urgent-bar>span:nth-child(2){flex:1;display:grid;line-height:1.3}
.urgent-bar strong{color:var(--accent-600)}
.urgent-bar .ub-ico{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.urgent-bar .ub-ico svg{width:18px;height:18px}
.urgent-bar>svg{width:18px;height:18px;color:var(--accent);flex:none}
.duo-wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start;padding:.5rem 0 3.25rem}
.duo-card{position:relative;border-radius:22px;overflow:hidden;background:var(--navy-100);box-shadow:var(--shadow);aspect-ratio:3/4.3}
.duo-card video{width:100%;height:100%;object-fit:cover}
.duo-a{margin-top:0}
.duo-b{margin-top:3rem}
.note{font-family:'Caveat',cursive;font-size:1.15rem;line-height:1.1;color:var(--navy);position:absolute;pointer-events:none}
.note-a{left:.8rem;top:1rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4);transform:rotate(-6deg)}
.note-b{right:.8rem;top:.9rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4);transform:rotate(6deg);text-align:right}
.note-c{right:0;bottom:.1rem;color:var(--accent-600);transform:rotate(-4deg);text-align:right;font-size:1.05rem;max-width:44%}
.assigned-card{position:absolute;left:42%;bottom:1.1rem;transform:translateX(-50%);width:min(60%,240px);background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:.9rem 1rem;display:grid;gap:.5rem;font-size:.9rem;animation:floaty 7s ease-in-out infinite}
.assigned-card .ac-body{display:flex;gap:.65rem;align-items:center}
.assigned-card .ac-body .avatar{width:40px;height:40px}
.assigned-card .ac-body strong{display:block;color:var(--navy)}
.assigned-card .avail{width:fit-content}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:999px){.duo-wrap{max-width:520px;margin-inline:auto;padding-bottom:3rem}}

/* Hero duo: tarjeta de reseña */
.hero-review{width:min(66%,270px);gap:.55rem}
.hero-review .stars svg{width:15px;height:15px}
.hero-review .hr-text{font-size:.88rem;line-height:1.45;color:var(--ink)}
.hero-review .ac-body .avatar{width:34px;height:34px}

/* Hero duo: sin recorte (desplegable del buscador) y línea de confianza neutra */
.hero.hero-duo{overflow:visible}
.hero.hero-duo .duo-wrap{overflow:visible}
.hero-trust-line{flex-wrap:nowrap;white-space:nowrap;gap:1.25rem;margin-top:1.25rem;color:var(--ink-2);font-size:.9rem;overflow:hidden}
.hero-trust-line svg{color:var(--ink-3)}
@media(max-width:640px){.hero-trust-line{flex-wrap:wrap;white-space:normal}}

/* Home: preguntas frecuentes en 2 columnas (preguntas | imagen). La imagen se muestra a su tamaño original,
   sin recortar ni estirar; solo se achica si no entra en la columna o en pantallas chicas. */
.faq-home{background:#fff}
.faq-home-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.faq-home-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3.5rem}}
.faq-home .faq{max-width:none;margin:0}
.faq-home-img{justify-self:center}
.faq-home-img img{display:block;max-width:100%;height:auto}

/* SEO de la home: el H1 es la línea con palabras clave (misma apariencia que antes) y el titular grande
   es un párrafo con el mismo estilo que tenía el H1. Visualmente no cambia nada. */
.hero-duo h1.eyebrow,h1.eyebrow{font-size:.75rem;font-weight:700;line-height:1.55;letter-spacing:.12em;max-width:none}
.hero-title{margin:0;font-size:clamp(2rem,4.6vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
.hero-title em{font-style:normal;color:var(--accent)}
/* Contenido que entrega el servidor antes de que cargue la app (lo reemplaza la app al iniciar) */
.ssr-content{padding:2.5rem 0 3rem}
.ssr-content h1{font-size:clamp(1.8rem,4vw,2.5rem);margin:.75rem 0}
.ssr-content h2{font-size:1.2rem;margin:1.75rem 0 .6rem}
.ssr-content p{color:var(--ink-2);max-width:65ch}
.ssr-content ul{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:0;list-style:none}
.ssr-content a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.ssr-content nav ol{display:flex;gap:.4rem;list-style:none;padding:0;margin:0;font-size:.85rem;color:var(--ink-3)}
.ssr-content nav li+li::before{content:"/";margin-right:.4rem}
.ssr-content dt{font-weight:600;margin-top:.8rem}.ssr-content dd{margin:.2rem 0 0;color:var(--ink-2)}
.field .radio input[type=checkbox]{width:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:none;accent-color:var(--navy)}   /* casillas dentro de un campo (aceptaciones) */