/*
 * Pitaya3D · estilos de la tienda, cargados después de los de Bagisto (resources/views/pitaya/head.blade.php).
 * Superficies neutras como el PLA blanco, acción en el magenta del logo, verde escama para WhatsApp y grafito
 * como la cama de la impresora. Letra: Unbounded en los títulos y Rethink Sans en el texto.
 */

:root {
    --pitaya: #B5127A;
    --pitaya-hover: #8F0E60;
    --pitaya-suave: #FBE7F1;
    --escama: #2C8227;
    --escama-hover: #246E20;
    --pino: #1F5E2E;
    --lienzo: #FFFFFF;
    --superficie: #F5F5F7;
    --superficie-2: #EEEEF1;
    --separador: #E6E6EA;
    --borde: #DCDCE1;
    --grafito: #1F1D24;
    --texto-2: #5B5862;
    --texto-3: #4A4752;
    --placeholder: #6B6873;
    --cama: #24222A;
    --rosa: #F06AB8;
    --error: #B3261E;
    --exito: #E8F5E6;
    --titulo: 'Unbounded', 'Rethink Sans', sans-serif;
    --texto: 'Rethink Sans', system-ui, sans-serif;
    --capas: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px);
    --sombra-tarjeta: 0 10px 26px rgba(31, 29, 36, .12);
    --sombra-panel: 0 12px 28px rgba(31, 29, 36, .16);
    --sombra-flotante: 0 6px 18px rgba(31, 29, 36, .3);
}

/* Tipografía: Bagisto pone Poppins en todos los elementos con «*», así que la marca también va en «*» */

*, .font-poppins, .font-sans { font-family: var(--texto); }
body { color: var(--grafito); }
.font-dmserif { font-family: var(--titulo) !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: -.025em; }
h1.font-dmserif, h2.font-dmserif { line-height: 1.12; text-wrap: balance; }

/* Menú de categorías de Bagisto en tipo normal */

header .uppercase { text-transform: none !important; font-weight: 600; letter-spacing: 0; }
header a:hover .uppercase, header .uppercase:hover { color: var(--pitaya) !important; }

/* El azul marino de Bagisto: acciones en magenta; los fondos claros pasan a neutros */

