/*
 Theme Name:   picasso
 Template:     twentytwentyfive
 Description:  Tema hijo para el sitio web de PicassoTS.
 Version:      1.0.0
*/


/* ==========================================================================
   1. VARIABLES GLOBALES (Jerarquía de color temporal en grises)
   ========================================================================== */
:root {
/* ==========================================================================
   NUEVAS VARIABLES (Dark Mode y Detalles)
   ========================================================================== */
  --pc-color-navy: #040b1e; /* Azul marino oscuro del fondo */
  --pc-color-cyan: #87edff; /* El color brillante del botón */
  --pc-color-dark-blue:#1b4298;
  --pc-color-blue:#017dc2;
  --pc-color-light-blue: #e0f1ff;
  --pc-color-mint: #9affce; /* Verde menta del topbar */
  --pc--color-red:#ef004c;
  --pc-text-white: #ffffff; /* Texto blanco puro */
  --pc-text-light-gray: #e2e8f0; /* Para textos secundarios en fondos oscuros */
  --pc-color-aurora-light: #e0f2fe; /* El azul muy clarito de las tarjetas */
  --pc-color-aurora-cyan: #38bdf8; /* El cyan del texto "A - Análisis" */
  

  /*estilos wireframes*/
  /* Fondos */
  --pc-bg-body: #ffffff; /* Fondo de la página */
  --pc-bg-card: #d3d3d3; /* Gris claro de la caja del hero */
  
  /* Textos */
  --pc-text-heading: #111111; /* Casi negro para títulos (alto contraste) */
  --pc-text-body: #222222; /* Gris muy oscuro para legibilidad de párrafos */
  
  /* Interacción (Botones) */
  --pc-color-action: #000000; /* Fondo del botón principal */
  --pc-color-action-text: #ffffff; /* Texto del botón principal */
  
  /* Tipografía (Fallback genérico pero limpio) */
  --pc-font-primary: 'Outfit', system-ui, -apple-system, sans-serif;
--pc-bg-card-light: #eeeeee; /* Un gris un poco más claro para estas tarjetas */
  --pc-border-color: #111111; /* Color para los bordes de los botones */
--pc-bg-card-dark: #cccccc; /* Gris ligeramente más oscuro para la caja superpuesta */
  --pc-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra suave */
--pc-bg-experience: #E2E4FF; /* El fondo lila claro de todo el bloque */
  --pc-sector-idle: #555555; /* Gris oscuro para los botones inactivos */
  --pc-sector-active: #6B73FF; /* Azul/lila para el botón activo */
  --pc-image-placeholder: #8A94FF; /* Color temporal para la caja de la imagen */
--pc-bg-card-top: #d9d9d9; /* Gris más oscuro para la parte superior de la tarjeta */
  --pc-bg-card-bottom: #f2f2f2; /* Gris muy claro/casi blanco para la parte inferior */
  --pc-btn-nav-bg: #d9d9d9; /* Fondo de las flechas de navegación de este módulo */
--pc-border-card: #b3b3b3; /* Gris para el borde fino de las tarjetas */
  --pc-bg-card-darkest: #4a4a4a; /* Gris muy oscuro para la base de la primera tarjeta */
  --pc-shadow-highlight: 0 15px 35px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
--pc-tab-bg-idle: #e0e0e0; /* Gris claro para la pestaña inactiva */
  --pc-tab-bg-active: #666666; /* Gris oscuro para la pestaña activa (ajusta según diseño) */
  --pc-tab-text-idle: #333333; /* Texto de pestaña inactiva */
  --pc-tab-text-active: #ffffff; /* Texto de pestaña activa */
  --pc-bg-pane: #dbdbdb; /* Gris del contenedor principal del contenido */
}

/* ajustes generales */
.pc-color-dark-blue{
    color:var(--pc-color-dark-blue);
}
section{
    margin-top:0px!important;
}

body p,
body li{
  font-size: 20px!important;
}

/* ==========================================================================
   SISTEMA DE TIPOGRAFÍA Y BOTONES GLOBALES (Reutilizables en todo el sitio)
   ========================================================================== */

/* Eyebrow: El textito pequeño encima de los títulos */
.pc-eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em; /* Un poco de espaciado le da un toque premium */
  color: var(--pc-color-cyan); /* O el color que prefieras por defecto */
  margin-bottom: 1.5rem;
}

/* Heading XL: Para los Títulos H1 principales */
.pc-heading-xl {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800; /* Extra bold */
  text-transform: uppercase;
  color: var(--pc-text-white);
  line-height: 1.1;
  margin: 0 0 2rem 0;
}

/* Heading LG: Para los Títulos H2 de las secciones */
.pc-heading-lg {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--pc-color-dark-blue); /* Usamos el azul oscuro del hero */
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

/* Body Large: Párrafos destacados o subtítulos */
.pc-text-body-large {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-light-gray);
  margin: 0 0 1rem 0;
}

/* Modificador del botón principal para el nuevo color Cyan */
.pc-btn--cyan {
  background-color: var(--pc-color-cyan);
  color: #000000; /* Texto oscuro para máximo contraste en el botón */
  font-weight: 700;
  border-radius: 6px;
  /* Reutiliza el padding y display de tu clase .pc-btn base */
}

.pc-btn--cyan:hover {
  background-color: #5bcfdc; /* Un poco más oscuro al hacer hover */
  transform: translateY(-2px); /* Ligero efecto de elevación */
}





/* ==========================================================================
   2. CLASES UTILITARIAS GLOBALES
   ========================================================================== */
body {
  font-family: var(--pc-font-primary);
  background-color: var(--pc-bg-body);
  color: var(--pc-text-body);
}

.pc-container {
  width: 90%;
max-width:1500px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Base del botón que definimos en la documentación */
.pc-btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.pc-btn--primary {
  background-color: var(--pc-color-action);
  color: var(--pc-color-action-text);
}

.pc-btn--primary:hover {
  opacity: 0.8; /* Efecto hover genérico */
}










/* ==========================================================================
   9. MÓDULO: WORKFLOWS (Bento Box Grid)
   ========================================================================== */
.pc-workflows {
  padding: 5rem 0;
  text-align: center;
}

/* --- Encabezado --- */
.pc-workflows__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

.pc-workflows__eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
}

.pc-workflows__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.pc-workflows__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0 auto;
}

/* --- Grid Bento Box (La Magia de las 6 columnas) --- */
.pc-workflows__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  text-align: left; /* Regresamos el texto a la izquierda para las tarjetas */
}

/* --- Tarjetas Base --- */
.pc-workflow-card {
  border: 1px solid var(--pc-border-card);
  border-radius: 16px;
  overflow: hidden; /* Mantiene el borde redondeado con el fondo dividido */
  display: flex;
  flex-direction: column;
  background-color: var(--pc-bg-body); /* Fondo blanco por defecto para la parte inferior */
}

/* Tamaños en el Grid */
.pc-workflow-card--large {
  grid-column: span 3; /* Ocupan la mitad del ancho cada una (3/6) */
}

.pc-workflow-card--small {
  grid-column: span 2; /* Ocupan un tercio del ancho cada una (2/6) */
}

/* Estructura Interna Dividida */
.pc-workflow-card__top {
  background-color: var(--pc-bg-card-top); /* Usamos el gris de la sección anterior */
  padding: 2.5rem;
  flex-grow: 1; /* Empuja la parte inferior hacia abajo si falta texto */
}

.pc-workflow-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-text-heading);
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.pc-workflow-card__text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pc-text-body);
  margin: 0;
}

.pc-workflow-card__bottom {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 200px; /* Altura mínima para simular el espacio de la imagen */
}

.pc-workflow-card__placeholder-text {
  font-size: 0.875rem;
  color: var(--pc-text-body);
  max-width: 80%;
}

/* --- Tarjeta Destacada (CTA) --- */
.pc-workflow-card--cta {
  box-shadow: var(--pc-shadow-highlight);
  border-color: transparent; /* Quitamos el borde porque tiene sombra */
}

.pc-workflow-card--cta .pc-workflow-card__bottom {
  background-color: var(--pc-bg-card-darkest);
}

.pc-btn-light {
  background-color: #ffffff; /* Botón blanco / claro */
  color: var(--pc-text-heading);
  border-radius: 6px;
  font-weight: 600;
  width: 100%;
  max-width: 300px;
}

.pc-btn-light:hover {
  background-color: #f0f0f0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  /* En Tablets, pasamos a 2 columnas */
  .pc-workflows__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .pc-workflow-card--large,
  .pc-workflow-card--small {
    grid-column: span 1; /* Todas ocupan 1 columna (mitad y mitad) */
  }

  /* La última tarjeta pequeña se centra ocupando todo el ancho para no quedar viuda */
  .pc-workflow-card--small:last-child {
    grid-column: 1 / -1; 
  }
}

@media (max-width: 768px) {
  /* En Móviles, 1 sola columna */
  .pc-workflows__grid {
    grid-template-columns: 1fr;
  }
  
  .pc-workflow-card--large,
  .pc-workflow-card--small,
  .pc-workflow-card--small:last-child {
    grid-column: 1 / -1; /* Todas al 100% */
  }
}

/* ==========================================================================
   10. MÓDULO: FEATURES TABS (Pestañas)
   ========================================================================== */
.pc-features-tabs {
  padding: 5rem 0;
  text-align: center;
}

/* --- Encabezado --- */
.pc-features-tabs__header {
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

.pc-features-tabs__eyebrow {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
}

.pc-features-tabs__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.pc-features-tabs__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0 auto;
}

/* --- Navegación de Pestañas (Botones) --- */
.pc-tabs-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Para que bajen si no caben en móviles */
  gap: 1rem;
  margin-bottom: 3rem;
}

.pc-tab-btn {
  background-color: var(--pc-tab-bg-idle);
  color: var(--pc-tab-text-idle);
  border: none;
  border-radius: 50px; /* Forma de píldora */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pc-tab-btn:hover {
  background-color: #cccccc;
}

.pc-tab-btn.is-active {
  background-color: var(--pc-tab-bg-active);
  color: var(--pc-tab-text-active);
}

/* --- Área de Contenido (Panes) --- */
.pc-tabs-content {
  background-color: var(--pc-bg-pane);
  border-radius: 20px;
  padding: 4rem;
  text-align: left;
}

.pc-tab-pane {
  display: none; /* Ocultos por defecto */
}

/* Solo se muestra el pane que tiene la clase activa */
.pc-tab-pane.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  animation: fade-in 0.4s ease-in-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Elementos internos del pane */
.pc-tab-pane__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

.pc-tab-pane__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0;
}

.pc-tab-pane__media {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4/3; /* Mantiene proporciones rectangulares */
}

.pc-tab-pane__media svg {
  width: 100px;
  height: 100px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-tabs-content {
    padding: 3rem 2rem;
  }
  
  .pc-tab-pane.is-active {
    grid-template-columns: 1fr; /* Una columna en tablets/móviles */
    gap: 2rem;
  }
  
  /* Hacemos que la imagen pase arriba del texto en móviles */
  .pc-tab-pane__media {
    order: -1; 
  }
}

/* ==========================================================================
   11. MÓDULO: COMPARISON (Antes vs Después)
   ========================================================================== */
.pc-comparison {
  padding: 5rem 0;
  text-align: center;
}

/* --- Encabezado --- */
.pc-comparison__header {
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.pc-comparison__eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
}

.pc-comparison__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.pc-comparison__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0 auto;
}

/* --- Grid de Comparación --- */
.pc-comparison__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  text-align: left; /* Regresamos la alineación a la izquierda para el contenido */
}

/* --- Tarjetas de Comparación --- */
.pc-comparison-card {
  /* Reutilizamos variables anteriores */
  border: 1px solid var(--pc-border-card); 
  border-radius: 16px;
  overflow: hidden; /* Para que el fondo del header respete el borde redondeado */
  display: flex;
  flex-direction: column;
  background-color: var(--pc-bg-body);
}

.pc-comparison-card__header {
  /* Reutilizamos el gris que usamos en el módulo de Casos de Éxito */
  background-color: var(--pc-bg-card-top); 
  padding: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--pc-text-heading);
  font-size: 1.125rem;
}

.pc-comparison-card__body {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Espaciado uniforme entre cada punto de la lista */
}

/* --- Elementos de la lista (Puntos) --- */
.pc-comparison-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.pc-comparison-item__icon {
  flex-shrink: 0; /* CRÍTICO: Evita que el SVG se encoja si hay mucho texto */
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--pc-text-heading);
}

.pc-comparison-item__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5; /* Grosor de los trazos, similar a tu diseño */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-comparison-item__text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pc-text-body);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pc-comparison__grid {
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 3rem; /* Más espacio entre las dos tablas cuando se apilan */
  }
}

/* ==========================================================================
   12. MÓDULO: STATS / METRICS (Prueba Social)
   ========================================================================== */
.pc-stats {
  padding: 5rem 0;
  text-align: center;
  /* Si en tu diseño el fondo general es ligeramente gris, 
     podemos reusar la variable de fondo claro que ya teníamos */
  background-color: var(--pc-bg-card-bottom, #f9f9f9); 
}

/* --- Encabezado --- */
.pc-stats__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

.pc-stats__eyebrow {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
}

.pc-stats__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.pc-stats__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0 auto;
  max-width: 800px; /* Evita que el texto de apoyo se estire demasiado */
}

/* --- Caja Gris de Métricas --- */
.pc-stats__box {
  background-color: var(--pc-bg-card); /* Reusamos el gris de las tarjetas */
  border-radius: 20px;
  padding: 4rem 2rem;
}

/* --- Grid de las 3 Columnas --- */
.pc-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* --- Cada Elemento (Número y Texto) --- */
.pc-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pc-stats-item__number {
  /* clamp(mínimo, ideal, máximo) - Perfecto para números gigantes */
  font-size: clamp(3rem, 5vw, 4.5rem); 
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1;
}

