/* =====================================================
   Sonia Gayosso — Editorial landing
   Style inspired by ideo.com: white space, big serif
   display type, restrained palette, calm imagery.
   ===================================================== */

:root {
   --paper: #fafaf8;
   --paper-2: #f0f0ed;
   --paper-3: #ffffff;
   --ink: #0d0d0d;
   --ink-2: #2d2d2d;
   --ink-3: #ffffff;
   --muted: #707070;
   --rule: #e0e0dc;
   --accent: #ff4713;
   --accent-alfa: rgba(255, 71, 19, 0.25);
   --accent-alfa-2: rgba(255, 71, 19, 0.5);
   --serif: "Fraunces", "Times New Roman", ui-serif, Georgia, serif;
   --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --maxw: 1440px;
   --gutter: clamp(20px, 4vw, 64px);
   --section-pad: clamp(48px, 6vw, 80px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
   font-family: var(--sans);
   font-weight: 400;
   color: var(--ink);
   background: var(--paper);
   font-size: 17px;
   line-height: 1.55;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
   font-family: var(--serif);
   font-weight: 400;
   font-style: normal;
   letter-spacing: -0.015em;
   margin: 0;
   color: var(--ink);
   text-transform: none;
}

/* =============== HEADER =============== */
.header {
   position: sticky;
   top: 0;
   z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 20px var(--gutter);
   background: rgba(255,255,255,0.92);
   backdrop-filter: saturate(160%) blur(10px);
   border-bottom: 1px solid var(--rule);
}
.header--brand {
   display: flex;
   align-items: center;
   gap: 12px;
   font-family: var(--serif);
   font-size: 22px;
   line-height: 1;
   color: var(--ink);
}
.header--mark { font-size: 22px; }
.header--wordmark { font-weight: 500; letter-spacing: -0.02em; }

.header--nav { display: flex; align-items: center; }
.header--menu-btn {
   display: none;
   background: none;
   border: 0;
   font-family: var(--sans);
   font-size: 12px;
   letter-spacing: 0.14em;
   color: var(--ink);
   cursor: pointer;
}
.header--links {
   display: flex;
   gap: 32px;
   list-style: none;
   margin: 0;
   padding: 0;
   font-family: var(--sans);
   font-size: 13px;
   font-weight: 500;
   letter-spacing: 0.12em;
}
.header--links a { position: relative; padding: 6px 0; color: var(--ink); }
.header--links a:hover { color: var(--accent); }

.header--utility {
   display: flex;
   gap: 12px;
   font-family: var(--sans);
   font-size: 13px;
   letter-spacing: 0.12em;
}
.header--utility a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px; height: 34px;
   border: 1px solid var(--rule);
   border-radius: 999px;
   transition: border-color .2s, color .2s;
}
.header--utility a:hover { border-color: var(--ink); color: var(--accent); }

/* Buttons */
.btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 26px;
   background: var(--ink);
   color: #fff;
   border-radius: 999px;
   font-family: var(--sans);
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.02em;
   transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn-primary--ghost {
   background: transparent;
   color: var(--ink);
   border: 1px solid var(--ink);
}
.btn-primary--ghost:hover { background: var(--ink); color: #fff; }
.btn-link {
   font-family: var(--sans);
   font-size: 14px;
   font-weight: 500;
   border-bottom: 1px solid var(--ink);
   padding-bottom: 2px;
}
.btn-link:hover { color: var(--accent); border-color: var(--accent); }

/* =============== MARQUEE =============== */
.marquee {
   overflow: hidden;
   border-top: 1px solid var(--rule);
   border-bottom: 1px solid var(--rule);
   background: var(--accent-alfa);
   padding: 22px 0;
}
.marquee--track {
   display: flex;
   gap: 48px;
   white-space: nowrap;
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(12px, 1.5vw, 20px);
   letter-spacing: -0.01em;
   color: var(--ink);
   animation: scroll 32s linear infinite;
}
.marquee--track .bullet { color: var(--accent-alfa-2); }
.marquee--track span { flex-shrink: 0; }
@keyframes scroll {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}

/* =============== SECTION SHARED =============== */
.section--tag {
   display: inline-block;
   font-family: var(--sans);
   font-size: 12px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 16px;
}
.section--title {
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(34px, 5vw, 68px);
   line-height: 1.05;
   letter-spacing: -0.03em;
   margin: 0 0 24px;
   text-transform: none;
}
.section--lede {
   max-width: 540px;
   font-size: 17px;
   color: var(--ink-2);
   margin: 0;
}

/* =============== RESUME / ABOUT =============== */
.resume {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: var(--section-pad) var(--gutter);
}
.resume--grid {
   display: grid;
   grid-template-columns: 1.75fr 1fr;
   gap: clamp(32px, 5vw, 80px);
   align-items: start;
}
.resume--body h2 {
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(28px, 3.6vw, 52px);
   line-height: 1.1;
   letter-spacing: -0.02em;
   margin: 0 0 24px;
   text-transform: none;
}
.resume--body p {
   max-width: 620px;
   color: var(--ink-2);
   font-size: 17px;
   line-height: 1.6;
   margin: 0 0 32px;
}
.resume--actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }

.resume--pic { margin: 0; }
.resume--pic-a { grid-column: 2; grid-row: 1; }
.resume--pic .ph { border-radius: 4px; }

/* image placeholders */
.ph { background: var(--paper-2); width: 100%; }
.ph-portrait {
   background:
      radial-gradient(60% 70% at 50% 40%, #d9c6b0 0%, transparent 70%),
      linear-gradient(180deg, #efe7db 0%, #d7cfc0 100%);
   max-width: 300px;
   height: auto;
}
.ph-contact { aspect-ratio: 4 / 5;
   background:
      radial-gradient(40% 40% at 30% 30%, #ffd0a1 0%, transparent 60%),
      radial-gradient(50% 40% at 70% 70%, #a5c8f0 0%, transparent 60%),
      linear-gradient(180deg, #f7f3ea 0%, #e4dcc8 100%); }

/* =============== PORTFOLIO (accordion list) =============== */
.portafolio {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: var(--section-pad) var(--gutter);
   border-top: 1px solid var(--rule);
   background: var(--paper-3);
}
.portafolio--head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 720px; }

.portafolio--list {
   list-style: none;
   margin: 0;
   padding: 0;
   padding-bottom: 50px;
   border-top: 1px solid var(--rule);
}
.case-item { border-bottom: 1px solid var(--rule); }

.case-item__panel {
   overflow: hidden;
   max-height: 0;
   transition: max-height .45s ease;
}
.case-item.is-open .case-item__panel {
   max-height: 125vh;
}
.case-item__panel[hidden] { display: none; }

.case-item__trigger {
   width: 100%;
   background: none;
   border: 0;
   cursor: pointer;
   text-align: left;
   display: grid;
   grid-template-columns: 160px 1fr auto;
   align-items: center;
   gap: 24px;
   padding: 26px 0;
   font-family: var(--sans);
   color: var(--ink);
   transition: color .2s, padding .2s;
}
.case-item__trigger:hover { color: var(--accent); padding-left: 8px; }
.case-item__tag {
   font-family: var(--sans);
   font-size: 12px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
}
.case-item__title {
   font-family: var(--serif);
   font-weight: 400;
   font-size: clamp(22px, 2.4vw, 34px);
   line-height: 1.15;
   letter-spacing: -0.02em;
   color: var(--ink);
}
.case-item__desc {
   display: none;
}
.case-item__icon {
   font-family: var(--serif);
   font-size: 28px;
   font-weight: 300;
   width: 40px;
   text-align: right;
   transition: transform .3s ease;
}
.case-item.is-open .case-item__icon { transform: rotate(45deg); color: var(--accent); }

/* Carousel */
.carousel {
   position: relative;
   width: 100%;
   background: var(--paper-2);
   padding-bottom: 24px;
}
.carousel__viewport {
   position: relative;
   width: 100%;
   overflow: hidden;
}
.carousel__track {
   display: flex;
   transition: transform .45s ease;
}
.carousel__slide {
   flex: 0 0 100%;
   width: 100%;
}
.carousel__slide img {
   width: 100%;
   height: auto;
   display: block;
}
.carousel__controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 4px 0;
   font-family: var(--sans);
   font-size: 13px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
}
.carousel__btn {
   background: none;
   border: 1px solid var(--rule);
   border-radius: 999px;
   padding: 10px 18px;
   cursor: pointer;
   font-family: var(--sans);
   font-size: 13px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--ink);
   transition: border-color .2s, color .2s, background .2s;
}
.carousel__btn:hover { border-color: var(--ink); color: var(--accent); }
.carousel__btn--close {
   background: var(--ink);
   color: #fff;
   border-color: var(--ink);
}
.carousel__btn--close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.carousel__count { color: var(--muted); }
.carousel__nav { display: flex; gap: 10px; }

/* =============== CLIENTS =============== */
.worked {
   background: var(--paper);
   max-width: var(--maxw);
   margin: 0 auto;
   padding: var(--section-pad) var(--gutter);
   border-top: 1px solid var(--rule);
}
.worked--head { margin-bottom: 48px; }
.worked--logos {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 32px;
   align-items: center;
}
.worked--logo {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 90px;
   padding: 16px 8px;
}
.worked--logo img {
   max-width: 100%;
   max-height: 60px;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: grayscale(100%);
   opacity: 0.75;
   transition: filter .2s, opacity .2s;
}
.worked--logo img:hover { filter: none; opacity: 1; }

/* =============== VIDEOS (class names preserved) =============== */
.videos {

   background: var(--paper);
}
.videos .custom-container {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 var(--gutter);
}
.videos--head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 720px; }
.videos .row { display: block; }
.videos .col-12 { width: 100%; }
.videos--grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: clamp(24px, 3vw, 40px);
}
.videos--grid__contenedor {
   grid-column: span 1;
   cursor: pointer;
}
.videos--grid__contenedor video {
   width: 100%;
   object-fit: cover;
   background: #dcd7cb;
   border-radius: 4px;
   transition: transform .5s ease;
}
.videos--grid__contenedor:hover video { transform: scale(1.01); }
.videos--grid__contenedor h4 {
   font-family: var(--serif);
   font-weight: 400;
   font-size: clamp(18px, 1.6vw, 24px);
   letter-spacing: -0.01em;
   margin: 16px 0 0;
   text-transform: none;
}

/* =============== SAY HELLO =============== */
.contact {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: var(--section-pad) var(--gutter);
   border-top: 1px solid var(--rule);
   background: var(--paper);
}
.contact--grid {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: clamp(40px, 6vw, 96px);
   align-items: center;
}
.contact--title {
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(48px, 8vw, 120px);
   line-height: 0.95;
   letter-spacing: -0.04em;
   margin: 12px 0 24px;
   text-transform: none;
}
.contact--lede {
   font-size: clamp(17px, 1.3vw, 20px);
   color: var(--ink-2);
   max-width: 480px;
   margin: 0 0 40px;
}
.contact--links {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: 1px solid var(--rule);
}
.contact--links li { border-bottom: 1px solid var(--rule); }
.contact--links a {
   display: grid;
   grid-template-columns: 100px 1fr auto;
   align-items: center;
   gap: 24px;
   padding: 22px 0;
   font-family: var(--sans);
   font-size: 17px;
   transition: color .2s, padding .2s;
}
.contact--links a span:first-child {
   font-size: 12px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
}
.contact--links a:hover { color: var(--accent); padding-left: 8px; }

/* =============== FOOTER =============== */
.footer {
   border-top: 1px solid var(--rule);
   padding: 40px var(--gutter);
   background: var(--paper);
}
.footer--row {
   max-width: var(--maxw);
   margin: 0 auto;
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 24px;
   align-items: center;
   font-family: var(--sans);
   font-size: 13px;
   color: var(--muted);
}
.footer h5 {
   font-family: var(--serif);
   font-weight: 400;
   font-size: 20px;
   letter-spacing: -0.01em;
   color: var(--ink);
   margin: 0;
   text-transform: none;
}
.footer p { margin: 0; }
.footer--icons { display: flex; gap: 20px; }
.footer--icons a { transition: color .2s; }
.footer--icons a:hover { color: var(--accent); }

/* =============== RESPONSIVE =============== */
@media (max-width: 960px) {
   .header { position: relative; } /* Crucial for absolute menus to align */
   .header--links { display: none; }
   .header--menu-btn { display: inline-flex; align-items: center; gap: 8px; }
   .resume--grid { grid-template-columns: 1fr; }
   .resume--pic-a { max-width: 250px; }
   .case-item__trigger { grid-template-columns: 1fr auto; gap: 12px; }
   .case-item__tag { grid-column: 1 / -1; }
   .worked--logos { grid-template-columns: repeat(2, 1fr); }
   .contact--grid { grid-template-columns: 1fr; }
   .contact--img { display: none; }
   .footer--row { grid-template-columns: 1fr; text-align: left; }

   /* --- BULLETPROOF MOBILE DROPDOWN STYLES --- */
   .header--links.is-open {
      display: flex !important;
      flex-direction: column !important;
      position: absolute !important;
      top: 100% !important; 
      left: 0 !important;
      width: 100% !important;
      background: #ffffff !important;
      border-bottom: 1px solid var(--rule) !important;
      padding: 24px var(--gutter) !important;
      gap: 20px !important;
      z-index: 1000 !important;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
   }
}
@media (max-width: 768px) {
   .resume--pic-a { max-width: 200px; }
   .videos--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
   .resume--pic-a { max-width: 170px; }

}
@media (max-width: 560px) {
   .contact--links a { grid-template-columns: 1fr auto; }
   .contact--links a span:first-child { display: none; }
   .resume--pic-a { display: none; }
   .videos--grid { grid-template-columns: 1fr; }
   .videos--grid__contenedor { grid-column: 1; }
}