/* ==========================================================
   Tinta y Filamento — hoja de estilos
   Paleta: papel cálido + tinta azul noche + naranja filamento
   ========================================================== */

:root {
  --papel: #e8dfcf;
  --papel-2: #ddd2bf;
  --tarjeta: #f3ecdf;
  --campo: #f9f5ee;
  --tinta: #1c2230;
  --tinta-suave: #4a5163;
  --linea: #cbbda4;
  --filamento: #e2622b;
  --filamento-osc: #b84a1a;
  --pintura: #2e7d74;
  --cositas: #8a5bb0;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(28, 34, 48, .06), 0 8px 24px rgba(28, 34, 48, .08);
  --ancho: 1120px;
  --f-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --f-texto: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  /* grano de papel muy sutil */
  background-image: radial-gradient(rgba(28, 34, 48, .035) 1px, transparent 1px);
  background-size: 4px 4px;
}

img { max-width: 100%; display: block; }
a { color: var(--filamento-osc); }
a:hover { color: var(--filamento); }

h1, h2, h3 {
  font-family: var(--f-titulo);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }

.etiqueta {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--filamento-osc);
  margin-bottom: .6rem;
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(232, 223, 207, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}
.logo:hover { color: var(--tinta); }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo .y { color: var(--filamento); font-style: italic; }

.menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block;
  padding: .5rem .85rem;
  border-radius: 999px;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 500;
}
.menu a:hover { background: var(--papel-2); }
.menu a[aria-current="page"] { background: var(--tinta); color: var(--papel); }
.menu .acceso-admin { display: flex; align-items: center; gap: .4rem; color: var(--filamento-osc); }
.menu .acceso-admin svg { width: 22px; height: 22px; }
.menu .acceso-admin::after { content: "Costes"; display: none; }
@media (max-width: 760px) { .menu .acceso-admin::after { display: inline; } }

.boton-menu {
  display: none;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: .45rem .6rem;
  font: inherit;
  color: var(--tinta);
  cursor: pointer;
}

