/* ========================================================================== MUNDO DE PATAS — dirección Patio Redondez, aire y cercanía. La huella del logo es el elemento estructural. Los valores de marca (color, tipografía) se inyectan desde la tabla configuraciones_tienda mediante variables CSS en el . Lo que hay aquí son los valores por defecto: cambiarlos en el panel no requiere tocar CSS. ========================================================================== */ :root { /* Marca — sale del logotipo */ --cacao: #3A2514; --cacao-claro: #5C4230; --teal: #1F7A6D; --teal-oscuro: #16594F; --teal-claro: #8FD3C4; --teal-papel: #EAF5F1; --dorado: #D8A04D; --dorado-papel: #FBF1DE; /* Lienzo */ --papel: #FDFBF7; --papel-2: #F6F2EA; --linea: #E7E0D3; --linea-fuerte: #D3C8B4; /* Texto */ --tinta: #2A1B0F; --tinta-suave: #6B5D50; --tinta-tenue: #93887C; /* Señales */ --exito: #1F7A6D; --alerta: #B0561F; --error: #A33232; --error-papel: #FBEDEA; /* Forma: la redondez es la firma de esta dirección */ --r-chico: 12px; --r: 20px; --r-grande: 28px; --r-capsula: 999px; /* Ritmo */ --medida: 1200px; --aire: clamp(2.5rem, 6vw, 5rem); --sombra: 0 1px 2px rgba(58, 37, 20, .04), 0 8px 24px rgba(58, 37, 20, .06); --sombra-alta: 0 2px 6px rgba(58, 37, 20, .06), 0 16px 40px rgba(58, 37, 20, .10); --fuente-titulo: "Baloo 2", "Quicksand", system-ui, sans-serif; --fuente-texto: "Quicksand", "Nunito", system-ui, -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.65 var(--fuente-texto); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .6em; color: var(--cacao); } h1 { font-size: clamp(2rem, 5.5vw, 3.3rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } a { color: var(--teal-oscuro); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--teal); } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; } img { max-width: 100%; height: auto; display: block; } .saltar { position: absolute; left: -9999px; background: var(--cacao); color: var(--papel); padding: .8rem 1.4rem; border-radius: var(--r-capsula); z-index: 100; } .saltar:focus { left: 1rem; top: 1rem; } .envoltura { max-width: var(--medida); margin: 0 auto; padding: 0 1.25rem; } .seccion { padding: var(--aire) 0; } /* --------------------------------------------------------------- Cabecera */ .cabecera { position: sticky; top: 0; z-index: 40; background: rgba(253, 251, 247, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); } .cabecera__fila { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; } .marca { display: flex; align-items: center; gap: .65rem; text-decoration: none; flex-shrink: 0; } .marca img { width: 44px; height: 44px; } .marca__texto { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.35rem; color: var(--cacao); line-height: 1; } .marca__texto em { font-style: normal; color: var(--teal); font-size: .78em; } .navegacion { display: flex; gap: .35rem; margin-left: auto; align-items: center; } .navegacion a { padding: .55rem 1rem; border-radius: var(--r-capsula); font-weight: 600; font-size: .96rem; color: var(--cacao); text-decoration: none; transition: background .16s ease; } .navegacion a:hover, .navegacion a[aria-current] { background: var(--teal-papel); color: var(--teal-oscuro); } .buscador { position: relative; flex: 1 1 260px; max-width: 340px; } .buscador input { width: 100%; padding: .7rem 1.1rem .7rem 2.6rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-capsula); background: var(--papel); font: inherit; font-size: .95rem; color: var(--tinta); } .buscador input::placeholder { color: var(--tinta-tenue); } .buscador input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 4px var(--teal-papel); } .buscador svg { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 18px; opacity: .5; } /* ---------------------------------------------------------------- Botones */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.8rem; border-radius: var(--r-capsula); font: 700 1rem/1 var(--fuente-texto); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background .16s ease, box-shadow .16s ease; } .boton:active { transform: translateY(1px); } .boton--principal { background: var(--teal); color: #fff; } .boton--principal:hover { background: var(--teal-oscuro); color: #fff; box-shadow: var(--sombra); } .boton--contorno { border-color: var(--cacao); color: var(--cacao); background: transparent; } .boton--contorno:hover { background: var(--cacao); color: var(--papel); } .boton--suave { background: var(--teal-papel); color: var(--teal-oscuro); } .boton--suave:hover { background: var(--teal-claro); } .boton[disabled], .boton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .boton--ancho { width: 100%; } /* ------------------------------------------------------------------ Píldoras */ .pildora { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; border-radius: var(--r-capsula); font-size: .82rem; font-weight: 700; } .pildora--agotado { background: var(--papel-2); color: var(--tinta-suave); } .pildora--nuevo { background: var(--dorado-papel); color: #8A5A16; } .pildora--oferta { background: var(--error-papel); color: var(--error); } /* --------------------------------------------------------------- Portada */ .portada { background: var(--teal-papel); border-radius: 0 0 var(--r-grande) var(--r-grande); padding: clamp(2.5rem, 7vw, 5rem) 0; } .portada__reja { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .portada__reja { grid-template-columns: 1.05fr .95fr; } } .portada__entrada { font-size: 1.15rem; color: var(--cacao-claro); max-width: 46ch; } .portada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .portada__figura img { border-radius: var(--r-grande); box-shadow: var(--sombra-alta); } /* -------------------------------------------------------- Rejilla de fichas */ .rejilla { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .ficha { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ficha:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--teal-claro); } .ficha__foto { position: relative; aspect-ratio: 1; background: var(--papel-2); overflow: hidden; } .ficha__foto img { width: 100%; height: 100%; object-fit: cover; } .ficha__marcas { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .35rem; flex-wrap: wrap; } .ficha__cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; } .ficha__tipo { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); } .ficha__titulo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--cacao); margin: 0; } .ficha__precio { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: 1.1rem; color: var(--cacao); } .ficha__precio small { font-weight: 600; font-size: .8rem; color: var(--tinta-suave); } /* ----------------------------------------------------------------- Filtros */ .catalogo { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1000px) { .catalogo { grid-template-columns: 268px 1fr; } } .filtros { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 1.3rem; } @media (min-width: 1000px) { .filtros { position: sticky; top: 94px; } } .filtros__grupo + .filtros__grupo { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); } .filtros__titulo { font-family: var(--fuente-titulo); font-size: 1rem; font-weight: 700; margin: 0 0 .8rem; color: var(--cacao); } .filtros__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; } .filtros__lista--columna { flex-direction: column; flex-wrap: nowrap; gap: .1rem; } .casilla { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; cursor: pointer; font-size: .95rem; } .casilla input { width: 19px; height: 19px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; } .casilla__cuenta { margin-left: auto; font-size: .8rem; color: var(--tinta-tenue); } /* Talla: cápsulas, no casillas. Se eligen de un vistazo. */ .talla { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 48px; padding: .4rem .6rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); background: #fff; cursor: pointer; font-size: .95rem; font-weight: 700; color: var(--cacao); transition: border-color .14s ease, background .14s ease; } .talla input { position: absolute; opacity: 0; pointer-events: none; } .talla:hover { border-color: var(--teal); } .talla:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; } .talla:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; } .talla small { font-size: .66rem; font-weight: 600; opacity: .72; margin-top: .1rem; } .medidor { background: var(--dorado-papel); border-radius: var(--r-chico); padding: .9rem 1rem; margin-top: .9rem; } .medidor label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .45rem; color: #7A4E12; } .medidor__fila { display: flex; gap: .5rem; } .medidor input { flex: 1; min-width: 0; padding: .55rem .8rem; font: inherit; font-size: .95rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); background: #fff; } .medidor__salida { margin: .6rem 0 0; font-size: .88rem; color: #7A4E12; min-height: 1.2em; } .barra-orden { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); } .barra-orden__cuenta { font-size: .95rem; color: var(--tinta-suave); } .barra-orden select { margin-left: auto; padding: .6rem 2.2rem .6rem 1rem; font: inherit; font-size: .95rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-capsula); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5D50' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 15px; appearance: none; cursor: pointer; color: var(--tinta); } .aplicados { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; } .aplicados a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .5rem .35rem .9rem; border-radius: var(--r-capsula); background: var(--teal-papel); color: var(--teal-oscuro); font-size: .87rem; font-weight: 700; text-decoration: none; } .aplicados a::after { content: "×"; font-size: 1.15rem; line-height: 1; opacity: .65; } .aplicados a:hover::after { opacity: 1; } /* ---------------------------------------------------------------- Producto */ .producto { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: 1fr; } @media (min-width: 900px) { .producto { grid-template-columns: 1.08fr .92fr; } } .galeria__principal { border-radius: var(--r-grande); overflow: hidden; background: var(--papel-2); aspect-ratio: 1; } .galeria__principal img { width: 100%; height: 100%; object-fit: cover; } .galeria__tiras { display: flex; gap: .7rem; margin-top: .8rem; flex-wrap: wrap; } .galeria__tira { width: 74px; height: 74px; border-radius: var(--r-chico); overflow: hidden; border: 2px solid transparent; background: var(--papel-2); cursor: pointer; padding: 0; } .galeria__tira[aria-current="true"] { border-color: var(--teal); } .precio-grande { font-family: var(--fuente-titulo); font-size: 2.1rem; font-weight: 700; color: var(--cacao); } .precio-grande del { font-size: 1.2rem; color: var(--tinta-tenue); font-weight: 600; margin-left: .6rem; } .opcion + .opcion { margin-top: 1.4rem; } .opcion__titulo { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .7rem; } .opcion__titulo h3 { margin: 0; font-size: 1rem; } .opcion__elegido { font-size: .92rem; color: var(--tinta-suave); font-weight: 600; } .opcion__valores { display: flex; flex-wrap: wrap; gap: .55rem; } .aviso { border-radius: var(--r-chico); padding: .9rem 1.1rem; font-size: .93rem; background: var(--papel-2); color: var(--tinta-suave); border-left: 4px solid var(--linea-fuerte); border-radius: 0 var(--r-chico) var(--r-chico) 0; } .aviso--teal { background: var(--teal-papel); color: var(--teal-oscuro); border-left-color: var(--teal); } .detalles { margin-top: 2rem; border-top: 1px solid var(--linea); } .detalles details { border-bottom: 1px solid var(--linea); } .detalles summary { padding: 1.1rem 0; cursor: pointer; font-weight: 700; font-family: var(--fuente-titulo); list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--cacao); } .detalles summary::-webkit-details-marker { display: none; } .detalles summary::after { content: "+"; font-size: 1.5rem; color: var(--teal); font-weight: 400; } .detalles details[open] summary::after { content: "−"; } .detalles__cuerpo { padding-bottom: 1.3rem; color: var(--tinta-suave); } /* --------------------------------------------------------- Migas y paginado */ .migas { font-size: .88rem; color: var(--tinta-tenue); margin-bottom: 1.5rem; } .migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; } .migas li:not(:last-child)::after { content: "/"; margin-left: .45rem; opacity: .5; } .migas a { color: var(--tinta-suave); text-decoration: none; } .migas a:hover { color: var(--teal); text-decoration: underline; } .paginado { display: flex; gap: .4rem; justify-content: center; align-items: center; margin-top: 3rem; flex-wrap: wrap; } .paginado a, .paginado span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-capsula); text-decoration: none; font-weight: 700; font-size: .95rem; border: 1.5px solid var(--linea); color: var(--cacao); padding: 0 .8rem; } .paginado a:hover { border-color: var(--teal); background: var(--teal-papel); color: var(--teal-oscuro); } .paginado [aria-current] { background: var(--cacao); border-color: var(--cacao); color: var(--papel); } /* ------------------------------------------------------------------- Vacío */ .vacio { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1rem; } .vacio img { width: 92px; margin: 0 auto 1.2rem; opacity: .4; } /* --------------------------------------------------------------------- Pie */ .pie { background: var(--cacao); color: #E7DDD2; margin-top: var(--aire); padding: var(--aire) 0 2rem; } .pie h3 { color: var(--papel); font-size: 1rem; margin-bottom: .9rem; } .pie__reja { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .pie a { color: #E7DDD2; text-decoration: none; font-size: .94rem; } .pie a:hover { color: var(--teal-claro); text-decoration: underline; } .pie__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .13); font-size: .82rem; color: #B3A496; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; } /* ------------------------------------------------------------- Accesibilidad */ .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .ficha:hover { transform: none; } } /* ------------------------------------------------------- Menú en pantallas chicas */ .menu-boton { display: none; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-capsula); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .menu-boton span { display: block; width: 18px; height: 2px; background: var(--cacao); border-radius: 2px; } .navegacion a { white-space: nowrap; } @media (max-width: 900px) { .cabecera__fila { flex-wrap: wrap; padding: .8rem 0; } .buscador { order: 3; flex-basis: 100%; max-width: none; } .menu-boton { display: flex; } .navegacion { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .2rem; margin: .6rem 0 0; display: none; } .navegacion[data-abierto="true"] { display: flex; } .navegacion a { padding: .8rem 1rem; } } /* ------------------------------------------------------------- Carrito */ .lista-carrito { list-style: none; margin: 0 0 2rem; padding: 0; } .renglon { display: flex; gap: 1.1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--linea); align-items: flex-start; flex-wrap: wrap; } .renglon img { border-radius: var(--r-chico); background: var(--papel-2); } .renglon__datos { flex: 1 1 220px; min-width: 0; } .renglon__datos h2 { font-size: 1.05rem; margin: 0 0 .2rem; } .renglon__datos h2 a { color: var(--cacao); text-decoration: none; } .renglon__acciones { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; } .cantidad input { width: 72px; padding: .5rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); font: inherit; text-align: center; } .renglon__importe { font-weight: 700; margin: 0; min-width: 100px; text-align: right; } .enlace-boton { background: none; border: 0; color: var(--tinta-suave); cursor: pointer; font: inherit; font-size: .88rem; text-decoration: underline; padding: 0; } .enlace-boton:hover { color: var(--error); } .totales { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 1.4rem; } .totales__lista { margin: 1.2rem 0; display: grid; gap: .55rem; } .totales__lista > div { display: flex; justify-content: space-between; gap: 1rem; } .totales__lista dt, .totales__lista dd { margin: 0; } .totales__lista dt { color: var(--tinta-suave); } .totales__lista dd { font-weight: 600; } .totales__final { border-top: 1px solid var(--linea); padding-top: .7rem; margin-top: .3rem; font-size: 1.2rem; } .totales__final dt, .totales__final dd { font-weight: 700; color: var(--cacao); } .cupon label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .45rem; } .cupon__fila { display: flex; gap: .5rem; } .cupon__fila input { flex: 1; min-width: 0; padding: .65rem .9rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-capsula); font: inherit; text-transform: uppercase; } /* ------------------------------------------------------------ Checkout */ .checkout { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .checkout { grid-template-columns: 1.25fr .75fr; } } .checkout__form fieldset { border: 1px solid var(--linea); border-radius: var(--r); padding: 1.3rem; margin: 0 0 1.3rem; background: #fff; } .checkout__form legend { font-family: var(--fuente-titulo); font-weight: 700; padding: 0 .5rem; color: var(--cacao); } .campo { margin-bottom: 1rem; } .campo label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; } .campo input, .campo select, .campo textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-chico); font: inherit; font-size: 1rem; background: #fff; color: var(--tinta); } .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-papel); } .campo-doble { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .ayuda { font-size: .85rem; color: var(--tinta-tenue); margin: .35rem 0 0; } .checkout__resumen { background: var(--teal-papel); border-radius: var(--r); padding: 1.4rem; } @media (min-width: 900px) { .checkout__resumen { position: sticky; top: 94px; } } .lista-pedido { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; } .lista-pedido li { display: flex; justify-content: space-between; gap: 1rem; font-size: .94rem; } .tarjeta-pedido { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 1.4rem; margin-bottom: 1.3rem; } .aviso--error { background: var(--error-papel); color: #A33232; border-left-color: #A33232; } .tenue { color: var(--tinta-tenue); font-size: .9rem; } /* ------------------------------------------------- Compra en la ficha */ .compra { display: flex; gap: .9rem; align-items: flex-end; margin-top: 2rem; flex-wrap: wrap; } .compra__cantidad label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; } .compra__cantidad input { width: 88px; padding: .8rem; border: 1.5px solid var(--linea-fuerte); border-radius: var(--r-capsula); font: inherit; text-align: center; } .compra .boton { flex: 1; min-width: 190px; padding: .9rem 1.5rem; } .talla--agotada { opacity: .35; text-decoration: line-through; cursor: not-allowed; } .talla--agotada:hover { border-color: var(--linea-fuerte); } .cabecera__carrito { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-capsula); text-decoration: none; color: var(--cacao); flex-shrink: 0; } .cabecera__carrito:hover { background: var(--teal-papel); } .cabecera__carrito svg { width: 22px; } .cabecera__cuenta { position: absolute; top: 1px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--teal); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* Código postal: es el primer campo y el que dispara el resto */ .campo--cp { max-width: 220px; } .campo--cp input { font-size: 1.15rem; letter-spacing: .12em; text-align: center; font-weight: 700; } #aviso-cp { min-height: 1.3em; } /* ---------------------------------------------------------- WhatsApp */ .wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.22); transition: transform .15s ease; } .wa-flotante:hover { transform: scale(1.06); color: #fff; } .wa-flotante svg { width: 30px; height: 30px; } @media (max-width: 600px) { .wa-flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; } } .boton--wa { background: #25D366; color: #fff; } .boton--wa:hover { background: #1EBE5A; color: #fff; } .paso-siguiente { background: #EAF7EF; border: 1px solid #BFE6CE; border-radius: var(--r); padding: 1.5rem; margin-bottom: 1.5rem; text-align: center; } .paso-siguiente h2 { font-size: 1.15rem; margin-bottom: .4rem; } .paso-siguiente p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 1.1rem; }