/*
Theme Name: Rank & Roll Child
Theme URI: https://rankandroll.agency
Description: CSS Rank & Roll Agency
Author: Iván Ruiz
Template: generatepress
Version: 1.0
*/

/*
================================
 1. FONTS
================================
*/
@font-face {  font-family: 'ClashDisplay';  src: url('assets/fonts/ClashDisplay-Variable.woff2') format('woff2'),       url('assets/fonts/ClashDisplay-Variable.woff') format('woff'),       url('assets/fonts/ClashDisplay-Variable.ttf') format('truetype');  font-weight: 200 700;  font-style: normal;  font-display: swap;}@font-face {  font-family: 'Chillax';  src: url('assets/fonts/Chillax-Variable.woff2') format('woff2'),       url('assets/fonts/Chillax-Variable.woff') format('woff'),       url('assets/fonts/Chillax-Variable.ttf') format('truetype');  font-weight: 200 700;  font-style: normal;  font-display: swap;}/* Apply globally */body {  font-family: 'ClashDisplay', sans-serif;  font-size: 1rem;  color: #333;  line-height: 1.6;}h1, h2, h3, h4, h5, h6 {  font-family: 'Chillax', sans-serif;  font-weight: 800;}p, ul, li {  font-family: 'ClashDisplay', sans-serif;  font-weight: 400;  font-size: 1.1rem;}

/*
=======================================
 2. GENERAL STYLES
=======================================
*/

.page-template-homepage .site-content, .site {display: block;z-index: 0;position: relative;}.page-template-homepage .grid-container{max-width: 100%;}
body { position: relative;   background-image: url('/wp-content/themes/rankandroll-child/assets/images/wall.webp');    background-repeat: repeat;        /* This makes it tile like a real wall */    background-size: auto; /* Keeps bricks life-sized */    background-position: top left;    /* Seamless repeat starting point */    background-attachment: scroll;    /* Natural behavior for repeating patterns */	background-size: 600px;  /* tiles scale down */}/* Overlay semitransparente aplicado a todo el body*/body::before {  content: "";  position: absolute; inset: 0;  background: #00000075; /* tono oscuro translúcido */  z-index: 0;} .section-wrapper {    background: rgba(0, 0, 0, 0.55);   /* dark transparent */    backdrop-filter: blur(2px);/* slight diffusion */    padding: 4rem 2rem;    border-radius: 16px;    margin: 3rem auto;    max-width: 1200px;}
:root { --bg-color: #111; --card-bg: #1a1a1a; --neon-cyan: #00f3ff; --punk-pink: #ff0099; --dm-yellow: #fad501; --inter-red: #ff2446; --text-white: #fff; --font-head: 'Chillax', sans-serif; --font-body: 'ClashDisplay', sans-serif; --font-tech: 'Share Tech Mono', monospace;
--rr-dark: #111111; --rr-gray: #1a1a1a; --rr-text: #e0e0e0; --rr-accent: #ff0055; /* Color Rock & Roll (ajustar a tu marca) */ --rr-border: #333; --rr-light-black: #111422;}


/*
=================================
 3. HEADER STYLES
=================================
*/

/* HEADER MOBILE */
.rr-mobile-menu-toggle {display: none;flex-direction: column;gap: 5px;background: none;border: none;cursor: pointer;z-index: 1001;}.rr-mobile-menu-toggle span {width: 28px;height: 3px;background: #fff;display: block;transition: .3s ease;}
/* ------------------------------------ */
/* FULLSCREEN OVERLAY MENU */
/* ------------------------------------ */

.rr-mobile-menu-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,0.9);backdrop-filter: blur(5px);color: #fff;transform: translateX(100%);transition: transform .4s ease;z-index: 2000;padding: 2rem;display: flex;flex-direction: column;justify-content: space-between;}/* ACTIVE STATE */.rr-mobile-menu-overlay.active {transform: translateX(0);}/* TOP AREA */.rr-mobile-menu-top {display: flex;align-items: center;justify-content: space-between;}.rr-mobile-logo {width: 150px;height: auto;}.rr-mobile-close {background: none;border: none;color: #fff;font-size: 3rem;cursor: pointer;}/* MENU LINKS */.rr-mobile-menu-links {list-style: none;margin-top: 1rem;text-align: center;display: flex;flex-direction: column;gap: 2rem;}.rr-mobile-menu-links a {color: #fff;text-decoration: none;font-size: 2rem;letter-spacing: 2px;transition: opacity .2s;}.rr-mobile-menu-links a:hover {opacity: .6;}/* WRAPPER (same as before) */.rr-mobile-menu-links {margin-top: 1rem;text-align: center;}/* TARGET WordPress-output list */.rr-mobile-menu-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 2rem;}.rr-mobile-menu-list a {color: #fff;text-decoration: none;font-size: 2rem;font-family: 'Bebas Neue', sans-serif;letter-spacing: 2px;transition: opacity .2s;}.rr-mobile-menu-list a:hover {opacity: .6;}/* BOTTOM CTA */.rr-mobile-bottom-cta {text-align: center;}.rr-mobile-cta-btn {display: inline-block;background: #ff2446;color: #fff;padding: 1rem 2rem;font-weight: bold;font-size: 1.2rem;border-radius: 30px;text-decoration: none;}

/* ------------------------------------ */
/* HEADER DESKTOP
/* ------------------------------------ */
body {padding-top: 150px; /* matches fixed header height adjust if we change header height */}/* Header container */.rr-site-header {width: 100%;	height: 130px;padding: 0 2rem;position: fixed;top: 0;left: 0;z-index: 999;	transition: height .3s ease, padding .3s ease;}/* Inner flex container */.rr-header-inner {max-width: 100%;height: 90%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;	transition: height .3s ease;}/* Logo */.rr-header-logo img {width: 200px;height: auto;	transition: width .3s ease;}/* Header menu container */.rr-header-menu {	padding: .8rem 0; 	border: 1px solid #717171;	border-radius: 30px;	background: #3b383880;animation: a1 .6s var(--easeOutBack) forwards;transition: padding .3s ease, transform .3s ease; text-align: center;}.rr-header-menu ul {	margin: 0;}.rr-header-nav {position: absolute;left: 40%;transform: translateX(-40%);margin-top: 2%; width: 65%;}/* Menu items */.rr-header-menu li {list-style: none !important;   display: inline;	align-items: center; padding: 1rem 2.5rem 1rem 2.5rem;}/* Menu links */.rr-header-menu li a {	color: #ffffff;text-decoration: none;font-weight: 400; font-size: .8rem;transition: padding .3s ease;}.rr-header-menu li a:hover {	color: #fad501;}li.current_page_item, #menu-item a {color: var(--dm-yellow);	margin: 0 .1rem !important;	top: 2px;} li.current_page_item a , li.current-menu-item a {color:var(--dm-yellow) !important;}/* CTA Button */.rr-cta-btn {display: inline-block;	text-decoration: none;background: #ff2446;padding: 0.9rem 2rem;border-radius: 30px;color: #fff;	font-weight: 500;letter-spacing: 1px;transition: padding .3s ease, transform .25s, box-shadow .25s;}.rr-cta-btn:hover {transform: translateY(-3px);box-shadow: 0 15px 25px rgba(255,36,70,0.4);	color: #fad501;}/* Normal state */.rr-site-header {transition: height 0.3s ease, padding 0.3s ease;}/* Shrink state *//* When scrolling down */.rr-site-header,.rr-header-inner,.rr-header-logo img,.rr-header-menu,.rr-header-menu li,.rr-header-menu li a,.rr-cta-btn {transition: all .35s cubic-bezier(.25,.46,.45,.94); /* super smooth */}.rr-site-header.shrink {height: 90px;   /* Header becomes shorter */padding: 0 1.5rem;}.rr-site-header.shrink .rr-header-inner {height: 80%;}/* Logo becomes smaller */.rr-site-header.shrink .rr-header-logo img {transform: scale(0.8);}/* Menu container shrinks slightly */.rr-site-header.shrink .rr-header-menu {transform: scale(0.95);	padding: 0.35rem 0;}/* Menu items shrink */.rr-site-header.shrink .rr-header-menu li {padding: .5rem 1.8rem;}/* Menu text becomes a bit smaller */.rr-site-header.shrink .rr-header-menu li {padding: .5rem 1.8rem;}.rr-site-header.shrink .rr-header-menu li a {font-size: .75rem;}/* CTA button shrinks too */.rr-site-header.shrink .rr-cta-btn {transform: scale(0.9);} .rr-header-menu .sub-menu {display: none !important; position: absolute;top: 100%;left: 0;min-width: 220px;background-color: #1a1a1ad6 !important;padding: 10px 0;margin: 0;list-style: none !important;z-index: 9999 !important;border-top: 3px solid var(--dm-yellow);border-radius: 0 0 8px 8px;box-shadow: 0 10px 20px rgba(0,0,0,0.3);}.rr-header-menu li:hover > .sub-menu {display: block !important;}.rr-header-menu li {position: relative !important;}.rr-header-menu .sub-menu li a {display: block !important;padding: 10px 20px !important;color: #fff !important;font-size: 0.9rem !important;text-transform: none !important;background: transparent !important;white-space: nowrap;}.rr-header-menu .sub-menu li:hover > a {background-color: rgba(255,255,255,0.1) !important;color: var(--dm-yellow) !important;}


/* 
==================
4.0 HERO SECTION HOME
==================
/* Hero Text */
.rr-hero-content { max-width: 100%;    height: calc(100vh - 150px); /* altura del viewport menos padding top del body */    padding: 4rem 2.5rem;    align-items: center; /* centers vertically */	border-bottom-style: dashed;	border-bottom: 5px dashed var(--dm-yellow);}.rr-hero-content h1 {	color: #fafafa;}.rr-hero-content {	color: #fafafa;}.rr-headline {    font-size: 4rem;    margin: 0 0 1rem;    line-height: 1.1;}.rr-headline span {    color: #ff2446;}.rr-subheadline {    display: flex;	font-size: 1.3rem;	color: #fad501;}/* Hero Media (image or video placeholder) */.rr-hero-media {    position: absolute;    right: 0;    bottom: 0;    width: 45%;    height: auto;    opacity: 0.4;    pointer-events: none;}.rr-hero-media video,.rr-hero-media img {    width: 100%;    height: auto;}/* ---- HERO ANIMATION TYPEWRITING STYLE --- *//* SLIDE + FADE + SHAKE EFFECT */.rr-slide-in {    opacity: 0;    transform: translateY(30px);    animation: rrSlideIn 0.9s ease-out forwards;}@keyframes rrSlideIn {    0% {        opacity: 0;        transform: translateY(30px);    }    100% {        opacity: 1;        transform: translateY(0);    }}#typed-main,#typed-sub {  display: block;  overflow: hidden;  white-space: normal;   /* FIX: allow wrapping on mobile */}/* Prevent the H1 from forcing a long line */.rr-headline {  word-wrap: break-word;  white-space: normal;}.blink-active {    position: relative;}.blink-active::after {    content: "";    position: absolute;	color: #ff2446;    left: 0;    bottom: -2px;    width: 100%;    height: 2px;    background: currentColor;    animation: blinkUnderline 1.5s infinite;}.rr-blink-after {    text-decoration: underline;}.blink-active {    animation: blinkUnderline 1.5s infinite;}@keyframes blinkUnderline {    0% { opacity: 1; }    50% { opacity: 0; }    100% { opacity: 1; }}

/* =========================================
   9.0 THE MERCH STAND (TEMPLATES)
   ========================================= */

.rnr-section-merch {
    padding: 100px 0;
    background-color: #000;
    /* Textura de ruido o papel arrugado opcional */
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png'); 
    border-top: 5px solid var(--neon-cyan);
    overflow: hidden;
}

.merch-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Visual (Izquierda) */
/* =========================================
   CARRUSEL DE VINILOS (CSS SCROLL SNAP)
   ========================================= */

.merch-visual {
    position: relative;
    width: 50%;
    /* Asegura que el contenido no se salga en móviles */
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vinyl-carousel-wrapper {
    width: 100%;
    max-width: 450px; /* Tamaño máximo del disco */
    position: relative;
    z-index: 2;
}

.vinyl-carousel {
    display: flex;
    gap: 20px; /* Espacio entre discos */
    overflow-x: auto; /* Permite scroll horizontal */
    scroll-snap-type: x mandatory; /* FUERZA el centrado al soltar */
    padding-bottom: 20px; /* Espacio para la barra de scroll */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Suavidad en iOS */
    
    /* Ocultar barra de scroll estándar en Firefox/IE */
    scrollbar-width: thin;
    scrollbar-color: var(--neon-cyan) #222;
}

/* --- ESTILOS DE LA BARRA DE SCROLL (Chrome/Safari/Edge) --- */
.vinyl-carousel::-webkit-scrollbar {
    height: 6px;
}
.vinyl-carousel::-webkit-scrollbar-track {
    background: #222;
    border-radius: 10px;
}
.vinyl-carousel::-webkit-scrollbar-thumb {
    background: var(--neon-cyan); /* Color Cyan */
    border-radius: 10px;
}

/* --- LOS ITEMS (DISCOS) --- */
.carousel-item {
    /* Mostramos el 85% del ancho para que se vea un pedacito del siguiente 
       y el usuario sepa que puede deslizar */
    flex: 0 0 85%; 
    scroll-snap-align: center; /* Se alinea al centro al soltar */
    position: relative;
    transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse (opcional, solo desktop) */
.carousel-item:hover {
    transform: scale(1.02);
}

.album-cover {
    position: relative;
    border-radius: 8px; /* O 50% si fueran discos redondos sin caja */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333;
    aspect-ratio: 1 / 1; /* Mantiene la imagen cuadrada siempre */
}

.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Brillo estilo plástico sobre el disco */
.vinyl-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
}

/* Título del álbum debajo */
.album-caption {
    text-align: center;
    font-family: var(--font-head); /* Tu tipografía de títulos */
    color: #fff;
    margin-top: 10px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--punk-pink); /* Sombra rosa neón */
}

/* --- TEXTO DE AYUDA (SCROLL HINT) --- */
.scroll-hint {
    text-align: center;
    font-family: var(--font-tech, monospace);
    font-size: 0.75rem;
    color: #888;
    margin-top: 5px;
    letter-spacing: 1px;
    opacity: 0.8;
    animation: blinkHint 3s infinite;
}

@keyframes blinkHint {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Ajuste del brillo de fondo */
.glow-effect {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; height: 120%;
    background: radial-gradient(circle, var(--punk-pink) 0%, transparent 70%);
    opacity: 0.25;
    z-index: 0;
    filter: blur(60px);
}

.merch-cta-box {
	margin: 2rem 0;
}

.merch-image-wrapper {
    position: relative;
    max-width: 350px;
    /* Efecto de inclinación estilo "Display de Tienda" */
    transform: rotate(-3deg);
    transition: transform 0.5s ease;
}
.merch-image-wrapper:hover {
    transform: rotate(0deg) scale(1.02);
}

.vinyl-showcase {
    width: 100%;
    height: auto;
    display: block;
    /* Sombra fuerte para darle profundidad 3D */
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.8));
    z-index: 2;
    position: relative;
}

/* Efecto de resplandor detrás del vinilo */
.glow-effect {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: var(--punk-pink);
    filter: blur(80px);
    opacity: 0.4;
    z-index: 1;
    border-radius: 50%;
}

/* Info (Derecha) */
.merch-info {
    flex: 1;
    text-align: left;
}

.merch-title {
    font-family: var(--font-head);
    font-size: 3.5rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 20px;
}
.merch-subtitle {
    color: var(--neon-cyan);
    font-size: 0.6em; /* Escala respecto al título */
    letter-spacing: 2px;
}

.merch-desc {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
}

.merch-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}
.merch-benefits li {
    font-size: 1rem;
    color: #eee;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.check-icon {
    font-size: 1.5rem;
    color: var(--dm-yellow); /* Amarillo para contraste */
}

.btn-neon {
    background: var(--neon-cyan);
    color: #000;
    border: none;
    box-shadow: 0 0 10px var(--neon-cyan);
}
.btn-neon:hover {
    background: #fff;
    box-shadow: 0 0 20px #fff;
    transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .merch-layout {
        flex-direction: column;
        text-align: center;
    }
    .merch-info {
        text-align: center;
    }
    .merch-benefits li {
        justify-content: center;
        text-align: left;
    }
    .merch-image-wrapper {
        margin-bottom: 40px;
        transform: rotate(0);
        max-width: 80%;
    }
    .merch-title {
        font-size: 2.5rem;
    }
}

/* =========================================
   TABLA DE ESPECIFICACIONES (MERCH TABLE)
   ========================================= */

.merch-specs-table {
    width: 100%;
    border-collapse: collapse; /* Elimina espacios entre celdas */
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.03); /* Fondo muy sutil */
    border-radius: 8px;
    overflow: hidden; /* Para respetar el border-radius */
}

.spec-row {
    border-bottom: 1px solid #333; /* Línea separadora sutil */
    transition: background 0.3s ease;
}

/* Efecto Hover: Resalta la fila al pasar el mouse */
.spec-row:hover {
    background: rgba(0, 243, 255, 0.05); /* Brillo Cyan muy suave */
}

.spec-row:last-child {
    border-bottom: none; /* Quitar borde al final */
}

/* 1. COLUMNA ICONO */
.spec-icon {
    width: 50px;
    text-align: center;
    font-size: 1.5rem;
    padding: 15px 10px;
    vertical-align: middle;
    /* Si quieres que los iconos tengan el color de la marca, descomenta abajo: */
    /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); */
}

/* 2. COLUMNA TÍTULO (LABEL) */
.spec-label {
    font-family: var(--font-tech, monospace); /* Fuente tecnológica */
    color: var(--neon-cyan); /* Color Cyan de tu marca */
    font-weight: bold;
    font-size: 0.95rem;
    padding: 15px 15px 15px 0;
    vertical-align: middle;
    white-space: nowrap; /* Evita que el título se rompa en dos líneas si es posible */
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 3. COLUMNA DESCRIPCIÓN */
.spec-desc {
    font-family: var(--font-body, sans-serif);
    color: #ddd;
    font-size: 0.95rem;
    padding: 15px 15px 15px 0;
    vertical-align: middle;
    line-height: 1.4;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media (max-width: 600px) {
    /* En móviles, permitimos que el título se rompa para no aplastar la descripción */
    .spec-label {
        white-space: normal;
        font-size: 0.85rem;
        width: 120px; /* Ancho fijo para mantener alineación en móvil */
    }
    
    .spec-desc {
        font-size: 0.85rem;
    }
    
    .spec-icon {
        width: 40px;
        padding-left: 5px;
        font-size: 1.2rem;
    }
	
	.merch-visual {
		width: 100%;
	}
}


/* 
================
5.0 Estilos formulario
================
*/

 /* Container Principal */.rnr-widget-container { width: 100%; max-width: 100%; background-color: var(--card-bg); padding: 6rem 4rem; text-align: center; position: relative; justify-self: center; z-index: 1;}.rnr-main-title { font-family: var(--font-head); font-size: 4rem; margin: 0; color: var(--text-white); text-transform: uppercase; line-height: 0.9; text-shadow: 3px 3px 0px var(--punk-pink); transform: rotate(-2deg);}.rnr-sub-text { margin-top: 10px; margin-bottom: 40px; color: #fafafa; text-shadow: 3px 3px 0px var(--inter-red);}/* Caja del Quiz */.rnr-stage-box {background: var(--card-bg); border: 3px solid var(--neon-cyan); border-radius: 40px; padding: 40px 30px; position: relative; box-shadow: 15px 15px 0px var(--punk-pink); min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: height 0.3s ease; max-width: 60%; margin: 0 20%;}/* Tornillos decorativos */.rnr-stage-box::before, .rnr-stage-box::after { content: '*'; position: absolute; color: #fff; font-size: 2rem; top: 10px;}.rnr-stage-box::before { left: 10px; }.rnr-stage-box::after { right: 10px; }/* Slides (Pantallas) */.rnr-slide { display: none; width: 100%; animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.rnr-slide.active { display: block; }.rnr-question { font-size: 2rem; font-weight: 700; margin-bottom: 40px; line-height: 1.3; color: var(--text-white);}/* Botones del Quiz */.btn-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;}button.quiz-btn { font-family: var(--font-head); font-size: 1.5rem; padding: 12px 30px; cursor: pointer; text-transform: uppercase; border: none; transition: all 0.1s; letter-spacing: 1px; outline: none;}.btn-primary { background-color: var(--neon-cyan); color: var(--bg-color); box-shadow: 0 4px 0 #00b8c2;}.btn-primary:active { transform: translateY(4px); box-shadow: none; }.btn-secondary { background-color: transparent; border: 2px solid var(--text-white); color: var(--text-white);}.btn-secondary:hover { background-color: var(--text-white); color: var(--bg-color); box-shadow: 0 0 15px rgba(255,255,255,0.5);}/* Estilos de Resultados y Tech Rider */.result-icon { font-size: 40px; margin-bottom: 10px; display: block; }.result-title { font-family: var(--font-head); font-size: 2.2rem; color: var(--neon-cyan); margin: 0 0 10px 0; text-transform: uppercase;}.result-desc { font-size: 1rem; color: #ddd; line-height: 1.5; max-width: 500px; margin: 0 auto 20px auto; font-weight: 300;}.result-desc strong { color: var(--text-white); font-weight: 700; }/* El bloque de herramientas técnicas */.tech-rider { background: rgba(255, 255, 255, 0.05); border-left: 4px solid var(--punk-pink); padding: 12px 15px; margin: 0 auto 25px auto; max-width: 480px; text-align: left; font-family: var(--font-tech); font-size: 0.85rem; color: #bbb;}.tech-label { display: block; color: var(--punk-pink); font-weight: bold; text-transform: uppercase; font-size: 0.75rem; margin-bottom: 4px;}.tech-rider strong { color: var(--neon-cyan); font-weight: normal; }/* CTA Principal (Abre el modal) */.cta-btn { display: inline-block; background-color: var(--punk-pink); color: white; font-family: var(--font-head); font-size: 1.5rem; padding: 12px 30px; cursor: pointer; border: 1px solid var(--punk-pink); transform: skew(-10deg); transition: transform 0.2s;}.cta-btn:hover { transform: skew(-10deg) scale(1.05); box-shadow: 0 0 15px var(--punk-pink); }.reset-link { display: block; margin-top: 20px; color: #555; font-size: 0.8rem; cursor: pointer; text-decoration: underline;}/* --- MODAL POP-UP FORM (El formulario oculto) --- */.rnr-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999; display: none; /* Oculto por defecto */ justify-content: center; align-items: center; backdrop-filter: blur(5px);} .rnr-modal-overlay.open { display: flex; animation: fadeIn 0.3s; }.rnr-modal-content { background: var(--card-bg); border: 2px solid var(--neon-cyan); padding: 40px; width: 100%; height: 80vh; max-width: 500px; position: relative; box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); overflow-x: auto; }.close-modal { position: absolute; top: 10px; right: 15px; font-size: 30px; color: #fff; cursor: pointer; font-family: var(--font-head); line-height: 1;}.close-modal:hover { color: var(--punk-pink); }.modal-title { font-family: var(--font-head); font-size: 2.5rem; color: var(--text-white); margin-top: 0; text-transform: uppercase; text-align: center;}/* Estilos internos del Formulario */.rnr-form-group { margin-bottom: 15px; text-align: left; } .rnr-label { display: block; font-family: var(--font-tech); color: var(--neon-cyan); font-size: 0.9rem; margin-bottom: 5px;} .rnr-input { width: 100%; padding: 12px; background: #222; border: 1px solid #444; color: #fff; font-family: var(--font-body); font-size: 1rem; box-sizing: border-box;}.rnr-input:focus { border-color: var(--punk-pink); outline: none; box-shadow: 0 0 10px rgba(255,0,153,0.3);} /* Input Readonly (El servicio se ve pero no se edita) */.rnr-input.readonly { background: #333; color: #aaa; border-color: transparent; cursor: not-allowed; }.submit-btn { width: 100%; background: var(--neon-cyan); color: var(--bg-color); font-family: var(--font-head); font-size: 1.8rem; border: none; padding: 15px; cursor: pointer; margin-top: 10px; text-transform: uppercase; transition: 0.2s;}.submit-btn:hover { background: var(--text-white); box-shadow: 0 0 20px var(--neon-cyan); }/* Animaciones */@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }@media(max-width: 600px) { .rnr-modal-content { padding: 20px; } }

/*
===========================================
6.0 SERVICIOS HOME
===========================================
*/
 .rnr-section-title {font-family: var(--font-head); font-size: 3.5rem; color: var(--text-white);text-align: center; margin-bottom: 10px; letter-spacing: 2px;}.rnr-highlight { color: var(--punk-pink); font-size: 0.6em; vertical-align: middle; }.rnr-section-desc {text-align: center; color: #ccc; margin-bottom: 50px; font-family: var(--font-body);}.rnr-container { max-width: 100%; margin: 0 auto; padding: 0 20px; }.rnr-hidden { display: none !important; } /* --- SECCIÓN SERVICIOS (DENIM & PATCHES) --- */.rnr-section-denim {padding: 80px 0;/* background-color: #2a3b55; Azul Denim base *//* Patrón de ruido para simular tela */background-image: url("/wp-content/themes/rankandroll-child/assets/images/denim-back.webp");border-top: 5px dashed var(--dm-yellow); /* Costura superior */border-bottom: 5px dashed var(--dm-yellow); /* Costura inferior */} .rnr-patches-grid {display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;} .rnr-patch {width: 200px; height: 200px;background: #111;border-radius: 50%; /* O cuadrado con border-radius pequeño si prefieres */position: relative;cursor: pointer;transition: transform 0.2s ease;box-shadow: 5px 10px 20px rgba(0,0,0,0.6);display: flex; align-items: center; justify-content: center;} /* Efecto de hilo bordado */.patch-stitch {position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;border: 4px dashed var(--neon-cyan);border-radius: 50%;pointer-events: none;} .rnr-patch:nth-child(even) .patch-stitch { border-color: var(--punk-pink); } /* Alternar colores */ .patch-content {text-align: center; color: #fff; z-index: 2;} .patch-icon { font-size: 3rem; display: block; margin-bottom: 5px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); } .rnr-patch h3 {font-family: var(--font-head); font-size: 1.5rem; margin: 0; letter-spacing: 1px;text-shadow: 2px 2px 0 #000;} /* Textura de tela sobre el parche */.rnr-patch::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 0, transparent 50%);background-size: 6px 6px; border-radius: 50%;} .rnr-patch:hover { transform: scale(1.05) rotate(-3deg); } /* --- MODAL SERVICIOS (PAPEL PEGADO) --- */.paper-modal {background: #f0f0f0; color: #111;padding: 40px; max-width: 500px; width: 90%;transform: rotate(1deg);box-shadow: 0 10px 30px rgba(0,0,0,0.8);position: relative;font-family: 'Courier New', monospace; /* Estilo máquina de escribir / setlist */} .tape-strip {width: 150px; height: 40px;background: rgba(255, 255, 255, 0.6);position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-2deg);box-shadow: 0 2px 5px rgba(0,0,0,0.2);backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,0.8);} .close-paper {position: absolute; top: 10px; right: 15px; font-weight: bold; cursor: pointer; font-size: 1.5rem;} .paper-modal h3 {font-family: var(--font-head); font-size: 2.5rem; margin-top: 10px; text-transform: uppercase;border-bottom: 3px solid #111; display: inline-block;} .rnr-btn-small {display: inline-block; background: #111; color: #fff; padding: 10px 20px;text-decoration: none; font-weight: bold; margin-top: 20px; text-transform: uppercase;}

/*
==========================================
7.0 PORTAFOLIO HOME
===========================================
*/
/* --- ESTILOS GREATEST HITS (FLIP) --- */ .rnr-section-dark { padding: 80px 0; color: #fff;}.vinyl-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 40px;}/* CONTENEDOR 3D */.flip-container { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; /* Profundidad 3D */ cursor: pointer;}/* Este div es el que gira */.flipper { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d;		background: radial-gradient(#ffffff, #313131);		border-radius: 20px;}/* Activar giro con clase JS */.flip-container.flipped .flipper { transform: rotateY(180deg);}/* CARAS GENERALES (Frente y Dorso) */.front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* Oculta la cara trasera al girar */ -webkit-backface-visibility: hidden; border-radius: 15px; /* Un poco redondeado para estética moderna */ overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.5);}/* --- CARA A: EL VINILO --- */.front { background: transparent; /* El fondo es transparente para ver el disco redondo */ z-index: 2; display: flex; justify-content: center; align-items: center; /* Animación sutil de flotación */  /*   animation: floatVinyl 4s ease-in-out infinite; */}.vinyl-record-body { width: 95%; height: 95%; background: #111; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0,0,0,0.8);		transform: rotate(355deg); /* Animación de giro continuo (como en tornamesa) */ /* animation: spinRecord 10s linear infinite; */}		.vinyl-record-body:hover {		animation: spinRecord 10s linear infinite;	}.grooves { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient( #111 0,  #111 4px,  #676767 5px,  #1a1a1a 6px ); opacity: 0.8;}.vinyl-label-center { width: 40%; height: 40%; background: var(--punk-pink, #ff0099); border-radius: 50%; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: 4px solid #111; padding: 5px;}.band-name { font-size: 0.7rem; text-transform: uppercase; }.album-name {  font-family: 'Bebas Neue', sans-serif;  font-size: 1.2rem;  line-height: 1;  margin: 5px 0; color: #fff; text-shadow: 1px 1px 0 #000;}.side-mark { font-size: 0.6rem; font-weight: bold; opacity: 0.8; }.click-hint { position: absolute; bottom: -30px; width: 100%; text-align: center; font-size: 0.8rem; color: #666; animation: none; /* Texto estático */}/* --- CARA B: LA CONTRAPORTADA (TRACKLIST) --- */.back { transform: rotateY(180deg); /* Ya está girada de inicio */ background-size: cover; background-position: center; border: 2px solid var(--neon-cyan, #00f3ff);}/* Overlay oscuro para leer el texto sobre la foto */.cover-overlay { background: rgba(0, 0, 0, 0.85); /* Fondo muy oscuro semi-transparente */ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; text-align: center; backdrop-filter: blur(3px);}.project-title { font-family: 'Bebas Neue', sans-serif; color: var(--neon-cyan, #00f3ff); font-size: 1rem; margin: 0 0 15px 0; text-transform: uppercase;}.tracklist-container {text-align: left; width: 100%; margin-bottom: 20px; border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 10px 0; overflow: auto;}.tracklist-header { font-size: 0.7rem; color: #888; letter-spacing: 2px; display: block; margin-bottom: 5px; text-align: center;}.tracklist { list-style: none; padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 0.85rem;}.tracklist li { margin-bottom: 5px; color: #ddd; border-bottom: 1px dashed #333; padding-bottom: 2px;}.tracklist li:last-child { border-bottom: none; }.track-num { color: var(--punk-pink, #ff0099); font-family: monospace; margin-right: 5px;}.rnr-link-btn { display: inline-block; padding: 8px 20px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 0.8rem; text-transform: uppercase; transition: all 0.3s; font-weight: bold;}.rnr-link-btn:hover { background: #fff; color: #000; box-shadow: 0 0 10px #fff;}/* Animaciones Keyframes */@keyframes spinRecord { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes floatVinyl { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); }}/* Detener el giro del disco cuando se hace flip para ahorrar recursos */.flip-container.flipped .vinyl-record-body { animation-play-state: paused;}

/*
==========================================
8.0 LPs SERVICIOS
==========================================
*/
body.single-servicios { padding-top: 0px; /* adjust as needed */ } .single-servicios .grid-container {max-width: 100%; }  
/* =========================================    FIX LAYOUT PARA SERVICIOS (Rank and Roll)    ========================================= */ .single-servicios .site-content { display: block !important; /* Fuerza a que los bloques se apilen */ width: 100% !important;    /* Asegura que ocupe todo el ancho */ max-width: 100% !important; margin: 0 !important;  /* Elimina márgenes extraños del tema padre */ padding: 0 !important; }  /* Opcional: Si el tema padre limita el ancho de containers internos */ .single-servicios .site-main { max-width: 100% !important; margin: 0 !important; } /* 1. VARIABLES GLOBALES*/  :root { --bg-dark: #111111; --neon-cyan: #00f3ff; --punk-pink: #ff0099; --dm-yellow: #f1c40f; /* Color del hilo amarillo */ --text-white: #ffffff; }

/* 1. CONFIGURACIÓN DEL ESCENARIO (FONDO) */.hero-rock-stage {    position: relative;    padding: 140px 20px 80px 20px; /* Espacio para header */    background-color: #111;    background-image: radial-gradient(circle at center, #222 0%, #111 70%);    overflow: hidden;    border-bottom: 5px solid var(--punk-pink);    color: #fff;}.relative-z { position: relative; z-index: 10; }/* 2. LAYOUT FLEXBOX (Escritorio: Izq | Der) */.rnr-container { max-width: 1200px; margin: 0 auto; }.hero-split-layout {    display: flex;    align-items: center; /* Centrado vertical */    justify-content: space-between; /* Separación máxima */    gap: 40px;}/* Columna Texto (Izquierda) */.hero-text-side {    flex: 1; /* Ocupa el espacio disponible */    max-width: 650px;    text-align: left; /* Alineación izquierda en Desktop */}/* Columna Parche (Derecha) */.hero-patch-side {    flex: 0 0 auto; /* No se estira */    display: flex;    justify-content: center;}/* 3. TIPOGRAFÍA ROCKERA */.pre-title {    font-family: var(--font-body);    font-weight: 700;    letter-spacing: 4px;    color: var(--neon-cyan);    font-size: 1rem;    display: block;    margin-bottom: 5px;    text-transform: uppercase;}.hero-glitch-title {    margin: 0 0 20px 0;    line-height: 0.9;}/* Efecto Hollow (Hueco) adaptado al Título del Servicio */.arsenal-text {    font-family: var(--font-head);    font-size: 5rem; /* Grande pero adaptable */    display: block;    color: transparent;    -webkit-text-stroke: 2px #fff;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);    transition: 0.3s;}.hero-text.side:hover .arsenal-text {    color: #fff;    text-shadow: 5px 5px 0px var(--punk-pink);    -webkit-text-stroke: 0px transparent;}.hero-rock-desc p {    font-size: 1.2rem;    color: #ddd;    line-height: 1.6;    margin: 0;    font-weight: 400;}.hero-rock-desc strong { color: #fff; }/* 4. EL PARCHE (Estilos refinados para fondo oscuro) */.hero-patch {    width: 320px; height: 320px;    background: #111; /* Fondo oscuro */    border-radius: 50%;    position: relative;    box-shadow: 0 0 50px rgba(0,0,0,0.8), 0 0 20px rgba(255, 0, 153, 0.2); /* Glow sutil rosa */    border: 1px solid #333;}/* Textura del parche */.hero-patch::after {    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 0, transparent 50%);    background-size: 4px 4px; border-radius: 50%; pointer-events: none;}.hero-stitch {    position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px;    border: 5px dashed var(--neon-cyan);    border-radius: 50%;    pointer-events: none;}/* Grid del contenido del parche (Icono + Links) */.hero-patch-content {    display: grid;    grid-template-areas: "stack";    place-items: center;    width: 100%; height: 100%;    position: relative; z-index: 5;}.hero-icon {    grid-area: stack;    font-size: 10rem; /* Ajustado para caber */    line-height: 1;    z-index: 1;    opacity: 0.4; /* Transparencia para ver texto */    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));    transition: 0.3s;}.patch-links {    grid-area: stack;    z-index: 10;    display: flex; flex-direction: column; gap: 10px;    text-align: center;}.patch-link {    font-family: var(--font-head);    font-size: 1.4rem;    color: #fff; text-decoration: none; text-transform: uppercase;    text-shadow: 2px 2px 4px #000;    transition: 0.2s;}.patch-link:hover { color: var(--neon-cyan); transform: scale(1.1); }.hero-patch:hover .hero-icon { opacity: 0.7; transform: scale(1.05); }/* 5. DECORACIÓN FLOTANTE (Background) */.stage-deco {    position: absolute; top: 0; left: 0; width: 100%; height: 100%;    pointer-events: none; z-index: 1;}.float-icon {    position: absolute; font-size: 4rem; opacity: 0.2;    filter: grayscale(100%) blur(1px);    animation: floatAround 6s ease-in-out infinite;}.icon-1 { top: 15%; left: 5%; animation-delay: 0s; transform: rotate(-15deg); }.icon-2 { bottom: 20%; right: 50%; animation-delay: 2s; font-size: 5rem; transform: rotate(15deg); }.icon-3 { top: 10%; right: 10%; animation-delay: 4s; font-size: 3rem; }.grunge-splash {    position: absolute; top: 50%; left: 30%; /* Centrado más hacia el texto */    width: 600px; height: 400px;    background: var(--punk-pink); opacity: 0.1;    transform: translate(-50%, -50%);    filter: blur(50px); border-radius: 50%;}@keyframes floatAround {    0% { transform: translateY(0px) rotate(0deg); }    50% { transform: translateY(-15px) rotate(5deg); }    100% { transform: translateY(0px) rotate(0deg); }}/* Indicador Scroll */.scroll-indicator {    text-align: center; margin-top: 40px; width: 100%;    color: var(--dm-yellow); font-family: var(--font-head);    animation: bounce 2s infinite;} .scroll-indicator a {text-decoration: none; color: var(--punk-pink); font-weight: 600;} .scroll-indicator a:hover {color: var(--text-white);}


@keyframes bounce {    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}    40% {transform: translateY(-10px);}    60% {transform: translateY(-5px);}}
 /* ==========================================================================    SECCIÓN 2: ROADMAP / FLIGHT CASE    ========================================================================== */  .tour-roadmap-section { background-color: var(--bg-dark); padding: 80px 20px; color: var(--text-white); text-align: center; }  .roadmap-container { max-width: 900px; margin: 0 auto; position: relative; }  .roadmap-title {  font-size: 3rem; margin-bottom: 50px; color: #fff; } .highlight { color: var(--punk-pink); font-size: 0.6em; vertical-align: middle; }  /* --- EL FLIGHT CASE (CAJA) --- */ .flight-case { background: #0d0d0d; width: 100%; margin: 0 auto; border: 8px solid #333; /* Borde aluminio */ position: relative; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.9); /* Patrón rugoso */ background-image: radial-gradient(#222 15%, transparent 16%); background-size: 8px 8px; }  /* Esquinas metálicas */ .corner { position: absolute; width: 30px; height: 30px; background: linear-gradient(135deg, #666, #ccc); border: 1px solid #000; } .top-left { top: -8px; left: -8px; border-radius: 2px 0 15px 0; } .top-right { top: -8px; right: -8px; border-radius: 0 2px 0 15px; } .bottom-left { bottom: -8px; left: -8px; border-radius: 0 15px 0 2px; } .bottom-right { bottom: -8px; right: -8px; border-radius: 15px 0 2px 0; }  /* --- EL SETLIST (PAPEL INTERNO) --- */ .setlist-paper { background: #fff; color: #000; padding: 40px; transform: rotate(0.5deg); position: relative; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }  .tape-top { width: 100px; height: 30px; background: rgba(240, 230, 140, 0.8); /* Cinta amarillenta */ position: absolute; top: -15px; left: 50%; transform: translateX(-50%); }  .setlist-header {  font-size: 2.2rem; text-align: center; margin: 0 0 30px 0; text-decoration: underline; }  /* Lista del Proceso */ .process-list { list-style: none; padding: 0; margin: 0; }  .process-item { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 2px dashed #ccc; padding-bottom: 15px; } .process-item:last-child { border-bottom: none; margin-bottom: 0; }  .track-num {  font-size: 1.8rem; color: var(--punk-pink); min-width: 40px; }  .track-info h4 {  font-size: 1.4rem; margin: 0 0 5px 0; color: #000; } .track-info p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #444; }  /* --- STICKER DE PRECIO --- */ .price-sticker { position: absolute; bottom: 0; right: -60px; background: var(--neon-cyan); color: #111; width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: rotate(-10deg); box-shadow: 3px 5px 10px rgba(0,0,0,0.4); border: 3px solid #fff; z-index: 10; } .price-sticker:hover { transform: scale(1.1) rotate(0deg); transition: 0.3s; }  .sticker-small { font-size: 0.6rem; font-weight: bold; text-transform: uppercase; } .sticker-price {  font-size: 2.5rem; line-height: 0.9; font-weight: bold; } .sticker-note { font-size: 0.55rem; font-weight: bold; text-transform: uppercase; }  /* CTA del Roadmap */ .roadmap-cta { margin-top: 50px; } .roadmap-cta p { font-size: 1.1rem; margin-bottom: 15px; }  .rnr-cta-btn { display: inline-block; background: var(--punk-pink); color: #fff; padding: 15px 40px;  font-size: 1.5rem; text-decoration: none; transform: skew(-10deg); transition: all 0.2s; border: 1px solid var(--punk-pink); } .rnr-cta-btn:hover { background: #fff; color: var(--punk-pink); transform: skew(-10deg) scale(1.05); box-shadow: 0 0 20px var(--punk-pink); }  /* ==========================================================================    SECCIÓN 3: LINER NOTES (SEO & FAQ)    ========================================================================== */  .seo-liner-notes { background: #fff; /* Fondo blanco limpio */ color: #111; padding: 80px 20px; border-top: 10px solid #111; /* Separación dura */ }  .notes-container { max-width: 1000px; margin: 0 auto; }  .notes-header { text-align: left; margin-bottom: 40px; }  .notes-header h2 {  font-size: 3rem; margin: 0 0 20px 0; border-bottom: 4px solid #111; display: inline-block; }  .servicios-col-header { 	font-size: 4rem; margin: 0 0 20px 0; border-bottom: 4px dashed var(--dm-yellow); display: inline-block; }  .notes-intro { font-size: 1.2rem; font-style: italic; color: #555; }  /* Grid de Columnas */ .notes-columns { display: grid; grid-template-columns: 1fr 1fr; /* 2 columnas */ gap: 50px; }  .note-block { margin-bottom: 20px; }  .note-block h4 {  font-size: 1.6rem; margin: 0 0 10px 0; color: var(--punk-pink); text-transform: uppercase; }  .note-block p { font-size: 1rem; line-height: 1.6; color: #333; } 
 
 /* Bloque FAQ ancho completo */ /* Botón "Ver Track" dentro de Liner Notes */
.servicio-btn-lm {display: inline-block;    margin-top: 10px;    font-size: 1.1rem;    color: #111;    text-decoration: none;    border-bottom: 2px solid var(--punk-pink); /* Subrayado Rosa Punk */    padding-bottom: 2px;    transition: all 0.3s ease;    letter-spacing: 1px;}.servicio-btn-lm .arrow {    display: inline-block;    transition: transform 0.3s ease;    color: var(--punk-pink);    font-weight: bold;}/* Hover: El botón se pone negro y la flecha se mueve */.servicio-btn-lm:hover {    background-color: #111;    color: #fff;    padding: 2px 8px; /* Crea un efecto de "etiqueta" al pasar el mouse */    border-bottom-color: #111;}.servicio-btn-lm:hover .arrow {    transform: translateX(5px); /* La flecha avanza */    color: var(--neon-cyan);}.full-width { grid-column: 1 / -1; margin-top: 40px; padding-top: 40px; border-top: 2px dashed #ccc; }  /* Estilos para el contenido FAQ (WYSIWYG) */ .faq-content-area details { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .faq-content-area summary { font-weight: bold; cursor: pointer; padding: 10px 0; font-size: 1.1rem; } .faq-content-area summary:hover { color: var(--punk-pink); }

/*
=======================
9. PÁGINA PILAR SERVICIOS
=======================
/* --- RANK AND ROLL BREADCRUMBS --- */.rnr-breadcrumbs {	font-weight: 300;    font-size: 0.85rem;    color: #888;    margin-bottom: 20px;    text-transform: uppercase;    letter-spacing: 1px;    display: flex;    flex-wrap: wrap;    align-items: center;    gap: 8px;    position: relative;    z-index: 20; /* Asegura que esté encima de decoraciones */}/* Enlaces (Pasos previos) */.crumb-link {    color: #aaa;    text-decoration: none;    border-bottom: 1px solid transparent;    transition: all 0.2s ease;}.crumb-link:hover {    color: var(--punk-pink); /* Rosa al pasar el mouse */    border-bottom-color: var(--punk-pink);}/* Separador (La flecha >) */.crumb-sep {    color: var(--dm-yellow); /* Amarillo o Cian */    font-weight: bold;}/* Página Actual (Sin enlace) */.crumb-current {    color: var(--neon-cyan); /* Cian para destacar dónde estás */    font-weight: bold;    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);}/* RESPONSIVE */@media (max-width: 900px) {    .rnr-breadcrumbs {        justify-content: center; /* Centrado en móvil */        font-size: 0.75rem;    }}/* --- HERO PILLAR PAGE --- */body.page-template-page-servicios {padding-top: 0; /* adjust as needed */ }.page-template-page-servicios .site-content { display: block !important; /* Fuerza a que los bloques se apilen */ width: 100% !important;    /* Asegura que ocupe todo el ancho */ max-width: 100% !important; margin: 0 !important;  /* Elimina márgenes extraños del tema padre */ padding: 0 !important; }  /* Opcional: Si el tema padre limita el ancho de containers internos */ .page-template-page-servicios .site-main { max-width: 100% !important; margin: 0 !important; } .page-template-page-servicios .grid-container {max-width: 100%;}/* --- HERO ROCK STAGE --- */.hero-rock-stage {    position: relative;    padding: 140px 20px 100px 20px;	min-height: 100vh; height: auto;   background-color: #111;    /* Fondo con viñeta y ruido sutil */    background-image: radial-gradient(circle at center, #222 0%, #111 70%);    overflow: hidden;    text-align: center;    border-bottom: 5px solid var(--punk-pink);}.relative-z { position: relative; z-index: 10; }/* --- TIPOGRAFÍA DE IMPACTO --- */.pre-title {        font-weight: 700;    letter-spacing: 4px;    color: var(--neon-cyan);    font-size: 1rem;    display: block;    margin-bottom: 10px;    text-transform: uppercase;} .hero-glitch-title {        font-size: 4rem; /* Base size */    line-height: 0.9;    color: #fff;    margin: 0 0 20px 0;    position: relative;}/* La palabra ARSENAL (Efecto Hollow/Hueco) */.arsenal-text {    font-size: 5rem; /* Gigante */    display: block;    color: transparent; /* Texto transparente */    -webkit-text-stroke: 3px #fff; /* Borde blanco */    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);    position: relative;    z-index: 2;    transition: 0.3s;}/* Efecto Hover en el título */.hero-rock-stage:hover .arsenal-text {    color: #fff; /* Se rellena al pasar el mouse */    text-shadow: 5px 5px 0px var(--punk-pink);    -webkit-text-stroke: 0px transparent;    transform: scale(1.02) rotate(-2deg);}.hero-rock-desc {    font-size: 1.2rem;    color: #ccc;    max-width: 600px;    margin: 0 auto;    }/* --- DECORACIÓN Y ANIMACIONES --- */.stage-deco {    position: absolute;    top: 0; left: 0; width: 100%; height: 100%;    pointer-events: none; /* Para que no interfiera con clicks */    z-index: 1;}/* Iconos Flotantes */.float-icon {    position: absolute;    font-size: 4rem;    opacity: 0.3; /* Semitransparente */    filter: grayscale(100%) blur(1px); /* Estilo fantasma */    animation: floatAround 6s ease-in-out infinite;}.icon-1 { top: 20%; left: 10%; animation-delay: 0s; font-size: 5rem; transform: rotate(-15deg); }.icon-2 { bottom: 30%; right: 10%; animation-delay: 2s; font-size: 6rem; transform: rotate(15deg); }.icon-3 { top: 15%; right: 25%; animation-delay: 4s; font-size: 3rem; filter: blur(2px); }/* Mancha de Pintura detrás del texto (CSS puro) */.grunge-splash {    position: absolute;    top: 50%; left: 50%;    width: 600px; height: 300px;    background: var(--punk-pink);    opacity: 0.15;    transform: translate(-50%, -50%) rotate(-5deg);    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Forma orgánica amorfa */    filter: blur(40px);    z-index: 0;}/* Animación de Flotación */@keyframes floatAround {    0% { transform: translateY(0px) rotate(0deg); }    50% { transform: translateY(-20px) rotate(5deg); }    100% { transform: translateY(0px) rotate(0deg); }}/* Indicador de Scroll */ .scroll-indicator {    margin-top: 50px;        font-size: 1rem;    color: var(--dm-yellow);    animation: bounce 2s infinite;}@keyframes bounce {    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}    40% {transform: translateY(-10px);}    60% {transform: translateY(-5px);}}/* RESPONSIVE */@media (max-width: 768px) {    .arsenal-text { font-size: 3rem; -webkit-text-stroke: 1px #fff; }    .hero-glitch-title { font-size: 2.5rem; }    .float-icon { opacity: 0.15; font-size: 3rem; } /* Menos intrusivo en móvil */}.hero-center {    display: flex; justify-content: center; align-items: center;    padding: 100px 20px; height: 100vh;}.hero-title-large {     font-size: 5rem; color: #fff;    line-height: 0.9; margin-bottom: 20px; text-transform: uppercase;    text-shadow: 4px 4px 0px #000;}.hero-subtitle {    font-size: 1.3rem; color: #ddd; max-width: 700px; margin: 0 auto;}/* --- THE WALL SECTION (FONDO DE LADRILLOS CSS) --- */.wall-section {    position: relative;    padding: 80px 20px;    background-color: #1a1a1a;    /* Patrón de Ladrillos CSS */    background-image:         linear-gradient(335deg, rgba(0,0,0,0.3) 23px, transparent 23px),        linear-gradient(155deg, rgba(0,0,0,0.3) 23px, transparent 23px),        linear-gradient(335deg, rgba(0,0,0,0.3) 23px, transparent 23px),        linear-gradient(155deg, rgba(0,0,0,0.3) 23px, transparent 23px);    background-size: 58px 58px;    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;    border-top: 10px solid #000;    border-bottom: 10px solid #000;}/* Sombra viñeta para dar profundidad */.wall-overlay {    position: absolute; top: 0; left: 0; width: 100%; height: 100%;    background: radial-gradient(circle, transparent 20%, #000 130%);    pointer-events: none;}.posters-grid {    display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;    position: relative; z-index: 2;}/* --- ESTILO DE LOS PÓSTERS --- */.gig-poster {    background: #fdfdfd; /* Papel blanco sucio */    width: 350px;    padding: 0;    box-shadow: 0 10px 30px rgba(0,0,0,0.5);    position: relative;    display: flex; flex-direction: column;    transition: transform 0.3s ease;}/* Rotaciones orgánicas para cada póster */.poster-design { transform: rotate(-2deg); } .poster-marketing { transform: rotate(1deg); margin-top: 30px; } /* Un poco más abajo */.poster-data { transform: rotate(3deg); }.gig-poster:hover { transform: scale(1.02) rotate(0deg); z-index: 10; }/* Cinta Adhesiva (Tape) */.tape-corner {    width: 80px; height: 30px;    background: rgba(255,255,255,0.4);    position: absolute;    box-shadow: 0 1px 3px rgba(0,0,0,0.2);    backdrop-filter: blur(1px);    border: 1px solid rgba(255,255,255,0.3);}.tape-corner.top-left { top: -10px; left: -20px; transform: rotate(-30deg); }.tape-corner.top-right { top: -10px; right: -20px; transform: rotate(30deg); }.tape-corner.bottom-left { bottom: -10px; left: -20px; transform: rotate(30deg); }.tape-corner.bottom-right { bottom: -10px; right: -20px; transform: rotate(-30deg); }.tape-corner.top-center { top: -15px; left: 50%; transform: translateX(-50%); }/* Cabecera del Póster */.poster-header {    background: #111; color: #fff; padding: 20px; text-align: center;    border-bottom: 2px solid #000;}.poster-design .poster-header { background: var(--punk-pink); }.poster-marketing .poster-header { background: var(--neon-cyan); color: #000; }.poster-data .poster-header { background: var(--dm-yellow); color: #000; }.poster-icon { font-size: 3rem; display: block; margin-bottom: 5px; }.gig-poster h3 {     font-size: 2.5rem; margin: 0; line-height: 1;}.poster-cat {  font-size: 0.8rem; font-weight: bold; letter-spacing: 1px; }/* Cuerpo del Póster */.poster-body { padding: 30px 20px; flex-grow: 1; }.poster-desc { font-size: 0.95rem; color: #555; text-align: center; margin-bottom: 25px; font-style: italic; }.setlist-links { list-style: none; padding: 0; margin: 0; }.setlist-links li { margin-bottom: 12px; border-bottom: 1px dashed #ccc; padding-bottom: 5px; }.setlist-links li:last-child { border-bottom: none; }.setlist-links a {    text-decoration: none; color: #111;  font-size: 1.4rem;    display: block; transition: 0.2s;}.setlist-links a:hover {    padding-left: 10px; color: var(--punk-pink); /* Efecto desplazamiento */}/* Cambiar color hover según el póster */.poster-marketing .setlist-links a:hover { color: #008f96; } /* Cian oscuro */.poster-data .setlist-links a:hover { color: #b7950b; } /* Amarillo oscuro *//* Footer del Póster */.poster-footer { padding: 20px; text-align: center; background: #eee; border-top: 1px solid #ddd; }.poster-btn {    display: inline-block; padding: 10px 25px; background: #111; color: #fff;    text-decoration: none;  font-size: 1.2rem;    transform: skew(-10deg); transition: 0.2s;}.poster-btn:hover { background: var(--punk-pink); color: var(--text-white); transform: skew(-10deg) scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }/* Responsive */@media (max-width: 900px) {    .hero-title-large { font-size: 3.5rem; }    .posters-grid { flex-direction: column; align-items: center; }    .gig-poster { width: 100%; max-width: 400px; transform: rotate(0deg); margin: 0 0 40px 0; }}

/*
=======================
ABOUT
=======================
*/
body.page-template-page-about { padding-top: 0px; /* adjust as needed */ } .page-template-page-about .grid-container {max-width: 100%; }  /* =========================================    FIX LAYOUT PARA SERVICIOS (Rank and Roll)    ========================================= */ .page-template-page-about .site-content { display: block !important; /* Fuerza a que los bloques se apilen */ width: 100% !important;    /* Asegura que ocupe todo el ancho */ max-width: 100% !important; margin: 0 !important;  /* Elimina márgenes extraños del tema padre */ padding: 0 !important; }  /* Opcional: Si el tema padre limita el ancho de containers internos */ .page-template-page-about .site-main { max-width: 100% !important; margin: 0 !important; } /* 1. VARIABLES GLOBALES*/  :root { --bg-dark: #111111; --neon-cyan: #00f3ff; --punk-pink: #ff0099; --dm-yellow: #f1c40f; /* Color del hilo amarillo */ --text-white: #ffffff; }/* --- ABOUT PAGE HERO --- */.about-hero {    /* Reutilizamos estilos del hero rock stage, ajuste específico */    padding-bottom: 60px;}/* --- BIO SECTION (FANZINE STYLE) --- */.about-bio-section {    padding: 100px 0;    background: #fff;    color: #111;    position: relative;}.bio-grid {    display: flex;    align-items: flex-start; /* Alineación superior */    gap: 60px;}/* Columna Imagen */.bio-image-wrapper {    flex: 0 0 400px; /* Ancho fijo imagen */    position: relative;    transform: rotate(-2deg); /* Toque orgánico */}.bio-photo {    width: 100%; height: 500px;    background-size: cover; background-position: center;    position: relative;    border: 8px solid #fff;    box-shadow: 15px 15px 0px #111; /* Sombra dura negra */    overflow: hidden;}/* Efecto Overlay (Opcional: Filtro rosa/cian sobre la foto) */.photo-overlay {    position: absolute; top: 0; left: 0; width: 100%; height: 100%;    background: linear-gradient(45deg, rgba(0, 243, 255, 0.2), rgba(255, 0, 153, 0.2));    mix-blend-mode: multiply;}.photo-tape {    width: 150px; height: 40px;    background: rgba(255,255,255,0.6);    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);    box-shadow: 0 2px 5px rgba(0,0,0,0.2);    backdrop-filter: blur(2px); border: 1px solid #ddd; z-index: 5;}.photo-caption {    margin-top: 20px; text-align: center; font-family: var(--font-head);}.photo-caption .name { display: block; font-size: 2rem; line-height: 1; color: #000; }.photo-caption .role { display: block; font-size: 1rem; color: var(--punk-pink); letter-spacing: 2px; }/* Columna Texto Bio */.bio-text-wrapper { flex: 1; }.bio-title {    font-family: var(--font-head); font-size: 3.5rem; margin: 0 0 30px 0;    line-height: 1; color: #000; text-transform: uppercase;}.bio-content p {    font-size: 1.1rem; line-height: 1.7; margin-bottom: 20px; color: #333;}.lead-text { font-size: 1.3rem !important; font-weight: 600; color: #000 !important; }/* Firma */.signature-block { margin-top: 40px; }.hand-signature {    font-family: 'Permanent Marker', cursive; /* Reutilizamos fuente del setlist */    font-size: 2rem; color: #555; transform: rotate(-5deg); display: inline-block;}/* --- TIMELINE SECTION (DISCOGRAPHY) --- */.timeline-section {    background: #111; color: #fff; padding: 100px 0;}.section-title-center {    text-align: center; font-family: var(--font-head); font-size: 3rem; margin-bottom: 60px;}.timeline-container {    max-width: 800px; margin: 0 auto; position: relative;    padding-left: 30px; /* Espacio para la línea */}/* La Línea Vertical (Cable) */.timeline-line {    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;    background: #333; border-radius: 2px;}.timeline-item {    position: relative; margin-bottom: 50px; padding-left: 40px;}.timeline-item:last-child { margin-bottom: 0; }/* El Punto (Conector) */.timeline-dot {    position: absolute; left: -8px; top: 0; width: 20px; height: 20px;    background: var(--neon-cyan); border: 4px solid #111; border-radius: 50%;    box-shadow: 0 0 10px var(--neon-cyan);}.timeline-content .year {    font-family: var(--font-head); font-size: 1.2rem; color: var(--punk-pink);    display: block; margin-bottom: 5px;}.timeline-content h3 {    font-family: var(--font-head); font-size: 2rem; margin: 0; line-height: 1;    color: #fff;}.timeline-content .company {    font-size: 1rem; font-weight: bold; color: #ccc; display: block; margin-bottom: 10px;    text-transform: uppercase; letter-spacing: 1px;}.timeline-content p { font-size: 1rem; color: #aaa; line-height: 1.5; margin: 0; }/* --- VALUES & CTA --- */.values-cta-section {    background: #1a1a1a; padding: 80px 0;    border-top: 1px dashed #333;}.values-grid {    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;    margin-bottom: 60px;}.value-card {    background: #111; padding: 30px; border: 1px solid #333; text-align: center;    transition: 0.3s;}.value-card:hover { border-color: var(--neon-cyan); transform: translateY(-5px); }.value-icon { font-size: 3rem; display: block; margin-bottom: 15px; }.value-card h4 {    font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 10px; color: #fff;}.value-card p { font-size: 0.95rem; color: #bbb; line-height: 1.5; }.final-cta-box {    background: var(--punk-pink); color: #fff;    text-align: center; padding: 60px 20px;    transform: rotate(1deg); /* Estilo sticker pegado */    box-shadow: 0 10px 30px rgba(0,0,0,0.5);}.final-cta-box h2 { font-family: var(--font-head); font-size: 3rem; margin: 0; line-height: 1; }.final-cta-box p { font-size: 1.2rem; margin: 10px 0 30px 0; }.final-cta-box .rnr-cta-btn {    background: #fff; color: var(--punk-pink); border-color: #fff;}.final-cta-box .rnr-cta-btn:hover {    background: #000; color: #fff; border-color: #000;}

/*
=======================
11. CSS CUSTOM FOOTER
=======================
*/
.custom-footer {position: relative;padding: 40px 20px 20px;color: #fafafa;overflow: hidden;}/* Background overlay */.custom-footer::before {content: "";position: absolute;inset: 0;background-image: url('/wp-content/themes/rankandroll-child/assets/images/footerbckg.webp');background-size: contain;background-position: right bottom;background-repeat: no-repeat;background-color: #15d2db;opacity: 0.9;z-index: -1;}/* --- GRID FOR 5 COLUMNS --- */.footer-columns {display: grid;grid-template-columns: repeat(4, 1fr) 0.8fr;  /* 4 content columns + spacer */gap: 40px;padding-right: 120px; /* space for amplifier */align-items: flex-start;}/* Slight left pull for Servicios (only if desired) */.footer-services {margin-left: -10px;}/* General column styling */.footer-column ul {padding: 0;list-style: none;}.footer-column li a {color: #fafafa;text-decoration: none;font-size: 0.9em;}.footer-column li a:hover {text-decoration: underline;}/* Logo */.footer-logo {max-width: 120px;margin-bottom: 10px;}/* --- SOCIAL --- */.social-row {display: flex;gap: 12px;margin-top: 15px;}.social-row img {transition: transform 0.25s ease;}.social-row img:hover {transform: scale(1.1);}/* --- IMPRINT --- */.footer-imprint {margin-top: 40px;border-top: 1px solid #e1b673;padding-top: 20px;}.footer-imprint ul {display: flex;gap: 25px;list-style: none;padding: 0;margin: 0; }.footer-imprint a {color: #fafafa; text-decoration: none;}.footer-imprint a:hover {color: #339999;} .footer-imprint li{font-size:.9rem;} .slogan {font-size: 6rem; font-family: Chillax; font-weight: 600; text-align: center;} .more-link {color: var(--carg-bg);}

/*
=============================
12. LP PLANTILLAS
=============================
*/

/* --- LAYOUT GENERAL --- */

body.page-template-page-plantillas {
	padding-top: 100px;
	}

.rr-landing-container {
    background-color: var(--rr-dark);
    color: var(--rr-text);
    font-family: 'Helvetica Neue', sans-serif; /* O la typo de tu tema */
    padding-bottom: 80px;
}

.rr-landing-container .grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HERO ACTUALIZADO --- */
.rr-hero-plantillas{
    padding: 40px 0;
    overflow: hidden; /* Para evitar scroll horizontal si usamos efectos */
}

/* Layout de 2 columnas: Texto | Imagen */
.rr-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center; /* Centrado verticalmente */
}


.rr-hero-content-plantillas {
    text-align: left; /* Alineamos a la izquierda ahora */
	padding: 20px 0;
	border-bottom-style: dashed;	
	border-bottom: 5px dashed var(--dm-yellow);
}

.rr-hero-content-plantillas h1 {
    padding: 10px 0;
}

/* Estilos de la imagen */
.rr-hero-visual {
    position: relative;
    animation: float 6s ease-in-out infinite; /* Efecto flotante suave */
}

.rr-hero-visual img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Sombra potente "dark mode" */
    border: 1px solid #333;
    position: relative;
    z-index: 2;
    transform: perspective(1000px) rotateY(-5deg); /* Ligero 3D hacia el usuario */
    transition: transform 0.5s ease;
}

.rr-hero-visual:hover img {
    transform: perspective(1000px) rotateY(0deg); /* Se endereza al hover */
}

/* Elemento decorativo detrás (opcional) */
.blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, var(--rr-accent) 0%, rgba(0,0,0,0) 70%);
    opacity: 0.15;
    z-index: 1;
    filter: blur(40px);
}

/* Animación de flotación */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Responsive: En móvil apilamos uno sobre otro */
@media (max-width: 900px) {
    .rr-hero-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .rr-hero-content-plantillas {
        text-align: center;
        order: 1; /* Texto primero */
		border-bottom-style: dashed;	
		border-bottom: 5px dashed var(--dm-yellow);
    }

    .rr-hero-visual {
        order: 2; /* Imagen debajo */
        margin: 0 auto;
        max-width: 80%; /* Que no ocupe todo el ancho en móvil */
    }
    
    .rr-hero-visual img {
        transform: none; /* Quitamos el 3D en móvil */
    }
}

.rr-tag {
    background: var(--rr-accent);
    color: white;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rr-hero h1 {
    font-size: 3.5rem;
    margin: 20px 0;
    line-height: 1.1;
    color: white;
}

.rr-hero-plantillas p {
    font-size: 1.2rem;
    color: #aaa;
    max-width: 600px;
    margin: 0 auto 30px;
}

/* --- CARDS GRID --- */
.rr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.rr-card {
    background: var(--rr-gray);
    border: 1px solid var(--rr-border);
    transition: transform 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.rr-card:hover {
    transform: translateY(-5px);
    border-color: var(--rr-accent);
}

/* Browser Mockup Look */
.rr-card-header {
    background: #000;
    border-bottom: 1px solid var(--rr-border);
    position: relative;
    height: 250px; /* Ajustar altura imagen */
    overflow: hidden;
}

.rr-browser-mockup .dots {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    gap: 5px;
}

.rr-browser-mockup .dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #555;
}

.rr-card-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: object-position 2s ease-in-out;
}

/* Efecto scroll al hover */
.rr-card:hover .rr-card-header img {
    object-position: bottom; /* Hace scroll de la captura */
}

.rr-badge {
    background: var(--dm-yellow);
    color: #000000;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    z-index: 2;
}

/* --- CARD BODY --- */
.rr-card-body {
    padding: 25px;
}

.rr-card-body h3{
    margin: 10px 0;
}

.rr-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    color: #ccc;
}

.rr-features li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rr-features svg {
    color: var(--rr-accent);
}

/* --- BOTONES --- */
.rr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.rr-btn {
    display: inline-block;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.rr-btn-primary {
    background: var(--rr-accent);
    color: white;
}

.rr-btn-primary:hover {
    background: white;
    color: black;
}

.rr-btn-outline {
    background: var(--neon-cyan);
    border: 1px solid var(--rr-border);
    color: white;
}

.rr-btn-outline:hover {
    border-color: white;
}

/* --- TECH SPECS --- */
.rr-tech-specs {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 4px dashed var(--text-white);
}

.rr-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.rr-tech-specs h2 {
    text-align: center;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .rr-hero-plantillas h1 { font-size: 2.5rem; }
    .rr-grid { grid-template-columns: 1fr; }
    .rr-specs-grid { grid-template-columns: 1fr; text-align: center; }
}

/*******
============================================
13. Sucks or Rocks Scanner
============================================
*/
body.single-gear {padding-top: 0;}

.single-gear .container.grid-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-gear .site-content {display: block;}

.single-gear .hero-rock-stage {padding: 0px;}

/* Ajuste del Header para que no se encimen */
.scanner-wrapper { 
    min-height: 100vh;
    height: auto;   
    color: #fff;
}

.scanner-title {color: var(--text-white);
	font-size: 4rem;
    text-shadow: 5px 5px 0px var(--punk-pink);
    -webkit-text-stroke: 0px transparent;
    transform: scale(1.04) rotate(-2deg);}	
	
.scanner-title:hover{
    color: #fff;
    text-shadow: 5px 5px 0px var(--punk-pink);
    -webkit-text-stroke: 0px transparent;
    transform: scale(1.02) rotate(-2deg);}	
	
	
/* --- FORMULARIO COMPACTO Y GRID --- */
.rnr-scanner-form { 
    max-width: 700px; /* Un poco más ancho para que quepan 2 columnas */
    margin: 10px auto; 
    background: var(--rr-light-black); 
    padding: 25px; 
    border-radius: 8px;
    border: 1px solid #333;
}

.rnr-scanner-form input {border-radius: 20px !important;}

/* El Grid de 2 columnas */
.form-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* DOS COLUMNAS */
    gap: 15px; /* Espacio más estrecho */
    margin-bottom: 15px; 
}

/* Inputs compactos */
.scanner-form input { 
    padding: 10px; /* Menos alto */
    font-size: 0.9rem;
    border-radius: 4px; 
    border: 1px solid #444; 
    width: 100%; 
    box-sizing: border-box; 
    background: #222;
    color: #fff;
}

#scanner-loading {display: flex ;
	flex-direction: column;
  align-items: center;      /* centra vertical */
  justify-content: center;  /* centra horizontal (opcional) */
  height: 100vh;            /* altura total de la pantalla */
}

#scanner-result {padding-top: 100px;}

/* Casilla de "No tengo web" */
.no-web-checkbox {
    display: block; color: #aaa; margin-top: 5px;  justify-self: start;
}



/* RESPONSIVE: En móvil volvemos a 1 columna */
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

.legal-check { font-size: 0.8rem; margin: 20px 0; text-align: left; }
.legal-check a { color: var(--punk-pink); }

.btn-rocks {background: var(--punk-pink);
    color: var(--rr-white);
    transform: skew(-10deg) scale(1.05);
box-shadow: 0 0 20px var(--punk-pink);}	
	
.btn-rocks:hover {background: var(--neon-cyan);}

/* Layout Principal */
.scanner-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 */
    gap: 60px;
    align-items: center;
}

/* Izquierda */
.scanner-left { text-align: left; }
.scanner-hook-points p { font-size: 1.1rem; margin-bottom: 15px; color: #fff; }


/* Separador */
.form-divider {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin: 25px 0;
}

/* Ajustes de campos para que sean 1 columna en la derecha */
.business-fields, .contact-fields { display: flex; flex-direction: column; gap: 15px; }

/* --- ESCENARIO DINÁMICO (Sin saltos ni colapsos) --- */
#scanner-interface {
    min-height: 400px; /* Altura mínima para que no "brinque" al ocultar el form */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 50px;
}

#scanner-loading {
    display: none; 
    text-align: center;
    padding: 50px 0;
    position: relative;
    z-index: 999; /* Asegura que flote sobre todo */
}

/* Responsive */
@media (max-width: 768px) {
    .scanner-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .scanner-title { font-size: 2.5rem; }
	.single-gear .hero-rock-stage {
    padding-top: 80px;}
	
	#scanner-loading {padding: 50px 40px;}
	
	.volume-box {padding; 40px 20px;}
}

/* Loader (el círculo girando) */
.spinner {
    width: 50px; height: 50px; border: 5px solid #333;
    border-top: 5px solid var(--neon-cyan); border-radius: 50%;
    margin: 20px auto; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#loading-text {
	font-size: 1.5rem;
  background: linear-gradient(
    90deg,
    #cc007a 30%,
    #ff66cc 50%,
    #cc007a 70%
  );

  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.battle-container { margin: 40px 0; }
.battle-item { margin-bottom: 20px; }
.progress-bar-bg {
    background: #444; height: 20px; border-radius: 10px; overflow: hidden;
}
.progress-bar { height: 100%; transition: width 2s ease-in-out; }
.user-bar { background: var(--punk-pink); }
.comp-bar { background: #555; }

.result-cta-box {
    background: #fff; padding: 30px; border-radius: 8px; color: #111;
}

.audit-table {
    width: 100%; border-collapse: collapse; margin: 30px 0;
    background: #fff; color: #333;
}
.audit-table th, .audit-table td {
    padding: 15px; border: 1px solid #ddd; text-align: center;
}
.audit-table th { background: var(--conta-blue-dark); color: #fff; }
.audit-table td:first-child { text-align: left; font-weight: bold; }

.result-summary { margin-top: 20px; font-size: 1.2rem; font-weight: 500; }

/* Corrección de la lista en los resultados */
.audit-list { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 20px 0; 
    color: #fff; /* Asegura que el texto sea blanco o visible */
}

.audit-list li {
    background: rgba(255,255,255,0.05); 
    padding: 15px; 
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.score-card-final {
    background: #000; padding: 40px; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); text-align: center; color: var(--punk-pink);
}
.btn-large {
    display: block; width: 100%; margin-top: 20px;
    padding: 20px; font-size: 1.2rem; text-align: center;
    background: var(--punk-pink); color: #fff;
    border-radius: 8px; font-weight: bold;
}
.btn-large:hover { background: var(--punk-pink); transform: scale(1.02); }

/* --- AUDIT CARDS Y BARRAS --- */
.dashboard-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; 
    margin: 30px 0;
}

.audit-card {
    background: #111; border: 1px solid #333; padding: 25px; border-radius: 8px;
    display: flex; flex-direction: column;
}

.audit-card h4 { color: #fff; margin-bottom: 20px; font-size: 1.2rem; border-bottom: 1px solid #333; padding-bottom: 10px; }

/* Contenedor de la barra y texto */
.bar-wrap { margin-bottom: 15px; }
.bar-label { display: flex; justify-content: space-between; color: #aaa; font-size: 0.8rem; margin-bottom: 5px; }

/* La barra en sí */
.bar-comparison { height: 25px; background: #222; border-radius: 4px; overflow: hidden; display: flex; }

.user-bar { 
    background: var(--punk-pink); height: 100%; display: flex; align-items: center; 
    padding: 0 10px; color: #000; font-weight: bold; font-size: 0.75rem;
    white-space: nowrap; /* Evita que el texto se rompa */
}
.comp-bar { 
    background: var(--dm-yellow); height: 100%; display: flex; align-items: center; 
    padding: 0 10px; color: #fff; font-size: 0.75rem; white-space: nowrap;
}

/* Lista de detalles */
.audit-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.audit-list li {
    color: #ccc; font-size: 0.9rem; margin-bottom: 8px; padding-left: 20px; position: relative;
}

.volume-box {
    margin-top: 40px;
    background: var(--text-white);
    padding: 40px 120px;
    border-radius: 8px;
    border-top: 5px solid var(--dm-yellow);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.volume-box h3 {
    font-family: var(--font-head);
    font-size: 2rem;
    color: var(--rr-dark);
    margin-bottom: 20px;
}

.steps-list { list-style: none; padding: 0; margin-bottom: 30px; }
.steps-list li {
    padding: 15px; margin-bottom: 10px;
    font-weight: 600;
	color: var(--rr-dark);
}

.growth-claim {
    background: var(--dm-yellow);
    color: var(--rr-dark);
    padding: 20px;
    text-align: center;
    font-size: 1.3rem;
    border-radius: 4px;
    margin-bottom: 15px;
}

.disclaimer {
    font-size: 0.75rem;
    color: var(--rr-gray);
    text-align: center;
    font-style: italic;
}	

/* --- ESTILOS PARA PDF / IMPRESIÓN --- */
@media print {
    body * { visibility: hidden; } /* Ocultar todo */
    #scanner-result, #scanner-result * { visibility: visible; } /* Mostrar solo el reporte */
    
    #scanner-result {
        position: absolute; left: 0; top: 0; width: 100%;
        background: #fff; color: #000;
    }
    .btn-conta, .btn-large { display: none; } /* Ocultar botones en el PDF */
    
    /* Ajustes visuales para el PDF */
    .audit-card { border: 1px solid #ddd; box-shadow: none; background: #fff; color: #000; }
    .audit-card h4 { color: #000; border-bottom: 1px solid #000; }
    .user-bar { background: #333 !important; -webkit-print-color-adjust: exact; }
    .comp-bar { background: #ccc !important; -webkit-print-color-adjust: exact; }
}


/*
===========================================
   RESPONSIVE – RANK & ROLL
===========================================

/* ==========================================================================
   LPs servicios
   ========================================================================== 
   */
@media (max-width: 900px) {/* Cambiar dirección a Columna */    .hero-split-layout {        flex-direction: column; /* Texto arriba, Parche abajo */        text-align: center; /* Centrar todo en móvil */        gap: 30px;    }.hero-rock-stage{	height: auto;}    .hero-text-side {width: 100%; text-align: center;    }    .hero-patch-side { width: 100%; }    /* Ajuste tamaños tipografía */    .arsenal-text { font-size: 3rem; -webkit-text-stroke: 1px #fff; }    .hero-rock-desc { font-size: 1.1rem; }    /* Ajuste Parche en móvil */    .hero-patch { width: 260px; height: 260px; }    .hero-icon { font-size: 8rem; }	.rr-mobile-menu-toggle {display: flex; } /* Hide desktop menu */ .rr-header-menu {display: none; } .rnr-stage-box { margin: 0;	}  .footer-columns {grid-template-columns: 1fr 1fr;  /* 2 columns on tablet */ padding-right: 0;}/* Hero page single servicios */.hero-container {flex-direction: column; /* papel arriba, 'column' normal.'column-reverse' pone el texto abajo y la imagen (parche) arriba*/gap: 20px; padding: 0 1rem;}.hero-paper-wrapper {width: 100%;flex: auto;}.hero-paper-note {padding: 30px;transform: rotate(0deg); /* Enderezamos en móvil */}.hero-title {font-size: 2.5rem;}.hero-patch {width: 200px; /* Reducimos tamaño en móvil */height: 200px;transform: rotate(0deg);}.hero-icon {font-size: 5rem;}/* Footer */.footer-columns {grid-template-columns: 1fr 1fr; /* 2 columns on tablet */ padding-right: 0;}/* SERVICIOS */.hero-container { flex-direction: column; gap: 30px; } .hero-paper-wrapper { width: 100%; } .hero-paper-note { padding: 30px; transform: rotate(0deg); } .hero-title { font-size: 2.5rem; } .hero-patch { width: 220px; height: 220px; } .hero-icon { font-size: 5rem; } /* Roadmap en Móvil */ .flight-case { padding: 20px 10px; } .setlist-paper { padding: 20px; transform: rotate(0deg); } .price-sticker {position: relative; right: auto; bottom: auto;margin: 20px auto 0 auto; transform: rotate(0deg); }  /* Liner Notes en Móvil */ .notes-columns { grid-template-columns: 1fr; gap: 30px; }

/*ABOUT*/
.bio-grid { flex-direction: column; }    .bio-image-wrapper { width: 100%; flex: auto; transform: rotate(0deg); }    .bio-photo { height: 400px; }        .values-grid { grid-template-columns: 1fr; }        .timeline-container { padding-left: 20px; }    .timeline-item { padding-left: 30px;}
}

@media (max-width: 600px) {
.rr-hero-content, .rr-services, .rr-portfolio { display: flex; flex-wrap: wrap;}}

@media (max-width: 768px) {.rr-header-logo img {width: 170px; }.rnr-stage-box { max-width: 100%; padding: 2rem 0;}	.rnr-widget-container {	padding: 4rem 1rem;	}.rr-cta-btn { display: none;}	body {padding-top: 50px; }.rr-hero-content { height: 100vh; text-align: center;	}	

.rr-hero-content, #rnr-services, #rnr-portfolio {display: flex; flex-wrap: wrap;}	/*CSS CUSTOM FOOTER*/ .footer-columns {        grid-template-columns: 1fr;  /* stack on mobile */        gap: 25px;    }.rnr-section-title {	font-size: 3rem;}/*single servicios */.hero-container { flex-direction: column; gap: 30px; }/*Página pilar servicios */.roadmap-title {  font-size: 2.5rem;}

/* Ocultar submenús por defecto en móvil */
.rr-mobile-menu-list .sub-menu {
    display: none;
    background: rgba(0,0,0,0.2); /* Fondo levemente distinto para diferenciar */
    padding-left: 20px;
}

/* Mostrar submenú cuando está activo */
.rr-mobile-menu-list li.is-open > .sub-menu {
    display: block;
}

ul.sub-menu li {
    list-style: none;
    text-align: left;
    padding: 0 0 0 20px;
}

ul.sub-menu li a{
	font-size: .9rem;
}

/* Icono del Chevron */
.rr-mobile-menu-list .menu-item-has-children > a {
    position: relative;
    padding-right: 40px !important;
}

.rr-mobile-menu-list .menu-item-has-children > a::after {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--conta-gold);
    transition: transform 0.3s ease;
}

/* Rotar icono cuando está abierto */
.rr-mobile-menu-list li.is-open > a::after {
    transform: translateY(-50%) rotate(45deg);
}



}