/*
Theme Name: 2PS Arquitectos
Theme URI: https://2psarquitectos.com.ar
Author: Magalí Amato
Description: Tema a medida para Parysow + Schargrodsky Arquitectos. Rediseño minimalista sobre blanco (reunión 2026-09-23).
Version: 0.2.0
Requires PHP: 7.4
Text Domain: 2ps-arquitectos
*/

:root{
  /* Blanco puro desde la reunión del 2026-09-23 (se sacó el crema del manual de marca). */
  --bg:#FFFFFF;
  --ink:#17150F;
  --ink-soft:#716C5D;
  --line:#E7E3D8;
  --accent:#AF534B;      /* rojo del brand pack (6/10, Magalí) — antes #B5473A */
  --accent-dark:#94463F; /* hover de los botones rojos (≈15% más oscuro) */
  --paper:#EFEBE2;
  --nav-h-desktop:64px;
  --nav-h-mobile:64px;
  /* Márgenes laterales del sitio — generosos (diapositiva 1: "más margen a la izquierda"). */
  --gutter:56px;
}
@media (max-width:860px){ :root{ --gutter:20px; } }

/* ---------- Tipografía real de marca ----------
   Auto-hospedada (no es un servicio externo tipo Google Fonts: son los
   mismos archivos de la clienta, servidos desde este mismo theme) porque
   Windows no trae "Helvetica Neue" instalada — sin esto, el navegador
   caía a Arial y el sitio nunca mostraba la tipografía real que pidió
   la clienta. Solo hay 3 pesos reales (Thin/Roman/Medium, sin Bold/Black):
   Medium cubre además los pesos 600-900 (títulos, botones, el "800" del
   hero) para que esos usen las formas reales de Helvetica en vez de un
   bold sintético sobre Arial — no es tan grueso como un Black real, pero
   es Helvetica de verdad. */
