/* ==========================================================================
   BIPI STUDIO — HOJA DE ESTILOS
   ========================================================================== */

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:root{
  --bg: #FFFDF0;
  --grid-line: #8B5A2B;
  --ink: #2A2118;
  --accent: #C1440E;
  --brown: #8B5A2B;
  --paper: #FFFDF9;
  --postit-1: #E88D67;
  --postit-2: #F0A878;
  --postit-3: #E6A46B;
  --mini-postit: #FFE79A;
  --mini-postit-orange: #F5A671;
  --shadow-soft: 0 18px 40px rgba(42,33,24,0.14);
  --radius-soft: 18px;
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-hand: 'Kalam', cursive;
}

/* Adiós manito en toda la web */
*{ box-sizing: border-box; cursor: none !important; }
html{ scroll-behavior: smooth; }

/* En cualquier dispositivo táctil (celular, iPad en cualquier orientación,
   tablets grandes) no hay cursor real que reemplazar: apagamos el puntito
   y el trail de lápiz sin depender del ancho de pantalla. */
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
  #pencil-canvas, .cursor-dot { display: none !important; }
}

body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); overflow-x: hidden;
  position: relative;
}

/* Cursor Puntito */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px; background-color: var(--brown);
  border-radius: 50%; pointer-events: none; z-index: 1000;
  transform: translate(-50%, -50%);
}
#pencil-canvas{ position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 999; pointer-events: none; }

/* Cuadrícula Global */
.grid-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(139,90,43,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,90,43,0.10) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 92%);
  transition: opacity 0.6s ease;
}

body.in-contact .grid-bg { opacity: 0; }
::selection{ background: var(--brown); color: var(--bg); }

/* BARRA DE SCROLL "PLAYHEAD" */
::-webkit-scrollbar { width: 18px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid rgba(139, 90, 43, 0.2); border-right: 1px solid rgba(139, 90, 43, 0.2); }
::-webkit-scrollbar-thumb { background-color: #C1440E; border-top: 10px solid #2A2118; border-bottom: 2px solid #2A2118; border-left: 2px solid var(--bg); border-right: 2px solid var(--bg); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #9E3408; }

/* ---------------------------- NAV ---------------------------- */
.navbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 48px; background: rgba(255,253,240,0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid rgba(139,90,43,0.35);
}
.logo{ font-family: var(--font-display); font-size: 26px; color: var(--ink); text-decoration: none; justify-self: start; }
.nav-links{ display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; justify-self: center; grid-column: 2; }
.nav-links a{
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none;
  padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,0.05); transition: background 0.25s, transform 0.25s;
}
.nav-links a:hover, .nav-links a:active{ background: rgba(0,0,0,0.1); color: var(--accent); transform: translateY(-1px); }

/* ---------------------------- HERO ---------------------------- */
#inicio{
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 90px;
}
.hero-title-wrap{ position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: 60vh; min-height: 560px;user-select: none; }
.hero-half{
  font-family: var(--font-display); font-size: clamp(52px, 9vw, 128px); line-height: 0.92;
  max-width: 44vw; /* red de seguridad: si no entra en una línea, baja a dos en vez de cortarse fuera de la pantalla */
  position: absolute; top: 50%; transform: translateY(-50%); transition: transform 1.4s cubic-bezier(.7,0,.2,1);
  z-index: 1; /* siempre por debajo del carrusel (z-index: 20), para que quede tapado parejo en ambos lados */
}
.hero-half.left{ right: calc(50% + 16px); text-align: right; }
.hero-half.right{ left: calc(50% + 16px); text-align: left; }

.hero-title-wrap.split-active .hero-half.left{ transform: translateY(-50%) translateX(-25vw); }
.hero-title-wrap.split-active .hero-half.right{ transform: translateY(-50%) translateX(25vw); }

.highlight-word{ position: relative; display: inline-block; padding: 0 6px; user-select: none; }
.highlight-word::before{
  content: ""; position: absolute; left: -14px; right: -14px; top: -14px; bottom: -10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 130'><path d='M18,68 C10,30 70,10 150,9 C235,8 292,26 288,62 C284,100 220,122 148,121 C68,120 26,104 18,68 Z' fill='none' stroke='%23C1440E' stroke-width='7' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; opacity: 0.9;
  user-select: none; 
}
.underline-word{ position: relative; display: inline-block; }
.underline-word::after{
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -14px; height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 46'><path d='M4,14 C60,9 140,18 300,10' fill='none' stroke='%23C1440E' stroke-width='6' stroke-linecap='round'/><path d='M6,32 C90,40 190,24 296,34' fill='none' stroke='%23C1440E' stroke-width='6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%; z-index: -1;
}

/* CARRUSEL Y ANIMACIÓN RULETA */
.carousel-wrapper{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0.6); /* Arranca chico para hacer pop */
  opacity: 0; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
  z-index: 20; pointer-events: none;
}
.carousel-wrapper.visible{ opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }

.carousel-title-hand{
  /* Pegada sobre la esquina superior izquierda de la tarjeta frontal (slot 0):
     esa tarjeta mide 520x300 y queda centrada en el stack de 550x380,
     por lo que su esquina sup. izq. cae siempre en (15px, 40px) del wrapper. */
  position: absolute; top: 62px; left: 55px;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--font-hand); font-weight: 400; font-size: 27px; color: var(--accent);
  text-shadow: 0 1px 1px rgba(255,253,249,0.6);
  width: max-content; z-index: 35;
  user-select: none;
  background: rgba(228, 216, 194, 0.84);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  filter: drop-shadow(0 3px 3px rgba(42,33,24,0.3)) drop-shadow(0 1px 2px rgba(42,33,24,0.2));
  /* Bordes superior/inferior lisos; laterales irregulares, como cortada con tijera */
  clip-path: polygon(
    0% 0%, 100% 0%,
    96% 8%, 100% 16%, 95% 24%, 100% 32%, 96% 40%, 100% 48%, 95% 56%, 100% 64%, 96% 72%, 100% 80%, 95% 88%, 100% 96%,
    100% 100%, 0% 100%,
    4% 92%, 0% 84%, 5% 76%, 0% 68%, 4% 60%, 0% 52%, 5% 44%, 0% 36%, 4% 28%, 0% 20%, 5% 12%, 0% 4%
  );
  padding: 12px 24px;
}

.carousel-stack{
  position: relative; width: 550px; height: 380px;
  cursor: grab; user-select: none; transform-style: preserve-3d;
  touch-action: none;
}
.carousel-stack:active{ cursor: grabbing; }

.carousel-card{
  position: absolute; top: 50%; left: 50%; width: 520px; height: 300px;
  border-radius: var(--radius-soft); overflow: hidden;
  background: repeating-linear-gradient(135deg,#d8d3c2,#d8d3c2 10px,#cfc9b6 10px,#cfc9b6 20px);
  box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
  border: 1.5px solid rgba(139,90,43,0.25);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.carousel-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.carousel-card .thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; z-index: 1; transition: opacity 0.3s ease;
}
.carousel-card:nth-child(1) .thumb { opacity: 0; }

.carousel-card:nth-child(1){ z-index: 5; opacity: 1; transform: translate(-50%,-50%) scale(1); }
.carousel-card:nth-child(2){ z-index: 4; opacity: 0.85; transform: translate(-50%, calc(-50% - 145px)) scale(0.86); }
.carousel-card:nth-child(3){ z-index: 3; opacity: 0.65; transform: translate(-50%, calc(-50% + 145px)) scale(0.8); }
.carousel-card:nth-child(4){ z-index: 2; opacity: 0.3; transform: translate(-50%, calc(-50% - 190px)) scale(0.7); pointer-events: none; }
.carousel-card:nth-child(5){ z-index: 1; opacity: 0.1; transform: translate(-50%, calc(-50% + 190px)) scale(0.65); pointer-events: none; }

/* La posición de cada tarjeta la fija JS por inline style (ver script.js),
   que siempre gana en especificidad sobre estas reglas nth-child (quedan
   solo como estado inicial antes de que corra el JS). Por eso el hover de
   la tarjeta del frente se modula con una variable CSS en vez de pisar el
   transform directamente. */
.carousel-card[data-slot="0"]:hover{ --carousel-hover-scale: 1.03; }

/* MODAL EXPANDIDO FLOTANTE (Zoom iPad) */
.video-expand-overlay{
  position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  background: rgba(255,253,240,0.92);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease;
}
.video-expand-overlay.active{ opacity: 1; visibility: visible; }

body.video-open{ overflow: hidden; }

.video-expand-panel{
  display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
  width: min(85vw, 1200px); height: min(75vh, 650px);
  position: relative; transform: scale(0.6); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
}
.video-expand-overlay.active .video-expand-panel { transform: scale(1); opacity: 1; }

.modal-left {
  background: #000; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.modal-left video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }

.modal-right {
  background: rgba(255, 253, 240, 0.85); border: 1.5px solid rgba(139, 90, 43, 0.2);
  border-radius: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); padding: 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.modal-title { font-family: var(--font-display); font-size: 42px; color: var(--ink); margin: 0 0 10px; line-height: 1.1; }
.modal-role { font-family: var(--font-body); font-weight: 500; font-size: 17px; color: rgba(42,33,24,0.8); margin-bottom: auto; }
.modal-role p { margin: 0 0 10px; }
.modal-role p:last-child { margin-bottom: 0; }

.modal-before { margin-top: 20px; }
.modal-before.hidden { display: none; }
.modal-before-title { font-family: var(--font-display); font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.modal-before-img {
  display: block; margin: 0 auto; max-width: 300px; width: 200%; height: auto;
  border-radius: 18px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); cursor: pointer;
}

.before-lightbox {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); border-radius: 18px;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
}
.before-lightbox.active { opacity: 1; visibility: visible; }
.before-lightbox-img {
  max-width: 70%; max-height: 70%; object-fit: contain;
  border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.video-replay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
  width: 64px; height: 64px; border-radius: 50%; z-index: 15;
  background: rgba(255,253,240,0.9); border: 1.5px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease;
}
.video-replay svg { width: 28px; height: 28px; }
.video-replay.active { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.video-replay:hover { background: var(--ink); color: var(--bg); }

.video-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; z-index: 15;
  background: rgba(255,253,240,0.9); border: 1.5px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); cursor: pointer;
  opacity: 0; transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.modal-left:hover .video-nav:not(.hidden) { opacity: 1; }
.video-nav.hidden { display: none; }
.video-nav svg { width: 22px; height: 22px; }
.video-nav:hover { background: var(--ink); color: var(--bg); }
.video-nav-prev { left: 16px; }
.video-nav-next { right: 16px; }

/* Controles Premium */
.custom-controls {
  position: absolute; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 30px 25px 20px;
  display: flex; align-items: center; gap: 15px; opacity: 0; transition: opacity 0.3s;
}
.modal-left:hover .custom-controls { opacity: 1; }
/* Botones de control de video */
.ctrl-btn {
  background: none;
  border: none;
  color: #fff;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
  cursor: pointer;
}
.ctrl-btn svg { width: 20px; height: 20px; }
.ctrl-btn:hover { transform: scale(1.1); }

/* BARRA DE TIEMPO (Cabezal Naranja #C35214) */
.ctrl-seek {
  flex: 1; -webkit-appearance: none; appearance: none; background: transparent; height: 8px; outline: none; cursor: pointer;
}
.ctrl-seek::-webkit-slider-runnable-track {
  width: 100%; height: 8px; border-radius: 4px; border: 1px solid var(--ink);
  background: rgba(255,253,240,0.4);
}
.ctrl-seek::-webkit-slider-thumb {
  -webkit-appearance: none; height: 16px; width: 16px; border-radius: 4px;
  background: #C35214; border: 2px solid var(--ink); margin-top: -5px;
  transition: transform 0.1s ease;
}
.ctrl-seek::-webkit-slider-thumb:hover { transform: scale(1.2); }

.ctrl-time {
  color: #fff; font-family: var(--font-body); font-size: 13px; font-variant-numeric: tabular-nums;
  white-space: nowrap; user-select: none;
}

/* SISTEMA DE VOLUMEN DESPLEGABLE */
.volume-container {
  position: relative; display: flex; align-items: center; justify-content: center;
}
.volume-slider-wrapper {
  position: absolute; bottom: 45px; left: 50%;
  transform: translateX(-50%) scaleY(0); transform-origin: bottom;
  background: rgba(0,0,0,0.85); padding: 10px 8px; border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; align-items: center; justify-content: center; height: 100px;
}
.volume-container:hover .volume-slider-wrapper {
  transform: translateX(-50%) scaleY(1);
}
.ctrl-volume {
  -webkit-appearance: none; background: transparent; outline: none;
  width: 80px; height: 6px; cursor: pointer; transform: rotate(-90deg);
}
.ctrl-volume::-webkit-slider-runnable-track {
  width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.3);
}
.ctrl-volume::-webkit-slider-thumb {
  -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%;
  background: #fff; margin-top: -3px;
}

