/* Manicuría CABA: etiqueta de perfumería porteña.
   Vitrina verde botella; el contenido vive en placas de porcelana con doble
   filete. Instrument Serif (la display del blog) para los títulos de etiqueta, versalitas condensadas para
   las leyendas, Hanken Grotesk para el texto (la del blog de nahuel, pedido 11/08). Rojo esmalte solo para la acción. */

:root {
  --verde: #0e352a;
  --verde-hondo: #0a2820;
  --verde-tinta: #1e3a30;
  --porcelana: #f7f3e9;
  --porcelana-luz: #fdfaf2;
  --tinta: #22302a;
  --tinta-suave: #4c5c53;
  --sobre-verde: #e9e2cd;
  --sobre-verde-suave: #b5c9bc;
  --filete: #274d3f;
  --filete-oro: #b99a5f;
  --esmalte: #b01e3c;
  --esmalte-hondo: #8d1730;
  --coral: #c65f4a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--verde);
  background-image: radial-gradient(ellipse 120% 60% at 50% -5%, rgba(233, 226, 205, 0.07), transparent 60%);
  color: var(--sobre-verde);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem; }

::selection { background: var(--esmalte); color: var(--porcelana-luz); }

/* ---------- Tipos de letra del mundo ---------- */

.didona {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.leyenda {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- Cabecera ---------- */

header {
  border-bottom: 1px solid rgba(233, 226, 205, 0.25);
}
.header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
}
.brand {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--porcelana-luz);
  text-decoration: none;
  white-space: nowrap;
}
nav { display: flex; gap: 1.4rem; }
nav a {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sobre-verde-suave);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
nav a:hover { color: var(--porcelana-luz); border-color: var(--filete-oro); }

/* ---------- La placa (etiqueta) ---------- */

.placa {
  position: relative;
  background: var(--porcelana);
  background-image: linear-gradient(160deg, var(--porcelana-luz) 0%, var(--porcelana) 55%, #f0ebdd 100%);
  color: var(--tinta);
  border-radius: 3px;
  padding: 2.5rem 2rem;
  box-shadow: 0 14px 34px -18px rgba(4, 18, 13, 0.85);
}
.placa::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--filete);
  border-radius: 2px;
  pointer-events: none;
}
.placa::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(39, 77, 63, 0.35);
  border-radius: 1px;
  pointer-events: none;
}
.placa > * { position: relative; z-index: 1; }

/* ---------- Portada: la etiqueta grande ---------- */

.hero { padding: 3.5rem 0 4rem; }
.hero .placa {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 2.25rem 2.75rem;
}

.ornamento { color: var(--filete-oro); display: inline-block; line-height: 1; }

.esquinero {
  position: absolute;
  width: 26px;
  height: 26px;
  color: var(--filete-oro);
  z-index: 1;
}
.esquinero svg { display: block; width: 100%; height: 100%; }
.esquinero[data-pos="tl"] { top: 15px; left: 15px; }
.esquinero[data-pos="tr"] { top: 15px; right: 15px; transform: rotate(90deg); }
.esquinero[data-pos="br"] { bottom: 15px; right: 15px; transform: rotate(180deg); }
.esquinero[data-pos="bl"] { bottom: 15px; left: 15px; transform: rotate(270deg); }
.hero .ornamento svg { display: block; margin: 0 auto; }

.hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  color: var(--tinta);
  line-height: 1.04;
  margin: 1.1rem 0 0.4rem;
}
.hero h1 .titulo {
  display: block;
  font-size: clamp(2rem, 6.5vw, 3.1rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 .subtitulo {
  display: block;
  margin-top: 0.9rem;
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--esmalte);
}

.pincelada {
  display: block;
  width: min(13rem, 62%);
  margin: 0.9rem auto 1.1rem;
}
.pincelada svg { display: block; width: 100%; height: auto; }
.pincelada .trazo { clip-path: inset(0 100% 0 0); }
.pintada .pincelada .trazo { animation: pintar 0.9s cubic-bezier(0.25, 0.7, 0.3, 1) 0.25s forwards; }
@keyframes pintar { to { clip-path: inset(0 0 0 0); } }

.hero .lead {
  font-size: 1.1rem;
  color: var(--tinta-suave);
  max-width: 28rem;
  margin: 0 auto 1.8rem;
  text-wrap: pretty;
}

.hero .pie-etiqueta {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(39, 77, 63, 0.3);
  color: var(--tinta-suave);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
}

/* ---------- Botón sello ---------- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--esmalte);
  background-image: linear-gradient(180deg, #c22a49 0%, var(--esmalte) 45%, var(--esmalte-hondo) 100%);
  color: var(--porcelana-luz);
  text-decoration: none;
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--esmalte-hondo);
  box-shadow: 0 6px 16px -8px rgba(141, 23, 48, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(253, 250, 242, 0.55);
  border-radius: 999px;
  pointer-events: none;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(141, 23, 48, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cta:active { transform: translateY(1px) scale(0.99); box-shadow: 0 3px 8px -6px rgba(141, 23, 48, 0.9); }
.cta svg { flex-shrink: 0; }
.cta:focus-visible, nav a:focus-visible, a:focus-visible {
  outline: 2px solid var(--filete-oro);
  outline-offset: 3px;
}

/* ---------- Encabezado de sección sobre el verde ---------- */

.titulo-seccion {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
  color: var(--sobre-verde);
}
.titulo-seccion h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.titulo-seccion::before,
.titulo-seccion::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(185, 154, 95, 0.55), transparent);
}

section { padding: 2.6rem 0; }

/* ---------- Lista de servicios: una sola placa a dos columnas ---------- */

.servicios-placa { padding: 2.75rem 2.5rem; }
.servicios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
}
@media (min-width: 640px) {
  .servicios-grid {
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 2.5rem;
  }
  .servicios-grid .division {
    background: linear-gradient(180deg, transparent, rgba(39, 77, 63, 0.35) 15%, rgba(39, 77, 63, 0.35) 85%, transparent);
  }
}
.servicio .muestra { display: block; width: 3.8rem; margin-bottom: 0.9rem; }
.servicio .muestra svg { display: block; width: 100%; height: auto; }
.servicio h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 0.7rem;
}
.servicio ul { list-style: none; margin-bottom: 1.1rem; }
.servicio li {
  color: var(--tinta-suave);
  font-size: 0.98rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(39, 77, 63, 0.18);
}
.servicio li:last-child { border-bottom: 0; }
.servicio .ver {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--esmalte);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 30, 60, 0.4);
  padding-bottom: 0.15rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.servicio .ver:hover { color: var(--esmalte-hondo); border-color: var(--esmalte-hondo); }
.servicios-placa .nota-servicios {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(39, 77, 63, 0.3);
  text-align: center;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  font-style: italic;
}

/* ---------- Modo de uso: sobre el verde, sin placa ---------- */

.modo-uso { max-width: 34rem; margin: 0 auto; }
.pasos { list-style: none; position: relative; }
.pasos::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0.8rem;
  bottom: 0.8rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(185, 154, 95, 0.5) 12%, rgba(185, 154, 95, 0.5) 88%, transparent);
}
.pasos li { display: flex; gap: 1.4rem; padding: 1rem 0; position: relative; }
.pasos .numero {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--verde);
  background: var(--porcelana);
  border: 1px solid var(--filete-oro);
  border-radius: 50%;
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -6px rgba(4, 18, 13, 0.8);
}
.pasos strong {
  display: block;
  color: var(--porcelana-luz);
  font-weight: 600;
  font-size: 1.08rem;
  margin-bottom: 0.15rem;
}
.pasos span { color: var(--sobre-verde-suave); font-size: 0.98rem; }

/* ---------- Zona ---------- */

.zona-placa { text-align: center; padding: 2.5rem 2.25rem; }
.zona-placa .parrafo {
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  color: var(--tinta-suave);
}
.barrios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.4rem;
  row-gap: 0.55rem;
  max-width: 36rem;
  margin: 0 auto 1.4rem;
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.barrios .separador { color: var(--filete-oro); display: inline-flex; align-items: center; }
.barrios .separador svg { display: block; }
.zona-placa .nota {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--tinta-suave);
}

