/* =========================================
YOLAPATITAS — ESTILOS PRINCIPALES
========================================= */
:root {
--marron: #8c5a3c;
--marron-oscuro: #68432f;
--verde-oliva: #9aa873;
--verde-oliva-oscuro: #7f8e59;
--crema: #f8f5ef;
--crema-rosa: #f3e8e5;
--blanco: #ffffff;
--texto: #5d5149;
}
/* =========================================
BASE
========================================= */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--crema);
color: var(--texto);
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* =========================================
CABECERA + MENÚ
========================================= */
/* =========================================
CABECERA COMPLETA YOLAPATITAS
========================================= */
.encabezado {
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
background: #F8F5EF;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
/* =========================================
BARRA DE NAVEGACIÓN
========================================= */
.barra-navegacion {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 3% 8px 4%;
min-height: 105px;
border-bottom: 1px solid rgba(139, 104, 70, 0.12);
}
/* MARCA PEQUEÑA DEL MENÚ */
.marca-menu {
display: flex;
align-items: center;
gap: 150px;
flex-shrink: 1;
}
.logo-reducido-menu {
display: block;
width: 250px;
height: 250px;
object-fit: contain;
}
.wordmark-menu {
display: block;
width: 430px;
height: auto;
}
/* =========================================
MENÚ
========================================= */
.menu {
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(5px, 1.05vw, 20px);
margin-left: clamp(5px, 2.1vw, 40px);
flex: 0 1 auto;
min-width: 0;
}
.menu a {
color: var(--marron);
text-decoration: none;
font-size: clamp(10px, 0.83vw, 16px);
font-weight: 500;
white-space: nowrap;
transition:
color 0.2s ease,
transform 0.2s ease;
}
.menu a:hover {
color: var(--verde-oliva);
transform: translateY(-1px);
}
/* BOTÓN WHATSAPP */
.menu .boton-whatsapp {
display: inline-block;
background: var(--verde-oliva);
color: #ffffff;
padding: clamp(6px, 0.52vw, 10px)
clamp(9px, 0.94vw, 18px);
border-radius: 999px;
text-decoration: none;
font-size: clamp(10px, 0.68vw, 13px);
font-weight: 500;
white-space: nowrap;
}
.menu .boton-whatsapp:hover {
background: var(--verde-oliva);
color: #ffffff;
}
/* =========================================
BOTÓN MENÚ MÓVIL
========================================= */
.boton-menu-movil {
display: none;
width: 46px;
height: 46px;
padding: 8px;
border: none;
background: transparent;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
}
.boton-menu-movil span {
display: block;
width: 28px;
height: 3px;
background: var(--marron);
border-radius: 3px;
}
/* =========================================
MARCA COMPLETA EN LA BARRA SUPERIOR
========================================= */
.marca-menu {
display: flex;
align-items: center;
gap: clamp(20px, 5.2vw, 100px);
flex: 1 1 auto;
min-width: 0;
}
/* LOGO REDUCIDO */
.logo-reducido-menu {
display: block;
width: clamp(135px, 13vw, 250px);
height: clamp(135px, 13vw, 250px);
object-fit: contain;
flex-shrink: 1;
}
/* WORDMARK */
.wordmark-menu {
display: block;
width: clamp(235px, 22.4vw, 430px);
height: auto;
flex-shrink: 1;
}
/* SILUETAS + FRASE */
.siluetas-con-frase {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.siluetas-con-frase img {
display: block;
width: clamp(190px, 18.2vw, 350px);
max-width: 100%;
height: auto;
}
.siluetas-con-frase .frase-cabecera {
margin: 6px 0 0;
color: var(--marron-oscuro);
font-size: clamp(15px, 1.46vw, 28px);
font-style: italic;
letter-spacing: 0.5px;
white-space: nowrap;
}
/* =========================================
ENCABEZADO - RESPONSIVE CONTINUO
========================================= */
/* -----------------------------------------
DE 2245px HASTA 1601px
El encabezado se adapta progresivamente
----------------------------------------- */
@media (max-width: 2245px) {
.barra-navegacion {
padding-left: clamp(25px, 3vw, 4%);
padding-right: clamp(25px, 3vw, 4%);
}
.marca-menu {
gap: clamp(35px, 4.5vw, 100px);
min-width: 0;
}
.logo-reducido-menu {
width: clamp(180px, 11vw, 250px);
height: clamp(180px, 11vw, 250px);
margin-right: 0;
}
.wordmark-menu {
width: clamp(300px, 19vw, 430px);
}
.siluetas-con-frase {
min-width: 0;
}
.siluetas-con-frase img {
width: clamp(240px, 15.5vw, 350px);
}
.siluetas-con-frase .frase-cabecera {
font-size: clamp(18px, 1.25vw, 28px);
}
.menu {
flex-shrink: 1;
min-width: 0;
gap: clamp(7px, 0.9vw, 20px);
margin-left: clamp(10px, 2vw, 40px);
}
.menu a {
font-size: clamp(11px, 0.72vw, 16px);
}
.menu .boton-whatsapp {
padding: clamp(7px, 0.55vw, 10px)
clamp(10px, 0.8vw, 18px);
font-size: clamp(10px, 0.58vw, 13px);
}
}
/* =========================================
ENCABEZADO - 1600px → 1351px
========================================= */
@media (max-width: 1600px) and (min-width: 1351px) {
.barra-navegacion {
padding: 5px 2.5%;
}
.marca-menu {
gap: clamp(12px, 1.8vw, 25px);
min-width: 0;
}
.logo-reducido-menu {
width: clamp(140px, 11vw, 170px);
height: clamp(140px, 11vw, 170px);
margin-right: 0;
}
.wordmark-menu {
width: clamp(235px, 18vw, 290px);
}
.siluetas-con-frase {
min-width: 0;
}
.siluetas-con-frase img {
width: clamp(180px, 15vw, 230px);
}
.siluetas-con-frase .frase-cabecera {
font-size: clamp(15px, 1.15vw, 18px);
white-space: nowrap;
}
.menu {
gap: clamp(5px, 0.7vw, 10px);
margin-left: 10px;
flex-shrink: 1;
}
.menu a {
font-size: clamp(13px, 0.82vw, 14px);
}
.menu .boton-whatsapp {
padding: 7px 13px;
font-size: 13px;
}
}
/* =========================================
1350px → HAMBURGUESA
========================================= */
@media (max-width: 1350px) {
.menu {
display: none;
}
.boton-menu-movil {
display: flex;
flex-shrink: 0;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width:1350px) and (min-width:701px) {
.menu.menu-abierto {
display: flex;
position: absolute;
top: 100%;
right: 5%;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px;
background: #F8F5EF;
border-radius: 14px;
box-shadow: 0 8px 25px rgba(70, 50, 30, 0.12);
z-index: 1001;
}
.barra-navegacion {
min-height: 180px;
padding: 5px 5%;
justify-content: space-between;
}
.marca-menu {
gap: 0;
transform: translateY(-10px);
}
.logo-reducido-menu {
width: clamp(100px, 15vw, 150px);
height: clamp(100px, 15vw, 150px);
}
.wordmark-menu {
width: clamp(170px, 25vw, 250px);
margin-left: 30px;
}
.siluetas-con-frase {
display: block;
width: 35%;
margin: 15px auto 0;
position: relative;
text-align: center;
}
.siluetas-con-frase {
flex-shrink: 1;
}
.siluetas-con-frase .frase-cabecera {
font-size: clamp(14px, 1.8vw, 20px);
}
.boton-menu-movil {
margin-left: 0;
transform: translateY(-45px) scale(1);
position: relative;
left: 9px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 700px) {
.menu.menu-abierto {
display: flex;
position: absolute;
top: 100%;
right: 5%;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 20px;
background: #F8F5EF;
border-radius: 14px;
box-shadow: 0 8px 25px rgba(70, 50, 30, 0.12);
z-index: 1001;
}
.barra-navegacion {
min-height: 180px;
padding: 5px 5%;
justify-content: space-between;
}
.marca-menu {
gap: 0;
transform: translateY(-40px);
}
.logo-reducido-menu {
width: 80px;
height: 80px;
}
.wordmark-menu {
width: 180px;
margin-left: 15px;
}
.siluetas-con-frase {
display: block;
width: 50%;
margin: 15px auto 0;
position: relative;
text-align: center;
}
.siluetas-con-frase img {
position: relative;
top: 70px;
left: -180px;
}
.siluetas-con-frase .frase-cabecera {
position: relative;
top: 70px;
left: -280px;
font-size: 17px;
}
.boton-menu-movil {
margin-left: 0;
transform: translateY(-45px) scale(1);
position: relative;
left: 9px;
}
}
/* =========================================
PORTADA / HERO
========================================= */
.hero {
position: relative;
width: 100%;
/* Recortamos un poco la altura sin deformar la foto */
aspect-ratio: 2048 / 730;
overflow: hidden;
background: #40372f;
}
/* =========================================
FONDO DIFUMINADO DE LA PORTADA
Continuación visual del paisaje
========================================= */
.hero::before {
content: "";
position: absolute;
top: -30px;
right: -30px;
bottom: -30px;
left: 90px;
background-image: url("06 - Web/Imágenes/IMG-20260821-WA0023 (1) (2) (1).jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: blur(28px);
transform: scale(1.05);
z-index: 0;
}
/* =========================================
FOTO PRINCIPAL
========================================= */
.hero-fondo {
position: absolute;
top: 50%;
left: 43%;
width: 100%;
height: auto;
/*
La foto se mantiene en su tamaño natural
dentro del hero y queda más alejada.
*/
transform: translate(-50%, -50%) scale(0.65);
/* Difuminamos los bordes */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 10%,
black 90%,
transparent 100%
);
z-index: 1;
}
/* VELO OSCURO
Más intenso en la zona derecha donde está el texto */
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(45, 35, 25, 0.05) 35%,
rgba(45, 35, 25, 0.25) 60%,
rgba(45, 35, 25, 0.72) 100%
);
z-index: 2;
}
/* =========================================
CONTENIDO
========================================= */
.hero-contenido {
position: relative;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
box-sizing: border-box;
padding: 60px 7%;
transform: translateY(-35px);
}
/* =========================================
TEXTO DEL HERO
========================================= */
.hero-texto {
width: 42%;
max-width: 560px;
text-align: center;
margin-left: auto;
}
/* TITULAR */
.hero-texto h1 {
margin: 0 0 32px;
color: #F3EBCD;
font-size: 58px;
line-height: 1.22;
font-weight: 700;
text-align: right;
position: relative;
top: -14px;
text-shadow:
3px 3px 8px rgba(35, 25, 15, 0.90),
0 3px 6px rgba(35, 25, 15, 0.70);
}
.hero-texto h1 span {
display: block;
text-align: right;
}
/* =========================================
TEXTO SECUNDARIO
========================================= */
.hero-subtitulo {
margin: 0 auto 28px;
max-width: 500px;
color: #F3C9A8;
font-size: 21px;
line-height: 1.65;
text-align: right;
text-shadow:
3px 3px 7px rgba(35, 25, 15, 0.85),
0 2px 4px rgba(35, 25, 15, 0.65);
}
/* =========================================
LÍNEA + HUELLA
========================================= */
.linea-huella {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 38px 0 32px;
}
.linea-huella img {
display: block;
width: 420px;
height: auto;
object-fit: contain;
filter:
drop-shadow(0 4px 5px rgba(35, 25, 15, 0.65))
drop-shadow(0 8px 12px rgba(35, 25, 15, 0.45));
}
/* =========================================
BOTONES
========================================= */
.hero-botones {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 14px;
margin-top: 24px;
}
.boton {
display: flex;
align-items: center;
justify-content: center;
width: 170px;
min-height: 48px;
box-sizing: border-box;
padding: 12px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.boton-principal {
background: var(--verde-oliva);
color: #ffffff;
border: 2px solid var(--verde-oliva);
}
/* BOTÓN SECUNDARIO */
.boton-secundario {
background: #ffffff;
color: var(--verde-oliva);
border: 2px solid var(--verde-oliva);
}
/* =========================================
PORTADA - RESPONSIVE
========================================= */
@media (max-width: 1500px) {
.hero {
min-height: 430px;
aspect-ratio: auto;
overflow: hidden !important;
}
.hero::before {
height: 100%;
}
.hero-contenido {
height: 430px;
padding: 40px 5%;
transform: none;
align-items: flex-start;
}
.hero-texto {
width: 60%;
max-width: 500px;
}
.hero-texto h1 {
font-size: clamp(36px, 4.1vw, 44px);
line-height: 1.15;
top: 0;
margin-bottom: 24px;
}
.hero-subtitulo {
font-size: clamp(15px, 1.55vw, 17px);
line-height: 1.5;
margin-bottom: 20px;
}
.linea-huella {
margin: 22px 0 22px;
}
.linea-huella img {
width: clamp(230px, 27vw, 300px);
}
.hero-botones {
margin-top: 15px;
gap: 12px;
}
.boton {
width: clamp(150px, 15vw, 170px);
min-height: 44px;
padding: 10px 16px;
font-size: clamp(12px, 1.2vw, 14px);
}
}
@media (min-width: 1501px) and (max-width: 1700px) {
.hero-texto h1 {
top: 30px !important;
}
}
/* =========================================
PORTADA - VENTANA ESTRECHA
========================================= */
@media (max-width: 600px) {
.hero {
aspect-ratio: auto;
}
.hero-fondo {
left: 60%;
transform: translate(-50%, -50%) scale(1.5);
}
.hero-contenido {
padding: 40px 5%;
transform: none;
}
.hero-texto {
width: 58%;
max-width: 500px;
}
.hero-texto h1 {
font-size: 27px;
line-height: 1.15;
top: 0;
}
.hero-subtitulo {
font-size: 13px;
line-height: 1.5;
}
.hero-texto {
transform: translateY(-10px);
}
.linea-huella {
margin: 18px 0 18px;
}
.linea-huella img {
width: 160px;
filter: brightness(80);
}
.hero-botones {
margin-top: 90px;
gap: 10px;
}
.boton {
width: 130px;
height: 40px;
min-height: 40px;
padding: 8px 12px;
box-sizing: border-box;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* =========================================
SECCIÓN ¿POR QUÉ ELEGIR YOLAPATITAS?
========================================= */
#porque-yolapatitas {
position: relative;
width: 100%;
padding: 65px 5% 70px;
background: var(--crema);
overflow: hidden;
}
/* =========================================
CONTENEDOR
========================================= */
#porque-yolapatitas .contenedor {
position: relative;
z-index: 1;
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
/* =========================================
TÍTULO
========================================= */
#porque-yolapatitas h2 {
margin: 0 0 32px;
color: var(--marron-oscuro);
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 1.2;
font-weight: 600;
text-align: center;
}
/* =========================================
TARJETAS
========================================= */
#porque-yolapatitas .tarjetas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* =========================================
TARJETA
========================================= */
#porque-yolapatitas .tarjeta {
min-height: 190px;
padding: 22px 26px 22px;
border-radius: 14px;
box-sizing: border-box;
box-shadow:
0 7px 20px rgba(70, 50, 30, 0.07);
}
/* =========================================
COLORES DE LAS TARJETAS
========================================= */
#porque-yolapatitas .tarjeta:nth-child(1) {
background: #E9ECDF;
}
#porque-yolapatitas .tarjeta:nth-child(2) {
background: #F0DCD8;
}
#porque-yolapatitas .tarjeta:nth-child(3) {
background: #EDE4D5;
}
/* =========================================
ICONOS
========================================= */
#porque-yolapatitas .icono-incluye {
display: block;
width: 20px;
height: 20px;
margin: 0 0 14px;
object-fit: contain;
}
/* =========================================
TÍTULOS DE LAS TARJETAS
========================================= */
#porque-yolapatitas .tarjeta h3 {
margin: 0 0 13px;
color: var(--marron);
font-size: 16px;
line-height: 1.3;
font-weight: 600;
}
/* =========================================
TEXTO DE LAS TARJETAS
========================================= */
#porque-yolapatitas .tarjeta p {
margin: 0;
color: var(--texto);
font-size: 13px;
line-height: 1.55;
}
/* =========================================
RAMAS DECORATIVAS
========================================= */
#porque-yolapatitas .decoracion-rama {
position: absolute;
width: 45px;
height: auto;
opacity: 0.75;
pointer-events: none;
z-index: 0;
}
#porque-yolapatitas .decoracion-rama-izquierda {
left: 15%;
top: 55px;
}
#porque-yolapatitas .decoracion-rama-derecha {
right: 15%;
top: 55px;
}
/* Ocultar flechas de las tarjetas en escritorio */
.flecha-tarjetas {
display: none;
}
/* =========================================
RAMAS - RESPONSIVE
Desde 2150px se reducen progresivamente
========================================= */
@media (max-width: 2150px) {
#porque-yolapatitas .decoracion-rama {
width: clamp(32px, 2.1vw, 45px);
}
}
@media (max-width: 700px) {
#porque-yolapatitas .tarjetas {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 0 5px 10px;
scrollbar-width: none;
}
#porque-yolapatitas .tarjetas::-webkit-scrollbar {
display: none;
}
#porque-yolapatitas .tarjeta {
flex: 0 0 100%;
min-height: 190px;
scroll-snap-align: start;
}
#porque-yolapatitas .tarjeta h3 {
font-size: 19px;
}
#porque-yolapatitas .tarjeta p {
font-size: 16.5px;
}
#porque-yolapatitas .tarjetas-controles {
position: relative;
width: 100%;
padding: 0 36px;
box-sizing: border-box;
}
#porque-yolapatitas .tarjetas {
width: 100%;
}
#porque-yolapatitas .flecha-tarjetas {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 30px;
height: 40px;
padding: 0;
border: none;
background: transparent;
color: var(--marron-oscuro);
font-size: 30px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
#porque-yolapatitas .flecha-anterior {
left: 0;
}
#porque-yolapatitas .flecha-siguiente {
right: 0;
}
#porque-yolapatitas .flecha-tarjetas.oculta {
opacity: 0;
pointer-events: none;
}
}
/* =========================================
MIS SERVICIOS
========================================= */
.seccion-servicios {
width: 100%;
padding: 70px 5% 65px;
background: var(--crema);
}
.seccion-servicios .contenedor {
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
/* =========================================
TÍTULO
========================================= */
.seccion-servicios h2 {
margin: 0 0 14px;
color: var(--marron-oscuro);
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 1.2;
font-weight: 600;
text-align: center;
}
/* =========================================
INTRODUCCIÓN
========================================= */
.intro-seccion {
position: relative;
margin: 0 auto 38px;
max-width: 700px;
color: var(--texto);
font-size: 14px;
line-height: 1.6;
text-align: center;
}
/* =========================================
CORAZÓN
========================================= */
.corazon-subtitulo {
display: inline-block;
width: 18px;
height: 18px;
margin-left: 6px;
vertical-align: middle;
object-fit: contain;
}
/* =========================================
DISTRIBUCIÓN DE LOS SERVICIOS
========================================= */
.seccion-servicios .servicios {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 150px;
width: 100%;
max-width: 1150px;
margin: 0 auto;
}
/* =========================================
CADA SERVICIO
========================================= */
.seccion-servicios .servicio {
flex: 1 1 0;
width: 100%;
max-width: 350px;
}
/* =========================================
TARJETA / BLOQUE DE SERVICIO
========================================= */
/*
IMPORTANTE:
No queremos una tarjeta visible detrás del texto.
La imagen queda independiente y el texto continúa
directamente sobre el fondo crema.
*/
.seccion-servicios .servicio {
display: flex;
flex-direction: column;
overflow: visible;
min-height: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
/* =========================================
IMÁGENES DE LOS SERVICIOS
========================================= */
.seccion-servicios .servicio-imagen {
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 18px;
background-repeat: no-repeat;
}
/* =========================================
FOTO 1 — GUARDERÍA
========================================= */
.seccion-servicios .servicio:nth-child(1) .servicio-imagen {
background-image: url("06 - Web/Imágenes/swervicios 1.jpg");
background-size: 100%;
background-position: center 20%;
}
/* =========================================
FOTO 2 — HOSPEDAJE
========================================= */
.seccion-servicios .servicio:nth-child(2) .servicio-imagen {
background-image: url("06 - Web/Imágenes/serevicios 2.jpg");
background-size: 200%;
background-position: center 20%;
}
/* =========================================
FOTO 3 — CUIDADO PERSONALIZADO
========================================= */
.seccion-servicios .servicio:nth-child(3) .servicio-imagen {
background-image: url("06 - Web/Imágenes/servicios 3.jpg");
background-size: 150%;
background-position: center center;
}
/* =========================================
CONTENIDO DE CADA SERVICIO
========================================= */
.seccion-servicios .servicio-contenido {
padding: 18px 4px 0;
background: transparent;
border-radius: 0;
}
/* =========================================
TÍTULO DEL SERVICIO
========================================= */
.seccion-servicios .servicio-contenido h3 {
margin: 0 0 9px;
color: rgba(70, 30, 5, 0.651);
font-size: 17px;
line-height: 1.3;
font-weight: 600;
}
/* =========================================
TEXTO DEL SERVICIO
========================================= */
.seccion-servicios .servicio-contenido p {
margin: 0;
color: rgba(105, 50, 15, 0.651);
font-size: 13px;
line-height: 1.55;
}
/* Texto destacado dentro de Cuidado a domicilio */
.seccion-servicios .texto-gatos {
font-style: italic;
}
/* FLECHAS — SOLO MÓVIL */
.flecha-servicios {
display: none;
}
/* =========================================
MIS SERVICIOS — CARRUSEL MÓVIL
========================================= */
@media (max-width: 600px) {
.seccion-servicios .servicios-controles {
position: relative;
width: 100%;
padding: 0 36px;
box-sizing: border-box;
}
.seccion-servicios .servicios {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
max-width: none;
margin: 0;
justify-content: flex-start;
}
.seccion-servicios .servicios::-webkit-scrollbar {
display: none;
}
.seccion-servicios .servicio {
flex: 0 0 100%;
min-width: 0;
max-width: none;
width: 100%;
scroll-snap-align: start;
}
.seccion-servicios .servicio-imagen {
width: 100%;
height: 300px;
overflow: hidden;
border-radius: 50px;
background-size: cover;
background-position: center;
}
.seccion-servicios .servicio-contenido {
padding: 12px 4px 0;
}
.seccion-servicios .servicio-contenido h3 {
margin: 0 0 8px;
font-size: 20px;
}
.seccion-servicios .servicio-contenido p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
.seccion-servicios .servicio:nth-child(3) .servicio-imagen {
overflow: hidden;
background-size: 160%;
}
/* =====================================
FLECHAS
===================================== */
.seccion-servicios .flecha-servicios {
display: block;
position: absolute;
top: 35%;
transform: translateY(-50%);
z-index: 10;
width: 30px;
height: 40px;
padding: 0;
border: none;
background: transparent;
color: var(--marron-oscuro);
font-size: 30px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.seccion-servicios .flecha-servicios-anterior {
left: 0;
}
.seccion-servicios .flecha-servicios-siguiente {
right: 0;
}
.seccion-servicios .flecha-servicios.oculta {
display: none;
}
}
/* =========================================
MIS SERVICIOS — TABLET / VENTANA REDUCIDA
2 SERVICIOS ARRIBA + 1 ABAJO
========================================= */
@media (min-width: 701px) and (max-width: 870px) {
.seccion-servicios .servicios {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 45px 55px;
max-width: 800px;
}
.seccion-servicios .servicio {
flex: 0 0 calc(50% - 28px);
max-width: 350px;
}
}
/* =========================================
QUÉ INCLUYE CADA SERVICIO
========================================= */
.incluye-servicios {
width: 100%;
padding: 75px 5% 80px;
background: var(--crema);
}
.incluye-servicios .contenedor {
width: 100%;
max-width: 1150px;
margin: 0 auto;
}
/* =========================================
TÍTULO
========================================= */
.incluye-servicios h2 {
margin: 0 0 40px;
color: var(--marron-oscuro);
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 1.2;
font-weight: 600;
text-align: center;
}
/* =========================================
TARJETAS
========================================= */
.tarjetas-incluye {
width: 100%;
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 90px;
align-items: stretch;
}
/* =========================================
TARJETA INDIVIDUAL
========================================= */
.tarjeta-incluye {
min-width: 0;
min-height: 400px;
padding: 30px 28px 32px;
border-radius: 16px;
box-sizing: border-box;
box-shadow:
0 7px 22px rgba(70, 50, 30, 0.07);
}
/* =========================================
COLORES DE LAS TARJETAS
========================================= */
.tarjeta-incluye:nth-child(1) {
background: #E9EEDB;
}
.tarjeta-incluye:nth-child(2) {
background: #F1DCD9;
}
.tarjeta-incluye:nth-child(3) {
background: #EEE5D4;
}
/* =========================================
ICONOS
========================================= */
.tarjeta-incluye .icono-incluye {
display: block;
width: 65px;
height: 65px;
margin: 0 auto 20px;
object-fit: contain;
}
/* =========================================
TÍTULO DE CADA TARJETA
========================================= */
.tarjeta-incluye h3 {
margin: 0 0 20px;
color: var(--marron);
font-family: "Poppins", sans-serif;
font-size: 18px;
line-height: 1.3;
font-weight: 600;
text-align: center;
}
/* =========================================
LISTA
========================================= */
.tarjeta-incluye ul {
margin: 0;
padding: 0;
list-style: none;
}
.tarjeta-incluye li {
position: relative;
margin: 0 0 14px;
padding-left: 22px;
color: var(--texto);
font-size: 13px;
line-height: 1.55;
}
.tarjeta-incluye li:last-child {
margin-bottom: 0;
}
/* =========================================
PEQUEÑO DETALLE DECORATIVO DE LA LISTA
========================================= */
.tarjeta-incluye li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--verde);
font-size: 13px;
font-weight: 600;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 900px) {
.tarjetas-incluye {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.incluye-servicios {
padding: 60px 6% 65px;
}
.incluye-servicios h2 {
font-size: 25px;
margin-bottom: 30px;
}
.tarjetas-incluye {
grid-template-columns: 1fr;
gap: 25px;
}
.tarjeta-incluye {
min-height: auto;
}
}
/* =========================================================
SERVICIOS — 2 ARRIBA + 1 ABAJO
PANTALLA REDUCIDA 601–699 PX
========================================================= */
@media (min-width: 601px) and (max-width: 699px) {
.seccion-servicios .servicios {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 30px 16px;
overflow: visible;
scroll-snap-type: none;
}
.seccion-servicios .servicio {
flex: 0 0 calc(50% - 8px);
width: calc(50% - 8px);
max-width: 350px;
min-width: 0;
scroll-snap-align: none;
}
.seccion-servicios .servicio:nth-child(3) {
flex-basis: calc(50% - 8px);
}
.seccion-servicios .flecha-servicios {
display: none;
}
}
/* =========================================
CÓMO TRABAJAMOS
========================================= */
.como-trabajamos {
position: relative;
width: 100%;
padding: 70px 5% 80px;
background: #F8F5EF;
overflow: hidden;
}
/* =========================================
CONTENEDOR
========================================= */
.como-trabajamos .contenedor {
position: relative;
width: 100%;
max-width: 1500px;
margin: 0 auto;
z-index: 1;
}
/* =========================================
TÍTULO
========================================= */
.como-trabajamos h2 {
margin: 0;
text-align: center;
color: var(--marron-oscuro);
font-family: "Poppins", sans-serif;
font-size: 30px;
line-height: 1.2;
font-weight: 600;
}
/* =========================================
SUBTÍTULO
========================================= */
.subtitulo-como-trabajamos {
margin: 12px auto 38px;
text-align: center;
color: var(--marron);
font-size: 16px;
line-height: 1.5;
}
/* =========================================
TARJETAS — ESCRITORIO
========================================= */
.pasos-trabajo {
display: grid;
grid-template-columns: repeat(4, 300px);
justify-content: center;
gap: 32px;
align-items: stretch;
}
/* =========================================
ESTRUCTURA NUEVA DEL HTML
EN ESCRITORIO NO DEBE CREAR FILAS
========================================= */
.fila-pasos {
display: contents;
}
.carrusel-pasos {
display: contents;
}
/* =========================================
FLECHAS
OCULTAS EN ESCRITORIO
========================================= */
.flecha-pasos {
display: none;
}
/* =========================================
TARJETA INDIVIDUAL
========================================= */
.paso-trabajo {
min-height: 165px;
padding: 22px 20px;
box-sizing: border-box;
border-radius: 16px;
text-align: left;
}
/* =========================================
ICONOS
========================================= */
.icono-como-trabajamos {
display: block;
width: 24px;
height: 24px;
margin: 0 0 14px;
object-fit: contain;
}
/* =========================================
AJUSTE INDIVIDUAL DE LOS ICONOS
========================================= */
.paso-1 .icono-como-trabajamos {
width: 18px;
height: 18px;
}
.paso-2 .icono-como-trabajamos {
width: 20px;
height: 20px;
}
.paso-3 .icono-como-trabajamos {
width: 30px;
height: 30px;
margin-bottom: 10px;
transform: translateY(-4px);
}
/* SUBIR EL TEXTO DE LA TARJETA 03 */
.paso-3 h3,
.paso-3 p {
position: relative;
top: -4px;
}
.paso-4 .icono-como-trabajamos {
width: 24px;
height: 24px;
}
/* =========================================
COLORES DE LAS TARJETAS
========================================= */
.paso-1 {
background: #E9ECDF;
}
.paso-2 {
background: #F1E2D0;
}
.paso-3 {
background: #F0DCD8;
}
.paso-4 {
background: #DFE8E9;
}
/* =========================================
TÍTULO DE TARJETA
========================================= */
.paso-trabajo h3 {
margin: 0 0 12px;
color: var(--marron-oscuro);
font-size: 18px;
line-height: 1.3;
font-weight: 600;
}
/* =========================================
TEXTO DE TARJETA
========================================= */
.paso-trabajo p {
margin: 0;
color: var(--marron-oscuro);
font-size: 14px;
line-height: 1.5;
}
/* =========================================
DECORACIÓN
========================================= */
.decoracion-como {
position: absolute;
display: block;
pointer-events: none;
z-index: 2;
}
/* ---------- HUELLA ---------- */
.huella-como {
width: 50px;
height: auto;
left: calc(50% - 200px);
top: 65px;
transform: rotate(20deg);
}
/* ---------- RAMA DE OLIVO ---------- */
.rama-como {
width: 40px;
height: auto;
left: calc(50% + 155px);
top: 50px;
transform: rotate(-50deg);
}
/* ---------- CORAZÓN VERDE ---------- */
.corazon-verde {
width: 18px;
height: auto;
left: calc(50% - 340px);
top: 59%;
}
/* ---------- CORAZÓN ROSA ---------- */
.corazon-rosa {
width: 18px;
height: auto;
left: calc(50% - 11px);
top: 59%;
}
/* ---------- CORAZÓN MARRÓN ---------- */
.corazon-marron {
width: 18px;
height: auto;
left: calc(50% + 324px);
top: 59%;
}
/* =========================================
RESPONSIVE — HASTA 1350px
========================================= */
@media (max-width: 1350px) {
.pasos-trabajo {
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2.1vw, 28px);
}
.huella-como {
width: clamp(35px, 3.4vw, 45px);
}
.rama-como {
width: clamp(28px, 2.7vw, 36px);
}
.corazon-verde,
.corazon-rosa,
.corazon-marron {
width: 16px;
}
.corazon-verde {
left: calc(27% - 10px);
}
.corazon-rosa {
left: calc(50% - 8px);
}
.corazon-marron {
left: calc(72.5% - 1px);
}
}
/* =========================================
TABLET — DOS COLUMNAS
========================================= */
@media (max-width: 900px) {
.pasos-trabajo {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.huella-como {
width: 35px;
}
.rama-como {
width: 28px;
}
.corazon-verde,
.corazon-rosa,
.corazon-marron {
width: 14px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 600px) {
.como-trabajamos {
padding: 55px 5% 60px;
}
.como-trabajamos h2 {
font-size: 26px;
}
.subtitulo-como-trabajamos {
margin-bottom: 28px;
}
/* =====================================
CONTENEDOR DE LAS DOS FILAS
===================================== */
.pasos-trabajo {
display: flex;
flex-direction: column;
gap: 55px;
width: 100%;
}
/* =====================================
CADA FILA ES UN CARRUSEL
===================================== */
.fila-pasos {
display: block;
position: relative;
width: 100%;
padding: 0 36px;
box-sizing: border-box;
}
/* =====================================
ÁREA QUE SE DESPLAZA
===================================== */
.carrusel-pasos {
display: flex;
gap: 16px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.carrusel-pasos::-webkit-scrollbar {
display: none;
}
/* =====================================
TARJETAS
===================================== */
.carrusel-pasos .paso-trabajo {
flex: 0 0 100%;
width: 100%;
min-width: 0;
scroll-snap-align: start;
}
/* =====================================
FLECHAS
===================================== */
.fila-pasos .flecha-pasos {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 30px;
height: 40px;
padding: 0;
border: none;
background: transparent;
color: var(--marron-oscuro);
font-size: 30px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.fila-pasos .flecha-pasos-anterior {
left: 0;
}
.fila-pasos .flecha-pasos-siguiente {
right: 0;
}
/* =====================================
OCULTAR LA FLECHA QUE NO CORRESPONDE
===================================== */
.fila-pasos .flecha-pasos.oculta {
opacity: 0;
pointer-events: none;
}
/* =====================================
DECORACIONES SUPERIORES
===================================== */
.huella-como {
width: 35px;
left: 8%;
top: 55px;
}
.rama-como {
width: 30px;
right: 8%;
left: auto;
top: 45px;
}
/* =====================================
CORAZONES
===================================== */
.corazon-verde,
.corazon-rosa,
.corazon-marron {
width: 14px;
top: 54%;
}
}
/* =========================================
SOBRE MÍ
========================================= */
.sobre-mi {
position: relative;
width: 100%;
padding: 80px 4% 90px;
background: var(--crema);
overflow: hidden;
}
/* =========================================
CONTENEDOR DEL TÍTULO
========================================= */
.sobre-mi-titulo {
width: 100%;
max-width: 1500px;
margin: 0 auto 65px;
text-align: center;
}
/* =========================================
TÍTULO
========================================= */
.sobre-mi-titulo-linea {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.sobre-mi-titulo h2 {
margin: 0;
color: var(--marron-oscuro);
font-family: "Poppins", sans-serif;
font-size: 28px;
line-height: 1.2;
font-weight: 600;
}
.corazon-sobre-mi {
width: 18px;
height: 18px;
object-fit: contain;
}
/* =========================================
SUBTÍTULO
========================================= */
.sobre-mi-titulo > p {
margin: 12px 0 0;
color: var(--texto);
font-size: 15px;
line-height: 1.5;
}
.subtitulo-regular {
font-style: normal;
}
.subtitulo-italic {
font-style: italic;
}
/* =========================================
BLOQUES
========================================= */
.sobre-mi-bloque {
width: 100%;
max-width: 1500px;
margin: 0 auto 75px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
column-gap: 90px;
}
/* =========================================
TEXTO
========================================= */
.sobre-mi-texto {
width: 100%;
}
.sobre-mi-texto p {
margin: 0 0 18px;
color: var(--texto);
font-size: 15px;
line-height: 1.7;
}
.sobre-mi-texto p:last-child {
margin-bottom: 0;
}
/* =========================================
COLORES DEL TEXTO — SOBRE MÍ
========================================= */
/* ---------- BLOQUE 1 ---------- */
.sobre-mi-bloque.bloque-1 .sobre-mi-texto p:nth-child(1) {
color: var(--marron-oscuro);
}
.sobre-mi-bloque.bloque-1 .sobre-mi-texto p:nth-child(2) {
color: var(--verde);
}
.sobre-mi-bloque.bloque-1 .sobre-mi-texto p:nth-child(3) {
color: var(--verde);
}
/* ---------- BLOQUE 2 ---------- */
.sobre-mi-bloque.bloque-2 .sobre-mi-texto p:nth-child(1) {
color: var(--verde-oscuro);
}
.sobre-mi-bloque.bloque-2 .sobre-mi-texto p:nth-child(2) {
color: var(--verde);
}
.sobre-mi-bloque.bloque-2 .sobre-mi-texto p:nth-child(3) {
color: var(--verde);
}
/* ---------- BLOQUE 3 ---------- */
.sobre-mi-bloque.bloque-3 .sobre-mi-texto p:nth-child(1) {
color: var(--marron-oscuro);
}
.sobre-mi-bloque.bloque-3 .sobre-mi-texto p:nth-child(2) {
color: var(--verde);
}
.sobre-mi-bloque.bloque-3 .sobre-mi-texto p:nth-child(3) {
color: var(--verde);
}
/* =========================================
PRIMER PÁRRAFO DE CADA BLOQUE
========================================= */
.sobre-mi-bloque.bloque-1 .sobre-mi-texto p:first-child {
color: var(--marron);
font-weight: 600;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-texto p:first-child {
color: var(--verde-oliva-oscuro);
font-weight: 600;
}
.sobre-mi-bloque.bloque-3 .sobre-mi-texto p:first-child {
color: var(--marron);
font-weight: 600;
}
/* =========================================
FOTOS — SOBRE MÍ
========================================= */
.sobre-mi-foto {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 16px;
background-repeat: no-repeat;
background-position: center center;
background-color: var(--crema);
}
.sobre-mi-foto img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
display: block;
}
/* =========================================
FOTO 1 — BLOQUE 1
========================================= */
.sobre-mi-bloque.bloque-1 .sobre-mi-foto {
width: 85%;
height: 350px;
justify-self: start;
overflow: hidden;
border-radius: 16px;
background: none !important;
}
.sobre-mi-bloque.bloque-1 .sobre-mi-foto img {
width: 100%;
height: 98%;
object-fit: cover;
object-position: center 80%;
display: block;
border-radius: 16px;
}
/* =========================================
FOTO 2 — BLOQUE 2
========================================= */
.sobre-mi-bloque.bloque-2 .sobre-mi-foto {
width: 90%;
height: 330px;
overflow: hidden;
border-radius: 12px;
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
background-image: none !important;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-foto img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
transform: scale(1.60);
transform-origin: center center;
display: block;
}
/* =========================================
FOTO 3 — BLOQUE 3
========================================= */
.sobre-mi-bloque.bloque-3 .sobre-mi-foto {
width: 85%;
height: 320px;
justify-self: end;
overflow: hidden;
border-radius: 12px;
background-image: none !important;
}
.sobre-mi-bloque.bloque-3 .sobre-mi-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% center;
display: block;
}
/* =========================================
BLOQUE 2
FOTO A LA IZQUIERDA
========================================= */
.bloque-2 {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* =========================================
FRASE FINAL
========================================= */
.sobre-mi-final {
position: relative;
width: 100%;
max-width: 1100px;
margin: 10px auto 0;
padding: 25px 20px 20px;
text-align: center;
}
.sobre-mi-final p {
position: relative;
z-index: 1;
margin: 0 auto;
}
.frase-italic {
max-width: 850px;
color: var(--marron);
font-size: 17px;
line-height: 1.7;
font-style: italic;
}
.frase-medium {
max-width: 850px;
margin-top: 14px !important;
color: var(--marron-oscuro);
font-size: 18px;
line-height: 1.6;
font-weight: 500;
}
/* =========================================
HUELLAS DECORATIVAS
========================================= */
.huella-sobre-mi {
position: absolute;
width: 65px;
height: auto;
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
.huella-sobre-mi-izquierda {
left: 0;
bottom: 0;
transform: rotate(-12deg);
}
.huella-sobre-mi-derecha {
right: 0;
top: 0;
transform: rotate(12deg);
}
/* =========================================
RESPONSIVE — TABLET
========================================= */
@media (max-width: 900px) {
.sobre-mi {
padding: 65px 5% 75px;
}
.sobre-mi-titulo {
margin-bottom: 50px;
}
.sobre-mi-bloque {
grid-template-columns: 1fr;
row-gap: 30px;
margin-bottom: 60px;
}
.bloque-2 .sobre-mi-foto {
order: -1;
}
.sobre-mi-foto {
aspect-ratio: 16 / 10;
}
.sobre-mi-texto p {
font-size: 14px;
}
.frase-italic {
font-size: 16px;
}
.frase-medium {
font-size: 17px;
}
}
/* =========================================
RESPONSIVE — MÓVIL
========================================= */
@media (max-width: 600px) {
.sobre-mi {
padding: 55px 6% 65px;
}
/* =====================================
TÍTULO
===================================== */
.sobre-mi-titulo {
margin-bottom: 42px;
}
.sobre-mi-titulo h2 {
font-size: 25px;
}
.sobre-mi-titulo > p {
font-size: 14px;
}
/* =====================================
BLOQUES
===================================== */
.sobre-mi-bloque {
display: block;
width: 100%;
margin-bottom: 65px;
}
/* =====================================
TEXTO
===================================== */
.sobre-mi-texto {
width: 100%;
}
.sobre-mi-texto p {
width: 100%;
margin: 0 0 20px;
color: var(--texto);
font-size: 14px;
line-height: 1.65;
text-align: left;
}
/* PRIMER PÁRRAFO DE CADA BLOQUE */
.sobre-mi-texto p:first-child {
color: var(--marron-oscuro);
font-weight: 600;
margin-bottom: 20px;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-texto p:first-of-type {
color: var(--verde);
}
/* =====================================
FOTOS
===================================== */
.sobre-mi-foto {
width: 78%;
height: 175px;
margin: 24px auto 26px;
border-radius: 15px;
overflow: hidden;
background: none !important;
}
.sobre-mi-foto img {
width: 100%;
height: 100%;
display: block;
border-radius: 15px;
}
/* =====================================
FOTO 1
===================================== */
.sobre-mi-bloque.bloque-1 .sobre-mi-foto {
width: 78%;
height: 175px;
margin: 24px auto 26px;
justify-self: center;
border-radius: 15px;
overflow: hidden;
background: none !important;
}
.sobre-mi-bloque.bloque-1 .sobre-mi-foto img {
width: 100%;
height: 98%;
object-fit: cover;
object-position: center 80%;
border-radius: 15px;
}
/* =====================================
FOTO 2
===================================== */
.sobre-mi-bloque.bloque-2 {
display: flex;
flex-direction: column;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-texto {
order: 1;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-foto {
order: 2;
width: 78%;
height: 170px;
margin: 24px auto 0;
border-radius: 15px;
overflow: hidden;
background: none !important;
}
.sobre-mi-bloque.bloque-2 .sobre-mi-foto img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
transform: scale(1.60);
transform-origin: center center;
border-radius: 15px;
}
/* =====================================
FOTO 3
===================================== */
.sobre-mi-bloque.bloque-3 .sobre-mi-foto {
width: 78%;
height: 170px;
margin: 24px auto 26px;
justify-self: center;
border-radius: 15px;
overflow: hidden;
background: none !important;
}
.sobre-mi-bloque.bloque-3 .sobre-mi-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% center;
border-radius: 15px;
}
/* =====================================
SEPARACIÓN ENTRE BLOQUES
===================================== */
.sobre-mi-bloque.bloque-1 {
margin-bottom: 75px;
}
.sobre-mi-bloque.bloque-2 {
margin-bottom: 75px;
}
.sobre-mi-bloque.bloque-3 {
margin-bottom: 45px;
}
/* =====================================
FRASE FINAL
===================================== */
.sobre-mi-final {
margin-top: 0;
padding: 25px 10px 20px;
}
.frase-italic {
font-size: 15px;
line-height: 1.7;
}
.frase-medium {
font-size: 16px;
line-height: 1.6;
}
/* =====================================
HUELLAS
===================================== */
.huella-sobre-mi {
width: 45px;
transform: translateY(-14.3px);
}
}
/* =========================================
RESEÑAS
========================================= */
.resenas {
width: 100%;
padding: 80px 4% 90px;
background: #F8F5EF;
}
/* =========================================
CONTENEDOR
========================================= */
.resenas-contenedor {
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
/* =========================================
TÍTULO
========================================= */
.resenas-titulo {
width: 100%;
margin: 0 auto 55px;
text-align: center;
}
.resenas-titulo h2 {
margin: 0;
color: var(--marron-oscuro);
font-family: Georgia, serif;
font-size: 32px;
line-height: 1.25;
font-weight: 600;
text-align: center;
}
/* =========================================
CORAZÓN DEL TÍTULO
========================================= */
.corazon-resenas-superior {
display: inline-block;
width: 25px;
height: auto;
margin-left: 5px;
vertical-align: middle;
}
.segunda-linea-titulo {
display: inline-flex;
align-items: center;
gap: 5px;
}
.corazon-resenas {
width: 25px;
height: auto;
display: block;
flex-shrink: 0;
}
/* =========================================
SUBTÍTULO
========================================= */
.resenas-titulo p {
margin: 14px 0 0;
color: #9A806D;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.4;
font-style: italic;
text-align: center;
}
/* =========================================
TARJETAS DE RESEÑAS
========================================= */
.resenas-tarjetas {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 50px;
align-items: stretch;
}
/* =========================================
TARJETA INDIVIDUAL
========================================= */
.resena {
width: 100%;
min-height: 250px;
padding: 28px 28px 22px;
border-radius: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow:
0 7px 22px rgba(70, 50, 30, 0.07);
}
/* =========================================
COLORES DE LAS TARJETAS
========================================= */
.resena-1 {
background: #F6E9E5;
}
.resena-2 {
background: #F8F3FA;
}
.resena-3 {
background: #F4F8FA;
}
/* =========================================
ESTRELLAS
========================================= */
.resena-estrellas {
width: 58px;
height: auto;
display: block;
margin-bottom: 18px;
}
/* =========================================
TEXTO DE LA RESEÑA
========================================= */
.resena-texto {
margin: 0;
color: var(--marron-oscuro);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
font-weight: 400;
}
/* =========================================
NOMBRE
========================================= */
.resena-nombre {
margin: 20px 0 0;
color: var(--marron-oscuro);
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================
SERVICIO
========================================= */
.resena-servicio {
margin: 3px 0 0;
color: #8C9A70;
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 1.3;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 900px) {
.resenas {
padding: 65px 5% 75px;
}
.resenas-tarjetas {
grid-template-columns: 1fr;
gap: 25px;
justify-items: center;
}
.resena {
width: 100%;
max-width: 600px;
}
}
/* =========================================
MÓVIL
========================================= */
@media (max-width: 600px) {
.resenas {
padding: 55px 6% 65px;
}
.resenas-titulo {
margin-bottom: 40px;
}
@media (max-width: 600px) {
.resenas-titulo h2 {
position: relative;
width: 100%;
max-width: 330px;
margin-left: auto;
margin-right: auto;
font-size: 0;
line-height: 1.25;
}
/* TEXTO DEL TÍTULO EN MÓVIL */
.resenas-titulo h2::before {
content:
"Lo que dicen quienes\A"
"ya han confiado\A"
"en Yolapatitas";
display: inline-block;
white-space: pre;
color: var(--marron-oscuro);
font-family: Georgia, serif;
font-size: 25px;
line-height: 1.25;
font-weight: 600;
text-align: center;
}
/* OCULTAMOS EL TEXTO ORIGINAL SOLO VISUALMENTE */
.resenas-titulo h2 .segunda-linea-titulo {
display: block;
position: absolute;
left: 45px;
top: 70px;
width: 20px;
height: 20px;
font-size: 0;
}
.resenas-titulo h2 br {
display: none;
}
/* CORAZÓN DE LA SEGUNDA LÍNEA */
.resenas-titulo h2 .corazon-resenas-superior {
position: absolute;
width: 20px;
height: auto;
right: 35px;
top: 39px;
margin: 0;
}
/* CORAZÓN DE LA TERCERA LÍNEA */
.resenas-titulo h2 .corazon-resenas {
display: block;
width: 20px;
height: auto;
}
.resenas-titulo p {
font-size: 14px;
max-width: 180px;
margin-left: auto;
margin-right: auto;
}
}
.corazon-resenas-superior,
.corazon-resenas {
width: 20px;
}
.resena {
min-height: 0;
padding: 24px 22px 20px;
border-radius: 15px;
}
.resena-texto {
font-size: 13px;
line-height: 1.5;
}
}
/* =========================================================
FOTOS REALES
========================================================= */
.fotos-reales {
position: relative;
padding: 65px 5% 25px;
background: #F8F5EF;
overflow: hidden;
}
/* =========================================================
CONTENEDOR
========================================================= */
.fotos-contenedor {
position: relative;
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
/* =========================================================
TÍTULO PRINCIPAL
========================================================= */
.fotos-reales h2 {
margin: 0 0 8px;
color: var(--marron-oscuro);
font-family: Georgia, serif;
font-size: 32px;
line-height: 1.2;
text-align: center;
}
.fotos-intro {
margin: 0 0 52px;
color: var(--marron-oscuro);
font-size: 14px;
line-height: 1.5;
text-align: center;
}
/* =========================================================
CATEGORÍAS
========================================================= */
.galeria-categoria {
position: relative;
margin-bottom: 62px;
}
/* =========================================================
TÍTULO DE CATEGORÍA
========================================================= */
.categoria-titulo {
margin-bottom: 16px;
text-align: left;
}
.categoria-titulo h3 {
margin: 0 0 5px;
color: var(--marron-oscuro);
font-family: Georgia, serif;
font-size: 18px;
font-weight: 600;
line-height: 1.2;
}
.categoria-titulo p {
margin: 0;
color: var(--marron-oscuro);
font-size: 13.4px;
line-height: 1.4;
}
/* =========================================================
CONTENEDOR DE LAS FILAS
========================================================= */
.galeria-fotos {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
/* =========================================================
CADA FILA ES UNA GRID INDEPENDIENTE
========================================================= */
.galeria-fila {
display: grid;
align-items: center;
margin-bottom: 18px;
}
/* =========================================================
FOTO INDIVIDUAL
========================================================= */
.foto-galeria {
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.foto-galeria img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.fotos-reales .categoria-guarderia .foto-galeria img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
border-radius: 35px !important;
clip-path: inset(0 round 35px) !important;
}
/* =========================================================
BOTÓN VER MÁS
========================================================= */
.boton-ver-mas {
justify-self: center;
align-self: center;
padding: 7px 12px;
border: 1px solid #A5B17D;
border-radius: 20px;
background: #F8F5EF;
color: #7D8958;
font-family: Poppins, sans-serif;
font-size: 11px;
line-height: 1;
cursor: pointer;
white-space: nowrap;
}
.boton-ver-mas span {
margin-left: 3px;
font-size: 14px;
}
/* =========================================================
GUARDERÍA EN CASA
Versión con ![]()
real
========================================================= */
/* FILA 1 — 4 FOTOS */
.categoria-guarderia .fila-superior {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
align-items: center;
}
/* FILA 2 — 3 FOTOS + BOTÓN */
.categoria-guarderia .fila-inferior {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
padding-left: 8%;
align-items: center;
}
/* FOTOS */
.categoria-guarderia .foto-galeria {
position: relative;
width: 100%;
height: 300px;
overflow: hidden !important;
background: #F8F5EF;
}
/* ENCUADRE INDIVIDUAL — FILA 1 FOTO 3 */
.categoria-guarderia .fila-superior
.foto-galeria:nth-child(3) img {
object-position: 40% 90%;
}
/* BOTÓN */
.categoria-guarderia .boton-ver-mas {
justify-self: center;
align-self: center;
}
/* =========================================================
CUIDADO A DOMICILIO
Versión con ![]()
real
========================================================= */
/* =========================================================
FILA 1 — 3 FOTOS
========================================================= */
.categoria-domicilio .fila-superior {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 16px;
width: 75%;
margin-left: 12%;
align-items: center;
}
/* =========================================================
FILA 2 — 3 FOTOS + BOTÓN
========================================================= */
.categoria-domicilio .fila-inferior {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
padding-left: 4%;
align-items: center;
}
/* =========================================================
CONTENEDORES DE LAS FOTOS
========================================================= */
.categoria-domicilio .foto-galeria {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
border-radius: 22px;
background: none;
}
/* =========================================================
IMÁGENES REALES
========================================================= */
.categoria-domicilio .foto-galeria img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center center;
}
/* =========================================================
ENCUADRES INDIVIDUALES
========================================================= */
/* ---------- FILA 1 · FOTO 1 ---------- */
.categoria-domicilio .fila-superior
.foto-galeria:nth-child(1) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FILA 1 · FOTO 2 ---------- */
.categoria-domicilio .fila-superior
.foto-galeria:nth-child(2) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FILA 1 · FOTO 3 ---------- */
.categoria-domicilio .fila-superior
.foto-galeria:nth-child(3) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FILA 2 · FOTO 1 ---------- */
.categoria-domicilio .fila-inferior
.foto-galeria:nth-child(1) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FILA 2 · FOTO 2 ---------- */
.categoria-domicilio .fila-inferior
.foto-galeria:nth-child(2) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FILA 2 · FOTO 3 ---------- */
.categoria-domicilio .fila-inferior
.foto-galeria:nth-child(3) img {
object-fit: contain;
object-position: center center;
}
/* =========================================================
BOTÓN VER MÁS
========================================================= */
.categoria-domicilio .boton-ver-mas {
justify-self: center;
align-self: center;
}
/* =========================================================
PELUQUERÍA
Versión con ![]()
real
========================================================= */
/* =========================================================
FILA 1 — 4 FOTOS
========================================================= */
.categoria-peluqueria .fila-superior {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: clamp(12px, 4vw, 100px);
width: 86%;
margin-left: 7%;
align-items: center;
}
/* =========================================================
CONTENEDORES DE LAS FOTOS — FILA 1
========================================================= */
.categoria-peluqueria .fila-superior .foto-galeria {
position: relative;
width: 100%;
height: clamp(190px, 18vw, 280px);
min-width: 0;
overflow: hidden;
border-radius: 22px;
background: none;
}
/* =========================================================
IMÁGENES REALES — FILA 1
========================================================= */
.categoria-peluqueria .fila-superior .foto-galeria img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center center;
}
/* =========================================================
ESPACIO / DESPLAZAMIENTO ORIGINAL
========================================================= */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(2) {
transform:
translateX(clamp(-30px, -3vw, -5px));
}
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(3) {
transform:
translateX(clamp(5px, 3vw, 30px));
}
/* =========================================================
ENCUADRES INDIVIDUALES — FILA 1
========================================================= */
/* ---------- FOTO 1 ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(1) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FOTO 2 ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(2) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FOTO 3 ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(3) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FOTO 4 ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(4) img {
object-fit: contain;
object-position: center center;
}
/* =========================================================
ANTES / DESPUÉS
========================================================= */
.categoria-peluqueria .fila-superior
.foto-galeria::after {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 10px;
border-radius: 22px;
background: #F8F5EF;
color: #7D8958;
font-family: Poppins, sans-serif;
font-size: 10px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.3px;
z-index: 2;
}
/* ---------- FOTO 1 — ANTES ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(1)::after {
content: "ANTES";
top: auto;
bottom: 8px;
}
/* ---------- FOTO 2 — DESPUÉS ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(2)::after {
content: "DESPUÉS";
top: auto;
bottom: 8px;
}
/* ---------- FOTO 3 — ANTES ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(3)::after {
content: "ANTES";
}
/* ---------- FOTO 4 — DESPUÉS ---------- */
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(4)::after {
content: "DESPUÉS";
}
/* =========================================================
PELUQUERÍA — FILA 2
========================================================= */
.categoria-peluqueria .fila-inferior {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 16px;
width: 100%;
padding-left: 1.6%;
align-items: center;
}
/* =========================================================
CONTENEDORES DE LAS FOTOS — FILA 2
========================================================= */
.categoria-peluqueria .fila-inferior .foto-galeria {
height: 300px;
overflow: hidden;
border-radius: 22px;
background: none;
}
/* =========================================================
IMÁGENES REALES — FILA 2
========================================================= */
.categoria-peluqueria .fila-inferior .foto-galeria img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center center;
}
/* =========================================================
ENCUADRES INDIVIDUALES — FILA 2
========================================================= */
/* ---------- FOTO 1 ---------- */
.categoria-peluqueria .fila-inferior
.foto-galeria:nth-child(1) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FOTO 2 ---------- */
.categoria-peluqueria .fila-inferior
.foto-galeria:nth-child(2) img {
object-fit: contain;
object-position: center center;
}
/* ---------- FOTO 3 ---------- */
.categoria-peluqueria .fila-inferior
.foto-galeria:nth-child(3) img {
object-fit: contain;
object-position: center center;
}
/* =========================================================
BOTÓN VER MÁS
========================================================= */
.categoria-peluqueria .boton-ver-mas {
justify-self: center;
align-self: center;
}
/* =========================================================
DECORACIONES
========================================================= */
.decoracion-fotos {
position: absolute;
pointer-events: none;
z-index: 2;
}
/* =========================================================
GRUPO RAMA NARANJA + HUELLA VERDE
========================================================= */
.decoracion-rama-fotos {
position: absolute;
top: 35px;
right: clamp(0px, 14vw, 400px);
width: 55px;
height: 60px;
pointer-events: none;
z-index: 2;
}
/* =========================================================
RAMA ANARANJADA
Mantiene su posición original y reduce progresivamente
su tamaño según el ancho de la ventana
========================================================= */
.rama-fotos {
width: clamp(35px, 3.4vw, 55px);
top: 0;
right: 0;
}
/* =========================================================
HUELLA VERDE JUNTO A LA RAMA NARANJA
La huella permanece a la izquierda de la rama
========================================================= */
.huella-fotos-rama {
position: absolute;
width: clamp(18px, 1.75vw, 28px);
top: 35px !important;
right: 40px;
opacity: 0.75;
transform: rotate(-15deg);
z-index: 3;
}
/* =========================================================
RAMA AZUL
========================================================= */
.rama-azul-fotos {
position: absolute;
width: clamp(38px, 3.7vw, 60px);
left: -2%;
top: 700px;
opacity: 1;
transform: none;
pointer-events: none;
z-index: 9999;
}
/* =========================================================
HUELLA VERDE
========================================================= */
.huella-fotos {
width: clamp(20px, 1.85vw, 30px);
left: -50px;
top: 1430px;
opacity: 0.75;
transform: rotate(-15deg);
}
/* =========================================================
CORAZÓN ROSITA
========================================================= */
.corazon-fotos {
width: clamp(20px, 1.85vw, 30px);
left: -50px;
bottom: 5px;
opacity: 0.8;
}
.fotos-reales .foto-galeria,
.fotos-reales .foto-galeria img {
border-radius: 0 !important;
clip-path: none !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (min-width: 901px) and (max-width: 1080px) {
/* Huella verde independiente */
.huella-fotos {
left: -3%;
}
}
@media (max-width: 900px) {
.fotos-contenedor {
max-width: 850px;
}
.categoria-guarderia .fila-superior,
.categoria-guarderia .fila-inferior {
gap: 12px;
}
.categoria-guarderia .fila-inferior {
padding-left: 4%;
}
.categoria-domicilio .fila-superior {
width: 78%;
margin-left: 8%;
}
.categoria-domicilio .fila-inferior {
padding-left: 2%;
}
/* Huella verde independiente */
.huella-fotos {
left: 3%;
}
}
/* =========================================================
AJUSTE DECORACIONES — VENTANA INTERMEDIA
700–870 px
========================================================= */
@media (min-width: 700px) and (max-width: 870px) {
/* Rama naranja + huella verde superior */
.decoracion-rama-fotos {
top: 45px;
right: 4%;
}
/* Huella verde independiente */
.huella-fotos {
left: -3%;
}
}
/* =========================================================
TABLET / MÓVIL
========================================================= */
@media (max-width: 700px) {
.fotos-reales {
padding-left: 6%;
padding-right: 6%;
}
.fotos-reales h2 {
width: 250px;
margin-left: auto;
margin-right: auto;
line-height: 1.25;
}
.galeria-fila {
grid-template-columns:
repeat(2, 1fr) !important;
width: 100% !important;
padding-left: 0 !important;
margin-left: 0 !important;
gap: 12px;
}
.categoria-guarderia .fila-inferior {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px;
padding-left: 0 !important;
}
.categoria-guarderia .fila-inferior .boton-ver-mas {
grid-column: 1 / -1;
justify-self: center;
margin-top: 4px;
}
.categoria-domicilio .galeria-fotos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.categoria-domicilio .galeria-fila {
display: contents;
}
.categoria-domicilio .foto-galeria {
width: 100% !important;
height: 150px !important;
margin: 0 !important;
}
.categoria-domicilio .boton-ver-mas {
grid-column: 1 / -1;
justify-self: center;
margin-top: 4px;
}
.categoria-domicilio .fila-inferior .foto-galeria:nth-child(3) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 10% 60%;
transform: scale(1.1);
}
.foto-galeria {
width: 100% !important;
height: 150px !important;
margin-left: 0 !important;
}
.categoria-peluqueria .fila-superior {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
margin-left: 0 !important;
gap: 12px;
}
.categoria-peluqueria .fila-superior
.foto-galeria {
width: 100% !important;
height: 150px !important;
}
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(2),
.categoria-peluqueria .fila-superior
.foto-galeria:nth-child(3) {
transform: none;
}
.categoria-peluqueria .fila-inferior .foto-galeria {
height: 150px !important;
}
.categoria-peluqueria .fila-inferior .foto-galeria:nth-child(3) img{
object-fit: cover;
object-position: center center;
}
.categoria-peluqueria .fila-inferior .foto-galeria:nth-child(4) {
width: 115% !important;
}
.categoria-peluqueria .fila-inferior .foto-galeria:nth-child(4) img {
object-fit: cover;
object-position: 90% 50%;
transform: none;
width: 93% !important;
}
.boton-ver-mas {
justify-self: center;
}
.rama-azul-fotos {
right: 20px;
bottom: 55px;
}
.corazon-fotos {
left: 5px;
bottom: -10px;
}
.huella-fotos {
left: 5px;
top: 63%;
}
.decoracion-rama-fotos {
transform: translateX(25px);
}
.fotos-reales .galeria-categoria {
margin-bottom: 70px !important;
}
}
/* =========================================================
MÓVIL PEQUEÑO
========================================================= */
@media (max-width: 450px) {
.fotos-reales h2 {
font-size: 27px;
}
.galeria-fila {
gap: 10px;
}
.foto-galeria {
height: 125px !important;
}
}
/* =========================================================
GALERÍA EXTRA - GUARDERÍA
========================================================= */
.categoria-guarderia .galeria-extra-guarderia {
display: none;
width: 100%;
margin-top: 24px;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.categoria-guarderia .galeria-extra-guarderia.galeria-extra-abierta {
display: grid;
}
/* =========================================================
FOTOS EXTRA
ESCRITORIO → SIN BORDES REDONDEADOS
========================================================= */
.categoria-guarderia .foto-extra-guarderia {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 0;
background: #F8F5EF;
}
.categoria-guarderia .foto-extra-guarderia img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain !important;
object-position: center center;
border-radius: 0 !important;
clip-path: none !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.categoria-guarderia .galeria-extra-guarderia {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.categoria-guarderia .foto-extra-guarderia {
height: 220px;
}
}
/* =========================================================
MÓVIL
→ AQUÍ SÍ REDONDEAMOS TODAS LAS FOTOS
========================================================= */
@media (max-width: 700px) {
.categoria-guarderia .galeria-extra-guarderia {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.categoria-guarderia .foto-extra-guarderia {
height: 150px;
border-radius: 50px !important;
overflow: hidden;
}
.categoria-guarderia .foto-extra-guarderia img {
border-radius: 0 !important;
clip-path: none !important;
}
}
/* =========================================================
MÓVIL PEQUEÑO
========================================================= */
@media (max-width: 450px) {
.categoria-guarderia .galeria-extra-guarderia {
gap: 10px;
}
.categoria-guarderia .foto-extra-guarderia {
height: 125px;
border-radius: 50px !important;
}
}
/* =========================================================
GALERÍA EXTRA - CUIDADO A DOMICILIO
MISMO SISTEMA QUE GUARDERÍA
========================================================= */
.categoria-domicilio .galeria-extra-cuidado {
display: none;
width: 100%;
margin-top: 24px;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.categoria-domicilio .galeria-extra-cuidado.galeria-extra-abierta {
display: grid;
}
.categoria-domicilio .foto-extra-cuidado {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 0;
background: #F8F5EF;
}
.categoria-domicilio .foto-extra-cuidado img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain !important;
object-position: center center;
border-radius: 0 !important;
clip-path: none !important;
}
@media (max-width: 1100px) {
.categoria-domicilio .galeria-extra-cuidado {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.categoria-domicilio .foto-extra-cuidado {
height: 220px;
}
}
@media (max-width: 700px) {
.categoria-domicilio .galeria-extra-cuidado {
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.categoria-domicilio .foto-extra-cuidado {
height: 150px;
border-radius: 0 !important;
overflow: hidden;
}
.categoria-domicilio .foto-extra-cuidado img {
border-radius: 0 !important;
clip-path: none !important;
}
}
@media (max-width: 450px) {
.categoria-domicilio .galeria-extra-cuidado {
gap: 10px;
}
.categoria-domicilio .foto-extra-cuidado {
height: 125px;
border-radius: 0 !important;
}
}
/* =========================================================
GALERÍA EXTRA - PELUQUERÍA
Mismo sistema que Guardería
========================================================= */
.categoria-peluqueria .galeria-extra-peluqueria {
display: none;
width: 100%;
margin-top: 24px;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.categoria-peluqueria .galeria-extra-peluqueria.galeria-extra-abierta {
display: grid;
}
.categoria-peluqueria .foto-extra-peluqueria {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 0;
background: #F8F5EF;
}
.categoria-peluqueria .foto-extra-peluqueria img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain !important;
object-position: center center;
border-radius: 0 !important;
clip-path: none !important;
}
@media (max-width: 1100px) {
.categoria-peluqueria .galeria-extra-peluqueria {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.categoria-peluqueria .foto-extra-peluqueria {
height: 220px;
}
}
@media (max-width: 700px) {
.categoria-peluqueria .galeria-extra-peluqueria {
grid-column: 1 / -1 !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.categoria-peluqueria .foto-extra-peluqueria {
height: 150px;
border-radius: 0 !important;
overflow: hidden;
}
.categoria-peluqueria .foto-extra-peluqueria img {
border-radius: 0 !important;
clip-path: none !important;
}
}
@media (max-width: 450px) {
.categoria-peluqueria .galeria-extra-peluqueria {
gap: 10px;
}
.categoria-peluqueria .foto-extra-peluqueria {
height: 125px;
}
}
/* =========================================================
CONTACTO
========================================================= */
.contacto {
position: relative;
width: 100%;
padding: 90px 5% 95px;
background: var(--crema);
text-align: center;
overflow: hidden;
}
/* =========================================================
CONTACTO
========================================================= */
.contacto {
position: relative;
min-height: 330px;
background: #F7F4EE;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.contacto-contenedor {
position: relative;
width: 100%;
max-width: 1000px;
text-align: center;
padding: 65px 40px 70px;
}
/* =========================================================
TÍTULO CONTACTO
========================================================= */
.contacto h2 {
margin: 0 0 20px;
font-family: Georgia, "Times New Roman", serif;
font-size: 28px;
font-weight: 600;
color: #5F3D2C;
}
/* =========================================================
TEXTO CONTACTO
========================================================= */
.contacto p {
margin: 0 0 25px;
font-size: 15px;
line-height: 1.6;
color: #8A725F;
}
/* =========================================================
CONTACTO
========================================================= */
.contacto {
position: relative;
width: 100%;
min-height: 330px;
padding: 90px 5% 95px;
background: var(--crema);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
/* =========================================================
CONTENEDOR CONTACTO
========================================================= */
.contacto-contenedor {
position: relative;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 65px 40px 70px;
display: flex;
flex-direction: column;
align-items: center;
}
/* =========================================================
TÍTULO CONTACTO
========================================================= */
.contacto h2 {
margin: 0 0 18px;
color: var(--marron-oscuro);
font-family: Georgia, "Times New Roman", serif;
font-size: 34px;
line-height: 1.2;
font-weight: normal;
}
/* =========================================================
TEXTO CONTACTO
========================================================= */
.contacto p {
max-width: 650px;
margin: 0 0 30px;
color: var(--texto);
font-family: Poppins, sans-serif;
font-size: 15px;
line-height: 1.6;
text-align: center;
}
/* =========================================================
BOTÓN CONTACTO
========================================================= */
.contacto .boton-principal {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 145px;
padding: 12px 28px;
background-color: #A5B17D !important;
color: #FFFFFF !important;
border: 1px solid #A5B17D !important;
border-radius: 25px;
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}
/* =========================================================
HOVER BOTÓN
========================================================= */
.contacto .boton-principal:hover {
background-color: #8F9C68 !important;
border-color: #8F9C68 !important;
color: #FFFFFF !important;
}
/* =========================================================
DECORACIONES CONTACTO
========================================================= */
.decoracion-contacto {
position: absolute;
pointer-events: none;
z-index: 1;
}
/* =========================================================
HUELLA IZQUIERDA
MANTENEMOS LOS VALORES ACTUALES
========================================================= */
.huella-contacto {
width: 160px;
left: 700px;
top: 40%;
transform: translateY(-50%);
opacity: 0.15;
}
/* =========================================================
RAMA DECORATIVA DERECHA
========================================================= */
.rama-contacto {
position: absolute;
width: 55px;
right: 750px;
top: 130px;
opacity: 0.15;
z-index: 9999;
pointer-events: none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.contacto {
padding: 75px 5% 80px;
}
.contacto h2 {
font-size: 30px;
}
.contacto p {
font-size: 14px;
max-width: 600px;
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 700px) {
.contacto {
min-height: auto;
padding: 20px 6% 30px;
}
.contacto h2 {
font-size: 30px;
line-height: 1.25;
}
.contacto p {
font-size: 14px;
line-height: 1.6;
max-width: 100%;
margin-bottom: 25px;
}
.contacto .boton-principal {
min-width: 145px;
padding: 11px 22px;
font-size: 12px;
}
.contacto-contenedor {
padding: 0 20px 20px;
max-width: 100%;
}
}
/* =========================================================
PIE DE PÁGINA
========================================================= */
footer {
background: #FFFFFF;
border-top: 1px solid #E5E0D7;
color: #6F6258;
}
/* =========================================================
CONTENEDOR PRINCIPAL
========================================================= */
.footer-contenedor {
max-width: 1000px;
margin: 0 auto;
padding: 55px 40px 45px;
display: grid;
grid-template-columns: 1.8fr 1fr 1fr;
column-gap: 80px;
align-items: start;
}
/* =========================================================
LOGO
========================================================= */
.footer-logo {
text-align: center;
}
.footer-logo img {
width: 250px;
height: auto;
display: block;
margin: 0 auto 20px;
transform: translateY(-40px);
}
.footer-logo p {
margin: 0;
font-size: 14px;
color: #6F6258;
transform: translateY(-50px);
}
/* =========================================================
COLUMNAS
========================================================= */
.footer-columna {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-columna h3 {
margin: 0 0 6px;
font-size: 15px;
font-weight: 700;
color: #4F443B;
}
.footer-columna a {
color: #6F6258;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.footer-columna a:hover {
color: #A8B978;
}
/* =========================================================
PARTE INFERIOR
========================================================= */
.footer-inferior {
max-width: 1000px;
margin: 0 auto;
padding: 18px 40px 25px;
border-top: 1px solid #DED9D0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
transform: translateY(-60px);
}
.footer-inferior p {
margin: 0;
font-size: 12px;
color: #81766D;
}
.footer-legal {
display: flex;
gap: 20px;
}
.footer-legal a {
font-size: 12px;
color: #81766D;
text-decoration: none;
}
.footer-legal a:hover {
color: #A8B978;
}
/* =========================================================
FOOTER — RESPONSIVE MÓVIL
========================================================= */
@media (max-width: 600px) {
footer {
width: 100%;
text-align: center;
}
/* =====================================================
LOGO ARRIBA
===================================================== */
.footer-contenedor {
width: 100%;
max-width: none;
margin: 0;
padding: 40px 6% 30px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
row-gap: 30px;
box-sizing: border-box;
}
.footer-logo {
grid-column: 1 / -1;
width: 100%;
text-align: center;
}
.footer-logo img {
width: 200px;
height: auto;
display: block;
margin: 0 auto 12px;
transform: none;
}
.footer-logo p {
margin: 0;
color: var(--verde-oliva-oscuro);
font-size: 14px;
text-align: center;
transform: none;
}
/* =====================================================
COLUMNAS YOLAPATITAS / HABLEMOS
===================================================== */
.footer-columna {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.footer-columna h3 {
margin: 0 0 6px;
text-align: center;
}
.footer-columna a {
text-align: center;
}
/* =====================================================
PIE INFERIOR
===================================================== */
.footer-inferior {
width: 100%;
max-width: none;
margin: 0;
padding: 18px 6% 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
box-sizing: border-box;
transform: none;
}
.footer-inferior p {
width: 100%;
margin: 0;
text-align: center;
}
.footer-legal {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.footer-legal a {
text-align: center;
}
.footer-columna h3 {
color: #4F443B !important;
}
}
/* =========================================
DESPLAZAMIENTO DE LAS SECCIONES
========================================= */
section[id] {
scroll-margin-top: 250px;
}
@media (max-width: 700px) {
section[id] {
scroll-margin-top: 180px;
}
}
/* =========================================================
GUARDERÍA — 2 COLUMNAS CONTINUAS
VENTANA REDUCIDA
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
.categoria-guarderia .galeria-fotos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.categoria-guarderia .galeria-fila {
display: contents;
}
.categoria-guarderia .galeria-fila .foto-galeria {
width: 100%;
margin: 0;
}
.categoria-guarderia .galeria-fila .boton-ver-mas {
grid-column: 2;
justify-self: center;
align-self: center;
margin-top: 0;
}
}
/* =========================================================
CUIDADO A DOMICILIO — 2 COLUMNAS CONTINUAS
VENTANA REDUCIDA
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
.categoria-domicilio .galeria-fotos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.categoria-domicilio .galeria-fila {
display: contents;
}
.categoria-domicilio .galeria-fila .foto-galeria {
width: 100%;
margin: 0;
}
.categoria-domicilio .galeria-fila .boton-ver-mas {
grid-column: 2;
justify-self: center;
align-self: center;
margin-top: 0;
}
}
/* =========================================================
PELUQUERÍA — 2 COLUMNAS CONTINUAS
VENTANA REDUCIDA
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
.categoria-peluqueria .galeria-fotos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.categoria-peluqueria .galeria-fila {
display: contents;
}
.categoria-peluqueria .galeria-fila .foto-galeria {
position: relative;
width: 100%;
height: 300px;
margin: 0;
transform: none !important;
}
.categoria-peluqueria .galeria-fila .boton-ver-mas {
grid-column: 2;
justify-self: center;
align-self: center;
margin-top: 0;
}
}
/* =========================================================
PELUQUERÍA — ETIQUETAS ANTES / DESPUÉS
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
.categoria-peluqueria .fila-superior
.foto-galeria::after {
left: 50%;
transform: translateX(-50%);
}
}
/* =========================================================
GALERÍAS EXTRA — 2 COLUMNAS EN VENTANA REDUCIDA
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
/* GUARDERÍA */
.categoria-guarderia .galeria-extra-guarderia {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px;
}
.categoria-guarderia .foto-extra-guarderia {
height: 300px;
}
/* CUIDADO A DOMICILIO */
.categoria-domicilio .galeria-extra-cuidado {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px;
}
.categoria-domicilio .foto-extra-cuidado {
height: 300px;
}
/* PELUQUERÍA */
.categoria-peluqueria .galeria-extra-peluqueria {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px;
}
.categoria-peluqueria .foto-extra-peluqueria {
height: 300px;
}
}
/* =========================================================
LAS GALERÍAS EXTRA OCUPAN TODO EL ANCHO
========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
.categoria-guarderia .galeria-extra-guarderia {
grid-column: 1 / -1;
}
.categoria-domicilio .galeria-extra-cuidado {
grid-column: 1 / -1;
}
.categoria-peluqueria .galeria-extra-peluqueria {
grid-column: 1 / -1;
}
}
/* =========================================================
BOTÓN FIJO — VER MENOS GUARDERÍA
========================================================= */
.boton-ver-menos-fijo-guarderia {
display: none;
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 9999;
padding: 9px 14px;
border: 1px solid var(--verde-oliva);
border-radius: 22px;
background: var(--crema);
color: var(--marron);
font-family: Poppins, sans-serif;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(70,50,30,.12);
}
/* =========================================================
BOTÓN FIJO — VER MENOS CUIDADO A DOMICILIO
========================================================= */
.boton-ver-menos-fijo-cuidado {
display: none;
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 9999;
padding: 9px 14px;
border: 1px solid var(--verde-oliva);
border-radius: 22px;
background: var(--crema);
color: var(--marron);
font-family: Poppins, sans-serif;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(70,50,30,.12);
}
@media (max-width: 700px) {
.boton-ver-menos-fijo-cuidado {
right: 10px;
padding: 8px 11px;
font-size: 11px;
}
}
/* =========================================================
BOTÓN FIJO — VER MENOS PELUQUERÍA
========================================================= */
.boton-ver-menos-fijo-peluqueria {
display: none;
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 9999;
padding: 9px 14px;
border: 1px solid var(--verde-oliva);
border-radius: 22px;
background: var(--crema);
color: var(--marron);
font-family: Poppins, sans-serif;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(70,50,30,.12);
}
@media (max-width: 700px) {
.boton-ver-menos-fijo-peluqueria {
right: 10px;
padding: 8px 11px;
font-size: 11px;
}
}
/* =========================================================
CONTACTO — FORMULARIO Y DECORACIONES
========================================================= */
/* =========================================================
FORMULARIO — OCULTO INICIALMENTE
========================================================= */
.formulario-contacto {
display: none;
width: 100%;
max-width: 850px;
margin: 35px auto 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 28px;
text-align: left;
}
.formulario-contacto.formulario-abierto {
display: grid;
}
/* =========================================================
CAMPOS DEL FORMULARIO
========================================================= */
.campo-formulario {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.campo-formulario label {
color: var(--marron-oscuro);
font-family: Poppins, sans-serif;
font-size: 13px;
font-weight: 500;
}
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid rgba(125, 137, 88, 0.45);
border-radius: 14px;
background: #FFFFFF;
color: var(--marron-oscuro);
font-family: Poppins, sans-serif;
font-size: 13px;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
/* =========================================================
PLACEHOLDER
========================================================= */
.campo-formulario input::placeholder,
.campo-formulario textarea::placeholder {
color: rgba(138, 114, 95, 0.65);
}
/* =========================================================
CAMPOS AL SELECCIONAR
========================================================= */
.campo-formulario input:focus,
.campo-formulario select:focus,
.campo-formulario textarea:focus {
border-color: var(--verde-oliva);
box-shadow:
0 0 0 3px rgba(165, 177, 125, 0.15);
}
/* =========================================================
SELECT
========================================================= */
.campo-formulario select {
cursor: pointer;
}
/* =========================================================
MENSAJE — ANCHO COMPLETO
========================================================= */
.campo-mensaje {
grid-column: 1 / -1;
}
.campo-formulario textarea {
min-height: 130px;
resize: vertical;
}
/* =========================================================
PRIVACIDAD
========================================================= */
.privacidad-contacto {
grid-column: 1 / -1;
margin-top: 2px;
}
.privacidad-contacto label {
display: flex;
align-items: flex-start;
gap: 9px;
color: var(--texto);
font-family: Poppins, sans-serif;
font-size: 11px;
line-height: 1.5;
cursor: pointer;
}
.privacidad-contacto input {
margin-top: 3px;
flex: 0 0 auto;
accent-color: var(--verde-oliva);
}
/* =========================================================
BOTÓN ENVIAR
========================================================= */
.boton-enviar-contacto {
grid-column: 1 / -1;
justify-self: center;
margin-top: 4px;
}
/* =========================================================
MENSAJE DEL FORMULARIO
========================================================= */
.mensaje-formulario {
grid-column: 1 / -1;
min-height: 20px;
margin: 0;
text-align: center;
}
/* =========================================================
DECORACIONES CONTACTO
========================================================= */
.contacto .decoracion-contacto {
pointer-events: none;
z-index: 0;
}
.contacto-contenedor {
position: relative;
z-index: 2;
}
/* HUELLA IZQUIERDA */
.contacto .huella-contacto {
left: 15%;
top: 40%;
width: 120px;
transform: translateY(-50%);
opacity: 0.15;
}
/* RAMA DERECHA */
.contacto .rama-contacto {
right: 13%;
top: 40%;
width: 55px;
transform: translateY(-50%);
opacity: 0.15;
}
/* =========================================================
CUANDO EL FORMULARIO ESTÁ ABIERTO
========================================================= */
.contacto:has(.formulario-contacto.formulario-abierto) {
overflow: hidden;
}
/* =========================================================
TABLET / PANTALLAS MEDIANAS
========================================================= */
@media (max-width: 900px) {
.contacto .huella-contacto {
left: 1%;
width: 90px;
}
.contacto .rama-contacto {
right: 1%;
width: 45px;
}
}
/* =========================================================
MÓVIL
========================================================= */
@media (max-width: 700px) {
.formulario-contacto {
max-width: 100%;
margin-top: 30px;
grid-template-columns: 1fr;
gap: 20px;
padding: 0 5px;
box-sizing: border-box;
}
.campo-mensaje,
.privacidad-contacto,
.boton-enviar-contacto,
.mensaje-formulario {
grid-column: auto;
}
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
font-size: 13px;
}
.campo-formulario textarea {
min-height: 140px;
}
/* DECORACIONES */
.contacto .huella-contacto {
left: -10px;
top: 20%;
width: 70px;
}
.contacto .rama-contacto {
right: 10px;
top: 45%;
width: 40px;
}
}
/* =========================================================
MÓVIL PEQUEÑO
========================================================= */
@media (max-width: 450px) {
.formulario-contacto {
gap: 18px;
padding: 0;
}
.campo-formulario label {
font-size: 12px;
}
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
padding: 11px 13px;
}
}
/* =========================================================
FOTOS REALES — DETRÁS DEL ENCABEZADO
PANTALLA REDUCIDA
========================================================= */
@media (max-width: 899px) {
.fotos-reales {
z-index: 1;
}
}
/* =========================================================
VENTANA REDUCIDA — 451 A 699 PX
NO AFECTA A 700 PX EN ADELANTE NI A 450 PX O MENOS
========================================================= */
@media (min-width: 451px) and (max-width: 699px) {
/* =====================================================
SERVICIOS
2 ARRIBA + 1 ABAJO
===================================================== */
.seccion-servicios .servicios {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 30px 16px;
width: 100%;
max-width: 650px;
margin: 0 auto;
overflow: visible;
scroll-snap-type: none;
}
.seccion-servicios .servicio {
flex: 0 0 calc(50% - 8px);
width: calc(50% - 8px);
max-width: 300px;
min-width: 0;
scroll-snap-align: none;
}
.seccion-servicios .servicio:nth-child(3) {
flex-basis: calc(50% - 8px);
}
.seccion-servicios .flecha-servicios {
display: none;
}
/* =====================================================
FOTOS REALES
2 COLUMNAS CONTINUAS
===================================================== */
.fotos-reales {
padding-left: 6%;
padding-right: 6%;
}
.categoria-guarderia .galeria-fotos,
.categoria-domicilio .galeria-fotos,
.categoria-peluqueria .galeria-fotos {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
.categoria-guarderia .galeria-fila,
.categoria-domicilio .galeria-fila,
.categoria-peluqueria .galeria-fila {
display: contents;
}
.categoria-guarderia .galeria-fila .foto-galeria,
.categoria-domicilio .galeria-fila .foto-galeria,
.categoria-peluqueria .galeria-fila .foto-galeria {
width: 100%;
margin: 0;
}
/* BOTONES VER MÁS */
.categoria-guarderia .galeria-fila .boton-ver-mas,
.categoria-domicilio .galeria-fila .boton-ver-mas,
.categoria-peluqueria .galeria-fila .boton-ver-mas {
grid-column: 2;
justify-self: center;
align-self: center;
margin-top: 0;
}
/* =====================================================
ALTURA DE LAS FOTOS
===================================================== */
.categoria-guarderia .foto-galeria,
.categoria-domicilio .foto-galeria,
.categoria-peluqueria .foto-galeria {
height: 180px !important;
}
/* =====================================================
GALERÍAS EXTRA
2 COLUMNAS
===================================================== */
.categoria-guarderia .galeria-extra-guarderia,
.categoria-domicilio .galeria-extra-cuidado,
.categoria-peluqueria .galeria-extra-peluqueria {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
gap: 16px;
}
.categoria-guarderia .foto-extra-guarderia,
.categoria-domicilio .foto-extra-cuidado,
.categoria-peluqueria .foto-extra-peluqueria {
height: 180px;
}
/* =====================================================
ENCABEZADO
VENTANA REDUCIDA
===================================================== */
.encabezado {
min-height: 180px;
}
.logo-reducido-menu {
width: 120px;
height: 120px;
}
.wordmark-menu {
width: 200px;
margin-left: 20px;
}
/* =====================================================
RAMA AZUL — FOTOS REALES
DETRÁS DEL ENCABEZADO
===================================================== */
.fotos-reales {
z-index: 1;
}
/* =====================================================
PELUQUERÍA — ETIQUETAS ANTES / DESPUÉS
CENTRADAS DENTRO DE LAS FOTOS
===================================================== */
.categoria-peluqueria .fila-superior
.foto-galeria::after {
left: 50%;
transform: translateX(-50%);
}
/* =====================================================
PELUQUERÍA — ÚLTIMAS DOS FOTOS
AJUSTE INDIVIDUAL
===================================================== */
/* PERRO — un poco más grande */
.categoria-peluqueria .fila-inferior
.foto-galeria:nth-child(3) img {
transform: scale(1.5);
object-fit: contain;
}
/* GATO — mismo tamaño, desplazado a la izquierda */
.categoria-peluqueria .fila-inferior
.foto-galeria:nth-child(4) img {
transform: translateX(-60px);
object-fit: contain;
}
}
/* =========================================================
ENCABEZADO — 451 A 699 PX
RESPONSIVE PROGRESIVO
========================================================= */
@media (min-width: 451px) and (max-width: 699px) {
/* =====================================================
LOGO
SE REDUCE AL REDUCIR LA VENTANA
===================================================== */
.logo-reducido-menu {
width: clamp(110px, 24vw, 150px);
height: clamp(110px, 24vw, 150px);
transform: translateY(20px);
}
/* =====================================================
YOLAPATITAS
TAMBIÉN SE REDUCE
===================================================== */
.wordmark-menu {
width: clamp(160px, 32vw, 210px);
margin-left: clamp(15px, 4vw, 30px);
}
/* =====================================================
SILUETAS
UN POCO MÁS PEQUEÑAS
===================================================== */
.siluetas-con-frase img {
width: 75%;
max-width: 100%;
height: auto;
}
/* =====================================================
FRASE
SE MANTIENE DENTRO DEL ENCABEZADO
===================================================== */
.frase-cabecera {
max-width: 100%;
transform: translate(0, -8px);
box-sizing: border-box;
}
/* =====================================================
ESPACIO INFERIOR
===================================================== */
.siluetas-con-frase {
padding-bottom: 10px;
}
}
/* =========================================================
POR QUÉ ELEGIR YOLAPATITAS
RAMAS A LOS LADOS DEL TÍTULO
433–640 PX
========================================================= */
@media (min-width: 433px) and (max-width: 640px) {
/* RAMA IZQUIERDA */
#porque-yolapatitas .decoracion-rama-izquierda {
left: 4%;
top: 55px;
width: 30px;
}
/* RAMA DERECHA */
#porque-yolapatitas .decoracion-rama-derecha {
right: 4%;
top: 55px;
width: 30px;
}
/* TÍTULO — un poco más pequeño */
#porque-yolapatitas h2 {
font-size: 26px;
line-height: 1.2;
}
}