.pc-stats-item__text {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--pc-text-body);
  margin: 0;
  max-width: 280px; /* Mantiene el texto de la métrica en un bloque fácil de leer */
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pc-stats__box {
    padding: 3rem 1.5rem;
  }
  
  .pc-stats__grid {
    grid-template-columns: 1fr; /* Pasa a 1 sola columna en celulares */
    gap: 3.5rem; /* Damos un poco más de aire vertical */
  }
}

/* ==========================================================================
   13. MÓDULO: CTA BOX (Call to Action de Cierre)
   ========================================================================== */
.pc-cta-box {
  padding: 5rem 0;
}

.pc-cta-box__inner {
  background-color: var(--pc-bg-card); /* Reusamos el gris clásico */
  border-radius: 24px;
  padding: 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Mitad y mitad */
  gap: 4rem;
  align-items: center;
}

/* --- Columna Izquierda (Contenido) --- */
.pc-cta-box__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea el botón a la izquierda */
}

.pc-cta-box__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.1;
  margin: 0 0 2rem 0;
  letter-spacing: -0.02em;
}

.pc-cta-box__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0 0 1.5rem 0;
  max-width: 90%; /* Evita que las líneas sean demasiado largas */
}

/* --- Columna Derecha (Imagen) --- */
.pc-cta-box__media {
  background-color: #ffffff; /* Caja blanca interior */
  border-radius: 20px;
  width: 100%;
  aspect-ratio: 1 / 1; /* Fuerza a que sea un cuadrado perfecto por defecto */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Para cuando inserten la imagen real (img) */
}

/* Ícono temporal de la imagen */
.pc-cta-box__media svg {
  width: 120px;
  height: 120px;
  fill: var(--pc-text-heading); /* Usa el negro base */
}

.pc-cta-box__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Se asegura de que no haya espacios extraños debajo */
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-cta-box__inner {
    grid-template-columns: 1fr; /* Se apila en 1 columna */
    padding: 3rem 2rem;
    gap: 3rem;
  }
  
  .pc-cta-box__title,
  .pc-cta-box__text {
    max-width: 100%;
  }
}

/* ==========================================================================
   14. MÓDULO: FAQ ACCORDION (Preguntas Frecuentes)
   ========================================================================== */
.pc-faq {
  padding: 5rem 0;
}

/* --- Encabezado Alineado a la Izquierda --- */
.pc-faq__header {
  max-width: 800px;
  margin-bottom: 3rem;
  /* A diferencia de otros módulos, este diseño lo tiene a la izquierda */
  text-align: left; 
}

.pc-faq__eyebrow {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.pc-faq__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}

/* --- Lista de Acordeones --- */
.pc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Espacio entre cada pregunta */
/*  max-width: 1000px;*/
}

.pc-faq-item {
  background-color: var(--pc-bg-card); /* Reusamos el gris base */
  border-radius: 12px;
  overflow: hidden;
}

/* El botón que el usuario clickea */
.pc-faq-item__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-text-heading);
  transition: background-color 0.2s;
}

/* --- Icono Animado (+ a -) con puro CSS --- */
.pc-faq-item__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

.pc-faq-item__icon::before,
.pc-faq-item__icon::after {
  content: '';
  position: absolute;
  background-color: var(--pc-text-heading); /* Color negro de las líneas */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Línea Horizontal */
.pc-faq-item__icon::before {
  top: 10px;
  left: 0;
  width: 24px;
  height: 4px; /* Grosor de la línea */
  border-radius: 2px;
}

/* Línea Vertical */
.pc-faq-item__icon::after {
  top: 0;
  left: 10px;
  width: 4px;
  height: 24px;
  border-radius: 2px;
}

/* Al abrir, la línea vertical gira y desaparece para dejar solo el "Menos" */
.pc-faq-item.is-open .pc-faq-item__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* --- Panel de la Respuesta (El truco del CSS Grid) --- */
.pc-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr; /* Empieza colapsado */
  transition: grid-template-rows 0.3s ease-out;
}

.pc-faq-item.is-open .pc-faq-item__panel {
  grid-template-rows: 1fr; /* Se expande fluidamente */
}

/* Contenedor interno necesario para que el Grid funcione */
.pc-faq-item__content {
  overflow: hidden; 
}

.pc-faq-item__text {
  padding: 0 2.5rem 2.5rem 2.5rem; /* Padding solo abajo y a los lados */
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
}

.pc-faq-item__text a {
  color: var(--pc-text-heading);
  font-weight: 700;
  text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pc-faq-item__btn {
    padding: 1.5rem;
    font-size: 1.125rem;
  }
  .pc-faq-item__text {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
}

/* ==========================================================================
   15. MÓDULO: BLOG CAROUSEL (Estudios de Caso)
   ========================================================================== */
.pc-blog-carousel {
  padding: 5rem 0;
  text-align: left; /* Alineado a la izquierda por defecto */
}

/* --- Encabezado --- */
.pc-blog-carousel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /*max-width: 1000px;*/
  margin: 0 auto 4rem auto;
}

.pc-blog-carousel__content {
  flex-grow: 1;
}

.pc-blog-carousel__eyebrow {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pc-text-heading);
  margin-bottom: 1rem;
}

.pc-blog-carousel__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--pc-text-heading);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.pc-blog-carousel__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin-bottom: 2rem;
}

/* --- Navegación Inferior Separada (Flechas Cuadradas) --- */
.pc-blog-carousel__nav {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-shrink: 0;
  position: relative; /* Para el posicionamiento de Swiper */
}

/* Base de la flecha cuadrada que reutilizamos de módulos anteriores */
.pc-btn-nav-square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  background-color: transparent;
  border: 2px solid var(--pc-text-heading);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: static; /* Swiper suele poner absolute, nosotros queremos flex */
  margin: 0; /* Limpiar márgenes de Swiper */
}

.pc-btn-nav-square:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Iconos de flechas con puro CSS (líneas más gordas) */
.pc-btn-nav-square::before,
.pc-btn-nav-square::after {
  content: '';
  position: absolute;
  background-color: var(--pc-text-heading);
}

/* Flecha Izquierda */
.pc-blog-carousel-prev::before {
  top: 18px;
  left: 12px;
  width: 20px;
  height: 4px;
}

.pc-blog-carousel-prev::after {
  top: 12px;
  left: 12px;
  width: 10px;
  height: 4px;
  transform: rotate(-45deg);
}

.pc-blog-carousel-prev::after {
  top: 24px;
  left: 12px;
  width: 10px;
  height: 4px;
  transform: rotate(45deg);
}

/* Flecha Derecha */
.pc-blog-carousel-next::before {
  top: 18px;
  right: 12px;
  width: 20px;
  height: 4px;
}

.pc-blog-carousel-next::after {
  top: 12px;
  right: 12px;
  width: 10px;
  height: 4px;
  transform: rotate(45deg);
}

.pc-blog-carousel-next::after {
  top: 24px;
  right: 12px;
  width: 10px;
  height: 4px;
  transform: rotate(-45deg);
}

/* Swiper deshabilitado */
.pc-btn-nav-square.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}


/* --- Tarjeta del Blog (Blog Card) --- */
.pc-blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none; /* Toda la tarjeta es cliqueable */
  color: inherit;
  cursor: pointer;
}

.pc-blog-card__media {
  width: 100%;
  aspect-ratio: 1 / 1; /* Cuadrado perfecto */
  background-color: var(--pc-bg-card-top); /* Gris base de tu diseño */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pc-blog-card__media svg {
  width: 100px;
  height: 100px;
}

.pc-blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen real */
}

.pc-blog-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-color-dark-blue);
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

.pc-blog-card__excerpt {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-blog-carousel__header {
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
  }
  
  .pc-blog-carousel__nav {
    justify-content: flex-end; /* Flechas a la derecha en móviles */
    width: 100%;
  }
}

/*estilos mockups*/
/*hero*/

/* video */
.pc-hero-main{
    position:relative;
    overflow:hidden;
    height:90vh;
    display:flex;
    align-items:center;
    
}
section.pc-hero-main:after {
    background:var(--pc-color-navy);
    content:"";
    height:100%;
    width:100%;
    position:absolute;
    opacity:0.65;
}
section.pc-hero-main.main-service:after {
  opacity:0.7!important;
}
.pc-hero-main .pc-container{
    z-index:100!important;
    padding-top:150px;
}
video.video-bg {
    position:absolute;
    width:100%;
    /* height:100%; */
    z-index:-1!important;
}

.pc-hero-main{
background-size:cover;
}
.pc-hero-main__content {
    text-align:center;
}
video.video-bg {
    object-fit:cover;
    height:100%;
}
.swiper.pc-vertical-swiper{
    /* height:100vh!important; */
}
/* ==========================================================================
   MÓDULO: PROBLEMS GRID (2x2)
   ========================================================================== */
.pc-problems-grid {
  padding: 6rem 0;
  /* Un color de fondo extra claro (icy blue/gray) que hace resaltar las tarjetas blancas. 
     Lo aplicamos directo al módulo para no saturar las variables globales. */
  background-image:linear-gradient(180deg, #e1f1ff, #ffffff); 
  text-align: center;
}

/* --- Encabezado --- */
.pc-problems-grid__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

/* Modificador local para centrar el texto grande y cambiarle el color al navy */
.pc-problems-grid__header .pc-text-body-large {
  color: var(--pc-color-navy);
  font-weight: 500;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Grid 2x2 --- */
.pc-problems-grid__content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: left;
}

/* --- Tarjetas Individuales --- */
.pc-problem-box {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 3rem;
  /* Reutilizamos el borde tenue y añadimos una sombra imperceptible para dar volumen */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
    border: 4px solid transparent;
  background: 
    linear-gradient(#f3faff, #f3faff) padding-box,
    linear-gradient(45deg, #d2e9ff,#eff9ff) border-box;
}

/* Contenedor del ícono */
.pc-problem-box__icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

/* La imagen del ícono que tú insertarás */
.pc-problem-box__icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Título de la tarjeta */
.pc-problem-box__title,
.pc-sub-title__blue {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--pc-color-dark-blue);
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 1rem 0;
}

/* Texto de la tarjeta */
.pc-problem-box__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333333; /* Gris oscuro estándar para buena lectura */
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-problems-grid__content {
    grid-template-columns: 1fr; /* Pasa a 1 columna en tablets y móviles */
    gap: 1.5rem;
  }
  
  .pc-problem-box {
    padding: 2rem;
  }
}


/* ==========================================================================
   16. MÓDULO: VERTICAL SLIDER (Casos de Integración)
   ========================================================================== */
.pc-vertical-slider {
  padding: 6rem 0;
  text-align: center;
}

/* --- Encabezado --- */
.pc-vertical-slider__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

/* Reutilizamos clases globales, ajustando sutilmente el color si es necesario */
.pc-vertical-slider__header .pc-eyebrow {
  color: #333333; /* Gris oscuro para el eyebrow superior */
}

/* --- Modificador Global: Botón Rosa/Magenta --- */
.pc-btn--pink {
  background-color: var(--pc--color-red); /* El fucsia de tu diseño */
  color: #ffffff;
  font-weight: 700;
  border-radius: 8px;
}

.pc-btn--pink:hover {
  background-color: #cc0044;
}

/* --- Contenedor Principal (Caja Celeste) --- */
.pc-vertical-slider__box {
  background-color: var(--pc-color-light-blue); /* El tono celeste exacto de tu imagen */
  border-radius: 24px;
  padding: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* --- Swiper Vertical (Requiere altura definida) --- */
.pc-vertical-swiper {
  /* La altura es OBLIGATORIA para que Swiper sepa cómo calcular el scroll vertical */
  height: 400px; 
}

/* Layout Interno del Slide */
.pc-vertical-slide-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* La imagen es ligeramente más ancha */
  gap: 4rem;
  height: 100%;
  align-items: center;
  padding-right: 3rem; /* Espacio reservado para que los puntos no pisen el texto */
}

.pc-vertical-slide__media {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background-color: #d1e8f5; /* Placeholder si la imagen tarda en cargar */
}

.pc-vertical-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-vertical-slide__content {
  text-align: left;
}

.pc-vertical-slide__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--pc-color-navy); /* Usamos el Navy del Hero */
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.pc-vertical-slide__text {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 2rem;
}

/* --- Paginación Vertical Swiper (Los Puntos) --- */
.pc-vertical-swiper .swiper-pagination-vertical {
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.pc-vertical-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  opacity: 1; /* Quitamos la transparencia por defecto de Swiper */
  margin: 10px 0 !important;
}

.pc-vertical-swiper .swiper-pagination-bullet-active {
  background-color: #8bb3d6; /* El tono azulado del punto activo en tu diseño */
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-vertical-swiper {
    height: auto; /* En móvil dejamos que la altura fluya naturalmente */
  }
  
  .pc-vertical-slide-inner {
    grid-template-columns: 1fr; /* 1 Columna */
    gap: 2rem;
    padding-right: 0;
  }

  .pc-vertical-slide__media {
    height: 300px; /* Le damos una altura fija en móvil a la imagen */
  }

  /* Ocultamos los puntos verticales en móvil para ahorrar espacio (el usuario deslizará normal) */
  .pc-vertical-swiper .swiper-pagination-vertical {
    display: none; 
  }

  .pc-vertical-slider .pc-vertical-slider__box{
    padding:30px;
}
.pc-vertical-slider .pc-vertical-slide-inner {
    padding-bottom:50px;
}
.pc-vertical-slider .swiper-pagination{
    display:flex;
    justify-content:center;
    gap:15px;

}

}

/* ==========================================================================
   17. MÓDULO: INTEGRA (Bento Asimétrico 3 Cols)
   ========================================================================== */
.pc-integra {
  padding: 6rem 0;
  text-align: center;
}

/* --- Encabezado --- */
.pc-integra__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