@font-face{font-family:'Helvetica Neue'; src:url('assets/fonts/helvetica-neue-thin.woff2') format('woff2'); font-weight:100 300; font-style:normal; font-display:swap;}
@font-face{font-family:'Helvetica Neue'; src:url('assets/fonts/helvetica-neue-roman.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Helvetica Neue'; src:url('assets/fonts/helvetica-neue-medium.woff2') format('woff2'); font-weight:500 900; font-style:normal; font-display:swap;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}
a{color:inherit; text-decoration:none;}
a:hover{color:var(--accent);}
img{max-width:100%; display:block;}
.display, h1, h2, h3{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:600; margin:0;}
p{margin:0;}

/* ---------- Tipografía de títulos — estilo de los posteos de Instagram de 2PS (reunión 2026-09-30:
   "unifiquemos, vamos por el Instagram"). Títulos grandes: Helvetica Thin en MAYÚSCULAS con interletrado
   sutil. Rótulos de sección: Roman en mayúsculas chicas. Textos corridos: Roman normal. Tokens acá para
   que todo el sitio use exactamente los mismos valores. ---------- */
:root{
  --display-weight:300;          /* Helvetica Neue Thin (el @font-face cubre 100–300) */
  --display-tracking:0.05em;
  --label-size:13px;
  --label-tracking:0.1em;
}
/* reparte las líneas de los títulos en partes parejas (nada de una palabra sola en el último renglón) */
.hero-title, .estudio-title, .page-hero-head h1, .contact-title, .obra-detail-title{text-wrap:balance;}

/* Oculto a la vista pero legible por Google y lectores de pantalla (reemplaza a los kickers). */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.container{max-width:1400px; margin:0 auto;}

/* ---------- NAV — banda de lado a lado, sin bordes redondeados ("2PS es todo cuadrado").
   Rojo sólido en TODAS las páginas (reunión 2026-09-23: "que no sea translúcido, siempre el
   mismo color fijo") y no queda fijo todo el tiempo: se esconde al bajar y vuelve al subir
   (clase .is-hidden, la maneja main.js). ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:66px; padding:0 var(--gutter); background:var(--accent);
  transition:transform .35s ease;
}
.site-nav.is-hidden{transform:translateY(-100%);}
.site-nav .logo{display:flex; align-items:center;}
.site-nav .logo img{height:46px; width:auto;} /* lockup completo (6/10): reunión 30/9 "el logo se ve muy chico" */
.site-nav .nav-links{display:flex; align-items:center; gap:6px; font-size:15px; letter-spacing:0.01em; color:rgba(255,255,255,0.8);}
.site-nav .nav-links a{padding:8px 12px;}
.site-nav .nav-links a:hover{color:#FFFFFF;}
.site-nav .nav-links a.active{color:#FFFFFF;}

body{padding-top:66px;}

.mobile-nav{display:none;}

@media (max-width:860px){
  /* Mobile: arriba queda una barra fina con el logo (la navegación está abajo). */
  .site-nav{height:52px;}
  .site-nav .logo img{height:36px;}
  .site-nav .nav-links{display:none;}
  body{padding-top:52px;}
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:var(--accent); justify-content:space-around; align-items:center;
    padding:6px 0 calc(8px + env(safe-area-inset-bottom));
    transition:transform .35s ease;
  }
  .mobile-nav.is-hidden{transform:translateY(100%);}
  /* extensión roja por debajo (6/10): en algunos teléfonos, por redondeo de píxeles o al
     esconderse la barra del navegador, quedaba 1–2px de página visible debajo de la barra */
  .mobile-nav::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px; background:var(--accent);}
  .mobile-nav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:44px; min-height:44px; color:rgba(255,255,255,0.72); font-size:9.5px; padding:4px 8px;}
  .mobile-nav a.active{color:#FFFFFF;}
  body{padding-bottom:72px;}
}

/* ---------- Botón flotante de WhatsApp — cuadrado (sin círculos), siempre visible ---------- */
.whatsapp-float{
  position:fixed; z-index:200; bottom:24px; right:24px;
  width:52px; height:52px;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.whatsapp-float:hover{background:var(--accent-dark);}
/* "Volver arriba" (6/10): mismo tamaño que el de WhatsApp, justo encima, en blanco con la flecha en
   negro (para no sumar otro bloque rojo). Aparece recién después de bajar una pantalla (main.js). */
.to-top{
  position:fixed; z-index:200; bottom:84px; right:24px;
  width:52px; height:52px; padding:0; border:none; cursor:pointer;
  background:#FFFFFF; color:var(--ink); box-shadow:0 4px 18px rgba(23,21,15,.12);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, color .2s ease;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none;}
.to-top:hover{color:var(--accent);}
.to-top svg{width:20px; height:20px;}
.whatsapp-float svg{width:24px; height:24px; fill:#FFFFFF;}
@media (max-width:860px){
  .whatsapp-float{bottom:84px; right:14px; width:46px; height:46px;}
  .whatsapp-float svg{width:21px; height:21px;}
  .to-top{bottom:138px; right:14px; width:46px; height:46px;}
}

/* ---------- HERO (inicio) — foto a pantalla completa y solo el nombre de la obra en blanco
   (diapositiva 1). En mobile no ocupa toda la pantalla: deja asomar las destacadas para
   que se entienda que hay más abajo y haya que scrollear menos. ---------- */
.hero{position:relative; height:calc(100vh - 66px); height:calc(100svh - 66px); min-height:460px; overflow:hidden; background:var(--ink);}
.hero .hero-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease;}
.hero .hero-slide.is-active{opacity:1;}
/* Sombra muy suave solo abajo, para que el nombre se lea sobre cualquier foto. */
/* Velo gris abajo (reunión 30/9: con la letra fina "hay que ponerle un transparente gris"): degradé sin bordes, no un recuadro. */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70%; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.55) 100%);}
.hero-copy{position:absolute; z-index:2; left:var(--gutter); right:calc(var(--gutter) + 90px); bottom:40px; color:#FFFFFF;}
/* La frase, en una sola línea en desktop (reunión 30/9: "más chiquita… que sea una línea, más sutil"). */
.hero-title{font-size:clamp(24px, 2.8vw, 44px); font-weight:var(--display-weight); text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:1.15; color:#FFFFFF;}
.hero-name{display:inline-block; margin-top:18px; color:rgba(255,255,255,0.88); font-size:15px; font-weight:400; letter-spacing:0.01em; transition:opacity .6s ease;}
.hero-name:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
.hero .hero-dots{position:absolute; right:var(--gutter); bottom:46px; z-index:2; display:flex; gap:6px;}
.hero .hero-dots span{width:18px; height:2px; background:rgba(255,255,255,0.4); display:block;}
.hero .hero-dots span.is-active{background:#FFFFFF;}

@media (max-width:860px){
  .hero{height:72vh; height:72svh; min-height:380px;}
  .hero-copy{bottom:26px; right:var(--gutter);}
  .hero-title{font-size:clamp(24px, 7.2vw, 32px);}
  .hero-name{margin-top:12px; font-size:13px;}
  .hero .hero-dots{bottom:32px;}
}

/* ---------- Secciones genéricas ---------- */
.section{padding:64px var(--gutter) 24px;}
.section h2{font-size:var(--label-size); font-weight:400; text-transform:uppercase; letter-spacing:var(--label-tracking);}
.block-title{font-size:var(--label-size); font-weight:400; text-transform:uppercase; letter-spacing:var(--label-tracking); margin-bottom:14px;}
.section-more{padding:8px var(--gutter) 40px;}
@media (max-width:860px){ .section{padding:36px var(--gutter) 16px;} .section h2{font-size:12px;} .section-more{padding:4px var(--gutter) 8px;} }

/* Link de texto sin recuadro — se "activa" al hover (reunión 2026-09-23). */
.link-more{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); padding:6px 0; background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .3s ease, color .2s ease;}
.link-more::after{content:"\2192";}
.link-more:hover{color:var(--ink); background-size:100% 1px;}

/* ---------- Encabezado de página (Proyectos, Publicaciones, Contacto, Estudio) ---------- */
@keyframes ps2FadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.page-hero-head{animation:ps2FadeUp .6s ease both;}
.page-hero-head h1, .page-hero-head h2{font-size:clamp(24px, 2.6vw, 38px); font-weight:var(--display-weight); text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:1.15;}
@media (prefers-reduced-motion: reduce){ .page-hero-head{animation:none;} }

/* ---------- Tarjeta de obra — solo foto + nombre (reunión 2026-09-23).
   El nombre va SOBRE la foto, abajo a la izquierda, en blanco con una sombra suave
   (mismo lenguaje que el hero). Con mouse aparece al pasar por encima; en pantallas
   táctiles queda siempre visible (no hay hover). 4 columnas en desktop, 2 en mobile. ---------- */
.obra-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:0 var(--gutter) 24px;}
.obra-card{display:block; position:relative; min-width:0; color:#FFFFFF;}
.obra-card[hidden]{display:none;}
.obra-grid-empty{grid-column:1 / -1; padding:8px 0 40px; font-size:14px; color:var(--ink-soft);}
.obra-card:hover{color:#FFFFFF;}
.obra-card-photo{position:relative; aspect-ratio:4/3; overflow:hidden; background:#F2F2F0;}
.obra-card-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.obra-card-photo::after{content:""; position:absolute; left:0; right:0; bottom:0; height:60%; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); transition:opacity .35s ease;}
.obra-card-name{position:absolute; left:12px; right:12px; bottom:10px; z-index:1; font-size:12.5px; font-weight:500; line-height:1.3; letter-spacing:0.01em; text-shadow:0 1px 8px rgba(0,0,0,0.25); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:opacity .3s ease, transform .3s ease;}
/* Obra sin foto: el nombre centrado sobre gris muy claro, sin sombra. */
.obra-card--sin-foto .obra-card-photo{display:flex; align-items:center; justify-content:center; padding:16px; text-align:center;}
.obra-card--sin-foto .obra-card-photo::after{display:none;}
.obra-card-placeholder{font-size:13px; color:var(--ink-soft);}
.obra-card--sin-foto .obra-card-name{width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

@media (hover:hover) and (pointer:fine){
  .obra-card-name{left:16px; right:16px; bottom:14px; font-size:14px; opacity:0; transform:translateY(6px);}
  .obra-card-photo::after{opacity:0;}
  .obra-card:hover .obra-card-photo img, .obra-card:focus-visible .obra-card-photo img{transform:scale(1.03);}
  .obra-card:hover .obra-card-photo::after, .obra-card:focus-visible .obra-card-photo::after,
  .obra-card:hover .obra-card-name, .obra-card:focus-visible .obra-card-name{opacity:1; transform:none;}
}
@media (max-width:1100px){ .obra-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:860px){ .obra-grid{grid-template-columns:repeat(2,1fr); gap:8px;} }
@media (prefers-reduced-motion: reduce){ .obra-card-photo img, .obra-card-name, .obra-card-photo::after{transition:none;} }

/* ---------- Instagram (Inicio) — 4 posts en formato 4:5 (el de Instagram, así no se recortan los textos),
   del mismo ancho que una tarjeta de obra: alineada con la grilla de 4 de destacadas (reunión 30/9).
   Mobile: tira que se desliza de costado, cada post grande (78% del ancho) para que se lean las placas,
   asomando el siguiente — en 3 columnas de ~120px no lucían (Magalí 30/9). ---------- */
.ig-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px;}
.ig-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:0 var(--gutter) 64px;}
.ig-post{position:relative; display:block; min-width:0; aspect-ratio:4/5; overflow:hidden; background:#F2F2F0; color:#FFFFFF;}
.ig-post img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.ig-post::after{content:""; position:absolute; left:0; right:0; bottom:0; height:50%; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); opacity:0; transition:opacity .35s ease;}
.ig-post-label{position:absolute; left:16px; bottom:14px; z-index:1; font-size:14px; font-weight:500; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;}
.ig-post:hover{color:#FFFFFF;}
.ig-foot{display:none;}
.ig-post:hover img{transform:scale(1.03);}
.ig-post:hover::after, .ig-post:hover .ig-post-label, .ig-post:focus-visible .ig-post-label{opacity:1; transform:none;}
@media (max-width:860px){
  /* Opción A del croquis (Magalí 30/9): 2 por línea, los 4 posteos, y el perfil debajo */
  .ig-grid{grid-template-columns:repeat(2, 1fr); gap:8px; padding-bottom:12px;}
  .ig-head .link-more{display:none;}
  .ig-foot{display:block; padding:0 var(--gutter) 36px;}
  .ig-post-label{display:none;}
}

/* ---------- Publicaciones — índice (estilo Adamo-Faiden, reunión 2026-09-23) ----------
   Una línea por nota: año + título. Desktop: la tapa 4:3 aparece al pasar el mouse, fija
   a la derecha. Mobile: la tapa va chica (4:3) al costado de cada fila. */
.pub-index{padding:0 var(--gutter) 40px;}
.pub-index-list{list-style:none; margin:0; padding:0; max-width:1100px;}
.pub-index-list li[hidden]{display:none;}
/* Más delicada (Magalí 30/9): letra más chica y liviana, filas más finas; misma idea de índice. */
.pub-row{display:grid; grid-template-columns:72px minmax(0,1fr); gap:24px; align-items:baseline; padding:8px 0; font-size:14.5px; font-weight:400; letter-spacing:0.01em; line-height:1.4; color:var(--ink); transition:color .25s ease;}
.pub-row-year{font-size:13px; color:var(--ink); font-weight:400; font-variant-numeric:tabular-nums;}
.pub-row-thumb{display:none;}
.pub-index-empty{font-size:14px; color:var(--ink-soft); padding:8px var(--gutter) 40px;}
.pagination-wrap{display:flex; gap:12px; padding:0 var(--gutter) 40px;}

@media (hover:hover) and (pointer:fine) and (min-width:861px){
  /* min-height = alto de una tapa (ancho × 4/3) + padding: con pocos resultados la tapa no pisa el footer */
  .pub-index{position:relative; min-height:calc(min(20vw, 300px, 48vh) * 4 / 3 + 40px);}
  .pub-index-list:hover .pub-row{color:rgba(23,21,15,0.3);}
  .pub-index-list .pub-row:hover{color:var(--ink);}
  /* la tapa de la fila activa aparece fija a la derecha de la pantalla */
  .pub-row-thumb{display:block; position:fixed; right:var(--gutter); top:50%; width:min(20vw, 300px, 48vh); aspect-ratio:3/4; transform:translateY(-40%); opacity:0; pointer-events:none; transition:opacity .25s ease; background:#F2F2F0; z-index:3;}
  .pub-row-thumb img{width:100%; height:100%; object-fit:cover;}
  .pub-row:hover .pub-row-thumb{opacity:1;}
  .pub-index-list{max-width:calc(100% - min(26vw, 360px) - 48px);}
}
@media (max-width:860px){
  .pub-row{grid-template-columns:40px minmax(0,1fr) 48px; gap:14px; align-items:center; padding:9px 0; font-size:14px;}
  .pub-row-year{font-size:12px;}
  .pub-row-thumb{display:block; width:48px; aspect-ratio:4/3; overflow:hidden; background:#F2F2F0;}
  .pub-row-thumb img{width:100%; height:100%; object-fit:cover;}
}

/* ---------- Detalle de Publicación — usa el mismo diseño que el detalle de obra (.obra-detail…,
   Magalí 30/9: "que sea consistente"); acá solo lo propio: los links al PDF. ---------- */
.pub-detail-links{display:flex; gap:28px; margin-top:18px;}
/* una sola imagen (la tapa): en mobile el escenario toma el alto de la tapa — el alto fijo del detalle
   de obra es para que las fotos no salten al pasarlas, acá no hay nada que pasar */
@media (max-width:860px){
  .pub-detail .obra-detail-images{height:auto;}
  .pub-detail .obra-detail-figure{height:auto;}
  .pub-detail .obra-detail-figure img{max-height:calc(100svh - 200px);}
}

/* ---------- Buscador desplegable (Proyectos, Publicaciones) — oculto hasta que el usuario lo pide
   (reunión 2026-09-23). El botón "Buscar" queda alineado a la derecha del título. ---------- */
.listing-head{position:relative;}
.fu-toggle > summary{list-style:none;}
.fu-toggle > summary::-webkit-details-marker{display:none;}
.fu-toggle-btn{position:absolute; right:var(--gutter); top:64px; height:48px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); cursor:pointer; user-select:none; padding:0 2px;}
.fu-toggle-btn:hover{color:var(--accent);}
.fu-toggle[open] > .fu-toggle-btn{color:var(--accent);}
.fu-count{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:var(--accent); color:#FFFFFF; font-size:11px;}
.fu-toggle[open] .filter-panel{animation:ps2FadeUp .25s ease both;}
@media (max-width:860px){ .fu-toggle-btn{top:30px; height:44px; right:calc(var(--gutter) - 2px);} }

/* Panel de filtros: sin cajas ni bordes. Desktop (6/10): una fila del mismo ancho que la grilla
   (del borde izquierdo de la primera tarjeta al derecho de la última): el buscador se estira y los
   desplegables (rótulo arriba) son angostos. Mismo alto y misma línea inferior en todos, así las
   líneas quedan a la misma altura. Mobile: apilado, la lista se abre en el lugar. */
.filter-panel{position:relative; z-index:20; margin:0 var(--gutter) 40px; display:flex; align-items:flex-end; gap:24px 32px;}
.fu-search{box-sizing:border-box; height:40px; display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; border-bottom:1px solid var(--ink); color:var(--ink-soft);}
.fu-search-submit{display:flex; align-items:center; justify-content:center; flex:none; width:40px; height:100%; padding:0; border:0; background:none; color:inherit; cursor:pointer;}
.fu-search-submit:hover{color:var(--accent);}
.fu-search-submit:focus-visible{outline:1px solid var(--ink); outline-offset:2px;}
.fu-search input{flex:1; min-width:0; border:none; outline:none; background:none; padding:0; font:inherit; font-size:15px; color:var(--ink); -webkit-appearance:none; appearance:none;}
.fu-search input::placeholder{color:var(--ink-soft);}
.fu-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.fp-rows{margin:0; flex:none; display:flex; align-items:flex-end; gap:24px 32px;}
.fp-row{display:block;}
.fp-label{display:block; margin-bottom:2px; font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:var(--label-tracking); color:var(--ink-soft);}
.fp-row dd{margin:0;}
.fp-drop{position:relative; width:170px;}
.fp-drop > summary{list-style:none;}
.fp-drop > summary::-webkit-details-marker{display:none;}
.fp-drop-btn{box-sizing:border-box; height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--ink); font-size:15px; color:var(--ink-soft); cursor:pointer; user-select:none;}
.fp-drop-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fp-drop-btn.is-set{color:var(--ink);}
.fp-drop-btn::after{content:""; flex:none; width:12px; height:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317150F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center; transition:transform .2s ease;}
.fp-drop[open] > .fp-drop-btn::after{transform:rotate(180deg);}
.fp-drop-btn:hover{color:var(--ink);}
/* la lista se abre en blanco, sin recuadro; el texto queda alineado con el del botón */
.fp-drop-list{position:absolute; top:100%; left:-16px; z-index:30; width:max-content; min-width:calc(100% + 32px); max-width:360px; max-height:min(360px, 60vh); overflow:auto; margin:0; padding:8px 0; list-style:none; background:#FFFFFF; box-shadow:0 10px 30px rgba(23,21,15,.10); animation:ps2FadeUp .18s ease both;}
.fp-drop-list a{display:block; padding:7px 16px; font-size:15px; line-height:1.4; color:var(--ink-soft); transition:color .15s ease;}
.fp-drop-list a:hover{color:var(--ink);}
.fp-drop-list a.active{color:var(--ink);}
/* "Limpiar filtros" debajo, a la derecha: no rompe el rectángulo de la fila */
.fp-clear{position:absolute; right:0; top:100%; margin-top:6px; white-space:nowrap; padding:4px 0; font-size:13px; line-height:1.4; color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;}
.fp-clear:hover{color:var(--ink);}
/* Tablet: el buscador arriba a todo el ancho y los desplegables en columnas parejas debajo */
@media (min-width:861px) and (max-width:1240px){
  .filter-panel{display:grid; row-gap:20px;}
  .fp-rows{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:32px;}
  .fp-drop{width:100%;}
}
@media (max-width:860px){
  .filter-panel{margin-bottom:28px; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:14px;}
  .fu-search{flex:none; width:auto; height:44px;}
  .fu-search-submit{width:44px;}
  .fp-rows{display:grid; gap:14px;}
  .fp-drop{width:100%;}
  .fp-drop-btn{height:44px;} /* área táctil ≥ 44px */
  .fp-drop-list{position:static; width:auto; min-width:0; max-width:none; max-height:none; padding:4px 0 8px; box-shadow:none; left:auto;}
  .fp-drop-list a{padding:10px 0;}
  .fp-clear{position:static; align-self:flex-start; margin-top:0;}
}

/* ---------- Footer — compacto y sobre blanco (reunión 2026-09-23) ---------- */
.site-footer{padding:56px var(--gutter) 32px; font-size:13px; color:var(--ink-soft);} /* todo el footer a 13px (6/10) */
.site-footer a{color:var(--ink-soft);}
.site-footer a:hover{color:var(--ink);}
.site-footer-row{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.site-footer-row:first-child{padding-right:72px;} /* lugar para la flecha "volver arriba" */
.site-footer-row--meta{margin-top:28px; align-items:baseline; padding-right:72px;} /* lugar para el botón flotante de WhatsApp */
.site-footer-logo img{height:48px; width:auto;}
.site-footer-nav{display:flex; gap:28px; flex-wrap:wrap;}
.site-footer-nav a{color:var(--ink);}
.site-footer-contact{font-style:normal; display:flex; gap:24px; flex-wrap:wrap;}
.site-footer-copy{font-size:13px;}
/* Mobile (Magalí 30/9: la columna larga obligaba a scrollear): mismo orden que desktop pero compacto.
   Logo → navegación en una línea → contacto en línea (se acomoda solo en 2 renglones) → ©.
   El © queda a la izquierda y el lado derecho libre para el botón flotante de WhatsApp. */
@media (max-width:860px){
  .site-footer{padding:32px var(--gutter) 24px; font-size:13px;}
  .site-footer-row{flex-direction:column; align-items:flex-start; gap:16px;}
  .site-footer-logo img{height:38px;}
  .site-footer-nav{gap:8px 18px; font-size:13px;}
  .site-footer-row:first-child{padding-right:0;}
  .site-footer-row--meta{margin-top:18px; gap:14px; padding-right:64px;}
  /* todos los datos en una sola lista, mismo espaciado (Magalí 30/9: "que quede prolijo") */
  .site-footer-contact{flex-direction:column; gap:6px; line-height:1.5;}
}

/* ---------- Paginación (Proyectos, Publicaciones) — sin recuadros ---------- */
.page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:40px; padding:0 6px; font-size:13.5px; color:var(--ink-soft); transition:color .15s ease;}
a.page-numbers:hover{color:var(--ink);}
.page-numbers.current{color:var(--ink); box-shadow:inset 0 -1px 0 var(--ink);}
.page-numbers.dots{color:var(--ink-soft);}
.page-numbers.next, .page-numbers.prev{color:var(--ink);}

/* ---------- Detalle de obra (reuniones 23/9 y 30/9) ----------
   Datos a la izquierda, una imagen a la vez a la derecha: entera (sin recortar), sobre blanco,
   centrada por el ancho y alineada arriba con el título. Las flechas quedan FUERA de la foto
   (en el espacio entre columnas y en el margen derecho) para no "hacerle ruido". El contador
   "2 / 28" va en la columna de datos con su base al ras de la base de la foto (main.js).
   Mobile: datos arriba, foto a lo ancho, y debajo el contador + flechas (también se desliza). */
.obra-detail{--stage-h:calc(100vh - 66px - 72px); --col-gap:56px; position:relative; display:grid; grid-template-columns:minmax(240px, 300px) minmax(0, 1fr); gap:var(--col-gap); padding:36px var(--gutter) 36px;}
.obra-detail-info{max-height:var(--stage-h); overflow:auto; scrollbar-width:none;}
.obra-detail-info::-webkit-scrollbar{display:none;}
.obra-detail-back{display:inline-block; font-size:13px; color:var(--ink); margin-bottom:24px;}
.obra-detail-title{font-size:clamp(20px, 1.8vw, 26px); font-weight:var(--display-weight); text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:1.2;}
.obra-detail-loc{font-size:13px; color:var(--ink); margin-top:8px;}
/* Ficha: rótulo y valor del mismo tamaño y peso (30/9: "que sea todo igual") — cambia solo el color. */
.ficha-list{margin:20px 0 0; display:flex; flex-wrap:wrap; gap:10px 24px;}
.ficha-list dt{font-size:13px; line-height:1.4; color:var(--ink);}
.ficha-list dd{margin:0; font-size:13px; font-weight:400; line-height:1.4; color:var(--ink);}
.obra-detail-memoria{margin-top:18px; font-size:13px; line-height:1.7; color:var(--ink);}
.obra-detail-memoria p{margin:0 0 1em;}
.obra-detail-memoria p:last-child{margin-bottom:0;}
/* Links dentro de la descripción (videos, notas): subrayado fino siempre visible + flecha, sin recuadro. */
.obra-detail-memoria a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color .2s ease;}
.obra-detail-memoria a[target="_blank"]::after{content:"\2197"; margin-left:3px;}
.obra-detail-memoria a:hover{color:var(--accent);}
/* "Leer más": main.js lo activa solo si el texto es largo. */
.obra-detail-memoria.is-collapsed{max-height:8.5em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent);}
.memoria-toggle{align-self:flex-start; margin-top:6px; padding:6px 0; background:none; border:none; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;}

.obra-detail-stage{position:relative; min-width:0;}
.obra-detail-images{display:flex; height:var(--stage-h); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; outline:none;}
.obra-detail-images::-webkit-scrollbar{display:none;}
.obra-detail-figure{flex:0 0 100%; height:100%; margin:0; display:flex; justify-content:center; align-items:flex-start; scroll-snap-align:start; scroll-snap-stop:always;}
.obra-detail-zoom{display:block; line-height:0; cursor:zoom-in;}
.obra-detail-figure img{display:block; width:auto; height:auto; max-width:100%; max-height:var(--stage-h);}
.obra-detail-empty{font-size:14px; color:var(--ink-soft); padding:40px 0;}

/* Flechas del escenario: afuera de la foto, centradas en la altura de la foto visible. */
.obra-stage-arrow{position:absolute; top:calc(var(--stage-h) / 2); transform:translateY(-50%); z-index:2; width:44px; height:64px; display:flex; align-items:center; justify-content:center; padding:0; border:none; cursor:pointer; background:none; color:var(--ink); transition:color .15s ease;}
.obra-stage-arrow:hover{color:var(--accent);}
.obra-stage-arrow[hidden]{display:none;}
.obra-stage-prev{left:calc(var(--col-gap) * -1 + 6px);}
.obra-stage-next{right:calc(var(--gutter) * -1 + 6px);}

/* Contador (desktop): en la columna de datos; main.js le da la posición vertical. */
.obra-detail-nav{position:absolute; left:var(--gutter); top:0; width:300px; visibility:hidden;}
.obra-detail-nav.is-placed{visibility:visible;}
.obra-detail-count{margin:0; font-size:13px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;}
.count-baseline{display:inline-block; width:0; height:0; vertical-align:baseline;}
.obra-nav-btn{display:none;}

@media (max-width:860px){
  .obra-detail{--stage-h:auto; grid-template-columns:1fr; gap:0; padding:0 0 28px;}
  .obra-detail-info{max-height:none; overflow:visible; padding:20px var(--gutter) 20px;}
  .obra-detail-back{margin-bottom:14px;}
  .ficha-list{margin-top:14px; gap:6px 20px;}
  .obra-detail-memoria{margin-top:14px;}
  .obra-detail-memoria.is-collapsed{max-height:5.1em;}
  /* Una foto a la vez en un escenario de ALTO FIJO, centrada vertical y horizontalmente: al pasar
     de una horizontal a una vertical la foto no sube ni baja (Magalí 30/9). El escenario entra en la
     pantalla junto con los datos, el contador y las barras de arriba y abajo. */
  /* alto: lo que entra en pantalla, pero nunca más que una foto vertical 4:5 a lo ancho (menos blanco sobrante) */
  .obra-detail{--m-stage:max(300px, min(calc(100vh - 380px), calc((100vw - 2 * var(--gutter)) * 1.25))); --m-stage:max(300px, min(calc(100svh - 380px), calc((100vw - 2 * var(--gutter)) * 1.25)));}
  .obra-detail-images{height:var(--m-stage); margin:0 var(--gutter);}
  .obra-detail-figure{height:100%; align-items:center;}
  .obra-detail-zoom{max-height:100%;}
  .obra-detail-figure img{max-width:100%; max-height:var(--m-stage);}
  .obra-stage-arrow{display:none !important;}
  /* contador y flechas juntos a la izquierda (a la derecha los taparía el botón de WhatsApp) */
  .obra-detail-nav{position:static; width:auto; visibility:visible; display:flex; align-items:center; margin:4px var(--gutter) 0 calc(var(--gutter) - 19px);} /* el trazo de la flecha "‹" al ras del borde del texto */
  .obra-nav-btn{width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:none; background:none; color:var(--ink); cursor:pointer;}
  .obra-nav-btn:disabled{opacity:.25; cursor:default;}
}
@media (hover:none) and (min-width:861px){ .obra-stage-arrow{display:none;} }

/* ---------- Lightbox (ampliar imagen) — sobre blanco ---------- */
.obra-lightbox{position:fixed; inset:0; z-index:300; background:#FFFFFF; display:flex; align-items:center; justify-content:center;}
.obra-lightbox[hidden]{display:none;}
.obra-lightbox-img{max-width:92vw; max-height:90vh; object-fit:contain;}
.obra-lightbox-close, .obra-lightbox-prev, .obra-lightbox-next{position:absolute; background:none; border:none; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color .15s ease;}
.obra-lightbox-close{top:16px; right:16px; width:48px; height:48px;}
.obra-lightbox-prev, .obra-lightbox-next{top:50%; transform:translateY(-50%); width:52px; height:72px; font-size:36px; font-weight:300;}
.obra-lightbox-prev{left:8px;}
.obra-lightbox-next{right:8px;}
.obra-lightbox-close:hover, .obra-lightbox-prev:hover, .obra-lightbox-next:hover{color:var(--accent);}

/* ---------- Panel de obra encima del listado (se abre desde las tarjetas) ---------- */
.obra-dialog{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:none; background:var(--bg); color:var(--ink); overflow-y:auto; overscroll-behavior:contain;}
.obra-dialog::backdrop{background:rgba(255,255,255,0.9);}
.obra-dialog[open]{animation:ps2DialogIn .3s ease both;}
@keyframes ps2DialogIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.obra-dialog .obra-detail-back{display:none;}
.obra-dialog .obra-detail{--stage-h:calc(100vh - 136px); padding-top:72px;}
.obra-dialog-close{position:fixed; top:16px; right:calc(var(--gutter) - 12px); z-index:5; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.92); border:none; cursor:pointer; color:var(--ink);}
.obra-dialog-close:hover{color:var(--accent);}
.obra-dialog-loading{padding:120px var(--gutter); font-size:14px; color:var(--ink-soft);}
body.has-dialog{overflow:hidden;}
@media (max-width:860px){
  .obra-dialog .obra-detail{padding-top:0;}
  .obra-dialog .obra-detail-info{padding-top:64px;}
  .obra-dialog-close{top:8px; right:8px;}
}
@media (prefers-reduced-motion: reduce){ .obra-dialog[open]{animation:none;} }

/* ---------- Estudio — croquis 30/9 aprobado ----------
   Hero con la foto de una obra terminada (título fino + datos grandes), después filas con el rótulo
   a la izquierda (3/11) y el contenido a la derecha (8/11): Quiénes somos y El equipo (video). */
.estudio-hero{position:relative; height:calc(100vh - 66px); height:calc(100svh - 66px); min-height:520px; overflow:hidden; background:var(--ink);}
.estudio-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.estudio-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70%; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.55) 100%);}
.estudio-hero-copy{position:absolute; z-index:2; left:var(--gutter); right:calc(var(--gutter) + 72px); bottom:44px; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; color:#FFFFFF;}
.estudio-title{font-size:clamp(24px, 2.8vw, 44px); font-weight:var(--display-weight); text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:1.15; color:#FFFFFF; max-width:30ch;}
.estudio-hero .hero-name{margin-top:18px;}
.estudio-datos{margin:0; display:flex; gap:56px; flex-shrink:0;}
.estudio-dato-num{font-size:clamp(52px, 6vw, 92px); font-weight:var(--display-weight); letter-spacing:0; line-height:0.9; font-variant-numeric:tabular-nums;}
.estudio-dato-txt{margin:10px 0 0; font-size:15px; color:#FFFFFF;}
/* tres datos (devolución 28/10: +100 / +50 / +786.289 m²): números algo más chicos para que entren junto al título */
.estudio-datos--3{gap:48px;}
.estudio-datos--3 .estudio-dato-num{font-size:clamp(40px, 4.2vw, 72px);}

.estudio-label{font-size:var(--label-size); font-weight:400; color:var(--ink); text-transform:uppercase; letter-spacing:var(--label-tracking);}
.estudio-row{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); column-gap:24px;}
.estudio-quienes{padding-top:120px; padding-bottom:104px;}
/* Una sola columna, justificada y al ancho del video (6/10, "más limpio"): el primer párrafo
   como bajada en la letra fina de los títulos y el resto en Roman (se probó todo en Thin y no convenció). */
.estudio-body{text-align:justify;}
.estudio-body p{margin:0; font-size:15px; line-height:1.75; color:var(--ink);}
.estudio-body p + p{margin-top:1.1em;}
.estudio-body p:first-child{font-size:clamp(20px, 1.7vw, 24px); font-weight:var(--display-weight); line-height:1.45; margin-bottom:1.6em; text-align:left;} /* la bajada a la izquierda (6/10): al lado del video vertical, justificada abría huecos */
.estudio-quienes .memoria-toggle{justify-self:start; min-height:44px;}

.estudio-equipo{padding-top:0; padding-bottom:88px;}
.video-facade{position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; padding:0; border:none; cursor:pointer; background:#2A2720; overflow:hidden;}
.video-facade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.9; transition:opacity .3s ease;}
.video-facade:hover img{opacity:1;}
.video-facade--pending{cursor:default;}
.video-play{position:relative; z-index:1; width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:#FFFFFF; color:var(--ink);}
.video-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
/* Video de la obra = última diapositiva del carrusel (6/11): mismo lugar y tamaño máximo que una
   foto (entra entero en el escenario), 16:9 o 9:16 si el link es un Short. */
.obra-video{flex:none; width:min(100%, calc(var(--stage-h) * 16 / 9)); aspect-ratio:16/9;}
.obra-video.obra-video--v{width:min(100%, calc(var(--stage-h) * 9 / 16)); aspect-ratio:9/16;}
@media (max-width:860px){
  .obra-video{width:min(100%, calc(var(--m-stage) * 16 / 9));}
  .obra-video.obra-video--v{width:min(100%, calc(var(--m-stage) * 9 / 16));}
}
.estudio-more{margin-top:44px;}
/* Video vertical del equipo (6/10: las tomas son verticales) — dos columnas, cada una con su rótulo
   arriba a la misma altura: "QUIÉNES SOMOS" + texto (desde el margen izquierdo, se estira) y
   "EL EQUIPO" + video 9:16 (borde derecho = margen de la página). "Ver proyectos" bajo el texto. */
.estudio-video{margin:0;}
/* 9/10: debajo del texto, las fotos de los socios. Rótulos arriba a la misma altura y la base de
   las fotos = la base del video → título, texto, fotos y video forman un solo rectángulo. El video
   se estira si la columna izquierda es más alta (mínimo: su 9:16). "Ver proyectos" queda debajo. */
.estudio-duo{--vid-w:clamp(280px, 28vw, 460px); padding-top:120px; padding-bottom:104px; display:grid; grid-template-columns:minmax(0,1fr) var(--vid-w); grid-template-areas:"l1 l2" "tx vi" "so vi" "mo ."; grid-template-rows:auto auto 1fr auto; column-gap:96px; row-gap:24px; align-items:start;}
.estudio-socios{grid-area:so; align-self:end; list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;}
.estudio-socios img{display:block; width:100%; height:auto; aspect-ratio:4/5;}
/* hover (9/10): mismo lenguaje que las tarjetas de obra — zoom suave dentro del recuadro y las
   otras dos se atenúan (como el índice de Publicaciones). Solo con mouse. */
.estudio-socios li{position:relative; overflow:hidden; transition:opacity .4s ease;}
.estudio-socios li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:35%; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.45));}
.estudio-socio-name{position:absolute; z-index:1; left:12px; right:12px; bottom:10px; color:#FFFFFF; font-size:13px; line-height:1.3;}
.estudio-socios img{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
@media (hover:hover) and (pointer:fine){
  .estudio-socios:has(li:hover) li:not(:hover){opacity:.45;} /* con :has, el hueco entre fotos no atenúa las tres */
  .estudio-socios li:hover img{transform:scale(1.04);}
}
@media (prefers-reduced-motion: reduce){ .estudio-socios li, .estudio-socios img{transition:none;} }
.estudio-duo .estudio-video{align-self:stretch; min-height:calc(var(--vid-w) * 16 / 9); display:flex;}
.estudio-duo .estudio-video .video-facade{height:auto; aspect-ratio:auto; flex:1;}
.estudio-row .estudio-socios{margin-top:48px;}
.estudio-duo-l1{grid-area:l1;}
.estudio-duo-l2{grid-area:l2;}
.estudio-duo-text{grid-area:tx;}
.estudio-duo .estudio-video{grid-area:vi;}
.estudio-duo .estudio-more{grid-area:mo; margin-top:24px;}
.estudio-duo .memoria-toggle{justify-self:start; min-height:44px;}
.estudio-video--v .video-facade{aspect-ratio:9/16;}
@media (min-width:861px) and (max-width:1100px){
  .estudio-duo{--vid-w:clamp(240px, 34vw, 360px); column-gap:48px;}
  .estudio-socios{gap:10px;}
}

@media (max-width:860px){
  /* Mobile (30/10, "muy cargada"): sobre la foto queda solo el título; los datos pasan debajo,
     sobre blanco y en negro, más chicos. Sin el nombre de la obra. */
  .estudio-hero{--m-img:58svh; height:auto; min-height:0; overflow:visible; background:var(--bg);}
  .estudio-hero-img{position:relative; display:block; height:58vh; height:var(--m-img); min-height:340px;}
  .estudio-hero::after{top:0; bottom:auto; height:58vh; height:var(--m-img); min-height:340px; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);}
  .estudio-hero-copy{position:static; display:block; color:var(--ink);}
  .estudio-hero-text{position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:auto; top:0; height:58vh; height:var(--m-img); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:22px;}
  .estudio-hero .hero-name{display:none;}
  .estudio-title{font-size:clamp(19px, 5.4vw, 24px); line-height:1.25;}
  .estudio-datos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding:28px var(--gutter) 4px;}
  .estudio-dato-num{font-size:clamp(30px, 9vw, 38px); line-height:1;}
  .estudio-dato-txt{font-size:13px; margin-top:6px; color:var(--ink);}
  /* con tres datos: +100 y +50 en una fila, los m² debajo a todo el ancho */
  .estudio-datos--3{row-gap:20px;}
  .estudio-datos--3 .estudio-dato-num{font-size:clamp(30px, 9vw, 38px);}
  .estudio-datos--3 > div:nth-child(3){grid-column:1 / -1;}
  .estudio-label{font-size:12px;}
  .estudio-row{grid-template-columns:1fr; row-gap:14px;}
  .estudio-quienes{padding-top:44px; padding-bottom:36px;}
  /* justificado también en mobile (6/10), con guiones en castellano donde el navegador los soporta
     (Android/iOS; Chrome de Windows no). La frase grande va a la izquierda: a 20px en una columna
     angosta, justificada abre huecos enormes ("En    2PS,    entendemos") */
  .estudio-body{-webkit-hyphens:auto; hyphens:auto;}
  .estudio-body p:first-child{-webkit-hyphens:manual; hyphens:manual;}
  .estudio-body p:first-child{font-size:20px; line-height:1.4; margin-bottom:1em;}
  .estudio-body p + p{margin-top:1em;}
  /* "Leer más" en mobile: se ve la frase principal y el resto se despliega */
  .estudio-body.is-collapsed{max-height:7.2em; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent);}
  .estudio-equipo{padding-bottom:40px;}
  /* mobile: QUIÉNES SOMOS → texto ("Leer más") → aire → EL EQUIPO → video a todo el ancho, como
     un reel → "Ver proyectos" */
  .estudio-duo{padding-top:44px; padding-bottom:36px; grid-template-columns:1fr; grid-template-areas:"l1" "tx" "so" "l2" "vi" "mo"; grid-template-rows:none; row-gap:14px;}
  .estudio-duo .estudio-video{min-height:0; display:block;}
  .estudio-duo .estudio-video .video-facade{aspect-ratio:9/16;}
  /* fotos de los socios: tira que se desliza de costado, asoma la siguiente (poco scroll) */
  .estudio-socios, .estudio-row .estudio-socios{margin:22px calc(-1 * var(--gutter)) 0; padding:0 var(--gutter); display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter); scrollbar-width:none;}
  .estudio-socios::-webkit-scrollbar{display:none;}
  .estudio-socios li{flex:0 0 72%; scroll-snap-align:start;}
  .estudio-duo-l2{margin-top:36px;}
  .estudio-duo .estudio-more{margin-top:14px;}
  .video-play{width:56px; height:56px;}
  .estudio-more{margin-top:28px;}
}

