/* Look a la medida de Rolanart Studio: estudio de tatuajes de realismo y diseño personalizado.
   Se carga después del kit. Motivo: las facetas triangulares de su logo, en morado sobre negro. */

@font-face { font-family: "Big Shoulders Display"; src: url("big-shoulders-display-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

body.tema-estudio { --r-s: 6px; --r-m: 8px; --r-l: 10px; --faceta: polygon(0 9%, 13% 0, 100% 0, 100% 90%, 87% 100%, 0 100%); }
.tema-estudio h1, .tema-estudio h2 { text-transform: uppercase; letter-spacing: .005em; line-height: .94; font-weight: 800; }

/* Franja de propuesta y encabezado */
.tema-estudio .demo { background: #000; border-bottom: 1px solid rgb(255 255 255 / .12); }
.tema-estudio .cab__isla { border-radius: 10px; border: 1px solid rgb(255 255 255 / .09); box-shadow: 0 18px 40px -22px #000; }
.tema-estudio .marca { color: var(--c-texto); font-weight: 800; font-size: 1.4rem; letter-spacing: .06em; text-transform: uppercase; }
.tema-estudio .marca img { width: 2.15rem; height: 2.15rem; border-radius: 50%; }
.tema-estudio .cab__nav a:hover { background: var(--c-menta); color: var(--c-texto); }
.tema-estudio .cab__nav a { border-radius: 6px; }

/* Botones */
.tema-estudio .btn { border-radius: 6px; font-weight: 700; letter-spacing: .01em; }
.tema-estudio .btn--primario { box-shadow: 0 10px 24px -12px var(--c-acento); }
.tema-estudio .btn--borde { color: var(--c-acento-texto); border-color: color-mix(in srgb, var(--c-acento-texto) 55%, transparent); }
.tema-estudio .btn--borde:hover { background: var(--c-acento); border-color: var(--c-acento); color: #fff; }
.tema-estudio .btn--texto { color: var(--c-acento-texto); }

/* Portada: título enorme y condensado, foto con esquinas cortadas como las facetas del logo */
.tema-estudio .portada { padding-bottom: 6.5rem; }
@media (min-width: 62rem) { .tema-estudio .portada { padding-top: calc(var(--alto-cab) + 1.5rem); } }
.tema-estudio .portada::before { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -34%; width: 62%; aspect-ratio: 1; background: linear-gradient(150deg, rgb(124 58 237 / .2), transparent 62%); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.tema-estudio .mancha--a { width: 34rem; height: 34rem; background: #5b21b6; opacity: .32; top: -14rem; right: -10rem; }
.tema-estudio .mancha--b, .tema-estudio .mancha--c { display: none; }
.tema-estudio .portada h1 { font-size: clamp(3.4rem, 14vw, 6.4rem); line-height: .9; letter-spacing: 0; text-wrap: balance; }
.tema-estudio .portada__lead { color: rgb(243 239 250 / .86); max-width: 31rem; }
.tema-estudio .insignia { color: var(--c-acento-texto); font-weight: 700; letter-spacing: .04em; margin: 0 0 .9rem; }
.tema-estudio .estado { border-radius: 6px; background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); }
.tema-estudio .portada__nota { color: rgb(243 239 250 / .72); }
.tema-estudio .portada__nota svg { color: var(--c-acento-texto); }
.tema-estudio .confianza { max-width: 38rem; }
.tema-estudio .confianza li { border-left: 3px solid var(--c-acento); padding-left: .85rem; }
.tema-estudio .confianza strong { font-size: 1.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.tema-estudio .confianza span { color: rgb(243 239 250 / .7); }
.tema-estudio .portada__visual { width: min(100%, 29rem); margin-inline: auto; }
.tema-estudio .marco { position: relative; margin-left: 0; }
.tema-estudio .marco::before { content: ""; position: absolute; inset: 0; transform: translate(-7%, 5%); background: linear-gradient(160deg, var(--c-acento), rgb(124 58 237 / .08) 75%); clip-path: var(--faceta); }
.tema-estudio .forma-foto--faceta { position: relative; aspect-ratio: 4 / 5; clip-path: var(--faceta); background: var(--c-menta); object-position: 50% 30%; }
.tema-estudio .tarjeta { border-radius: 8px; background: color-mix(in srgb, var(--c-superficie) 94%, transparent); color: var(--c-texto); border: 1px solid rgb(255 255 255 / .1); box-shadow: 0 22px 44px -14px #000; }
.tema-estudio .tarjeta > .i { border-radius: 6px; background: var(--c-menta); color: var(--c-acento-texto); }
.tema-estudio .tarjeta em { color: var(--c-acento-texto); }
@media (min-width: 62rem) { .tema-estudio .portada__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; } }

/* Secciones */
.tema-estudio .seccion__cab { max-width: 46rem; }
.tema-estudio .seccion__cab h2 { font-size: clamp(2.8rem, 9vw, 5rem); }
.tema-estudio .tabs { border-radius: 10px; border: 1px solid rgb(255 255 255 / .08); box-shadow: none; }
.tema-estudio .tab, .tema-estudio .tabs__marca { border-radius: 7px; }
.tema-estudio .tab { color: var(--c-texto-suave); }
.tema-estudio .tab[aria-selected="true"] { color: #fff; }
.tema-estudio .tabpanel { border: 1px solid rgb(255 255 255 / .07); }
.tema-estudio .tabpanel__intro h3 { font-size: 2.4rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.tema-estudio .servicio { border-radius: 8px; background: var(--c-superficie); border: 1px solid rgb(255 255 255 / .07); box-shadow: none; transition: transform .3s var(--ease), border-color .3s; }
.tema-estudio .servicio:hover { border-color: var(--c-acento); box-shadow: 0 18px 36px -22px var(--c-acento); }
.tema-estudio .servicio__precio { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.tema-estudio .servicio__accion { color: var(--c-acento-texto); }
.tema-estudio .cotiza { border-radius: 10px; background: var(--c-menta); }
.tema-estudio .cotiza h3 { font-size: 2rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.tema-estudio .seccion--pasos { background: var(--c-superficie); }
.tema-estudio .pasos h3 { font-size: 1.9rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.tema-estudio .paso-num { border-radius: 8px; box-shadow: none; font-size: 1.6rem; font-weight: 800; background: var(--c-acento); }
.tema-estudio .pasos li:not(:last-child)::after { border-top-color: rgb(196 181 253 / .35); }

/* Galería: fotos con esquina cortada */
.tema-estudio .galeria { gap: .6rem; }
.tema-estudio .foto { border-radius: 4px; clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 1.6rem 100%, 0 calc(100% - 1.6rem)); background: var(--c-menta); }
.tema-estudio .foto span { border-radius: 4px; background: rgb(8 5 13 / .82); font-weight: 650; }
.tema-estudio .foto:focus-visible { outline-offset: -4px; }

#estudio .galeria { grid-template-columns: 1fr; grid-auto-rows: 22rem; }
@media (min-width: 40rem) { #estudio .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 28rem; } }

/* Preguntas */
.tema-estudio .faq__item button { font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; text-transform: uppercase; padding: 1.1rem 0; }
.tema-estudio .faq__item button .i { border-radius: 6px; background: var(--c-menta); color: var(--c-acento-texto); }
.tema-estudio .faq__cuerpo p { font-size: 1.05rem; }

/* Reserva */
.tema-estudio .reserva, .tema-estudio .listo { border: 1px solid rgb(255 255 255 / .08); box-shadow: none; }
.tema-estudio .grupo legend { color: var(--c-acento-texto); }
.tema-estudio .opcion__caja, .tema-estudio .dia, .tema-estudio .hora, .tema-estudio .campo input[type="text"], .tema-estudio .campo input[type="tel"], .tema-estudio .campo input[type="email"] { background: var(--c-fondo); border-color: rgb(255 255 255 / .13); border-radius: 8px; }
.tema-estudio .opcion input:checked + .opcion__caja { background: var(--c-menta); border-color: var(--c-acento); }
.tema-estudio .opcion:hover .opcion__caja, .tema-estudio .hora:hover, .tema-estudio .dia:hover:not([disabled]) { border-color: var(--c-acento-texto); }
.tema-estudio .dia, .tema-estudio .hora { color: var(--c-texto); }
.tema-estudio .dia strong { font-size: 1.9rem; font-weight: 800; }
.tema-estudio .dia[aria-pressed="true"], .tema-estudio .hora[aria-pressed="true"] { background: var(--c-acento); border-color: var(--c-acento); color: #fff; }
.tema-estudio .dia[aria-pressed="true"] small, .tema-estudio .dia[aria-pressed="true"] em { color: rgb(255 255 255 / .9); }
.tema-estudio .dia em { color: var(--c-acento-texto); }
.tema-estudio .resumen-cita { border-radius: 10px; border: 1px solid rgb(255 255 255 / .08); background: radial-gradient(circle at 90% 0%, rgb(124 58 237 / .45), transparent 58%), linear-gradient(160deg, #1d1033, #120a22); box-shadow: none; }
.tema-estudio .resumen-cita__quien strong { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.tema-estudio .listo h3 { font-size: 2.6rem; font-weight: 800; text-transform: uppercase; }
.tema-estudio .listo__detalle { color: var(--c-acento-texto) !important; }
.tema-estudio .resumen-cita__foto { border-radius: 50%; background: rgb(255 255 255 / .12); color: var(--c-acento-texto); }
.tema-estudio .resumen-cita__foto img { object-position: center; }

/* Ubicación y pie */
.tema-estudio .dato, .tema-estudio .horario-tarjeta { border: 1px solid rgb(255 255 255 / .07); box-shadow: none; border-radius: 8px; }
.tema-estudio .dato .i { border-radius: 6px; color: var(--c-acento-texto); }
.tema-estudio .horario .hoy > * { color: var(--c-texto); background: var(--c-menta); }
.tema-estudio .pie__logo { border-radius: 50%; background: transparent; }
.tema-estudio .pie__logo img { width: 3.2rem; border-radius: 50%; }
.tema-estudio .pie__marca strong { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.tema-estudio .pie { border-top: 1px solid rgb(255 255 255 / .08); }
.tema-estudio .legal h1 { font-size: 3.2rem; }

/* Fotos de los precios: borde derecho inclinado, como las facetas del logo. */
.tema-estudio .servicio__foto { clip-path: polygon(0 0, 100% 0, calc(100% - 1.1rem) 100%, 0 100%); filter: saturate(.95) contrast(1.03); }
.tema-estudio .servicio--foto .servicio__cuerpo { padding-left: .9rem; }

/* Titulares en mayúsculas: la caja de cada palabra recortaba la tilde de la Ó/Á/É. */
.tema-estudio .pal { padding-top: .22em; margin-top: -.22em; }