/* Look a la medida de Javier Camargo Tattoo: tatuador de autor en El Poblado.
   Se carga después del kit. Motivo: el logo dorado de línea fina (contornos dobles y estrella de ocho puntas)
   sobre negro cálido. Titulares en Marcellus, trazos de 1 px y esquinas casi rectas. */

@font-face { font-family: "Marcellus"; src: url("marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Marcellus dibuja el 1 como "I" y el 0 como "O": los dígitos salen de Figtree (la misma del cuerpo). */
@font-face { font-family: "Cifras"; src: url("../../fuentes/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; unicode-range: U+0030-0039; font-display: swap; }

body.tema-firma {
  --f-titulos: "Cifras", "Marcellus", Georgia, serif;
  --r-s: 2px; --r-m: 3px; --r-l: 4px;
  --linea: rgb(201 162 75 / .28);
  --linea-fuerte: rgb(201 162 75 / .6);
  --estrella: polygon(50% 0, 56% 38%, 85% 15%, 62% 44%, 100% 50%, 62% 56%, 85% 85%, 56% 62%, 50% 100%, 44% 62%, 15% 85%, 38% 56%, 0 50%, 38% 44%, 15% 15%, 44% 38%);
}
.tema-firma h1, .tema-firma h2, .tema-firma h3 { font-weight: 400; font-synthesis: none; letter-spacing: .005em; }
.tema-firma .seccion + .seccion, .tema-firma .seccion + .seccion--oscura, .tema-firma .seccion--oscura + .seccion { border-top: 1px solid var(--linea); }

/* Franja de propuesta y encabezado */
.tema-firma .demo { background: #000; border-bottom: 1px solid var(--linea); }
.tema-firma .cab__isla { border-radius: 3px; border: 1px solid var(--linea); box-shadow: 0 18px 40px -22px #000; }
.tema-firma .marca { color: var(--c-texto); font: 400 1.2rem var(--f-titulos); letter-spacing: .12em; text-transform: uppercase; }
.tema-firma .marca img { width: auto; height: 2.7rem; }
@media (max-width: 40rem) { .tema-firma .marca { font-size: .9rem; letter-spacing: .1em; line-height: 1.25; } .tema-firma .marca img { height: 2.4rem; } }
.tema-firma .cab__nav a { border-radius: 2px; }
.tema-firma .cab__nav a:hover { background: var(--c-menta); color: var(--c-acento-texto); }

/* Botones */
.tema-firma .btn { border-radius: 2px; font-weight: 600; letter-spacing: .03em; }
.tema-firma .btn--primario, .tema-firma .btn--acento { box-shadow: none; }
.tema-firma .btn--borde, .tema-firma .btn--borde-claro { color: var(--c-acento-texto); border-color: var(--linea-fuerte); }
.tema-firma .btn--borde:hover, .tema-firma .btn--borde-claro:hover { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento); }
.tema-firma .btn--texto { color: var(--c-acento-texto); }

/* Portada */
.tema-firma .portada { padding-bottom: 5.5rem; }
.tema-firma .mancha--a { width: 30rem; height: 30rem; background: #8a6a24; opacity: .2; top: -12rem; right: -8rem; }
.tema-firma .mancha--b, .tema-firma .mancha--c { display: none; }
.tema-firma .portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--linea-fuerte) 20%, var(--linea-fuerte) 80%, transparent); }
.tema-firma .portada h1 { font-size: clamp(2.75rem, 10.4vw, 5rem); line-height: 1.05; text-wrap: balance; }
.tema-firma .portada__lead { color: rgb(242 235 221 / .84); max-width: 32rem; }
.tema-firma .insignia { color: var(--c-acento-texto); font-weight: 500; letter-spacing: .06em; margin: 0 0 1rem; }
.tema-firma .estado { border-radius: 2px; background: rgb(255 255 255 / .04); border-color: var(--linea); }
.tema-firma .portada__nota { color: rgb(242 235 221 / .7); }
.tema-firma .portada__nota svg { color: var(--c-acento-texto); }
.tema-firma .confianza { max-width: 38rem; }
.tema-firma .confianza li { border-left: 1px solid var(--linea-fuerte); padding-left: .9rem; }
.tema-firma .confianza strong { font: 400 1.25rem/1.15 var(--f-titulos); color: var(--c-acento-texto); letter-spacing: .01em; }
.tema-firma .confianza span { color: rgb(242 235 221 / .68); }
.tema-firma .portada__visual { width: min(100%, 27rem); margin-inline: auto; }
@media (min-width: 62rem) { .tema-firma .portada__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3.5rem; } }

/* Foto de portada: marco de dos líneas como el logo, con la estrella encima */
.tema-firma .marco { position: relative; margin-left: 0; padding: .9rem; border: 1px solid var(--linea-fuerte); margin-top: 1.1rem; }
.tema-firma .marco::before { content: ""; position: absolute; inset: .35rem; border: 1px solid var(--linea); pointer-events: none; }
.tema-firma .marco::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5rem; height: 1.5rem; transform: translate(-50%, -50%); background: var(--c-acento-texto); clip-path: var(--estrella); box-shadow: 0 0 0 .5rem var(--c-profundo); }
.tema-firma .forma-foto--marco { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 40%; }
.tema-firma .tarjeta { border-radius: 2px; background: color-mix(in srgb, var(--c-superficie) 95%, transparent); color: var(--c-texto); border: 1px solid var(--linea-fuerte); box-shadow: 0 22px 44px -14px #000; }
.tema-firma .tarjeta > .i { border-radius: 2px; background: var(--c-menta); color: var(--c-acento-texto); }
.tema-firma .tarjeta em { color: var(--c-acento-texto); }

/* Secciones */
.tema-firma .seccion__cab { max-width: 44rem; }
.tema-firma .seccion__cab h2 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.08; }
.tema-firma .seccion__cab p { color: var(--c-texto-suave); }
.tema-firma .tabs { border-radius: 2px; border: 1px solid var(--linea); box-shadow: none; padding: .25rem; }
.tema-firma .tab, .tema-firma .tabs__marca { border-radius: 1px; }
.tema-firma .tab { color: var(--c-texto-suave); letter-spacing: .02em; }
.tema-firma .tab[aria-selected="true"] { color: var(--c-sobre-acento); }
.tema-firma .tabs__marca { background: var(--c-acento); }
.tema-firma .tabpanel { border: 1px solid var(--linea); }
.tema-firma .tabpanel__intro h3 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; }
.tema-firma .tabpanel__intro p { color: var(--c-texto-suave); }