.pc-integra__eyebrow {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #555555; /* Gris medio para el eyebrow */
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

/* Reutilizamos .pc-heading-lg pero centrado */
.pc-integra__title {
  color: var(--pc-color-navy); /* Azul oscuro base */
  margin-bottom: 1.5rem;
}

.pc-integra__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-body);
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
}

.pc-integra__link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pc-color-navy);
  text-decoration: none;
}

.pc-integra__link:hover {
  text-decoration: underline;
}

/* --- Contenedor Bento (3 Columnas) --- */
.pc-integra__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

/* --- Columnas Internas (Flexbox) --- */
.pc-integra-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --- Tarjetas Base --- */
.pc-integra-card {
  border-radius: 16px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pc-integra-card.first-top,
.pc-integra-card.first-bottom{
    background-size:cover;
    height:50%!important;
    box-sizing:border-box;
}
.pc-integra-card.first-top{
    background-position:center;
}
.pc-integra-card.first-bottom{
    background-position:center;
}

.pc-integra-card.second{
    background-size:cover;
    box-sizing:border-box;
    background-position:center;
}


.pc-integra-col .pc-integra-card--image-only{
    height:-webkit-fill-available;
}

/* Modificadores de Color */
.pc-integra-card--dark {
  background-color: var(--pc-color-navy);
  color: #ffffff;
}

.pc-integra-card--light-blue {
  background-color: #e6f3fa; /* Celeste tenue */
  color: var(--pc-color-navy);
}

.pc-integra-card--white {
  background-color: #f8fafc; /* Blanco/gris muy suave */
  color: var(--pc-color-navy);
  border: 1px solid #e2e8f0;
}

/* Textos dentro de las tarjetas */
.pc-integra-card__title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

/* Ajuste de color para títulos en tarjetas claras */
.pc-integra-card--light-blue .pc-integra-card__title,
.pc-integra-card--white .pc-integra-card__title {
  color: var(--pc-color-navy);
}

.pc-integra-card__text {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.pc-integra-card__text strong {
  font-weight: 700;
}

/* --- Tarjetas Especiales (Imágenes y Altos) --- */
/* Tarjeta de solo imagen (Col 1 Abajo) */
.pc-integra-card--image-only {
  padding: 0;
  min-height: 250px; /* Asegura que la imagen tenga un alto mínimo */
}

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


/* Tarjeta Alta (Col 2 Centro) */
.pc-integra-card--tall {
  flex-grow: 1; /* Hace que llene el alto disponible de la columna */
  justify-content: space-between;
}

.pc-integra-card__mid-img {
  width: 100%;
  flex-grow: 1; /* Empuja los textos hacia los extremos */
  object-fit: cover;
  margin: 1.5rem 0;
  min-height: 200px;
}

/* --- Responsive para Móviles --- */
@media (max-width: 992px) {
  .pc-integra__grid {
    /* Magia pura: En tablets y celulares pasa a 1 columna */
    grid-template-columns: 1fr; 
  }
  
  .pc-integra-card--tall {
    min-height: 500px; /* En móviles le damos un alto forzado para que se vea bien la imagen central */
  }
}

.pc-integra-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Espaciado sutil entre opciones */
  width: 100%;
}

.pc-integra-acc-item {
  border-bottom: none; /* Según tu diseño, es una lista muy limpia */
}

/* --- Botón del Acordeón --- */
.pc-integra-acc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--pc-color-navy);
}

/* Título con el bullet point */
.pc-integra-acc-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  padding-right: 1rem;
}

/* --- Ícono de +/- (Puro CSS en color Fucsia) --- */
.pc-integra-acc-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px; /* Alineación óptica con el texto */
}

.pc-integra-acc-icon::before,
.pc-integra-acc-icon::after {
  content: '';
  position: absolute;
  background-color: #ff0055; /* El fucsia/magenta de tu diseño */
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 2px;
}

/* Línea Horizontal (El "Menos") */
.pc-integra-acc-icon::before {
  top: 9px;
  left: 2px;
  width: 16px;
  height: 2px;
}

/* Línea Vertical (Completa el "Más") */
.pc-integra-acc-icon::after {
  top: 2px;
  left: 9px;
  width: 2px;
  height: 16px;
}

/* Cuando está abierto, la línea vertical gira y desaparece */
.pc-integra-acc-item.is-open .pc-integra-acc-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* --- Panel de Contenido (Magia de Grid) --- */
.pc-integra-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.pc-integra-acc-item.is-open .pc-integra-acc-panel {
  grid-template-rows: 1fr;
}

.pc-integra-acc-content {
  overflow: hidden;
}

/* El texto interior */
.pc-integra-acc-content p {
  padding: 0 0 1rem 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
}



/* ==========================================================================
   18. MÓDULO: INDUSTRY SHOWCASE (Con Hueco Transparente)
   ========================================================================== */
.pc-industry-showcase {
  position: relative;
  padding: 8rem 0;
  /* Fondo por defecto (antes del primer hover) */
  background-color: var(--pc-color-navy);
  background-image: url('placeholder-industria-default.jpg'); 
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Transición suave para cuando JS cambie el fondo */
  transition: background-image 0.5s ease-in-out;
}

/* --- La Caja Blanca con Hueco (SVG Inline) --- */
.pc-punched-box {
  position: absolute;
  top: 5rem; /* Margen superior interno */
  left: 50%;
  transform: translateX(-50%);
      width: 90% !important;
    max-width: 1600px !important;
    height: 880px;
  min-height: 600px;
  z-index: 1;
  border-radius: 20px;
}
@media screen and (max-width:1300px){
rect.mask-image {
    x:22%;
    width:28%;
}
}

/* --- Cuadrícula de Contenido (Sobre el SVG) --- */
.pc-content-grid {
  position: relative;
  z-index: 2; /* Encima del SVG */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */
  gap: 6rem;
  align-items: center;
}

/* Columna Izquierda (Vacía, sobre el "hueco") */
.pc-content-grid__space {
  height: 100%;
}

/* Columna Derecha (Textos) */
.pc-content-grid__info {
  text-align: left;
  width: 95%;
}

/* Reutilización de Clases Globales */
.pc-content-grid__info .pc-eyebrow {
  color: #333333; /* Gris oscuro para el eyebrow en fondo blanco */
}

/* Modificador local para pc-heading-xl para que sea Navy y no Blanco */
.pc-content-grid__info .pc-heading-xl {
  color: var(--pc-color-navy);
  margin-bottom: 2.5rem;
}

.pc-content-grid__info .pc-text-body-large {
  color: #333333;
  margin-bottom: 2rem;
}

.pc-content-grid__info .pc-text-muted {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 2rem;
}

/* --- Lista de Sectores (Cápsulas) --- */
.pc-sectors-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pc-sector-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: #f1f5f9; /* Gris muy claro */
  padding: 1rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  color: var(--pc-color-navy);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
    width:65%!important;
}

.pc-sector-item:hover,
.pc-sector-item.is-active {
  /* Reutilizamos el Cyan del hero para el hover brillante */
  background-color: var(--pc-color-light-blue); 
  transform: translateX(10px); /* Efecto de empuje hacia la derecha */
}

.pc-sector-item__icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* --- Responsive para Móviles --- */
@media (max-width: 992px) {
  /* En móviles, la máscara SVG es muy compleja de posicionar. 
     Es mejor quitarla y simplemente apilar los bloques sobre la imagen de fondo. */
  
  .pc-punched-box {
    display: none; /* Ocultamos la caja blanca con hueco */
  }
  
  .pc-industry-showcase {
    padding: 5rem 0;
  }
  
  /* Capa de opacidad para móviles para garantizar lectura */
  .pc-industry-showcase::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255,255,255,0.85); /* Fondo blanco translúcido */
    z-index: 1;
  }
  
  .pc-content-grid {
    grid-template-columns: 1fr; /* 1 columna apilada */
    text-align: center;
    gap: 3rem;
  }
  

  .pc-sector-item{
    width:auto!important;
    gap:40px;
    justify-content:start;
    text-align:left;
  }
  .pc-sector-item:hover, .pc-sector-item.is-active{
      transform:translateX(0px);
  }
}

/* ==========================================================================
   19. MÓDULO: CASES SLIDER (Carrusel con Paginación de Puntos)
   ========================================================================== */
.pc-cases-slider {
  padding: 6rem 0;
  text-align: center;
  background-color: #ffffff;
  overflow: hidden; /* Evita scroll horizontal en toda la página */
}

/* --- Encabezado --- */
.pc-cases-slider__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

/* Sobrescribimos colores usando las clases globales para igualar tu diseño */
.pc-cases-slider__header .pc-eyebrow {
  color: #555555;
}

/* .pc-cases-slider__header .pc-heading-lg {
  color: var(--pc-color-navy); 
  margin-bottom: 2rem;
} */

.pc-cases-slider__header .pc-text-body-large {
  color: #333333;
}

/* --- Contenedor del Carrusel --- */
.pc-cases-swiper {
  /* ¡Truco experto! Permite que las tarjetas se asomen fuera del contenedor */
  overflow: visible !important; 
  padding-bottom: 4rem !important; /* Espacio para los puntos de paginación */
}

/* --- Tarjetas de Caso de Éxito --- */
.pc-case-card {
  background-color: var(--pc-color-light-blue); /* El azul extra claro de las tarjetas */
  border-radius: 16px;
  padding: 3rem 2.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.pc-cases-swiper .swiper-slide .pc-case-card{
    box-shadow:0px 6px 10px #96969612;
}


.pc-cases-swiper .swiper-slide {
  height: auto !important; /* El !important a veces es necesario para ganarle al CSS en línea de Swiper */
}

.pc-cases-swiper .pc-case-card {
  height: -webkit-fill-available;  
  display: flex;
  flex-direction: column;
}


.pc-case-card__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pc-color-dark-blue);
  line-height: 1.3;
  margin: 0 0 1.5rem 0;
}

.pc-case-card__tech {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--pc-color-blue); /* Azul brillante para las tecnologías */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.pc-case-card__text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333333;
  margin: 0;
}

/* --- Paginación (Puntos) --- */
.pc-cases-pagination,
.pc-blog-pagination {
  bottom: 0 !important;
}

.pc-cases-pagination .swiper-pagination-bullet,
.pc-blog-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #e0e0e0; /* Puntos inactivos gris claro */
  opacity: 1; /* Quitamos la transparencia por defecto de Swiper */
  margin: 0 6px !important;
  transition: background-color 0.3s ease;
}

.pc-cases-pagination .swiper-pagination-bullet-active,
.pc-blog-pagination .swiper-pagination-bullet-active {
  background-color: var(--pc-color-navy); /* Punto activo oscuro */
}


/* ==========================================================================
MÓDULO: TOPBAR (Barra de Anuncios Sticky)
   ========================================================================== */
.pc-topbar {
  background-color: var(--pc-color-mint);
  position: sticky;
  top: 0;
  z-index: 9999; /* Z-index altísimo para que pase por encima de cualquier otro carrusel o menú */
  width: 100%;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1); /* Sutil separación visual */
  margin-top:0px!important;

}

.pc-topbar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

.pc-topbar__text {
  font-size: 0.95rem!important; /* Texto pequeño pero legible */
  font-weight: 700;
  color: var(--pc-color-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.4;
  text-align: center;
}

/* Contenedor para la flecha y el botón */
.pc-topbar__action {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0; /* Evita que el botón se aplaste si el texto es muy largo */
}

.pc-topbar__arrow {
  width: 40px;
  height: 12px;
  fill: none;
  stroke: var(--pc-color-navy);
  stroke-width: 1.5;
}

/* Modificador de botón para fondo oscuro */
.pc-btn--navy {
  background-color: var(--pc-color-navy);
  color: var(--pc-text-white);
  padding: 0.6rem 1.5rem;
  font-size: 0.875rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pc-btn--navy:hover {
  background-color: #0a183d; /* Un tono un poco más claro para el hover */
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-topbar__inner {
    flex-direction: column; /* Apila el texto y el botón en móviles */
    gap: 0.75rem;
    padding: 0.5rem 20px;
  }
  
  .pc-topbar__arrow {
    display: none; /* Ocultamos la flecha larga en móviles por espacio */
  }
  
  .pc-topbar__text {
    font-size: 0.75rem; /* Texto ligeramente más pequeño */
  }
}


/* ==========================================================================
   METODOLOGÍA AURORA (Panel Interactivo / Acordeón)
   ========================================================================== */
.pc-aurora {
  position: relative;
  padding: 8rem 0;
  background-color: var(--pc-color-navy);
  /* Imagen de fondo de redes/nodos */
  background-image: url('placeholder-redes.jpg');
  background-size: cover;
  background-position: center;
  color: var(--pc-text-white);
  overflow: hidden;
}



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

/* --- Encabezado --- */
.pc-aurora__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 5rem auto;
}

.pc-aurora__header .pc-eyebrow {
  color: var(--pc-text-light-gray);
}

.pc-aurora__header .pc-heading-lg {
  color: var(--pc-text-white); /* Forzamos blanco sobre el fondo oscuro */
}

/* --- Layout Principal (Grid 2 Columnas) --- */
.pc-aurora__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Columna Izquierda (Panel de Texto) --- */
.pc-aurora__left-panel {
  display: flex;
  flex-direction: column;
}

.pc-aurora__static-title {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-bottom: 4rem;
  line-height: 1.3;
}

/* El área donde JS inyectará el contenido */
.pc-aurora__dynamic-display {
  /* Transición de opacidad para el cambio de contenido */
  transition: opacity 0.3s ease;
  min-height: 250px; /* Evita que el layout salte si el texto es corto */
}

.pc-aurora__dynamic-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pc-color-aurora-cyan);
  margin-bottom: 1.5rem;
}

.pc-aurora__dynamic-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pc-text-light-gray);
  margin-bottom: 1rem;
}

