/* Estudio y portafolio · 5 de octubre de 2026
   Usa solo la paleta y las tipografías de Restrepo & Co (styles.css :root):
   verde #203422, verde profundo #17291d, blanco #f5f5f5, Playfair Display y Crimson Pro.
   El ritmo alterna bandas verdes y blancas; el movimiento es de aparición al hacer scroll. */

.ed{--gutter:clamp(22px,5.5vw,88px);--ease:cubic-bezier(.2,.7,.1,1);--green:var(--bg);--deep:var(--surface);--white:var(--ink)}
.ed-wrap{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Etiquetas: Crimson Pro en versalitas espaciadas, como las de la marca. */
.ed-label{font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.19em}
.ed-muted{color:var(--muted)}
.ed-light .ed-muted{color:#5d6f60}

/* Titulares */
.ed-display,.ed-display-md,.ed-display-lg{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.02}
.ed-display{font-size:clamp(50px,8.4vw,132px);max-width:13ch;margin:30px 0 0}
.ed-display-lg{font-size:clamp(40px,6vw,96px);max-width:15ch}
.ed-display-md{font-size:clamp(34px,4vw,60px);line-height:1.06}
.ed-amp{font-style:italic;font-weight:400}
.ed-lead{font-size:clamp(19px,1.6vw,23px);line-height:1.55;max-width:34em}
.ed-dark .ed-lead,.ed .ed-hero .ed-lead{color:#dfe5e0}
.ed-light .ed-lead{color:#33463a}

/* Bandas */
.ed-band{padding:clamp(72px,10vw,150px) 0}
.ed-dark{background:var(--deep);color:var(--white)}
.ed-light{background:var(--white);color:var(--green)}
.ed-light ::selection{background:var(--green);color:var(--white)}
.ed-section{padding-top:clamp(72px,10vw,150px);padding-bottom:clamp(72px,10vw,150px)}

/* Hero */
.ed-hero{padding-top:clamp(56px,9vw,130px);padding-bottom:clamp(56px,7vw,96px)}
.ed-hero-stamp{color:var(--muted)}
.ed-hero-foot{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:clamp(36px,5vw,72px);padding-top:28px;border-top:1px solid var(--line)}

/* Enlaces con flecha */
.ed-link{display:inline-flex;align-items:center;gap:10px;font-size:17px;white-space:nowrap;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--ease)}
.ed-link:hover{background-size:0 1px;background-position:100% 100%}
.ed-arrow{display:inline-block;font-family:var(--sans);font-style:normal;transition:transform .35s var(--ease)}
a:hover>.ed-arrow,button:hover .ed-arrow,a:hover .ed-arrow{transform:translateX(5px)}

/* Proyecto destacado */
.ed-media{padding:0 var(--gutter) clamp(56px,7vw,100px);max-width:1440px;margin:0 auto}
.ed-media-button{display:block;width:100%;padding:0;border:0;background:var(--deep);text-align:left;overflow:hidden}
.ed-media-button img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.ed-media-button:hover img{transform:scale(1.025)}
.ed-media-caption.ed-wrap{display:flex;justify-content:space-between;gap:20px;padding:18px 22px;max-width:none;border-top:1px solid var(--line)}

/* Trabajos */
.ed-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(36px,4vw,64px);padding-bottom:24px;border-bottom:1px solid #c9d1ca}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,80px) clamp(20px,2.4vw,40px)}
.ed-card-button{display:flex;flex-direction:column;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit}
.ed-card-media{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:var(--green);border-radius:4px;overflow:hidden}
.ed-card-media img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.ed-card-button:hover .ed-card-media img{transform:scale(1.035)}
.ed-card-meta{display:flex;justify-content:space-between;gap:16px;margin-top:20px;color:#5d6f60}
.ed-card-open{color:var(--green);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease)}
.ed-card-button:hover .ed-card-open,.ed-card-button:focus-visible .ed-card-open{opacity:1;transform:none}
.ed-card-title{font:400 clamp(26px,2.3vw,36px)/1.15 var(--serif);letter-spacing:-.025em;margin-top:12px}
.ed-card-scope{color:#5d6f60}
.ed-card-summary{font-size:18px;color:#33463a;margin-top:8px;max-width:30em}
.ed-section-foot{display:flex;gap:36px;flex-wrap:wrap;margin-top:clamp(48px,5vw,80px)}

/* Servicios */
.ed-split-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,8vw,140px);align-items:start}
.ed-split-grid h2{margin:20px 0 26px}
.ed-services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ed-services li{display:flex;align-items:baseline;gap:28px;padding:24px 0;border-bottom:1px solid var(--line);font:400 clamp(26px,2.6vw,40px)/1.15 var(--serif);letter-spacing:-.02em;transition:padding .4s var(--ease)}
.ed-services li .ed-label{color:var(--muted);min-width:2.5em}
.ed-services li:hover{padding-left:12px}

/* Método */
.ed-method h2{margin:22px 0 40px}
.ed-method-copy{margin-left:auto;max-width:30em}

/* Sobre el estudio */
.ed-about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center}
.ed-about-photo{margin:0}
.ed-about-photo img{width:100%;height:auto;border-radius:4px}
.ed-about-photo figcaption{margin-top:14px}
.ed-about-copy h2{margin:20px 0 26px}
.ed-about-copy p:not(.ed-label){font-size:19px;line-height:1.6;color:#33463a;margin-top:14px;max-width:32em}
.ed-about-copy .ed-aside{font-style:italic;font-family:var(--serif);font-size:24px;color:var(--green)}

/* Llamado final */
.ed-cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,120px);align-items:end}
.ed-cta h2{margin:20px 0 24px}
.ed-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ed-rows a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;border-bottom:1px solid var(--line);font:400 clamp(20px,1.7vw,25px)/1.3 var(--serif);overflow:hidden;isolation:isolate}
.ed-rows a:before{content:'';position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1}
.ed-rows a:hover:before{transform:scaleY(1)}
.ed-rows-light{border-color:var(--line);margin-top:48px}

