/* ============================================
   INTERACCIÓN TECNOLOGÍAS (ACTUALIZADO)
   ============================================ */
:root {
  --ease-tech: cubic-bezier(.42,0,.58,1);
  --speed-tech: 0.5s;
  --sizing-tech: 72px; 
  --bg-glass: rgba(250, 249, 245, 0.4);
  --bg-glass-hover: rgba(227, 226, 223, 0.7);
}

.tech-interactive-container {
  container-type: inline-size;
  background-image: radial-gradient(var(--outline-variant) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Manejo de Imágenes */
.tech-interactive-container .img-block {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-interactive-container .img-wrapper {
  width: 90%;
  height: 80%;
  transition: all var(--speed-tech) var(--ease-tech);
  opacity: 0;
  scale: 0.8;
  translate: 40px 0;
}

.tech-interactive-container .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.2));
}

/* --- LÓGICA DE VISIBILIDAD --- */

/* 1. Imagen por defecto (Solo si nada está abierto) */
.tech-interactive-container:not(:has(details[open])) .img-placeholder .img-wrapper {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

/* 2. Imágenes de marcas (Coincidencia con el orden del HTML) */
.tech-interactive-container:has(details:nth-of-type(1)[open]) .img-block:nth-of-type(2) .img-wrapper,
.tech-interactive-container:has(details:nth-of-type(2)[open]) .img-block:nth-of-type(3) .img-wrapper,
.tech-interactive-container:has(details:nth-of-type(3)[open]) .img-block:nth-of-type(4) .img-wrapper,
.tech-interactive-container:has(details:nth-of-type(4)[open]) .img-block:nth-of-type(5) .img-wrapper,
.tech-interactive-container:has(details:nth-of-type(5)[open]) .img-block:nth-of-type(6) .img-wrapper {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition-delay: 0.1s;
}

/* Estilos de Logos en el Summary */
.tech-logo-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.6);
  transition: all 0.4s var(--ease-tech);
}

.tech-detail:hover .tech-logo-icon,
.tech-detail[open] .tech-logo-icon {
  filter: grayscale(0) opacity(1);
  transform: scale(1.15) rotate(-5deg);
}

/* Detalles (Accordion) */
.tech-detail {
  width: 100%;
  border-radius: 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--outline-variant);
  transition: all 0.4s var(--ease-tech);
}

.tech-detail[open] {
  background: white;
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.tech-detail summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tech-detail summary::-webkit-details-marker { display: none; }

/* Soporte de animación de altura */
.tech-detail, .tech-detail::details-content {
  interpolate-size: allow-keywords;
}

.tech-detail::details-content {
  opacity: 0;
  height: 0;
  transition: all var(--speed-tech) var(--ease-tech);
}

.tech-detail[open]::details-content {
  opacity: 1;
  height: auto;
}

/* Botones de Navegación */
.tech-btn {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--outline-variant);
  transition: all 0.3s cubic-bezier(.175, .885, .32, 1.275);
}

.tech-btn:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1) rotate(5deg);
}

.tech-interactive-container:not(:has([open])) .tech-btn {
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
}

/* ============================================
   TARJETAS NEUMÓRFICAS (SERVICIOS)
   ============================================ */
.service-card-3d {
  background: #e0e2eb; /* Un tono gris azulado suave como el de tu imagen */
  border-radius: 50px; /* Bordes muy redondeados tipo "Squircle" */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* El secreto: múltiples capas de sombras internas (Insects) */
  box-shadow: 
    rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, 
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, 
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, 
    rgba(0, 0, 0, 0.06) 0px 2px 1px, 
    rgba(0, 0, 0, 0.09) 0px 4px 2px, 
    rgba(0, 0, 0, 0.09) 0px 8px 4px, 
    rgba(0, 0, 0, 0.09) 0px 16px 8px, 
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Efecto al pasar el mouse: se "eleva" ligeramente */
.service-card-3d:hover {
  transform: translateY(-10px) scale(1.02);
  background: #e6e8f0;
  box-shadow: 
    rgba(0, 0, 0, 0.1) 0px -23px 25px 0px inset, 
    rgba(0, 0, 0, 0.08) 0px -36px 30px 0px inset, 
    rgba(0, 0, 0, 0.05) 0px -79px 40px 0px inset, 
    rgba(0, 0, 0, 0.15) 0px 20px 40px; /* Sombra externa más fuerte al flotar */
}

/* Contenedor de imagen redondeado dentro de la tarjeta */
.service-card-3d .img-container {
  border-radius: 40px 40px 20px 20px;
  margin: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}

/* ============================================
   PILARES
   ============================================ */
.pillars-section {
  background-color: #ffffff;
  padding: 120px 24px; 
}

.pillar-card {
  position: relative;
  width: 100%;
  min-height: 320px; 
  background-color: #ffffff; 
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 32px;
  gap: 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1; 
  overflow: visible;
  box-shadow: 0 15px 35px rgba(0,0,0,0.03); 
}


.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(100% + 12px); 
  height: calc(100% + 12px);
  border-radius: 22px;
  background: linear-gradient(-45deg, #f4f4f0 0%, #f4f4f0 100%);  z-index: -1; 
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* RESPLANDOR (GLOW): Detrás del efecto de movimiento */
.pillar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #f4f4f0 0%, #f4f4f0 100%);  transform: scale(0.95);
  filter: blur(25px);
  opacity: 0.4;
  z-index: -2; 
  
  transition: all 0.6s ease;
}

/* --- INTERACCIONES --- */
.pillar-card:hover {
  transform: translateY(-5px);
}

.pillar-card:hover::before {
  /* Rotación y escala del neón por detrás */
  transform: rotate(-90deg) scaleX(1.2) scaleY(1.1);
  opacity: 1;
}

.pillar-card:hover::after {
  opacity: 0.7;
  filter: blur(35px);
}

/* --- CONTENIDO (Siempre al frente) --- */
.pillar-card .pillar-icon,
.pillar-card h3,
.pillar-card p {
  position: relative;
  z-index: 2; /* Por encima de la tarjeta blanca */
}

.pillar-card .pillar-icon {
  font-size: 3rem;
  margin-bottom: auto;
  background: linear-gradient(-45deg, #000000 0%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pillar-card h3 {
  color: #1a1c20;
  font-weight: 800;
  font-size: 1.5rem;
}

.pillar-card p {
  color: #000000b9;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================
   CTA FINAL:
   ============================================ */
.cta-section {
  background-color: #CC5500; /* Tu color Primary */
  position: relative;
  overflow: hidden;
  /* Espaciado generoso para dar aire */
  padding: 120px 24px;
}

/* El diseño de líneas de fondo (el SVG) */
.cta-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}

/* Contenedor central */
.cta-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}

/* Botón Principal (Solicitar Cotización) */
.btn-cta-primary {
  background-color: #ffffff;
  color: #CC5500;
  padding: 18px 36px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  background-color: #fcfcfc;
}

/* Botón Secundario (Ver Catálogo) */
.btn-cta-outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05); /* Efecto Glassmorphism */
  backdrop-filter: blur(5px);
  padding: 18px 36px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.btn-cta-outline:hover {
  background-color: rgba(255, 255, 255, 1);
  color: #CC5500;
  border-color: #ffffff;
}