/* --- Columna Derecha (Lista de Botones/Acordeón) --- */
.pc-aurora__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* El contenedor del ítem */
.pc-aurora-item {
  display: flex;
  flex-direction: column;
}

/* El Botón (Cápsula) */
.pc-aurora-item__btn {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: none;
  border-radius: 50px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.pc-aurora-item__icon {
  width: 48px;
  height: 48px;
  background-color: var(--pc-color-aurora-light);
  color: var(--pc-color-navy);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.pc-aurora-item__label {
  flex-grow: 1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pc-color-navy);
  text-transform: uppercase;
  padding-right: 48px; /* Para centrar visualmente el texto ignorando el ícono */
}

/* Estado Activo (Hover o Seleccionado) */
.pc-aurora-item.is-active .pc-aurora-item__btn {
  background-color: var(--pc-color-aurora-light);
}

.pc-aurora-item.is-active .pc-aurora-item__icon {
  background-color: var(--pc-color-navy);
  color: #ffffff;
}

/* El contenido oculto (Para JS en Desktop, para Acordeón en Móvil) */
.pc-aurora-item__content {
  display: none; /* Oculto por defecto en escritorio */
}

/* --- Responsive Móvil (La Magia del Híbrido) --- */
@media (max-width: 992px) {
  .pc-aurora__grid {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 2rem;
  }

  /* Ocultamos el panel de visualización dinámico izquierdo */
  .pc-aurora__dynamic-display {
    display: none;
  }
  
  .pc-aurora__static-title {
    margin-bottom: 1rem;
    text-align: center;
  }

  /* Transformamos el contenido oculto en un Acordeón para móviles */
  .pc-aurora-item__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
  }

  .pc-aurora-item__content-inner {
    overflow: hidden;
    padding: 0 1rem;
  }

  .pc-aurora-item.is-active .pc-aurora-item__content {
    grid-template-rows: 1fr; /* Se expande en móvil si está activo */
  }

  .pc-aurora-item.is-active .pc-aurora__dynamic-title {
    margin-top: 1.5rem; /* Separación al abrir */
  }
}



/* ==========================================================================
   22. MÓDULO: INTELIGENCIA APLICADA (Tarjetas con Hover Elevado)
   ========================================================================== */
.pc-ai-cards {
  padding: 6rem 0;
  background-color: #ffffff;
  text-align: center;
}

/* --- Encabezado --- */
.pc-ai-cards__header {
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

/* Reusamos la clase global, forzando el color Navy por si acaso */
/* .pc-ai-cards__header .pc-heading-lg {
  color: var(--pc-color-navy);
  margin-bottom: 1.5rem;
} */

.pc-ai-cards__header .pc-text-body-large {
  color: #333333;
  font-size: 1.125rem;
  max-width: 700px;
  margin: 0 auto;
}

/* --- Grid de 3 Columnas --- */
.pc-ai-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: left;
}

/* --- Tarjetas --- */
.pc-ai-card {
  background-color: #f7f7f7; /* Gris extra claro / casi blanco hielo */
  border-radius: 16px;
  padding: 3rem 2.5rem;
  min-height: 320px; /* Altura mínima para mantener proporciones */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Empuja el ícono arriba y el texto abajo */
  
  /* La magia de la animación está aquí */
  transition: transform 0.6s ease, 
              box-shadow 0.6s ease;
}

/* Efecto Hover: Elevar en el eje Y y agregar sombra */
.pc-ai-card:hover {
  transform: translateY(-15px); /* Se eleva 15px */
  box-shadow: 0 20px 40px rgba(4, 11, 30, 0.08); /* Sombra tenue color Navy */
}

/* Contenedor del ícono */
.pc-ai-card__icon {
  width: 64px;
  height: 64px;
  background-color: var(--pc-color-navy);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem; /* Por si el contenido crece */
}

/* Etiqueta img lista para tus íconos */
.pc-ai-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Título de la tarjeta */
.pc-ai-card__title {
  font-size: 1.8rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-ai-cards__grid {
    grid-template-columns: 1fr; /* Una columna en tablets y móviles */
    gap: 1.5rem;
  }
  
  .pc-ai-card {
    min-height: auto; /* Dejamos que el contenido mande en móviles */
    gap: 3rem; /* Espacio fijo entre ícono y texto si no hay min-height */
  }
}


/* ==========================================================================
   23. MÓDULO: ARQUITECTURAS (Grid 4x4 con Hover Reveal)
   ========================================================================== */
.pc-architecture {
  width: 100%;
}

/* --- Área de Encabezado (Fondo Celeste) --- */
.pc-architecture__header {
  background-color: #e6f3fa; /* Celeste claro del diseño */
  padding: 6rem 0;
  text-align: center;
}

.pc-architecture__header-inner {
  max-width: 900px;
  margin: 0 auto;
}

.pc-architecture__header .pc-eyebrow {
  color: #555555;
}

.pc-architecture__header .pc-heading-xl {
  color: var(--pc-color-navy);
  font-size: clamp(2rem, 4vw, 3.2rem); /* Ligeramente más pequeño para que quepa bien */
  margin-bottom: 1.5rem;
}

.pc-architecture__header .pc-text-body-large {
  color: #333333;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto;
}

/* --- Grid de 4 Columnas (Sin espacios) --- */
.pc-architecture__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

/* --- Tarjeta Individual --- */
.pc-arch-card {
  position: relative;
  height: 650px;
  overflow: hidden;
  cursor: pointer;
}

/* 1. Imagen de Fondo (Efecto Zoom) */
.pc-arch-card__bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
  z-index: 1;
}

/* 2. Gradiente Oscura (Protege la lectura del texto) */
.pc-arch-card__overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Estado normal: Solo oscuro abajo para el título */
  background: linear-gradient(to top, rgba(4, 11, 30, 0.9) 0%, rgba(4, 11, 30, 0) 50%);
  transition: background 0.6s ease;
  z-index: 2;
}

/* 3. Ícono "+" Central */
.pc-arch-card__plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.6);
  /* backdrop-filter: blur(5px); */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  font-size: 2rem;
  font-weight: 300;
  z-index: 3;
  transition: all 0.5s ease;
}

/* 4. Contenedor de Textos (Flexbox) */
.pc-arch-card__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3rem 2.5rem;
  justify-content: center;
}

/* El "Empujador" Invisible */
.pc-arch-card__spacer-top {
  flex-grow: 0.8; /* Empuja el título hacia abajo */
  transition: flex-grow 0.6s ease;
}

.pc-arch-card__title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 50px 0;
  transition: transform 0.6s ease;
}

/* Cuerpo Oculto (Texto y Botón) */
.pc-arch-card__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.6s ease;
}

.pc-arch-card__body p {
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1.5;
  margin: 1.5rem 0 2rem 0;
}


/* ==========================================================================
   HOVER ANIMATION (La Magia CSS)
   ========================================================================== */
.pc-arch-card:hover .pc-arch-card__bg {
  transform: scale(1.08); /* Pequeño zoom a la imagen */
}

.pc-arch-card:hover .pc-arch-card__overlay {
  /* Oscurece toda la tarjeta para leer los textos superiores */
  background: linear-gradient(to top, rgba(4, 11, 30, 0.95) 0%, rgba(4, 11, 30, 0.6) 100%);
}

.pc-arch-card:hover .pc-arch-card__plus {
  opacity: 0; /* Desaparece el "+" */
  transform: translate(-50%, -50%) scale(0.5);
}

.pc-arch-card:hover .pc-arch-card__spacer-top {
  flex-grow: 0; /* Deja de empujar, haciendo que el título suba */
}

.pc-arch-card:hover .pc-arch-card__body {
  max-height: 400px; /* Se expande para revelar el contenido */
  opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .pc-architecture__grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Columnas en Tablets */
  }
}

@media (max-width: 768px) {
  .pc-architecture__grid {
    grid-template-columns: 1fr; /* 1 Columna en Celulares */
  }
  
  .pc-arch-card {
    height: 450px; /* Tarjetas un poco más bajas en móvil */
  }

  /* FORZAMOS ESTADO ABIERTO EN MÓVILES (UX Vital) */
  .pc-arch-card__spacer-top { flex-grow: 0; }
  .pc-arch-card__body { max-height: 400px; opacity: 1; }
  .pc-arch-card__plus { display: none; }
  .pc-arch-card__overlay { background: linear-gradient(to top, rgba(4, 11, 30, 0.95) 0%, rgba(4, 11, 30, 0.6) 100%); }
  .pc-arch-card {
    height:fit-content;
    padding:20px 0px;
    margin-bottom:4px;
}
}



/* ==========================================================================
   24. MÓDULO: STICKY FEATURES (Imagen fija + Tarjetas con Scroll)
   ========================================================================== */
.pc-sticky-features {
  padding: 8rem 0;
  background-color: #ffffff;
}

/* --- Encabezado --- */
.pc-sticky-features__header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 5rem auto;
}

.pc-sticky-features__header .pc-eyebrow {
  color: #333333;
}

.pc-sticky-features__header .pc-heading-xl {
  color: var(--pc-color-navy);
  font-size: clamp(2rem, 4vw, 3.2rem);
}

/* --- Grid Principal --- */
.pc-sticky-features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Mitad y mitad */
  gap: 4rem;
  /* align-items: start es VITAL para que el sticky funcione dentro del grid */
  align-items: start; 
}

/* --- Columna Izquierda (Imagen Fija) --- */
.pc-sticky-features__media {
  /* Hacemos la imagen sticky */
  position: sticky;
  /* El top debe ser mayor a la altura de tu topbar y menú para que no se encimen (ajusta si es necesario) */
  top: 120px; 
  /* Le damos una altura máxima basada en la pantalla del usuario (vh) para que siempre se vea completa */
  height: calc(100vh - 160px); 
  min-height: 500px;
  max-height: 800px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

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

/* --- Columna Derecha (Lista de Tarjetas) --- */
.pc-sticky-features__list {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Espacio entre cada tarjeta */
  /* Le damos un poco de padding inferior para que el usuario pueda scrollear hasta pasar la última tarjeta */
  padding-bottom: 4rem; 
}

/* --- Tarjetas Individuales --- */
.pc-feature-card {
  /* background-color: #ffffff; */
  /* Borde azul muy tenue como en tu diseño */
  border: 1.5px solid #d1e8f5; 
  border-radius: 16px;
  padding: 3rem 2.5rem;
  /* Sombra sutil que aparece solo al hacer hover (opcional, le da buen toque) */
  /* transition: box-shadow 0.3s ease; */
    background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(45deg, #f4faff,#cde7ff) border-box;
    border: 3px solid transparent;

}

/* .pc-feature-card:hover {
  box-shadow: 0 15px 30px rgba(4, 11, 30, 0.05);
} */

.pc-feature-card__title {
  color: var(--pc-color-navy);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.pc-feature-card__text {
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Responsive Móvil --- */
@media (max-width: 992px) {
  .pc-sticky-features__grid {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 3rem;
  }

  .pc-sticky-features__media {
    /* En móvil desactivamos el sticky porque ocupa mucha pantalla */
    position: relative;
    top: 0;
    height: 400px; /* Altura fija para móvil */
  }
}


/* ==========================================================================
   25. MÓDULO: CTA BANNER (Llamado a la acción en bloque)
   ========================================================================== */
.pc-cta-banner {
  padding: 4rem 0; /* Espaciado exterior para separarlo de otras secciones */
}

.pc-cta-banner__card {
  position: relative;
  /* Un azul vibrante como color de respaldo */
  background-color: #0b328f; 
  /* Aquí irá la imagen de fondo de engranajes */
  background-image: url('placeholder-gears.jpg'); 
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 5rem 2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(4, 11, 30, 0.15);
}



.pc-cta-banner__content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* Espacio uniforme entre los elementos */
}

/* Forzamos el color blanco en nuestras clases globales solo para esta tarjeta */
.pc-cta-banner__content .pc-heading-lg {
  color: #ffffff;
  margin: 0;
}

.pc-cta-banner__content .pc-text-body-large {
  color: #e2e8f0; /* Blanco ligeramente grisáceo para descansar la vista */
  margin: 0 0 1rem 0; /* Un poco de margen extra antes del botón */
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pc-cta-banner__card {
    padding: 3.5rem 1.5rem;
    border-radius: 16px;
  }
}

/* ==========================================================================
   26. MÓDULO: BEFORE & AFTER (Tarjetas de Color)
   ========================================================================== */
.pc-before-after {
  padding: 6rem 0;
  background-color: #ffffff;
  text-align: center;
}

/* --- Encabezado --- */
.pc-before-after__header {
  max-width: 900px;
  margin: 0 auto 4rem auto;
}

/* Forzamos colores para empatar con tu diseño */
.pc-before-after__header .pc-eyebrow {
  color: #555555;
}

/* .pc-before-after__header .pc-heading-lg {
  color: var(--pc-color-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
} */

.pc-before-after__header .pc-text-body-large {
  color: #333333;
}

/* --- Grid de 2 Columnas --- */
.pc-before-after__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Tarjetas --- */
.pc-ba-card {
  border-radius: 16px;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
}

/* Modificador: Tarjeta Antes (Rojo) */
.pc-ba-card--before {
  background-color: #fcebeb; /* Fondo rojo pastel */
}

.pc-ba-card--before .pc-ba-card__title {
  color: #c92a2a; /* Rojo fuerte */
}

.pc-ba-card--before .pc-ba-item__icon {
  color: #c92a2a; /* El SVG hereda este color */
}

/* Modificador: Tarjeta Después (Verde) */
.pc-ba-card--after {
  background-color: #e6f9ec; /* Fondo verde menta/pastel */
}

.pc-ba-card--after .pc-ba-card__title {
  color: #0b7a42; /* Verde esmeralda fuerte */
}

.pc-ba-card--after .pc-ba-item__icon {
  color: #0b7a42; /* El SVG hereda este color */
}

/* Título interno de las tarjetas */
.pc-ba-card__title {
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 3rem 0;
  text-align: center;
}

/* --- Lista de Puntos --- */
.pc-ba-list {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Separación entre cada punto */
}

.pc-ba-item {
  display: flex;
  align-items: flex-start; /* Alinea el ícono con la primera línea de texto */
  gap: 1.25rem;
}

/* Contenedor del ícono */
.pc-ba-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* Evita que el ícono se aplaste si hay mucho texto */
  margin-top: 2px; /* Ajuste óptico para alinear con el texto */
}

.pc-ba-item__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor; /* La magia: toma el color del padre (rojo o verde) */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc-ba-item__text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333333;
  margin: 0;
}

/* --- Responsive Móvil --- */
@media (max-width: 992px) {
  .pc-before-after__grid {
    grid-template-columns: 1fr; /* Pasa a 1 sola columna */
    gap: 3rem; /* Más espacio entre tarjetas al apilarse */
  }
  
  .pc-ba-card {
    padding: 3rem 2rem; /* Menos padding lateral en celulares */
  }
}


/* ==========================================================================
   27. MÓDULO: FAQ TABS + ACCORDION (Dark Mode)
   ========================================================================== */
.pc-faq-tabs {
  padding: 8rem 0;
  background-color: var(--pc-color-navy);
  color: var(--pc-text-white);
}

/* --- Encabezado --- */
.pc-faq-tabs__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 5rem auto;
}