/* Pie */
.ed-footer{border-top:1px solid var(--line);padding:26px 0}
.ed-footer-grid{display:flex;justify-content:space-between;gap:20px;color:var(--muted)}
.ed-footer a:hover{color:var(--white)}

/* Caso dentro del diálogo */
.ed-case .ed-display-md{font-size:clamp(38px,4.6vw,64px);margin:14px 0 20px}
.ed-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 34px;padding:0}
.ed-tags li{border:1px solid var(--line);border-radius:4px;padding:7px 12px;color:#dfe5e0;letter-spacing:.14em;font-size:11px}
.ed-case-hero{margin:0;background:var(--green);border-radius:4px;overflow:hidden}
.ed-case-hero img{width:100%;height:auto}
.ed-case-text{display:grid;grid-template-columns:1fr 1.35fr;gap:8%;margin:56px 0;padding-top:28px;border-top:1px solid var(--line)}
.ed-case-text h3{margin-bottom:18px;color:var(--muted)}
.ed-case-text p{font-size:18px;line-height:1.75;color:#dfe5e0;margin-bottom:16px}
.ed-case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ed-case-gallery figure{margin:0}
.ed-case-gallery figure:last-child:nth-child(odd){grid-column:1/-1}
.ed-case-gallery img{width:100%;height:auto;max-height:650px;object-fit:contain;background:var(--green);border-radius:4px}
.ed-case-gallery figcaption{margin-top:10px;letter-spacing:.12em;font-size:11px}

/* Encabezado del sitio en estas vistas: fijo y discreto. */
body[data-view="studio"] .site-header,body[data-view="portfolio"] .site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Movimiento. Solo cuando estudio.js marca la vista con .ed-animate. */
.ed-animate [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 120ms)}
.ed-animate [data-reveal].is-in{opacity:1;transform:none}
.ed-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .16em .12em;margin:0 -.16em -.12em}
.ed-word>span{display:inline-block}
.ed-animate .ed-split .ed-word>span{transform:translateY(108%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 70ms + 80ms)}
.ed-animate .ed-split.is-in .ed-word>span{transform:none}
.ed-animate .ed-card .ed-card-media{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease);transition-delay:calc(var(--d,0) * 120ms)}
.ed-animate .ed-card.is-in .ed-card-media{clip-path:inset(0 0 0 0)}
.ed-animate .ed-media-button img{animation:ed-settle 1.6s var(--ease) both}
@keyframes ed-settle{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
.project-dialog[open]{animation:ed-dialog .45s var(--ease) both}
@keyframes ed-dialog{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .ed *,.ed *:before{transition:none!important;animation:none!important}
  .project-dialog[open]{animation:none}
}

@media(max-width:900px){
  .ed-split-grid,.ed-cta-grid,.ed-about{grid-template-columns:1fr}
  .ed-hero-foot{flex-direction:column;align-items:start;gap:24px}
  .ed-case-text{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
  .ed-grid{grid-template-columns:1fr;gap:52px}
  .ed-section-head{flex-direction:column;align-items:start;gap:10px}
  .ed-media-caption.ed-wrap{padding:14px 16px;flex-direction:column;gap:6px}
  .ed-card-open{opacity:1;transform:none}
  .ed-services li{gap:18px;padding:20px 0}
  .ed-footer-grid{flex-direction:column;gap:8px}
  .ed-case-gallery{grid-template-columns:1fr;gap:24px}
  .ed-section-foot{flex-direction:column;gap:14px;align-items:start}
}

/* Primera pantalla centrada · 6 de octubre de 2026
   Titular, texto y enlace centrados; el proyecto destacado asoma debajo. */
.ed-hero{text-align:center;padding-top:clamp(44px,6vw,92px);padding-bottom:clamp(40px,4.5vw,64px)}
.ed-hero .ed-display{max-width:none;margin:24px auto 0;font-size:clamp(46px,7vw,116px)}
.ed-hero-foot{flex-direction:column;align-items:center;gap:22px;margin:clamp(28px,3vw,44px) auto 0;padding-top:0;border-top:0;max-width:40em}
.ed-hero-foot .ed-lead{margin:0 auto;font-size:clamp(18px,1.45vw,22px)}

/* Servicios nuevos con línea corta · 6 de octubre de 2026 */
.ed-service-body{display:flex;flex-direction:column;gap:10px}
.ed-service-note{font:400 clamp(18px,1.3vw,21px)/1.45 var(--sans);letter-spacing:0;color:var(--muted);max-width:28em;text-wrap:pretty}
.ed-new{align-self:flex-start;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);letter-spacing:.14em;font-size:11px}

/* Íconos de contacto: WhatsApp, correo e Instagram (7 de octubre de 2026). */
.ico{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.ed-ico{display:inline-flex;align-items:center;gap:.65em}
.ed-label.ed-ico .ico{width:1.35em;height:1.35em}
.ed-footer-grid{flex-wrap:wrap;row-gap:18px}
.ed-foot-contact{flex-basis:100%;display:flex;gap:6px;margin-left:-10px}
.ed-foot-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--muted);transition:color .2s}
.ed-foot-icon .ico{width:20px;height:20px}
.ed-foot-icon:hover{color:var(--white)}

