/*
 Theme Name:   RNR Sweet Child OM
 Template:     generatepress
 Description:  Plantilla Corporativa para Abogados (High Performance)
 Version:      1.0.0
 Author:       Rank and Roll Agency
*/

/*
   ============== TOC =============

1. VARIABLES (Paleta Corporativa)
2. FONT FACE
3. ESTILOS GLOBALES
4. HEADER & NAVEGACIÓN (Clean & Consolidated)
5. HERO
6. SOBRE NOSOTROS
7. HOME – SECCIÓN SERVICIOS
8. HOME – SECCIÓN CONTACTO
9. HOME – SECCIÓN PROCESO (TIMELINE)
10. HOME – SECCIÓN PAQUETES (PRICING)
11. SECCIÓN TESTIMONIOS
12. FOOTER
13. PÁGINA SERVICIOS (PILAR Y SINGLE)
====================================
*/


/* 
===================================== 
1. VARIABLES (Paleta Corporativa)
=====================================
 */
:root {
    --rnr-theme-dark: #122A21;   /* Color Tema General */
    --rnr-theme-light: #3A9572;  /* Color tema general en versión clara para destacar elementos */
    --rnr-ctas: #43B68A;        /* Color para CTAs */
    --rnr-soft-bg: #f7f8f9;        /* Fondo gris Suave */
	--rnr-soft2-bg: #f7f8f9;   /* Fondo azul gris */
	--rnr-overlay: rgb(10 64 22 / 52%);
    --text-main: #333333; 		  /* Color texto General - Gris Oscuro */
    --text-white: #ffffff;		  /* Texto Blanco */
	--text-gray: #fafafa;		/* Para Textos en color gris claro*/
    
    /* Variables de Fuentes */
    --font-head: GeneralSans-Variable; 
    --font-body: GeneralSans-Variable; 
}

