Te damos la bienvenida a WordPress. Esta es una entrada de ejemplo. Empieza tu andadura en el mundo bloguero editándola o borrándola. Para añadir más contenido aquí, haz clic en el pequeño icono del signo más situado en la esquina superior izquierda. Allí encontrarás una selección de bloques y patrones de WordPress que se adaptan a todas tus necesidades de creación de contenidos. Y no te olvides de echar un vistazo a la vista de lista: haz clic en el icono que hay unos puntos a la derecha del icono del signo más y obtendrás una lista ordenada y fácil de ver de los bloques y patrones de tu entrada.
IMAGEN Y DISEÑO
Capincho.com – Rediseño Total
/* 1. CONFIGURACIÓN BASE – ADN CAPINCHO */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
:root {
–capincho-pink: #ed217c; /* Color del logo */
–capincho-dark: #1a1a1a;
–capincho-light: #ffffff;
–capincho-accent: #38b6ff; /* Azul celeste para contraste */
–capincho-grey: #f4f4f4;
}
body {
background-color: var(–capincho-dark);
font-family: ‘Lato’, sans-serif;
color: #333;
overflow-x: hidden;
}
.section-container {
width: 100%;
max-width: 1280px;
min-height: 100vh;
margin: 0 auto;
background-color: var(–capincho-light);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 60px;
}
/* 2. TIPOGRAFÍA Y TÍTULOS */
h1, h2, h3 {
font-family: ‘Poppins’, sans-serif;
color: var(–capincho-dark);
}
.slide-title {
font-size: 48px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 40px;
color: var(–capincho-pink);
letter-spacing: -1px;
}
p {
font-size: 20px;
line-height: 1.6;
color: #444;
margin-bottom: 15px;
}
/* 3. LAYOUTS ESPECÍFICOS */
/* Hero / Portada */
.hero-layout {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(–capincho-pink) 0%, #b3165b 100%);
color: white;
padding: 0;
}
.hero-layout img {
width: 280px;
height: 280px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.2);
margin-bottom: 30px;
}
.hero-layout h1 {
color: white;
font-size: 80px;
line-height: 1;
font-weight: 800;
}
.hero-layout .subtitle {
font-size: 24px;
color: rgba(255,255,255,0.9);
margin-top: 15px;
font-weight: 300;
letter-spacing: 4px;
}
/* Separadores de Impacto Oscuros */
.divider-layout {
background-color: var(–capincho-dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 60vh;
}
.divider-layout h2 {
font-size: 60px;
color: var(–capincho-pink);
margin-bottom: 20px;
}
.divider-layout p {
color: white;
font-size: 24px;
}
.divider-layout hr {
width: 150px;
height: 6px;
background-color: var(–capincho-accent);
border: none;
margin-top: 20px;
}
/* Dos Columnas */
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.image-wrapper {
width: 100%;
height: 450px;
border-radius: 20px;
overflow: hidden;
box-shadow: 20px 20px 0 var(–capincho-pink);
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Bloques de Servicios (Grid de 3) */
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 20px;
}
.card-service {
background-color: var(–capincho-grey);
padding: 40px;
border-radius: 25px;
text-align: center;
border-bottom: 6px solid var(–capincho-pink);
transition: transform 0.3s ease;
}
.card-service:hover {
transform: translateY(-10px);
}
.card-service .icon {
font-size: 50px;
color: var(–capincho-pink);
margin-bottom: 20px;
}
.card-service h3 {
font-size: 24px;
margin-bottom: 15px;
}
/* Números Resaltados */
.highlight-numbers {
display: flex;
align-items: center;
gap: 60px;
}
.number-box {
flex: 0 0 40%;
text-align: center;
}
.number {
font-size: 160px;
font-weight: 800;
color: var(–capincho-pink);
line-height: 1;
}
.number-label {
font-size: 24px;
font-weight: 700;
color: var(–capincho-dark);
margin-top: 10px;
}
/* Gráficos de barras de rendimiento */
.bar-container {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
.bar {
display: flex;
align-items: center;
gap: 20px;
}
.bar-label {
width: 250px;
text-align: right;
font-weight: 700;
font-size: 18px;
}
.bar-grow {
height: 40px;
background-color: #eee;
border-radius: 20px;
flex-grow: 1;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, var(–capincho-pink), var(–capincho-accent));
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 25px;
color: white;
font-weight: 700;
}
/* Tabla Comparativa */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background-color: var(–capincho-pink);
color: white;
padding: 22px;
font-size: 22px;
text-align: left;
}
td {
padding: 20px;
border-bottom: 1px solid #ddd;
font-size: 18px;
}
tr:hover {
background-color: var(–capincho-grey);
}
/* Proceso en tres pasos */
.steps-container {
display: flex;
gap: 40px;
margin-top: 20px;
}
.step-block {
flex: 1;
padding: 20px;
border-left: 4px solid var(–capincho-pink);
}
/* FORMULARIO DE CONTACTO */
.contact-section {
background-color: var(–capincho-grey);
align-items: center;
text-align: center;
}
.contact-form {
width: 100%;
max-width: 700px;
margin: 40px auto 0 auto;
background: white;
padding: 50px;
border-radius: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
text-align: left;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
font-family: ‘Poppins’, sans-serif;
font-weight: 700;
margin-bottom: 8px;
color: var(–capincho-dark);
}
.form-group input, .form-group textarea {
width: 100%;
padding: 16px;
border: 2px solid #ddd;
border-radius: 12px;
font-size: 18px;
font-family: ‘Lato’, sans-serif;
transition: border-color 0.3s ease;
}
.form-group input:focus, .form-group textarea:focus {
outline: none;
border-color: var(–capincho-pink);
}
.submit-btn {
width: 100%;
background-color: var(–capincho-pink);
color: white;
border: none;
padding: 18px;
border-radius: 12px;
font-family: ‘Poppins’, sans-serif;
font-size: 20px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.submit-btn:hover {
background-color: #b3165b;
transform: scale(1.01);
}
/* Fondo Decorativo Sutil */
.bg-decor {
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background-color: rgba(237, 33, 124, 0.05);
border-radius: 50%;
z-index: 0;
}
CAPINCHO.COM
DISEÑO GRÁFICO / DESARROLLO WEB / ESTRATEGIA DIGITAL
EL ADN DEL DISEÑO
Donde la robustez técnica se une a la estética de vanguardia.
Robustez y Adaptabilidad
Nuestra Esencia Creativa
Al igual que el carpincho, nuestro diseño es sumamente adaptable a cualquier tipo de ecosistema o mercado. Creamos marcas y soluciones visuales sólidas que sobreviven a las modas pasajeras y se imponen con autoridad frente a la competencia.
No solo nos enfocamos en crear interfaces visualmente impactantes, sino en construir herramientas estratégicas completas que comuniquen absoluta confianza y generen valor real inmediato.
WEB: NUESTRA ESPECIALIDAD
Transformamos líneas de código en experiencias de usuario inolvidables.
Pilares del Éxito Digital
UI/UX Premium
Diseñamos interfaces que fluyen con naturalidad. Priorizamos la usabilidad táctil y la comodidad del usuario sin comprometer jamás la identidad visual.
Código Limpio
Sitios web extremadamente veloces, adaptables y con infraestructura escalable. Implementamos estándares modernos para un rendimiento óptimo.
SEO & Optimización
Un gran diseño no sirve si nadie lo encuentra. Estructuramos la web desde la primera línea de código para que los motores de búsqueda amen tu sitio.
El Peso Real de la Imagen
94%
DE LAS PRIMERAS IMPRESIONES
Tu sitio web es tu carta de presentación digital
Un usuario promedio tarda solo 0.05 segundos en generar un juicio de valor sobre un sitio web tras su ingreso. En Capincho.com, garantizamos que esa primera impresión juegue a favor de tus metas de negocio.
Un desarrollo web genérico o descuidado termina costándole clientes a tu empresa. El diseño profesional de alto nivel es una inversión con retorno garantizado.
Resultados que Hablan por Sí Solos
Analizamos el rendimiento comercial y la experiencia de usuario antes y después de aplicar nuestra metodología de rediseño integral.
El Proceso Creativo
01. Descubrimiento
Analizamos tus metas comerciales, estudiamos a tu audiencia e identificamos tus ventajas competitivas únicas.
02. Prototipado UX
Estructuramos la arquitectura de la información y la navegación del sitio para asegurar un embudo de ventas intuitivo.
03. Desarrollo y Lanzamiento
Diseñamos la capa visual final de alta fidelidad, optimizamos el código y desplegamos tu sitio con soporte continuo.
¿Por qué trabajar con Capincho.com?
| Característica | Otros Estudios / Plantillas | Capincho.com |
|---|---|---|
| Identidad Visual | Estructuras genéricas basadas en templates pre-hechos. | Diseño de interfaz exclusivo y desarrollado a medida. |
| Enfoque Estratégico | Orientado únicamente a cumplir con la estética visual. | Fusión perfecta de arte gráfico y optimización de conversión. |
| Velocidad de Carga | Saturación por exceso de scripts o imágenes sin comprimir. | Optimización milimétrica para un despliegue instantáneo. |
| Soporte Post-Entrega | Tratamiento transaccional, sin seguimiento continuo. | Acompañamiento post-lanzamiento para asegurar la escalabilidad. |
¿LISTO PARA EVOLUCIONAR?
Tu próximo proyecto merece el estándar Capincho.
Nombre Completo / Empresa
Correo Electrónico de Contacto
Teléfono / WhatsApp (Opcional)
Cuéntanos sobre tu proyecto
MONTEVIDEO | DISEÑO Y ESTRATEGIA GLOBAL