{"id":987517060,"date":"2025-12-01T08:23:50","date_gmt":"2025-12-01T08:23:50","guid":{"rendered":"https:\/\/mallorcagraphics.com\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/"},"modified":"2025-12-01T08:23:50","modified_gmt":"2025-12-01T08:23:50","slug":"css-clamp-vs-calc-que-es-y-como-debe-utilizarse","status":"publish","type":"post","link":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/","title":{"rendered":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?"},"content":{"rendered":"<h2>Entendiendo CSS clamp() vs calc() en el Desarrollo Web Moderno<\/h2>\n<p>Este art\u00edculo es una exploraci\u00f3n t\u00e9cnica detallada de dos potentes funciones CSS:  <code>clamp()<\/code>  y  <code>calc()<\/code>. Aunque ambas se utilizan con frecuencia en el dise\u00f1o adaptable y fluido, tienen prop\u00f3sitos muy diferentes. A continuaci\u00f3n, explicamos c\u00f3mo funciona cada funci\u00f3n, por qu\u00e9 son importantes y c\u00f3mo pueden mejorar dr\u00e1sticamente la forma de crear dise\u00f1os, tipograf\u00eda y espaciado en los sitios web modernos. Tanto si trabajas con valores din\u00e1micos complejos como si intentas reducir la dependencia excesiva de las consultas de medios, esta gu\u00eda te proporcionar\u00e1 una comprensi\u00f3n m\u00e1s profunda de cu\u00e1ndo y c\u00f3mo utilizar estas herramientas de forma eficaz.  <\/p>\n<p>Tanto si eres un principiante con curiosidad por las t\u00e9cnicas avanzadas de CSS como si eres un desarrollador con experiencia que est\u00e1 perfeccionando su sistema de dise\u00f1o, este art\u00edculo explica la diferencia entre clamp y calc de forma clara, pr\u00e1ctica y con ejemplos. Al final, sabr\u00e1s qu\u00e9 funci\u00f3n aplicar, por qu\u00e9 es importante y c\u00f3mo evitar errores comunes en el dise\u00f1o CSS adaptable. <\/p>\n<p>&#8212;&#8211;<\/p>\n<p>El CSS moderno y el <a title=\"M\u00e1s informaci\u00f3n sobre el dise\u00f1o web adaptativo\" href=\"https:\/\/mallorcagraphics.com\/blog\/5-important-css-units-responsive-design\/\">dise\u00f1o web adaptable<\/a> son mucho m\u00e1s potentes que antes. En lugar de depender de largas cadenas de consultas de medios y valores de p\u00edxeles codificados, ahora podemos expresar <strong>las relaciones<\/strong> directamente en CSS. Dos de las funciones que lo hacen posible son  <strong><code>clamp()<\/code><\/strong>  y  <strong><code>calc()<\/code><\/strong>.<\/p>\n<p>Ambos se mencionan a menudo en el contexto del dise\u00f1o adaptable y los dise\u00f1os fluidos, pero no son la misma herramienta. Resuelven problemas diferentes, tienen puntos fuertes distintos y conllevan sus propios riesgos. Entender la diferencia te ayudar\u00e1 a escribir un CSS m\u00e1s predecible, m\u00e1s f\u00e1cil de mantener y m\u00e1s preparado para el futuro.  <\/p>\n<p><strong>En este art\u00edculo trataremos:<\/strong><\/p>\n<ul>\n<li>Qu\u00e9 es <code>clamp()<\/code> y c\u00f3mo funciona<\/li>\n<li>Qu\u00e9 es <code>calc()<\/code> y c\u00f3mo funciona<\/li>\n<li>Las principales diferencias entre ellos<\/li>\n<li>Cu\u00e1ndo utilizar cada una (con ejemplos pr\u00e1cticos)<\/li>\n<li>Un \u00ablugar especial\u00bb donde generalmente <strong>no se debe<\/strong> utilizar ni<\/li>\n<li>Por qu\u00e9 <strong>deber\u00eda<\/strong> utilizarlos en casi todas partes<\/li>\n<\/ul>\n<p><!-- clamp() --><\/p>\n<section>\n<h2>\u00bfQu\u00e9 es CSS <code>clamp()<\/code>?<\/h2>\n<p>En  <code>clamp()<\/code>  La funci\u00f3n CSS permite definir un valor que puede crecer y decrecer pero nunca bajar de<br \/>\nun m\u00ednimo o subir de un m\u00e1ximo. Su firma es: <\/p>\n<pre><code>clamp(minimum, preferred, maximum)<\/code><\/pre>\n<p>Por ejemplo:<\/p>\n<pre><code>font-size: clamp(1rem, 2vw, 2.5rem);<\/code><\/pre>\n<p>Es decir:<\/p>\n<ul>\n<li><strong>M\u00ednimo:<\/strong> El tama\u00f1o de letra nunca ser\u00e1 inferior a <code>1rem<\/code>.<\/li>\n<li><strong>Preferido (fluido):<\/strong> El navegador intentar\u00e1 utilizar <code>2vw<\/code> (2% del ancho de la ventana gr\u00e1fica).<\/li>\n<li><strong>M\u00e1ximo:<\/strong> El tama\u00f1o de la fuente nunca ser\u00e1 superior a <code>2.5rem<\/code>.<\/li>\n<\/ul>\n<p>El resultado es un valor que se adapta a la anchura de la ventana gr\u00e1fica pero se mantiene dentro de un rango seguro. Esto es ideal para la tipograf\u00eda responsive y el espaciado, que debe ser fluido pero no romper el dise\u00f1o. <\/p>\n<h3>C\u00f3mo eval\u00faa <code>clamp()<\/code> sus argumentos<\/h3>\n<p>Los tres argumentos deben resolver el mismo tipo de valor (por ejemplo, todos deben resolver una longitud). Pueden utilizar unidades diferentes, siempre que el tipo calculado final coincida. Por eso es v\u00e1lido algo como esto:  <\/p>\n<pre><code>font-size: clamp(16px, 1.5rem, 4vw);<\/code><\/pre>\n<p>Bajo el cap\u00f3, el navegador calcula el valor preferido y luego lo sujeta para que nunca baje del m\u00ednimo ni suba del m\u00e1ximo.<\/p>\n<h3>Casos de uso comunes para  <code>clamp()<\/code><\/h3>\n<h3>1. Tipograf\u00eda fluida sin consultas de medios adicionales<\/h3>\n<p>En lugar de escribir consultas de medios separadas para los distintos t\u00edtulos, puede utilizar  <code>clamp()<\/code>  para que los tama\u00f1os de fuente se escalen suavemente entre un m\u00ednimo y un m\u00e1ximo.<\/p>\n<pre><code>h1 {\n  font-size: clamp(2rem, 4vw, 3.5rem);\n}\n\nh2 {\n  font-size: clamp(1.5rem, 3vw, 2.5rem);\n}<\/code><\/pre>\n<p>De este modo, los encabezados resultan legibles en pantallas peque\u00f1as y se evita que adquieran un tama\u00f1o c\u00f3mico en pantallas muy anchas.<\/p>\n<h3>2. Espaciado sensible (m\u00e1rgenes, relleno, espacios)<\/h3>\n<p>Puede utilizar  <code>clamp()<\/code>  para un espaciado que se escala suavemente, mejorando el ritmo de la maquetaci\u00f3n sin extra<br \/>\npuntos de ruptura:<\/p>\n<pre><code>.section {\n  padding-inline: clamp(1rem, 4vw, 4rem);\n  padding-block: clamp(2rem, 5vh, 6rem);\n}<\/code><\/pre>\n<p>Esto permite que las secciones respiren m\u00e1s en las pantallas m\u00e1s grandes y se mantengan compactas en las m\u00e1s peque\u00f1as.<\/p>\n<h3>3. Dimensionamiento de componentes con l\u00edmites sensibles<\/h3>\n<p>Para tarjetas, botones y otros componentes de la interfaz de usuario,  <code>clamp()<\/code>  proporciona una forma de mantener las anchuras y alturas dentro de unos l\u00edmites utilizables:<\/p>\n<pre><code>.card {\n  width: clamp(260px, 60%, 480px);\n}<\/code><\/pre>\n<p>La tarjeta puede crecer, pero s\u00f3lo dentro de un rango que su dise\u00f1o pueda manejar con seguridad.<\/p>\n<h3>4. Combinaci\u00f3n de <code>clamp()<\/code> con propiedades personalizadas<\/h3>\n<p><code>clamp()<\/code>  se vuelve a\u00fan m\u00e1s potente cuando se combina con propiedades personalizadas CSS:<\/p>\n<pre><code>:root {\n  --font-min: 1rem;\n  --font-max: 2.5rem;\n}\n\np {\n  font-size: clamp(var(--font-min), 2vw, var(--font-max));\n}<\/code><\/pre>\n<p>Esto hace que su sistema de dise\u00f1o sea m\u00e1s f\u00e1cil de ajustar: redefinir un par de variables puede ajustar grupos enteros de componentes.<\/p>\n<\/section>\n<p><!-- calc() --><\/p>\n<section>\n<h2>\u00bfQu\u00e9 es CSS <code>calc()<\/code>?<\/h2>\n<p>En  <code>calc()<\/code>  permite realizar operaciones matem\u00e1ticas en CSS. Toma una expresi\u00f3n y devuelve un \u00fanico valor calculado. Puede sumar, restar, multiplicar y dividir valores, aunque utilicen unidades diferentes.  <\/p>\n<pre><code>width: calc(100% - 2rem);<\/code><\/pre>\n<p>Esta opci\u00f3n es muy \u00fatil cuando el dise\u00f1o depende de una combinaci\u00f3n de unidades relativas y fijas.<\/p>\n<h3>Operaciones v\u00e1lidas en el interior  <code>calc()<\/code><\/h3>\n<ul>\n<li><code>+<\/code>  (adici\u00f3n)<\/li>\n<li><code>-<\/code>  (resta)<\/li>\n<li><code>*<\/code>  (multiplicaci\u00f3n)<\/li>\n<li><code>\/<\/code>  (divisi\u00f3n)<\/li>\n<\/ul>\n<p>Ejemplos:<\/p>\n<pre><code>.sidebar {\n  width: calc(25% - 20px);\n}\n\n.main {\n  width: calc(75% - 20px);\n}<\/code><\/pre>\n<p>Aqu\u00ed, cada columna tiene una anchura proporcional, pero tiene en cuenta un valor de medianil fijo.<\/p>\n<h3>Casos de uso comunes para  <code>calc()<\/code><\/h3>\n<h3>1. Relaciones de disposici\u00f3n complejas<\/h3>\n<p>Los dise\u00f1os a menudo necesitan \u00abX es igual a 100% menos algo\u00bb.  <code>calc()<\/code>  expresa esa l\u00f3gica directamente:<\/p>\n<pre><code>.content {\n  height: calc(100vh - 60px); \/* viewport height minus fixed header height *\/\n}<\/code><\/pre>\n<p>Esto es \u00fatil para dise\u00f1os de altura completa en los que el contenido debe llenar el resto de la pantalla por debajo de un encabezado fijo.<\/p>\n<h3>2. Mezcla de diferentes unidades<\/h3>\n<p>Puede combinar porcentajes con p\u00edxeles, rems y unidades de ventana gr\u00e1fica:<\/p>\n<pre><code>.container {\n  max-width: calc(100% - 3rem);\n  padding-inline: calc(1rem + 1vw);\n}<\/code><\/pre>\n<p>Esto le permite ajustar el espaciado y el tama\u00f1o de una forma que los valores est\u00e1ticos no pueden.<\/p>\n<h3>3. Alineaci\u00f3n y desplazamiento precisos<\/h3>\n<p><code>calc()<\/code>  es \u00fatil cuando los elementos deben alinearse en relaci\u00f3n con el tama\u00f1o de otro elemento o una combinaci\u00f3n de factores.<\/p>\n<pre><code>.badge {\n  position: absolute;\n  top: calc(100% + 0.5rem); \/* below its parent *\/\n  left: 50%;\n  transform: translateX(-50%);\n}<\/code><\/pre>\n<p>En lugar de adivinar el desplazamiento de los p\u00edxeles, puede calcular la posici\u00f3n exacta bas\u00e1ndose en las dimensiones existentes.<\/p>\n<h3>4. Utilizaci\u00f3n de <code>calc()<\/code> con propiedades personalizadas<\/h3>\n<p>Al igual que  <code>clamp()<\/code>,  <code>calc()<\/code>  funciona muy bien con propiedades personalizadas:<\/p>\n<pre><code>:root {\n  --sidebar-width: 280px;\n}\n\n.main {\n  width: calc(100% - var(--sidebar-width));\n}<\/code><\/pre>\n<p>Al cambiar <code>--sidebar-width<\/code> se actualiza el dise\u00f1o sin necesidad de editar varias reglas.<\/p>\n<\/section>\n<p><!-- Differences --><\/p>\n<section>\n<h2>Principales diferencias entre <code>clamp()<\/code> y  <code>calc()<\/code><\/h2>\n<p>A primera vista, ambas funciones tratan de n\u00fameros y unidades, pero representan ideas diferentes:<\/p>\n<table>\n<thead>\n<tr>\n<th>Caracter\u00edstica<\/th>\n<th><code>clamp()<\/code><\/th>\n<th><code>calc()<\/code><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Idea central<\/td>\n<td>Restringir un valor entre un m\u00ednimo y un m\u00e1ximo<\/td>\n<td>Calcular un valor a partir de una expresi\u00f3n aritm\u00e9tica<\/td>\n<\/tr>\n<tr>\n<td>Comportamiento<\/td>\n<td>Valor de fluido con l\u00edmites<\/td>\n<td>Valor calculado \u00fanico (sin m\u00ednimo\/m\u00e1ximo incorporado)<\/td>\n<\/tr>\n<tr>\n<td>Uso t\u00edpico<\/td>\n<td>Tipograf\u00eda, espaciado, tama\u00f1o adaptable<\/td>\n<td>Matem\u00e1ticas de maquetaci\u00f3n, desplazamientos, mezcla de unidades<\/td>\n<\/tr>\n<tr>\n<td>Seguridad<\/td>\n<td>Evita los extremos por dise\u00f1o<\/td>\n<td>Puede desbordarse o encogerse demasiado si no se dise\u00f1a con cuidado<\/td>\n<\/tr>\n<tr>\n<td>Forma sint\u00e1ctica<\/td>\n<td><code>clamp(min, preferred, max)<\/code><\/td>\n<td><code>calc(expression)<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Puedes verlo de esta manera:<\/p>\n<ul>\n<li><strong><code>clamp()<\/code>  = \u00abUn valor que puede moverse, pero nunca m\u00e1s all\u00e1 de estos l\u00edmites\u00bb.<\/strong><\/li>\n<li><strong><code>calc()<\/code>  = \u00abToma estos n\u00fameros y unidades y calcula un valor \u00fanico\u00bb.<\/strong><\/li>\n<\/ul>\n<h3>Utilizaci\u00f3n conjunta de <code>clamp()<\/code> y <code>calc()<\/code> <\/h3>\n<p>Estas funciones no son mutuamente excluyentes. Puede anidar <code>calc()<\/code> dentro de <code>clamp()<\/code> para expresar l\u00f3gica compleja con l\u00edmites seguros: <\/p>\n<pre><code>font-size: clamp(1rem, calc(0.5rem + 2vw), 2.5rem);<\/code><\/pre>\n<p>Aqu\u00ed, el valor preferido es en s\u00ed mismo un c\u00e1lculo basado en la anchura de la ventana gr\u00e1fica m\u00e1s un tama\u00f1o base. El m\u00ednimo y el m\u00e1ximo garantizan la legibilidad. <\/p>\n<\/section>\n<p><!-- When NOT to use --><\/p>\n<section>\n<h2>Un \u00ablugar especial\u00bb donde no se debe utilizar <code>clamp()<\/code> o  <code>calc()<\/code><\/h2>\n<p>Aunque  <code>clamp()<\/code>  y  <code>calc()<\/code>  son potentes, hay situaciones en las que son innecesarios o pueden empeorar las cosas. Un \u00ablugar especial\u00bb particularmente importante en el que hay que pensar detenidamente es el <strong>tama\u00f1o de la fuente ra\u00edz<\/strong>. <\/p>\n<h3>Tama\u00f1o de fuente ra\u00edz (<code>html { font-size: ... }<\/code>) y preferencias del usuario<\/h3>\n<p>Puede ser tentador utilizar  <code>clamp()<\/code>  en el tama\u00f1o de fuente ra\u00edz para que todo el sitio escale con fluidez:<\/p>\n<pre><code>html {\n  font-size: clamp(14px, 1.5vw, 18px);\n}<\/code><\/pre>\n<p><strong>Esto parece atractivo, pero tiene un inconveniente importante:<\/strong> puede interferir con las preferencias del usuario. Muchos usuarios, especialmente los que tienen <a title=\"leer m\u00e1s sobre dise\u00f1o web para lov vision people\" href=\"https:\/\/equalizedigital.com\/low-vision-website-accessibity-visual-impairments\/\" target=\"_blank\" rel=\"noopener\">baja visi\u00f3n<\/a>, aumentan el tama\u00f1o de la fuente por defecto en el navegador o en el sistema operativo. Cuando se controla agresivamente el tama\u00f1o de la fuente ra\u00edz con <code>clamp()<\/code> o la compleja l\u00f3gica de <code>calc()<\/code>, se puede:  <\/p>\n<ul>\n<li>Reducir la eficacia de sus ajustes personalizados.<\/li>\n<li>Hacer el texto m\u00e1s peque\u00f1o de lo que el usuario espera en algunas pantallas.<\/li>\n<li>Causar problemas de accesibilidad a las personas que dependen de valores por defecto m\u00e1s grandes.<\/li>\n<\/ul>\n<p>Por este motivo, muchos desarrolladores preocupados por la accesibilidad prefieren:<\/p>\n<ul>\n<li>Deje <code>html { font-size }<\/code> como navegador por defecto (normalmente <code>16px<\/code>).<\/li>\n<li>Utilice <code>rem<\/code> unidades en todo el dise\u00f1o.<\/li>\n<li>Aplique <code>clamp()<\/code> a componentes o t\u00edtulos espec\u00edficos, no a la ra\u00edz.<\/li>\n<\/ul>\n<p>En otras palabras, el <strong>\u00ablugar especial\u00bb<\/strong> donde debe tener mucho cuidado al utilizar <code>clamp()<\/code> o <code>calc()<\/code> es el tama\u00f1o de fuente ra\u00edz, porque afecta directamente a la accesibilidad y al control del usuario.<\/p>\n<h3>Otras situaciones en las que conviene evitarlos<\/h3>\n<h3>1. Animaciones y transiciones cr\u00edticas<\/h3>\n<p>Puede utilizar  <code>calc()<\/code>  y  <code>clamp()<\/code>  en propiedades animadas, pero si la l\u00f3gica es demasiado compleja, puede ser dif\u00edcil de predecir y depurar. Para animaciones b\u00e1sicas, los valores simples son m\u00e1s f\u00e1ciles de trabajar y razonar. <\/p>\n<h3>2. Compatibilidad con navegadores muy antiguos o heredados<\/h3>\n<p>En entornos que deben admitir navegadores antiguos (por ejemplo, aplicaciones empresariales heredadas que ejecutan versiones obsoletas),  <code>clamp()<\/code>  y  <code>calc()<\/code>  pueden no ser totalmente compatibles. En esos casos, es posible que: <\/p>\n<ul>\n<li>Proporcione primero un valor alternativo sencillo.<\/li>\n<li>A continuaci\u00f3n, an\u00falelo con <code>calc()<\/code> o <code>clamp()<\/code> para los navegadores modernos.<\/li>\n<\/ul>\n<pre><code>.box {\n  width: 100%;               \/* fallback *\/\n  width: calc(100% - 2rem);  \/* enhanced *\/\n}<\/code><\/pre>\n<h3>3. Cuando basta con simples valores est\u00e1ticos<\/h3>\n<p>A veces no es necesario que un dise\u00f1o sea fluido para una propiedad concreta. A\u00f1adir <code>clamp()<\/code> o <code>calc()<\/code> s\u00f3lo hace que el CSS sea m\u00e1s dif\u00edcil de entender. Si un valor nunca cambia a trav\u00e9s de los puntos de interrupci\u00f3n, un valor fijo simple es a menudo la mejor opci\u00f3n.  <\/p>\n<\/section>\n<p><!-- Why you SHOULD use --><\/p>\n<section>\n<h2>Por qu\u00e9 debe utilizar <code>clamp()<\/code> y <code>calc()<\/code> en la mayor\u00eda de los dem\u00e1s lugares<\/h2>\n<p>Fuera de algunos casos especiales,  <code>clamp()<\/code>  y  <code>calc()<\/code>  puede mejorar dr\u00e1sticamente la calidad de su CSS.<\/p>\n<h3>1. CSS m\u00e1s limpio y expresivo<\/h3>\n<p>En lugar de m\u00faltiples consultas de medios como:<\/p>\n<pre><code>h1 {\n  font-size: 2rem;\n}\n\n@media (min-width: 768px) {\n  h1 {\n    font-size: 2.5rem;\n  }\n}\n\n@media (min-width: 1200px) {\n  h1 {\n    font-size: 3rem;\n  }\n}<\/code><\/pre>\n<p>Puedes escribir:<\/p>\n<pre><code>h1 {\n  font-size: clamp(2rem, 4vw, 3rem);\n}<\/code><\/pre>\n<p>Esto es m\u00e1s conciso, m\u00e1s f\u00e1cil de mantener y proporciona transiciones m\u00e1s suaves entre tama\u00f1os en lugar de saltos bruscos en los puntos de ruptura.<\/p>\n<h3>2. Capacidad de respuesta real de los fluidos<\/h3>\n<p>El dise\u00f1o responsive cl\u00e1sico sol\u00eda significar \u00abapilado en pantallas peque\u00f1as, de lado a lado en pantallas grandes\u00bb. Los patrones de dise\u00f1o modernos prefieren un comportamiento m\u00e1s fluido. <code>clamp()<\/code> y <code>calc()<\/code> permiten definir reglas como: <\/p>\n<ul>\n<li>\u00abEl relleno crece con el ancho de la ventana gr\u00e1fica, pero nunca supera este valor\u00bb.<\/li>\n<li>\u00abLa barra lateral es el 25% de la anchura menos un espacio fijo\u00bb.<\/li>\n<li>\u00abLos botones se hacen m\u00e1s grandes en las pantallas grandes, pero siguen siendo utilizables en las peque\u00f1as\u00bb.<\/li>\n<\/ul>\n<p>Ejemplo que combina ambos:<\/p>\n<pre><code>.button {\n  padding-inline: clamp(0.75rem, 1rem + 1vw, 2rem);\n  padding-block: clamp(0.5rem, 0.5rem + 0.5vw, 1rem);\n  font-size: clamp(0.9rem, 1vw + 0.8rem, 1.2rem);\n}<\/code><\/pre>\n<p>Esto hace que el bot\u00f3n se sienta \u00abcorrecto\u00bb en una amplia gama de tama\u00f1os sin microajustar cada punto de rotura.<\/p>\n<h3>3. Dise\u00f1os de futuro<\/h3>\n<p>Los dispositivos no dejan de cambiar: plegables, monitores ultraanchos, tabletas grandes, tel\u00e9fonos peque\u00f1os. Escribir valores fijos para todos ellos no es realista. Al expresar relaciones en lugar de n\u00fameros fijos, tu CSS se adapta mejor a los nuevos dispositivos.  <\/p>\n<p><code>clamp()<\/code>  y <code>calc()<\/code> le ayudan a codificar reglas como \u00abcrezca con la ventana gr\u00e1fica, pero mant\u00e9ngase dentro de este rango seguro\u00bb o \u00abtenga este tama\u00f1o en relaci\u00f3n con ese elemento\u00bb. Estas reglas envejecen mejor que los puntos de ruptura fijos. <\/p>\n<h3>4. Mejores sistemas de dise\u00f1o y tematizaci\u00f3n<\/h3>\n<p>Cuando se combinan:<\/p>\n<ul>\n<li>Propiedades personalizadas (<code>var(--token)<\/code>)<\/li>\n<li><code>clamp()<\/code>  y  <code>calc()<\/code><\/li>\n<li>Nombres de clases sem\u00e1nticas (por ejemplo, <code>.heading-xl<\/code>, <code>.space-lg<\/code>)<\/li>\n<\/ul>\n<p>se obtiene un sistema de dise\u00f1o f\u00e1cil de escalar y tematizar. Cambiando un par de fichas se puede ajustar el espaciado, la tipograf\u00eda y el dise\u00f1o de forma controlada y predecible. <\/p>\n<h3>5. Menos trucos de maquetaci\u00f3n, CSS m\u00e1s intencionado<\/h3>\n<p>Antes de que estas funciones fueran habituales, los desarrolladores sol\u00edan recurrir a valores de prueba y error y a n\u00fameros m\u00e1gicos.  <code>calc()<\/code>  y  <code>clamp()<\/code>  le permiten describir la relaci\u00f3n directamente:<\/p>\n<pre><code>.layout {\n  \/* instead of a random 732px that just \"happens\" to work *\/\n  max-width: calc(1200px - 2 * 24px);\n}<\/code><\/pre>\n<p>Esto hace que su CSS sea m\u00e1s auto-documentado: en el futuro usted (u otro desarrollador) puede mirar el c\u00f3digo y entender de d\u00f3nde vienen los n\u00fameros.<\/p>\n<\/section>\n<p><!-- Conclusion --><\/p>\n<section>\n<h2>Conclusi\u00f3n<\/h2>\n<p><code>clamp()<\/code>  y <code>calc()<\/code> son dos de las herramientas m\u00e1s potentes del CSS moderno. No son<br \/>\nintercambiables, pero se complementan: <\/p>\n<ul>\n<li><strong>Utilice <code>clamp()<\/code><\/strong> para crear valores fluidos con l\u00edmites m\u00ednimos y m\u00e1ximos seguros.<\/li>\n<li><strong>Utilice <code>calc()<\/code><\/strong> para expresar matem\u00e1ticas de trazado, combinar unidades y definir relaciones precisas.<\/li>\n<li><strong>Tenga mucho cuidado<\/strong> al utilizarlos en el tama\u00f1o de fuente ra\u00edz, donde m\u00e1s importan las preferencias del usuario y la accesibilidad.<\/li>\n<li><strong>Util\u00edcelos ampliamente<\/strong> para la tipograf\u00eda, el espaciado, el tama\u00f1o de los componentes y la l\u00f3gica de dise\u00f1o en casi todas partes.<\/li>\n<\/ul>\n<p>Una vez que te sientas c\u00f3modo con estas funciones, te dar\u00e1s cuenta de que muchos de tus viejos patrones de media-query-heavy pueden ser reemplazados por un pu\u00f1ado de expresivas y flexibles reglas CSS &#8211; y tus dise\u00f1os se adaptar\u00e1n m\u00e1s suavemente a lo que sea que traiga el futuro de los dispositivos. Otros comandos que realmente deber\u00edas conocer son vw y vh, lee m\u00e1s sobre ello <a title=\"Aprende a utilizar vw y vh\" href=\"https:\/\/mallorcagraphics.com\/es\/blog\/por-que-deberia-utilizar-vw-y-vh-en-lugar-de-px-en-el-desarrollo-web\/\">aqu\u00ed<\/a>. <\/p>\n<p>Wikipedia: <a title=\"M\u00e1s informaci\u00f3n sobre Clamp en Wikipedia\" href=\"https:\/\/en.wikipedia.org\/wiki\/Clamp_(function)\" target=\"_blank\" rel=\"nofollow noopener\">Pinza (funci\u00f3n)<\/a><\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Entendiendo CSS clamp() vs calc() en el Desarrollo Web Moderno Este art\u00edculo es una exploraci\u00f3n t\u00e9cnica detallada de dos potentes funciones CSS: clamp() y calc(). Aunque ambas se utilizan con frecuencia en el dise\u00f1o adaptable y fluido, tienen prop\u00f3sitos muy diferentes. A continuaci\u00f3n, explicamos c\u00f3mo funciona cada funci\u00f3n, por qu\u00e9 son importantes y c\u00f3mo pueden [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":987517061,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3,"footnotes":""},"categories":[44],"tags":[],"class_list":["post-987517060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse? - Mallorca Graphics<\/title>\n<meta name=\"description\" content=\"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?\" \/>\n<meta property=\"og:description\" content=\"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/\" \/>\n<meta property=\"og:site_name\" content=\"Mallorca Graphics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MallorcaGraphics\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-01T08:23:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mallorca Graphics\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mallorca Graphics\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/\"},\"author\":{\"name\":\"Mallorca Graphics\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#\\\/schema\\\/person\\\/52c9968b2c5077929df1218c7a7d17fa\"},\"headline\":\"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?\",\"datePublished\":\"2025-12-01T08:23:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/\"},\"wordCount\":2210,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Untitled-design.jpg\",\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/\",\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/\",\"name\":\"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse? - Mallorca Graphics\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Untitled-design.jpg\",\"datePublished\":\"2025-12-01T08:23:50+00:00\",\"description\":\"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#primaryimage\",\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Untitled-design.jpg\",\"contentUrl\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/Untitled-design.jpg\",\"width\":900,\"height\":600,\"caption\":\"Pinza vs Calc\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/\",\"name\":\"Mallorca Graphics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#organization\",\"name\":\"Mallorca Graphics\",\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Logo_header_200px.png\",\"contentUrl\":\"https:\\\/\\\/mallorcagraphics.com\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Logo_header_200px.png\",\"width\":200,\"height\":61,\"caption\":\"Mallorca Graphics\"},\"image\":{\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/MallorcaGraphics\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/mallorca-graphics\\\/\",\"https:\\\/\\\/www.instagram.com\\\/mallorca.graphics\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@Mallorca.Graphics\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/#\\\/schema\\\/person\\\/52c9968b2c5077929df1218c7a7d17fa\",\"name\":\"Mallorca Graphics\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g\",\"caption\":\"Mallorca Graphics\"},\"sameAs\":[\"https:\\\/\\\/mallorcagraphics.com\"],\"url\":\"https:\\\/\\\/mallorcagraphics.com\\\/es\\\/blog\\\/author\\\/pedro-alvarez\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse? - Mallorca Graphics","description":"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/","og_locale":"es_ES","og_type":"article","og_title":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?","og_description":"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.","og_url":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/","og_site_name":"Mallorca Graphics","article_publisher":"https:\/\/www.facebook.com\/MallorcaGraphics","article_published_time":"2025-12-01T08:23:50+00:00","og_image":[{"width":900,"height":600,"url":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg","type":"image\/jpeg"}],"author":"Mallorca Graphics","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Mallorca Graphics","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#article","isPartOf":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/"},"author":{"name":"Mallorca Graphics","@id":"https:\/\/mallorcagraphics.com\/es\/#\/schema\/person\/52c9968b2c5077929df1218c7a7d17fa"},"headline":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?","datePublished":"2025-12-01T08:23:50+00:00","mainEntityOfPage":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/"},"wordCount":2210,"commentCount":0,"publisher":{"@id":"https:\/\/mallorcagraphics.com\/es\/#organization"},"image":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#primaryimage"},"thumbnailUrl":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg","articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/","url":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/","name":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse? - Mallorca Graphics","isPartOf":{"@id":"https:\/\/mallorcagraphics.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#primaryimage"},"image":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#primaryimage"},"thumbnailUrl":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg","datePublished":"2025-12-01T08:23:50+00:00","description":"Descubre la diferencia entre CSS clamp vs calc, c\u00f3mo funcionan clamp vs calc en el dise\u00f1o responsivo y cu\u00e1ndo usar clamp vs calc para tipograf\u00eda y dise\u00f1os fluidos.","breadcrumb":{"@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#primaryimage","url":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg","contentUrl":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2025\/11\/Untitled-design.jpg","width":900,"height":600,"caption":"Pinza vs Calc"},{"@type":"BreadcrumbList","@id":"https:\/\/mallorcagraphics.com\/es\/blog\/css-clamp-vs-calc-que-es-y-como-debe-utilizarse\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mallorcagraphics.com\/es\/"},{"@type":"ListItem","position":2,"name":"CSS Clamp vs Calc: \u00bfQu\u00e9 es y c\u00f3mo debe utilizarse?"}]},{"@type":"WebSite","@id":"https:\/\/mallorcagraphics.com\/es\/#website","url":"https:\/\/mallorcagraphics.com\/es\/","name":"Mallorca Graphics","description":"","publisher":{"@id":"https:\/\/mallorcagraphics.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mallorcagraphics.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mallorcagraphics.com\/es\/#organization","name":"Mallorca Graphics","url":"https:\/\/mallorcagraphics.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mallorcagraphics.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2026\/01\/Logo_header_200px.png","contentUrl":"https:\/\/mallorcagraphics.com\/wp-content\/uploads\/2026\/01\/Logo_header_200px.png","width":200,"height":61,"caption":"Mallorca Graphics"},"image":{"@id":"https:\/\/mallorcagraphics.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MallorcaGraphics","https:\/\/www.linkedin.com\/company\/mallorca-graphics\/","https:\/\/www.instagram.com\/mallorca.graphics\/","https:\/\/www.youtube.com\/@Mallorca.Graphics\/"]},{"@type":"Person","@id":"https:\/\/mallorcagraphics.com\/es\/#\/schema\/person\/52c9968b2c5077929df1218c7a7d17fa","name":"Mallorca Graphics","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e42fd41bbd15ce9169bafd9a4a547dc85d26eb397c3a9c825cd9face8805b660?s=96&d=mm&r=g","caption":"Mallorca Graphics"},"sameAs":["https:\/\/mallorcagraphics.com"],"url":"https:\/\/mallorcagraphics.com\/es\/blog\/author\/pedro-alvarez\/"}]}},"_links":{"self":[{"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/posts\/987517060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/comments?post=987517060"}],"version-history":[{"count":0,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/posts\/987517060\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/media\/987517061"}],"wp:attachment":[{"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/media?parent=987517060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/categories?post=987517060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mallorcagraphics.com\/es\/wp-json\/wp\/v2\/tags?post=987517060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}