/* Botón YouTube estilo Marcador */
.modal-yt-btn {
  position: relative; display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 16px;
  color: var(--ink); text-decoration: none; padding: 8px 12px; border: none; background: transparent;
  z-index: 1; margin-top: auto; align-self: flex-start;
}
.modal-yt-btn::after {
  content: ''; position: absolute; left: 0; bottom: 4px; height: 40%; width: 0;
  background-color: var(--accent); opacity: 0.5; z-index: -1; transition: width 0.3s ease-out; border-radius: 2px;
}
.modal-yt-btn:hover::after { width: 100%; }
.modal-yt-btn.hidden { display: none; }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.video-close{
  position: absolute; top: 5px; right: 5px; width: 35px; height: 35px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink); font-family: sans-serif; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  cursor: pointer;
}

.video-close:hover {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(90deg) scale(1.1);
  transition: all 0.1s;
}

.scroll-cue{
  position: absolute; bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--ink);
  z-index: 1;
}

.scroll-cue::after {
  content: ''; position: absolute; left: 0; bottom: 6px; height: 40%; width: 0;
  background-color: var(--accent); opacity: 0.5; z-index: -1;
  transition: width 0.3s ease-out; border-radius: 2px;
}
.scroll-cue:hover::after, .scroll-cue.active::after { width: 100%; }

/* ---------------------------- ARCHIVO / TRABAJOS ---------------------------- */
#trabajos{ position: relative; padding: 130px 8vw 100px; overflow: hidden; min-height: 120vh; }
.section-title{ font-family: var(--font-display); font-size: clamp(40px, 6vw, 80px); letter-spacing: 0.5px; margin: 0 0 28px; text-align: center; }
.filter-toggles{ display: flex; justify-content: center; gap: 16px; margin-bottom: 70px; }

/* Botones Filtro Subrayado Marcador */
.toggle-btn{
  position: relative; font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 8px 16px;
  border: none; background: transparent; color: var(--ink); z-index: 1;
}
.toggle-btn::after {
  content: ''; position: absolute; left: 0; bottom: 6px; height: 65%; width: 0;
  background-color: var(--accent); opacity: 0.5; z-index: -1;
  transition: width 0.3s ease-out; border-radius: 2px;
}
.toggle-btn:hover::after, .toggle-btn.active::after { width: 100%; }

@media (max-width: 767px) {
  .toggle-btn:nth-child(1)::after{height: 40%;}
}

@media (min-width: 768px) {
  .toggle-btn::after{height: 40%;}
}

/* Subdivisiones */
.sub-category {
  grid-column: 1 / -1; width: 100%; text-align: left;
  font-family: var(--font-hand); font-size: 28px; color: var(--accent); margin: 30px 0 10px;
  border-bottom: 1.5px dashed rgba(139,90,43,0.3); padding-bottom: 8px; display: none;
}

@keyframes pageFlip { 0% { transform: perspective(1200px) rotateY(0deg); transform-origin: left center; opacity: 1; } 100% { transform: perspective(1200px) rotateY(-90deg); transform-origin: left center; opacity: 0; } }
@keyframes pageFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

.archive-grid.tearing { animation: pageFlip 0.5s ease-in forwards; }
.archive-grid.entering { animation: pageFadeIn 0.4s ease-out forwards; }

.archive-grid{ display: flex; flex-direction: column; align-items: stretch; gap: 52px; }
.archive-grid.staggered{ gap: 18px; }