.bg-navyBlue { background-color: var(--pitaya) !important; }
.text-navyBlue { color: var(--pitaya) !important; }
.border-navyBlue, .hover\:border-navyBlue:hover { border-color: var(--pitaya) !important; }
.bg-lightOrange { background-color: var(--superficie) !important; }
.bg-\[\#F1EADF\] { background-color: var(--superficie-2) !important; }
.border-\[\#e9decc\], .\!border-\[\#e9decc\] { border-color: var(--separador) !important; }

/* Botones planos */

.primary-button { background: var(--pitaya) !important; border-color: var(--pitaya) !important; border-radius: 12px !important; font-weight: 600 !important; }
.primary-button:hover { background: var(--pitaya-hover) !important; border-color: var(--pitaya-hover) !important; }
.secondary-button { color: var(--pitaya) !important; border: 2px solid var(--pitaya) !important; border-radius: 12px !important; font-weight: 600 !important; }
.secondary-button:hover { background: var(--superficie) !important; }

/* Tarjetas de producto: foto de estudio sobre superficie neutra, esquinas de 16px y sombra suave al pasar el mouse */

.rounded-xl > img, img.rounded-xl { border-radius: 16px !important; }
.group.w-full.rounded-md { border-radius: 16px !important; }
.group.w-full.rounded-md > .relative.overflow-hidden { border-radius: 16px; background: var(--superficie); }

@media (min-width: 1180px) {
    .group.w-full.rounded-md:hover { box-shadow: var(--sombra-tarjeta) !important; }
}

/* Superficies del navegador con la marca */

html { accent-color: var(--pitaya); scrollbar-color: #C9C8CF transparent; }
input, textarea { caret-color: var(--pitaya); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
::selection { background: rgba(181, 18, 122, .18); color: var(--grafito); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--pitaya) !important;
    outline-offset: 2px;
}

/* Pie: título del boletín en la letra de los títulos, sin itálica */

footer .italic { font-style: normal !important; font-family: var(--titulo) !important; font-weight: 600; letter-spacing: -.02em; line-height: 1.2 !important; color: var(--grafito) !important; }

/* Encabezado de escritorio: el logo no se encoge y el resto se compacta en pantallas medianas */

header a:has(+ .pit-menu) { flex-shrink: 0; }
header a:has(+ .pit-menu) img { width: auto; height: 28px; max-width: none; }

.pitaya-mundo-link {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    min-height: 44px; padding: 10px 16px; border-radius: 12px; white-space: nowrap;
    font-weight: 600; font-size: 15px; color: #fff !important; background: var(--cama);
}
.pitaya-mundo-link:hover { background: #000; }
.pitaya-mundo-link svg, .pitaya-mundo-fab svg { width: 18px; height: 18px; flex: none; color: var(--rosa); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1365px) {
    .pitaya-mundo-link { padding: 10px 13px; }
    .pitaya-mundo-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Burbuja del Mundo 3D en el celular: abajo a la derecha, lejos de los precios, y el pie deja espacio para que nunca tape lo último */

.pitaya-mundo-fab { display: none; }

@media (max-width: 1023px) {
    .pitaya-mundo-fab {
        display: inline-flex; position: fixed; right: 14px; bottom: 16px; z-index: 40;
        align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
        font-weight: 600; font-size: 15px; color: #fff !important;
        background: var(--cama); box-shadow: var(--sombra-flotante);
    }
    footer { padding-bottom: 76px; }
}

/* Carrusel de categorías de Bagisto: en pantallas chicas cada nombre ocupa su ancho y no se pisa con el siguiente */

@media (max-width: 767px) {
    .scrollbar-hide.flex.gap-10 > .grid { min-width: 64px !important; max-width: 96px !important; }
    .scrollbar-hide.flex.gap-10 > .grid p { line-height: 1.25; text-wrap: balance; overflow-wrap: break-word; }
}

/* Piezas comunes de las secciones */

.pit-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

.pit-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 26px; border-radius: 12px;
    font-family: var(--texto); font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none;
    background: var(--boton-fondo, var(--pitaya)); color: var(--boton-tinta, #fff) !important;
    transition: background-color .15s;
}
.pit-boton:hover { background: var(--boton-hover, var(--pitaya-hover)); }
.pit-boton-whatsapp, .pit-wa { background: var(--escama) !important; color: #fff !important; }
.pit-boton-whatsapp:hover, .pit-wa:hover { background: var(--escama-hover) !important; }

.pit-enlace, .pit-form-link { color: var(--enlace, var(--pitaya)); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.pit-pasos { list-style: none; counter-reset: paso; padding: 0; margin: 24px 0 28px; display: grid; gap: 14px; }
.pit-pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 14px; font-size: 17px; color: var(--grafito); }
.pit-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--superficie-2); color: var(--pitaya); font-family: var(--titulo); font-weight: 600; }

/* Fondos que se eligen en Admin → Apariencia; las capas recuerdan las de la impresión 3D */

.pit-fondo-magenta { --fondo: var(--pitaya); --tinta: #fff; --tinta-2: rgba(255, 255, 255, .88); --acento: #fff; --enlace: #fff; --boton-fondo: #fff; --boton-tinta: var(--pitaya); --boton-hover: var(--pitaya-suave); }
.pit-fondo-grafito { --fondo: var(--cama); --tinta: #fff; --tinta-2: #E9E2EA; --acento: var(--rosa); --enlace: #fff; --boton-fondo: var(--pitaya); --boton-tinta: #fff; --boton-hover: var(--pitaya-hover); }
.pit-fondo-verde { --fondo: var(--pino); --tinta: #fff; --tinta-2: rgba(255, 255, 255, .9); --acento: #fff; --enlace: #fff; --boton-fondo: #fff; --boton-tinta: var(--pino); --boton-hover: var(--exito); }
.pit-fondo-claro { --fondo: var(--superficie-2); --tinta: var(--grafito); --tinta-2: var(--texto-3); --acento: var(--pitaya-hover); --enlace: var(--pitaya); }
.pit-fondo-blanco { --fondo: #fff; --tinta: var(--grafito); --tinta-2: var(--texto-3); --acento: var(--pitaya-hover); --enlace: var(--pitaya); }

[class*="pit-fondo-"] { position: relative; isolation: isolate; background-color: var(--fondo); }
.pit-fondo-magenta::before, .pit-fondo-grafito::before, .pit-fondo-verde::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--capas); pointer-events: none; }

/* Portada con banners: el texto es texto, la imagen es imagen, y se desliza con el dedo */

.pit-portada { position: relative; }
.pit-portada-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pit-portada-pista::-webkit-scrollbar { display: none; }
.pit-portada-banner { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; color: var(--tinta); }
.pit-portada-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; max-width: 1280px; min-height: clamp(380px, 36vw, 540px); margin: 0 auto; padding: 0 32px; }
.pit-portada-texto { position: relative; z-index: 1; padding: 48px 0; }
.pit-portada-texto h2 { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: clamp(2rem, 1.1rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; color: var(--tinta); }
.pit-portada-texto p { max-width: 32em; margin: 20px 0 0; font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem); font-weight: 500; line-height: 1.5; color: var(--tinta-2); }
.pit-portada-texto .pit-boton { margin-top: 32px; }
.pit-portada-imagen { display: block; width: 100%; height: 100%; max-height: 540px; object-fit: contain; object-position: center bottom; align-self: end; }
.pit-imagen-foto .pit-portada-imagen { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; max-height: none; object-fit: cover; object-position: center; border-radius: 40px 0 0 40px; }

.pit-portada-controles { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px 0; }
.pit-portada-flecha, .pit-portada-pausa, .ph3-pausa { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--superficie); color: var(--grafito); cursor: pointer; transition: background-color .15s, color .15s; }
.pit-portada-flecha:hover, .pit-portada-pausa:hover, .ph3-pausa:hover { background: var(--superficie-2); color: var(--pitaya); }
.pit-portada-controles svg, .ph3-pausa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pit-icono-seguir { display: none; fill: currentColor; }
.pit-portada[data-en-pausa] .pit-icono-pausa, .ph3-pausa.en-pausa .pit-icono-pausa { display: none; }
.pit-portada[data-en-pausa] .pit-icono-seguir, .ph3-pausa.en-pausa .pit-icono-seguir { display: inline; }
.pit-portada-puntos { display: flex; }
.pit-portada-punto { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.pit-portada-punto::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--borde); transition: background-color .2s; }
.pit-portada-punto[aria-current]::before { width: 24px; background: var(--pitaya); }

@media (max-width: 899px) {
    .pit-portada-in { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0 20px; }
    .pit-portada-imagen { order: -1; height: 210px; max-height: none; margin-top: 16px; }
    .pit-imagen-foto .pit-portada-imagen { position: static; width: calc(100% + 40px); height: 220px; margin: 0 -20px; border-radius: 0 0 28px 28px; }
    .pit-portada-texto { padding: 18px 0 30px; }
    .pit-portada-texto h2 { font-size: clamp(1.75rem, 6.4vw, 2.4rem); }
    .pit-portada-texto p { margin-top: 12px; font-size: 1.05rem; }
    .pit-portada-texto .pit-boton { margin-top: 20px; }
}

/* Franja de aviso */

.pit-franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; padding: 16px 20px; font-size: 16px; text-align: center; color: var(--tinta); }
.pit-franja p { margin: 0; }
.pit-franja b { color: var(--acento); }
.pit-franja a { color: var(--enlace); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .pit-franja { padding: 14px 16px; font-size: 15px; }
}

/* Bloque destacado */

.pit-bloque { margin: 72px 0; color: var(--tinta); }
.pit-bloque-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 64px 24px; }
.pit-bloque-derecha .pit-bloque-in { grid-template-columns: 1fr 1.15fr; }
.pit-bloque-derecha .pit-bloque-imagen { order: 2; }
.pit-bloque-imagen img { display: block; width: 100%; border-radius: 20px; }
.pit-bloque h2 { margin: 0 0 18px; font-family: var(--titulo); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.45rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; color: var(--tinta); }
.pit-bloque p { max-width: 34em; margin: 0; font-size: 18px; line-height: 1.6; color: var(--tinta-2); }
.pit-bloque .pit-acciones { margin-top: 30px; }

@media (max-width: 899px) {
    .pit-bloque { margin: 48px 0; }
    .pit-bloque-in, .pit-bloque-derecha .pit-bloque-in { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px; }
    .pit-bloque-derecha .pit-bloque-imagen { order: 0; }
}

/* Piezas en 3D */

.ph3 { padding: 48px 0 28px; background: var(--superficie); }
.ph3 [hidden] { display: none !important; }
.ph3-in { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.ph3-texto:not([hidden]) { animation: ph3-entra .35s cubic-bezier(.16, 1, .3, 1); }
.ph3-texto h2 { margin: 0 0 18px; font-family: var(--titulo); font-weight: 600; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.03em; color: var(--grafito); text-wrap: balance; }
.ph3-texto p { max-width: 34em; margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--texto-3); }
.ph3-texto .ph3-precio { font-size: 17px; color: var(--texto-2); }
.ph3-texto .ph3-precio strong { font-size: 22px; color: var(--grafito); }
.ph3-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.ph3-cta { padding: 15px 28px; font-size: 16px; }
.ph3-enlace { font-weight: 700; color: var(--pitaya); text-decoration: underline; text-underline-offset: 4px; }

@keyframes ph3-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.ph3-escenario { position: relative; aspect-ratio: 7 / 6; border-radius: 16px; background: radial-gradient(circle at 50% 42%, #fff 0, var(--superficie) 62%, #E9E9ED 100%); }
.ph3-visor { width: 100%; height: 100%; --poster-color: transparent; }
.ph3-media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 16px; object-fit: contain; }
.ph3-ayuda { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); background: rgba(255, 255, 255, .85); pointer-events: none; }
.ph3-ar { position: absolute; right: 14px; bottom: 14px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; font-weight: 700; color: #fff; background: var(--grafito); cursor: pointer; }

.ph3-barra { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 22px auto 0; padding: 0 32px; }
.ph3-tabs { display: flex; flex: 1; gap: 10px; min-width: 0; margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.ph3-tab { display: flex; flex: none; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 2px solid transparent; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--grafito); background: #fff; cursor: pointer; transition: border-color .15s; }
.ph3-tab img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--superficie); }
.ph3-tab:hover { border-color: var(--borde); }
.ph3-tab[aria-selected=true] { border-color: var(--pitaya); color: var(--pitaya); }
.ph3-pausa { background: #fff; }

@media (max-width: 900px) {
    .ph3 { padding: 20px 0 18px; }
    .ph3-in { grid-template-columns: 1fr; gap: 18px; padding: 0 16px; }
    .ph3-escenario { order: -1; aspect-ratio: 1 / 1; max-height: 420px; }
    .ph3-texto h2 { font-size: 28px; }
    .ph3-texto p { font-size: 16px; }
    .ph3-barra { padding: 0 16px; }
}

/* Piezas en 3D con texto fijo a la izquierda (bloque Personalizados) */

.ph3-lateral { padding: 72px 0; background: #fff; }
.ph3-lateral .ph3-in { grid-template-columns: 1fr 1fr; gap: 56px; }
.ph3-fijo h2 { margin: 0 0 16px; font-family: var(--titulo); font-weight: 600; font-size: clamp(28px, 2.8vw, 39px); line-height: 1.1; letter-spacing: -.03em; color: var(--grafito); text-wrap: balance; }
.ph3-fijo > p { max-width: 34em; margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--texto-3); }
.ph3-fijo .pit-acciones { gap: 12px 20px; }
.ph3-lateral .ph3-escenario { aspect-ratio: 4 / 3; }
.ph3-pie { margin-top: 12px; }
.ph3-pie .ph3-texto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.ph3-pie .ph3-pie-nombre { margin: 0; font-size: 16px; color: var(--texto-2); }
.ph3-pie .ph3-pie-nombre strong { color: var(--grafito); }
.ph3-lateral .ph3-barra { margin: 12px 0 0; padding: 0; }
.ph3-lateral .ph3-tabs { flex-wrap: wrap; }
.ph3-lateral .ph3-tab, .ph3-lateral .ph3-pausa { background: var(--superficie); }

@media (max-width: 900px) {
    .ph3-lateral { padding: 48px 0; }
    .ph3-lateral .ph3-in { grid-template-columns: 1fr; gap: 24px; }
    .ph3-lateral .ph3-escenario { order: 0; aspect-ratio: 1 / 1; }
}

/* Menú de escritorio agrupado: oculta el de Bagisto (Todo + 4), que viene justo después */

.pit-menu { display: flex; align-items: center; gap: 2px; height: 77px; }
.pit-menu + * { display: none !important; }
.pit-menu-grupo { position: relative; display: flex; align-items: center; height: 100%; }
.pit-menu-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--grafito); background: none; cursor: pointer; }
.pit-menu-boton svg { width: 16px; height: 16px; color: var(--texto-2); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .15s; }
.pit-menu-boton:hover, .pit-menu-boton[aria-expanded=true], .pit-menu-grupo:hover:not([data-cerrado]) > .pit-menu-boton { color: var(--pitaya); background: var(--superficie); }
.pit-menu-boton[aria-expanded=true] svg, .pit-menu-grupo:hover:not([data-cerrado]) .pit-menu-boton svg { transform: rotate(180deg); }
.pit-menu-panel { position: absolute; top: calc(100% - 8px); left: 0; z-index: 30; display: grid; gap: 2px; min-width: 250px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--sombra-panel); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.pit-menu-boton[aria-expanded=true] + .pit-menu-panel, .pit-menu-grupo:hover:not([data-cerrado]) .pit-menu-panel { opacity: 1; visibility: visible; transform: none; }
.pit-menu-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-weight: 600; color: var(--grafito); }
.pit-menu-item img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--superficie); }
.pit-menu-item:hover, .pit-menu-item:focus-visible { color: var(--pitaya); background: var(--superficie); }

