/* Liz Limón Photo, el estudio y la página de Contacto.
   Archivo aparte de sitio.css a propósito: otras agentes editan sitio.css en paralelo.
   Firma: la foto de la fachada va pegada con cinta ENCIMA del mapa, como un impreso
   sobre el plano. El mapa se queda derecho (un iframe girado se ve borroso). */

/* ---------- sección "Te espero en mi estudio" (Home y Contacto) ---------- */
.estudio-grid{display:grid;gap:40px;align-items:center}
.estudio-texto h2{margin:0 0 22px;text-wrap:balance}
.estudio-dir{font-style:normal;margin:0 0 18px;padding-left:18px;border-left:2px solid var(--gold)}
.estudio-calle{display:block;font:500 clamp(30px,6.4vw,40px)/1.08 var(--serif);color:var(--ink)}
.estudio-ciudad{display:block;margin-top:6px;font-size:17px;color:var(--ink2)}
.estudio-nota{font-size:17px;line-height:1.6;color:var(--ink2);max-width:30em;margin:0}
.estudio-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.estudio-ctas .cta svg{flex:none}

.estudio-mesa{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.estudio-mapa{position:relative;z-index:1;width:100%;margin:0;background:var(--card);padding:10px;
  box-shadow:0 1px 0 var(--line),0 30px 56px -30px rgba(36,31,24,.5)}
.estudio-mapa iframe{display:block;width:100%;aspect-ratio:1/1;height:auto;border:0;background:var(--sand)}
.estudio-mapa figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px 2px;font-size:14px;color:var(--ink3)}
.estudio-mapa figcaption a{color:var(--clay);text-decoration:none;border-bottom:1px solid rgba(143,85,53,.35);padding-bottom:1px}
.estudio-mapa figcaption a:hover{border-color:var(--clay)}

/* la fachada: impreso con borde blanco y cinta washi */
.estudio-foto{position:relative;z-index:2;width:min(58%,250px);margin:0 0 -44px 6px;background:var(--card);padding:9px 9px 38px;rotate:-3deg;
  box-shadow:0 1px 0 var(--line),0 26px 44px -22px rgba(36,31,24,.55);transition:rotate .5s var(--ease)}
.estudio-foto::before{content:"";position:absolute;z-index:3;top:-12px;left:50%;width:92px;height:26px;translate:-50% 0;rotate:5deg;
  background:repeating-linear-gradient(45deg,rgba(233,213,176,.82) 0 6px,rgba(242,228,200,.82) 6px 12px);box-shadow:0 1px 2px rgba(36,31,24,.12)}
.estudio-foto img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.estudio-foto figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:italic 500 17px/1 var(--serif);color:var(--ink3)}
.estudio-foto:hover{rotate:-1deg}

@media (min-width:900px){
  .estudio-grid{grid-template-columns:.8fr 1.2fr;gap:64px}
  .estudio-mesa{display:block;padding:0 0 40px 23%}
  .estudio-mapa iframe{aspect-ratio:5/4}
  .estudio-mapa figcaption{justify-content:flex-end}
  .estudio-mapa figcaption span{display:none}   /* la fachada lo taparía; la dirección ya está grande a un lado */
  .estudio-foto{position:absolute;left:0;bottom:0;width:38%;max-width:270px;margin:0;rotate:-4deg}
}
@media (prefers-reduced-motion:reduce){ .estudio-foto{transition:none} }

/* ---------- página de Contacto ---------- */
.contacto-hero{padding-block:26px 64px}
.contacto-hero h1{margin:6px 0 18px;text-wrap:balance}
.contacto-wa{margin-top:28px;font-size:18px;padding:22px 30px;gap:14px;width:100%;justify-content:center;max-width:440px}
.contacto-wa svg{flex:none}
.contacto-wa-txt{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
.contacto-wa small{display:block;font-size:14px;opacity:.82;font-weight:400;letter-spacing:.02em}
.contacto-promesa{display:flex;align-items:center;gap:14px;margin:20px 0 0;font:italic 500 22px/1.3 var(--serif);color:var(--ink);text-wrap:pretty}
.contacto-promesa img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--gold)}

.contacto-canales{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line);max-width:440px}
.contacto-canales li{border-bottom:1px solid var(--line)}
.contacto-canales a{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 2px;text-decoration:none;color:var(--ink)}
.contacto-canales svg{flex:none;color:var(--pine)}
.contacto-canales span{display:flex;flex-direction:column;min-width:0;font-size:14px;color:var(--ink3);line-height:1.3}
.contacto-canales b{font:500 17px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.contacto-canales a:hover b{color:var(--clay)}

.contacto-retrato{position:relative;justify-self:center;width:min(78vw,380px);margin:8px 0 0;background:var(--card);padding:10px 10px 44px;rotate:2.5deg;
  box-shadow:0 1px 0 var(--line),0 30px 56px -28px rgba(36,31,24,.5)}
.contacto-retrato::before{content:"";position:absolute;z-index:3;top:-12px;left:50%;width:92px;height:26px;translate:-50% 0;rotate:-4deg;
  background:repeating-linear-gradient(45deg,rgba(233,213,176,.82) 0 6px,rgba(242,228,200,.82) 6px 12px);box-shadow:0 1px 2px rgba(36,31,24,.12)}
.contacto-retrato img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.contacto-retrato figcaption{position:absolute;left:0;right:0;bottom:13px;text-align:center;font:italic 500 19px/1 var(--serif);color:var(--ink3)}

@media (min-width:900px){
  .contacto-hero{grid-template-columns:1.1fr .9fr;gap:64px;padding-block:40px 96px}
  .contacto-retrato{margin:0}
}
.estudio-col{display:block;font-size:.95rem;opacity:.8;margin-top:2px}

/* v 2026-09-24a */