/*
=====================================
2. FONT FACE 
=====================================
*/
/**
* @license
*
* Font Family: General Sans
* Designed by: Frode Helland
* URL: https://www.fontshare.com/fonts/general-sans
* © 2025 Indian Type Foundry
*
* General Sans Extralight 
* General Sans ExtralightItalic 
* General Sans Light 
* General Sans LightItalic 
* General Sans Regular 
* General Sans Italic 
* General Sans Medium 
* General Sans MediumItalic 
* General Sans Semibold 
* General Sans SemiboldItalic 
* General Sans Bold 
* General Sans BoldItalic 
* General Sans Variable (Variable font)
* General Sans VariableItalic (Variable font)

*
*/
@font-face {
  font-family: 'GeneralSans-Extralight';
  src: url('assets/fonts/GeneralSans-Extralight.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Extralight.woff') format('woff'),
       url('assets/fonts/GeneralSans-Extralight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-ExtralightItalic';
  src: url('assets/fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Light';
  src: url('assets/fonts/GeneralSans-Light.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Light.woff') format('woff'),
       url('assets/fonts/GeneralSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-LightItalic';
  src: url('assets/fonts/GeneralSans-LightItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-LightItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Regular';
  src: url('assets/fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Regular.woff') format('woff'),
       url('assets/fonts/GeneralSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-Italic';
  src: url('assets/fonts/GeneralSans-Italic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Italic.woff') format('woff'),
       url('assets/fonts/GeneralSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('assets/fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Medium.woff') format('woff'),
       url('assets/fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-MediumItalic';
  src: url('assets/fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-MediumItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Semibold';
  src: url('assets/fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Semibold.woff') format('woff'),
       url('assets/fonts/GeneralSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-SemiboldItalic';
  src: url('assets/fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('assets/fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Bold.woff') format('woff'),
       url('assets/fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-BoldItalic';
  src: url('assets/fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-BoldItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('assets/fonts/GeneralSans-Variable.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-Variable.woff') format('woff'),
       url('assets/fonts/GeneralSans-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
/**
* This is a variable font
* You can control variable axes as shown below:
* font-variation-settings: wght 700.0;
*
* available axes:
'wght' (range from 200.0 to 700.0
*/
@font-face {
  font-family: 'GeneralSans-VariableItalic';
  src: url('assets/fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
       url('assets/fonts/GeneralSans-VariableItalic.woff') format('woff'),
       url('assets/fonts/GeneralSans-VariableItalic.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}

/*
=====================================
3. ESTILOS GLOBALES
===================================== 
*/
body {
    font-family: var(--font-body);
    color: var(--text-main);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--rnr-theme-dark);
    font-weight: 700;
}

.bg-gray {margin: 4rem 0; background-color: var(--rnr-soft-bg);}
.bg-white {padding: 4rem 0; background-color: var(--text-white); }
.bg-blue-gray {padding: 4rem 0; background-color: var(--rnr-soft2-bg); }

.rnr-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}

.eng-wrapper {
    max-width: 800px;
    margin: 40px auto 0; /* Centrado horizontal */
}

/* Botones Corporativos */
.btn-conta {
    display: inline-block;
    font-size: 1.1rem; 
	background: var(--rnr-ctas);
    color: #fff;
	margin-top: 20px;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 30px;
    transition: background 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
	z-index: 1000;
}
.btn-conta:hover {
    background: var(--text-white);
	border: 1px solid fff; 
    color: var(--rnr-theme-dark);
}

.custom-logo {
	width: 200px;
	height: auto;
}

#primary {
	padding: 5rem;
}

@media (max-width: 900px) {
	#primary {
    padding: 1rem;
}

}

.rnr-breadcrumbs {font-weight: 300; font-size: 0.85rem; color: var(--text-white); 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: var(--text-white); text-decoration: none; border-bottom: 1px solid transparent;    transition: all 0.2s ease;}.crumb-link:hover {color: var(--rnr-ctas); /* Rosa al pasar el mouse */    border-bottom-color: var(--rnr-ctas);}/* Separador (La flecha >) */.crumb-sep {color: var(--rnr-ctas); /* Amarillo o Cian */    font-weight: bold;}/* Página Actual (Sin enlace) */.crumb-current {color: var(--rnr-ctas); /* 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;}}


/* 
==========================================================================
  4. HEADER & NAVEGACIÓN (CLEAN & CONSOLIDATED)
========================================================================== 
*/

/* --- 1. TOP BAR (USPs) --- */
.site-top-bar {
    background-color: var(--rnr-theme-dark); 
    color: var(--text-white);
    padding: 10px 0;
    position: relative;
    z-index: 20;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-bar-flex {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    align-items: center;
}

.top-usp-item { display: flex; align-items: center; gap: 8px; }
.top-usp-item img { width: 20px; height: 20px; }


/* --- 2. HEADER BASE (DESKTOP DEFAULT) --- */
.site-header {
    position: fixed;
    top: 50px; left: 50%; transform: translateX(-50%);
    width: 100%; border-radius: 40px; z-index: 999;
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(236, 240, 244, 0.2) 0%, rgba(124, 137, 141, 0.5) 100%);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.4s ease;
    padding: 10px 0;
}

/* Estado Sticky (Scrolled) */
.site-header.header-scrolled {
    top: 0; width: 100%; border-radius: 0; border: none;
    background-image: none; background-color: var(--rnr-theme-dark);
    padding: 5px 0; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.header-inner {
    display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 0;
}

.main-navigation {
margin-left: auto;
background-color: #7f97b200;
}

.main-navigation ul {
display: flex;
align-items: center;
list-style: none;
margin: 0; padding: 0;
gap: 20px;
}

.main-navigation ul ul a{
    margin: 10px;
}

/* Texto del menú en blanco para verse sobre la foto */
.main-navigation a {
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 0.9rem;
}

/* Texto del menú en blanco para verse sobre la foto */
.main-navigation a {
color: #fff;
font-weight: 500;
text-transform: uppercase;
font-size: 0.9rem;
}
.main-navigation a:hover { color: var(--rnr-ctas); }
.main-navigation a:hover { color: var(--rnr-ctas); }

/* Ocultar elementos exclusivos de móvil en Desktop */
.mobile-nav-wrapper { display: none; }
.mobile-only-cta { display: none; } /* Botón viejo por si quedó */


/* --- 3. NAVEGACIÓN DESKTOP --- */
.desktop-nav ul {
    display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center;
}

.desktop-nav a {
    color: #fff; text-decoration: none; font-weight: 500; text-transform: uppercase; font-size: 0.9rem;
}
.desktop-nav a:hover { color: var(--rnr-ctas); }

/* Flechas de Submenú Desktop */
.desktop-nav li.menu-item-has-children > a { padding-right: 25px; position: relative; }
.desktop-nav li.menu-item-has-children > a::after {
    content: ''; position: absolute; right: 5px; top: 40%;
    width: 6px; height: 6px;
    border-right: 2px solid var(--rnr-ctas); border-bottom: 2px solid var(--rnr-ctas);
    transform: rotate(45deg); transition: 0.3s;
}
.desktop-nav li.menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(-2px); }

/* Dropdown Desktop */
.desktop-nav ul ul {
    position: absolute; top: 100%; left: 0;
    background-color: var(--rnr-theme-dark);
    min-width: 200px; padding: 10px 0; display: none; /* Hover logic */
    border-top: 3px solid var(--rnr-ctas);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    flex-direction: column; gap: 0;
}
.desktop-nav li:hover > ul { display: flex; }

/* Botón CTA Desktop (AGENDA YA) */
.desktop-nav li.menu-cta a {
    background: var(--rnr-ctas); color: #fff !important;
    padding: 10px 25px; border-radius: 40px; font-weight: 700;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.3s;
}
.desktop-nav li.menu-cta a:hover { background: var(--text-white); color: var(--rnr-theme-dark) !important; border: 1px solid var(--rnr-theme-light); transform: translateY(-2px); }


/* ESTILOS MÓVIL (MAX-WIDTH 768PX) - FIX FINAL */
@media (max-width: 768px) {
    
    /* A. Reset Header */
    .site-header, .site-header.header-scrolled {
        position: sticky; top: 0; width: 100%; left: 0; transform: none;
        border-radius: 0; background-color: var(--rnr-theme-dark);
        background-image: none; border: none;
        padding: 10px 0; height: auto;
        z-index: 9999; /* Encima de todo */
    }

    .header-inner { padding: 0 15px; position: relative; }

    /* B. Visibilidad */
    .desktop-nav { display: none !important; }
    .mobile-nav-wrapper { display: block; } 

    /* C. Logo */
    .site-branding { z-index: 10001; position: relative; } /* Encima del overlay */
    .site-branding img { height: 35px; width: auto; }

    /* D. Botón Hamburger (Z-Index alto para cerrar) */
    .rnr-mobile-toggle {
        background: transparent; border: none; padding: 5px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        z-index: 10001; position: relative; 
    }
    .rnr-mobile-toggle svg { stroke: #fff; width: 32px; height: 32px; transition: 0.3s; }
    
    /* Cambio de icono a X cuando abre */
    .rnr-mobile-toggle.is-active svg { transform: rotate(90deg); stroke: var(--rnr-ctas); }

    /* E. MENÚ OVERLAY (PANTALLA COMPLETA) */
    .mobile-nav {
        display: block; /* Siempre en el DOM, pero oculto por opacidad/transform */
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100vh;
        background-color: var(--rnr-theme-dark);
        padding-top: 100px; /* Espacio para no tapar logo */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: 10000;
        overflow-y: auto; /* Scroll si es muy largo */
    }

    /* Estado ABIERTO */
    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-nav ul {
        list-style: none; padding: 0; margin: 0;
        display: flex; flex-direction: column; text-align: center;
    }

    .mobile-nav li { width: 100%; position: relative; }
    
    .mobile-nav a {
        display: block; padding: 20px;
        color: #fff; font-size: 1.2rem; text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* F. FLECHAS SUBMENÚ (CHEVRONS) */
    .mobile-nav li.menu-item-has-children > a {
        padding-right: 50px; /* Espacio para el icono */
    }

    /* Icono + / Chevron */
    .mobile-nav li.menu-item-has-children > a::after {
        content: '+'; /* Símbolo simple */
        position: absolute; right: 20px; top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem; color: var(--rnr-ctas);
        font-weight: 300; transition: 0.3s;
    }

    /* Icono cuando está abierto */
    .mobile-nav li.menu-item-has-children.active-sub > a::after {
        content: '-';
        transform: translateY(-50%) rotate(180deg);
        color: #fff;
    }

    /* G. SUBMENÚS (OCULTOS POR DEFECTO) */
    .mobile-nav ul ul {
        display: none; /* Oculto */
        background: rgba(0,0,0,0.2);
        padding: 0;
    }

    /* Mostrar Submenú con clase JS */
    .mobile-nav li.menu-item-has-children.active-sub > ul {
        display: block;
        animation: fadeIn 0.3s;
    }

    .mobile-nav ul ul a {
        font-size: 1rem; color: #ccc; padding: 15px;
        padding-left: 30px; /* Indentación */
    }
	
	.main-navigation ul li ul {width: 100%; background-color: var(--rnr-theme-dark);}

    /* H. BOTÓN CTA EN MÓVIL */
    .mobile-nav li.menu-cta { border: none; padding: 30px 0; }
    .mobile-nav li.menu-cta a {
        background: var(--rnr-ctas); color: #fff;
        display: inline-block; padding: 15px 40px; border-radius: 30px;
        text-transform: uppercase; font-weight: bold; width: auto;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========================================
   FIX: WORDPRESS ADMIN BAR OFFSET
   (Para que la barra negra no tape el menú al editar)
   ========================================= */

/* Solo aplica si el usuario está logueado (tiene barra de admin) */
@media screen and (min-width: 783px) { /* La barra de WP aparece fija desde los 783px */
    
    /* 1. Ajuste para el Header en estado INICIAL (Absolute/Flotante) */
    body.admin-bar .site-header {
        /* Sumamos los 32px de la barra de WP a tu posición original */
        /* Si tu top original era 50px (40 de barra + 10 de espacio) */
        top: calc(50px + 32px) !important; 
    }

    /* 2. Ajuste para el Header cuando haces SCROLL (Fixed/Sticky) */
    body.admin-bar .site-header.header-scrolled {
        /* En lugar de pegarse a top:0, se pega debajo de la barra */
        top: 32px !important; 
    }
    
    /* 3. Ajuste para la Top Bar (USPs) si fuera Fixed (Opcional) */
    /* Si tu Top Bar es relative (flujo normal), WP la empuja solo. 
       Si la hiciste fixed, descomenta esto: */
    /*
    body.admin-bar .site-top-bar {
        margin-top: 32px;
    }
    */
}

/* Ajuste para móviles (La barra de WP es más alta o no es fija, a veces es mejor ocultarla o ajustarla) */
@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        /* En móvil la barra admin a veces es de 46px o flotante */
        top: 0 !important;
    }
    
    body.admin-bar .site-header.header-scrolled {
        top: 0 !important;
    }
	
	body {
		top: 0 !important;
	}
}


/*
=====================================
5. HERO 
=====================================
*/
.conta-hero {
    /* Quitamos cualquier margen negativo */
    margin-top: 0 !important; 
    
    /* Agregamos padding superior para que el texto no quede tapado por el header */
    padding-top: 120px; 
    
    /* Aseguramos que la imagen cubra todo */
    background-position: center top; 
}

/* --- HERO SECTION --- */
.conta-hero {
    position: relative;
    height: 100vh; /* Altura impactante */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
	text-align: center;	
}
/* Overlay oscuro para que se lea el texto */
.conta-hero::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(10,37,64,0.1) 0%, rgba(10,37,64,0.1) 100%);
}

.hero-content {
    position: relative; z-index: 2; color: #fff; max-width: 800px; text-align: left;
}
.hero-content h1 {
    font-size: 5rem; color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.hero-content p {
    font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9;
}

.hero-desc {
	font-size: 1.8rem;
}

/* --- HERO REFINADO --- */

.hero-flex-center {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.hero-content .text-center {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2;
}



/* Ajuste Responsivo para Móvil */
@media (max-width: 768px) {
    .hero-usp-bar {
        flex-direction: column; /* Apilados */
        align-items: flex-start; /* Alineados a la izquierda */
        gap: 15px;
        padding: 20px;
        width: 100%;
        margin-top: 30px;
    }
    
    /* Reducimos un poco el padding del hero en móvil para que quepa todo */
    .conta-hero {
        padding: 100px 0 60px 0; /* Ajuste de aire */
        height: auto; /* Altura automática en móvil */
        min-height: auto;
    }
	
	.hero-content h1 {
    font-size: 3rem;
}
}

/*
====================================
6. SOBRE NOSOTROS
====================================
*/


/* Ajuste para la siguiente sección para que no se tape con la barra */
.section-about {
    padding-top: 100px; 
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    /* Barra USP apilada en móvil */
    .hero-usp-bar {
        position: relative;
        bottom: auto; left: auto; transform: none;
        width: 100%;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        margin-top: 40px;
    }
    
    .section-about { padding-top: 50px; }

    /* Botón Flotante Móvil (Fuera del Hamburger) */
    /* Esto requiere un pequeño hook o HTML en el header */
    .mobile-header-cta {
        display: block;
        position: fixed; /* O absolute en el header */
        top: 15px;
        right: 60px; /* A la izquierda del hamburger */
        background: var(--rnr-ctas);
        color: #fff;
        padding: 8px 15px;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: bold;
        z-index: 100;
        text-decoration: none;
    }
}

@media (min-width: 769px) {
    .mobile-header-cta { display: none; } /* Ocultar en escritorio */
}

/* --- SECCIÓN NOSOTROS (LAYOUT 60/40) --- */
.section-about {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.about-split-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Proporción aprox 60% - 35% + hueco */
    gap: 80px; /* Separación amplia y elegante */
    align-items: center;
}

/* Columna Izquierda */
.about-content-col h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    line-height: 1.1;
}

.about-body p {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 20px;
}

/* Fila inferior (Dato + Botón) */
.about-footer-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

/* Dato Espectacular */
.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: var(--font-head);
    font-size: 3.5rem;
    line-height: 1;
    font-weight: 800;
    color: var(--rnr-ctas);
}

.stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--rnr-theme-dark);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Botón Outline (Borde) */
.btn-outline {
    background: transparent;
    color: var(--rnr-theme-dark);
    border: 2px solid var(--rnr-theme-dark);
    padding: 12px 35px;
}
.btn-outline:hover {
    background: var(--rnr-theme-dark);
    color: #fff;
}


/* --- MOSAICO ASIMÉTRICO (DERECHA) --- */
.about-mosaic-col {
    position: relative;
}

.mosaic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas internas */
    gap: 20px;
    position: relative;
    z-index: 2;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Alturas fijas para controlar el diseño */
.mosaic-item { height: 300px; }

/* La Asimetría (Magia CSS) */
/* Bajamos la columna derecha del mosaico */
.item-2, .item-4 {
    transform: translateY(30px);
}

/* Subimos un poco la imagen 3 para crear tensión visual */
.item-3 {
    margin-top: -5px; 
}

/* Efecto Hover */
.mosaic-item:hover img {
    transform: scale(1.03);
}

/* Forma Decorativa Detrás */
.mosaic-shape {
    position: absolute;
    top: 10%; right: -20px;
    width: 80%; height: 80%;
    background: var(--rnr-soft-bg);
    z-index: -1;
    border-radius: 20px;
    transform: rotate(5deg);
}

/* RESPONSIVE */
@media (max-width: 900px) {
	.rnr-container {padding: 0 30px;}
	
    .about-split-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    /* En móvil, simplificamos el mosaico */
    .mosaic-item { height: 180px; }
    .item-2, .item-4, .item-3 { transform: none; margin: 0; }
}



/*
========================================= 
7. HOME SECCIÓN SERVICIOS
========================================= 
*/
.section-services .rnr-container {
	padding: 0;
	width: 100vw; /* Ancho total de la ventana */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* --- SECCIÓN SERVICIOS (LAYOUT SPLIT) --- */
.section-services {
    padding: 100px 0;
    background-color: #f9f9f9; /* Fondo muy suave como en la foto */
    overflow: hidden; /* Para recortar la imagen si es muy alta */
}

/* Layout Principal: Izquierda (Img) - Derecha (Contenido) */
.services-main-layout {
    display: grid;
    grid-template-columns: 30% 70%; /* La imagen ocupa un 40%, el texto 60% */
    gap: 60px;
    align-items: center; /* Centrado verticalmente */
	padding: 0 60px;
}

/* Columna Imagen */
.services-left-col {
    height: 100%;
}


.services-left-col .image-wrapper {
    position: relative;
    height: 100%;
    min-height: 500px; /* Altura mínima para que imponga */
}

.services-left-col img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que llene el espacio sin deformarse */
    border-radius: 10px; /* Opcional: bordes suaves */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Sombra elegante */
}

/* Columna Contenido */
.services-header {
    margin-bottom: 40px;
}

.eyebrow {
	display: inline-block;
	padding: 5px;
	color: var(--text-white);
	background: var(--rnr-ctas);
	border-radius: 4px;
	font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
	text-align: center;
    letter-spacing: 1px;
    margin-bottom: 20px;	
}

.services-header h2 {
    font-size: 2.5rem;
    line-height: 1.1;
    color: var(--rnr-theme-dark);
    max-width: 500px;
}

/* Grid Interno de Servicios (2 Columnas) */
.services-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

/* Estilo de cada Tarjeta de Servicio */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	height: 350px;
	border: 1px solid var(--rnr-ctas);
	padding: 30px;
	border-radius: 15px;
	
}

.service-card:hover, .cta-card-dark:hover {
	box-shadow: 0 10px 30px var(--rnr-ctas);
}

.service-icon img {
    height: 40px;
    width: auto;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.service-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.read-more-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rnr-theme-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s;
}

.read-more-link:hover {
    gap: 10px; /* Efecto flecha se mueve */
    color: var(--rnr-ctas);
}

/* --- TARJETA CTA NEGRA (La especial) --- */
.cta-card-dark {
    background-color: var(--rnr-theme-dark); /* Tu azul oscuro corporativo */
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    justify-content: center; /* Centrar contenido verticalmente */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background-image: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent); /* Detalle sutil */
}

.cta-card-dark h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.btn-cta-gold {
    background: #fff;
    color: var(--rnr-theme-dark);
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.btn-cta-gold:hover {
    background: var(--rnr-ctas);
    color: #fff;
}

.arrow-box {
    background: var(--rnr-ctas);
    color: #fff;
    border-radius: 50%;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
}

/* RESPONSIVE (MÓVIL) */
@media (max-width: 900px) {
    .services-main-layout {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 40px;
    }

    /* En móvil, la imagen puede ir arriba o esconderse */
    .services-left-col {
        order: -1; /* Imagen arriba */
        min-height: 300px;
    }
    
    .services-inner-grid {
        grid-template-columns: 1fr; /* Servicios uno debajo de otro */
        gap: 30px;
    }
    
    .services-header h2 { font-size: 2rem; }
	
	.services-main-layout {padding: 0 20px;}
}

/*
========================================= 
8. HOME SECCIÓN CONTACTO
========================================= 
*/
.section-contact {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax elegante */
    color: #fff;
}

.contact-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--rnr-overlay);
}

.relative-z { position: relative; z-index: 2; }

/* Grid Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

/* Columna Izquierda (Info) */
.contact-title { color: #fff; font-size: 3rem; margin-bottom: 20px; }
.contact-desc { font-size: 1.1rem; color: #ddd; margin-bottom: 40px; max-width: 450px; }

.contact-item {
    display: flex; align-items: center; gap: 20px; margin-bottom: 30px;
}

.icon-circle {
    width: 50px; height: 50px;
    background: var(--rnr-ctas);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.c-text { display: flex; flex-direction: column; }
.c-text .label { font-size: 0.8rem; text-transform: uppercase; color: #aaa; letter-spacing: 1px; }
.c-text .value { font-size: 1.1rem; color: #fff; font-weight: 700; text-decoration: none; }
.c-text .value:hover { color: var(--rnr-ctas); }

.map {
	border-radius: 10px;
}

/* Columna Derecha (Formulario) */
.form-card {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    color: var(--text-main); /* Reseteamos color de texto a oscuro */
}

.form-card h3 {
    color: var(--rnr-theme-dark);
    margin-bottom: 25px;
    font-size: 1.8rem;
}

/* Estilos CF7 Inputs */
.rnr-form-grid {
    display: grid;
}

.form-group label {
    display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 5px; color: #555;
}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    font-family: var(--font-body);
    font-size: 1rem;
}

.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: var(--rnr-theme-dark);
    background: #fff;
    outline: none;
}

/* Botón de Enviar */
.wpcf7-submit {
    background: var(--rnr-theme-dark);
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    border-radius: 4px;
    transition: 0.3s;
}

.wpcf7-submit:hover {
    background: var(--rnr-ctas);
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 40px; }
    .contact-title { font-size: 2.5rem; }
    .form-card { padding: 30px 20px; }
}


/* 
==================================
9.0 HOME SECCIÓN PROCESO (TIMELINE) 
================================== 
*/

/* SECCIÓN PROCESO (TIMELINE VERTICAL FIX) */

.section-process {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #fff;
}

/* Capa oscura para leer texto sobre imagen */
.contact-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--rnr-overlay); /* Azul corporativo con transparencia */
    z-index: 0;
}

.process-main-layout {
    display: grid;
    /* ESCRITORIO: 2 Columnas (40% Texto / 60% Pasos) */
    grid-template-columns: 40% 60%; 
    gap: 60px; /* Espacio entre columnas */
    position: relative;
    z-index: 2;
}

/* --- Columna Izquierda (Título) --- */
.process-title {
    padding-right: 40px;
    position: sticky; /* El título te sigue mientras bajas */
    top: 120px;
    height: fit-content;
}

.process-title h2 {
    color: var(--text-white);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 20px;
}

.process-desc {
    font-size: 1.2rem;
    color: var(--text-gray); /* Gris claro para contraste */
    line-height: 1.6;
}

/* --- Columna Derecha (Timeline) --- */
.process-timeline {
    position: relative;
    padding-left: 20px;
}

/* La Línea Vertical Continua (Usando tu div .timeline-bar) */
.timeline-bar {
    position: absolute;
    left: 49px; /* Centrado con el círculo (20px padding + 29px mitad círculo) */
    top: 20px;
    bottom: 50px; /* Que no toque el final exacto */
    width: 2px;
    background: rgba(255,255,255,0.2); /* Línea sutil */
    z-index: 0;
}

/* Cada Paso */
.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.process-step:last-child { margin-bottom: 0; }

/* El Número (Círculo) */
.step-circle {
    flex: 0 0 60px; /* No se aplasta */
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--rnr-theme-dark); /* Fondo para tapar la línea detrás */
    border: 2px solid var(--rnr-ctas);
    color: var(--text-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; 
    font-weight: bold;
    font-family: var(--font-head);
    box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Sombra para resaltar */
}

/* El Contenido del Paso */
.step-content {
    padding-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 30px;
    width: 100%;
}

.process-step:last-child .step-content { border-bottom: none; }

.step-content h4 {
    color: var(--text-white);
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.step-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin: 0;
}

/* RESPONSIVE (MÓVIL - EL FIX CRÍTICO) */
@media (max-width: 900px) {
    
    .section-process { padding: 60px 0; }

    /* 1. ROMPEMOS EL GRID (Todo en 1 columna) */
    .process-main-layout {
        grid-template-columns: 1fr; 
        gap: 40px;
        padding: 0; /* Quitamos padding lateral extra */
    }

    /* 2. Ajuste del Título */
    .process-title {
        position: relative; /* Ya no sticky en móvil */
        top: 0;
        padding-right: 0;
        text-align: center; /* Centrado se ve mejor en móvil */
        margin-bottom: 20px;
    }
    
    .process-title h2 { font-size: 2.2rem; }

    /* 3. Ajuste de la Línea de Tiempo */
    .process-timeline { padding-left: 0; }
    
    /* Ajustamos la línea vertical al nuevo tamaño del círculo */
    .timeline-bar {
        left: 24px; /* (50px ancho / 2) - 1px borde */
    }

    .process-step { gap: 20px; margin-bottom: 30px; }

    /* Círculo más pequeño en móvil */
    .step-circle {
        flex: 0 0 50px;
        width: 50px; height: 50px;
        font-size: 1.2rem;
    }

    .step-content h4 { font-size: 1.2rem; }
}


/*
========================================= 
10. HOME SECCIÓN PAQUETES (PRICING)
========================================= 
*/
.section-pricing { padding: 80px 0; background: var(--rnr-soft-bg); }

.pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; align-items: center; /* Para que el destacado crezca */
}

.pricing-card {
    background: #fff; border-radius: 8px; overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    position: relative; border-top: 5px solid var(--rnr-theme-dark);
    padding: 40px 30px;
    display: flex; flex-direction: column;
}

.pricing-card:hover { transform: translateY(-5px); }

/* Plan Destacado (Centro) */
.plan-featured {
    transform: scale(1.05);
    border-top-color: var(--rnr-ctas);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    z-index: 2;
}

.popular-tag {
    position: absolute; top: 0; right: 0;
    background: var(--rnr-ctas); color: #fff;
    font-size: 0.7rem; font-weight: bold;
    padding: 5px 15px; border-bottom-left-radius: 8px;
}

.plan-header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.plan-header h3 { color: var(--rnr-theme-dark); margin-bottom: 10px; }
.plan-header .price { font-size: 2.5rem; font-weight: 700; color: var(--text-main); }

.plan-features { margin-bottom: 30px; flex-grow: 1; }
.plan-features ul { list-style: none; padding: 0; margin: 0; }
.plan-features li { margin-bottom: 10px; font-size: 0.95rem; color: #555; display: flex; align-items: center; gap: 10px;}
/* Icono check CSS antes de cada li */
.plan-features li::before { content: '✓'; color: var(--rnr-ctas); font-weight: bold; }

.btn-full { width: 100%; text-align: center; }

.btn-full:hover { border: 1px solid var(--rnr-theme-light); }


/*
========================================= 
11. SECCIÓN TESTIMONIOS
=========================================
*/ 
.section-testimonials {
    padding: 100px 0;
    background: #fff;
    overflow: hidden; /* Evita scrollbars raros */
}

/* Layout Principal */
.testimonials-layout {
    display: grid;
    grid-template-columns: 40% 55%;
    gap: 5%;
    align-items: center;
	align-items: start;
}

/* --- COLUMNA IZQUIERDA (INFO) --- */


.testi-title {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--rnr-theme-dark);
}

/* Caja Dorada de Score */
.gmb-score-box {
    background: var(--rnr-ctas);
    color: #fff;
    padding: 25px;
    border-radius: 8px;
    display: inline-block;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.3);
}

.score-stars {
    color: #fff; /* O amarillo claro */
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.score-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}
.score-number .total { font-size: 1rem; opacity: 0.8; font-weight: 400; }

.score-source {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; opacity: 0.9;
}

/* Botones de Navegación */
.slider-controls { margin-top: 30px; display: flex; gap: 10px; }

.nav-arrow {
    background: var(--rnr-soft-bg);
    color: var(--rnr-theme-dark);
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.nav-arrow:hover { background: var(--rnr-theme-dark); color: #fff; }


/* --- COLUMNA DERECHA (SLIDER CSS SNAP) --- */
.testi-slider-col {
    position: relative;
    width: 100%;
    /* Efecto de desvanecimiento a la derecha */
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.testi-track {
    display: flex;
    gap: 30px;
    overflow-x: auto; /* Permite scroll horizontal */
    scroll-snap-type: x mandatory; /* Magia: se ajusta a las tarjetas */
    padding-bottom: 20px; /* Espacio para scrollbar oculto */
    scrollbar-width: none; /* Ocultar scrollbar Firefox */
}
.testi-track::-webkit-scrollbar { display: none; /* Ocultar scrollbar Chrome */ }

.testi-slide {
    flex: 0 0 300px; /* Ancho fijo de cada tarjeta */
    scroll-snap-align: start; /* Donde se detiene el scroll */
	height: 400px;
}

/* Estilo Tarjeta (Reutilizado y Ajustado) */
.testi-card {
    background: var(--rnr-soft-bg);
    padding: 30px;
    border-radius: 8px;
    height: 100%; /* Altura igualada */
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--rnr-ctas);
    transition: transform 0.3s;
}

.testi-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }

.quote-icon { font-size: 3rem; color: #ddd; line-height: 0.5; margin-bottom: 10px; }
.testi-text { font-style: italic; color: #555; font-size: 1.1rem; margin-bottom: 20px; flex-grow: 1; }
.testi-author strong { display: block; color: var(--rnr-theme-dark); }
.testi-author span { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }


/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .testimonials-layout {
        grid-template-columns: 1fr; /* Una columna */
        gap: 40px;
    }
	
	.testi-title {
    font-size: 2rem;
	}
    
    /* En móvil, los controles se pueden ocultar o poner abajo */
    .slider-controls { display: none; } 
    
    .testi-track { padding-right: 20px; } /* Espacio al final en móvil */
    .testi-slide { flex: 0 0 85%; } /* Tarjeta ocupa 85% pantalla móvil */
	
	/* Estilo Tarjeta (Reutilizado y Ajustado) */
.testi-card {width: 300px;}

}


/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    /* Timeline Vertical en Móvil */
    .process-timeline { flex-direction: column; gap: 0; padding-left: 20px; margin-top: 40px; }
    
    .timeline-bar {
        width: 2px; height: 100%; left: 45px; top: 0; /* Línea vertical */
    }
    
    .process-step {
        display: flex; text-align: left; align-items: flex-start;
        margin-bottom: 30px; gap: 20px;
    }
    
    .step-circle { margin: 0; flex-shrink: 0; } /* No centrar circulo */
    
    /* Precios */
    .plan-featured { transform: scale(1); } /* Quitar zoom en móvil */
}

/*
====================================
12. FOOTER
====================================
*/
/* --- FOOTER 3 COLUMNAS --- */
.site-footer {
    border-top: 4px solid var(--rnr-ctas);
    background: var(--rnr-theme-dark);
    color: #fff;
    padding: 60px 0 20px 0;
}

.footer-grid {
    display: grid;
    /* Escritorio: 3 columnas exactas (1 fracción cada una) */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 40px;
    margin-bottom: 40px;
    text-align: left; /* Alineación limpia */
}

/* Títulos de Columna */
.footer-col h4 {
    color: var(--text-white);
    margin-bottom: 25px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-col p {
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #ddd;
    line-height: 1.6;
}

/* --- ICONOS SOCIALES --- */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 25px; /* Separación del texto */
}

.s-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1); /* Círculo semitransparente */
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #fff; /* Color del icono SVG */
}

.s-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* Hereda el color del padre */
}

/* Hover Effect: Dorado y sube un poco */
.s-icon:hover {
    background: var(--rnr-ctas);
    color: var(--rnr-theme-dark);
    transform: translateY(-3px);
}

/* Enlaces de texto */
.footer-link {
    color: #ddd;
    text-decoration: none;
    transition: 0.2s;
}
.footer-link:hover {
    color: var(--rnr-ctas);
    padding-left: 5px; /* Pequeño desplazamiento */
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1); /* Línea más sutil */
    padding-top: 25px;
    font-size: 0.8rem;
    color: #aaa;
}

/* --- RESPONSIVE (MÓVIL) --- */
@media(max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 40px;
        text-align: center; /* Centrar en móvil se ve mejor */
    }
    
    .social-icons {
        justify-content: center; /* Centrar iconos en móvil */
    }
}

/*
====================================
13. PÁGINA SERVICIOS PILAR Y SINGLE
====================================
*/
/* --- ESTILOS GENERALES PÁGINAS INTERNAS --- */
.hero-small { min-height: 350px; padding-top: 80px; } /* Hero más corto */
.section-padding { padding: 80px 0; }

/* --- PÁGINA PILAR --- */
.cat-header { text-align: center; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; }
.cat-header h2 { font-size: 2.5rem; margin-bottom: 15px; }

.link-gold { color: var(--rnr-ctas); font-weight: bold; text-decoration: none; }
.link-simple { color: #666; text-decoration: underline; font-size: 0.9rem; }

.card-icon {
    height: 40px;
    width: auto;
    margin-bottom: 20px;
}

/* --- SINGLE SERVICE --- */
/* Intro Split */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.intro-image img { width: 100%; height: 400px; border-radius: 8px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* --- 1. HERO SEAL (Sello Flotante) --- */
.hero-content.relative-z { position: relative; z-index: 10; }

.hero-trust-seal {
    width: 150px; height: 150px;
    background: var(--rnr-ctas);
    border-radius: 50%;
    position: absolute;
    top: 50px; right: -300px; /* Flotando arriba a la derecha del texto */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.2), 0 10px 20px rgba(0,0,0,0.3);
    transform: rotate(15deg);
    animation: floatSeal 4s ease-in-out infinite;
}

.seal-icon { font-size: 5rem; line-height: 1; }

@keyframes floatSeal {
    0%, 100% { transform: translateY(0) rotate(15deg); }
    50% { transform: translateY(-10px) rotate(15deg); }
}

/* --- 2. INTRO IMAGE FRAME --- */
.image-frame-tech {
    position: relative;
    padding: 10px;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 10px 10px 0px var(--rnr-theme-dark); /* Sombra sólida dura */
}

/* --- 3. REQUISITOS (THE FOLDER) --- */
.req-folder-wrapper {
    position: relative;
    margin-top: 20px;
}

/* La Pestaña del Folder */
.folder-tab {
    background: #f1c40f; /* Color manila/amarillo carpeta */
    display: inline-block;
    padding: 8px 25px;
    font-weight: bold;
    color: var(--rnr-theme-dark);
    font-size: 0.85rem;
    border-radius: 8px 8px 0 0;
    margin-left: 20px;
    position: relative;
    top: 1px; /* Para conectar con el cuerpo */
    z-index: 2;
    box-shadow: 2px -2px 5px rgba(0,0,0,0.1);
}

/* El Cuerpo del Folder */
.folder-body {
    background: #fff;
    border: 2px solid #f1c40f; /* Borde del color de la carpeta */
    border-top: 5px solid #f1c40f;
    padding: 40px;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
}

/* Textura de papel de fondo (opcional) */
.paper-texture {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.1;
    pointer-events: none;
}

.deco-icon-bg {
    font-size: 5rem; opacity: 0.1; margin-top: 20px;
}

/* --- 4. UPSELL (POST-IT HIGHLIGHT) --- */
.upsell-card-highlight {
    background: #fff;
    border-left: 5px solid var(--rnr-ctas);
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    position: relative;
    transform: rotate(1deg); /* Un poco chueco como nota pegada */
}

.single-upsell .intro-text {
	text-align: center;
}

.pin-icon {
    position: absolute; top: -15px; left: 50%;
    font-size: 1.5rem;
    transform: translateX(-50%);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

/* --- 5. RESULTADOS (THE LEDGER) --- */
.res-ledger-wrapper {
    background: #fff;
    padding: 0;
    border: 1px solid #ddd;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* Líneas decorativas tipo libro contable */
.ledger-lines {
    position: absolute; top: 0; left: 40px; bottom: 0; width: 4px;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 39px,
        #eee 40px
    );
    border-left: 2px solid #ff9999; /* Línea roja de contabilidad */
    border-right: 1px solid #ff9999;
    z-index: 1;
    height: 100%;
}

.res-dynamic-content {
    position: relative; z-index: 2;
    padding: 40px 40px 40px 80px; /* Padding extra a la izquierda por las líneas */
}

/* Ajuste del Grid dentro del Ledger */
.res-dynamic-content ul {
    grid-template-columns: 1fr; /* Lista vertical para parecer libro */
    gap: 15px;
	list-style: none;
}

.res-dynamic-content li {
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: 1px dashed #ccc;
    border-radius: 0;
    text-align: left;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0;
    font-family: 'Courier New', monospace; /* Fuente tipo máquina de escribir */
    font-size: 1.1rem;
}

.res-dynamic-content li::before {
    content: '✅'; margin-right: 15px; font-size: 1.2rem;
}

/* RESPONSIVE */
@media(max-width: 768px) {
    .hero-trust-seal { top: -60px; right: 50%; transform: translateX(50%); }
    .res-dynamic-content { padding: 30px; }
    .ledger-lines { display: none; } /* En móvil quitamos las líneas complejas */
}

/* Resultados Grid */
.results-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.result-item { text-align: center; width: 200px; }
.result-item img { height: 60px; margin-bottom: 15px; }
.result-item h4 { font-size: 1.1rem; }

/* Relacionados */
.related-grid { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }

.related-card {
    background: #fff; padding: 20px 30px; border: 1px solid #eee; border-radius: 6px;
    text-decoration: none; color: var(--rnr-theme-dark); font-weight: bold;
    display: flex; align-items: center; gap: 10px; transition: 0.3s;
}
.related-card:hover { border-color: var(--rnr-ctas); transform: translateY(-3px); }

/* Responsive */
@media(max-width: 900px) {
    .split-layout, .req-list { grid-template-columns: 1fr; }
    .related-card { width: 100%; justify-content: space-between; }
}

/* 
=========================================
  14. SECCIÓN FAQ (ACORDEÓN CORPORATIVO)
========================================= 
*/

.section-faq {
    padding: 0;
    background-color: var(--rnr-soft-bg); 
	margin: 3rem;
}

.section-faq h2 {
	text-align:center;
}

.section-faq .eyebrow {
	display: flex;
	justify-self: center;
}

/* Contenedor estrecho para lectura fácil */
.faq-wrapper {
    max-width: 800px;
    margin: 40px auto 0; /* Centrado horizontal */
}

/* La Caja del Item (Cerrado) */
.faq-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    overflow: hidden; /* Para que el borde radius funcione */
}

/* Estado: Abierto (Borde activo) */
.faq-item[open] {
    border-color: var(--rnr-ctas); /* Borde dorado cuando abre */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* El Título (Pregunta) */
.faq-item summary {
    padding: 20px 25px;
    font-weight: 700;
    color: var(--rnr-theme-dark);
    font-size: 1.1rem;
    cursor: pointer;
    list-style: none; /* Quita el triángulo default */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

/* Quitar triángulo default en Safari/Chrome */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    background-color: #f9f9f9;
    color: var(--rnr-theme-light:);
}

/* El Icono (+ / -) con CSS puro */
.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--rnr-ctas);
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Cuando está abierto, cambiamos el icono */
.faq-item[open] summary::after {
    content: '−'; /* Signo menos */
    color: var(--rnr-theme-dark);
    transform: rotate(180deg); /* Animación sutil */
}

/* El Contenido (Respuesta) */
.faq-answer {
    padding: 0 25px 25px 25px;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    border-top: 1px solid transparent; /* Espacio invisible */
}

/* Pequeña animación de entrada para el texto */
.faq-item[open] .faq-answer {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .faq-item summary {
        padding: 15px;
        font-size: 1rem;
    }
    .faq-answer {
        padding: 0 15px 15px 15px;
    }
}

/* 
=============================== 
15. SOBRE NOSOTROS
===============================
*/ 

/* HERO CORPORATE --- */
.about-hero-corporate {
    position: relative;
    height: 100vh; min-height: 500px;
    background-size: cover; background-position: center; background-attachment: fixed;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}

.about-hero-desc {
	max-width: 60%;
	color: var(--text-white);
	margin-top: 2rem; 
	justify-self: center;
}

.overlay-gradient {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to bottom, rgb(10 64 12 / 70%), rgb(10 64 47 / 90%));
}

.about-hero-content h1 {
    font-size: 4rem; color: #fff; text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 20px; text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hero-divider {
    width: 100px; height: 4px; background: var(--rnr-ctas); margin: 0 auto;
}

/* --- 2. HISTORIA (EDITORIAL) --- */
.about-story-section { padding: 100px 0; background: #fff; overflow: hidden; }

.story-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}

.story-text-col h2 { font-size: 3rem; margin-bottom: 30px; line-height: 1.1; }

/* Letra Capital (Drop Cap) */
.story-body p:first-of-type::first-letter {
    float: left; font-size: 4.5rem; line-height: 0.8; font-weight: bold;
    color: var(--rnr-ctas); margin-right: 15px; margin-top: 5px;
}

.story-body p { font-size: 1.1rem; color: #555; margin-bottom: 20px; text-align: justify; }

/* Firma */
.sign-font {
	font-size: 2.5rem; color: var(--rnr-theme-dark);
    margin-top: 20px; display: block;
	text-align: center;
}

/* Collage de Fotos */
.collage-wrapper { position: relative; height: 500px; }

.img-main {
    width: 80%; height: auto; position: absolute; top: 0; left: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2); z-index: 2;
}

.img-detail {
    width: 50%; height: auto; position: absolute; bottom: 0; right: 0;
    border: 10px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 3;
}

.collage-frame {
    position: absolute; top: -20px; left: -20px; width: 60%; height: 60%;
    border: 5px solid var(--rnr-ctas); z-index: 1; opacity: 0.3;
}

/* --- 3. THE LEDGER (STATS) --- */
.stats-ledger-section {
    background: var(--rnr-theme-dark); color: #fff; padding: 80px 0;
}

.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center;
}

.stat-number {
    display: block; font-size: 3.5rem; font-weight: 700; color: var(--rnr-ctas);
    line-height: 1; margin-bottom: 10px;
}
.stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #aaa; }

/* --- 4. VALORES (CERTIFICADOS) --- */
.values-corporate-section { padding: 100px 0; background: var(--rnr-soft-bg); }

.values-corporate-section .intro-text {
	align-self: start;
}

.value-card-corp {
    background: #fff; padding: 10px; /* Doble borde efecto */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	margin-bottom: 20px;
}

.card-border {
    border: 1px solid var(--rnr-ctas); padding: 30px; text-align: center; height: 100%;
}

.card-border h3 { font-size: 1.5rem; margin-bottom: 15px; }
.small-divider { width: 40px; height: 2px; background: var(--rnr-theme-dark); margin: 0 auto 15px auto; }

/* --- 5. EQUIPO (PARTNERS) --- */
.team-section { padding: 100px 0; background: #fff; }

.team-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;
}

.team-card { text-align: center; }

.team-photo-box {
    position: relative; overflow: hidden; margin-bottom: 20px;
    border-bottom: 5px solid var(--rnr-ctas);
}

.team-photo-box img {
    width: 100%; filter: grayscale(100%); transition: all 0.5s ease; display: block;
}

/* Efecto Hover: Color + Zoom */
.team-card:hover img { filter: grayscale(0%); transform: scale(1.05); }

/* LinkedIn Overlay */
.linkedin-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10,37,64,0.8);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s;
    color: #fff; font-weight: bold; font-size: 1.5rem; text-decoration: none;
}
.team-card:hover .linkedin-overlay { opacity: 1; }

.team-info {padding: 5px;
    background: var(--rnr-theme-dark);
    border-bottom: 4px solid var(--rnr-ctas);}

.team-info h4 { margin-bottom: 5px; font-size: 1.3rem; }
.team-info .role { color: #888; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

/* --- 6. CTA FINAL --- */
.about-cta-final {
    padding: 120px 0; position: relative; background-size: cover; background-position: center; color: #fff;
}
.cta-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.6);
}
.about-cta-final h2 { color: #fff; font-size: 3rem; margin-bottom: 30px; }

/* RESPONSIVE */
@media(max-width: 900px) {
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
    .collage-wrapper { height: 400px; margin-top: 20px; }
    .img-main { width: 100%; position: relative; }
    .img-detail { display: none; /* Simplificar en móvil */ }
    
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .values-grid { grid-template-columns: 1fr; margin-bottom: 0; } /* Ajuste del grid de valores */
	
	.about-hero-content h1 {font-size: 2rem;}
	
	.about-hero-desc {max-width: 100%;}
}