@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400&family=Dancing+Script:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');:root { --bg-color: #F8F1C3; /* Warmer yellowish beige, removed pink tones */ /* Warmer Beige-Yellowish background */ --text-color: #3C3E42; /* Dark slate gray */ --text-muted: #5A5D63; --accent-color: #be9882; /* Nuevo Tono Tierra cálido sugerido por el usuario */ --accent-hover: #b48e58; --button-yellow: #e4cc9f; --white: #FFFFFF; --font-main: 'Montserrat', sans-serif; --font-heading: 'Playfair Display', serif; --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05); --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth;}body { font-family: var(--font-main); background-color: var(--bg-color); color: var(--text-color); line-height: 1.6;}/* NAVBAR GLASSMORPHISM COMPACTA (Sincronizada para todo el sitio) */.navbar { position: fixed; top: 0; width: 100%; z-index: 10000; display: flex; justify-content: space-between; align-items: center; padding: 22px 5%; background-color: #3C3E42; /* Negro grafito unificado */ backdrop-filter: blur(10px); transition: var(--transition); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);}.navbar-interna { background-color: #3C3E42 !important; backdrop-filter: blur(10px); position: fixed; width: 100%; top: 0; padding: 22px 5%; z-index: 10000;}.navbar .logo,.navbar nav a,.navbar-interna .logo,.navbar-interna nav a { color: var(--white) !important; /* Siempre blanco */}.navbar nav a:hover,.navbar-interna nav a:hover { color: var(--accent-color) !important;}.navbar .dropdown-content,.navbar-interna .dropdown-content { background-color: #3C3E42 !important;}.navbar .dropdown-content a,.navbar-interna .dropdown-content a { color: var(--white) !important;}.navbar.scrolled { padding: 22px 5%; background-color: #3C3E42;}.navbar .logo { font-size: 1.3rem; /* Smallest logo to save space */ font-weight: 800; color: var(--white); letter-spacing: 2px; text-transform: uppercase;}.navbar nav ul { list-style: none; display: flex; gap: 15px; /* Compact gap */ align-items: center; white-space: nowrap; /* Forces one line */}.service-item-premium h3 { grid-column: 1 / -1; text-align: center; margin: 0 0 40px 0; font-size: 2.2rem; color: var(--accent-color); letter-spacing: 2.5px; font-family: var(--font-heading); text-transform: uppercase;}.navbar nav a { text-decoration: none; color: var(--white); font-weight: 500; font-size: 0.8rem; /* Discreet font size */ text-transform: uppercase; letter-spacing: 1px; transition: var(--transition);}.navbar nav a:hover { color: var(--accent-color);}/* --- BUSCADORES ATÓMICOS BLINDADOS (UNIFICADOS) --- */#nameSearchHome, #nameSearchPage { width: 100% !important; padding: 22px 30px 22px 75px !important; border-radius: 60px !important; border: 3px solid var(--accent-color) !important; font-family: var(--font-main) !important; outline: none !important; box-shadow: 0 15px 45px rgba(0,0,0,0.1) !important; background-color: #fffcf8 !important; font-size: 1.3rem !important; color: #3C3E42 !important; transition: 0.3s !important; text-transform: uppercase !important; font-weight: 600 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23be9882' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 25px center !important; background-size: 30px !important;}/* Ajuste compacto para el mini-buscador del menú */.dropdown-content input[type="text"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23be9882' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 18px !important; padding-left: 35px !important;}@media (max-width: 600px) { #nameSearchHome, #nameSearchPage { padding: 16px 20px 16px 55px !important; font-size: 1.1rem !important; background-position: 18px center !important; background-size: 24px !important; width: 90% !important; margin: 0 auto !important; display: block !important; }}/* BOTÓN HAMBURGUESA */.menu-toggle { display: none; flex-direction: column; cursor: pointer; gap: 5px;}.menu-toggle span { width: 25px; height: 3px; background-color: var(--white); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; /* Transición estable para la hamburguesa */}/* Animación a X al abrir */.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg);}.menu-toggle.active span:nth-child(2) { opacity: 0;}.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg);}/* HERO BANNER - MEJORADO */.hero-banner { width: 100%; padding-top: 60px; background-color: var(--bg-color);}.hero-scaler { position: relative; width: 100%; overflow: hidden;}.hero-bg-img { width: 100%; height: auto; display: block; margin-top: -12%; margin-bottom: -12%; filter: brightness(0.95);}.hero-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.hero-meta { position: absolute; top: 32%; left: 8%; font-family: var(--font-main); font-size: 1.4vw; font-weight: 700; color: var(--text-color); letter-spacing: 0.2vw;}.hero-title { position: absolute; top: 39.8%; left: 8%; font-family: var(--font-main); font-size: 6vw; font-weight: 800; line-height: 1; color: var(--text-color); letter-spacing: -2px;}.hero-slogan { position: absolute; top: 58.5%; left: 21vw; font-family: 'Dancing Script', cursive; color: var(--white); font-weight: 400; font-size: 3.2vw; white-space: nowrap; /* Brillo Neón Blanco Suavizado */ text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.3); z-index: 10;}.name-card { scroll-margin-top: 100px; outline: none; text-decoration: none; /* Quitar subrayado violeta de los enlaces */}/* NAME CARD RENDERING (CSS SYSTEM FOR PERFECT CONSISTENCY) */.name-box { width: 100%; height: 80px; border-radius: 15px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); cursor: pointer; overflow: hidden; container-type: inline-size;}.name-box span { color: var(--text-color); font-size: clamp(0.5rem, 8cqw, 1.4rem); /* Reducido ligeramente para mayor margen en nombres largos */ font-weight: 800; text-transform: uppercase; letter-spacing: 0px; /* Reducción a 0 para maximizar espacio horizontal */ font-family: var(--font-main); padding: 0 10px; /* Más padding para asegurar que no toque bordes */ text-align: center; white-space: nowrap; display: block; width: 100%; box-sizing: border-box;}.name-box.style-beige { background-color: #EDE4C8;}.name-box.style-tierra { background-color: #BE9882;}.name-box.style-ocre { background-color: #D4B170;}.name-card:hover .name-box { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}/* Resaltado cuando volvemos a un nombre específico */.name-card:target .name-box { border: 4px solid var(--text-color) !important; transform: scale(1.02); box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}/* Banner unificado con texto integrado */.hero-text-hide { display: none !important;}.hero-bg-img { width: 100%; height: auto; display: block; margin-top: 0 !important; margin-bottom: 0 !important; filter: brightness(0.95);}/* ESTILO BASE GALERÍA (PC) */.search-library-title { font-size: 1.6rem; letter-spacing: -0.5px; font-weight: 700;}.search-library-container { max-width: 700px; margin: 0 auto 30px auto;}@media (max-width: 1024px) { /*-------------------------------------------------------------- # COMPACTAR ESPACIO BANNER -> SERVICIOS (SOLO CELU) --------------------------------------------------------------*/ @media (max-width: 768px) { .services { padding-top: 50px !important; /* Ajuste medio: ni pegado ni lejos */ } .section-title { margin-top: 0 !important; margin-bottom: 25px !important; } .section-title span { font-size: 1.15rem !important; /* Estilo ultra-minimalista y fino */ letter-spacing: 0 !important; } } /*-------------------------------------------------------------- # TODO LO QUE VIENE ABAJO PARA CELULAR Y TABLET (CON EL CELU YA PROLIJO) --------------------------------------------------------------*/ .about-text-container p, .service-content p, .service-page p, .blog-post p, .article-body p, .search-modal-content p, .name-detail-card p { font-size: 0.92rem !important; line-height: 1.8 !important; text-align: justify; } /* GALERÍA DE NOMBRES - SIMETRÍA Y AIRE */ .search-library-title { font-size: 1.15rem !important; /* Achicado para que entre en una sola línea */ white-space: nowrap !important; letter-spacing: 0px !important; margin-bottom: 20px !important; } .search-library-container { max-width: 420px !important; /* Muy compacto y centrado */ padding: 0 10% !important; margin: 0 auto !important; } .search-library-footer { padding: 0 10% !important; /* ALEJAR FRASE INFERIOR DE BORDES */ font-size: 0.95rem !important; } /* DETALLE DE NOMBRES MÓVIL */ .name-detail-header { padding: 40px 20px !important; margin-bottom: 30px !important; } .name-detail-header h1 { font-size: 2.2rem !important; } .vibration-section { margin: 35px 0 !important; } .vibration-label { font-size: 1.3rem !important; margin-bottom: 12px !important; } .service-page h1 { font-size: 1.8rem !important; margin-top: 20px !important; /* Espacio justo y prolijo */ margin-bottom: 20px !important; text-align: left !important; /* Vuelve a la izquierda original */ color: var(--accent-color) !important; } .deepen-experience { padding: 0 6% !important; margin-top: 10px !important; text-align: center !important; } .deepen-experience h2 { font-size: 1.5rem !important; /* Título más fino y proporcionado */ margin-bottom: 20px !important; } .deepen-cards { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* ¡A DOS BOTONES POR FILA! */ gap: 12px !important; max-width: 500px !important; margin: 0 auto !important; } .deepen-card { padding: 12px 15px !important; /* Más compactos */ display: flex !important; justify-content: center !important; align-items: center !important; height: auto !important; } .deepen-card h3 { font-size: 0.85rem !important; /* Letra pequeña para que entren en una línea */ margin: 0 !important; white-space: nowrap !important; } .navbar { padding: 15px 5%; } .navbar .logo { font-size: 1.1rem !important; letter-spacing: 1px !important; } .menu-toggle { display: flex; /* Mostrar hamburguesa */ } .navbar nav { position: absolute; top: 100%; left: 0; width: 100%; background-color: #3C3E42; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); padding: 0 5%; /* Padding lateral fijo siempre */ } .navbar nav.active { max-height: 100vh; /* Ocupa lo necesario sin saltos */ padding-top: 10px; padding-bottom: 40px; overflow-y: auto; } .navbar nav ul { flex-direction: column; padding: 20px 0; /* Quitamos el padding lateral de aquÃ- ya que está en el padre */ gap: 20px !important; align-items: flex-start !important; width: 100%; } .navbar nav a { font-size: 0.9rem !important; width: 100%; display: block; } .dropdown-content { position: static !important; background-color: rgba(0, 0, 0, 0.1) !important; box-shadow: none !important; padding-left: 15px !important; max-height: none !important; display: block !important; margin-top: 10px; } .hero-banner { padding-top: 50px; } .hero-content { top: 52%; left: 5%; } .hero-meta { font-size: 3vw; } .hero-title { font-size: 9vw; } .hero-slogan { font-size: 5.5vw; margin-left: 5vw; margin-top: 2vw; text-shadow: 0 0 5px #fff, 0 0 10px #fff; } /* FIX BOTONES MÓVIL (COMPACTOS Y CON AIRE) */ @media (max-width: 768px) { .service-buttons { margin-top: 20px !important; /* Bajamos los botones para que no peguen al texto */ } .btn-dark { font-size: 0.80rem !important; /* Letra más pequeña y fina */ padding: 10px 18px !important; /* Menos bulto */ white-space: nowrap !important; display: inline-block !important; } } /* TIPOGRAFÍA MÓVIL REFINADA - SOLO CELU (ESTILO COMPACTO - 0.82REM) */ @media (max-width: 600px) { .about-text-container p, .service-content p, .service-page p, .blog-post p, .search-modal-content p, .name-detail-card p, .name-detail-container p, .article-body p, .vibration-section p, .intro p { font-size: 0.82rem !important; /* Más pequeña como pediste */ color: var(--text-color) !important; /* Color gris grafito estándar para todos */ line-height: 1.5 !important; /* Mejor legibilidad */ margin-top: 15px !important; /* Más separación arriba */ margin-bottom: 15px !important;/* Más separación abajo */ word-spacing: normal !important; text-align: left !important; } /* RE-CENTRAR TEXTO EN CABECERAS DE NOMBRES (SOLO CELU) */ .name-detail-header p { text-align: center !important; /* Volver a centrar frecuencia numerológica */ margin-top: 5px !important; /* Espacio más fino bajo el nombre */ } } /* TARJETAS DE SERVICIO MÁS PEQUEÑAS Y PROPORCIONADAS (SOLO CELU) */ @media (max-width: 768px) { .service-row { padding: 20px 5% !important; /* Más compacto internamente */ margin-bottom: 25px !important; width: 85% !important; /* Tarjeta mucho más estrecha */ margin-left: auto !important; /* Centrado */ margin-right: auto !important; /* Centrado */ background-color: var(--white); border-radius: 12px; /* Un toque menos redondeo para compensar el tamaño */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .service-img img { max-width: 90% !important; /* Agrandado un poquito para que luzca mejor en la tarjeta estrecha */ margin: 0 auto !important; display: block !important; } .service-content h3 { font-size: 1.15rem !important; margin-top: 5px !important; /* Más cerca de la imagen */ margin-bottom: 10px !important; } .service-content p { font-size: 0.82rem !important; /* Ajuste fino a 0.82rem */ line-height: 1.2 !important; } } /* AIRE PARA EL AVISO DE ENTREGA EN PDF (SOLO CELU) */ @media (max-width: 600px) { p[style*="font-style: italic"] { margin-top: 15px !important; margin-bottom: 20px !important; font-size: 0.82rem !important; /* Consistente con el resto */ display: block !important; } } .service-page { padding: 70px 20px 35px 20px !important; /* Restauramos diseño móvil */ margin-top: 0 !important; padding: 50px 7% 0 7% !important; text-align: left !important; } .intro { padding: 60px 7% 10px !important; /* Compacta el inicio y el final de la invitación */ } .service-row { flex-direction: column !important; padding: 30px !important; gap: 30px !important; max-width: 90% !important; } .service-img { width: 100% !important; height: 250px !important; } /* BLOG ARTICLES MÓVIL/TABLET */ .blog-post { padding: 30px 25px !important; margin-top: 0 !important; /* El espacio lo maneja el 'main' ahora */ } .blog-post h1 { font-size: 1.6rem !important; /* Título principal aún más sutil */ margin-bottom: 10px !important; margin-top: 0 !important; /* Elimina espacio extra arriba del h1 */ } .blog-post h2 { font-size: 1.3rem !important; margin-top: 30px !important; } .blog-post h3 { font-size: 1.25rem !important; } .blog-date { font-size: 0.8rem !important; margin-bottom: 25px !important; } /* REDUCCIÓN DE TÍTULOS MÓVIL/TABLET */ /* TÍTULOS REFINADOS */ .section-title span { font-size: 2.1rem !important; } .section-title span { font-size: 2.1rem !important; /* Títulos de sección (SERVICIOS, etc) refinados */ } .service-content h3 { font-size: 1.6rem !important; /* Títulos de cada tarjeta */ } .service-content-full h3 { font-size: 2rem !important; /* Título especial Tarot */ } /* COMPACTACIÓN DE PRECIOS Y MEDIA MÓVIL (CORRECCIÓN) */ .service-img-container, .service-media { height: 200px !important; width: 100% !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 5px !important; } .service-img-container img, .service-media img, .service-page img { width: 100% !important; height: 200px !important; object-fit: cover !important; border-radius: 12px !important; margin-bottom: 5px !important; /* Se pega más al texto de abajo */ } .price-grid { display: flex !important; justify-content: center !important; gap: 10px !important; max-width: 82% !important; margin: -15px auto 10px auto !important; /* CENTRADO TOTAL */ } .price-item { padding: 6px 8px !important; /* Bordes internos más finos */ } .price-value { font-size: 1rem !important; /* Números más sutiles */ } .currency-label { font-size: 0.7rem !important; } .audio-player-premium { max-width: 88% !important; /* Estirado para que entre todo cómodo */ padding: 10px 15px !important; margin-top: -25px !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; flex-direction: row !important; /* En una sola línea horizontal */ flex-wrap: nowrap !important; /* NO rompe la fila */ align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; /* Espacio más fino entre play y texto */ } .audio-label { font-size: 0.72rem !important; /* Letra más delicada */ white-space: nowrap !important; margin: 0 !important; letter-spacing: 0.5px; } .audio-btn { transform: scale(0.65) !important; /* Play miniatura para que encaje perfecto */ margin: 0 !important; } /* UNIÓN EQUILIBRADA CUANDO HAY PRECIOS Y LUEGO AUDIO */ .price-grid~.audio-player-premium { margin-top: -12px !important; } /* REDUCCIÓN DE BLOQUES GENÉRICOS DE SERVICIOS */ .service-page div[style*="padding: 40px"], .service-page div[style*="padding: 30px"] { padding: 18px 20px !important; } .service-page img[style*="height: 350px"] { height: 200px !important; } /* UNIÓN DE PÁRRAFOS CON BLOQUES SIGUIENTES */ .service-page p+div, .service-page p+section, .service-page p+h3 { margin-top: 10px !important; /* Une el párrafo con lo que sigue */ } .service-page div[style*="margin-top"], .service-page section, .service-page h3 { margin-top: 10px !important; /* Bloques mucho más pegaditos entre sí */ margin-bottom: 10px !important; } .service-item-premium { margin-top: 15px !important; padding: 15px !important; } /* SIMETRÍA EXCLUSIVA PARA TABLETS (700PX A 1024PX) */ /* --- AJUSTE HÍBRIDO PARA TABLET Y VISTA DEL USUARIO (480px - 1024px) --- */ @media (min-width: 480px) and (max-width: 1024px) { /* Ajuste de Títulos Principales - Simetría entre Galería de Nombres y Sobre Mí */ .gallery-title, .sobre-mi-title { font-size: 2.2rem !important; /* Igualados al milímetro para armonía visual */ margin-bottom: 25px !important; text-align: center !important; } /* Ajuste de Párrafos en Sobre Mí - Aire entre bloques de texto */ .about-text-container p { line-height: 1.8 !important; /* Lectura fluida */ } /* Buscador más pequeño y estilizado */ .search-container { max-width: 340px !important; margin: 0 auto 30px !important; } #name-search { padding: 10px 18px !important; font-size: 0.95rem !important; } /* TÍTULOS NEGROS Y A LA IZQUIERDA - SOLO EL PRINCIPAL TIENE LÍNEA */ .service-page h1 { text-align: left !important; /* ÚNICO A LA IZQUIERDA */ color: #3C3E42 !important; /* NEGRO PURO #000 */ position: relative; padding-bottom: 25px; font-size: 2.2rem !important; } .service-page h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100px; height: 5px; background: var(--accent-color); border-radius: 2px; } .service-item-premium h3 { text-align: center !important; /* CENTRADO TOTAL */ color: #3C3E42 !important; /* NEGRO PURO #000 */ font-size: 1.8rem !important; margin-bottom: 35px !important; padding-bottom: 12px; position: relative; } /* REFUERZO DE MÁXIMA FUERZA - MENÚ HAMBURGUESA (Solo Tablet y Celu) */ nav .checkbtn:hover~ul, nav #check:hover~ul, nav ul:hover { left: 0 !important; /* Despliega el menú al pasar el puntero */ opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 9999 !important; transition: all .5s; } .checkbtn { padding: 5px 10px; /* Área de contacto más cómoda */ } } /* --- ZONA EXCLUSIVA TABLET (700px - 1024px) --- */ @media (min-width: 700px) and (max-width: 1024px) { /* Ajuste de Títulos Principales - Simetría para Tablet */ .gallery-title, .sobre-mi-title { font-size: 2.2rem !important; /* Igualados al milímetro */ margin-bottom: 25px !important; text-align: center !important; } /* Buscador más pequeño y estilizado - Tablet */ .search-container { max-width: 340px !important; margin: 0 auto 30px !important; } #name-search { padding: 10px 18px !important; font-size: 0.95rem !important; } /* APERTURA DEL MENÚ HAMBURGUESA AL PASAR EL RATÓN - Tablet */ nav .checkbtn:hover~ul, nav #check:hover~ul, nav ul:hover { left: 0 !important; opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 9999 !important; transition: all .5s; } .checkbtn { padding: 5px 10px; } /* ESTABILIZACIÓN DEL MENÚ - EVITAR MOVIMIENTOS INDESEADOS */ nav ul li { margin: 0 !important; /* Sin márgenes elásticos */ padding: 18px 50px !important; /* Aire fijo y margen de seguridad izquierdo */ width: 100% !important; text-align: left !important; /* Todo alineado a la izquierda */ } nav ul li a { font-size: 1.1rem !important; /* Letra clara para Tablet */ transition: none !important; /* Elimina el efecto de "baile" al mover el mouse */ } /* Aire PROPIO para la sección de Vibración - Solo Tablet */ .vibration-section { margin-top: 50px !important; /* Despegar del párrafo de ARRIBA */ } /* Aire para el emoji de vibración - Solo Tablet */ .vibration-label { display: block !important; /* Restauramos estructura original */ font-size: 1.3rem !important; margin-bottom: 12px !important; } .vibration-label i, .vibration-label span { margin-right: 12px !important; /* Espacio a la derecha */ } /* Ajuste de Párrafos en Sobre Mí - Espacio Normal Solo Tablet */ .about-text-container p, .service-page p { margin-bottom: 30px !important; /* Espacio elegante para lectura */ line-height: 1.8 !important; } .btn-dark { white-space: nowrap !important; font-size: 0.85rem !important; padding: 12px 20px !important; } /* Títulos de Páginas Internas - Sincronía Tablet */ .service-page h1 { font-size: 2.2rem !important; text-align: center !important; margin-bottom: 40px !important; color: var(--accent-color) !important; } /* Aire Beige Tablet - Separar del Navbar Negro */ .service-page { margin-top: 110px !important; background-color: white !important; border-radius: 20px !important; box-shadow: var(--shadow-soft) !important; /* Padding generoso para el contenido */ padding: 60px 80px !important; margin-bottom: 80px !important; /* Expansión total similar a servicios */ max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .service-item-premium h3 { font-size: 1.8rem !important; text-align: center !important; margin-bottom: 25px !important; } /* Reducir espacio entre Banner y Título de Servicios */ .services { padding-top: 60px !important; display: grid !important; /* Definimos 2 columnas de tamaño fijo/pequeño para que quepan bien */ grid-template-columns: repeat(2, 340px) !important; /* EL SECRETO PARA CENTRARLO EN LA PÁGINA: */ justify-content: center !important; gap: 30px !important; padding-left: 0 !important; padding-right: 0 !important; } /* El título de la sección ocupa las 2 columnas y se centra */ .section-title { grid-column: span 2 !important; text-align: center !important; } /* Convertimos cada fila en una "tarjeta" vertical */ .service-row { flex-direction: column !important; margin-bottom: 0 !important; padding: 20px !important; height: 100% !important; text-align: left !important; /* Alineado a la izquierda */ align-items: flex-start !important; /* Empezar en el borde izquierdo de la tarjeta */ gap: 12px !important; max-width: 340px !important; /* Ajustado al ancho de columna */ width: 100% !important; } .service-img { width: 100% !important; height: 200px !important; margin-bottom: 10px !important; overflow: hidden !important; /* Asegurar que nada se salga del borde redondeado */ } .service-img img { object-fit: contain !important; object-position: center 0% !important; /* Al techo absoluto del recuadro */ padding-top: 0 !important; /* Sin aire arriba */ padding-bottom: 25px !important; /* Empuje base */ margin-top: -50px !important; /* ELEVACIÓN MÁXIMA PARA LA MAYORÍA */ } /* AJUSTE INDIVIDUAL PARA CARTA NATAL (Ajuste milimétrico final) */ #servicio-natal-adulto .service-img img { margin-top: -45px !important; } /* AJUSTE INDIVIDUAL PARA TAROT (Un pelín más arriba que el resto) */ #servicio-tarot .service-img img { margin-top: -65px !important; } .service-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; /* Contenido pegado a la izquierda */ justify-content: flex-start !important; /* Pegamos todo arriba para evitar huecos blancos */ height: 100% !important; } .service-content h3 { font-size: 1.3rem !important; margin-bottom: 10px !important; text-align: left !important; /* CORREGIDO A LA IZQUIERDA - TABLET */ width: 100% !important; } .service-content p { font-size: 0.88rem !important; margin-bottom: 20px !important; line-height: 1.5 !important; letter-spacing: 0px !important; /* De corrido */ text-align: left !important; /* Lectura a la izquierda */ } /* Centramos el último servicio (Canalización) que queda solo */ #servicio-canalizacion { grid-column: 1 / -1 !important; max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; } /* Separar botón del párrafo anterior y ALINEARLOS AL FONDO (Pedido Sole) */ .service-buttons { margin-top: auto !important; /* EMPUJA EL BOTÓN HACIA ABAJO */ padding-top: 25px !important; /* Respiro mínimo con el texto */ width: 100% !important; display: flex !important; justify-content: center !important; } .btn-dark { font-size: 0.85rem !important; padding: 10px 20px !important; } .audio-player-premium { width: fit-content !important; min-width: 320px !important; /* Estirado solicitado */ max-width: 65% !important; /* Un poco más largo para tablet */ padding: 10px 22px !important; /* Más aire interno */ margin-left: auto !important; margin-right: auto !important; margin-top: -15px !important; } .price-grid { margin-left: auto !important; margin-right: auto !important; } }}/* TÍTULOS DE SECCIÓN - Subrayado grueso estilo Mockup */.section-title { text-align: center; margin-bottom: 70px;}.section-title span { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; color: var(--accent-color); text-transform: uppercase; position: relative; padding-bottom: 20px;}.section-title span::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 5px; background: var(--accent-color); border-radius: 2px;}/* SECCIÓN SERVICIOS PREMIUM */.services { padding: 140px 8%; background-color: var(--bg-color);}.service-row { display: flex; align-items: center; background: var(--white); padding: 40px; border-radius: 20px; box-shadow: var(--shadow-soft); justify-content: space-between; gap: 60px; margin-bottom: 80px; max-width: 1100px; margin-left: auto; margin-right: auto; transition: var(--transition); scroll-margin-top: 120px;}.service-row:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);}.service-img { width: 320px; height: 320px; flex-shrink: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);}.service-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--transition);}.service-img:hover img { transform: scale(1.05);}.service-content h3 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; margin-bottom: 20px; color: var(--text-color);}.service-content p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 40px; line-height: 1.8;}/* MODIFICACIÓN: SECCIÓN ESPECIAL TAROT (Cuadrícula 2x2) */.service-row-column { background: var(--white); padding: 60px 45px; border-radius: 20px; box-shadow: var(--shadow-soft); margin-bottom: 80px; max-width: 1150px; margin-left: auto; margin-right: auto; transition: var(--transition); display: flex; flex-direction: column;}.service-content-full { text-align: center; max-width: 850px; margin: 0 auto 50px;}.service-content-full h3 { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; margin-bottom: 25px; color: var(--text-color); text-transform: uppercase;}.service-content-full p { font-size: 1.2rem; color: var(--text-muted); line-height: 1.8;}.tarot-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; max-width: 1000px; margin: 0 auto;}@media (max-width: 768px) { .tarot-mini-grid { grid-template-columns: 1fr; } .service-row-column { padding: 40px 20px; }}.service-buttons { display: flex; gap: 20px;}/* BOTÓN BÁSICO (Para Servicios) */.btn-primary { display: inline-block; padding: 12px 30px; background-color: var(--button-yellow); color: var(--text-color); text-decoration: none; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 40px; transition: all 0.3s ease; margin-top: auto;}.btn-primary:hover { background-color: var(--text-color); color: var(--white); transform: translateY(-3px);}/* BOTONES CON EFECTO WHATSAPP */.btn-dark { background-color: var(--button-yellow); color: var(--text-color); padding: 16px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; border: 2px solid var(--button-yellow); transition: var(--transition); cursor: pointer; display: inline-block;}/* Aquí implementamos lo solicitado: Cambio a Negro con letras blancas al tocar */.btn-dark:hover,.btn-dark:active { background-color: var(--text-color); border-color: var(--text-color); color: var(--white); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}.btn-yellow { background-color: var(--button-yellow); color: var(--text-color); padding: 16px 35px; border-radius: 50px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; border: none; transition: var(--transition); cursor: pointer; display: inline-block;}.btn-yellow:hover { background-color: var(--text-color); /* Negro */ color: var(--white); /* Blanco */ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}.quote-section { padding: 65px 8%; background: url('fondo-frase.png') no-repeat center center; background-size: cover; background-attachment: scroll; /* Ahora la imagen se mueve normalmente con la página */ text-align: center; position: relative; overflow: hidden; scroll-margin-top: 100px;}/* Overlay suave para mejorar legibilidad si es necesario */.quote-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); /* Un velo blanco muy sutil */ z-index: 1;}.quote-text { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; /* Un poco más grande al ser una fuente más estrecha */ font-weight: 400; font-style: italic; color: var(--text-color); text-align: center; line-height: 1.4; letter-spacing: 0.2px;}.quote-author { position: relative; z-index: 2; margin-top: 50px; font-family: var(--font-main); font-size: 0.95rem; font-weight: 700; color: var(--text-color); /* Color oscuro para legibilidad */ text-transform: uppercase; letter-spacing: 6px; display: block;}/* Línea decorativa sobre el autor */.quote-author::before { content: ''; display: block; width: 40px; height: 2px; background: var(--accent-color); margin: 0 auto 20px;}/* SOBRE MI - DISEÑO EDITORIAL */.about { padding: 140px 8%; background-color: var(--bg-color);}.about-grid { display: grid; grid-template-columns: 1.2fr 1.4fr; /* Agrandada la columna de la foto */ gap: 80px; max-width: 1200px; margin: 0 auto; align-items: flex-start;}.about-img-container { position: sticky; top: 100px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 0, 0, 0.05); aspect-ratio: 1 / 1; /* Forzamos formato cuadrado */}.about-img-container img { width: 100%; height: 100%; /* Ocupa todo el contenedor cuadrado */ object-fit: cover; /* Centra y recorta si es necesario */ display: block; transition: var(--transition);}.about-text-container { font-size: 1.15rem; line-height: 1.9; color: var(--text-muted);}.about-text-container p { margin-bottom: 25px;}@media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 50px; } .about-img-container { position: static; max-width: 600px; margin: 0 auto; }}/* ESPECÍFICO TABLET: Tamaños y separaciones de secciones */@media (min-width: 601px) and (max-width: 1024px) { .about { padding: 50px 8% 0 !important; /* Subimos la sección mas cerca */ } .about .section-title { margin-bottom: 70px !important; /* Corregido para tablet */ } .about-img-container { max-width: 450px !important; aspect-ratio: 1 / 1 !important; } .about-img-container img { height: 100% !important; object-fit: cover !important; } .blog { padding: 60px 8% 40px !important; /* Subimos el aire arriba para que el título baje */ }}/* SECCIÓN BLOG EDITORIAL */.blog { padding: 120px 8%; background-color: var(--white);}.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 35px; max-width: 1200px; margin: 0 auto;}.blog-card { background: var(--white); border-radius: 20px; overflow: hidden; transition: var(--transition); border: 1px solid rgba(0, 0, 0, 0.05); display: flex; flex-direction: column;}.blog-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}.blog-card-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden;}.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition);}.blog-card:hover .blog-card-img img { transform: scale(1.05);}.img-placeholder { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(45deg, #E6E0CB, #ffffff); display: flex; align-items: center; justify-content: center; color: rgba(60, 62, 66, 0.3); font-weight: 600;}.card-body { padding: 5px 25px 25px; display: flex; flex-direction: column; flex-grow: 1;}.blog-card h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--text-color); margin-bottom: 12px; line-height: 1.4; text-transform: none;}.blog-card p { font-size: 1rem; color: var(--text-muted); margin-bottom: 25px; line-height: 1.6;}/* PÁGINAS DE DETALLES DE SERVICIO - UNIFICADAS */.service-page { max-width: 900px; margin: 140px auto 80px; padding: 60px 80px; background-color: var(--white); border-radius: 20px; box-shadow: var(--shadow-soft); position: relative;}/* Reducir espacio superior específico para biblioteca de nombres */.library-main { margin-top: 80px !important; padding-top: 20px !important; background: transparent !important; box-shadow: none !important; padding-left: 130px !important; padding-right: 130px !important;}.service-page h1 { font-family: var(--font-heading); color: var(--accent-color) !important; /* CAFÉ GLOBAL - SOLO ESTO */ margin-top: 0 !important; margin-bottom: 35px; font-size: 3rem; text-transform: uppercase; font-weight: 700; position: relative; display: block; padding-bottom: 12px; text-align: left; /* ÚNICO A LA IZQUIERDA */}.service-page h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 6px; background: var(--accent-color);}.service-page h2 { font-family: var(--font-heading); color: var(--accent-color); margin: 60px 0 25px; font-size: 1.8rem; font-weight: 700;}.service-page h3 { font-family: var(--font-heading); color: var(--text-color); margin: 40px 0 20px; font-size: 1.8rem; font-weight: 700;}.service-page p { margin-bottom: 30px; font-size: 1.2rem; color: var(--text-muted); line-height: 2; text-align: left;}/* PÁGINA DE DETALLE DE BLOG (ARTÍCULO) */.blog-post { max-width: 900px; margin: 160px auto 80px; padding: 80px; background-color: var(--white); border-radius: 20px; box-shadow: var(--shadow-soft); position: relative;}.blog-post h1 { font-family: var(--font-heading); color: var(--text-color); margin-top: 30px; margin-bottom: 20px; font-size: 2.2rem; text-transform: uppercase; font-weight: 700; line-height: 1.2;}/* Unified layout for blog main container */.blog-main { padding: 140px 5% 80px; max-width: 1200px; margin: 0 auto; min-height: 80vh;}.blog-date { color: #888; font-size: 0.9rem; margin-bottom: 40px; display: block; text-transform: uppercase; letter-spacing: 2px; font-weight: 600;}.blog-post h2 { font-family: var(--font-heading); color: var(--accent-color); margin: 60px 0 25px; font-size: 1.8rem; font-weight: 700; text-transform: uppercase;}.blog-post h3 { font-family: var(--font-heading); color: var(--accent-color); margin: 40px 0 20px; font-size: 1.5rem; font-weight: 700; text-transform: uppercase;}.blog-post p { margin-bottom: 30px; font-size: 1.2rem; color: var(--text-muted); line-height: 2; text-align: justify;}.blog-post-img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 40px; box-shadow: var(--shadow-soft); display: block;}/* REDISEÑO DEL BOTÓN "VOLVER" */.back-link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 40px !important; margin-bottom: 20px !important; padding: 12px 25px; background-color: var(--accent-color); border-radius: 50px; color: var(--white) !important; font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1.5px; transition: var(--transition); border: none; box-shadow: 0 5px 15px rgba(209, 172, 117, 0.3);}.back-link:hover { background-color: var(--text-color); color: var(--white) !important; transform: translateX(-8px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}.btn-inline-whatsapp { display: inline-block; background-color: var(--accent-color); color: var(--text-color); padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; margin: 20px 0; transition: var(--transition); border: none; cursor: pointer;}.btn-inline-whatsapp:hover { transform: translateY(-3px); background-color: var(--text-color); color: var(--white); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.list-styles { font-size: 1.15rem; color: var(--text-muted); line-height: 1.9; padding-left: 40px; margin-bottom: 30px;}.list-styles li { margin-bottom: 15px;}.list-styles li::marker { color: var(--accent-color); font-size: 1.4rem;}.btn-readmore { font-family: var(--font-main); font-size: 0.85rem; color: var(--accent-color); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition);}.btn-readmore:hover { color: var(--text-color);}.social-links { margin: 30px 0; display: flex; justify-content: center; gap: 30px; padding: 0;}.social-links a { color: var(--bg-color); text-decoration: none; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; opacity: 0.8;}.social-links a:hover { color: var(--accent-color); transform: translateY(-5px); opacity: 1;}.social-links svg { width: 28px; height: 28px; stroke-width: 1.5px;}.btn-disabled { display: inline-block; background-color: #ccc; color: #888; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; cursor: not-allowed; pointer-events: none;}/* FOOTER REFINADO */footer,.site-footer { background-color: #3C3E42; color: var(--bg-color); text-align: center; padding: 60px 8% 40px;}.copyright { color: var(--white) !important; opacity: 0.6; font-size: 0.8rem; margin-top: 40px; letter-spacing: 1px; text-transform: uppercase;}.footer-subtitle { font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; letter-spacing: 4px; color: var(--white); opacity: 0.8; margin-bottom: 5px; text-transform: uppercase; display: block;}.btn-whatsapp-footer { display: inline-block; background-color: var(--bg-color); color: var(--text-color); padding: 20px 50px; border-radius: 50px; font-weight: 700; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: var(--transition);}.btn-whatsapp-footer:hover { background-color: var(--text-color); color: var(--white); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);}/* COMPACT FOOTER (MOBILE - Sincronizado para todo el sitio) */@media (max-width: 600px) { .site-footer { padding: 20px 8% 15px !important; } .footer-subtitle { margin-bottom: 0 !important; font-size: 0.75rem !important; letter-spacing: 2px !important; } .site-footer div { margin: 15px 0 !important; } .btn-whatsapp-footer { padding: 10px 30px !important; font-size: 0.80rem !important; height: auto !important; width: fit-content !important; min-width: 0 !important; display: inline-block !important; } .social-links { margin: 15px 0 !important; gap: 20px !important; } .copyright { margin-top: 15px !important; font-size: 0.65rem !important; }}@media (max-width: 900px) { .service-row { flex-direction: column; padding: 30px; gap: 30px; } .service-img { width: 100%; height: 300px; } .blog-grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 600px) { .navbar { padding: 15px 5%; } .navbar nav ul { gap: 15px; } .section-title span { font-size: 2.22rem; } .blog-grid { grid-template-columns: 1fr; } .hero-title { font-size: 12vw; }}/* SELLO ÉTICO TAROT */.ethical-seal-container { margin-top: 80px;}.ethical-seal { max-width: 350px; height: auto; display: block; margin: 0 auto; mix-blend-mode: multiply; /* Elimina automáticamente el fondo blanco */ filter: contrast(1.05); /* Un toque de nitidez extra */ cursor: default;}/* Dropdown Styles */.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: rgba(60, 62, 66, 0.98); /* Color igual a la navbar */ min-width: 260px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3); z-index: 1000; top: 100%; left: 0; border-top: 2px solid var(--accent-color); padding: 10px 0;}.dropdown-content a { color: #ffffff !important; padding: 12px 20px; text-decoration: none; display: block; font-size: 0.8rem; text-align: left; transition: all 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.05);}.dropdown-content a:last-child { border-bottom: none;}.navbar nav .dropdown-content a:hover,.navbar-interna nav .dropdown-content a:hover { background-color: var(--accent-color) !important; color: var(--white) !important; padding-left: 25px;}.dropdown:hover .dropdown-content { display: block;}/* Responsive adjustment for mobile */@media (max-width: 768px) { .dropdown-content { position: static; display: none; width: 100%; background-color: rgba(0, 0, 0, 0.2); box-shadow: none; } .dropdown:hover .dropdown-content { display: block; }}/* Biblioteca de Nombres Filters */.filter-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;}.filter-btn { background: white; border: 3px solid var(--accent-color); color: var(--text-color); padding: 12px 28px; border-radius: 50px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-transform: uppercase; letter-spacing: 1px;}.filter-btn:hover,.filter-btn.active { background-color: var(--accent-color); color: white; box-shadow: 0 4px 10px rgba(190, 152, 130, 0.3);}.name-item { background: white; padding: 25px; border-radius: 20px; box-shadow: var(--shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(190, 152, 130, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; cursor: pointer; min-height: 120px;}.name-item:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); border-color: var(--accent-color);}.name-item strong { display: block; color: var(--accent-color); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 8px; font-weight: 700;}.name-item span { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;}.name-item span { font-size: 0.85rem; color: #777; display: block; margin-top: 5px;}/* SECCIÓN DE VIDEOS (CANALIZACIÓN) */.video-section { margin: 80px 0; text-align: center;}.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 35px; margin-top: 40px;}.video-card { background: var(--white); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition);}.video-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}.iframe-container { position: relative; padding-bottom: 56.25%; /* Aspect Ratio 16:9 */ height: 0; overflow: hidden; border-radius: 20px 20px 0 0;}.iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}.video-info { padding: 10px 25px 30px; background: #fff; text-align: left;}.video-info h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--accent-color); margin-bottom: 12px; line-height: 1.4; text-transform: none;}.video-info p { font-size: 1rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.6;}/* --- NUEVOS ESTILOS PARA FILAS INDIVIDUALES Y AUDIO --- */.service-item-premium { display: grid; grid-template-columns: 280px 1fr; /* Image fixed at 280px (square), content takes rest */ gap: 30px 40px; /* Narrower gap */ background: var(--white); padding: 35px 50px; /* Reduced vertical padding (35px) */ border-radius: 20px; box-shadow: var(--shadow-soft); margin-bottom: 80px; align-items: start; /* Align to top instead of stretch */ text-align: left; max-width: 100%;}.service-item-premium h3 { grid-column: 1 / -1; /* SPAN BOTH COLUMNS */ margin: 0 0 20px 0; /* Minimized margins */ padding: 0; font-size: 1.8rem; color: #000; /* NEGRO PURO */ text-align: left; /* IZQUIERDA */}.service-media { display: flex; flex-direction: column; gap: 25px;}.service-item-content { display: flex; flex-direction: column; gap: 25px; align-self: center; /* V-CENTER: Perfectly centers prices when there is no audio */ width: 100%;}.service-item-premium:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);}.service-item-premium .service-img-container { width: 280px; height: 280px; /* Forced Square */ border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}.service-item-premium .service-img-container img { width: 100%; height: 100%; object-fit: cover; /* Back to cover but without min-height it will be shorter */ display: block; transition: var(--transition);}.service-item-premium h3 { grid-column: 1 / -1; /* SPAN ALL COLUMNS */ text-align: center; /* CENTRADO ORIGINAL */ font-family: var(--font-heading); font-size: 2.5rem; color: #3C3E42; /* NEGRO GRAFITO */ margin-bottom: 40px; text-transform: uppercase; line-height: 1.1; letter-spacing: -1px;}/* GRILLA DE PRECIOS MULTIMONEDA */.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 prices in a row as requested */ gap: 12px; width: 100%;}.price-item { background: #fffcf8; border: 3px solid #be9882; padding: 12px 10px; border-radius: 12px; text-align: center; transition: var(--transition); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--text-color); min-width: 100px;}.price-item:hover { background: #fffcf8; border-color: #be9882;}.currency-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-color); opacity: 0.8; font-weight: 700;}.price-value { display: block; font-size: 1.5rem; font-weight: 900; color: #be9882; white-space: nowrap; /* CRITICAL: keep "U$S 95" in one line */}.service-description-long { grid-column: 1 / -1; /* Ocupa todo el ancho */ font-size: 1.15rem; line-height: 1.9; color: var(--text-muted); margin-top: 20px; margin-bottom: 10px;}.service-item-premium .btn-dark { grid-column: 1 / -1; /* Ocupa todo el ancho */ justify-self: center; /* Centrado horizontalmente */ margin-top: 10px; min-width: 300px; text-align: center;}/* REPRODUCTOR DE AUDIO - ELEGANTE */.audio-player-premium { background: #fffcf8; padding: 15px 25px; border-radius: 12px; display: flex; align-items: center; gap: 15px; border: 3px solid #be9882; margin-top: 10px; /* Reduced margin to keep it tight below prices */ width: 100%; /* Ensure it spans the content column */}.play-pause-btn { background: var(--accent-color); /* Accent color button */ border: none; width: 44px; height: 44px; border-radius: 8px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0;}.play-pause-btn:hover { background: black; transform: scale(1.05);}.audio-progress-container { flex-grow: 1;}.audio-label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-color); margin-bottom: 8px;}.progress-track { height: 4px; background: rgba(190, 152, 130, 0.2); border-radius: 2px; position: relative; cursor: pointer;}.progress-fill { height: 100%; background: var(--accent-color); border-radius: 2px; width: 0%; transition: width 0.1s linear;}@media (max-width: 1024px) { .service-item-premium { grid-template-columns: 1fr; padding: 40px 30px; gap: 30px; } .service-item-premium .service-img-container { position: static; max-width: 400px; margin: 0 auto; aspect-ratio: 1/1; } .service-item-premium h3 { font-size: 2rem !important; text-align: center !important; color: #3C3E42 !important; } .service-item-premium .btn-dark { margin-top: -5px !important; /* SUBIMOS EL BOTÓN */ margin-bottom: 40px !important; /* AIRE DESPUÉS DEL BOTÓN */ min-width: 300px !important; }}/* ========================================================================== MODAL DE BÚSQUEDA SIN RESULTADOS (POP-UPS) ========================================================================== */.search-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(60, 62, 66, 0.85); /* Slate gray dark overlay */ backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 21000; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}.search-modal-overlay.active { opacity: 1; visibility: visible;}.search-modal-content { background: #F8F1C3; /* Matching the site bg */ width: 90%; max-width: 500px; padding: 60px 40px; border-radius: 30px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4); position: relative; text-align: center; transform: translateY(20px) scale(0.95); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(190, 152, 130, 0.3);}.search-modal-overlay.active .search-modal-content { transform: translateY(0) scale(1);}.search-modal-close { position: absolute; top: 25px; right: 25px; background: transparent; border: none; font-size: 2.2rem; color: var(--text-color); cursor: pointer; line-height: 1; opacity: 0.6; transition: 0.3s;}.search-modal-close:hover { opacity: 1; transform: rotate(90deg);}.search-modal-icon { width: 80px; height: 80px; background: transparent; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; color: #be9882; border: 1px solid rgba(190, 152, 130, 0.4);}.modal-accent-line { width: 40px; height: 2px; background: #be9882; margin: 0 auto 25px; opacity: 0.6;}.search-modal-content h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--text-color); margin-bottom: 20px; letter-spacing: -1px; text-transform: capitalize; font-weight: 400; font-style: italic;}.search-modal-content p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 15px;}.modal-secondary-text { font-size: 0.95rem !important; opacity: 0.8; margin-top: 20px; margin-bottom: 40px !important;}.search-modal-buttons { display: flex; flex-direction: column; gap: 15px; align-items: center;}.btn-outline { background: transparent; border: 2px solid #be9882; color: #be9882; padding: 15px 30px; border-radius: 50px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; cursor: pointer; transition: 0.3s; width: 100%; max-width: 320px;}.btn-outline:hover { background: #be9882; color: #FFF;}.btn-whatsapp-modal { background: #3C3E42; color: #FFF; padding: 16px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; width: 100%; max-width: 320px; transition: 0.3s;}/* ========================================================================== MÁXIMO REFUERZO DE DISEÑO - VISTA TABLET FINAL ========================================================================== */@media (max-width: 1024px) { /* Título Maestro de Arriba - Solo Izquierda y CAFÉ (Prueba) */ .service-page h1 { text-align: left !important; color: var(--accent-color) !important; /* PRUEBA DE COLOR CAFÉ */ position: relative; padding-bottom: 25px; font-size: 2.2rem !important; display: block !important; } .service-page h1::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100px; height: 5px; background: var(--accent-color); border-radius: 2px; } /* Títulos de Secciones Principales (Sobre Mí, Blogs, Servicios) - CAFÉ (Pedido Sole) */ .section-title span { color: var(--accent-color) !important; text-align: center !important; } /* Galería de Nombres - ADN 30 DE MARZO PARTE 5 (Pedido Sole) */ #galeria-nombres h2, .banner-content h2 { color: #FFF !important; font-size: 2.5rem !important; letter-spacing: 5px !important; margin-bottom: 40px !important; text-align: center !important; font-weight: 700 !important; } /* Unificación de Texto - ARTÍCULOS (Pedido Sole) - BLINDAJE MÁXIMO */ .blog-card .card-body p, .blog-card p { font-size: 0.88rem !important; /* IGUAL QUE LOS SERVICIOS */ line-height: 1.6 !important; } /* Separación de Párrafos en Artículos (Senderos y otros) - Pedido Sole */ .blog-post p { margin-bottom: 32px !important; /* MÁS EQUILIBRADO Y ELEGANTE */ } /* Unificación de Texto dentro de Artículos (Pedido Sole) - MÁS COMPACTO */ .blog-post p, .list-styles li, .list-styles { font-size: 1rem !important; /* MÁS PEQUEÑO Y REFINADO */ line-height: 1.8 !important; } /* Dar aire a la frase final de los artículos (Pedido Sole) */ .blog-post p[style*="font-weight: bold"], .blog-post p[style*="font-weight:bold"] { margin-top: 70px !important; /* MÁS AIRE PARA QUE RESPIRE */ } /* Títulos secundarios - Centrados y NEGRO GRAFITO */ .service-item-premium h3, .service-content h3 { text-align: center !important; color: #3C3E42 !important; /* NEGRO GRAFITO MATE */ font-size: 1.8rem !important; margin-bottom: 30px !important; } /* Blindamos el Título Maestro de Arriba para que siga CAFÉ */ .service-page h1 { color: var(--accent-color) !important; text-align: left !important; } /* DESPLAZAMIENTO HACIA ARRIBA - CARTA NATAL ADULTO (Pedido Sole) */ .service-item-premium:first-of-type .service-img-container img { object-fit: cover !important; /* Llenar cuadro */ object-position: center 82% !important; /* REAJUSTADO UN PELÍN MÁS ABAJO */ background-color: transparent !important; padding: 0 !important; /* Sin bordes */ } /* DESPLAZAMIENTO HACIA ARRIBA - TRÁNSITO ENERGÉTICO (Pedido Sole) */ .service-item-premium:nth-of-type(2) .service-img-container img { object-fit: cover !important; object-position: center 92% !important; /* SUBE LA IMAGEN UN POCO MÁS */ background-color: transparent !important; padding: 0 !important; } /* DESPLAZAMIENTO HACIA ABAJO - COMBO NUMEROLÓGICO (Pedido Sole) */ .service-item-premium:nth-of-type(3) .service-img-container img { object-fit: cover !important; object-position: center 16% !important; /* REAJUSTADO - UN PELÍN HACIA ABAJO */ background-color: transparent !important; padding: 0 !important; } /* DESPLAZAMIENTO HACIA ARRIBA - PACK DOBLE (Pedido Sole) */ .service-item-premium:nth-of-type(4) .service-img-container img { object-fit: cover !important; object-position: center 95% !important; /* SUBE LA IMAGEN UN POCO MÁS */ background-color: transparent !important; padding: 0 !important; } /* DESPLAZAMIENTO HACIA ARRIBA - PACK MATERNAL (Pedido Sole) */ .service-item-premium:nth-of-type(5) .service-img-container img { object-fit: cover !important; object-position: center 95% !important; /* SUBE LA IMAGEN UN POCO MÁS */ background-color: transparent !important; padding: 0 !important; }}/* ========================================================================== REFUERZO FINAL - VISTA PC (Zoom 85% & Armonía Superior) ========================================================================== */@media (min-width: 1025px) { /* ESCALADO MAESTRO 85% (Efecto Zoom Global PC) - A pedido Sole */ body { zoom: 0.85; -moz-transform: scale(0.85); -moz-transform-origin: top center; } /* UNIFICACIÓN DE ANCHOS Y MÁRGENES (Base PC) */ .services-container, .service-page, .name-detail-card { max-width: 900px !important; margin: 110px auto 80px !important; padding: 60px 80px !important; } /* COMPACTACIÓN EXCLUSIVA - BLOG POST PC (Pedido Sole) */ .blog-post { max-width: 900px !important; margin: -15px auto 80px !important; /* Elevación extrema bajo demanda (PC) */ padding: 60px 80px 60px !important; /* Manteniendo elegancia interna */ } /* AMPLIACIÓN ESPECÍFICA - BLOG MAIN PC */ .blog-main { max-width: 1200px !important; margin: 140px auto 80px !important; padding: 60px 5% !important; } /* AMPLIACIÓN ESPECÍFICA - SOBRE MÍ PC (Mantiene Proporción Ampliada) */ .about-grid { max-width: 1100px !important; margin: 40px auto 80px !important; padding: 40px 60px !important; } .library-main #nameSearchPage { font-size: 1.0rem !important; padding: 12px 20px 12px 50px !important; max-width: 450px !important; margin: 0 auto !important; } .library-main { max-width: 900px !important; margin: 110px auto 80px !important; /* Espacio beige arriba igual que servicios */ padding: 0 !important; } /* UNIFICACIÓN GLOBAL DE DESCRIPCIONES (Solo PC) - Pedido Sole */ .about, .about-text-container p, .service-content p, .service-description-long p, .blog-card p, .card-body p, .service-page p, .blog-post p, .video-section p, .video-info p, .list-styles, .list-styles li, .intro, .intro p, .gallery-intro-text, .carta-natal-page .service-page p, .carta-natal-page .service-content p, .name-detail-card p, #detailMeaning, .detail-meaning { font-size: 0.95rem !important; color: #333 !important; /* Negro Grafito en PC */ line-height: 1.8 !important; } .discount-text { font-size: 1.15rem !important; } .blog-grid { grid-template-columns: repeat(3, 1fr) !important; /* Forzamos 3 artículos por fila en PC */ } .footer-subtitle { margin-bottom: 30px !important; /* Equilibrio de separación en PC */ } .search-library-title { color: #be9882 !important; /* Color Café vibrante en PC */ } .blog-card h3 { margin-top: 0 !important; /* Achicamos espacio arriba del título */ } .card-body { padding-top: 15px !important; /* Compactamos el aire interno de la tarjeta */ }} /* COMPACTAR SERVICIOS (SOLO CELULAR) */ @media (max-width: 600px) { #premium-carta-natal-adulto, #combo-adulto, #combo-pag, #combo-infantil, #transito-pag, #premium-transito-natal, #pack-doble, #pack-maternal, #natal-infantil, #pack-maternal-inf { padding: 15px 12px !important; gap: 12px !important; } #premium-carta-natal-adulto h3, #combo-adulto h3, #combo-pag h3, #combo-infantil h3, #transito-pag h3, #premium-transito-natal h3, #pack-doble h3, #pack-maternal h3, #natal-infantil h3, #pack-maternal-inf h3 { margin-bottom: 12px !important; font-size: 1.55rem !important; } #premium-carta-natal-adulto .service-img-container, #combo-adulto .service-img-container, #combo-pag .service-img-container, #combo-infantil .service-img-container, #transito-pag .service-img-container, #premium-transito-natal .service-img-container, #pack-doble .service-img-container, #pack-maternal .service-img-container, #natal-infantil .service-img-container, #pack-maternal-inf .service-img-container { max-width: 250px !important; margin-bottom: 25px !important; } #premium-carta-natal-adulto .price-grid, #combo-adulto .price-grid, #combo-pag .price-grid, #combo-infantil .price-grid, #transito-pag .price-grid, #premium-transito-natal .price-grid, #pack-doble .price-grid, #pack-maternal .price-grid, #natal-infantil .price-grid, #pack-maternal-inf .price-grid { gap: 6px !important; } #premium-carta-natal-adulto .price-item, #combo-adulto .price-item, #combo-pag .price-item, #combo-infantil .price-item, #transito-pag .price-item, #premium-transito-natal .price-item, #pack-doble .price-item, #pack-maternal .price-item, #natal-infantil .price-item, #pack-maternal-inf .price-item { padding: 2px !important; min-height: auto !important; } #premium-carta-natal-adulto .currency-label, #combo-adulto .currency-label, #combo-pag .currency-label, #combo-infantil .currency-label, #transito-pag .currency-label, #premium-transito-natal .currency-label, #pack-doble .currency-label, #pack-maternal .currency-label, #natal-infantil .currency-label, #pack-maternal-inf .currency-label { font-size: 0.5rem !important; margin-bottom: 1px !important; line-height: 1 !important; } #premium-carta-natal-adulto .price-value, #combo-adulto .price-value, #combo-pag .price-value, #combo-infantil .price-value, #transito-pag .price-value, #premium-transito-natal .price-value, #pack-doble .price-value, #pack-maternal .price-value, #natal-infantil .price-value, #pack-maternal-inf .price-value { font-size: 1.15rem !important; } #premium-carta-natal-adulto .audio-player-premium, #combo-adulto .audio-player-premium, #combo-pag .audio-player-premium, #combo-infantil .audio-player-premium, #transito-pag .audio-player-premium, #premium-transito-natal .audio-player-premium, #pack-doble .audio-player-premium, #pack-maternal .audio-player-premium, #natal-infantil .audio-player-premium, #pack-maternal-inf .audio-player-premium { padding: 10px 15px !important; } /* ACHICAR TÃÍTULOS DE SERVICIOS PARA QUE ENTREN EN UNA LÃÍNEA */ .service-page h1 { font-size: 1.65rem !important; white-space: nowrap !important; } /* AJUSTE ESPECIAL PARA TÃÍTULO LARGO EN BIBLIOTECA */ .library-main .service-page h1 { font-size: 1.35rem !important; } /* COMPACTAR Y SINCRONIZAR SECCIONES DE BLOG (INICIO Y GALERà DA) */ .blog, #blog, .blog-main { padding: 40px 8% !important; margin-top: 0 !important; margin-bottom: 0 !important; background-color: var(--bg-color) !important; } /* FONDO BLANCO SOBRE MI EN CELULAR */ .about { background-color: #FFFFFF !important; } .blog-grid { gap: 20px !important; margin-top: 15px !important; width: 100% !important; display: block !important; } .blog-card { width: 70% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 25px !important; border-radius: 12px !important; } .blog-card-img { aspect-ratio: 1 / 1 !important; } .card-body { padding: 12px 15px !important; } .blog-card h3 { font-size: 0.95rem !important; margin-bottom: 5px !important; } /* REFUERZO MÁXIMO: DESCRIPCIONES DE BLOG EN CELULAR */ .blog-card .card-body p, .blog-card p { font-size: 11.5px !important; color: #666 !important; } .blog-post p, .article-body p { font-size: 0.75rem !important; line-height: 1.5 !important; margin-bottom: 25px !important; color: var(--text-color) !important; text-align: left !important; } /* Tà TULOS DEL ARTà CULO (ADENTRO - SOLO CELU) */ .blog-post h1 { font-size: 1.35rem !important; margin-bottom: 20px !important; line-height: 1.2 !important; text-align: center !important; } .blog-post h2 { font-size: 1.12rem !important; margin-top: 25px !important; margin-bottom: 12px !important; text-align: center !important; } .blog-post h3 { font-size: 1.02rem !important; margin-top: 20px !important; margin-bottom: 10px !important; text-align: center !important; } } /* ========================================================================== FIX FINAL: SOLO PARA CELULAR (RESETEO DE MÁRGENES Y CENTRADO PERFECTO) ========================================================================== */ @media (max-width: 600px) { /* Evitar que nada se escape por los lados */ html, body { overflow-x: hidden !important; width: 100% !important; position: relative !important; } /* Centrado total del contenedor principal */ .service-page { padding: 40px 5% 30px 5% !important; margin-top: 80px !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .service-page h1 { text-align: left !important; align-self: flex-start !important; /* Mueve el título a la izquierda del bloque centrado */ font-size: 1.65rem !important; white-space: normal !important; /* Permite que el título baje de línea si es largo */ width: 100% !important; margin-bottom: 25px !important; } .service-page h1::after { left: 0 !important; transform: none !important; width: 60px !important; } .service-item-premium { padding: 25px 5% !important; margin: 0 auto 40px auto !important; /* Centrado con margen auto */ width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; /* HIJO AL CENTRO */ text-align: center !important; background-color: #FFFFFF !important; border-radius: 20px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; gap: 12px !important; /* Más pegadito todo */ } .service-item-premium h3 { font-size: 1.45rem !important; margin-bottom: 20px !important; text-align: center !important; width: 100% !important; color: var(--text-color) !important; display: block !important; } /* Centrar párrafos directos (ofertas, avisos) en móvil */ .service-item-premium > p { text-align: center !important; width: 100% !important; margin: 10px 0 !important; } .service-img-container { max-width: 220px !important; height: auto !important; margin: 0 auto 25px auto !important; /* IMAGEN CENTRADA */ aspect-ratio: 1/1; width: 100% !important; } .service-img-container img { height: 100% !important; width: 100% !important; object-fit: cover !important; border-radius: 12px !important; } /* PRECIOS: MÁS RECTANGULARES, PEQUEÑOS Y CENTRADOS */ .price-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; max-width: 320px !important; /* Limitamos ancho para que no se estire raro */ margin: 15px auto !important; /* CENTRADO TOTAL */ } .price-item { padding: 4px 2px !important; /* Altura mínima para que sea rectangular horizontal */ min-width: 0 !important; min-height: auto !important; border-width: 2px !important; border-radius: 8px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; /* CONTENIDO AL CENTRO */ } .currency-label { font-size: 0.5rem !important; margin-bottom: 1px !important; line-height: 1 !important; } .price-value { font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1.1 !important; } /* REPRODUCTOR DE AUDIO: CENTRADO Y COMPACTO */ .audio-player-premium { padding: 10px 15px !important; margin: 5px auto 15px auto !important; /* CENTRADO TOTAL */ flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; width: 90% !important; max-width: 320px !important; gap: 12px !important; } .play-pause-btn { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; } .audio-label { font-size: 0.65rem !important; white-space: nowrap !important; margin: 0 !important; } /* DESCRIPCIÓN Y BOTÓN */ .service-description-long { margin-top: 0 !important; /* Elimina espacio entre media y descripción */ width: 100% !important; } .service-description-long p { font-size: 0.82rem !important; line-height: 1.6 !important; text-align: center !important; /* Texto centrado para simetría total */ margin-top: 0 !important; /* Pegado arriba */ margin-bottom: 20px !important; width: 100% !important; } /* Neutralizar márgenes hardcoded del HTML solo en móvil */ .service-description-long div[style*="margin-top"], .service-description-long p[style*="margin-top"] { margin-top: 10px !important; } .btn-dark { font-size: 0.8rem !important; padding: 12px 25px !important; min-width: 260px !important; width: fit-content !important; display: inline-block !important; margin: 0 auto !important; /* BOTÓN AL CENTRO */ } } /* PC/TABLET REFINEMENTS - v5 */ .about { background-color: var(--white) !important; } .blog { background-color: var(--bg-color) !important; } /* PC REFINEMENTS - v8: Achicamos el borde blanco inferior de la sección sobre mi */ @media (min-width: 1025px) { .about { padding-bottom: 60px !important; } } /* Margen inferior extra solo para Tablet (Sobre M) */ @media (min-width: 601px) and (max-width: 1024px) { .about { padding-bottom: 70px !important; } }