@media (max-width: 760px) {
  .boton-menu { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    padding: .75rem 16px 1rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
  }
  .menu.abierto { display: flex; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  border: 2px solid var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  font: 600 1rem var(--f-texto);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.boton:hover { color: var(--papel); background: #2b3346; transform: translateY(-1px); }
.boton.secundario { background: transparent; color: var(--tinta); }
.boton.secundario:hover { background: var(--papel-2); color: var(--tinta); }
.boton.naranja { background: var(--filamento); border-color: var(--filamento); }
.boton.naranja:hover { background: var(--filamento-osc); border-color: var(--filamento-osc); }
.boton[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ---------- Portada ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 3rem; position: relative; overflow: hidden; }
.hero .contenedor { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 .y { color: var(--filamento); font-style: italic; }
.hero p.intro { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34ch; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-arte { width: 100%; max-width: 420px; justify-self: center; }
@media (max-width: 860px) {
  .hero .contenedor { grid-template-columns: 1fr; }
  .hero-arte { max-width: 300px; order: -1; }
}

/* trazo que se "dibuja" */
.trazo { stroke-dasharray: 900; stroke-dashoffset: 900; animation: dibujar 2.4s ease-out .3s forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .trazo { animation: none; stroke-dashoffset: 0; } }

/* ---------- Secciones ---------- */
.seccion { padding: clamp(3rem, 7vw, 5rem) 0; }
.seccion.alterna { background: var(--papel-2); }
.cabeza-seccion { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.cabeza-seccion p { margin: 0; color: var(--tinta-suave); max-width: 52ch; }

/* tarjetas de categoría */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }

/* ---------- Marcas ---------- */
.grupo-marcas { margin-bottom: 2.5rem; }
.grupo-marcas h2 { font-size: 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea); }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.marca {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.1rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra);
}
a.marca:hover { color: var(--tinta); border-color: var(--filamento); }
.marca h3 { font-size: 1.05rem; margin: 0 0 .15rem; }
.marca p { margin: 0; font-size: .9rem; color: var(--tinta-suave); }
.logo-marca {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 12px;
  background: var(--campo);
  border: 1px solid var(--linea);
  display: grid; place-items: center;
  overflow: hidden;
  font: 600 1.2rem var(--f-titulo);
  color: var(--filamento-osc);
}
.logo-marca img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.categoria {
  --c: var(--filamento);
  display: block;
  padding: 1.75rem;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-top: 5px solid var(--c);
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform .2s;
}
.categoria:hover { color: var(--tinta); transform: translateY(-4px); }
.categoria p { color: var(--tinta-suave); margin: 0 0 1rem; }
.categoria .ver { font-weight: 600; color: var(--c); }

/* ---------- Galería ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filtro {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--tarjeta);
  font: 500 .95rem var(--f-texto);
  color: var(--tinta);
  cursor: pointer;
}
.filtro:hover { border-color: var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.obra {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform .2s;
}
.obra:hover { transform: translateY(-4px); }
.obra:focus-visible { outline: 3px solid var(--filamento); outline-offset: 3px; }
.obra .foto { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-2); }
.obra .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.obra:hover .foto img { transform: scale(1.04); }
.obra .info { padding: 1rem 1.1rem 1.2rem; }
.obra h3 { margin: .35rem 0 .2rem; font-size: 1.1rem; }
.obra p { margin: 0; font-size: .92rem; color: var(--tinta-suave); }

.chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: #fff;
  background: var(--c, var(--filamento));
}

/* zona central de la portada: 4 trabajos destacados */
.destacadas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .destacadas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .destacadas { grid-template-columns: 1fr; } }

.cabeza-categoria { padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem; }
.cabeza-categoria p { color: var(--tinta-suave); font-size: 1.1rem; max-width: 56ch; margin: 0; }
#barra-categoria { display: block; width: 64px; height: 6px; border-radius: 3px; margin-bottom: 1rem; }

.vacio { text-align: center; color: var(--tinta-suave); padding: 3rem 0; }

/* ---------- Visor (lightbox) ---------- */
.visor {
  border: none;
  padding: 0;
  border-radius: var(--radio);
  width: min(960px, 100% - 24px);
  max-height: calc(100vh - 24px);
  background: var(--tarjeta);
  color: var(--tinta);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.visor::backdrop { background: rgba(20, 24, 34, .75); }
.visor .contenido { display: grid; grid-template-columns: 1.4fr 1fr; }
.visor .medio { background: #11151e; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.visor .medio img { max-height: 80vh; object-fit: contain; }
.visor model-viewer { width: 100%; height: 70vh; --poster-color: transparent; }
.visor .texto { padding: 1.75rem; overflow: auto; max-height: 80vh; }
.visor dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1.25rem 0 1.5rem; font-size: .95rem; }
.visor dt { color: var(--tinta-suave); }
.visor dd { margin: 0; font-weight: 500; }
.visor .cerrar {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .9);
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 760px) {
  .visor .contenido { grid-template-columns: 1fr; }
  .visor .medio img { max-height: 50vh; }
  .visor model-viewer { height: 50vh; }
}

/* ---------- Sobre mí / proceso ---------- */
.sobre { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .sobre { grid-template-columns: 1fr; } }
.sobre .retrato { aspect-ratio: 1; border-radius: 50% 50% var(--radio) var(--radio); overflow: hidden; border: 6px solid var(--tarjeta); box-shadow: var(--sombra); }
.sobre .retrato img { width: 100%; height: 100%; object-fit: cover; }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: paso; list-style: none; padding: 0; margin: 0; }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }
.pasos li { counter-increment: paso; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; }
.pasos li::before {
  content: counter(paso);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--filamento);
  color: #fff;
  font: 600 1.1rem var(--f-titulo);
  margin-bottom: .8rem;
}
.pasos h3 { font-size: 1.05rem; }
.pasos p { margin: 0; font-size: .93rem; color: var(--tinta-suave); }

.llamada {
  text-align: center;
  background: var(--tinta);
  color: var(--papel);
  border-radius: calc(var(--radio) * 2);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.llamada p { color: #c9cdd8; max-width: 48ch; margin: 0 auto 1.5rem; }

/* ---------- Formulario ---------- */
.formulario {
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: calc(var(--radio) * 1.5);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
}
.formulario .ancho { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } }
.campo label, .campo .rotulo { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.campo .ayuda { font-size: .85rem; color: var(--tinta-suave); margin-top: .3rem; }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--linea);
  border-radius: 10px;
  background: var(--campo);
  font: inherit;
  color: var(--tinta);
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--filamento); box-shadow: 0 0 0 3px rgba(226, 98, 43, .18); }

