/* ============================================================= */ /* Clínica Pradillo — CSS compartido de las PÁGINAS DE SERVICIO */ /* (Capa 2 · hub). Espejo local de: */ /* /wp-content/uploads/paginas-servicio/assets/css/servicio-shared.css */ /* */ /* Estas páginas mantienen Tailwind por CDN; aquí vive solo el */ /* estilo propio (marca, reveal, modal, botón CTA, tarjetas y */ /* el acordeón de FAQ con el mismo look que las landing pages). */ /* NO usa wrapper de scope: las páginas conservan su estructura */ /* de documento completo con . */ /* ============================================================= */ body { font-family: 'Inter', sans-serif; } /* ---- Colores de marca ---- */ .brand-text { color: #404040; } /* Color de texto principal */ .brand-primary { color: #3c6e71; } /* Color primario (verde azulado oscuro) */ .brand-primary-bg { background-color: #3c6e71; } /* Fondo con color primario */ .brand-secondary-bg { background-color: #f7f9f7; } /* Fondo secundario (blanco hueso) */ .brand-accent-gray-bg { background-color: #d9d9d9; } /* Fondo gris de acento */ .brand-accent-pink { color: #ffc9cb; } /* Color rosa de acento */ .brand-accent-pink-bg { background-color: #ffc9cb; } /* Fondo rosa de acento */ .brand-accent-yellow { color: #ffcc00; } /* Color amarillo de acento */ .brand-accent-yellow-bg { background-color: #ffcc00; } /* Fondo amarillo de acento */ /* ---- Animación de aparición (reveal) ---- */ .reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .reveal-right.visible { opacity: 1; transform: translateX(0); } /* ---- Modal / popup ---- */ .modal { display: none; /* Oculto por defecto */ position: fixed; /* Se queda fijo en la pantalla */ z-index: 1000; /* Por encima de otros elementos */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Permite scroll si el contenido es muy largo */ background-color: rgba(0,0,0,0.6); /* Fondo oscuro semitransparente */ animation: fadeIn 0.3s ease-out; /* Animación de aparición */ } .modal-content { background-color: #fefefe; /* Fondo blanco del modal */ margin: 10% auto; /* Centrado vertical y horizontal */ padding: 25px; border: 1px solid #888; /* Borde sutil */ width: 80%; /* Ancho del modal */ max-width: 600px; /* Ancho máximo */ border-radius: 12px; /* Bordes redondeados */ box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra */ position: relative; animation: slideIn 0.3s ease-out; /* Animación de deslizamiento */ } .close-button { color: #aaa; /* Color del botón de cerrar */ float: right; /* Alineado a la derecha */ font-size: 28px; font-weight: bold; cursor: pointer; } .close-button:hover, .close-button:focus { color: #404040; /* Color al pasar el ratón o enfocar */ text-decoration: none; } @keyframes fadeIn { /* Animación para el fondo del modal */ from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { /* Animación para el contenido del modal */ from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============================================================= */ /* ACORDEÓN DE FAQ — mismo estilo que las landing pages */ /* (markup: .faq-item > .faq-question + .faq-answer; abre por JS */ /* vía la clase .active — ver servicio-shared.js / initFAQ) */ /* ============================================================= */ .faq-item { background: white; border-radius: 16px; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); overflow: hidden; border: 2px solid #f7f9f7; transition: all 0.3s ease; } .faq-item.active { border-color: #3c6e71; box-shadow: 0 10px 25px rgba(60, 110, 113, 0.1); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; cursor: pointer; background: white; transition: all 0.3s ease; gap: 1rem; } .faq-question:hover { background: #f7f9f7; } .faq-item.active .faq-question { background: #f7f9f7; } .faq-question h3 { font-size: 1.125rem; font-weight: 700; color: #3c6e71; margin: 0; flex-grow: 1; } .faq-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #3c6e71, #2d5457); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: bold; transition: transform 0.3s ease; flex-shrink: 0; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 2rem; } .faq-item.active .faq-answer { max-height: 500px; padding: 0 2rem 1.5rem 2rem; } .faq-answer p { color: #404040; line-height: 1.8; margin: 0; } /* ---- Botón CTA "Pide tu Cita" ---- */ .cta-button { background-color: #3c6e71; /* Color de fondo normal (brand-primary-bg) */ color: #f7f9f7 !important; /* Color de texto normal: #f7f9f7 (Solicitado con !important) */ height: 50px; /* Altura fija */ min-width: 170px; /* Ancho mínimo */ padding: 0 15px; /* Padding horizontal */ border-radius: 10px; /* Bordes redondeados */ text-decoration: none; /* Sin subrayado */ font-weight: 700; /* Texto en negrita */ font-size: 15px; /* Tamaño de fuente */ text-transform: uppercase; /* Texto en mayúsculas */ line-height: 1; /* Altura de línea para centrado vertical */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */ display: inline-flex; /* Para alinear contenido interno */ align-items: center; /* Centrado vertical del contenido */ justify-content: center; /* Centrado horizontal del contenido */ border: 2px solid #3c6e71; /* Borde del mismo color que el fondo (invisible en estado normal) */ box-sizing: border-box; /* Modelo de caja */ } .cta-button span[role="img"] { /* Estilo para el emoji dentro del botón */ margin-left: 8px; /* Espacio entre el texto y el emoji */ } .cta-button:hover { background-color: white; /* Color de fondo en hover */ color: #3c6e71 !important; /* Color de texto en hover (brand-primary con !important) */ border-color: #3c6e71; /* Color de borde en hover (brand-primary) */ transform: translateY(-2px); /* Efecto de elevación suave */ } /* ---- Tarjetas de beneficios ---- */ .card { background-color: white; border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Sombra suave */ padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones */ display: flex; flex-direction: column; } .card > p { /* Selecciona el párrafo directamente hijo de .card */ flex-grow: 1; /* Permite que el párrafo ocupe el espacio vertical disponible, empujando el botón hacia abajo */ margin-bottom: 1rem; /* Añade un espacio entre el párrafo y el botón */ } .card:hover { transform: translateY(-5px); /* Efecto de elevación */ box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* Sombra más pronunciada */ } .card-button { /* Botones "Leer más" de las tarjetas */ background-color: #3c6e71; /* brand-primary-bg */ color: white; padding: 0.4rem 0.9rem; /* Padding más pequeño */ border-radius: 6px; text-decoration: none; font-weight: 500; /* Ligeramente menos negrita que el CTA principal */ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 2px solid transparent; /* Borde transparente para mantener tamaño en hover */ cursor: pointer; display: inline-block; /* Asegura que el botón tome el ancho de su contenido + padding */ text-align: center; margin-top: auto; /* Empuja el botón hacia abajo en el contenedor flex */ align-self: flex-start; /* Evita que el botón se estire al ancho de la tarjeta y lo alinea a la izquierda */ } .card-button:hover { background-color: white; color: #3c6e71; /* brand-primary */ border: 2px solid #3c6e71; /* brand-primary */ }