/* ============================================================
   LUZ SOBRE PIEDRA — sistema visual Rosalía dos Santos
   Base de piedra y lino · mucha luz y aire · un destello de
   cristal o latón · siempre algo antiguo.
   ============================================================ */
:root{
  color-scheme: light only;   /* impide que el navegador invierta los colores */
  --hueso:#FAF7F1;
  --hueso-2:#F4EFE7;
  --greige:#D8D0C5;
  --piedra:#B7AC9F;
  --carbon:#3A3733;
  --carbon-deep:#2B2724;
  --verde-agua:#A9BFB7;
  --miel:#C89B5A;
  --tinta-suave:#6B645C;
  --laton:linear-gradient(90deg,#A8843F 0%,#E3CD9E 35%,#C9A96A 60%,#8F6E32 100%);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;

  --pad:clamp(1.5rem,5vw,6rem);
  --maxw:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--hueso);
  color:var(--carbon);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:.005em}
h1{font-size:clamp(2.8rem,7vw,6rem);line-height:1.02}
h2{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.1}
h3{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.25}
p{margin:0 0 1.1em}
.lede{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.5;font-weight:300;color:var(--carbon)}
.kicker{
  font-family:var(--sans);font-size:.68rem;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-suave);
}
.medida{max-width:62ch}
em{font-family:var(--serif);font-style:italic;font-size:1.06em}

/* ---------- el destello: filete de latón ---------- */
.filete{height:1px;background:var(--laton);border:0;margin:0;opacity:.85}
.filete-corto{width:56px;height:1px;background:var(--laton);border:0;margin:0 0 1.6rem}