.pc-faq-tabs__header .pc-eyebrow {
  color: var(--pc-color-cyan);
}

.pc-faq-tabs__header .pc-heading-lg {
  color: var(--pc-text-white)!important;
  /* margin-bottom: 0; */
}

/* --- Grid Principal (Izquierda: Tabs / Derecha: Acordeones) --- */
.pc-faq-tabs__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 5rem;
  align-items: start;
}

/* --- Columna Izquierda (Categorías / Tabs) --- */
.pc-faq-sidebar__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-text-white);
  margin-bottom: 2rem;
}

.pc-faq-categories {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pc-faq-category-btn {
  background-color: transparent;
  border: 1px solid rgba(125, 232, 245, 0.3); /* Borde cyan semi-transparente */
  color: var(--pc-text-white);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pc-faq-category-btn:hover {
  border-color: var(--pc-color-cyan);
  background-color: rgba(125, 232, 245, 0.05);
}

.pc-faq-category-btn.is-active {
  border-color: var(--pc-color-cyan);
  color: var(--pc-color-cyan);
}

/* --- Columna Derecha (Paneles) --- */
.pc-faq-pane {
  display: none; /* Oculto por defecto */
  animation: fade-in-pane 0.4s ease forwards;
}

.pc-faq-pane.is-active {
  display: block; /* Solo se muestra el activo */
}

@keyframes fade-in-pane {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Acordeón Dark Mode --- */
.pc-dark-acc-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Línea divisoria muy tenue */
}

.pc-dark-acc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--pc-text-white);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Ícono +/- en Cyan */
.pc-dark-acc-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 1.5rem;
}

.pc-dark-acc-icon::before,
.pc-dark-acc-icon::after {
  content: '';
  position: absolute;
  background-color: var(--pc-color-cyan);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 2px;
}

.pc-dark-acc-icon::before { top: 7px; left: 0; width: 16px; height: 2px; } /* Menos */
.pc-dark-acc-icon::after { top: 0; left: 7px; width: 2px; height: 16px; } /* Más */

.pc-dark-acc-item.is-open .pc-dark-acc-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Panel desplegable con Grid */
.pc-dark-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.pc-dark-acc-item.is-open .pc-dark-acc-panel {
  grid-template-rows: 1fr;
}

.pc-dark-acc-content {
  overflow: hidden;
}

.pc-dark-acc-content p {
  padding: 0 0 1.5rem 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pc-text-light-gray);
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-faq-tabs__grid {
    grid-template-columns: 1fr; /* Apilado en móvil */
    gap: 3rem;
  }
  
  .pc-faq-sidebar__title {
    text-align: center;
  }

  .pc-faq-categories {
    flex-direction: row; /* Botones en fila horizontal */
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .pc-faq-category-btn {
    text-align: center;
    padding: 0.75rem 1.25rem;
  }
}


/* ==========================================================================
   28. MÓDULO: CTA SPLIT (Bento Box Asimétrico)
   ========================================================================== */
.pc-cta-split {
  padding: 6rem 0;
  background-color: #ffffff; /* Ajustar si el fondo de tu página es distinto */
}

/* --- Grid Principal --- */
.pc-cta-split__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr; /* Columna izquierda un poco más ancha */
  gap: 1.5rem;
  /* max-width: 1200px; */
  margin: 0 auto;
}

/* --- Cajas Base --- */
.pc-cta-split__box {
  border-radius: 16px;
  padding: 4rem 3rem;
  display: flex;
  flex-direction: column;
}

/* Caja Azul Izquierda */
.pc-cta-split__box--blue {
  background-color: #1744ab; /* Azul vibrante */
  color: #ffffff;
  justify-content: space-between; /* Empuja el eyebrow arriba y el título abajo */
  min-height: 400px; /* Asegura una altura generosa */
}

/* Forzamos colores blancos para tipografía global en esta caja */
.pc-cta-split__box--blue .pc-eyebrow {
  color: #ffffff;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
}

.pc-cta-split__box--blue .pc-heading-xl {
  color: #ffffff;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

/* --- Columna Derecha (Caja oscura y botones) --- */
.pc-cta-split__actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* Espaciado uniforme entre caja y botones */
  height: 100%;
}

/* Caja Oscura de Texto */
.pc-cta-split__box--dark {
  background-color: var(--pc-color-navy);
  padding: 3rem 2.5rem;
  flex-grow: 1; /* Hace que llene el espacio disponible arriba de los botones */
  justify-content: center;
}

.pc-cta-split__box--dark p {
  color: #e2e8f0;
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
}

.pc-cta-split__box--dark p:last-child {
  margin-bottom: 0;
}

/* --- Botones Bloque (Full width) --- */
.pc-btn--block {
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 2rem;
  font-size: 1.125rem;
  border-radius: 16px; /* Borde más redondeado para encajar en el estilo Bento */
  text-align: center;
  /* color: var(--pc-color-navy); */
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-cta-split__grid {
    grid-template-columns: 1fr; /* Una sola columna en móviles */
    gap: 1.25rem;
  }
  
  .pc-cta-split__box {
    padding: 3rem 2rem;
    min-height: auto;
  }
  
  .pc-cta-split__box--blue .pc-eyebrow {
    margin-bottom: 1.5rem;
  }
}


/* ==========================================================================
   29. MÓDULO: BLOG CAROUSEL (Dinámico + Corrección Grid/Swiper)
   ========================================================================== */
.pc-blog-carousel {
  padding: 6rem 0;
  background-color: #f8fafc; 
  overflow: hidden; 
}

/* --- Grid Principal --- */
.pc-blog-carousel__grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: 4rem;
  align-items: start;
}

/* --- Columna Izquierda (Info Estática) --- */
.pc-blog-carousel__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pc-blog-carousel__info .pc-eyebrow {
  color: #555555;
  margin-bottom: 1rem;
}

/* .pc-blog-carousel__info .pc-heading-lg {
  color: var(--pc-color-navy);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
} */

.pc-blog-carousel__info .pc-text-body-large {
  color: #333333;
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

/* --- Columna Derecha (Carrusel Swiper) --- */
.pc-blog-swiper-wrapper {
  /* ¡LA MAGIA ESTÁ AQUÍ! Evita que el grid explote el ancho del swiper */
  min-width: 0; 
  width: 100%;
}

.pc-blog-swiper {
  width: 100%;
  overflow: hidden !important; /* Permite que se asome la siguiente tarjeta */
  padding-bottom: 4rem !important;
}

/* --- Tarjeta de Blog Individual --- */
.pc-blog-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
}

.pc-blog-card__image {
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: var(--pc-color-navy); /* Placeholder oscuro */
  display: block;
}

.pc-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pc-blog-card:hover .pc-blog-card__image img {
  transform: scale(1.05);
}