/* ---------- Preguntas ---------- */

.faq-placa { padding: 2.5rem 2.5rem 2rem; }
.faq-placa details { border-bottom: 1px solid rgba(39, 77, 63, 0.22); }
.faq-placa details:last-of-type { border-bottom: 0; }
.faq-placa summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--tinta);
  padding: 1rem 2rem 1rem 0;
  position: relative;
  transition: color 0.2s ease;
}
.faq-placa summary:hover { color: var(--esmalte); }
.faq-placa summary::-webkit-details-marker { display: none; }
.faq-placa summary::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.5px solid var(--filete-oro);
  border-bottom: 1.5px solid var(--filete-oro);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}
.faq-placa details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-placa .respuesta { overflow: hidden; }
.faq-placa .respuesta p {
  color: var(--tinta-suave);
  font-size: 0.98rem;
  padding: 0 0 1.1rem;
  max-width: 40rem;
}

/* ---------- Cierre: el sello ---------- */

.cierre { text-align: center; padding: 3.5rem 0 4.5rem; }
.sello { display: block; width: 9.5rem; margin: 0 auto 1.4rem; color: var(--filete-oro); }
.sello svg { display: block; width: 100%; height: auto; }
.cierre h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--porcelana-luz);
  margin-bottom: 0.5rem;
}
.cierre p { color: var(--sobre-verde-suave); margin-bottom: 1.7rem; }

/* ---------- Pie ---------- */

footer {
  background: var(--verde-hondo);
  border-top: 1px solid rgba(185, 154, 95, 0.35);
  padding: 1.9rem 0 2.6rem;
  text-align: center;
}
footer p {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sobre-verde-suave);
}

/* ---------- Páginas de servicio ---------- */

.detalle-hero { padding: 3.2rem 0 1rem; }
.detalle-hero .placa {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  padding: 2.75rem 2.25rem 2.5rem;
}
.detalle-hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  color: var(--tinta);
  font-size: clamp(1.8rem, 5.5vw, 2.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 1rem 0 0.4rem;
  text-wrap: balance;
}
.detalle-hero .lead {
  font-size: 1.06rem;
  color: var(--tinta-suave);
  max-width: 30rem;
  margin: 0.8rem auto 1.7rem;
  text-wrap: pretty;
}

.detalle-cuerpo { max-width: 42rem; margin: 0 auto; }
.detalle-cuerpo .placa { padding: 2.4rem 2.25rem; margin-bottom: 0; }
.detalle-cuerpo h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 1rem;
}
.detalle-cuerpo ul { list-style: none; margin-bottom: 0.4rem; }
.detalle-cuerpo li {
  color: var(--tinta-suave);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(39, 77, 63, 0.18);
}
.detalle-cuerpo li:last-child { border-bottom: 0; }
.detalle-cuerpo .nota {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--tinta-suave);
}
.detalle-cuerpo .prosa p { margin-bottom: 1rem; color: var(--sobre-verde); }
.detalle-cuerpo .prosa p:last-child { margin-bottom: 0; }
.detalle-cuerpo .prosa a { color: var(--porcelana-luz); text-decoration-color: var(--filete-oro); text-underline-offset: 3px; }
.detalle-cuerpo .prosa a:hover { text-decoration-color: var(--porcelana-luz); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pincelada .trazo, .pintada .pincelada .trazo { clip-path: none; animation: none; }
  .cta, .cta:hover, .cta:active { transform: none; transition: none; }
}

/* ---------- Ajustes chicos ---------- */

@media (max-width: 480px) {
  .header-inner { flex-direction: column; align-items: center; gap: 0.5rem; }
  .placa { padding: 2rem 1.4rem; }
  .hero .placa { padding: 2.4rem 1.5rem 2.2rem; }
  .servicios-placa { padding: 2.2rem 1.5rem; }
  .faq-placa { padding: 2rem 1.4rem 1.6rem; }
}