/* ---------- utilidades ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(4.5rem,10vw,9rem) 0}
.seccion-cabecera{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:2.5rem}
.seccion-cabecera .num{font-family:var(--serif);font-size:.95rem;color:var(--piedra);letter-spacing:.1em}

/* ---------- placeholders de foto ---------- */
.ph{
  position:relative;overflow:hidden;
  background:
    linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 42%),
    linear-gradient(160deg,var(--greige) 0%,var(--piedra) 55%,#9E9385 100%);
  display:flex;align-items:flex-end;
}
.ph::after{ /* el reflejo — siempre algo que brilla en el encuadre */
  content:"";position:absolute;inset:0;
  background:linear-gradient(75deg,transparent 46%,rgba(255,255,255,.28) 50%,transparent 55%);
  pointer-events:none;
}
.ph span{
  position:relative;z-index:2;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.92);padding:1rem 1.2rem;font-weight:400;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
}
.ph.claro{background:
    linear-gradient(115deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 45%),
    linear-gradient(160deg,#EDE7DD 0%,var(--greige) 100%);}
.ph.claro span{color:var(--tinta-suave);text-shadow:none}
/* variación para que los placeholders no parezcan la misma foto */
.proyecto:nth-child(2) .ph::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 34%,transparent 39%)}
.proyecto:nth-child(3) .ph{background:linear-gradient(140deg,rgba(255,255,255,.5),rgba(255,255,255,0) 50%),linear-gradient(200deg,#E0D8CC 0%,var(--piedra) 70%,#8F857A 100%)}
.proyecto:nth-child(4) .ph{background:linear-gradient(95deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%),linear-gradient(150deg,var(--greige) 0%,#A79C8F 60%,#877D71 100%)}
.proyecto:nth-child(5) .ph::after{background:linear-gradient(60deg,transparent 60%,rgba(255,255,255,.25) 65%,transparent 70%)}
.proyecto:nth-child(6) .ph{background:linear-gradient(125deg,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),linear-gradient(170deg,#EFE9E0 0%,var(--greige) 60%,var(--piedra) 100%)}

/* ---------- navegación ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,241,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(183,172,159,.3);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-top:1.1rem;padding-bottom:1.1rem}
.marca{font-family:var(--serif);font-size:1.5rem;line-height:1;text-decoration:none;white-space:nowrap}
.marca small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-suave);margin-top:.45rem}
.menu{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.menu a{
  text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;
}
.menu a:hover{color:var(--carbon);border-bottom-color:var(--miel)}
.btn{
  display:inline-block;text-decoration:none;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.85rem 1.6rem;border:1px solid var(--carbon);
  color:var(--carbon);background:transparent;transition:.3s;white-space:nowrap;
}
.btn:hover{background:var(--carbon);color:var(--hueso)}
.btn.claro{border-color:rgba(250,247,241,.55);color:var(--hueso)}
.btn.claro:hover{background:var(--hueso);color:var(--carbon);border-color:var(--hueso)}
.btn.solido{background:var(--carbon);color:var(--hueso)}
.btn.solido:hover{background:var(--carbon-deep)}
@media(max-width:900px){.menu{display:none}}

/* ---------- portada ---------- */
.hero{padding:0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:min(84vh,760px)}
.hero-texto{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,6rem)}
.hero-texto h1{margin:1.6rem 0 1.8rem}
.hero-texto h1 em{color:var(--carbon)}
.hero-acciones{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.hero-foto{position:relative}
.hero-foto .ph{position:absolute;inset:0}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-foto{min-height:58vh}
  .hero-texto{padding-top:3.5rem;padding-bottom:3.5rem}
}

/* ---------- manifiesto ---------- */
.manifiesto{background:var(--hueso-2)}
.manifiesto-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.pilares{display:grid;gap:2.2rem;margin-top:2.5rem}
.pilar{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline}
.pilar .n{font-family:var(--serif);font-size:1.1rem;color:var(--miel)}
.pilar h3{font-size:1.25rem;margin-bottom:.35rem}
.pilar p{color:var(--tinta-suave);font-size:.95rem;margin:0}
@media(max-width:860px){.manifiesto-grid{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- proyectos ---------- */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
.proyecto{text-decoration:none;display:block;group:proyecto}
.proyecto .ph{aspect-ratio:4/3;transition:.6s}

.proyecto:hover .ph{filter:brightness(1.05)}
.proyecto-pie{padding-top:1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid rgba(183,172,159,.4);margin-top:1rem}
.proyecto-pie h3{font-size:1.25rem}
.proyecto-pie span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra);white-space:nowrap}
@media(max-width:900px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rejilla{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.servicios{background:var(--hueso-2)}
.servicios-lista{display:grid;gap:0;border-top:1px solid rgba(183,172,159,.45)}
.servicio{
  display:grid;grid-template-columns:.35fr 1fr .5fr;gap:clamp(1rem,4vw,3rem);
  padding:2.6rem 0;border-bottom:1px solid rgba(183,172,159,.45);align-items:start;
}
.servicio h3{font-size:1.6rem}
.servicio .para{font-size:.85rem;color:var(--tinta-suave);margin-top:.4rem}
.servicio ul{margin:0;padding-left:1.1rem;color:var(--tinta-suave);font-size:.95rem}
.servicio li{margin-bottom:.35rem}
.servicio .precio{font-family:var(--serif);font-size:1.15rem;color:var(--carbon);text-align:right}
.servicio .precio small{display:block;font-family:var(--sans);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--piedra);margin-bottom:.3rem}
@media(max-width:860px){.servicio{grid-template-columns:1fr;gap:1rem}.servicio .precio{text-align:left}}

/* ---------- cómo trabajo ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.5rem);margin-top:3rem}
.paso{border-top:1px solid;border-image:var(--laton) 1;padding-top:1.4rem}
.paso .n{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--piedra);display:block;margin-bottom:.7rem}
.paso h3{font-size:1.15rem;margin-bottom:.4rem}
.paso p{font-size:.92rem;color:var(--tinta-suave);margin:0}
@media(max-width:860px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pasos{grid-template-columns:1fr}}

/* ---------- sobre mí ---------- */
.sobre-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.sobre-foto{position:relative}
.sobre-foto .ph{aspect-ratio:3/4}
.sobre-foto .firma{
  position:absolute;right:-1.5rem;bottom:-1.2rem;background:var(--hueso);
  padding:1rem 1.4rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;
  border:1px solid rgba(183,172,159,.5);
}
@media(max-width:860px){.sobre-grid{grid-template-columns:1fr;gap:3rem}.sobre-foto .firma{right:1rem}}

/* ---------- cita ---------- */
.cita{background:var(--carbon-deep);color:var(--hueso);text-align:center}
.cita blockquote{margin:0 auto;max-width:34ch}
.cita p{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.25;font-weight:300;margin:0}
.cita cite{display:block;margin-top:2rem;font-style:normal;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(250,247,241,.6)}
.cita .filete-corto{margin:0 auto 2rem}

/* ---------- tienda (banda) ---------- */
.tienda{background:var(--verde-agua)}
.tienda-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5rem)}
.tienda .wordmark{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.24em;text-transform:uppercase;line-height:1.4}
.tienda .por{display:block;font-style:italic;font-size:.85rem;letter-spacing:.02em;text-transform:none;color:rgba(58,55,51,.7);margin-top:.5rem}
.tienda .ph{aspect-ratio:16/10}
@media(max-width:860px){.tienda-grid{grid-template-columns:1fr}}

/* ---------- contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,5rem)}
form{display:grid;gap:1.4rem}
.campo{display:grid;gap:.5rem}
label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
input,textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--carbon);
  background:transparent;border:0;border-bottom:1px solid var(--piedra);
  padding:.7rem 0;transition:.3s;
}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--miel)}
textarea{resize:vertical;min-height:110px}
.contacto-datos p{color:var(--tinta-suave);font-size:.95rem}
.contacto-datos a{color:var(--carbon);text-decoration:none;border-bottom:1px solid var(--miel)}

/* ---------- pie ---------- */
footer{background:var(--carbon-deep);color:rgba(250,247,241,.75);padding:clamp(3rem,6vw,5rem) 0 2rem}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
footer .marca{color:var(--hueso)}
footer h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,247,241,.55);margin-bottom:1rem;font-weight:400}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
footer a{text-decoration:none;font-size:.9rem;color:rgba(250,247,241,.75);transition:.25s}
footer a:hover{color:var(--hueso)}
.pie-legal{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.75rem;color:rgba(250,247,241,.45);padding-top:1.8rem;border-top:1px solid rgba(250,247,241,.15)}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr;gap:2rem}}
@media(max-width:860px){.contacto-grid{grid-template-columns:1fr}}