.zona-fotos {
  border: 2px dashed var(--linea);
  border-radius: var(--radio);
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--campo);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.zona-fotos:hover, .zona-fotos.encima { border-color: var(--filamento); background: #fff6ef; }
.zona-fotos svg { width: 40px; height: 40px; color: var(--filamento); margin: 0 auto .5rem; }
.zona-fotos strong { color: var(--filamento-osc); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin-top: .8rem; }
.miniatura { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura button {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 34, 48, .8);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.casilla input { margin-top: .3rem; accent-color: var(--filamento); }
.oculto { position: absolute; left: -9999px; }
.aviso { padding: .9rem 1rem; border-radius: 10px; background: #fff3e8; border: 1px solid #f3c9a8; font-size: .93rem; }
.aviso.error { background: #fdecec; border-color: #f0b4b4; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 2.5rem 0; margin-top: 2rem; font-size: .93rem; color: var(--tinta-suave); }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.pie a { color: var(--tinta-suave); }
.pie nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.texto-legal { max-width: 70ch; }
.texto-legal h2 { font-size: 1.4rem; margin-top: 2rem; }

/* ---------- Seguimiento de encargos (página del cliente y panel) ---------- */
.progreso { display: flex; list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: fase; }
.progreso li {
  flex: 1; position: relative; text-align: center;
  font-size: .85rem; color: var(--tinta-suave); padding-top: 2.6rem;
}
.progreso li::before {
  counter-increment: fase; content: counter(fase);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tarjeta); border: 2px solid var(--linea);
  font: 600 .95rem var(--f-titulo); color: var(--tinta-suave);
}
.progreso li::after {
  content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 3px; background: var(--linea);
}
.progreso li:first-child::after { display: none; }
.progreso li.hecho, .progreso li.actual { color: var(--tinta); }
.progreso li.hecho::before { content: "✓"; background: var(--pintura); border-color: var(--pintura); color: #fff; }
.progreso li.hecho::after, .progreso li.actual::after { background: var(--pintura); }
.progreso li.actual::before { background: var(--filamento); border-color: var(--filamento); color: #fff; box-shadow: 0 0 0 5px rgba(226, 98, 43, .2); }
.progreso li.actual { font-weight: 600; }
@media (max-width: 560px) { .progreso li { font-size: .72rem; } }

.seguimiento { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .seguimiento { grid-template-columns: 1fr; } }
.tarjeta-plana { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); }
.tarjeta-plana h2 { font-size: 1.3rem; }

.hilo { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.mensaje {
  max-width: 88%; padding: .85rem 1rem; border-radius: 14px;
  background: var(--campo); border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.mensaje.taller { justify-self: start; border-left: 4px solid var(--filamento); border-top-left-radius: 4px; }
.mensaje.cliente { justify-self: end; background: #dfe9e4; border-right: 4px solid var(--pintura); border-top-right-radius: 4px; }
.mensaje.nuevo { outline: 2px solid var(--filamento); outline-offset: 2px; }
.mensaje .quien { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--tinta-suave); margin-bottom: .35rem; }
.mensaje .quien b { color: var(--tinta); }
.mensaje .texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.mensaje .fotos-msg { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-top: .6rem; }
.mensaje .fotos-msg a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.mensaje .fotos-msg img { width: 100%; height: 100%; object-fit: cover; }
.mensaje .borrar-msg { background: none; border: none; color: #b33; cursor: pointer; font-size: 1rem; padding: 0 .2rem; }
.hilo-vacio { color: var(--tinta-suave); text-align: center; padding: 1.5rem 1rem; border: 2px dashed var(--linea); border-radius: var(--radio); }

.redactar { display: grid; gap: .75rem; }
.redactar textarea { min-height: 100px; }
.redactar .zona-fotos { padding: 1rem; }
.redactar .zona-fotos svg { width: 28px; height: 28px; }
.redactar .fila-envio { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }