/* Refugio Noé — "El sello del barrio" · estilos globales */

html, body { overflow-x: clip; background: #FFF8E0; }
body { font-family: 'Nunito', sans-serif; color: #45302B; }
.font-display { font-family: 'Baloo 2', cursive; }

/* grain — gentle paper texture over everything */
.grain::before {
  content: '';
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px) rotate(var(--tilt, 0deg)); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1.2); }
.reveal.in { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.reveal.d1 { transition-delay: .1s } .reveal.d2 { transition-delay: .2s } .reveal.d3 { transition-delay: .3s }

/* rotating stamp seal */
@keyframes girar { to { transform: rotate(360deg); } }
.sello-gira { animation: girar 24s linear infinite; }

/* marquee strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 28s linear infinite; }

/* perforated stamp edge (like a postage stamp) */
.estampilla {
  background-image: radial-gradient(circle at 10px 10px, transparent 6px, #FF6765 6.5px);
  background-size: 20px 20px;
  background-position: -10px -10px;
}

/* sticker wobble on hover */
.sticker { transition: transform .35s cubic-bezier(.22,.9,.3,1.4), box-shadow .35s ease; }
.sticker:hover { transform: rotate(-1.2deg) translateY(-6px); box-shadow: 0 14px 0 0 rgba(69,48,43,.12); }

/* tape strips on polaroids */
.cinta {
  position: absolute; width: 92px; height: 26px;
  background: rgba(255,227,184,.85);
  box-shadow: 0 1px 2px rgba(69,48,43,.15);
  border-left: 2px dashed rgba(69,48,43,.12);
  border-right: 2px dashed rgba(69,48,43,.12);
}

/* squiggle underline — va en un ::after sobre una caja inline-block que abraza
   al texto. Como fondo de un inline se pintaba en el borde inferior de CADA
   línea, que con el interlineado apretado del h1 caía sobre la línea siguiente. */
.huella-sub { position: relative; display: inline-block; }
.huella-sub::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.04em;
  height: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 Q 12 2, 24 7 T 46 7 T 68 7 T 90 7 T 118 6' fill='none' stroke='%23FF6765' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / auto 100%;
}

a, button { -webkit-tap-highlight-color: transparent; }
.link-nav { position: relative; }
.link-nav::after { content:''; position:absolute; left:0; right:100%; bottom:-4px; height:3px; border-radius:99px; background:#FF6765; transition: right .25s ease; }
.link-nav:hover::after, .link-nav.activo::after { right: 0; }

/* pulso de carga */
@keyframes latido { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
.latido { animation: latido 1.2s ease-in-out infinite; }

/* formularios */
.campo {
  width: 100%; background: #FFFDF2; color: #45302B;
  border: 3px solid rgba(69,48,43,.15); border-radius: 1rem;
  padding: .7rem 1rem; font-weight: 600; outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.campo:focus { border-color: #FF6765; background: #FFFFFF; }
.campo::placeholder { color: rgba(69,48,43,.38); font-weight: 500; }
select.campo { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FF6765' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.etiqueta { display: block; font-weight: 800; font-size: .85rem; margin-bottom: .35rem; }

/* rich text del CMS (contenido crudo HTML) */
.prose { line-height: 1.75; color: rgba(69,48,43,.85); }
.prose > * + * { margin-top: 1em; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: 'Baloo 2', cursive; font-weight: 700; color: #45302B; line-height: 1.2; margin-top: 1.6em; }
.prose h1 { font-size: 1.9rem; } .prose h2 { font-size: 1.55rem; } .prose h3 { font-size: 1.25rem; } .prose h4 { font-size: 1.1rem; }
.prose p { margin-top: 1em; }
.prose a { color: #FF6765; font-weight: 700; text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; }
.prose a:hover { text-decoration-style: solid; }
.prose ul, .prose ol { padding-left: 1.4em; margin-top: 1em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-top: .35em; }
.prose blockquote { border-left: 4px solid #FF6765; background: #FFECEA; padding: .8em 1.2em; border-radius: 0 1rem 1rem 0; font-style: italic; }
.prose img { border-radius: 1.25rem; max-width: 100%; height: auto; }
.prose strong { color: #45302B; }
.prose hr { border: none; border-top: 3px dashed rgba(255,103,101,.4); margin: 2em 0; }

/* El widget de rescatados de PetFi monta un shadow root y conserva su propio
   estilo: no se puede (ni se busca) estilar desde aquí. */

@media (prefers-reduced-motion: reduce) {
  .sello-gira, .marquee-track, .latido { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}