/* ============ logo A ============ */
.marca .pt{color:var(--miel)}

/* ============ páginas interiores ============ */
.pagina-cabecera{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(2rem,4vw,3rem)}
.pagina-cabecera h1{font-size:clamp(2.4rem,5.5vw,4.4rem);margin:1.2rem 0 1.5rem}
.pagina-cabecera .lede{max-width:56ch}
.menu a.activo{color:var(--carbon);border-bottom-color:var(--miel)}

/* aviso de imágenes de referencia */
.aviso-ref{background:var(--hueso-2);border-left:1px solid;border-image:var(--laton) 1;
  padding:1.2rem 1.5rem;margin-bottom:3rem;font-size:.93rem;color:var(--tinta-suave);max-width:70ch}

/* texto legal */
.legal{max-width:70ch;margin-left:0;margin-right:auto}
.legal h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.8rem 0 1rem}
.legal h3{font-size:1.15rem;margin:1.8rem 0 .6rem}
.legal p,.legal li{font-size:.95rem;color:var(--tinta-suave)}
.legal strong{color:var(--carbon);font-weight:500}
.legal ul{padding-left:1.2rem}
.legal .pendiente{background:rgba(200,155,90,.14);padding:.1rem .4rem;color:var(--carbon)}

/* menú móvil */
.menu-movil{display:none;background:none;border:0;font-family:var(--sans);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--carbon);cursor:pointer;padding:.6rem 0}
@media(max-width:900px){
  .menu-movil{display:block}
  header .btn{display:none}
  .menu-desplegado{display:flex!important;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:1.4rem;background:var(--hueso);padding:2rem var(--pad) 2.5rem;
    border-bottom:1px solid rgba(183,172,159,.4)}
  header{position:relative}
}