@media (max-width: 1300px) {
    .pit-menu-boton { padding: 10px 9px; font-size: 15px; }
}

@media (max-width: 1180px) {
    .pit-menu-boton { gap: 3px; padding: 10px 7px; font-size: 14px; }
    .pit-menu-boton svg { width: 14px; height: 14px; }
}

/* Visor 3D en la página de producto (botón «Ver en 3D») */

.pit3d-btn { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--pitaya); background: #fff; box-shadow: 0 4px 14px rgba(30, 21, 32, .18); cursor: pointer; }
.pit3d-btn:hover { background: var(--superficie); }
.pit3d-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pit3d-capa { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 50% 42%, #fff, var(--superficie) 60%, var(--separador)); }
.pit3d-capa model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.pit3d-ayuda { position: absolute; right: 14px; top: 14px; z-index: 5; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(30, 21, 32, .72); pointer-events: none; }
.pit3d-ar { position: absolute; right: 14px; bottom: 14px; z-index: 5; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; font-weight: 700; color: #fff; background: var(--pitaya); cursor: pointer; }

/* Páginas de contenido (Admin → CMS): el contenido va dentro de <div class="pit-pagina"> y el h1 lo pone la plantilla */

.pit-pagina-titulo { max-width: 46rem; margin: 8px auto 20px; font-family: var(--titulo); font-weight: 600; font-size: clamp(28px, 3.4vw, 39px); line-height: 1.1; letter-spacing: -.03em; color: var(--grafito); text-wrap: balance; }
.pit-pagina { max-width: 46rem; margin: 0 auto; padding: 8px 0 48px; font-size: 17px; line-height: 1.7; color: var(--grafito); }
.pit-pagina h2 { margin: 36px 0 10px; font-family: var(--titulo); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; color: var(--pitaya); }
.pit-pagina p, .pit-pagina li { margin: 0 0 12px; }
.pit-pagina ul { padding-left: 22px; list-style: disc; }
.pit-pagina a { font-weight: 600; color: var(--pitaya); text-decoration: underline; text-underline-offset: 3px; }
.pit-pagina .pit-nota { padding: 14px 18px; border-radius: 12px; background: var(--pitaya-suave); }

/* Página Mapa del sitio */

.pit-mapa { max-width: 1200px; margin: 0 auto; padding: 40px 24px 72px; }
.pit-mapa h1 { margin: 0 0 28px; font-family: var(--titulo); font-weight: 600; font-size: 34px; letter-spacing: -.03em; }
.pit-mapa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 32px 40px; }
.pit-mapa h2 { margin: 0 0 10px; font-family: var(--titulo); font-weight: 600; font-size: 18px; }
.pit-mapa h2 a { color: var(--pitaya); }
.pit-mapa ul { display: grid; gap: 6px; }
.pit-mapa li a { color: var(--grafito); }
.pit-mapa li a:hover { color: var(--pitaya); text-decoration: underline; text-underline-offset: 3px; }
.pit-mapa p { color: var(--texto-2); }

/* Página Encargos personalizados */

.pit-enc { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; max-width: 1200px; margin: 0 auto; padding: 40px 24px 72px; }
.pit-enc h1 { margin: 0 0 16px; font-family: var(--titulo); font-weight: 600; font-size: 39px; line-height: 1.1; letter-spacing: -.03em; color: var(--pitaya); }
.pit-enc-intro p { max-width: 32em; font-size: 18px; line-height: 1.65; color: var(--texto-3); }
.pit-enc .pit-pasos { margin: 28px 0; }
.pit-form { padding: 28px; border: 2px solid var(--superficie-2); border-radius: 20px; background: #fff; }
.pit-form h2 { margin: 0 0 18px; font-family: var(--titulo); font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.pit-campo { display: grid; gap: 6px; margin-bottom: 16px; }
.pit-campo label { font-size: 15px; font-weight: 600; }
.pit-campo small { font-size: 13px; color: var(--texto-2); }
.pit-campo input, .pit-campo select, .pit-campo textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--borde); border-radius: 12px; font-size: 16px; color: var(--grafito); background: #fff; }
.pit-campo input:focus, .pit-campo select:focus, .pit-campo textarea:focus { border-color: var(--pitaya); outline: none; }
.pit-campo textarea { min-height: 130px; resize: vertical; }
.pit-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pit-error { font-size: 14px; font-weight: 600; color: var(--error); }
.pit-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pit-enviar { justify-content: center; width: 100%; max-width: none !important; }
.pit-ok { padding: 22px; border: 2px solid var(--escama); border-radius: 16px; background: var(--exito); }
.pit-ok h2 { color: var(--escama-hover); }
.pit-ok .pit-boton { margin-top: 16px; }

@media (max-width: 900px) {
    .pit-enc { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px 56px; }
    .pit-enc h1 { font-size: 28px; }
    .pit-dos { grid-template-columns: 1fr; }
    .pit-form { padding: 20px; }
}

/* Página Contáctanos: la grilla de Encargos personalizados con los datos de contacto y los enlaces de ayuda */

.pit-contacto .pit-enc-intro > p { margin-bottom: 22px; }
.pit-contacto .pit-enc-intro h2 { margin: 36px 0 12px; font-family: var(--titulo); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }
.pit-contacto-datos { display: grid; gap: 14px; margin: 28px 0 0; }
.pit-contacto-datos dt { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.pit-contacto-datos dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.pit-contacto-datos a, .pit-contacto-enlaces a, .pit-contacto-nota a { color: var(--pitaya); text-decoration: underline; text-underline-offset: 3px; }
.pit-contacto-enlaces { display: grid; gap: 8px; padding-left: 20px; list-style: disc; font-size: 17px; }
.pit-contacto-nota { margin: 14px 0 0; font-size: 14px; color: var(--texto-2); }

/* Temáticas: el h1 de pitaya.tematica-titulo, la descripción que Bagisto pone justo debajo y su botón de encargo */

.pit-tematica h1 { margin: 0; font-family: var(--titulo); font-weight: 600; font-size: clamp(28px, 3.4vw, 39px); line-height: 1.1; letter-spacing: -.03em; color: var(--grafito); text-wrap: balance; }
.pit-tematica + .container { margin-top: 14px !important; font-size: 17px; line-height: 1.65; color: var(--texto-3); }
.pit-tematica + .container > p { max-width: 52em; margin: 0 0 12px; }
.pit-tematica + .container > p:last-child { margin-bottom: 0; }

.pit-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; margin-top: 6px; padding: 12px 26px; border-radius: 12px;
    font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none;
    background: var(--pitaya); color: #fff !important; transition: background-color .15s;
}
.pit-cta:hover { background: var(--pitaya-hover); }

@media (max-width: 767px) {
    .pit-tematica { margin-top: 24px !important; }
    .pit-tematica + .container { font-size: 15px; }
}

/* Menos movimiento: las animaciones terminan al instante y las transiciones solo cambian color; las ruedas de carga siguen */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }

    *:not(.animate-spin), *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-property: color, background-color, border-color, opacity, box-shadow !important;
    }

    .pit-portada-pausa { display: none; }
}