/* ---------- Formularios — sin recuadros: solo una línea debajo de cada campo ---------- */
.field{margin-bottom:26px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:var(--label-tracking); color:var(--ink); margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; border:none; border-bottom:1px solid var(--ink); border-radius:0; background:transparent;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:16px; color:var(--ink); padding:8px 0; outline:none;
  transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--ink);}
.field textarea{min-height:96px; resize:vertical;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
/* Validación (12/11): línea y aviso en rojo debajo del campo; el aviso de CF7 se oculta para no duplicar */
.field-error{display:block; font-size:12px; line-height:1.4; color:var(--accent); margin-top:6px; text-transform:none; letter-spacing:0;}
.field-error:empty{display:none;}
.is-invalid input, .is-invalid textarea, .is-invalid select{border-bottom-color:var(--accent) !important;}
.contact-form .wpcf7 .is-invalid .wpcf7-not-valid-tip{display:none;}
.form-status{margin:16px 0 0; font-size:14px; color:var(--ink);}
.form-status:empty{display:none;}
.form-status.is-error{color:var(--accent);}
/* reCAPTCHA v3: sin la etiqueta flotante de Google (chocaba con WhatsApp / volver arriba);
   el aviso obligatorio va como texto chico debajo del formulario */
.grecaptcha-badge{visibility:hidden !important;}
.contact-form .wpcf7 form.init .wpcf7-response-output.is-error{display:block;}
.contact-form .wpcf7 form .wpcf7-response-output.is-error{color:var(--accent);}
.ps2-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-legal{margin:28px 0 0; max-width:46ch; font-size:12px; line-height:1.5; color:var(--ink-soft);}
.form-legal a{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;}
.form-legal a:hover{color:var(--ink);}
/* Contact Form 7: el formulario usa el mismo HTML que el aprobado (.field / .field-row / button.btn-dark,
   ver plantilla en ps2_cf7_*() de functions.php) → hereda los estilos de arriba. Acá solo se neutraliza
   lo que agrega el plugin, y su mensaje de respuesta va como el aviso propio (.form-status). */
.contact-form .wpcf7-form-control-wrap{display:block;}
.contact-form .wpcf7-not-valid-tip{font-size:12px; line-height:1.4; color:var(--accent); margin-top:6px;}
.contact-form .wpcf7 form .wpcf7-response-output{margin:16px 0 0; padding:0; border:none; font-size:14px; color:var(--ink);}
.contact-form .wpcf7 form.invalid .wpcf7-response-output, .contact-form .wpcf7 form.unaccepted .wpcf7-response-output, .contact-form .wpcf7 form.failed .wpcf7-response-output, .contact-form .wpcf7 form.spam .wpcf7-response-output{color:var(--accent);}
.contact-form .wpcf7-spinner{display:none;}

/* ---------- Contacto (reunión 2026-09-23, diapositiva 13): sin cajas, listado con íconos ---------- */
.contact{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 520px); gap:96px; padding:56px var(--gutter) 72px; align-items:start;}
.contact-title{font-size:clamp(24px, 2.6vw, 38px); font-weight:var(--display-weight); text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:1.2; max-width:24ch; animation:ps2FadeUp .6s ease both;}
.contact-wa{display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding:13px 20px; min-height:44px; background:var(--accent); color:#FFFFFF; font-size:14px; transition:background .2s ease;}
.contact-wa:hover{background:var(--accent-dark); color:#FFFFFF;}
.contact-list{list-style:none; margin:36px 0 0; padding:0; display:grid; gap:4px;}
.contact-list a{display:inline-flex; align-items:center; gap:14px; min-height:40px; font-size:15px; color:var(--ink);}
.contact-list a svg{color:var(--ink); flex-shrink:0; transition:color .2s ease;}
.contact-list a span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size .3s ease;}
.contact-list a:hover{color:var(--ink);}
.contact-list a:hover svg{color:var(--accent);}
.contact-list a:hover span{background-size:100% 1px;}
.contact-form{padding-top:6px;}
.contact-form .block-title{margin-bottom:24px;}
.contact .pending{color:var(--ink); opacity:1;}
.contact .btn-dark{font-size:var(--label-size); font-weight:400; text-transform:uppercase; letter-spacing:var(--label-tracking);}
@media (max-width:860px){
  .contact{grid-template-columns:1fr; gap:44px; padding:28px var(--gutter) 40px;}
  .contact-wa{margin-top:24px;}
  .contact-list{margin-top:22px;}
  .field-row{grid-template-columns:1fr; gap:0;}
}

/* ---------- Botones — sin recuadro estático: se activan al pasar el mouse (reunión 2026-09-23).
   Excepción acordada: WhatsApp y redes siguen siendo botón visible (ver .contact-wa en Contacto). ---------- */
.btn-dark, .btn-accent{display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:10px 0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; font-weight:500; color:var(--ink); background-image:linear-gradient(currentColor,currentColor); background-position:left bottom; background-size:0 1px; background-repeat:no-repeat; transition:background-size .3s ease, color .2s ease;}
.btn-dark::after, .btn-accent::after{content:"\2192";}
.btn-dark:hover, .btn-accent:hover{color:var(--ink); background-size:100% 1px;}

/* Dato todavía no cargado desde el escritorio — nunca se inventa un valor */
.pending{font-style:italic; color:var(--ink-soft); opacity:0.75;}