/* 404 */
.error{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* ============ fotografía ============ */
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.ph:has(img)::after{content:none}
.proyecto:hover .ph img{transform:scale(1.03)}
.hero-foto .ph{position:absolute;inset:0}
.sobre-foto .ph{background:var(--greige)}

/* ============ página de proyecto ============ */
.miga{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--piedra);margin-bottom:1.2rem}
.miga a{text-decoration:none;border-bottom:1px solid var(--miel);padding-bottom:2px;color:var(--tinta-suave)}
.hero-proyecto{aspect-ratio:16/9;margin-bottom:0}
.proyecto-texto{display:grid;grid-template-columns:.35fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.proyecto-texto p:last-child{margin-bottom:0}
@media(max-width:760px){.proyecto-texto{grid-template-columns:1fr;gap:1.2rem}}

.tomas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2.2rem)}
.toma{margin:0}
.toma .ph{aspect-ratio:3/4}
.toma figcaption{padding-top:1rem;font-size:.88rem;color:var(--tinta-suave);line-height:1.6}
.toma figcaption strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:400;
  color:var(--carbon);margin-bottom:.3rem;letter-spacing:.005em}
@media(max-width:900px){.tomas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tomas{grid-template-columns:1fr}}

.siguiente{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.siguiente-foto{aspect-ratio:16/10;display:block}
@media(max-width:760px){.siguiente{grid-template-columns:1fr}}

/* ============ proyectos en franjas ============ */
.filas-proyecto{display:grid;gap:clamp(4rem,9vw,8rem)}
.fila-proyecto{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.fila-proyecto:nth-child(even){grid-template-columns:1fr 1.55fr}
.fila-proyecto:nth-child(even) .foto{order:2}
.fila-proyecto:nth-child(even) .datos{order:1}
.fila-proyecto .foto{aspect-ratio:3/2;display:block}
.fila-proyecto .num{font-family:var(--serif);font-size:.95rem;color:var(--piedra);letter-spacing:.1em;display:block;margin-bottom:1rem}
.fila-proyecto h2{font-size:clamp(1.8rem,3.2vw,2.7rem);margin-bottom:.5rem}
.fila-proyecto h2 a{text-decoration:none}
.fila-proyecto .lugar{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--piedra)}
.fila-proyecto p{margin:1.4rem 0 1.8rem;color:var(--tinta-suave);max-width:44ch}
.fila-proyecto .foto img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.fila-proyecto .foto:hover img{transform:scale(1.03)}
@media(max-width:860px){
  .fila-proyecto,.fila-proyecto:nth-child(even){grid-template-columns:1fr;gap:1.5rem}
  .fila-proyecto:nth-child(even) .foto{order:1}
  .fila-proyecto:nth-child(even) .datos{order:2}
}

/* ============================================================
   El navegador móvil no debe reinterpretar la paleta.
   Chrome y Firefox en Android aplican un modo oscuro automático
   que convertía el fondo hueso en negro y ensuciaba el verde agua.
   ============================================================ */
html{color-scheme:light only;background:#FAF7F1}
@media (prefers-color-scheme: dark){
  html,body{background:#FAF7F1;color:#3A3733}
  .manifiesto,.servicios,.nota{background:#F4EFE7}
  .cita,footer{background:#2B2724;color:rgba(250,247,241,.75)}
  .tienda{background:#A9BFB7}
  .ph{background:#D8D0C5}
  input,textarea{color:#3A3733;background:transparent}
}

.fila-proyecto h3{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;margin-bottom:.5rem}
.fila-proyecto h3 a{text-decoration:none}