.pc-blog-card__category {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--pc-color-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.pc-blog-card__title {
  font-size: 1.5rem;
  /* font-weight: 800; */
  /* color: var(--pc-color-navy); */
  line-height: 1.3;
  margin: 0 0 1rem 0;
  /* Limitar a 3 líneas con puntos suspensivos */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-blog-card__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
  margin: 0 0 1.5rem 0;
  /* Limitar el extracto a 3 líneas para que las tarjetas se vean parejas */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-blog-card__link {
  font-size: 1.125rem;
  font-weight: 800;
  color: #ff0055; 
  text-decoration: none;
  margin-top: auto; 
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s ease;
}

.pc-blog-card__link:hover {
  opacity: 0.8;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-blog-carousel__grid {
    grid-template-columns: 1fr; 
    gap: 3rem;
  }
}


/* ==========================================================================
   SISTEMA DE ANIMACIONES AL HACER SCROLL (Nativo)
   ========================================================================== */

/* Estado inicial (invisible y desplazado hacia abajo) */
.pc-animate {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity; /* Optimización para el navegador */
  transition: opacity 0.9s ease, 
              transform 0.9s ease;
}

/* Modificadores del tipo de animación */
.pc-animate--fade-up {
  transform: translateY(40px);
}

.pc-animate--fade-in {
  transform: translateY(0); /* Solo cambia la opacidad */
}

/* El estado final cuando entra en pantalla (El JS añade esta clase) */
.pc-animate.is-in-view {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Retrasos (Delays) para animar tarjetas en cascada (Stagger effect) */
.pc-delay-100 { transition-delay: 100ms; }
.pc-delay-200 { transition-delay: 200ms; }
.pc-delay-300 { transition-delay: 300ms; }
.pc-delay-400 { transition-delay: 400ms; }



/* BLOG */
/* ==========================================================================
   30. PÁGINA DE BLOG: HERO, FILTROS Y GRID
   ========================================================================== */

/* --- HERO BANNER --- */
.pc-blog-hero {
  background-color: var(--pc-color-navy);
  background-image: url('https://picassots.com.mx/wp-content/uploads/2026/04/M6_Img.png');
  padding: 6rem 0 4rem 0;
  color: #ffffff;
}

.pc-blog-hero__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* El H1 para SEO (Actúa como Eyebrow visualmente) */
.pc-blog-hero__h1 {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--pc-color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

/* Título del artículo destacado */
.pc-blog-hero__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 1.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc-blog-hero__excerpt {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--pc-text-light-gray);
  margin: 0 0 2rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Límite de 2 líneas que pediste */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Imagen del Hero */
.pc-blog-hero__media {
  width: 100%;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.pc-blog-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pc-blog-hero__media:hover img {
  transform: scale(1.05);
}

/* Etiqueta flotante de categoría en la imagen */
.pc-blog-hero__cat-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background-color: var(--pc-color-cyan);
  color: var(--pc-color-navy);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  z-index: 2;
}

/* --- BARRA DE FILTROS --- */
.pc-blog-filters {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.5rem 0;
  position: sticky;
  top: 0; /* Se ajustará si tienes un header fijo */
  z-index: 100;
}

.pc-blog-filters-list {
  display: flex;
  gap: 1rem;
  align-items: center;
  /* Configuración para scroll horizontal en móviles */
  overflow-x: auto;
  scrollbar-width: none; /* Ocultar scrollbar Firefox */
  -ms-overflow-style: none; /* Ocultar scrollbar IE/Edge */
  padding-bottom: 5px; /* Espacio para que no se corte la sombra si hubiera */
}

.pc-blog-filters-list::-webkit-scrollbar {
  display: none; /* Ocultar scrollbar Chrome/Safari */
}

.pc-filter-btn {
  white-space: nowrap; /* Evita que el texto del botón se parta en dos líneas */
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  background-color: #f1f5f9;
  color: #333333;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pc-filter-btn:hover,
.pc-filter-btn.is-active {
  background-color: var(--pc-color-navy);
  color: #ffffff;
}

/* --- GRID DE ENTRADAS --- */
.pc-blog-archive {
  padding: 5rem 0;
  background-color: #f8fafc;
}

.pc-blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-blog-hero__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .pc-blog-hero__media {
    height: 300px;
  }

  .pc-blog-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pc-blog-archive__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   31. PÁGINA DE ARTÍCULO (Single Post)
   ========================================================================== */

/* --- 1. HERO BANNER --- */
.pc-single-hero {
  background-color: var(--pc-color-navy);
  padding: 8rem 0 6rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de luz sutil en el fondo */
.pc-single-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 80vw; height: 80vw;
  background: radial-gradient(circle, rgba(23,68,171,0.15) 0%, rgba(4,11,30,0) 70%);
  pointer-events: none;
}

.pc-single-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.pc-single-hero__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.pc-single-hero__category {
  background-color: var(--pc-color-cyan);
  color: var(--pc-color-navy);
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pc-single-hero__date {
  color: var(--pc-text-light-gray);
  font-size: 1rem;
  font-weight: 500;
}

.pc-single-hero__title {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}

/* --- 2. LAYOUT DEL CONTENIDO (Grid Asimétrico) --- */
.pc-single-layout {
  padding: 5rem 0;
  background-color: #ffffff;
}

.pc-single-layout__grid {
  display: grid;
  grid-template-columns: 1fr 300px; /* Contenido a la izquierda, Índice a la derecha */
  gap: 6rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 3. MENÚ LATERAL (Sticky ToC Corregido) --- */

/* LA MAGIA: El sticky debe ir en el contenedor directo del grid (wrapper) */
.pc-toc-wrapper {
  position: sticky;
  top: 120px; /* Ajusta si tu header es más alto o más bajo */
  align-self: start; /* Vital para que el sticky funcione dentro del Grid */
  height: max-content; /* Asegura que calcule bien su altura */
  z-index: 10;
}

.pc-toc-sidebar__title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--pc-color-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.pc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 2px solid #e2e8f0;
}

.pc-toc-list a {
  display: block;
  text-decoration: none;
  color: #555555;
  font-size: 0.95rem;
  line-height: 1.4;
  padding-left: 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: all 0.3s ease;
}

.pc-toc-list a:hover {
  color: var(--pc-color-navy);
}

.pc-toc-list a.is-active {
  color: #ff0055;
  font-weight: 700;
  border-left-color: #ff0055;
}

/* --- Ajuste Responsive --- */
@media (max-width: 992px) {
  .pc-toc-wrapper {
    /* En móviles lo desactivamos para que no tape la lectura */
    position: relative;
    top: 0;
    align-self: auto;
    order: -1; 
  }
  
  .pc-toc-sidebar {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 16px;
  }
}

/* --- 4. ESTILOS DE GUTENBERG (Tipografía y Bloques) --- */
.pc-single-content__body {
  max-width: 750px; /* Ancho de lectura óptimo */
  margin: 0 auto;
  font-size: 1.125rem; /* Letra un poco más grande para lectura cómoda */
  line-height: 1.8;
  color: #333333;
}

/* Títulos generados en Gutenberg */
.pc-single-content__body h2,
.pc-single-content__body h3,
.pc-single-content__body h4 {
  color: var(--pc-color-navy);
  font-weight: 800;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  /* El secreto para los anclajes: Al hacer click en el índice, el título frena 120px antes del borde superior */
  scroll-margin-top: 120px; 
}

.pc-single-content__body h2 { font-size: 2.25rem; }
.pc-single-content__body h3 { font-size: 1.75rem; }
.pc-single-content__body h4 { font-size: 1.25rem; }

/* Párrafos y listas */
.pc-single-content__body p { margin-bottom: 1.5rem; }

.pc-single-content__body ul,
.pc-single-content__body ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.pc-single-content__body li {
  margin-bottom: 0.5rem;
}

/* Enlaces dentro del texto */
.pc-single-content__body a {
  color: #ff0055;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: opacity 0.3s ease;
}

.pc-single-content__body a:hover {
  opacity: 0.8;
}

/* Citas (Blockquotes) */
.pc-single-content__body blockquote {
  margin: 2.5rem 0;
  padding: 2rem;
  background-color: #f8fafc;
  border-left: 4px solid var(--pc-color-cyan);
  border-radius: 0 16px 16px 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--pc-color-navy);
}

.pc-single-content__body blockquote p { margin: 0; }

/* Imágenes nativas de WP */
.pc-single-content__body img,
.pc-single-content__body figure {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 2.5rem 0;
}

.pc-single-content__body figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: #777;
  margin-top: 0.5rem;
}

/* Botones nativos de Gutenberg */
.pc-single-content__body .wp-block-button__link {
  background-color: var(--pc-color-navy);
  color: #ffffff !important;
  text-decoration: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.pc-single-content__body .wp-block-button__link:hover {
  background-color: #0a183d;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pc-single-layout__grid {
    grid-template-columns: 1fr; /* Una sola columna */
    gap: 3rem;
  }
  
  /* En móviles, movemos el índice arriba del contenido pero evitamos que sea sticky para que no estorbe */
  .pc-toc-sidebar {
    position: relative;
    top: 0;
    order: -1; /* Pasa el índice arriba visualmente */
    background: #f8fafc;
    padding: 2rem;
    border-radius: 16px;
  }
}

/* ==========================================================================
   MÓDULO ZIGZAG PERFECCIONADO (CLON EXACTO MOCKUP)
   ========================================================================== */

.pc-mod-wrap { 
    font-family: 'Outfit', sans-serif; 
    background: linear-gradient(180deg, #f3faff 0%, #ffffff 20%); 
    padding: 6rem 0 8rem 0; 
    overflow: hidden; 
}

/* 1. CONTENEDOR MÁS ANCHO (Ocupa casi toda la pantalla) */
.pc-mod-container { 
    width: 92%; 
    max-width: 1350px; /* Aumentado de 1100 a 1350 para igualar el mockup */
    margin: 0 auto; 
}

/* Grid ZigZag: Alineación al inicio */
.pc-zz-row { 
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    gap: 8%; 
    margin-bottom: 7rem; 
}

.pc-zz-row.reverse { 
    flex-direction: row-reverse; 
}

.pc-zz-col-img, .pc-zz-col-txt { 
    width: 46%; 
    flex-shrink: 0; 
}

/* Imágenes adaptadas al alto (al ser el contenedor más ancho, la imagen crece) */
.pc-zz-img { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    border-radius: 24px; 
    box-shadow: 0 15px 35px rgba(4,11,30,0.08); 
    display: block; 
    object-fit: cover; 
}

/* Tipografía */
.pc-zz-eyebrow { 
    color: #57c9f8; 
    font-size: 0.85rem; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    display: block; 
    margin-bottom: 1rem; 
    text-align: left; 
}

.pc-zz-title { 
    font-size: 2.2rem; 
    font-weight: 800; 
    color: #040b1e; 
    line-height: 1.2; 
    margin: 0 0 2.5rem 0; 
}

/* 2. TÍTULOS TARJETA 2 Y 3 (Más grandes y con buen margen inferior) */
.pc-zz-subtitle { 
    font-size: 2.2rem; /* Aumentado a 2.2rem para que tenga el peso del mockup */
    font-weight: 800; 
    color: #040b1e; 
    line-height: 1.2;
    margin: 0 0 2.5rem 0; /* Mayor espacio para respirar antes de la lista */
    text-transform: none; 
}

.pc-zz-desc { 
    font-size: 1.05rem; 
    line-height: 1.6; 
    color: #333333; 
    margin-bottom: 2rem; 
    font-weight: 400; 
}

/* Listas Tarjeta 2 */
.pc-zz-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    max-width: 95%; /* Para que los saltos de línea coincidan */
}

.pc-zz-list li { 
    display: flex; 
    align-items: flex-start; 
    gap: 14px; /* Espacio ideal entre el punto y el texto */
    margin-bottom: 1.5rem; 
    font-size: 1.05rem; 
    color: #333333; 
    line-height: 1.6; 
    font-weight: 400; 
} 

/* Viñeta redonda clásica (Alineada al texto) */
.pc-zz-list li::before { 
    content: "•"; 
    color: #040b1e; /* Punto oscuro */
    font-size: 1.5rem; /* Tamaño correcto del punto */
    line-height: 1; /* Resetea la altura para no deformar */
    margin-top: 2px; /* Empuja el punto sutilmente hacia abajo para alinear al centro de la línea */
    flex-shrink: 0;
}

/* 3. LISTAS TARJETA 3 (Separación compacta) */
.pc-zz-dots { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.pc-zz-dots li { 
    display: block; 
    margin-bottom: 0.3rem; /* Reducido de 0.8 a 0.3 para juntarlos */
    font-size: 1.05rem; 
    color: #333333; 
    font-weight: 400; 
}

/* Botón Cyan Medio */
.pc-zz-btn-cyan { 
    display: inline-block; 
    background-color: #8afcff; 
    color: #040b1e; 
    font-weight: 700; 
    padding: 0.8rem 1.8rem; 
    border-radius: 6px; 
    text-decoration: none; 
    transition: all 0.3s ease; 
    margin-top: 1.2rem; 
    font-size: 0.95rem; 
}

.pc-zz-btn-cyan:hover { 
    background-color: #61d9e2; 
    transform: translateY(-2px); 
}

/* 4. Botón Final Magenta */
.pc-zz-final-cta-wrap { 
    text-align: center; 
    margin-top: 5rem; 
    width: 100%; 
}

.pc-zz-btn-magenta { 
    display: inline-block; 
    background-color: #e2004d; 
    color: #ffffff; 
    font-weight: 700; 
    padding: 1rem 2.5rem; 
    border-radius: 6px; 
    text-decoration: none; 
    transition: all 0.3s ease; 
    font-size: 1.1rem; 
    box-shadow: 0 10px 25px rgba(226, 0, 77, 0.15); 
}

.pc-zz-btn-magenta:hover { 
    background-color: #c0003e; 
    transform: translateY(-3px); 
    box-shadow: 0 15px 30px rgba(226, 0, 77, 0.2); 
}

/* ==========================================================================
   5. AJUSTES EXCLUSIVOS TARJETA 1
   ========================================================================== */

/* Centrar verticalmente solo la primera tarjeta */
.pc-zz-row:first-child {
    align-items: center;
}

/* Eyebrow de la tarjeta 1: color azul oscuro */
.pc-zz-row:first-child .pc-zz-eyebrow {
    color: #040b1e; 
}

/* Título de la tarjeta 1: tipografía más delgada */
.pc-zz-row:first-child .pc-zz-title {
    font-weight: 700; /* Si la quieres aún más delgada, cámbialo a 600 */
}

/* Responsive */
@media (max-width: 992px) {
    .pc-mod-wrap { 
        padding: 4rem 0 6rem 0; 
    }
    .pc-zz-row, .pc-zz-row.reverse { 
        flex-direction: column; 
        gap: 3rem; 
        margin-bottom: 5rem; 
    }
    .pc-zz-col-img, .pc-zz-col-txt { 
        width: 100%; 
    }
    .pc-zz-title, .pc-zz-subtitle { 
        font-size: 1.8rem; 
    }
}

/* ==========================================================================
   ESTILOS DEL BANNER PRINCIPAL (ADAPTADO AL ECOSISTEMA GLOBAL)
   ========================================================================== */

/* 1. Título H1: Blanco, extra bold y en mayúsculas */
.pc-hero-heading {
    color: var(--pc-text-white) !important;
    font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    /* AUMENTAMOS EL ANCHO MÁXIMO para que fluya en menos líneas como el mockup */
    max-width: 1250px !important; 
    margin: 0 auto 1.5rem auto !important;
    text-transform: uppercase !important;
}

/* 2. Descripción: Gris claro, centrada y con buen interlineado */
.pc-hero-desc,
.pc-hero-desc p {
    color: var(--pc-text-light-gray) !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    /* AUMENTAMOS EL ANCHO MÁXIMO para que el párrafo se estire */
    max-width: 950px !important; 
    margin: 0 auto 2.5rem auto !important;
    font-weight: 400 !important;
}

/* 3. Botón: Ajuste fino para igualar el mockup */
.pc-hero-main a {
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   RESPONSIVE: BANNER PRINCIPAL EN MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Evitar que el menú tape el texto y darle más espacio vertical */
    .pc-hero-main {
        /* padding-top: 100px !important;  */
        min-height: 90vh !important;
        background-position: center !important; /* Centramos el fondo para que no se corte feo */
    }

    /* 2. Reducir el H1 para que fluya mejor y no asfixie la pantalla */
    .pc-hero-heading {
        font-size: 2rem !important; 
        line-height: 1.2 !important;
        margin-bottom: 1.2rem !important;
    }

    /* 3. Ajustar el párrafo descriptivo */
    .pc-hero-desc,
    .pc-hero-desc p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
        padding: 0 10px !important; /* Un poquito de margen a los lados */
    }

    /* 4. Arreglar el botón: ancho controlado y texto centrado */
    .pc-hero-main a {
        font-size: 1rem !important;
        padding: 1rem !important;
        width: 100% !important; 
        max-width: 320px !important; /* Evita que ocupe de orilla a orilla */
        white-space: normal !important; /* Permite que el texto se acomode suavemente */
        line-height: 1.3 !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}


/* ==========================================================================
   32. MÓDULO: SERIES DE CARACTERÍSTICAS (3 Bloques Conectados)
   ========================================================================== */
.pc-feature-series {
  padding: 8rem 0;
  overflow: hidden;
  background: linear-gradient(0deg, #e0f1ff, #ffffff,#eff8ff );
}

/* --- Fila Individual --- */
.pc-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 8rem; /* Espaciado generoso entre bloques en PC */
}

/* El último bloque no necesita margen inferior */
.pc-feature-row:last-child {
  margin-bottom: 0;
}



/* --- Contenido (Textos) --- */
.pc-feature-row__content {
  display: flex;
  flex-direction: column;
}

.pc-feature-row__content .pc-eyebrow {
  color: #000;
}

.pc-feature-row__content .pc-heading-lg {
text-transform: none!important;
}

.pc-feature-row__content .pc-text-body-large {
  color: #333333;
  margin-bottom: 2rem;
}

.pc-feature-row__subtitle {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--pc-color-navy);
  margin-bottom: 1rem;
}

/* Lista personalizada con viñetas azules */
.pc-feature-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pc-feature-row__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333333;
}

.pc-feature-row__list li::before {
  content: '•';
  color: var(--pc-color-navy);
  position: absolute;
  left: 0;
  font-size: 1.5rem;
  line-height: 1;
  top: -2px; /* Ajuste óptico para alinear con el texto */
}

/* --- Media (Imagen y Botón) --- */
.pc-feature-row__media {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el botón debajo de la imagen */
  gap: 2.5rem; /* Espacio entre imagen y botón */
}

.pc-feature-row__image {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(4, 11, 30, 0.08);
  overflow: hidden;
}

.pc-feature-row__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- Responsive Móvil (Conexión Visual) --- */
@media (max-width: 992px) {
  .pc-feature-series {
    padding: 5rem 0;
  }

  .pc-feature-row {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 5rem; /* Reducimos la separación para que se sientan conectados */
    padding-bottom: 5rem;
    border-bottom: 1px solid rgba(4, 11, 30, 0.1); /* Línea divisoria muy tenue */
  }

  .pc-feature-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* Forzamos a que el texto SIEMPRE vaya arriba en móviles, anulando el reverse */
  .pc-feature-row--reverse .pc-feature-row__content { order: 1; }
  .pc-feature-row--reverse .pc-feature-row__media { order: 2; }
}


/* ==========================================================================
   HEADER DOBLE NIVEL (Sobrepuesto / Absolute)
   ========================================================================== */
.pc-site-header {
  position: absolute; /* LA MAGIA: Esto hace que se sobreponga al Hero */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent
}

/* --- 1. TOPBAR --- */
.pc-topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 50px; */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pc-text-white);
  letter-spacing: 0.05em;
  padding: 10px 0px!important;
}

.pc-topbar__right {
  display: flex;
  gap: 2.5rem;
}

.pc-topbar__contact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--pc-color-cyan);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.pc-topbar__contact:hover {
  opacity: 0.8;
}