/* Escalonado según el orden mezclado asignado por JS (.side-left / .side-right), no el orden del DOM */
.archive-grid.staggered .archive-item.side-left{ align-self: flex-start; margin-left: 1vw; }
.archive-grid.staggered .archive-item.side-right{ align-self: flex-end; margin-right: 1vw; }

/* Cuando un video vertical sigue a otro vertical, quedan en lados opuestos y angostos,
   así que hay mucho aire horizontal entre ambos: podemos acercar bastante sus bordes
   superiores (hasta un poco pasada la mitad del video de arriba) sin que lleguen a tocarse.
   Los pares que incluyen un horizontal (mucho más ancho) sí pueden pisarse en x, por eso
   esos casos se quedan solo con el gap normal del grid. */
.archive-grid.staggered .archive-item.overlap-vv{ margin-top: calc(-1 * (0.8 * min(30vw, 340px) + 24px)); }

.archive-grid.grid-5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; justify-items: center; }
.archive-grid.grid-5 .archive-item{ margin: 0 !important; }
.archive-grid.horizontal-order{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; align-items: start; }
.archive-grid.horizontal-order .archive-item{ margin: 0 !important; }

/* Videos apagados por defecto, cobran vida al hover. No hay texto. */
.archive-item{
  position: relative; width: min(64vw, 640px); transition: transform 0.4s ease;
  display: flex; flex-direction: column;
}
.archive-item[data-orientation="vertical"]{ width: min(30vw, 340px); }
.archive-grid.grid-5 .archive-item, .archive-grid.horizontal-order .archive-item{ width: 100%; }

.archive-media{ position: relative; width: 100%; height: 100%; }
.archive-item[data-orientation="horizontal"] .archive-media{ aspect-ratio: 16/9; }
.archive-item[data-orientation="vertical"] .archive-media{ aspect-ratio: 9/16; }

.media-clip{
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-soft); overflow: hidden; border: 1.5px solid rgba(139,90,43,0.25);
  background: repeating-linear-gradient(135deg,#d8d3c2,#d8d3c2 10px,#cfc9b6 10px,#cfc9b6 20px);
}

/* Esquineros finos y minimalistas, por fuera de la card del video (como el título):
   arriba en la esquina contraria al título, abajo en la diagonalmente opuesta a esa. */
.archive-grid.staggered .archive-item .archive-media::before,
.archive-grid.staggered .archive-item .archive-media::after{
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid var(--ink); opacity: 0.45; pointer-events: none;
}
.archive-grid.staggered .archive-item.side-left .archive-media::before{ top: -10px; right: -10px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.archive-grid.staggered .archive-item.side-left .archive-media::after{ bottom: -10px; left: -10px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.archive-grid.staggered .archive-item.side-right .archive-media::before{ top: -10px; left: -10px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.archive-grid.staggered .archive-item.side-right .archive-media::after{ bottom: -10px; right: -10px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

.archive-item video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); transition: filter 0.3s ease; }
.archive-item .thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; pointer-events: none; transition: opacity 0.3s ease;
}
.archive-item:hover .thumb, .archive-item.playing .thumb { opacity: 0; }
.archive-item:hover { transform: scale(1.02); }

/* Título estático arriba del video, solo visible en la pestaña "Todo" (staggered) */
.item-title{
  display: none; margin-bottom: 8px;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.02em;
  color: var(--ink); opacity: 0.5;
}
.archive-grid.staggered .item-title{ display: block; }
.archive-grid.staggered .archive-item.side-left .item-title{ text-align: left; }
.archive-grid.staggered .archive-item.side-right .item-title{ text-align: right; }
.archive-item:hover video { filter: brightness(1); }

/* ---------------------------- WORKSPACE / SOBRE MI ---------------------------- */
#sobre-mi{
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 5vw; position: relative;
}

.sobre-mi-grid{
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 2vw; align-items: center;
  width: 100%; max-width: 1200px;
}