/* Encabezado (7 de octubre de 2026): la casa sola a la izquierda; el estudio a la derecha. */
.site-header .home-label{display:inline-flex;align-items:center;gap:12px;padding:12px 0;font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.19em;color:var(--muted);transition:color .2s}
.site-header .home-label:hover{color:var(--ink)}
.home-arrow{font-size:15px;letter-spacing:0;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.home-label:hover .home-arrow{transform:translateX(-4px)}
.site-header nav{margin-left:auto;align-items:center;gap:clamp(24px,2.8vw,42px);font-size:15px}
.site-header nav a.nav-contact{color:var(--ink);border:1px solid var(--line);padding:9px 22px;transition:background .25s,color .25s,border-color .25s}
.site-header nav a.nav-contact:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:900px){
  .site-header{height:auto;padding:14px 5% 6px;row-gap:2px}
  .site-header nav{margin-left:0;font-size:14px;gap:12px}
  .site-header nav a.nav-contact{padding:7px 14px}
}

/* Portada en movimiento: cada diapositiva entra deslizándose de lado. */
.ed-reel-stage{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);aspect-ratio:16/9;background:var(--deep);overflow:hidden}
.ed-slide{grid-area:1/1;min-width:0;min-height:0;visibility:hidden;transform:translateX(100%);transition:transform .75s cubic-bezier(.65,0,.35,1)}
.ed-slide.is-active{visibility:visible;transform:none}
.ed-slide.is-leaving{visibility:visible}
.ed-slide>a,.ed-slide>button{display:block;width:100%;height:100%;padding:0;border:0;background:none;overflow:hidden}
.ed-reel-frame{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-template-rows:minmax(0,1fr);gap:clamp(6px,.8vw,12px);width:100%;height:100%}
.ed-reel-frame img{width:100%;height:100%;object-fit:cover}
.ed-reel-frame[style]{grid-template-columns:var(--cols)}
.ed-reel-frame picture{display:block;min-width:0;min-height:0}
.ed-reel-bar{display:flex;align-items:center;gap:20px;padding:16px 22px;border-top:1px solid var(--line);background:var(--deep)}
.ed-reel-caption{flex:1;min-width:0}
.ed-reel-controls{display:flex;align-items:center;gap:14px}
.ed-reel-dots{display:flex}
.ed-reel-dot{display:flex;align-items:center;width:30px;height:32px;padding:0 3px;border:0;background:none}
.ed-reel-dot span{display:block;width:100%;height:1px;background:var(--line);transition:background .3s,height .3s}
.ed-reel-dot:hover span{background:var(--muted)}
.ed-reel-dot[aria-pressed="true"] span{height:2px;background:var(--white)}
.ed-reel-pause{position:relative;width:32px;height:32px;padding:0;border:0;background:none;color:var(--muted)}
.ed-reel-pause:hover{color:var(--white)}
.ed-reel-pause span{position:absolute;left:12px;top:11px;width:8px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.ed-reel-pause[aria-pressed="true"] span{left:13px;width:0;height:0;border:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.ed-reel-open{border:0;background:none;padding:6px 0;color:var(--white);white-space:nowrap}
@media(max-width:600px){
  .ed-reel-stage{aspect-ratio:4/5}
  .ed-reel-frame.is-pair{grid-template-columns:1fr}
  .ed-reel-frame.is-pair>:nth-child(2){display:none}
  .ed-reel-bar{flex-wrap:wrap;padding:14px 16px;gap:6px 16px}
  .ed-reel-caption{flex-basis:100%}
  .ed-reel-controls{order:3;flex-basis:100%;justify-content:space-between}
  .ed-reel-count{display:none}
  .ed-reel-dot{width:24px}
  .ed-reel-open{order:2}
}

/* Contacto: el mismo diseño, con letra más pequeña (7 de octubre de 2026). */
.ed-cta{padding:clamp(64px,8vw,120px) 0}
.ed-cta .ed-cta-grid{align-items:center}
.ed-cta .ed-display-md{font-size:clamp(30px,3vw,44px);text-wrap:balance}
.ed-cta .ed-lead{font-size:clamp(17px,1.25vw,19px)}
.ed-rows a{padding:16px 4px;font-size:clamp(17px,1.3vw,19px)}
.ed-rows .ed-ico .ico{width:1em;height:1em}
@media(prefers-reduced-motion:reduce){.ed-slide{transition:none!important}}