/* Iconos PNG listos */
.pc-topbar__contact img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* La línea divisoria Cyan con gradiente (estilo futurista) */
.pc-topbar__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(125,232,245,0) 0%, rgba(125,232,245,0.6) 50%, rgba(125,232,245,0) 100%);
}

/* --- 2. NAVBAR PRINCIPAL --- */
.pc-navbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px!important;
  /* height: 100px; */
}
.pc-navbar__logo a{
  display: flex;
  text-decoration: none;
  align-items: center;
}
.pc-navbar__logo img {
  height: 45px;
  width: auto;
  display: block;
}
.pc-navbar__logo .logo-text {
  color:white;
  display: none;
}
.pc-navbar__logo a{
    height:80px;
}

.pc-navbar__logo a{
    gap:10px;
}
.pc-navbar__logo img{
    height:100%;
}
@media screen and (min-width:1300px){
  .pc-navbar__logo a{
    height:80px;
}
  .pc-navbar__logo .logo-text {
    display: block!important;
  }
}
@media screen and (min-width:1500px){
  .pc-navbar__logo a{
    height:100px;
  }
}

/* Menú WP */
.pc-navbar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Configurado para soportar 2 líneas de texto */
.pc-navbar__menu li a {
  color: var(--pc-text-white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  display: block;
  transition: color 0.3s ease;
}

.pc-navbar__menu li a:hover,
.pc-navbar__menu li.current-menu-item a {
  color: var(--pc-color-cyan);
}

.pc-navbar__mobile-cta {
  display: none;
}

/* --- 3. ACCIONES Y HAMBURGUESA --- */
.pc-navbar__actions {
  display: flex;
  align-items: center;
}

.pc-header__toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1001;
}

.pc-header__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.pc-header__toggle span:nth-child(1) { top: 0; }
.pc-header__toggle span:nth-child(2) { top: 11px; }
.pc-header__toggle span:nth-child(3) { top: 22px; }

.pc-header__toggle.is-active span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.pc-header__toggle.is-active span:nth-child(2) { opacity: 0; }
.pc-header__toggle.is-active span:nth-child(3) { transform: rotate(-45deg); top: 11px; }

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
  .pc-navbar__menu { gap: 1.5rem; }
}

@media (max-width: 992px) {
  /* .pc-topbar { display: none; } */
  .pc-topbar .pc-topbar__inner{
    width:100%!important;
    padding:0px!important;
}
p.pc-topbar__text {
    font-size:14px!important;
}
  .pc-navbar__inner { height: 80px; }
  .pc-navbar__desktop-cta { display: none; }
  .pc-header__toggle { display: block; }
  
  .pc-navbar__nav {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: rgba(4, 11, 30, 0.98);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3rem;
    transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .pc-navbar__nav.is-open { left: 0; }

  .pc-navbar__menu {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .pc-navbar__menu li a { font-size: 1.25rem; }
  .pc-navbar__mobile-cta { display: inline-flex; }
}

.pc-hero-main.dark-overlay:after{
    background:linear-gradient(180deg, #06081d 10%, #06081dc4 100%);
    content:"";
    height:100%;
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
}


/* ==========================================================================
   4. SUBMENÚS Y DESPLEGABLES NATIVOS (WordPress)
   ========================================================================== */

/* El elemento padre necesita saber que tiene un menú flotante adentro */
.pc-navbar__menu .menu-item-has-children {
  position: relative;
  /* Opcional: espaciado para que el mouse no "pierda" el menú al bajar */
  padding-bottom: 10px; 
  margin-bottom: -10px;
}

/* Indicador visual (flechita) para el usuario de que hay un submenú */
.pc-navbar__menu .menu-item-has-children > a::after {
  content: ' ▼';
  font-size: 0.6rem;
  vertical-align: middle;
  opacity: 0.7;
}

/* --- LA CAJA DEL SUBMENÚ --- */
.pc-navbar__menu .sub-menu {
  position: absolute;
  top: 100%; /* Justo debajo de la palabra */
  left: 50%;
  transform: translateX(-50%) translateY(15px); /* Centrado y un poco abajo para la animación */
  min-width: 260px;
  background-color: rgba(4, 11, 30, 0.98); /* Tu azul corporativo */
  border-top: 3px solid var(--pc-color-cyan); /* Acento futurista */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 1rem 0;
  margin: 0;
  list-style: none;
  border-radius: 0 0 8px 8px;
  
  /* Magia de la animación (Oculto por defecto) */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1000;
}

/* Mostrar el submenú cuando el mouse pasa por el padre */
.pc-navbar__menu .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --- ENLACES DENTRO DEL SUBMENÚ --- */
.pc-navbar__menu .sub-menu li a {
  text-align: left; /* Volvemos a la izquierda para mejor lectura */
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  display: block;
  color: #ffffff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Quitar la flechita en los sub-niveles por si acaso */
.pc-navbar__menu .sub-menu li a::after {
  display: none;
}

/* Efecto Hover en los enlaces del desplegable */
.pc-navbar__menu .sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.05); /* Resalte sutil */
  color: var(--pc-color-cyan);
}

/* --- COMPORTAMIENTO MÓVIL --- */
@media (max-width: 992px) {
  /* Anulamos la posición absoluta en celular para que empuje el contenido hacia abajo */
  .pc-navbar__menu .sub-menu {
    position: static;
    transform: none;
    background-color: rgba(0, 0, 0, 0.2); /* Fondo más oscuro para diferenciar */
    border-top: none;
    box-shadow: none;
    width: 100%;
    margin-top: 1rem;
    padding: 0.5rem 0;
    display: none; /* Oculto por defecto en móvil */
    opacity: 1;
    visibility: visible;
  }
  
  /* Al hacer "Tap" en el móvil, mostramos el menú nativo */
  .pc-navbar__menu .menu-item-has-children:hover > .sub-menu,
  .pc-navbar__menu .menu-item-has-children:active > .sub-menu,
  .pc-navbar__menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
  
  .pc-navbar__menu .sub-menu li a {
    text-align: center;
    font-size: 1.1rem;
  }
}



/* ==========================================================================
   33. PÁGINA DE CONTACTO (Hero, Chatbot y Forminator)
   ========================================================================== */

/* --- 1. HERO BANNER --- */
.pc-contact-hero {
  position: relative;
  background-color: var(--pc-color-navy);
  padding: 12rem 0 8rem 0; /* Espacio extra arriba por tu nuevo Header sobrepuesto */
  overflow: hidden;
}

/* Efecto de luz futurista de fondo (similar a OCI) */
.pc-contact-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw; height: 100%;
  background: radial-gradient(ellipse at top, rgba(125, 232, 245, 0.15) 0%, rgba(4, 11, 30, 0) 60%);
  pointer-events: none;
}

.pc-contact-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.pc-contact-hero__h1 {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--pc-color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}

.pc-contact-hero__title {
  color: #ffffff;
  font-size: clamp(2.5rem, 6vw, 4.5rem); /* Tipografía masiva */
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 2rem;
}

.pc-contact-hero__text {
  font-size: 1.25rem;
  color: var(--pc-text-light-gray);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* --- 2. MÓDULO CHATBOT --- */
.pc-contact-chatbot {
  background-color: var(--pc-color-navy); /* Continuamos el dark mode */
  /* padding-bottom: 6rem; */
}

.pc-contact-chatbot__card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(125, 232, 245, 0.2);
  border-radius: 24px;
  padding: 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.pc-contact-chatbot__icon {
  width: 80px;
  height: 80px;
  background-color: #ff0055;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2rem auto;
  box-shadow: 0 10px 20px rgba(255, 0, 85, 0.3);
}

.pc-contact-chatbot__title {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.pc-contact-chatbot__text {
  color: var(--pc-text-light-gray);
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

/* --- 3. MÓDULO FORMULARIO --- */
.pc-contact-form-section {
  background-color: #f8fafc;
  padding: 6rem 0;
}

.pc-contact-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* Asimétrico: Info izquierda, Form derecha */
  gap: 4rem;
  align-items: start;
}

.pc-contact-form-section__info h3 {
  color: var(--pc-color-navy);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.pc-contact-form-section__info p {
  color: #555555;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --- 4. SECUESTRO DE ESTILOS FORMINATOR --- */
/* (Asegúrate de configurar Forminator en "Estilo: Ninguno" o "Default" en su panel) */
.pc-contact-form-wrapper form{
    padding:30px!important;
}

.pc-contact-form-wrapper .forminator-ui.forminator-custom-form {
  background: #ffffff;
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(4, 11, 30, 0.05);
  font-family: inherit;
}

.pc-contact-form-wrapper .forminator-label {
  font-weight: 700 !important;
  color: var(--pc-color-navy) !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.5rem !important;
}

.pc-contact-form-wrapper .forminator-input,
.pc-contact-form-wrapper .forminator-textarea,
.pc-contact-form-wrapper .forminator-select .selection > span{
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  color: #333 !important;
  background-color: #f9fafb !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Efecto Focus en inputs */
.pc-contact-form-wrapper .forminator-input:focus,
.pc-contact-form-wrapper .forminator-textarea:focus {
  border-color: var(--pc-color-cyan) !important;
  box-shadow: 0 0 0 3px rgba(125, 232, 245, 0.2) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

/* Radio buttons y Checkboxes */
.pc-contact-form-wrapper .forminator-radio,
.pc-contact-form-wrapper .forminator-checkbox {
  margin-bottom: 0.5rem !important;
}

/* El botón de enviar convertido a tu botón Fucsia */
.pc-contact-form-wrapper .forminator-button-submit {
  background-color: #ff0055 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 1rem 2.5rem !important;
  border-radius: 50px !important;
  font-size: 1.125rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  width: auto !important;
  margin-top: 1rem !important;
}

.pc-contact-form-wrapper .forminator-button-submit:hover {
  background-color: #cc0044 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(255, 0, 85, 0.2) !important;
}

/* Responsive del formulario */
@media (max-width: 992px) {
  .pc-contact-form-section__grid {
    grid-template-columns: 1fr;
  }
  .pc-contact-form-wrapper .forminator-ui.forminator-custom-form {
    padding: 2rem;
  }
}

/* ==========================================================================
   34. PÁGINAS LEGALES (Aviso de Privacidad, Términos, etc.)
   ========================================================================== */
.pc-legal-hero {
  background-color: var(--pc-color-navy);
  padding: 12rem 0 6rem 0; /* El padding top alto es para que tu header flotante no lo tape */
  text-align: center;
  position: relative;
  border-bottom: 4px solid var(--pc-color-cyan); /* Acento sutil corporativo */
}

.pc-legal-hero__title {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  margin: 1rem 0;
}

.pc-legal-hero__date {
  color: var(--pc-text-light-gray);
  font-size: 1rem;
  font-weight: 500;
}

.pc-legal-content {
  padding: 5rem 0 8rem 0;
  background-color: #ffffff;
}

/* Opcional: Centrar la columna de texto legal para que quede perfectamente alineada */
.pc-legal-page .pc-single-content__body {
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   MÓDULO: HERO BANNER NOSOTROS (Alineado a la Izquierda) - AJUSTADO V2
   ========================================================================== */
.pc-hero-about {
    position: relative;
    min-height: 90vh; /* Altura imponente */
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--pc-color-navy);
}
section.pc-hero-about .pc-container{
    padding-top:100px;
}

.pc-hero-about__bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    z-index: 1;
}

/* Gradiente horizontal: AJUSTE - Significativamente más fuerte y azul en el centro para contraste máximo */
.pc-hero-about__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Subimos la opacidad en todos los puntos (0.98, 0.92, 0.85) y añadimos uno extra para saturar. */
    background: linear-gradient(90deg, rgba(4,11,30,0.98) 0%, rgba(4,11,30,0.92) 20%, rgba(4,11,30,0.85) 55%, rgba(4,11,30,0.3) 100%);
    z-index: 2;
}

.pc-hero-about__container {
    position: relative;
    z-index: 3;
    /* width: 100%; */
}

.pc-hero-about__content {
    max-width: 650px; /* Limita el texto solo a la mitad izquierda de la pantalla */
    text-align: left;
    padding-top: 80px; /* Espacio para librar el header flotante */
}

/* Tipografía adaptada al mockup */
.pc-hero-about__eyebrow {
    color: #e2e8f0; /* Gris claro, no cyan en esta ocasión */
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: left;
}

.pc-hero-about__title {
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 2rem;
}

.pc-hero-about__desc p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.pc-hero-about__btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 6px;
    text-transform: none;
    font-weight: 700;
}

/* --- Responsive para Móviles --- */
@media (max-width: 992px) {
    .pc-hero-about {
        min-height: 85vh;
        padding-top: 50px;
    }
    
    .pc-hero-about__overlay {
        /* En celular el texto ocupa todo, así que oscurecemos todo parejo con un gradiente vertical */
        background: linear-gradient(180deg, rgba(4,11,30,0.85) 0%, rgba(4,11,30,0.95) 100%);
    }
    
    .pc-hero-about__content {
        max-width: 100%;
        text-align: center; /* En celular, siempre es mejor centrar todo */
        padding: 0 15px;
    }

    .pc-hero-about__eyebrow {
        text-align: center;
        font-size: 0.8rem;
    }

    .pc-hero-about__title {
        font-size: 2.2rem !important; /* Más manejable en móvil */
    }
}

/* ==========================================================================
   MÓDULO: EXPERIENCIA Y SECTORES (Fichas Gigantes)
   ========================================================================== */
.pc-experiencia-section {
    padding: 8rem 0;
    background-color: #ffffff; /* Fondo blanco para hacer contraste con las tarjetas celestes */
}

.pc-experiencia-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem; /* Separación vertical entre las fichas */
}

/* --- La Tarjeta Gigante --- */
.pc-exp-card {
    background-color: var(--pc-color-light-blue); 
    border-radius: 40px; 
    /* Reducimos el padding exterior para que la imagen se estire casi hasta el borde */
    padding: 1.5rem; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    /* LA MAGIA AQUÍ: Obliga a ambas columnas a tener la misma altura exacta */
    align-items: stretch; 
}

/* --- Contenido de Texto --- */
.pc-exp-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el texto verticalmente */
    /* Devolvemos el "respiro" o margen interno amplio solo a la parte del texto */
    padding: 3.5rem 4rem; 
}

/* Eyebrow de la ficha: Delgado y oscuro (anula el global cyan/bold) */
.pc-exp-card__content .pc-eyebrow {
    color: var(--pc-text-heading) !important; 
    font-weight: 400 !important;
    margin-bottom: 1.5rem;
}

.pc-exp-card__title {
    color: var(--pc-color-dark-blue) !important;
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    text-transform: none !important; 
    margin-bottom: 1.5rem !important;
}

.pc-exp-card__text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333333;
}

.pc-exp-card__text p {
    margin-bottom: 1.25rem;
}

.pc-exp-card__text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333333;
}

