/* ============ TOKENS ============ */
  :root{
    --bg: #EDEDE6;
    --bg-alt: #E2E0D5;
    --ink: #1A1916;
    --ink-soft: #55524A;
    --line: #C9C5B8;
    --line-strong: #A8A499;
    --concrete: #86837A;
    --accent: #A8321E;
    --accent-dark: #7E2415;
    --white: #FDFDFB;

    --font-display: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;

    --container: 1180px;
    --pad: clamp(1.25rem, 4vw, 3rem);
    --section-pad: clamp(4.5rem, 9vw, 8rem);
  }

  /* ============ RESET ============ */
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }
  body{ margin:0; }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  ul{ list-style:none; margin:0; padding:0; }
  input,select,textarea{ font:inherit; color:inherit; }
  h1,h2,h3,h4,p,figure{ margin:0; }

  body{
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .container{
    max-width: var(--container);
    margin:0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .skip-link{
    position:absolute; left:-999px; top:0;
    background:var(--accent); color:var(--white);
    padding:0.75rem 1.25rem; z-index:1000;
  }
  .skip-link:focus{ left: var(--pad); top: var(--pad); }

  /* ============ TYPE ============ */
  h1,h2,h3,.logo,.btn{ font-family: var(--font-display); }
  h2{
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight:600; line-height:1.05; letter-spacing:0.2px;
  }
  h3{ font-size: clamp(1.25rem, 1.9vw, 1.55rem); font-weight:600; line-height:1.15; }
  .lead{
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--ink-soft);
    max-width:62ch;
  }
  p{ max-width:62ch; }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.9rem 1.7rem;
    font-size:1.05rem; font-weight:600; letter-spacing:0.3px;
    border:1.5px solid transparent; border-radius:0;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .btn-accent{ background:var(--accent); color:var(--white); }
  .btn-accent:hover{ background:var(--accent-dark); }
  .btn-outline-dark{ border-color:var(--ink); color:var(--ink); }
  .btn-outline-dark:hover{ background:var(--ink); color:var(--white); }
  .btn-outline-light{ border-color:rgba(253,253,251,0.5); color:var(--white); }
  .btn-outline-light:hover{ border-color:var(--white); background:rgba(253,253,251,0.08); }
  .btn-small{ padding:0.6rem 1.15rem; font-size:0.92rem; }
  /* ============ ANIMACIONES (SCROLL REVEAL) ============ */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Retrasos para que los elementos de una cuadrícula no salgan de golpe */
  .delay-1 { transition-delay: 0.15s; }
  .delay-2 { transition-delay: 0.3s; }
  .delay-3 { transition-delay: 0.45s; }
  
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ============ HEADER ============ */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:500;
    padding:1.1rem 0;
    transition: background-color .25s ease, padding .25s ease, box-shadow .25s ease;
  }
  .site-header.is-scrolled{
    background: rgba(237,237,230,0.94);
    backdrop-filter: blur(6px);
    padding:0.7rem 0;
    box-shadow: 0 1px 0 var(--line);
  }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
  .logo{ font-size:1.35rem; font-weight:700; letter-spacing:0.3px; color:var(--ink); }
  .logo span{ color:var(--accent); font-weight:500; }
  .site-header:not(.is-scrolled) .logo{ color:var(--white); }
  .site-header:not(.is-scrolled) .logo span{ color:#FF4433; opacity:1; text-shadow:0px 2px 10px rgba(0,0,0,0.8); }

  .main-nav{ display:flex; gap:2.1rem; }
  .main-nav a{
    font-size:0.98rem; font-weight:500; color:var(--ink);
    position:relative; padding-bottom:3px;
  }
  .site-header:not(.is-scrolled) .main-nav a{ color:var(--white); }
  .main-nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
    background:currentColor; transition:right .2s ease;
  }
  .main-nav a:hover::after{ right:0; }

  .header-actions{ display:flex; align-items:center; gap:1rem; }
  .cta-label-short{ display:none; }

  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px;
  }
  .menu-toggle span{
    display:block; height:2px; width:100%;
    background:var(--ink); transition: transform .2s ease, opacity .2s ease;
  }
  .site-header:not(.is-scrolled) .menu-toggle span{ background:var(--white); }
  .nav-open .menu-toggle span{ background:var(--ink) !important; }
  .nav-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-open .menu-toggle span:nth-child(2){ opacity:0; }
  .nav-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  @media (max-width:880px){
    .main-nav{
      position:fixed; inset:0 0 0 32%; z-index:490;
      background:var(--white);
      flex-direction:column; align-items:flex-start;
      padding:6.5rem 2rem 2rem; gap:1.6rem;
      transform: translateX(100%); transition: transform .28s ease;
      box-shadow:-8px 0 24px rgba(0,0,0,0.12);
    }
    .main-nav a{ font-size:1.3rem; color:var(--ink) !important; }
    .nav-open .main-nav{ transform: translateX(0); }
    .menu-toggle{ display:flex; }
  }
  @media (max-width:480px){
    .logo{ font-size:1.05rem; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cta-label-full{ display:none; }
    .cta-label-short{ display:inline; }
    .btn-small{ padding:0.6rem 0.9rem; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative; min-height:100svh;
    display:flex; align-items:center;
    background:var(--ink); color:var(--white); overflow:hidden;
  }
  .hero-grid-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(253,253,251,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(253,253,251,0.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.3) 88%);
  }
  .hero-detail{
    position:absolute; right:-2%; top:50%; transform:translateY(-50%);
    width:min(44vw, 560px); opacity:0.6; color:rgba(253,253,251,0.55);
  }
  @media (max-width:980px){ .hero-detail{ display:none; } }

  .hero-inner{
    position:relative; z-index:2;
    padding-top:6rem; padding-bottom:5rem;
    max-width:720px;
  }
  .hero-inner h1{
    font-size: clamp(2.5rem, 6.4vw, 4.7rem);
    font-weight:700; text-transform:uppercase;
    line-height:1.02; letter-spacing:0.5px; margin-bottom:1.4rem;
    opacity:0; transform:translateY(18px); animation: reveal .7s ease forwards;
  }
  .hero-inner .lead{
    color:rgba(253,253,251,0.82);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    margin-bottom:2.2rem;
    opacity:0; transform:translateY(18px); animation: reveal .7s ease .12s forwards;
  }
  .hero-ctas{
    display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
    opacity:0; transform:translateY(18px); animation: reveal .7s ease .24s forwards;
  }
  .hero-tag{
    margin-top:2.6rem; font-size:0.9rem; letter-spacing:1px; color:rgba(253,253,251,0.55);
    opacity:0; transform:translateY(18px); animation: reveal .7s ease .34s forwards;
  }
  @keyframes reveal{ to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){
    .hero-inner h1,.hero-inner .lead,.hero-ctas,.hero-tag{ animation:none; opacity:1; transform:none; }
  }

  .scroll-cue{
    position:absolute; bottom:2rem; left:var(--pad);
    display:flex; align-items:center; gap:0.6rem;
    color:rgba(253,253,251,0.5); font-size:0.85rem;
  }
  .scroll-cue svg{ width:14px; height:14px; }

  /* ============ SECTIONS ============ */
  section{ padding: var(--section-pad) 0; }
  .section-head{ margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
  .section-head .lead{ margin-top:0.9rem; }

  /* ============ WORK TILES (4 fotos) ============ */
  .work-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem, 2vw, 1.6rem);
  }
  @media (max-width:760px){ .work-grid{ grid-template-columns:1fr; } }

  .work-tile{ position:relative; }
  .tile-media{
    position:relative;
    aspect-ratio: 4 / 3;
    background: var(--bg-alt);
    border:1px solid var(--line-strong);
    overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem;
  }
  .tile-media img{
    width:100%; height:100%; object-fit:cover;
  }
  .tile-placeholder{
    display:flex; flex-direction:column; align-items:center; gap:0.6rem;
    color:var(--concrete); text-align:center; padding:1rem;
  }
  .tile-placeholder svg{ width:30px; height:30px; }
  .tile-placeholder span{ font-size:0.8rem; letter-spacing:0.4px; }
  .tile-caption{
    padding-top:1rem; border-top:2px solid var(--ink);
    margin-top:-1px;
  }
  .tile-caption p{ font-size:0.94rem; color:var(--ink-soft); margin-top:0.35rem; }

  /* ============ CONTACT ============ */
  .contact{ background:var(--ink); color:var(--white); }
  .contact h2{ margin-bottom:0.9rem; }
  .contact .lead{ color:rgba(253,253,251,0.72); }
  .contact-grid{
    display:grid; grid-template-columns: 0.85fr 1.15fr; gap:clamp(2.5rem, 6vw, 5rem);
    align-items:start;
  }
  @media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }

  .contact-address{ display:flex; gap:0.9rem; margin-bottom:1.5rem; }
  .contact-address svg{ width:22px; height:22px; color:var(--accent); flex-shrink:0; margin-top:3px; }
  .contact-address address{ font-style:normal; font-size:1.05rem; line-height:1.5; }

  .contact-list{ margin:1.8rem 0 1.8rem; border-top:1px solid rgba(253,253,251,0.18); }
  .contact-list li{
    display:flex; align-items:center; gap:0.8rem;
    padding:0.85rem 0; border-bottom:1px solid rgba(253,253,251,0.18);
    font-size:0.95rem; color:rgba(253,253,251,0.7);
  }
  .contact-list li svg{ width:18px; height:18px; flex-shrink:0; opacity:0.7; }
  .contact-list li.is-pending{ font-style:italic; color:rgba(253,253,251,0.45); }

  .social-label{ font-size:0.88rem; color:rgba(253,253,251,0.55); margin-bottom:0.7rem; }
  .social-row{ display:flex; gap:0.8rem; }
  .social-row a{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(253,253,251,0.28); color:var(--white);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .social-row a:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
  .social-row svg{ width:19px; height:19px; }

  .form-card{ background:var(--white); color:var(--ink); padding:clamp(1.6rem, 3vw, 2.5rem); }
  .form-card h3{ margin-bottom:1.4rem; }
  .field{ margin-bottom:1.2rem; }
  .field label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:0.4rem; color:var(--ink-soft); }
  .field input, .field select, .field textarea{
    width:100%; padding:0.78rem 0.9rem;
    border:1px solid var(--line-strong); background:var(--bg); font-size:0.98rem;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); outline:none; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
  .field-checkbox{ display:flex; align-items:flex-start; gap:0.6rem; font-size:0.86rem; color:var(--ink-soft); }
  .field-checkbox input{ width:auto; margin-top:3px; }
  .form-note{ font-size:0.8rem; color:var(--concrete); margin-top:0.9rem; }
  .form-status{
    font-size:0.92rem; margin-top:1rem; padding:0.8rem 1rem;
    border-left:3px solid var(--accent); background:var(--bg-alt); display:none;
  }
  .form-status.is-visible{ display:block; }

  /* ============ FOOTER ============ */
  .site-footer{
    background:var(--ink); color:rgba(253,253,251,0.5);
    padding:2rem 0; border-top:1px solid rgba(253,253,251,0.15);
    font-size:0.8rem;
  }
  .footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
  .footer-inner a:hover{ color:var(--white); }
  /* ============ EFECTO CUADRADO ILUMINADO FOTOS SOLUCIONES */
.tile-media {
  overflow: hidden; /* Evita que la foto se salga del recuadro al hacer zoom */
}

.tile-media img {
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.9); /* Apaga la foto un 10% por defecto para mayor contraste */
  will-change: transform, filter; /* Optimiza la animación para que vaya muy fluida */
}

.work-tile:hover .tile-media img {
  transform: scale(1.06); /* Hace un suave zoom del 6% hacia el usuario */
  filter: brightness(1.15); /* Ilumina la foto bruscamente al pasar el ratón */
}