/*
Theme Name: Tres Caminos — En Construcción (con contacto)
Author: Belén y Roque
Description: Página única "en construcción" con contacto por correo protegido, botón copiar e iconos de redes (6 preparadas).
Version: 2.3
Text Domain: tres-caminos-contacto
*/
:root{
  --parchment:#F4ECDD; --paper:#FBF7EF; --ink:#2F2A24; --ink-soft:#6B5C49;
  --gold:#C8932F; --gold-deep:#A9761F; --green:#6E8C55; --green-deep:#4C6B3C;
  --vermilion:#A8472E; --line:#DCCFB2;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --caps:"Marcellus","Fraunces",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --jp:"Noto Serif JP",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body); color:var(--ink); background:var(--parchment);
  min-height:100vh; display:flex; flex-direction:column; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% 0%, #FBF5E9 0%, var(--parchment) 60%);
}
.wrap{width:100%; max-width:820px; margin:0 auto; padding:0 24px}
.topbar{padding:26px 0 0}
.topbar .wrap{display:flex; align-items:center; gap:12px; justify-content:center}
.topbar .mini{width:42px;height:42px;display:block}
.topbar .mini svg{width:100%;height:100%;display:block}
.topbar .kicker{font-family:var(--caps); letter-spacing:.34em; font-size:.72rem; color:var(--gold-deep); text-transform:uppercase}

main{flex:1 0 auto; display:flex; align-items:center; justify-content:center; padding:32px 0 8px; position:relative; z-index:1}
.hero{text-align:center}
.crest{width:clamp(132px,22vw,184px); height:auto; margin:0 auto 18px; display:block; filter:drop-shadow(0 6px 18px rgba(47,42,36,.10))}
.crest svg{width:100%;height:100%;display:block}
.wordmark{
  font-family:var(--caps); font-weight:400; color:var(--ink);
  font-size:clamp(2.3rem,7vw,4.1rem); letter-spacing:.2em; line-height:1;
  margin:.1em 0 .35em; padding-left:.2em;
}
.subtitle{font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:clamp(.95rem,2.4vw,1.18rem); margin:0 0 22px}
.subtitle .jp{font-family:var(--jp); font-style:normal; font-weight:600}
.divider{width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent); margin:8px auto 26px; border:0}
.status{font-family:var(--serif); font-weight:500; color:var(--ink); font-size:clamp(1.5rem,4.4vw,2.35rem); line-height:1.15; margin:0 0 14px}
.lede{font-size:clamp(1rem,2.5vw,1.12rem); color:var(--ink-soft); max-width:560px; margin:0 auto 30px}

.symbols{display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin:6px 0 32px}
.sym{display:flex; flex-direction:column; align-items:center; gap:8px; width:108px}
.sym .badge{width:74px;height:74px}
.sym .badge svg{width:100%;height:100%;display:block}
.sym .name{font-family:var(--body); font-size:.82rem; color:var(--ink); font-weight:600}
.sym .name .jp{font-family:var(--jp)}
.sym:nth-child(1) .name{color:var(--gold-deep)}
.sym:nth-child(2) .name{color:var(--green-deep)}
.sym:nth-child(3) .name{color:var(--vermilion)}

.founders{margin:26px 0 4px}
.founders .kicker2{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 18px}
.founders-pics{display:flex; gap:clamp(24px,6vw,56px); justify-content:center; flex-wrap:wrap}
.founders figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px}
.founders figure img{width:clamp(160px,32vw,220px); height:auto; display:block; filter:drop-shadow(0 6px 16px rgba(47,42,36,.12))}
.founders figcaption{font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink)}

.social{display:flex; gap:14px; justify-content:center; margin:18px 0 0}
.social a{width:38px;height:38px;border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); color:var(--ink-soft); text-decoration:none; font-size:.9rem; transition:.2s}
.social a:hover{border-color:var(--gold-deep); color:var(--gold-deep)}

.scenery{width:100%; line-height:0; margin-top:18px; position:relative; z-index:0}
.scenery svg{width:100%; height:auto; display:block}

footer{flex-shrink:0; text-align:center; padding:16px 0 26px; font-size:.8rem; color:var(--ink-soft); background:var(--green-deep); color:#EAE0CC}
footer .wrap{display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap}
footer a{color:#EAE0CC}

@media (max-width:560px){
  .symbols{gap:18px}
  .sym{width:92px}
}

.scene-cap{font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:clamp(.95rem,2.4vw,1.08rem); margin:34px 0 2px; text-align:center}
.scene-cap strong{font-style:normal; font-weight:600; color:var(--ink)}
.scene-cap .jp{font-family:var(--jp); font-style:normal}

.contact{margin:36px 0 6px}
.contact-h{font-family:var(--serif); font-weight:500; color:var(--ink); font-size:clamp(1.2rem,3vw,1.55rem); margin:0 0 6px}
.contact-p{color:var(--ink-soft); margin:0 0 18px}
.btn-mail{display:inline-block; font-family:var(--body); font-weight:600; font-size:1rem; padding:13px 32px; border-radius:999px; background:var(--vermilion); color:#fff; text-decoration:none; transition:background .2s; border:0; cursor:pointer}
.btn-mail:hover{background:#8A3A24}
.contact-mail{font-size:.85rem; color:var(--ink-soft); margin:14px 0 0}
.contact-mail #tc-mail-text{color:var(--gold-deep); font-weight:600}

main{padding-top:58px}
.contact{margin:26px auto 6px; max-width:400px}
.contact-card{display:flex; align-items:center; gap:13px; text-align:center; background:#EDE4D0; border:1.5px solid var(--line); border-left:4px solid var(--gold-deep); border-radius:12px; padding:13px 16px}
.contact-ico{flex:0 0 auto; color:var(--gold-deep); line-height:0}
.contact-ico svg{width:34px; height:auto; display:block}
.contact-body{flex:1 1 auto; min-width:0}
.contact-line{font-size:.95rem; color:var(--ink); margin:0 0 6px; line-height:1.45}
.contact-mailrow{display:inline-flex; align-items:center; gap:8px; justify-content:center}
.contact-mail{display:inline-block; font-family:var(--body); font-weight:600; font-size:1.15rem; color:var(--gold-deep); text-decoration:none; border-bottom:1px solid var(--line); white-space:nowrap}
.contact-mail:hover{border-color:var(--gold-deep)}
.copy-btn{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1.5px solid var(--line); border-radius:8px; background:var(--paper); color:var(--gold-deep); cursor:pointer; transition:.15s}
.copy-btn:hover{border-color:var(--gold-deep); background:#fff}
.copy-btn svg{width:16px; height:16px; display:block}
.copied{display:block; font-size:.78rem; color:var(--green-deep); margin-top:5px; min-height:1.1em}
.social{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:22px 0 0}
.social a{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); color:var(--ink-soft); text-decoration:none; transition:.18s}
.social a:hover{border-color:var(--gold-deep); color:var(--gold-deep); background:var(--paper)}
.social svg{width:23px; height:23px; display:block}