/* ============================================================
   Luisito Collagea Studio — estilos globales
   Superset de los bloques <style> de los prototipos originales.
   Fuentes en ruta relativa (../brand) para ser independiente del base.
   ============================================================ */

@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-DemiBold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Europa Grotesk SH';src:url('../brand/EuropaGroteskSH-DemiBoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap;}

/* ---- Ancho de página ----
   --frame        : ancho de las franjas de sección (antes fijo en 1440px, lo que
                    dejaba franjas grises a los costados en monitores grandes).
   --frame-narrow : columna de lectura de las fichas (portfolio/shop detalle).
   En pantallas anchas los gutters crecen para que el contenido no quede pegado
   al borde (ver la regla de div.r-pad más abajo). */
:root{--frame:100%;--frame-narrow:1100px;}
@media (min-width:1700px){:root{--frame-narrow:1360px;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#DAD7CF;font-family:'Europa Grotesk SH',sans-serif;font-weight:500;}
::selection{background:#E8432E;color:#F1EBDE;}
a{color:inherit;text-decoration:none;}
a:hover{opacity:0.75;}

.disp{font-family:'Europa Grotesk SH',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.mono{font-family:'Europa Grotesk SH',sans-serif;font-weight:500;letter-spacing:0.5px;}
.stamp{clip-path:polygon(50% 0%,61% 7%,73% 2%,80% 12%,93% 12%,93% 25%,100% 35%,92% 45%,97% 57%,86% 62%,86% 75%,74% 75%,68% 87%,56% 82%,46% 92%,37% 82%,25% 87%,20% 75%,8% 75%,8% 62%,0% 52%,7% 42%,2% 30%,14% 25%,14% 12%,27% 12%,35% 2%);}
.bg-dots-light{background-image:radial-gradient(rgba(23,19,16,0.16) 2.5px,transparent 2.5px);background-size:24px 24px;}
.bg-dots-dark{background-image:radial-gradient(rgba(241,235,222,0.14) 2.5px,transparent 2.5px);background-size:24px 24px;}
.bg-stripes{background-image:repeating-linear-gradient(-45deg,transparent 0 16px,rgba(23,19,16,0.055) 16px 32px);}

@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marquee-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes spin-slow{to{transform:rotate(360deg);}}
@keyframes spin-slow-rev{to{transform:rotate(-360deg);}}
@keyframes float-y{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-16px) rotate(var(--r,0deg));}}
@keyframes wiggle{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes pulse-scale{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
@keyframes pf-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes pf-jitter{0%,100%{transform:translate(0,0) rotate(0deg);}20%{transform:translate(-1.5px,1.5px) rotate(-0.4deg);}40%{transform:translate(1.5px,-1px) rotate(0.4deg);}60%{transform:translate(-1px,-1px) rotate(-0.3deg);}80%{transform:translate(1px,1.5px) rotate(0.3deg);}}
@keyframes pf-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

.pf-marquee-wrap{overflow:hidden;white-space:nowrap;}
.pf-marquee-track{display:inline-flex;animation:pf-marquee 14s linear infinite;}
.pf-title:hover{animation:pf-jitter .25s steps(3) infinite;}
.pf-blink{animation:pf-blink 1s steps(1) infinite;}

/* Cursor custom (se activa por JS; oculto en touch/reduced-motion) */
.lc-cursor{position:fixed;top:0;left:0;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:9999;background:#E8432E;border:1.5px solid transparent;transform:translate(-50%,-50%);display:none;}
body.lc-has-cursor .lc-cursor{display:block;}

/* Formulario de contacto */
.ct-input{width:100%;background:transparent;border:none;border-bottom:3px solid #171310;padding:14px 4px;font-family:'Europa Grotesk SH',sans-serif;font-size:17px;color:#171310;outline:none;transition:border-color .15s,background .15s;}
.ct-input:focus{border-color:#E8432E;background:rgba(232,67,46,0.05);}
.ct-input::placeholder{color:rgba(23,19,16,0.35);}
textarea.ct-input{resize:vertical;min-height:120px;font-size:16px;line-height:1.5;}

/* Placeholder de image-slot vacío (cuando no hay imagen real).
   Respeta el color de fondo definido en el style inline del slot. */
.lc-slot-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;position:relative;color:#171310;background:#DAD7CF;}
.lc-slot-empty.lc-on-dark{color:#F1EBDE;}
.lc-slot-empty::after{content:'';position:absolute;inset:8px;border:1.5px dashed currentColor;opacity:0.22;pointer-events:none;}
.lc-slot-empty .lc-slot-cap{font-family:'Europa Grotesk SH',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.6;position:relative;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition:none !important;}
}

@media (max-width:900px){
  .r-grid2{grid-template-columns:1fr !important;gap:32px !important;}
  .r-grid3{grid-template-columns:1fr !important;}
  .r-grid4{grid-template-columns:repeat(2,1fr) !important;}
  .r-modrow{grid-template-columns:56px 1fr !important;}
  .r-modrow-tags{display:none !important;}
  .r-nav-links{display:none !important;}
  .r-gallery{grid-template-columns:repeat(2,1fr) !important;grid-auto-rows:150px !important;}
  .r-shop-grid{grid-template-columns:repeat(2,1fr) !important;}
  .ct-reasons{grid-template-columns:1fr !important;}
  .r-pad{padding:56px 22px !important;}
  .r-h1{font-size:clamp(38px,11vw,64px) !important;}
  .r-h2{font-size:30px !important;}
  .r-hero-visual{display:none !important;}
}
@media (max-width:560px){
  .r-shop-grid{grid-template-columns:1fr !important;}
}

/* ---- Monitores grandes: las secciones son full-bleed, así que se agranda el
   gutter horizontal (los 48px inline quedarían pegados al borde).
   Sólo sobre divs: hay algún <p class="r-pad"> anidado que no debe indentarse. */
@media (min-width:1600px){
  /* :not(...) deja fuera las fichas de detalle, que siguen centradas
     con --frame-narrow y no necesitan gutter extra. */
  div.r-pad:not([style*="frame-narrow"]),
  .lc-nav,
  .lc-edge{padding-left:4.5vw !important;padding-right:4.5vw !important;}
  .r-shop-grid{grid-template-columns:repeat(4,1fr) !important;}
}

/* ---- Navegación mobile (hamburguesa + overlay) ---- */
.lc-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:9px;color:inherit;}
.lc-burger span{display:block;height:3px;width:100%;background:currentColor;border-radius:2px;}
.lc-mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:#171310;color:#F1EBDE;flex-direction:column;padding:22px 26px 40px;overflow-y:auto;}
.lc-mobile-menu.lc-open{display:flex;}
.lc-menu-close{align-self:flex-end;background:none;border:none;color:#F1EBDE;font-size:28px;line-height:1;cursor:pointer;padding:6px 8px;font-family:inherit;}
.lc-menu-links{display:flex;flex-direction:column;margin-top:10px;}
.lc-menu-links a{font-family:'Europa Grotesk SH',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#F1EBDE;font-size:clamp(26px,8vw,34px);padding:15px 0;border-bottom:1px solid rgba(241,235,222,0.15);}
.lc-menu-links a.lc-active{color:#E8432E;}
.lc-menu-cta{display:flex;flex-direction:column;gap:12px;margin-top:30px;}
.lc-menu-cta a{font-family:'Europa Grotesk SH',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:13px;text-align:center;padding:16px;border:2px solid #F1EBDE;color:#F1EBDE;}
.lc-menu-cta a.lc-cta-primary{background:#E8432E;color:#171310;border-color:#E8432E;}
@media (max-width:900px){
  .lc-nav{padding:16px 20px !important;}
  .lc-burger{display:flex;}
  .lc-nav-cta{display:none !important;}
}
@media (min-width:901px){
  .lc-mobile-menu{display:none !important;}
}

/* ---- Mobile: ocultar decoraciones que se superponen al texto ---- */
@media (max-width:900px){
  .stamp{display:none !important;}
  [aria-hidden="true"][style*="position:absolute"]{display:none !important;}
}


/* ---------- Grid del portfolio ----------
   Cuadrícula pareja: todas las portadas comparten proporción, así que las filas
   quedan alineadas. Los saltos de columnas siguen los mismos anchos que usaba
   el layout anterior. */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px 22px;
  align-items: start;
}
@media (min-width: 561px)  { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 821px)  { .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1101px) { .pf-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1601px) { .pf-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 2101px) { .pf-grid { grid-template-columns: repeat(7, 1fr); } }


/* ---------- Foto de fondo del hero (Home y Bio) ----------
   Los banners vienen con un degradado de transparencia de izquierda a derecha:
   la foto es opaca sobre el margen derecho y se desvanece justo donde va el
   título, así que se ancla a la derecha a la altura completa de la franja.
   El ::after refuerza el contraste para que el texto se lea siempre. */
.lc-hero-foto{
  position:absolute;inset:0;pointer-events:none;
  background-repeat:no-repeat;background-position:right center;background-size:auto 100%;
}
.lc-hero-foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#171310 0%,rgba(23,19,16,0.86) 28%,rgba(23,19,16,0) 58%);
}
@media (max-width:900px){
  /* En vertical la foto taparía el título: se recorta y se atenúa. */
  .lc-hero-foto{background-size:cover;background-position:right top;opacity:0.62;}
  .lc-hero-foto::after{background:linear-gradient(180deg,rgba(23,19,16,0.68) 0%,rgba(23,19,16,0.9) 62%);}
}

/* ---- Gutter horizontal de las secciones ----
   Réplica de los paddings de `.r-pad` como variable, para que los bloques que
   se salen a sangre (el carrusel del estudio) sepan cuánto compensar. */
:root{--gutter:48px;}
@media (max-width:900px){:root{--gutter:22px;}}
@media (min-width:1600px){:root{--gutter:4.5vw;}}

/* ---------- Clientes: grilla de logos ---------- */
/* Cinta automática de logos: la pista contiene dos copias idénticas de la
   lista y se desplaza el 50%, así el salto al reiniciar es invisible.
   Sale a sangre a los dos lados y se difumina en los bordes. */
.est-clientes{
  margin-inline:calc(var(--gutter) * -1);
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.est-clientes-cinta{
  display:flex;width:max-content;
  animation:est-clientes-scroll 46s linear infinite;
}
.est-clientes:hover .est-clientes-cinta{animation-play-state:paused;}
.est-clientes-grupo{display:flex;align-items:center;}
.est-cliente{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:clamp(150px,14vw,200px);padding:10px 18px;min-height:110px;
}
@keyframes est-clientes-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  /* La regla global desactiva las animaciones: sin ella la cinta quedaría
     congelada mostrando sólo los primeros logos, así que vuelve a fluir. */
  .est-clientes{overflow-x:auto;}
  .est-clientes-cinta{width:auto;}
  .est-clientes-grupo[aria-hidden="true"]{display:none;}
}
.est-cliente img{
  max-width:100%;max-height:78px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:0.72;transition:filter .25s,opacity .25s;
}
.est-cliente:hover img{filter:none;opacity:1;}

/* ---------- Carrusel de proyectos del estudio ----------
   Scroll horizontal nativo con snap; las flechas del encabezado sólo empujan
   el scroll. Sale a sangre por la derecha para que se vea la tarjeta siguiente
   cortada e invite a desplazar. */
.est-carrusel{
  display:flex;gap:26px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);
  padding-bottom:8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.est-carrusel::-webkit-scrollbar{display:none;}
.est-carrusel.est-arrastrando{scroll-behavior:auto;cursor:grabbing;}
.est-proyecto{flex:0 0 clamp(280px,38vw,540px);scroll-snap-align:start;}
.est-proyecto-img{border:3px solid #171310;background:#DAD7CF;overflow:hidden;}
.est-proyecto-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.est-proyecto:hover .est-proyecto-img img{transform:scale(1.04);}
.est-proyecto-pie{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:16px;
}
.est-proyecto-pie h3{
  font-size:clamp(20px,2.4vw,30px);margin:0;text-transform:none;line-height:1.1;
}
.est-proyecto-tags{
  margin:0;font-style:italic;font-size:13px;opacity:0.65;
  display:flex;gap:8px;flex-wrap:wrap;
}
.est-carrusel-nav{display:flex;gap:8px;}
.est-carrusel-nav button{
  width:46px;height:46px;border:2px solid #171310;background:none;color:#171310;
  font-family:'Europa Grotesk SH',sans-serif;font-size:18px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s,opacity .2s;
}
.est-carrusel-nav button:hover:not(:disabled){background:#171310;color:#F1EBDE;}
.est-carrusel-nav button:disabled{opacity:0.28;cursor:default;}
@media (max-width:900px){
  .est-carrusel-nav{display:none;}
  .est-proyecto{flex:0 0 82%;}
}

/* ---------- Documental de la Bio (N.05) ---------- */
.lc-doc-cabecera{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:36px;
}
/* El material es 4:3 real (1440x1080, píxeles cuadrados) y usa todo el
   encuadre, así que no se puede recortar a 16:9 sin comerse imagen. Para que
   no quede un cuadrado gigante se lo limita por ALTURA: el ancho lo deduce el
   navegador de la proporción, así nunca se deforma. */
.lc-doc-video{
  display:inline-block;max-width:100%;
  border:3px solid #171310;background:#171310;line-height:0;
  box-shadow:16px 16px 0 #E8432E;
}
.lc-doc-video video{
  display:block;
  width:auto;max-width:100%;
  height:auto;max-height:min(58vh,520px);
  aspect-ratio:4/3;
  object-fit:contain;
}
@media (max-width:900px){
  .lc-doc-cabecera{margin-bottom:26px;}
  .lc-doc-video{box-shadow:10px 10px 0 #E8432E;}
  .lc-doc-video video{max-height:none;width:100%;}
}

/* ---------- Pie del sitio ----------
   Bloque de marca + tres columnas de enlaces, y una barra fina abajo con el
   copyright y los legales. Los tamaños chicos van en `mono`; los enlaces
   heredan el look del resto del sitio (subrayado al pasar, sin decoración). */
.lc-footer{
  background:#F1EBDE;color:#171310;border-top:4px solid #171310;
  padding:40px 48px 16px;position:relative;overflow:hidden;
}
.lc-footer-marca{
  position:absolute;right:-2%;bottom:-16%;
  font-size:clamp(120px,20vw,260px);line-height:0.8;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(23,19,16,0.08);
  pointer-events:none;user-select:none;
}
.lc-footer-cols{
  position:relative;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:26px 32px;
  padding-bottom:26px;
}
.lc-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.lc-footer-claim{
  font-size:14px;line-height:1.45;max-width:280px;margin:0;opacity:0.75;
}
.lc-footer-col{display:flex;flex-direction:column;gap:5px;align-items:flex-start;}
.lc-footer-titulo{
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  opacity:0.45;margin:0 0 3px;font-weight:700;
}
.lc-footer-col a,
.lc-footer-dato{
  font-size:14px;line-height:1.25;color:#171310;text-decoration:none;
}
.lc-footer-dato{opacity:0.6;}
.lc-footer-col a{
  border-bottom:2px solid transparent;padding-bottom:1px;
  transition:border-color .2s,color .2s;
}
.lc-footer-col a:hover{color:#E8432E;border-bottom-color:#E8432E;}

.lc-footer-base{
  position:relative;border-top:2px solid rgba(23,19,16,0.18);padding-top:12px;
  display:flex;justify-content:space-between;align-items:center;
  gap:6px 28px;flex-wrap:wrap;
  font-size:11px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.72;
}
.lc-footer-legales{display:flex;gap:20px;flex-wrap:wrap;}
.lc-footer-legales a{
  color:#171310;text-decoration:underline;text-underline-offset:3px;
  padding:5px 0;transition:color .2s;
}
.lc-footer-legales a:hover{color:#E8432E;}

@media (max-width:900px){
  .lc-footer{padding:34px 22px 14px;}
  .lc-footer-cols{grid-template-columns:1fr 1fr;gap:26px 24px;padding-bottom:24px;}
  .lc-footer-brand{grid-column:1 / -1;}
  .lc-footer-base{justify-content:flex-start;}
}
@media (max-width:380px){
  .lc-footer-cols{grid-template-columns:1fr;}
}

/* ---- Portada del Estudio ----
   El título es mucho más largo que el resto de los h1 del sitio, así que en
   pantallas chicas no puede tomar el tamaño de `.r-h1` (pensado para títulos de
   dos o tres palabras): quedaba ocupando la pantalla entera. */
@media (max-width: 900px) {
  h1.est-hero-title { font-size: clamp(28px, 7.2vw, 42px) !important; }
}