/* Animación de entrada para el texto */
.cta-content h2 {
  color: #ffffff;
  line-height: 1.2;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.wrapper-3d {
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
}

.inner-3d {
  --w: 160px;
  --h: 220px;
  --translateZ: 350px; /* Radio del círculo */
  --rotateX: -10deg;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  animation: rotating-3d 30s linear infinite;
}

.inner-3d:hover {
  animation-play-state: paused; /* Se detiene al pasar el mouse */
}

@keyframes rotating-3d {
  from { transform: rotateX(var(--rotateX)) rotateY(0); }
  to { transform: rotateX(var(--rotateX)) rotateY(1turn); }
}

.card-3d {
  position: absolute;
  inset: 0;
  background: rgba(204, 85, 0, 0.1); /* Color Primary suave */
  border: 1px solid rgba(204, 85, 0, 0.4);
  border-radius: 16px;
  backdrop-filter: blur(5px);
  cursor: pointer;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-3d:hover {
  background: rgba(204, 85, 0, 0.9);
  border-color: #CC5500;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(calc(var(--translateZ) + 20px)) scale(1.05);
}

.content-3d {
  padding: 20px;
  color: rgb(0, 0, 0);
}

.content-3d span {
  font-size: 2.5rem;
  margin-bottom: 10px;
  display: block;
  color: #CC5500;
  transition: color 0.3s;
}

.card-3d:hover .content-3d span { color: white; }
.content-3d h3 { font-size: 0.9rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }

.btn-card-ver-mas {
  margin-top: 12px;
  padding: 6px 18px;
  background: transparent;
  border: 1px solid #CC5500;
  color: #CC5500;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(6px);
}

.card-3d:hover .btn-card-ver-mas {
  opacity: 1;
  transform: translateY(0);
  background: white;
  color: #CC5500;
  border-color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .inner-3d { --w: 120px; --h: 180px; --translateZ: 250px; }
}

/* --- Estilos de Galería Bento --- */
.bento-grid article {
  position: relative;
  border-radius: 4px; /* Manteniendo el estilo minimalista de 0.125rem */
  border: 1px solid rgba(0,0,0,0.05);
  background: white;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bento-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(139, 58, 26, 0.12);
  border-color: rgba(139, 58, 26, 0.2);
}

/* Overlay Gradiente Editorial */
.project-overlay {
  background: linear-gradient(to top, rgba(26, 10, 5, 0.85) 0%, rgba(26, 10, 5, 0.4) 40%, transparent 100%);
  transition: opacity 0.5s ease;
}

.bento-grid article:hover .project-overlay {
  opacity: 0.95;
}

/* Badge de Categoría */
.category-badge {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #8B3A1A;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 8px;
  backdrop-filter: blur(4px);
}

/* Tarjeta de Estadísticas (La naranja) */
.stats-card {
  background: linear-gradient(135deg, #8B3A1A 0%, #6D2D14 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.stats-card::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Tipografía de Títulos */
.project-title {
  font-family: 'Newsreader', serif;
  font-style: italic;
  line-height: 1.1;
}

/* --- Paleta de Colores de Marca --- */
:root {
  --primary-brand: #CC5500;
  --secondary-brand: #7B6128;
  --neutral-brand: #FDFCF8;
}

/* Estilo de los inputs basado en la imagen de contacto */
.topmex-input {
  width: 100%;
  background-color: #F4F2EE; /* Gris neutro suave de la imagen */
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem;
  font-family: 'Manrope', sans-serif;
  transition: all 0.3s ease;
}

.topmex-input:focus {
  outline: none;
  border-bottom: 2px solid var(--primary-brand);
  background-color: #ffffff;
}

/* Tarjetas de contacto con efecto hover sutil */
.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* Botón de envío exacto a la imagen */
.btn-submit {
  width: 100%;
  padding: 1.25rem;
  background-color: #8B3A1A; /* Tono tierra oscuro del botón en la imagen */
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}

.btn-submit:hover {
  opacity: 0.9;
}
/* Filtro para el mapa en modo oscuro/profesional */
iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Contenedor del mapa para asegurar que ocupe el espacio restante */
.flex-grow {
    flex: 1 1 auto;
}