/* Tarjetas de servicio: foto al lado, precio en dorado */
.tema-firma .servicio { border-radius: 2px; background: var(--c-superficie); border: 1px solid var(--linea); box-shadow: none; transition: border-color .3s, transform .3s var(--ease); }
.tema-firma .servicio:hover { border-color: var(--linea-fuerte); transform: translateY(-3px); box-shadow: none; }
.tema-firma .servicio__nombre { font-weight: 500; }
.tema-firma .servicio__precio { font: 400 1.55rem/1.1 var(--f-titulos); color: var(--c-acento-texto); }
.tema-firma .servicio__accion { color: var(--c-texto); font-weight: 500; }
.tema-firma .servicio__foto { filter: saturate(.92) contrast(1.04); border-right: 1px solid var(--linea); }
.tema-firma .servicio--foto .servicio__cuerpo { padding-left: 1rem; }
.tema-firma .cotiza { border-radius: 2px; background: var(--c-menta); border: 1px solid var(--linea-fuerte); }
.tema-firma .cotiza h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); line-height: 1.12; }
.tema-firma .servicios__nota { color: var(--c-texto-suave); }

/* Pasos */
.tema-firma .seccion--pasos { background: var(--c-superficie); }
.tema-firma .pasos h3 { font-size: 1.5rem; line-height: 1.15; }
.tema-firma .pasos p { color: var(--c-texto-suave); }
.tema-firma .paso-num { border-radius: 50%; background: transparent; border: 1px solid var(--linea-fuerte); box-shadow: none; color: var(--c-acento-texto); font: 400 1.4rem var(--f-titulos); }
.tema-firma .pasos li:not(:last-child)::after { border-top-color: var(--linea); }

/* Galería: marcos finos, pie en la esquina */
.tema-firma .galeria { gap: .7rem; }
.tema-firma .foto { border-radius: 0; background: var(--c-menta); outline: 1px solid var(--linea); outline-offset: -1px; }
.tema-firma .foto img { object-position: center 30%; }
.tema-firma .foto span { border-radius: 0; background: rgb(7 6 5 / .86); font-weight: 500; letter-spacing: .03em; border-top: 1px solid var(--linea); border-right: 1px solid var(--linea); }
.tema-firma .foto:focus-visible { outline: 2px solid var(--c-acento-texto); outline-offset: -4px; }
@media (min-width: 62rem) {
  .tema-firma #trabajos .galeria { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 14rem; }
}