/* Polaroids */
.polaroid-stack{ position: relative; height: 600px; width: 100%; }
.polaroid{ position: absolute; width: clamp(200px, 18vw, 260px); padding: 14px 14px 45px; background: var(--paper); box-shadow: var(--shadow-soft); border-radius: 4px; }
.polaroid .polaroid-photo{ 
  width: 100%; 
  aspect-ratio: 1/1; 
  background: repeating-linear-gradient(135deg,#dcd7c8,#dcd7c8 9px,#d1cbb9 9px,#d1cbb9 18px); 
  object-fit: cover; border-radius: 2px; border: 1.5px solid rgba(139,90,43,0.25);
}
.polaroid-1{ top: 0%; left: -10%; transform: rotate(-6deg); z-index: 2; }
.polaroid-2{ top: 45%; left: 30%; transform: rotate(8deg); z-index: 1; }
.tape{
  position: absolute; width: 80px; height: 32px; background: rgba(193, 68, 14, 0.65); backdrop-filter: blur(2px);
  clip-path: polygon(0 5%, 5% 0, 10% 8%, 15% 0, 20% 5%, 25% 0, 30% 8%, 35% 0, 40% 5%, 45% 0, 50% 8%, 55% 0, 60% 5%, 65% 0, 70% 8%, 75% 0, 80% 5%, 85% 0, 90% 8%, 95% 0, 100% 5%, 100% 95%, 95% 100%, 90% 92%, 85% 100%, 80% 95%, 75% 100%, 70% 92%, 65% 100%, 60% 95%, 55% 100%, 50% 92%, 45% 100%, 40% 95%, 35% 100%, 30% 92%, 25% 100%, 20% 95%, 15% 100%, 10% 92%, 5% 100%, 0 95%);
}
.polaroid-1 .tape{ top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.polaroid-2 .tape{ top: -14px; left: 50%; transform: translateX(-50%) rotate(4deg); }
.polaroid-year{
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--font-hand); font-size: 14px; color: var(--ink); opacity: 0.35;
}

/* Pizarra Absoluta Post-its */
.postit-board { position: relative; width: 100%; height: 700px; }

.postit{
  position: absolute; padding: 25px 20px; border-radius: 3px;
  font-family: var(--font-hand); font-weight: 400; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5;
  box-shadow: 6px 12px 22px rgba(42,33,24,0.28), 0 2px 5px rgba(42,33,24,0.15); text-align: center;
}
.postit-title{ display: block; font-weight: 700; font-size: 1.25em; margin-bottom: 8px; text-decoration: underline; text-decoration-color: rgba(42,33,24,0.4); text-decoration-thickness: 2px; }

/* 1. Setup Mental */
.postit-1{
  top: 1%; left: 5%; width: 340px; background: var(--postit-1); transform: rotate(-3deg); z-index: 3;
  padding-bottom: 70px; /* Mucho espacio extra para que el mini no tape texto */
}
.mini-postit{
  position: absolute; bottom: -50px; right: -80px; z-index: 10;
  width: 140px; height: 140px; background: var(--mini-postit); border-radius: 3px; padding: 15px;
  font-family: var(--font-hand); font-size: 15px; line-height: 1.2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-shadow: 5px 10px 18px rgba(42,33,24,0.3); transform: rotate(8deg);
}

/* 2. Herramientas */
.postit-3{
  top: 10%; right: -5%; width: 190px; aspect-ratio: 1/1; background: var(--postit-3); transform: rotate(3deg); z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.postit-3 .postit-title { white-space: nowrap; font-size: 1.1em; } /* Título en una línea */
.postit-3::after{
  content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(42,33,24,0.22) 50%);
  transition: all 0.3s ease; border-bottom-right-radius: 3px;
}
.postit-3:hover::after{ width: 34px; height: 34px; box-shadow: -3px -3px 8px rgba(42,33,24,0.18); }

/* 3. Arte de Resolver */
.postit-2{ bottom: 12%; left: 40%; width: 325px; background: var(--postit-2); transform: rotate(-1deg); z-index: 2; }
.arrow-svg { position: absolute; top: 10px; right: -80px; width: 90px; height: 80px; overflow: visible; z-index: 1; pointer-events: none; }
.mini-postit.orange-postit{ position: absolute; top: 80px; right: -170px; background: var(--mini-postit-orange); transform: rotate(-4deg); z-index: 5; }

/* ---------------------------- AGENDA / CONTACTO ---------------------------- */
#contacto{position: relative; padding: 120px 8vw 80px; display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.contact-box{
  width: min(90vw, 760px); background: rgba(255,255,255,1);
  border: 1.5px solid rgba(139,90,43,0.3); border-radius: 28px; padding: 60px;
  box-shadow: 0 25px 60px rgba(42,33,24,0.18);
  opacity: 0; transform: scale(0.85); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.contact-box.pop-in { opacity: 1; transform: scale(1); }

.contact-box .section-title{ text-align: left; margin-bottom: 46px; }

.contact-socials {
  display: flex;
  justify-content: center; /* Los centra horizontalmente */
  align-items: center;
  gap: 50px; /* Espacio entre los iconos */
  margin-bottom: 35px; /* Espacio que los separa del formulario de abajo */
}

.contact-socials a {
  color: var(--ink); /* Usa tu color de tinta principal */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
}

.contact-socials svg {
  width: 28px;
  height: 28px;
}

/* Efecto hover premium al pasar el mouse */
.contact-socials a:hover {
  transform: translateY(-4px) scale(1.1);
  color: var(--accent); /* Cambia al color de acento si lo tenés definido */
}

.form-row{ display: flex; align-items: baseline; gap: 20px; margin-bottom: 40px; }
.form-row label{ font-family: var(--font-body); font-weight: 600; font-size: 15px; width: 190px; flex-shrink: 0; }
.label-required::after{ content: ' *'; color: #C35214; font-weight: bold; }
.form-row input, .form-row textarea{
  flex: 1; border: none; background: transparent; border-bottom: 1px dashed rgba(139,90,43,0.4);
  font-family: var(--font-body); font-size: 16px; color: var(--ink); padding: 6px 4px; outline: none;
}
.form-row textarea{ min-height: 60px; resize: none; width: 100%;}
.textarea-wrapper { flex: 1; display: flex; flex-direction: column; }
.char-counter { align-self: flex-end; font-size: 12px; color: rgba(42,33,24,0.6); margin-top: 6px; font-family: var(--font-body); font-weight: 500;}

.submit-btn{ font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 34px; border-radius: 999px; border: none; background: var(--ink); color: var(--bg); transition: transform 0.25s ease; }
.submit-btn:hover{ transform: translateY(-2px); }

/* ---------------------------- FOOTER ---------------------------- */
footer{ padding: 46px 0 54px; display: flex; justify-content: center; gap: 34px; position: relative; z-index: 10; }
footer a{ color: var(--ink); transition: transform 0.25s ease, color 0.25s ease; }
footer a:hover{ color: var(--accent); transform: translateY(-3px); }

.site-footer{ padding: 24px 20px 40px; text-align: center; font-size: 13px; opacity: 0.65; }
.footer-email{ margin-top: 10px; opacity: 1; }
.footer-email a{ font-family: var(--font-body); font-size: 15px; color: var(--accent); text-decoration: none; transition: opacity 0.20s ease; }
.footer-email a:hover{ opacity: 0.75; }

/* ==========================================================================
   DIBUJOS DE FONDO (ASSETS)
   ========================================================================== */
.doodle {
  position: absolute;
  pointer-events: none; /* Nadie los puede tocar ni arrastrar */
  z-index: 1;
  opacity: 0.85;
  user-select: none;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* ESTO HACE QUE FLOTEN AL CAMBIAR DE POSICIÓN */
}

/* 1. 9z */
.doodle-9z { top: 75%; left: 85%; width: 200px; transform: rotate(-10deg); }
/* 2. After Effects */
.doodle-ae { top: 20%; right: 7%; width: 140px; transform: rotate(15deg); }
/* 3. Gorra */
.doodle-gorra { top: 20%; left: 50px; width: 180px; transform: rotate(5deg); }
/* 4. Groot */
.doodle-groot { bottom: 45%; right: 25%; width: 130px; transform: rotate(-5deg); }
/* 5. Iron Man */
.doodle-iron { top: 80px; left: 150px; width: 150px; transform: rotate(10deg); }
/* 6. Jordan 4 */
.doodle-jordan { top: 80%; left: 40%; width: 190px; transform: rotate(-15deg); }
/* 7. Mimi */
.doodle-mimi { top: 68%; left: 54%; width: 300px; transform: rotate(0deg); z-index: 25; transition: none !important;}
/* 8. Post its */
.doodle-postits { top: 58%; left: 47%; width: 220px; transform: rotate(-12deg); }
/* 9. Premiere */
.doodle-pr { top: 95%; right: 20%; width: 130px; transform: rotate(-10deg); }
/* 10. Spiderman */
.doodle-spider { top: 45%; right: 20%; width: 115px; transform: rotate(-8deg); }

.doodle-arrow { top: -66%; right: -62%; width: 550px; transform: rotate(0deg); z-index: 25;}

/* =======================================
   POSICIONES PESTAÑA: "CONTENIDO VERTICAL"
   ======================================= */
#trabajos[data-active-filter="vertical"] .doodle-spider {
  top: 30%;
  right: 10%;
}
#trabajos[data-active-filter="vertical"] .doodle-jordan {
  top: 80%;
  left: 60%;
}
#trabajos[data-active-filter="vertical"] .doodle-pr {
  top: 60%;
  left: 2%;
}

/* =======================================
   POSICIONES PESTAÑA: "CONTENIDO HORIZONTAL"
   ======================================= */
#trabajos[data-active-filter="horizontal"] .doodle-spider {
  top: 57%;
  right: 10%;
}
#trabajos[data-active-filter="horizontal"] .doodle-jordan {
  top: 75%;
  left: 10px;
}
#trabajos[data-active-filter="horizontal"] .doodle-pr {
  top: 15%;
  left: 70%;
}

/* ==========================================================================
   DISEÑO MÓVIL (PREMIUM UI/UX)
   ========================================================================== */
@media (max-width: 1024px) {
  /* 1. Reset de Cursor y Grilla */
  * { cursor: auto !important; }
  .grid-bg { background-size: 20px 20px; }

  /* Ajuste de anclaje para que el menú no tape los títulos al navegar */
  section { scroll-margin-top: -10px; }

  /* 2. Menú Flotante estilo App (Fijo abajo, centrado y con SVGs premium) */
  .navbar {
    top: auto; bottom: 25px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 380px; border-radius: 24px; padding: 10px 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background: rgba(255,253,240,0.95);
    display: flex !important; /* Forzamos flex */
    justify-content: center;
  }
  .logo { display: none; }

  .nav-links {
    display: flex !important;
    flex-direction: row;
    justify-content: center; /* Centra todo el bloque en la barra */
    gap: 30px; /* Esto controla el espacio EXACTO entre iconos */
    margin: 0; padding: 0;
    width: 100%;
  }

  .nav-links a {
    font-size: 0; padding: 0; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border-radius: 12px;
  }
  /* Iconos Vectoriales Minimalistas (Sin tocar el HTML) */
  .nav-links a[href="#inicio"]::before { content: ''; width: 22px; height: 22px; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg>") no-repeat center; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path><polyline points='9 22 9 12 15 12 15 22'></polyline></svg>") no-repeat center; }
  .nav-links a[href="#trabajos"]::before { content: ''; width: 22px; height: 22px; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='23 7 16 12 23 17 23 7'></polygon><rect x='1' y='5' width='15' height='14' rx='2' ry='2'></rect></svg>") no-repeat center; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='23 7 16 12 23 17 23 7'></polygon><rect x='1' y='5' width='15' height='14' rx='2' ry='2'></rect></svg>") no-repeat center; }
  .nav-links a[href="#sobre-mi"]::before { content: ''; width: 22px; height: 22px; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path><circle cx='12' cy='7' r='4'></circle></svg>") no-repeat center; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'></path><circle cx='12' cy='7' r='4'></circle></svg>") no-repeat center; }
  .nav-links a[href="#contacto"]::before { content: ''; width: 22px; height: 22px; background: var(--ink); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'></path><polyline points='22,6 12,13 2,6'></polyline></svg>") no-repeat center; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'></path><polyline points='22,6 12,13 2,6'></polyline></svg>") no-repeat center; }
  .nav-links a:hover, .nav-links a:active { transform: scale(1.1); background: rgba(0,0,0,0.05); }
  .nav-links a:hover::before, .nav-links a:active::before { background: var(--accent); }

  /* 3. Hero y Carrusel (texto en dos renglones para que entre completo) */
  .hero-half { font-size: clamp(30px, 9vw, 52px); max-width: 90vw; white-space: nowrap; }
  .hero-half.left {
    right: auto; left: 50%; text-align: center;
    top: calc(50% - 46px); transform: translate(-50%, -50%);
  }
  .hero-half.right {
    left: 50%; text-align: center;
    top: calc(50% + 46px); transform: translate(-50%, -50%);
  }
  .hero-title-wrap.split-active .hero-half.left { transform: translate(-50%, -50%) translateX(-25vw); }
  .hero-title-wrap.split-active .hero-half.right { transform: translate(-50%, -50%) translateX(25vw); }

  .carousel-wrapper { transform: translate(-50%,-50%) scale(0.35); }
  .carousel-wrapper.visible { transform: translate(-50%,-50%) scale(0.48); }
  .carousel-title-hand { font-size: 40px; }

  /* 4. Mis Trabajos (Filtros en 1 renglón y videos ajustados) */
  .filter-toggles {
    flex-wrap: nowrap; gap: 4px; justify-content: space-between; width: 100%;
  }
  .highlight-btn { font-size: clamp(10px, 3.2vw, 14px); padding: 6px 4px; white-space: nowrap; }

  .archive-grid.staggered, .archive-grid.grid-5, .archive-grid.horizontal-order {
    display: flex; flex-direction: column; gap: 35px; align-items: center;
  }

  /* Videos Horizontales ocupan el 100% */
  .archive-item[data-orientation="horizontal"] {
    width: 100% !important; margin: 0 !important;
  }
  /* Videos Verticales centrados y achicados */
  .archive-item[data-orientation="vertical"] {
    width: 65vw !important; max-width: 280px !important; margin: 0 auto !important;
  }

  /* 5. Modal Video (Centrado perfecto) */
  .video-expand-overlay { padding: 15px; align-items: center; }
  .video-expand-panel {
    display: flex; flex-direction: column; gap: 0;
    width: 100%; max-width: 400px; height: auto; max-height: 85vh; border-radius: 18px;
    margin: auto; overflow: hidden; /* Evita que el video se salga */
  }
  .modal-left {
    width: 100%; flex: 0 0 auto; height: 35vh; /* Altura controlada */
    border-radius: 18px 18px 0 0; box-shadow: none;
  }
  .modal-right {
    width: 100%; flex: 1 1 auto; border-radius: 0 0 18px 18px; padding: 20px;
    border: none; border-top: 1.5px solid rgba(139, 90, 43, 0.2); box-shadow: none;
    overflow-y: auto; /* Por si el texto es muy largo */
  }
  .modal-title { font-size: 26px; }
  .video-close { top: 10px; right: 10px; background: rgba(255,253,240,0.9); width: 36px; height: 36px; font-size: 16px; }
  .custom-controls { padding: 15px 15px 10px; }

  /* 6. Sobre Mí (Pizarra vertical) */
  #sobre-mi { padding: 60px 5vw 120px; }
  .sobre-mi-grid { display: flex; flex-direction: column; gap: 30px; }

  .polaroid-stack { height: 180px; display: flex; justify-content: center; align-items: center; }
  .polaroid { position: relative; width: 130px; padding: 8px 8px 35px; top: 0 !important; left: auto !important; }
  .polaroid-1 { transform: rotate(-8deg) translateX(-15px); z-index: 2; }
  .polaroid-2 { transform: rotate(10deg) translateX(-10px); z-index: 1; margin-top: 20px;}
  .tape { width: 50px; height: 20px; top: -10px !important; }

  .postit-board { height: auto; display: flex; flex-direction: column; align-items: center; gap: 50px; padding-bottom: 40px; }
  .postit { position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 90% !important; max-width: 320px; }

  /* Post-it 1: Setup Mental (Primero) */
  .postit-1 { order: 1; transform: rotate(-2deg); padding-bottom: 80px; }
  .mini-postit { bottom: -40px; right: 10px; width: 110px; height: 110px; font-size: 13px; }

  /* Post-it 2: Arte de resolver (Ahora es el SEGUNDO) */
  .postit-2 {
    order: 2;
    transform: rotate(3deg);
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .arrow-svg {
    position: absolute;
    top: auto !important; /* Apagamos la regla de escritorio */
    bottom: 70px;       /* Mueve este valor para subir o bajar la flecha */
    left: 65% !important;/* Centrado horizontal */
    width: 55px; height: 60px;
    display: block !important; /* Forzamos que se vea */
  }
  .mini-postit.orange-postit {
    position: absolute;
    top: auto !important; /* <--- ESTO APAGA LA REGLA DE COMPUTADORA */
    bottom: -70px;       /* AHORA SÍ: modificá este valor y va a subir o bajar */
    left: 90%;
    transform: translateX(-50%) rotate(-12deg);
  }

  /* Post-it 3: Mis Herramientas (Ahora es el ÚLTIMO) */
  .postit-3 {
    order: 3;
    transform: rotate(-1deg);
    margin-top: 10px; /* Cambiá este valor para alejarlo del post-it 2 */
    margin-left: -160px; /* Aumentá este valor para moverlo a la derecha */
    margin-right: 0px; /* Aumentá este valor para moverlo a la izquierda */
    aspect-ratio: auto !important;
    padding: 30px 20px;
  width: 90% !important;   /* Mantené esto para que sea responsivo */
  max-width: 177px;        /* BAJÁ ESTE NÚMERO para que sea más cuadrado */
  aspect-ratio: 1 / 1;     /* ESTO FUERZA EL CUADRADO PERFECTO */
}
  .postit-3::after { display: none; }

  /* 7. Contacto (Ajuste perfecto en una línea y bordes) */
  #contacto { padding: 80px 5vw 60px; align-items: flex-start; }
  .contact-box {
    padding: 40px 20px; width: 100%; border-radius: 20px;
  }
  .contact-box .section-title {
    font-size: clamp(24px, 8vw, 32px); text-align: center; white-space: nowrap; margin-bottom: 30px;
  }
  .form-row { flex-direction: column; gap: 5px; margin-bottom: 20px; align-items: flex-start; width: 100%; }
  .form-row label { width: auto; font-size: 14px; }
  .form-row input, .form-row textarea {
    width: 100% !important; box-sizing: border-box !important; padding: 8px 4px; margin: 0;
  }
  .submit-btn { width: 100%; margin-top: 10px; }

  /* 8. Footer Redes (Subimos para que no tape la isla flotante) */
  footer { padding-bottom: 110px; }

  /* ==========================================================================
     REPOSITORIO DE DIBUJOS PARA MÓVIL
     ========================================================================== */

  /* 1. Ajuste general para móvil: achicamos el tamaño de base */
  .doodle {
    opacity: 0.75; /* Un toque más sutiles en celular */
    /* transition: none !important; (Opcional: si querés apagarles los movimientos al girar el celu) */
  }

  /* 2. Control manual de tus 10 assets en celular */

  .doodle-gorra { top: 20%; left: 30px; width: 110px; transform: rotate(20deg); }
  .doodle-groot { bottom: 20%; right: 4%; width: 100px; }
  .doodle-9z { top: 8%; left: 5%; width: 70px; }
  .doodle-iron { top: 70px; left: 15px; width: 75px; transform: rotate(20deg); }
  .doodle-spider { top: 48%; right: -5px; width: 75px; }
  .doodle-jordan { top: 70%; left: -10px; width: 100px; }
  .doodle-pr { top: 93%; right: -10px; width: 100px; }
  .doodle-ae { top: 80%; right: 25%; width: 80px; z-index: 30; }
  .doodle-postits { top: 45%; left: 40px; width: 120px; transform: rotate(1deg); z-index: 30; }
  .doodle-mimi { top: -2%; left: 235px; width: 140px; z-index: 5; }
  .doodle-arrow { display: none; }
}

/* ==========================================================================
   AJUSTES PARA MONITORES/LAPTOPS CHICOS (1025px – 1439px)
   El título del hero usaba font-size en vw sin techo real hasta los 1422px
   de ancho, así que en resoluciones típicas de laptop (1280x720, 1366x768,
   1440x900) el texto quedaba más ancho que la mitad de la pantalla y se
   cortaba fuera del viewport. Achicamos el texto y la separación al abrirse
   para que entre completo.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
  .hero-half { font-size: clamp(38px, 5.4vw, 72px); max-width: 40vw; }
  .hero-title-wrap.split-active .hero-half.left { transform: translateY(-50%) translateX(-12vw); }
  .hero-title-wrap.split-active .hero-half.right { transform: translateY(-50%) translateX(12vw); }
  .carousel-wrapper.visible { transform: translate(-50%,-50%) scale(0.85); }
}

/* Escritorio grande (PC): las líneas debajo de "Creativa" se alargan un poco más
   que en mobile/tablet/laptop, donde ya están bien de longitud. */
@media (min-width: 1440px) {
  .underline-word::after{ left: -26px; right: -26px; }
}

/* ==========================================================================
   AJUSTES ESPECÍFICOS PARA TABLET / IPAD (768px – 1024px)
   Hereda la UI táctil del bloque de arriba (menú flotante, cursor apagado,
   etc.) pero pisa los tamaños que estaban pensados para pantallas de celular
   (320–430px) y quedaban chicos o descentrados en una tablet.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Hero y carrusel: más grandes que en celular, sin llegar al tamaño de escritorio */
  .hero-half { font-size: clamp(44px, 7vw, 74px); }
  .hero-half.left { top: calc(50% - 60px); }
  .hero-half.right { top: calc(50% + 60px); }

  .carousel-wrapper { transform: translate(-50%,-50%) scale(0.55); }
  .carousel-wrapper.visible { transform: translate(-50%,-50%) scale(0.72); }
  .carousel-title-hand { font-size: 52px; }

  /* Filtros y tarjetas de Mis Trabajos con más aire que en celular */
  .highlight-btn { font-size: clamp(13px, 2vw, 16px); padding: 8px 14px; }

  .archive-grid.staggered, .archive-grid.grid-5, .archive-grid.horizontal-order {
    gap: 45px;
  }
  .archive-item[data-orientation="vertical"] {
    width: 45vw !important; max-width: 360px !important;
  }

  /* Modal de video: aprovecha el ancho extra en vez del tamaño de celular */
  .video-expand-panel {
    flex-direction: row; max-width: 820px; height: 70vh; max-height: 620px;
  }
  .modal-left { width: 55%; height: auto; border-radius: 18px 0 0 18px; }
  .modal-right { width: 45%; border-radius: 0 18px 18px 0; border-top: none; border-left: 1.5px solid rgba(139, 90, 43, 0.2); }
  .modal-title { font-size: 32px; }
}