/* Versión C de la web de Sara Tana (ronda 1, 24-10-2026): fondo claro, letras pequeñas, sin textos
   decorativos ni a mano (salvo la cita de Sobre mí), botones cuadrados y la obra como protagonista.
   Referencias que ella dio: annemariefischer.ch (portada), ritapauperio.com (ficha y Sobre mí) y
   elenamaron.com/contacto (formulario de líneas). */

:root {
  --fondo: #ffffff;
  --peana: #f2f2f2;         /* el gris claro de su portfolio, detrás de cada obra */
  --tinta: #2f2e33;         /* su gris carbón, un punto más oscuro para los botones */
  --texto: #3e3c41;
  --suave: #77747c;
  --azul: #203762;          /* el azul de sus cianotipias */
  --linea: rgba(62, 60, 65, 0.16);
  --f-marca: "Tenor Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --f-rotulo: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --f-texto: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --f-mano: "Nothing You Could Do", "Segoe Script", cursive;
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:hover { color: var(--azul); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }

.oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  padding: 8px 14px; background: var(--tinta); color: #fff; text-decoration: none;
}
.saltar:focus { top: 8px; }

/* ---------- Aviso de borrador ---------- */
.borrador {
  margin: 0; padding: 6px var(--margen);
  background: var(--peana); color: var(--suave);
  font-size: 11px; letter-spacing: 0.04em; text-align: center;
}

/* ---------- Cabecera ---------- */
.cab {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: var(--ancho); margin: 0 auto; padding: 22px var(--margen);
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.marca__logo { width: 34px; height: 34px; }
.marca__nombre { font: 400 15px/1 var(--f-marca); letter-spacing: 0.22em; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-size: 13px; letter-spacing: 0.04em; }
.nav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }

.idiomas { display: flex; gap: 8px; padding-left: clamp(10px, 1.6vw, 20px); border-left: 1px solid var(--linea); }
.idiomas a { color: var(--suave); font-size: 12px; }
.idiomas a[aria-current="true"] { color: var(--texto); border-bottom-color: currentColor; }

@media (max-width: 640px) {
  .cab { flex-wrap: wrap; padding-top: 16px; padding-bottom: 14px; }
  .nav { width: 100%; justify-content: space-between; }
  .marca__nombre { font-size: 14px; }
}

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-block; padding: 12px 22px; border: 1px solid var(--tinta); border-radius: 0;
  background: var(--tinta); color: #fff; cursor: pointer;
  font: 500 12px/1 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.boton:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

.enlace {
  font: 500 12px/1 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* ---------- Portada ---------- */
.portada { margin: 0; }
.portada img { width: 100%; max-height: 62vh; object-fit: cover; }

@media (max-width: 640px) {
  .portada img { aspect-ratio: 4 / 3; max-height: none; }
}

.bloque {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 72px); align-items: center;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--margen);
}
.bloque__img { margin: 0; }
.bloque__texto { max-width: 52ch; }
.bloque h2 {
  margin-bottom: 18px;
  font: 400 15px/1.4 var(--f-rotulo); letter-spacing: 0.12em; text-transform: uppercase;
}
.bloque p { margin-bottom: 26px; }

@media (max-width: 760px) {
  .bloque { grid-template-columns: 1fr; }
}

/* ---------- Obras ---------- */
.obras { max-width: var(--ancho); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--margen) clamp(48px, 8vw, 96px); }
.obras__cab { max-width: 60ch; margin-bottom: clamp(28px, 5vw, 48px); }
.obras__cab h1 {
  margin-bottom: 14px;
  font: 400 18px/1.3 var(--f-rotulo); letter-spacing: 0.16em; text-transform: uppercase;
}

.rejilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1024px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla { grid-template-columns: 1fr; } }

.pieza a { display: block; text-decoration: none; }
.pieza__img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  background: var(--peana); padding: 9%;
}
.pieza__img img { max-height: 100%; width: auto; object-fit: contain; }
.pieza__titulo {
  display: block; margin-top: 14px;
  font: 400 13px/1.3 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase;
}
.pieza__medidas { display: block; margin-top: 4px; color: var(--suave); font-size: 13px; }
.pieza a:hover .pieza__titulo { color: var(--azul); }

/* ---------- Ficha ---------- */
.migas {
  display: flex; gap: 10px; max-width: var(--ancho); margin: 0 auto; padding: 10px var(--margen) 0;
  font-size: 12px; letter-spacing: 0.06em; color: var(--suave);
}
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

.ficha {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 80px); align-items: start;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(20px, 3vw, 32px) var(--margen) clamp(32px, 5vw, 56px);
}
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } }

.ficha__grande {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  background: var(--peana); padding: 8%;
}
.ficha__grande img { max-height: 100%; width: auto; object-fit: contain; }

.miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.miniaturas button {
  width: 64px; height: 64px; padding: 0; border: 1px solid transparent; background: var(--peana); cursor: pointer;
}
.miniaturas button[aria-pressed="true"] { border-color: var(--texto); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.ficha__info { padding-top: clamp(0px, 4vw, 48px); }
.ficha__info h1 {
  margin-bottom: 24px;
  font: 400 20px/1.3 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase;
}

.datos { margin: 0 0 30px; }
.datos div { margin-bottom: 12px; }
.datos dt {
  font: 500 11px/1.4 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave);
}
.datos dd { margin: 2px 0 0; font-size: 14px; }

.ficha__envio { margin-top: 18px; color: var(--suave); font-size: 13px; }
.ficha__precio { margin-bottom: 18px; font: 400 20px/1 var(--f-rotulo); letter-spacing: 0.06em; }

.vecinas {
  display: flex; justify-content: space-between; max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--margen) clamp(40px, 6vw, 72px);
}
.vecinas a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.vecinas svg { width: 22px; height: 22px; }

.privado {
  max-width: var(--ancho); margin: 0 auto; padding: 18px var(--margen) 0;
  color: var(--suave); font-size: 12px; letter-spacing: 0.04em;
}

/* ---------- Sobre mí ---------- */
.sobre {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 64px); align-items: start;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--margen) clamp(48px, 8vw, 96px);
}
@media (max-width: 760px) { .sobre { grid-template-columns: 1fr; } }

.sobre__lado img { width: 100%; }
.sobre__datos { margin: 22px 0 0; font-size: 13px; }
.sobre__datos div { margin-bottom: 12px; }
.sobre__datos dt {
  font: 500 11px/1.4 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave);
}
.sobre__datos dd { margin: 2px 0 0; }
.sobre__datos a { text-decoration: none; }
.sobre__datos a:hover { text-decoration: underline; }

.sobre__texto { max-width: 64ch; }
.sobre__texto h1 { margin-bottom: 22px; font: 400 24px/1.2 var(--f-marca); letter-spacing: 0.06em; }

.cita { margin: 34px 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--texto); }
.cita p { margin: 0 0 8px; font: 400 18px/1.5 var(--f-mano); color: var(--azul); }
.cita footer { color: var(--suave); font-size: 12px; letter-spacing: 0.06em; }

/* ---------- Contacto ---------- */
.contacto {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: start;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--margen) clamp(48px, 8vw, 96px);
}
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }

.contacto__titulo {
  margin-bottom: 18px; color: var(--suave);
  font: 400 12px/1.4 var(--f-texto); letter-spacing: 0.06em;
}
.contacto__texto p { max-width: 42ch; }

.form { display: grid; gap: 22px; }
.campo label, .grupo legend { display: block; font-size: 13px; font-weight: 500; }
.campo__nota { color: var(--suave); font-weight: 400; font-size: 12px; }
.campo input, .campo textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--texto); border-radius: 0; background: transparent;
  font: inherit; color: inherit;
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--azul); box-shadow: 0 1px 0 var(--azul); }

.grupo { margin: 0; padding: 0; border: 0; }
.grupo legend { margin-bottom: 8px; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.opciones--columna { flex-direction: column; }
.opcion { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.opcion input { margin: 4px 0 0; accent-color: var(--tinta); }

.datos-aviso { padding: 16px 18px; background: var(--peana); font-size: 13px; }
.datos-aviso h2 { margin-bottom: 6px; font: 500 11px/1.4 var(--f-rotulo); letter-spacing: 0.14em; text-transform: uppercase; }
.datos-aviso p { margin-bottom: 10px; color: var(--suave); }

.form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form__aviso { margin: 0; color: var(--azul); font-size: 13px; }

/* ---------- Legal ---------- */
.legal { max-width: 68ch; margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--margen) clamp(48px, 8vw, 96px); }
.legal h1 { margin-bottom: 18px; font: 400 18px/1.3 var(--f-rotulo); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- Pie ---------- */
.pie {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  max-width: var(--ancho); margin: 0 auto; padding: 28px var(--margen) 34px;
  border-top: 1px solid var(--linea); font-size: 12px;
}
.pie p { margin: 0; }
.pie__marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-marca); letter-spacing: 0.08em; }
.pie__marca img { width: 24px; height: 24px; }
.pie__legal { display: flex; gap: 8px; margin-top: 10px !important; color: var(--suave); }
.pie__legal a { text-decoration: none; }
.pie__legal a:hover { text-decoration: underline; }
.pie__iconos { display: flex; gap: 14px; }
.pie__iconos a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.pie__iconos svg { width: 20px; height: 20px; }