/* Sobre Javier (bloque equipo con un solo perfil) */
.tema-firma .seccion--oscura { background: var(--c-profundo); }
.tema-firma .equipo { grid-template-columns: 1fr; max-width: 56rem; }
.tema-firma .perfil { background: transparent; border: 0; padding: 0; gap: 1.4rem; grid-template-columns: 1fr; }
.tema-firma .perfil:hover { background: transparent; transform: none; }
@media (min-width: 40rem) { .tema-firma .perfil { grid-template-columns: 17rem 1fr; gap: 2.6rem; align-items: center; } }
.tema-firma .perfil__foto { border-radius: 0; aspect-ratio: 4 / 5; padding: .6rem; background: transparent; border: 1px solid var(--linea-fuerte); overflow: visible; position: relative; }
.tema-firma .perfil__foto::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.2rem; height: 1.2rem; transform: translate(-50%, -50%); background: var(--c-acento-texto); clip-path: var(--estrella); box-shadow: 0 0 0 .4rem var(--c-profundo); }
.tema-firma .perfil__foto img { object-position: 50% 30%; }
.tema-firma .perfil h3 { font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.05; }
.tema-firma .perfil__texto > p:not(.perfil__proxima):not(.perfil__bio) { color: var(--c-acento-texto); letter-spacing: .04em; font-weight: 500; }
.tema-firma .perfil__bio { margin: .9rem 0 1.4rem; max-width: 34rem; color: rgb(242 235 221 / .82); line-height: 1.6; }
.tema-firma .perfil__proxima { color: var(--c-acento-texto); }

/* Preguntas */
.tema-firma .faq, .tema-firma .faq__item { border-color: var(--linea); }
.tema-firma .faq__item button { font: 400 1.3rem/1.25 var(--f-titulos); padding: 1.15rem 0; letter-spacing: .005em; }
.tema-firma .faq__item button .i { border-radius: 50%; background: transparent; border: 1px solid var(--linea-fuerte); color: var(--c-acento-texto); }
.tema-firma .faq__item.abierto button .i { background: var(--c-acento); color: var(--c-sobre-acento); border-color: var(--c-acento); }
.tema-firma .faq__cuerpo p { font-size: 1.05rem; }

/* Reserva */
.tema-firma .reserva, .tema-firma .listo { border: 1px solid var(--linea); box-shadow: none; border-radius: 2px; }
.tema-firma .grupo legend { color: var(--c-acento-texto); letter-spacing: .03em; }
.tema-firma .opcion__caja, .tema-firma .dia, .tema-firma .hora, .tema-firma .campo input[type="text"], .tema-firma .campo input[type="tel"], .tema-firma .campo input[type="email"] { background: var(--c-fondo); border-color: var(--linea); border-radius: 2px; }
.tema-firma .opcion input:checked + .opcion__caja { background: var(--c-menta); border-color: var(--c-acento); }
.tema-firma .opcion:hover .opcion__caja, .tema-firma .hora:hover, .tema-firma .dia:hover:not([disabled]) { border-color: var(--c-acento-texto); }
.tema-firma .dia, .tema-firma .hora { color: var(--c-texto); }
.tema-firma .dia strong { font: 400 1.7rem var(--f-titulos); }
.tema-firma .dia[aria-pressed="true"], .tema-firma .hora[aria-pressed="true"] { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-sobre-acento); }
.tema-firma .dia[aria-pressed="true"] small, .tema-firma .dia[aria-pressed="true"] em { color: var(--c-sobre-acento); }
.tema-firma .dia em { color: var(--c-acento-texto); }
.tema-firma .resumen-cita { border-radius: 2px; border: 1px solid var(--linea-fuerte); background: radial-gradient(circle at 90% 0%, rgb(201 162 75 / .22), transparent 58%), linear-gradient(160deg, #1d1710, #100d09); box-shadow: none; }
.tema-firma .resumen-cita__quien strong { font: 400 1.4rem var(--f-titulos); }
.tema-firma .listo h3 { font-size: 2.3rem; }
.tema-firma .listo__detalle { color: var(--c-acento-texto) !important; }
.tema-firma .resumen-cita__foto { background: rgb(255 255 255 / .1); color: var(--c-acento-texto); }

/* Ubicación y pie */
.tema-firma .dato, .tema-firma .horario-tarjeta { border: 1px solid var(--linea); box-shadow: none; border-radius: 2px; }
.tema-firma .dato .i { border-radius: 2px; color: var(--c-acento-texto); }
.tema-firma .horario .hoy > * { color: var(--c-texto); background: var(--c-menta); }
.tema-firma .pie { border-top: 1px solid var(--linea); }
.tema-firma .pie__logo { width: auto; height: 3.4rem; border-radius: 0; background: transparent; }
.tema-firma .pie__logo img { width: auto; height: 3.4rem; }
.tema-firma .pie__marca strong { font: 400 1.25rem var(--f-titulos); letter-spacing: .1em; text-transform: uppercase; }
.tema-firma .legal h1 { font-size: 2.8rem; }
@media (min-width: 62rem) { .tema-firma #trabajos .foto:last-child { grid-column: span 2; } }