:root {
  --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --heading-font: "Libre Franklin", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --nav-font: "Montserrat", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}


:root{
  /* Colores por categoría (tus valores) */
  --c-3d: #EAA0C5;
  --c-motion: #256EB3;
  --c-web: #199A60;
  --c-graf: #F8BC1E;
  --c-camp: #E94426;

  /* UI */
  --ink: #171D30;
  --radius: 18px;
  --gap: 28px;
  --t: 420ms;
}

/* colores por categoría */
.cat-motion { --cat-color: #256EB3; }
.cat-3d     { --cat-color: #EAA0C5; }
.cat-web    { --cat-color: #199A60; }
.cat-graphic{ --cat-color: #F8BC1E; }
.cat-camp   { --cat-color: #E94426; }



*{ box-sizing: border-box; }
body{ margin:0; }


body{
  background-color: #F2F7DB;
  position: relative;
  font-family: var(--default-font);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("../img/fondo/asfalto.png");
  background-repeat: repeat;
  background-size: 420px 420px;
  opacity: 0.5;       /* clave */
  pointer-events: none;
  z-index: -1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*Logo pagina -----------------------------------------------------------------------------------------------------------*/



.portfolio-topbar{
  position: fixed;
  top: 5px;
  left: 0;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;
  background: rgba(23, 28, 47, 0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);

  z-index: 2000;
}

.topbar-logo{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
 /* padding-left: 3rem;*/
}

.topbar-logo img{
  width: 60px;
  height: 60px;
  object-fit: cover;

}
/*----------------------------------------------------------------------------------------------------------------------------*/
.portfolio-topbar{
  position: fixed;   
  left: 0;
  width: 100%;
  z-index: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 18px;
  background: transparent; /* para que no pese */
  border-bottom: none;
}


/* Botón volver editorial */
.back-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  
  padding-right: 1rem;

  text-decoration: none;
  color: #171C2F;                /* navy */
  font-size: 17px;
  letter-spacing: 0.12em;        /* personalidad sin gritar */
  font-weight: 700;

  opacity: 0.85;
  transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease;
}

.back-icon{
  font-size: 1.5rem;               /* flecha más presente */
  line-height: 1;
  transform: translateX(0);
  transition: transform .22s ease;
}


/* Hover sutil (orgánico) */
.back-btn:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.back-btn:hover .back-icon{
  transform: translateX(-3px);
}

/* En mobile, que no se coma el layout */
@media (max-width: 520px){
  .portfolio-topbar{ padding: 14px 16px; }
  .back-text{ display: none; }   /* queda solo la flecha */
  .back-icon{ font-size: 20px; }
}

.back-btn:hover{ transform: translateY(-1px) rotate(-0.6deg); }


/*----------------------------------------------------------------------------------------------------------------------------*/
.p{
  min-height: 100vh;
  background: #F3F6DC;
  color: var(--ink);
  
}

.p-header{
  padding: 28px 18px 10px;
  max-width: 1150px;
  margin: 0 auto;
  padding-bottom: 2rem;
  justify-items: center;
  font-family: "Libre Franklin", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.p-title{
  margin-bottom: 3.5rem;
  margin-top: 2.5rem;
  text-align: center;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #EAA0C5;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 4rem);

}

.nonav {
 position: relative;
 text-align: center;
}




.p-title--doodles{
  position: relative;
  display: inline-block; /* clave: doodles se pegan al ancho real del texto */
  padding: 0 44px;       /* espacio para doodles */
}

.p-title--doodles::before,
.p-title--doodles::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.95;
}

/* doodle izquierda */
.p-title--doodles::before{
  left: 0;
  top:80px;
  background-image: url("../img/svg/doodle-l.svg"); 
}

/* doodle derecha */
.p-title--doodles::after{
  right: 0;
   top:0;
  background-image: url("../img/svg/doodle-r.svg");
}






/*filtros*/




.p-filters{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


.filter{
      border: 0;              /* <-- esto lo quita */
  outline: none;   
  font-size: 1.1rem;          /* fijo para todos */
  padding: 8px 14px;        /* fijo para todos */
  border-radius: 999px;
  background: transparent;
  color: #171D30;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  transition: background-color 420ms ease, color 420ms ease, transform 420ms ease, opacity 420ms ease;
}

.filter.is-active{
  opacity: 1;
  font-weight: 800;
  background-color: var(--accent);
  color: #F2F7DB;
  transform: translateY(-1px) scale(1.06); /* destaca sin empujar */
}




.filter:hover{
  opacity: 1;
}



/* spans que crea scrambleTitle
.filter .scr-letter{
  display:inline-block;
  will-change: transform;
} */


.filter[data-filter="camp"]{ --accent: #E94426; }
.filter[data-filter="web"]{ --accent: #199A60; }
.filter[data-filter="graf"]{ --accent: #F8BC1E; }
.filter[data-filter="motion"]{ --accent: #256EB3; }
.filter[data-filter="3d"]{ --accent: #EAA0C5; }
.filter[data-filter="all"]{ --accent: #171D30; }




/* ===== GRID ================================================================================ */
.p-main{
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 18px 60px;
}

.thumb-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

@media (max-width: 980px){
  .thumb-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .thumb-grid{ grid-template-columns: 1fr; }
}

.thumb{
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;

  transform: translateZ(0) scale(1);
  transition: transform var(--t) ease;
}

.thumb-img{
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  z-index: 100;
}

/* borde+glow */
.thumb::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2px solid transparent;
  opacity: 0;
  pointer-events:none;
  transition:
    opacity var(--t) ease,
    box-shadow var(--t) ease,
    border-color var(--t) ease;
}

.thumb:hover{
  transform: scale(1.03);
}
.thumb:hover::after{
  opacity: 1;
}

/* glow por categoría */
.thumb[data-cat="3d"]:hover::after{
  border-color: var(--c-3d);
  box-shadow: 0 0 0 4px rgba(234,160,197,0.22), 0 0 22px rgba(234,160,197,0.30);
}
.thumb[data-cat="motion"]:hover::after{
  border-color: var(--c-motion);
  box-shadow: 0 0 0 4px rgba(37,110,179,0.20), 0 0 22px rgba(37,110,179,0.28);
}
.thumb[data-cat="web"]:hover::after{
  border-color: var(--c-web);
  box-shadow: 0 0 0 4px rgba(25,154,96,0.18), 0 0 22px rgba(25,154,96,0.26);
}
.thumb[data-cat="graf"]:hover::after{
  border-color: var(--c-graf);
  box-shadow: 0 0 0 4px rgba(248,188,30,0.18), 0 0 22px rgba(248,188,30,0.26);
}
.thumb[data-cat="camp"]:hover::after{
  border-color: var(--c-camp);
  box-shadow: 0 0 0 4px rgba(233,68,38,0.18), 0 0 22px rgba(233,68,38,0.26);
}

.thumb.is-hidden{ display:none; }


/*Stickers----------------------------------------------------------------------------------------*/

.page-wrap{
  position: relative;
}

.stickers-global{
  position: absolute;
  inset: 0;              /* cubre todo el alto del body (del wrapper) */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;      /* evita scroll por offsets negativos */
}

main, header, footer{
  position: relative;
  z-index: 1;            /* contenido arriba */
}

.sticker{
  position: absolute;
  width: 140px;
  opacity: 0.22;
  transform: rotate(-6deg);
}

/* medio cortados (negativos) */
.s1{ top: -34px; left: -42px; width: 170px; transform: rotate(-10deg); }
.s2{ top: 18vh;  left: -58px; width: 130px; transform: rotate(8deg); }
.s3{ top: 150vh; left: -14px; width: 120px; transform: rotate(-4deg); }

.s4{ top: 80vh;  right: -86px; width: 200px; transform: rotate(10deg); }
.s5{ top: 200vh; right: 28px; width: 120px; transform: rotate(-8deg); }
.s6{ top: 360vh; right: -42px; width: 130px; transform: rotate(6deg); }

.s7{ top: 300vh;  left: -58px; width: 130px; transform: rotate(8deg); }
.s8{ top: 400vh; left: 4px; width: 120px; transform: rotate(-4deg); }
.s9{ top: 460vh;  right: 56px; width: 150px; transform: rotate(10deg); }



.contact {
  z-index: 200;
}














/* ======================================================================
   POPUP
   ====================================================================== */

.popup-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  background: rgba(23,29,48,0.6);
  backdrop-filter: blur(6px);
}

.popup-overlay.is-open{
  display: flex;
}

.popup{
  position: relative;
  width: min(1110px, 95vw);
  max-height: 90vh;
  padding: 24px;
  border-radius: 22px;

  background: #171d306a;

  /* sin scroll en el popup */
  overflow: hidden;
}

.popup-close{
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 0;
  font-size: 0px;
  cursor: pointer;
}

/* ======================================================================
   GRID INTERNO (3 columnas)
   ====================================================================== */

.popup-content{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;

  /* si querés altura fija del layout para evitar scroll/variaciones, descomenta:
  height: min(70vh, 640px);
  align-items: stretch;
  */
}

.popup-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Columna 3: 2 boxes apilados */
.popup-media-side{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
  height: 100%;
}


/* ======================================================================
   CAJAS MEDIA
   ====================================================================== */

.media-box{
  border-radius: 16px;
  overflow: hidden;
  background: #171C2F; /* placeholder, luego podés dejarlo neutro */
  min-height: 0;
}

/* IMÁGENES: cover */
.media-box img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* VIDEOS: contain (no recorta) */
.media-box video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #171D30;
}

/* Video vertical en columna central */
.popup-media-main .media-box{
  aspect-ratio: 9 / 16;
}

/* ======================================================================
   TEXTO (columna 1)
   ====================================================================== */

.popup-text{
  height: 100%;
  background: #F2F7DB;
  border-radius: 18px;
  padding: 25px 25px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
}

.popup-title{
  font-size: 31px;
  margin: 0 0 3px;
  color: var(--cat-color, #256EB3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.popup-category{
  font-weight: 700;
  opacity: 0.6;
  margin: 0 0 8px;
}

.popup-desc{
  line-height: 1.6;
  font-size: 0.98rem;
  margin: 0;
  font-weight: 500 !important;
  color: #171C2F;
   font-family: var(--default-font);
}

/* ======================================================================
   FULLSCREEN (evita recorte en 16:9)
   ====================================================================== */

video:fullscreen{
  object-fit: contain !important;
  background: #171C2F;
}

video:-webkit-full-screen{
  object-fit: contain !important;
  background: #171C2F;
}


/* Wide: la columna #popupMain ocupa columnas 2 y 3 */
#popupMain.popup-media-wide{
  grid-column: 2 / 4;
}

/* Wide: anula el 9:16 del motion vertical */
#popupMain.popup-media-wide .media-box{
  aspect-ratio: 16 / 9;
  height: 100%;
}


.vimeo-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
}

.vimeo-wrapper iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/*para que las imagens se maximicen*/

.image-viewer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: zoom-out;
}

.image-viewer.is-open{
  display: flex;
}

.image-viewer img{
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
}


/*BOTON WEB*/

.popup-web-btn{
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;

  background: #199A60;
  color: #F2F7DB;
  font-weight: 600;
  text-decoration: none;

  display: inline-block;   /* 👈 clave */
  width: auto;             /* 👈 que no ocupe todo */

  align-self: flex-start;
}































































/*Contacto*/


/* ---------------------- CONTACTO --------------------------------------------------------------------------------------------------------- */

.contact{
  position: relative;
  min-height: 100vh;
  background: #171C2F; /* color plano base */
  overflow: hidden;
}

/* textura encima */
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/fondo/mooning.png") repeat;
  opacity: 0.35;            /* ajustable */
  pointer-events:none;
  z-index:0;
}

.contact-inner{
  position: relative;
  z-index: 2;
  max-width: 1150px;
  min-height: 90vh;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) 24px;


}

/* ===== Header ===== */

.contact-head{
  text-align: left;
  color: #276FB4;
  padding-left: 30px;
}

.contact-title{
  margin: 0;
  font-size: clamp(42px, 4vw, 70px);
  line-height: 1;
  position: relative;
  display: inline-block;
  color: #EAA0C5;
}



.contact-doodle{
  position: absolute;
  right: -88px;
  top: 40%;
  transform: translateY(-50%) rotate(-6deg);
  width: 78px;
  opacity: 0.95;
  pointer-events: none;
  color: #F3F6DC;
}

.contact-sub{
  margin-top: 0px;
  margin-left: 10px;
  color: #276FB4;

}

.contact-kicker{
  display: inline-block;
  font-size: clamp(18px, 2.2vw, 27px);
  font-weight: 600;

}

.bi-instagram {
  font-size: 2rem;
}

.bi-envelope{
  font-size: 2rem;
}


/* ===== Cuerpo ===== */

.contact-body{
  display: grid;
  gap: 8px;
}

.contact-list{
  list-style: none;
  padding-top: 30px;
  margin: 0;

  gap: 1px;
}

.contact-link{
  position: relative;
  display: inline-flex;
  align-items: start;
  gap: 14px;
  padding-top: 10px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  color: #F3F6DC;
  text-decoration: none;
}

.contact-link:hover{
  color: #276FB4;
}

.contact-ico{
  font-size: 22px;
}

/* ===== Firma ===== */

/* ===== Firma / Logo ===== */

.contact-sign{
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 3;
  pointer-events: none; /* no interfiere */
}

.contact-logo{
  width: clamp(70px, 10vw, 140px);
  height: auto;
  opacity: 1;
  transform: translateY(6px);
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 600ms cubic-bezier(.22,.61,.36,1);

  pointer-events: auto;
  cursor: default;
}


/*.contact-brand{
  font-size: clamp(48px, 10vw, 140px);
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.25;
  color: #2E5FA7; /
}*/


.contact .contact-logo{
  opacity: 0;
  transform: translateY(10px);
}

.contact.is-ready .contact-logo{
  opacity: 0.35;
  transform: translateY(0);
}


.contact-logo:hover{
  opacity: 0.55;
  transform: translateY(0) scale(1.03);
}



/* ===== Stickers ===== */

.contact-stickers{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.c-sticker{
  position: absolute;
  width: clamp(60px, 10vw, 140px);
  opacity: 1;
}

/* posiciones iniciales (después las animamos) */
.c-star{ top: 18%; right: 12%;  width: 180px}
.c-bolt{ top: 42%; right: 30%; width: 120px }
.c-cat{ bottom: 11%; right: 45%; width: 150px}
.c-duck{ bottom: 0%; left: 5%; width: 180px;}

@media (max-width: 700px){
  .contact-head{ text-align: center; }
  .contact-body{ text-align: center; }
  .contact-link{ justify-content: center; }
}

/* =========================================================
   CONTACTO — Animaciones (entrada + hover reactivo)
   Reemplaza el bloque anterior completo
   ========================================================= */

.contact-inner,
.contact-stickers .c-sticker,
.contact-link,
.contact-brand{
  will-change: transform, opacity;
}

/* --------- Estado inicial (antes de entrar) --------- */
.contact .contact-head,
.contact .contact-body{
  opacity: 0;
  transform: translateY(10px);
}

.contact .contact-brand{
  opacity: 0;
  transform: translateY(8px);
}

/* Stickers: invisibles al inicio */
.contact .c-sticker{
  opacity: 0;
  transform: translateY(10px) scale(0.98) rotate(0deg);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.18));
}

/* Texto “hablemos / no mordemos” */
.contact-kicker{
  display: inline-block;
  font-weight: 700;
  margin-right: 10px;
}
.contact-kicker-sub{
  display: inline-block;
  font-weight: 600;
  opacity: 0.72;
}

/* --------- Activación (cuando entra en viewport) --------- */
.contact.is-ready .contact-head,
.contact.is-ready .contact-body{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms cubic-bezier(.22,.61,.36,1),
              transform 520ms cubic-bezier(.22,.61,.36,1);
}

.contact.is-ready .contact-brand{
  opacity: 0.25; /* tu firma suave */
  transform: translateY(0);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: 160ms;
}

/* Entrada base SOLO para pato + gato (los “presentamos”) */
.contact.is-ready .c-duck,
.contact.is-ready .c-cat{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-2deg);
  transition: opacity 700ms cubic-bezier(.22,.61,.36,1),
              transform 900ms cubic-bezier(.22,.61,.36,1);
  transition-delay: 220ms;
}

/* estrella + rayo NO aparecen al entrar (solo en hover) */
.contact .c-star,
.contact .c-bolt{
  opacity: 0;
}

/* --------- Hover: “pasan cosas” (Opción B) --------- */
/* Off-screen suave por defecto (para que entren) */
.contact .c-star{
  transform: translateX(22px) translateY(10px) scale(0.92) rotate(12deg);
  transform-origin: 70% 30%;
}

.contact .c-bolt{
  transform: translateX(-22px) translateY(10px) scale(0.92) rotate(-12deg);
  transform-origin: 30% 30%;
}

/* Respiración mientras hover */
@keyframes contactBreath {
  0%   { transform: translateX(0) translateY(0) scale(1) rotate(var(--rot, 0deg)); }
  50%  { transform: translateX(0) translateY(-2px) scale(1.03) rotate(var(--rot, 0deg)); }
  100% { transform: translateX(0) translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

/* Hover mail -> estrella entra + respira */
.contact.is-hover-star .c-star{
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1) rotate(6deg);
  transition: opacity 200ms ease,
              transform 520ms cubic-bezier(.22,.61,.36,1);
  --rot: 6deg;
  animation: contactBreath 1.12s ease-in-out infinite;
}

/* Hover ig -> rayo entra + respira */
.contact.is-hover-bolt .c-bolt{
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1) rotate(-6deg);
  transition: opacity 200ms ease,
              transform 520ms cubic-bezier(.22,.61,.36,1);
  --rot: -6deg;
  animation: contactBreath 1.0s ease-in-out infinite;
}

/* Links: hover sutil */
.contact-link{
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              opacity 260ms ease;
}
.contact-link:hover{
  transform: translateY(-1px);
}

/* Mobile: apagamos respiración infinita por rendimiento */
@media (max-width: 700px){
  .contact.is-hover-star .c-star,
  .contact.is-hover-bolt .c-bolt{
    animation: none;
  }
}


/* --------- Entrada dinámica pato + gato --------- */
.contact.is-ready .c-duck{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-2deg);
  transition:
    opacity 600ms ease,
    transform 900ms cubic-bezier(.18,.89,.32,1.28); /* overshoot */
  transition-delay: 220ms;
}

.contact.is-ready .c-cat{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(2deg);
  transition:
    opacity 600ms ease,
    transform 950ms cubic-bezier(.18,.89,.32,1.28);
  transition-delay: 320ms;
}

/* Estado inicial más marcado (antes de entrar) */
.contact .c-duck{
  opacity: 0;
  transform: translateY(-26px) scale(0.92) rotate(-12deg);
}

.contact .c-cat{
  opacity: 0;
  transform: translateY(-30px) scale(0.92) rotate(10deg);
}


@keyframes petWiggle {
  0%   { transform: scale(1) rotate(var(--base-rot)); }
  20%  { transform: scale(1.04) rotate(calc(var(--base-rot) + 3deg)); }
  40%  { transform: scale(1.02) rotate(calc(var(--base-rot) - 3deg)); }
  60%  { transform: scale(1.03) rotate(calc(var(--base-rot) + 2deg)); }
  100% { transform: scale(1) rotate(var(--base-rot)); }
}


/* Definimos rotación base */
.c-duck{ --base-rot: -2deg; }
.c-cat{  --base-rot:  2deg; }

/* Hover directo */
.c-duck:hover,
.c-cat:hover{
  animation: petWiggle 420ms ease-out;
}


/* Cursor feedback */
.c-duck,
.c-cat{
  pointer-events: auto; /* para que puedan recibir hover */
  cursor: pointer;
}

/* ===== Firma / logo abajo derecha ===== */
.contact-sign{
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.contact-sign-img{
  display: block;
  width: clamp(220px, 22vw, 420px); /* más grande */
  height: auto;
  opacity: 1;               /* sin transparencia */
  filter: none;
}

.contact.is-in .contact-sign{
  animation: inFadeUp 620ms cubic-bezier(.22,.61,.36,1) 170ms both;
}


/* Respuesta secundaria cuando hay interacción */
.contact.is-hover-star .c-duck{
  transform: scale(1.03) rotate(-1deg);
  transition: transform 260ms ease;
}

.contact.is-hover-bolt .c-cat{
  transform: scale(1.03) rotate(3deg);
  transition: transform 260ms ease;
}


/* separadores como overlays */
 .separator{
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 3; /* arriba del fondo */
}

/* top: lo subimos un poco para que se monte con la sección anterior */
 .separator-top{
  top: 0;
  transform: translateY(-48%); /* ajusta: 40%-70% según tu SVG */
}

/* bottom: lo bajamos un poco para que se monte con la siguiente */
 .separator-bottom{
  bottom: 0;
  transform: translateY(55%);
}