.pc-exp-card__text p {
    margin-bottom: 1.25rem;
}

/* Lista con viñetas azules */
.pc-exp-card__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pc-exp-card__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--pc-color-navy);
}

.pc-exp-card__list li::before{
    content: '•';
    position: absolute;
    left: 0;
    font-size: 1.5rem;
}

/* --- Contenedor de la Imagen --- */
.pc-exp-card__media {
    width: 100%;
    /* Ahora toma el 100% del alto disponible (gracias al stretch del grid) */
    height: 100%; 
    border-radius: 30px; /* Un poco menos redondeado que el exterior para que encaje visualmente */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(4,11,30,0.08); 
}

.pc-exp-card__media img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    display: block;
    /* EL TRUCO: Hace un zoom del 12% a la imagen, recortando los bordes */
    transform: scale(1.12); 
}

/* --- Responsive (Ajuste para Móviles y Tablets) --- */
@media (max-width: 1200px) {
    .pc-exp-card__content {
        padding: 2rem 2.5rem; /* Ajustamos para pantallas medianas */
    }
}

@media (max-width: 992px) {
    .pc-exp-card {
        grid-template-columns: 1fr; /* Pasa a 1 columna */
        padding: 1.5rem;
    }

    .pc-exp-card__content {
        padding: 2rem 1.5rem;
    }

    .pc-exp-card__media {
        height: 400px; /* Altura fija en celulares para que no se deforme */
    }

    /* TRUCO UX: En celular forzamos que la imagen SIEMPRE quede arriba de los textos */
    .pc-exp-card .pc-exp-card__media {
        order: -1; 
    }
}


/* ==========================================================================
   MÓDULO TABS VERTICALES (PICASSO)
   ========================================================================== */
.pc-vtabs-container {
  display: grid;
  grid-template-columns: 80px 1fr; /* 80px para los botones, el resto para la tarjeta */
  gap: 2rem;
  /* max-width: 900px; */
  margin: 60px auto;
  /* align-items: start; */
}

/* --- COLUMNA DE BOTONES --- */
.pc-vtabs-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pc-vtab-btn {
  width: 80px;
  height: 80px;
  background-color: #ffffff;
  border: 4px solid #e2e8f0; /* Borde gris sutil por defecto */
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(4, 11, 30, 0.05);
  transition: all 0.3s ease;
  padding: 0;
}

.pc-vtab-btn img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

/* Hover de los botones */
.pc-vtab-btn:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

/* ESTADO ACTIVO DEL BOTÓN */
.pc-vtab-btn.is-active {
  border-color: var(--pc-color-cyan); /* Borde cyan vivo */
  background-color: #eafbfa; /* Fondo cyan súper clarito */
  box-shadow: 0 8px 20px rgba(125, 232, 245, 0.2);
  transform: translateY(0);
}

.pc-vtab-btn.is-active svg {
  color: var(--pc-color-navy); /* Mantenemos el contraste del icono */
  stroke-width: 2.5px; /* Lo hacemos un poquito más "gordo" al estar activo */
}

/* --- TARJETA DE CONTENIDO --- */
.pc-vtabs-content {
  background-color: #ffffff;
  /* border: 2px solid var(--pc-color-navy); */
  border-radius: 16px;
  padding: 4rem;
  box-shadow: 0 20px 40px rgba(4, 11, 30, 0.08);
  position: relative;
}

/* Ocultar todos los paneles por defecto */
.pc-vtab-pane {
  display: none;
  animation: pc-tab-fade-in 0.4s ease-out forwards;
}

/* Mostrar solo el panel activo */
.pc-vtab-pane.is-active {
  display: block;
}

/* Textos de la tarjeta */
.pc-vtab-title {
  color: var(--pc-color-dark-blue);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.pc-vtab-text {
  color: var(--pc-color-action);
  font-size: 1.6rem!important;
  line-height: 1.6;
}

/* Animación suave al cambiar de pestaña */
@keyframes pc-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
  .pc-vtabs-container {
    grid-template-columns: 1fr; /* Apilamos botones arriba, tarjeta abajo */
    gap: 1.5rem;
  }
  
  .pc-vtabs-nav {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap; /* Si son muchos, que bajen de línea */
  }

  .pc-vtab-btn {
    width: 60px;
    height: 60px;
  }

  .pc-vtab-btn img {
    width: 24px;
    height: 24px;
  }

  .pc-vtabs-content {
    padding: 2rem;
    min-height: auto;
  }
  
  .pc-vtab-title {
    font-size: 1.5rem;
  }
}

.pc-problems-grid__content.new {
    display:flex;
    justify-content:space-between;
    /* align-items:center; */
}
.pc-problems-grid__content.new > div{
    display:flex;
    flex-direction:column;
    gap:100px;
    z-index:5;
    width:40%;
    /* background:Red; */
}
.pc-problems-grid__content.new .column-center{
    justify-content:center;
    z-index:1;
    /* box-sizing:content-box; */
    width:20%;
    align-items:center;
    /* background:red; */
}

.pc-problems-grid__content.new .pc-problem-box{
    height:100%;
}
.pc-problems-grid__content.new .pc-problem-box__icon-wrapper{
    background:var(--pc-color-navy);
    padding:10px;
    border-radius:100px;
}
.pc-problems-grid__content.new .column-center .pc-icon{
    background:var(--pc-color-navy);
    padding:14px;
    border-radius:100%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:50;
    width:150px;
    height:150px;
}

.pc-problems-grid__content.new .column-center .pc-icon:before{
    border: 30px dotted var(--pc-color-light-blue);
    border-radius:100%;
    content:"";
    height:550px;
    width:550px;
    position:absolute;
    z-index:-10;
    animation: roll 30s linear infinite;
}

.pc-problems-grid__content.new .column-center .pc-icon img {
    width:85%!important;
    margin-left:5px!important;
}

@keyframes roll{
    0% {transform:rotateZ(0deg)}
    100% {transform:rotateZ(360deg)}
}
@media (max-width:768px){
  .pc-problems-grid__content.new {
    display:flex!important;
    flex-direction:column;
  }
  .pc-problems-grid__content > div{
      /* background:red; */
      width:100%!important;
      gap:20px!important;
  }

  .pc-problems-grid__content.new .column-center{
      display:none;
  }
}
/* =========================================
   COMPONENTE: FOOTER (MODULO 10)
   ========================================= */
:root {
    /* Variables de color basadas en la identidad de marca */
    --pc-color-dark-blue-footer: #040b1e; /* Fondo oscuro base */
    --pc-color-light-blue-bar: #7de8f5;  /* Fondo de barra inferior */
    --pc-color-fuchsia: #ff0055;
    /* --pc-color-cyan: #7de8f5; */
    --pc-color-deep-blue: #040b1e;
    --pc-text-white: #ffffff;
    --pc-text-white-dim: rgba(255, 255, 255, 0.8);
    --pc-text-deep-blue: #040b1e;
    --pc-border-radius-btn: 50px;
}

.pc-footer {
    display: block;
    margin-top: auto; /* Empuja el footer hacia abajo si el contenido es corto */
}

.pc-footer__main {
    padding: 5rem 0;
    background-color: var(--pc-color-dark-blue-footer);
    color: var(--pc-text-white);
    position: relative;
       background-image: url('https://picassots.com.mx/wp-content/uploads/2026/04/Footer_Img-1.png');
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
   
}

.pc-footer__main-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Buena práctica para pantallas más pequeñas */
    gap: 2rem;
}

.pc-footer__col {
    /* Ancho de columna por defecto, se ajusta individualmente */
    flex-basis: calc(100% / 4 - 2rem);
    max-width: calc(100% / 4);
}

/* Columna 1 - Marca y Descripción (Más ancha) */
.pc-footer__col--brand {
    flex-grow: 1.5; /* Hace la columna 1 más ancha */
    flex-basis: 35%;
    max-width: 35%;
}

.pc-footer__logo-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.pc-footer__logo-wrap img{
    width:65%;
}

.pc-logo__icon {
    font-size: 2.5rem; /* Tamaño de icono base */
    margin-right: 1.5rem;
}

.pc-logo__name {
    font-size: 2.5rem;
    font-weight: 700;
}

.pc-footer__desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    color: var(--pc-text-white);
}

/* Botón Primary Fuchsia (Como en módulos anteriores) */
.pc-footer__btn {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--pc-color-fuchsia);
    color: var(--pc-text-white);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--pc-border-radius-btn);
    transition: all 0.3s ease;
    text-decoration: none;
}

.pc-footer__btn:hover {
    background-color: #d10047; /* Fuchsia ligeramente más oscuro al pasar el ratón */
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.4);
}

/* Columna 2 - Soluciones (Lista con viñetas) */
.pc-footer__col--links {
    flex-grow: 0.8;
    flex-basis: 25%;
    max-width: 25%;
}

.pc-footer__heading {
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
    color: var(--pc-text-white);
}

.pc-footer__solution-list {
    /* font-family: 'Montserrat', sans-serif; */
    list-style: none; /* remove default list bullets */
    padding-left: 0;
    margin: 0;
}

.pc-footer__solution-list li {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--pc-text-white-dim);
    padding-left: 0; /* reset */
    list-style: disc; /* viñeta estándar disc */
    list-style-position: outside; /* viñetas fuera del cuadro de texto */
    margin-left: 1.5rem; /* asegurar que las viñetas sean visibles */
}

/* Columna 3 - Contacto (Iconos y Enlaces) */
.pc-footer__col--contact {
    flex-grow: 1.2;
    flex-basis: 25%;
    max-width: 25%;
}

.pc-footer__contact-link {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: var(--pc-text-white-dim);
    transition: all 0.3s ease;
}

.pc-footer__contact-link:hover {
    color: var(--pc-text-white);
}

.pc-footer__contact-icon {
    font-size: 1.8rem;
    color: var(--pc-color-fuchsia);
    margin-right: 1.5rem;
}

.pc-footer__contact-text {
    font-size: 1.1rem;
}

/* Elemento Extrapolado - Flecha hacia arriba (Extremo derecho) */
.pc-footer__arrow-wrap {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.pc-footer__arrow-icon {
    font-size: 1rem;
    color: var(--pc-color-cyan); /* Flecha cyan pequeña y estilizada */
}

/* Barra inferior de fondo claro con texto */
.pc-footer__bottom-bar {
    padding: 0;
    background-color: var(--pc-color-light-blue-bar);
}

.pc-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20px!important;
}

.pc-footer__bottom-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--pc-text-deep-blue);
    margin: 0;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .pc-footer__main-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }

    .pc-footer__col {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 0;
        flex-grow: 1; /* uniform size */
    }
    
    .pc-footer__col--brand {
        flex-basis: 100%;
        max-width: 100%;
    }

    .pc-footer__arrow-wrap {
        top: 1rem;
        right: 1rem;
    }

    .pc-footer__bottom-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}


/* ==========================================================================
   BOTÓN FLOTANTE "REGRESAR" (SINGLE SERVICIO)
   ========================================================================== */
.pc-floating-back {
    position: fixed;
    /* IMPORTANTE: Ajusta este 'top' dependiendo de qué tan alto sea tu Header para que no choquen */
    top: 120px; 
    left: 2rem;
    z-index: 999; /* Lo mantenemos por encima del contenido */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(4, 11, 30, 0.7); /* Azul marino semitransparente */
    backdrop-filter: blur(10px); /* Efecto vidrio */
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 1px solid rgba(125, 232, 245, 0.2); /* Borde cyan sutil */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.pc-floating-back svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

/* Efecto Hover: Cambia a Fucsia y la flecha se mueve */
.pc-floating-back:hover {
    background-color: #ff0055; /* Tu fucsia corporativo */
    border-color: #ff0055;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(255, 0, 85, 0.3);
}

.pc-floating-back:hover svg {
    transform: translateX(-4px); /* Animación extra para indicar dirección */
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .pc-floating-back {
        top: 90px; /* Lo subimos un poco en móvil */
        left: 1rem;
        padding: 0.6rem; /* Lo hacemos circular ocultando el texto */
        border-radius: 50%;
        justify-content: center;
    }
    
    /* Ocultamos el texto en celular para que no estorbe la lectura */
    .pc-floating-back span {
        display: none; 
    }
    
    .pc-floating-back svg {
        width: 24px;
        height: 24px;
    }
}